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

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.23"
+    "@maestro-js/form": "1.0.0-alpha.4"
   },
   "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.23"
+    "@maestro-js/form": "1.0.0-alpha.4"
   },
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.4",
   "license": "UNLICENSED",
   "engines": {
     "node": ">=22.18.0"

package/src/components/alert-dialog.tsx

@@ -100,10 +100,7 @@ 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/date-range.tsx

@@ -13,7 +13,6 @@ import {
 import { twMerge } from 'tailwind-merge'
 import { parseDate, type CalendarDate, type DateValue } from '@internationalized/date'
 import type { Iso } from 'iso-fns'
-import { Icon } from './icon'
 
 export type DateRangeRootAdditionalProps = {
   defaultStart: Iso.Date | null
@@ -75,11 +74,11 @@ export function DateRangePicker(props: DateRangePickerProps) {
       >
         <header className="flex items-center justify-between mb-2 px-1">
           <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
-            <Icon name="chevron-left" />
+            <ChevronLeft />
           </Button>
           <Heading className="text-sm font-semibold text-neutral-900 flex-1 text-center" />
           <Button slot="next" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
-            <Icon name="chevron-right" />
+            <ChevronRight />
           </Button>
         </header>
         <div className="flex gap-4">
@@ -136,3 +135,27 @@ export function DateRangePicker(props: DateRangePickerProps) {
     </I18nProvider>
   )
 }
+
+function ChevronLeft() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+      <path
+        fillRule="evenodd"
+        d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+function ChevronRight() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+      <path
+        fillRule="evenodd"
+        d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/components/disclosure.tsx

@@ -92,7 +92,11 @@ 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,32 +76,34 @@ 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,10 +36,7 @@ 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)
@@ -51,7 +48,11 @@ 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>
   )
@@ -72,7 +73,13 @@ 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>
@@ -90,9 +97,7 @@ 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,9 +162,7 @@ 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,13 +180,7 @@ 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,10 +28,7 @@ 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,7 +67,10 @@ 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'>>
@@ -108,7 +111,10 @@ 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 = {
@@ -201,7 +207,10 @@ 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,11 +26,7 @@ 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 })
 
@@ -52,15 +48,14 @@ 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'>>
@@ -101,7 +96,10 @@ 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 = {
@@ -153,7 +151,10 @@ 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,10 +69,7 @@ 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)
@@ -82,7 +79,11 @@ 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>
   )
@@ -105,9 +106,7 @@ 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,13 +150,7 @@ 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/components/text-field.tsx

@@ -47,8 +47,6 @@ export type TextFieldProps = {
 
 export function TextField(props: TextFieldProps) {
   const inputRef = React.useRef<HTMLInputElement>(null)
-  const visibleRef = React.useRef<HTMLInputElement>(null)
-
   const helpTextId = React.useId()
   const inputId = React.useId()
 
@@ -68,7 +66,7 @@ export function TextField(props: TextFieldProps) {
       isRequired: props.isRequired,
       form: props.form,
       focus() {
-        visibleRef.current?.focus()
+        inputRef.current?.focus()
       }
     },
     inputRef
@@ -115,7 +113,6 @@ export function TextField(props: TextFieldProps) {
           inputMode={props.inputMode}
           aria-invalid={isInvalid || undefined}
           aria-describedby={helpTextId}
-          ref={visibleRef}
         />
         {props.trailingInlineAddon}
       </FormFieldComponents.FieldGroup>

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

@@ -476,10 +476,7 @@ 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,8 +46,7 @@ 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 ---