@maestro-js/components 1.0.0-alpha.21 → 1.0.0-alpha.23

package/package.json

@@ -8,7 +8,7 @@
     "@types/react-dom": "^19.1.6",
     "react-pdf-hook": "^1.0.4",
     "vaul": "^1.1.2",
-    "@maestro-js/form": "1.0.0-alpha.21"
+    "@maestro-js/form": "1.0.0-alpha.23"
   },
   "peerDependencies": {
     "@bundled-es-modules/pdfjs-dist": "3.6.172-alpha.1",
@@ -26,9 +26,9 @@
     "react-router": ">=7",
     "vite-env-only": "^3.0.2",
     "vaul": ">=1",
-    "@maestro-js/form": "1.0.0-alpha.21"
+    "@maestro-js/form": "1.0.0-alpha.23"
   },
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "license": "UNLICENSED",
   "engines": {
     "node": ">=22.18.0"

package/src/components/alert-dialog.tsx

@@ -100,7 +100,10 @@ function AlertDialog_({
           'data-[exiting]:scale-95 data-[exiting]:opacity-0 data-[exiting]:translate-y-2'
         )}
       >
-        <Dialog className={tw('outline-none bg-white rounded-xl shadow-xl ring-1 ring-black/5 w-full', className)} role="alertdialog">
+        <Dialog
+          className={tw('outline-none bg-white rounded-xl shadow-xl ring-1 ring-black/5 w-full', className)}
+          role="alertdialog"
+        >
           {({ close }) => (
             <AlertDialogContext.Provider value={{ close }}>
               <ButtonGroupContext.Provider

package/src/components/avatar.tsx

@@ -48,7 +48,7 @@ function stringAvatar(name: string) {
 
   if (!first) return ''
 
-  const initials = names.length === 1 ? first[0] ?? '' : `${first[0] ?? ''}${last?.[0] ?? ''}`
+  const initials = names.length === 1 ? (first[0] ?? '') : `${first[0] ?? ''}${last?.[0] ?? ''}`
 
   return initials.toUpperCase()
 }

package/src/components/disclosure.tsx

@@ -92,11 +92,7 @@ function DisclosureHeader({
         />
         <span
           className={tw(
-            size === 'lg'
-              ? 'text-lg font-semibold'
-              : size === 'md'
-                ? 'text-base font-medium'
-                : 'text-sm font-medium',
+            size === 'lg' ? 'text-lg font-semibold' : size === 'md' ? 'text-base font-medium' : 'text-sm font-medium',
             isDisabled ? 'text-neutral-400' : 'text-neutral-700'
           )}
         >

package/src/components/helpers/form-field.tsx

@@ -76,34 +76,32 @@ type FieldGroupProps = {
   onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
-const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(
-  ({ children, className, onClick, ...opts }, ref) => {
-    const disabled = opts.isDisabled || opts.isReadonly
-    const shape = opts.shape === 'oval' ? 'rounded-full' : 'rounded'
+const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(({ children, className, onClick, ...opts }, ref) => {
+  const disabled = opts.isDisabled || opts.isReadonly
+  const shape = opts.shape === 'oval' ? 'rounded-full' : 'rounded'
 
-    return (
-      <Group
-        ref={ref}
-        className={tw(
-          'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
-          'focus-within:outline-2 focus-within:-outline-offset-1',
-          shape,
-          disabled && 'ring-neutral-200 bg-neutral-50 text-neutral-400 shadow-none cursor-not-allowed',
-          opts.isInvalid && 'ring-negative-300 bg-negative-50 focus-within:outline-negative-500',
-          opts.hasWarning && 'ring-notice-300 bg-notice-50 focus-within:outline-notice-500',
-          !opts.isInvalid &&
-            !opts.hasWarning &&
-            !disabled &&
-            'ring-black/10 hover:ring-black/20 focus-within:outline-primary-500',
-          className
-        )}
-        onClick={onClick}
-      >
-        {children}
-      </Group>
-    )
-  }
-)
+  return (
+    <Group
+      ref={ref}
+      className={tw(
+        'relative overflow-hidden ring-1 shadow-sm transition-all duration-200 max-w-96',
+        'focus-within:outline-2 focus-within:-outline-offset-1',
+        shape,
+        disabled && 'ring-neutral-200 bg-neutral-50 text-neutral-400 shadow-none cursor-not-allowed',
+        opts.isInvalid && 'ring-negative-300 bg-negative-50 focus-within:outline-negative-500',
+        opts.hasWarning && 'ring-notice-300 bg-notice-50 focus-within:outline-notice-500',
+        !opts.isInvalid &&
+          !opts.hasWarning &&
+          !disabled &&
+          'ring-black/10 hover:ring-black/20 focus-within:outline-primary-500',
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </Group>
+  )
+})
 
 const FieldInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   return (

package/src/components/link-tabs.tsx

@@ -36,7 +36,10 @@ export type LinkTabProps = {
 
 // --- LinkTabList ---
 
-const LinkTabListContext = React.createContext<{ color: TabColor; variant: TabVariant }>({ color: 'primary', variant: 'underline' })
+const LinkTabListContext = React.createContext<{ color: TabColor; variant: TabVariant }>({
+  color: 'primary',
+  variant: 'underline'
+})
 
 function LinkTabList({ children, className, color = 'primary', variant = 'underline' }: LinkTabListProps) {
   const containerRef = React.useRef<HTMLDivElement>(null)
@@ -48,11 +51,7 @@ function LinkTabList({ children, className, color = 'primary', variant = 'underl
         <div role="tablist" className={tw(tabListInnerClasses[variant], className)}>
           {children}
         </div>
-        <div
-          ref={indicatorRef}
-          className={getIndicatorClasses(variant, color)}
-          style={{ opacity: 0 }}
-        />
+        <div ref={indicatorRef} className={getIndicatorClasses(variant, color)} style={{ opacity: 0 }} />
       </div>
     </LinkTabListContext.Provider>
   )
@@ -73,13 +72,7 @@ function LinkTab({ to, children, className, disabled, replace, end }: LinkTabPro
       <span
         role="tab"
         aria-disabled="true"
-        className={tw(
-          baseClasses,
-          'outline-none',
-          TAB_INACTIVE_CLASSES,
-          TAB_DISABLED_CLASSES,
-          className
-        )}
+        className={tw(baseClasses, 'outline-none', TAB_INACTIVE_CLASSES, TAB_DISABLED_CLASSES, className)}
       >
         {children}
       </span>
@@ -97,7 +90,9 @@ function LinkTab({ to, children, className, disabled, replace, end }: LinkTabPro
           baseClasses,
           focusClasses,
           isActive
-            ? (variant === 'oval' ? TAB_OVAL_SELECTED_CLASSES : `${colors.text} font-bold`)
+            ? variant === 'oval'
+              ? TAB_OVAL_SELECTED_CLASSES
+              : `${colors.text} font-bold`
             : `${TAB_INACTIVE_CLASSES} hover:text-neutral-700`,
           className
         )

package/src/components/multi-file-input.tsx

@@ -162,7 +162,9 @@ export function MultiFileInput(props: MultiFileInputProps) {
                           <Icon name="document" className="h-5 w-5 text-neutral-400" />
                           <div className="min-w-0">
                             <p className="text-sm font-medium text-neutral-900 truncate">{fileName || 'File'}</p>
-                            {fileItem.file && <p className="text-xs text-neutral-500">{formatFileSize(fileItem.file.size)}</p>}
+                            {fileItem.file && (
+                              <p className="text-xs text-neutral-500">{formatFileSize(fileItem.file.size)}</p>
+                            )}
                           </div>
                         </div>
                         {!props.isDisabled && !props.isReadonly && (

package/src/components/numeric-tag-field.tsx

@@ -180,7 +180,13 @@ export function NumericTagField(props: NumericTagFieldProps) {
 
       <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
 
-      <FormFieldComponents.FieldGroup isDisabled={props.isDisabled} isInvalid={isInvalid} hasWarning={hasWarning} shape={props.shape} onClick={() => inputRef.current?.focus()}>
+      <FormFieldComponents.FieldGroup
+        isDisabled={props.isDisabled}
+        isInvalid={isInvalid}
+        hasWarning={hasWarning}
+        shape={props.shape}
+        onClick={() => inputRef.current?.focus()}
+      >
         <div className="flex flex-wrap items-center gap-1.5 px-3 py-1.5 min-h-[38px] w-full">
           {/* Display existing tags */}
           {tags.map((tag, index) => (

package/src/components/table/table-container.type-test.ts

@@ -28,7 +28,10 @@ type MyLocalization = TableLocalization<FC, SC>
 // String union → DefaultTableFilter (has options array with typed values, no `type` discriminant)
 const _selectFilter: TableFilterLocalization<StatusValue> = {
   label: 'Status',
-  options: [{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]
+  options: [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' }
+  ]
 }
 
 // Date range → DateRangeTableFilter (type: 'date-range', no value-typed options)

package/src/components/table/use-client-table.type-test.ts

@@ -67,10 +67,7 @@ function testLocalizationWithSelectFilter() {
     }
   })
 
-  type Loc = TableLocalization<
-    ReturnType<typeof table.getFilterConfig>,
-    ReturnType<typeof table.getSortConfig>
-  >
+  type Loc = TableLocalization<ReturnType<typeof table.getFilterConfig>, ReturnType<typeof table.getSortConfig>>
 
   type _LocFilterKeys = Expect<Equal<keyof Loc['filters'], 'status'>>
   type _LocSortKeys = Expect<Equal<keyof Loc['sorts'], 'newest' | 'oldest'>>
@@ -111,10 +108,7 @@ function testLocalizationWithDateRangeFilter() {
     }
   })
 
-  type Loc = TableLocalization<
-    ReturnType<typeof table.getFilterConfig>,
-    ReturnType<typeof table.getSortConfig>
-  >
+  type Loc = TableLocalization<ReturnType<typeof table.getFilterConfig>, ReturnType<typeof table.getSortConfig>>
 
   // Valid: date-range filter accepts DateRangeTableFilter form
   const _loc: Loc = {
@@ -207,10 +201,7 @@ function testNoFiltersOrSorts() {
     getRowId: (row) => row.id
   })
 
-  type Loc = TableLocalization<
-    ReturnType<typeof table.getFilterConfig>,
-    ReturnType<typeof table.getSortConfig>
-  >
+  type Loc = TableLocalization<ReturnType<typeof table.getFilterConfig>, ReturnType<typeof table.getSortConfig>>
 
   type _EmptyFilters = Expect<Equal<Loc['filters'], {}>>
   type _EmptySorts = Expect<Equal<Loc['sorts'], {}>>

package/src/components/table/use-server-table.type-test.ts

@@ -26,7 +26,11 @@ type Row = {
 // =============================================================================
 
 function testFilterAndSortInference() {
-  const serverTable = null as unknown as ServerTable.ServerTable<Row, { status: 'active' | 'inactive' }, { newest: true; oldest: true }>
+  const serverTable = null as unknown as ServerTable.ServerTable<
+    Row,
+    { status: 'active' | 'inactive' },
+    { newest: true; oldest: true }
+  >
 
   const table = useServerTable(serverTable, { getRowId: (row) => row.id })
 
@@ -48,14 +52,15 @@ function testFilterAndSortInference() {
 // =============================================================================
 
 function testLocalizationWithSelectFilter() {
-  const serverTable = null as unknown as ServerTable.ServerTable<Row, { status: 'active' | 'inactive' }, { newest: true; oldest: true }>
+  const serverTable = null as unknown as ServerTable.ServerTable<
+    Row,
+    { status: 'active' | 'inactive' },
+    { newest: true; oldest: true }
+  >
 
   const table = useServerTable(serverTable, { getRowId: (row) => row.id })
 
-  type Loc = TableLocalization<
-    ReturnType<typeof table.getFilterConfig>,
-    ReturnType<typeof table.getSortConfig>
-  >
+  type Loc = TableLocalization<ReturnType<typeof table.getFilterConfig>, ReturnType<typeof table.getSortConfig>>
 
   type _LocFilterKeys = Expect<Equal<keyof Loc['filters'], 'status'>>
   type _LocSortKeys = Expect<Equal<keyof Loc['sorts'], 'newest' | 'oldest'>>
@@ -96,10 +101,7 @@ function testLocalizationWithDateRangeFilter() {
 
   const table = useServerTable(serverTable, { getRowId: (row) => row.id })
 
-  type Loc = TableLocalization<
-    ReturnType<typeof table.getFilterConfig>,
-    ReturnType<typeof table.getSortConfig>
-  >
+  type Loc = TableLocalization<ReturnType<typeof table.getFilterConfig>, ReturnType<typeof table.getSortConfig>>
 
   // Valid: date-range filter accepts DateRangeTableFilter form
   const _loc: Loc = {
@@ -151,10 +153,7 @@ function testNoFiltersOrSorts() {
 
   const table = useServerTable(serverTable, { getRowId: (row) => row.id })
 
-  type Loc = TableLocalization<
-    ReturnType<typeof table.getFilterConfig>,
-    ReturnType<typeof table.getSortConfig>
-  >
+  type Loc = TableLocalization<ReturnType<typeof table.getFilterConfig>, ReturnType<typeof table.getSortConfig>>
 
   type _EmptyFilters = Expect<Equal<Loc['filters'], {}>>
   type _EmptySorts = Expect<Equal<Loc['sorts'], {}>>

package/src/components/tabs.tsx

@@ -69,7 +69,10 @@ TabGroup.displayName = 'TabGroup'
 
 // --- TabList ---
 
-const TabListContext = React.createContext<{ color: TabColor; variant: TabVariant }>({ color: 'primary', variant: 'underline' })
+const TabListContext = React.createContext<{ color: TabColor; variant: TabVariant }>({
+  color: 'primary',
+  variant: 'underline'
+})
 
 function TabList({ children, className, color = 'primary', variant = 'underline' }: TabListProps) {
   const containerRef = React.useRef<HTMLDivElement>(null)
@@ -79,11 +82,7 @@ function TabList({ children, className, color = 'primary', variant = 'underline'
     <TabListContext.Provider value={{ color, variant }}>
       <div ref={containerRef} className={tabListContainerClasses[variant]}>
         <AriaTabList className={tw(tabListInnerClasses[variant], className)}>{children}</AriaTabList>
-        <div
-          ref={indicatorRef}
-          className={getIndicatorClasses(variant, color)}
-          style={{ opacity: 0 }}
-        />
+        <div ref={indicatorRef} className={getIndicatorClasses(variant, color)} style={{ opacity: 0 }} />
       </div>
     </TabListContext.Provider>
   )
@@ -106,7 +105,9 @@ function TabItem({ children, className, ...props }: TabProps) {
           variant === 'oval' ? TAB_OVAL_BASE_CLASSES : TAB_BASE_CLASSES,
           focusClasses,
           isSelected
-            ? (variant === 'oval' ? TAB_OVAL_SELECTED_CLASSES : `${colors.text} font-bold`)
+            ? variant === 'oval'
+              ? TAB_OVAL_SELECTED_CLASSES
+              : `${colors.text} font-bold`
             : `${TAB_INACTIVE_CLASSES} data-[hovered]:text-neutral-700`,
           isDisabled && TAB_DISABLED_CLASSES,
           className

package/src/components/tag-field.tsx

@@ -150,7 +150,13 @@ export function TagField(props: TagFieldProps) {
 
       <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
 
-      <FormFieldComponents.FieldGroup isDisabled={props.isDisabled} isInvalid={isInvalid} hasWarning={hasWarning} shape={props.shape} onClick={() => inputRef.current?.focus()}>
+      <FormFieldComponents.FieldGroup
+        isDisabled={props.isDisabled}
+        isInvalid={isInvalid}
+        hasWarning={hasWarning}
+        shape={props.shape}
+        onClick={() => inputRef.current?.focus()}
+      >
         <div className="flex flex-wrap items-center gap-1.5 px-3 py-1.5 min-h-[38px] w-full">
           {/* Display existing tags */}
           {tags.map((tag, index) =>

package/src/utils/use-query-state.ts

@@ -476,7 +476,10 @@ function getSearchParamsState<L extends QueryStateLoader>(
  * Reads from the pending navigation location when one is in flight so the UI
  * reflects optimistic state during transitions.
  */
-function useState<S>(name: string, codec: Codec<CodecDef<S>>): [S, (val: S | ((prevState: S) => S), navigateOpts?: QueryStateNavigateOptions) => void] {
+function useState<S>(
+  name: string,
+  codec: Codec<CodecDef<S>>
+): [S, (val: S | ((prevState: S) => S), navigateOpts?: QueryStateNavigateOptions) => void] {
   const [searchParamsRaw, setSearchParams] = useSearchParamsRR()
   const navigation = useNavigation()
 

package/src/utils/use-tab-indicator.ts

@@ -46,7 +46,8 @@ export function getIndicatorClasses(variant: TabVariant, color: TabColor): strin
   return 'absolute inset-y-1 rounded-md bg-white shadow-sm'
 }
 
-export const TAB_OVAL_BASE_CLASSES = 'relative z-10 px-4 py-1.5 text-sm cursor-default transition-colors duration-200 rounded-md'
+export const TAB_OVAL_BASE_CLASSES =
+  'relative z-10 px-4 py-1.5 text-sm cursor-default transition-colors duration-200 rounded-md'
 export const TAB_OVAL_SELECTED_CLASSES = 'text-neutral-900 font-semibold'
 
 // --- Animated Indicator Hook ---