Dev

apps/ui/components/navbar.tsx

@@ -126,7 +126,7 @@ export function Navbar() {
                       intent="outline"
                       className="h-9 items-center"
                     >
-                      <div className="font-patika-medium text-[1rem] leading-[1.5rem] flex items-center gap-2">
+                      <div className="flex items-center gap-2 font-patika-medium text-[1rem] leading-[1.5rem]">
                         <IconSearch className="size-4" />
                         <span className="text-muted-fg">Search...</span>
                         <Keyboard keys={["⌘", "K"]} className="-mr-1" />

apps/ui/components/ui/button.tsx

@@ -9,7 +9,7 @@ import {
 import { tv } from "tailwind-variants"
 
 import { focusButtonStyles } from "./primitive"
-import { Typography } from "./typography";
+import { Typography } from "./typography"
 
 const buttonStyles = tv({
   extend: focusButtonStyles,

apps/ui/components/ui/calendar.tsx

@@ -170,8 +170,7 @@ const SelectYear = ({ state }: { state: CalendarState }) => {
       aria-label="Select year"
       selectedKey={20}
       onSelectionChange={(value) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        state.setFocusedDate(years[Number(value)]?.value)
+        state.setFocusedDate(years[Number(value)]?.value!)
       }}
     >
       <Select.Trigger className="h-8 w-24 text-xs data-focused:ring-3 **:data-[slot=select-value]:inline-block **:data-[slot=select-value]:truncate group-data-open:ring-3" />
@@ -199,4 +198,4 @@ const CalendarGridHeader = () => {
 }
 
 export type { CalendarProps }
-export { Calendar, CalendarHeader, CalendarGridHeader }
+export { Calendar, CalendarGridHeader, CalendarHeader }

apps/ui/components/ui/date-picker.tsx

@@ -97,33 +97,33 @@ const DatePicker = <T extends DateValue>({
       {...props}
       className={composeTailwindRenderProps(className, "group flex w-full flex-col gap-y-1")}
     >
-      {label && 
+      {label && (
         <Typography as="div">
           <Label isRequired={props.isRequired}>{label}</Label>
         </Typography>
-      }
-      <FieldGroup className="min-w-40 h-10">
+      )}
+      <FieldGroup className="h-10 min-w-40">
         <DateInput className="w-full px-2 text-base sm:text-sm" />
         <DatePickerIcon />
       </FieldGroup>
-      {description && 
+      {description && (
         <Typography as="div">
           <Description>{description}</Description>
         </Typography>
-      }
-      
+      )}
+
       {(leftDescription || errorMessage || rightDescription) && (
         <Typography as="div">
-          <div className="mt-1 flex justify-between text-sm text-muted-fg">
+          <div className="mt-1 flex justify-between text-muted-fg text-sm">
             <div>{errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}</div>
             <div>{rightDescription}</div>
           </div>
         </Typography>
       )}
-      
+
       <DatePickerOverlay />
     </DatePickerPrimitive>
   )
 }
 export type { DatePickerProps, DateValue, ValidationResult }
-export { DatePicker, DatePickerIcon, DatePickerOverlay }
+export { DatePicker, DatePickerIcon, DatePickerOverlay }

apps/ui/components/ui/dropdown.tsx

@@ -85,8 +85,8 @@ const DropdownItem = ({ className, ...props }: DropdownItemProps) => {
     >
       {composeRenderProps(props.children, (children, { isSelected }) => (
         <>
-          {isSelected && <IconCheck className="-mx-0.5 mr-2" data-slot="checked-icon" />}
           {typeof children === "string" ? <DropdownLabel>{children}</DropdownLabel> : children}
+          {isSelected && <IconCheck className="mr-2 ml-auto" data-slot="checked-icon" />}
         </>
       ))}
     </ListBoxItemPrimitive>
@@ -169,14 +169,14 @@ const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof K
  * Note: This is not exposed component, but it's used in other components to render dropdowns.
  * @internal
  */
-export type { DropdownSectionProps, DropdownLabelProps, DropdownItemProps, DropdownItemDetailProps }
+export type { DropdownItemDetailProps, DropdownItemProps, DropdownLabelProps, DropdownSectionProps }
 export {
-  DropdownSeparator,
   DropdownItem,
-  DropdownLabel,
-  DropdownKeyboard,
-  dropdownItemStyles,
   DropdownItemDetails,
+  dropdownItemStyles,
+  DropdownKeyboard,
+  DropdownLabel,
   DropdownSection,
   dropdownSectionStyles,
+  DropdownSeparator,
 }

apps/ui/components/ui/field.tsx

@@ -20,7 +20,7 @@ import {
 import { tv } from "tailwind-variants"
 
 import { composeTailwindRenderProps, focusStyles } from "./primitive"
-import { Typography } from "./typography";
+import { Typography } from "./typography"
 
 interface FieldProps {
   label?: string
@@ -116,13 +116,13 @@ const FieldGroup = ({ className, ...props }: GroupProps) => {
   return (
     <Typography as="div">
       <Group
-          {...props}
-          className={composeRenderProps(className, (className, renderProps) =>
-              fieldGroupStyles({
-                ...renderProps,
-                className,
-              }),
-          )}
+        {...props}
+        className={composeRenderProps(className, (className, renderProps) =>
+          fieldGroupStyles({
+            ...renderProps,
+            className,
+          }),
+        )}
       />
     </Typography>
   )

apps/ui/components/ui/keyboard.tsx

@@ -5,7 +5,7 @@ import { tv } from "tailwind-variants"
 
 const keyboardStyles = tv({
   slots: {
-    base: "hidden text-current/70 group-hover:text-fg group-disabled:opacity-50 group-data-focused:text-fg group-data-focused:opacity-90 lg:inline-flex items-center forced-colors:group-data-focused:text-[HighlightText]",
+    base: "hidden items-center text-current/70 group-hover:text-fg group-disabled:opacity-50 group-data-focused:text-fg group-data-focused:opacity-90 lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]",
     kbd: "inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase",
   },
 })

apps/ui/components/ui/list-box.tsx

@@ -20,7 +20,7 @@ const ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) =>
     {...props}
     className={composeTailwindRenderProps(
       className,
-      "flex grid max-h-96 w-full min-w-56 grid-cols-[auto_1fr] flex-col gap-y-1 overflow-auto overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5 *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",
+      "grid max-h-96 w-full min-w-56 grid-cols-[auto_1fr] flex-col gap-y-1 overflow-auto overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5 *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",
     )}
   />
 )

apps/ui/components/ui/select.tsx

@@ -68,22 +68,24 @@ const Select = <T extends object>({
     >
       {(values) => (
         <>
-          {label && 
+          {label && (
             <Typography as="div">
               <Label isRequired={props.isRequired}>{label}</Label>
             </Typography>
-          }
+          )}
           {typeof props.children === "function" ? props.children(values) : props.children}
-          {description && 
+          {description && (
             <Typography as="div">
               <Description>{description}</Description>
             </Typography>
-          }
-          
+          )}
+
           {(leftDescription || errorMessage || rightDescription) && (
             <Typography as="div">
-              <div className="mt-1 flex justify-between text-sm text-muted-fg">
-                <div>{errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}</div>
+              <div className="mt-1 flex justify-between text-muted-fg text-sm">
+                <div>
+                  {errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}
+                </div>
                 <div>{rightDescription}</div>
               </div>
             </Typography>
@@ -169,4 +171,4 @@ Select.Trigger = SelectTrigger
 Select.List = SelectList
 
 export type { SelectProps, SelectTriggerProps }
-export { Select }
+export { Select }

apps/ui/components/ui/text-field.tsx

@@ -10,11 +10,11 @@ import {
   type TextFieldProps as TextFieldPrimitiveProps,
 } from "react-aria-components"
 
-import {FieldError, FieldProps} from "./field"
+import { FieldError, type FieldProps } from "./field"
 import { Description, FieldGroup, Input, Label } from "./field"
 import { Loader } from "./loader"
 import { composeTailwindRenderProps } from "./primitive"
-import {Typography} from "./typography";
+import { Typography } from "./typography"
 
 type InputType = Exclude<TextInputDOMProps["type"], "password">
 
@@ -40,20 +40,20 @@ interface NonRevealableTextFieldProps extends BaseTextFieldProps {
 type TextFieldProps = RevealableTextFieldProps | NonRevealableTextFieldProps
 
 const TextField = ({
-                     placeholder,
-                     label,
-                     description,
-                     errorMessage,
-                     prefix,
-                     suffix,
-                     isPending,
-                     className,
-                     isRevealable,
-                     type,
-                     leftDescription,
-                     rightDescription,
-                     ...props
-                   }: TextFieldProps) => {
+  placeholder,
+  label,
+  description,
+  errorMessage,
+  prefix,
+  suffix,
+  isPending,
+  className,
+  isRevealable,
+  type,
+  leftDescription,
+  rightDescription,
+  ...props
+}: TextFieldProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
   const [autoError, setAutoError] = useState<string | null>(null)
 
@@ -76,68 +76,70 @@ const TextField = ({
   }
 
   return (
-      <TextFieldPrimitive
-          type={inputType}
-          {...props}
-          className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1")}
-      >
-        {!props.children ? (
-            <>
-              {label &&
-                  <Typography as="div">
-                      <Label isRequired={props.isRequired}>{label}</Label>
-                  </Typography>
-              }
-              <FieldGroup
-                  isDisabled={props.isDisabled}
-                  isInvalid={!!errorMessage || !!autoError}
-                  data-loading={isPending ? "true" : undefined}
+    <TextFieldPrimitive
+      type={inputType}
+      {...props}
+      className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1")}
+    >
+      {!props.children ? (
+        <>
+          {label && (
+            <Typography as="div">
+              <Label isRequired={props.isRequired}>{label}</Label>
+            </Typography>
+          )}
+          <FieldGroup
+            isDisabled={props.isDisabled}
+            isInvalid={!!errorMessage || !!autoError}
+            data-loading={isPending ? "true" : undefined}
+          >
+            {prefix && typeof prefix === "string" ? (
+              <Typography as="div">
+                <span className="ml-2 text-muted-fg">{prefix}</span>
+              </Typography>
+            ) : (
+              <Typography as="div">{prefix}</Typography>
+            )}
+            <Input placeholder={placeholder} onInvalid={handleInvalid} onInput={handleInput} />
+            {isRevealable ? (
+              <ButtonPrimitive
+                type="button"
+                aria-label="Toggle password visibility"
+                onPress={handleTogglePasswordVisibility}
+                className="relative mr-1 grid shrink-0 place-content-center rounded-sm border-transparent outline-hidden data-focus-visible:*:data-[slot=icon]:text-primary *:data-[slot=icon]:text-muted-fg"
               >
-                {prefix && typeof prefix === "string" ? (
-                    <Typography as="div"><span className="ml-2 text-muted-fg">{prefix}</span></Typography>
-                ) : (
-                    <Typography as="div">{prefix}</Typography>
-                )}
-                <Input
-                    placeholder={placeholder}
-                    onInvalid={handleInvalid}
-                    onInput={handleInput}
-                />
-                {isRevealable ? (
-                    <ButtonPrimitive
-                        type="button"
-                        aria-label="Toggle password visibility"
-                        onPress={handleTogglePasswordVisibility}
-                        className="relative mr-1 grid shrink-0 place-content-center rounded-sm border-transparent outline-hidden data-focus-visible:*:data-[slot=icon]:text-primary *:data-[slot=icon]:text-muted-fg"
-                    >
-                      {isPasswordVisible ? <IconEyeClosed /> : <IconEye />}
-                    </ButtonPrimitive>
-                ) : isPending ? (
-                    <Loader variant="spin" />
-                ) : suffix ? (
-                    typeof suffix === "string" ? (
-                        <span className="mr-2 text-muted-fg">{suffix}</span>
-                    ) : (
-                        suffix
-                    )
-                ) : null}
-              </FieldGroup>
-
-              {description && <Typography as="div"><Description>{description}</Description></Typography>}
-
-              {(leftDescription || autoError || rightDescription) && (
-                 <Typography as="div">
-                     <div className="mt-1 flex justify-between text-sm text-muted-fg">
-                         <div>{autoError ? <FieldError>{autoError}</FieldError> : leftDescription}</div>
-                         <div>{rightDescription}</div>
-                     </div>
-                 </Typography>
-              )}
-            </>
-        ) : (
-            props.children
-        )}
-      </TextFieldPrimitive>
+                {isPasswordVisible ? <IconEyeClosed /> : <IconEye />}
+              </ButtonPrimitive>
+            ) : isPending ? (
+              <Loader variant="spin" />
+            ) : suffix ? (
+              typeof suffix === "string" ? (
+                <span className="mr-2 text-muted-fg">{suffix}</span>
+              ) : (
+                suffix
+              )
+            ) : null}
+          </FieldGroup>
+
+          {description && (
+            <Typography as="div">
+              <Description>{description}</Description>
+            </Typography>
+          )}
+
+          {(leftDescription || autoError || rightDescription) && (
+            <Typography as="div">
+              <div className="mt-1 flex justify-between text-muted-fg text-sm">
+                <div>{autoError ? <FieldError>{autoError}</FieldError> : leftDescription}</div>
+                <div>{rightDescription}</div>
+              </div>
+            </Typography>
+          )}
+        </>
+      ) : (
+        props.children
+      )}
+    </TextFieldPrimitive>
   )
 }