@maestro-js/components 1.0.0-alpha.2 → 1.0.0-alpha.20

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

@@ -0,0 +1,174 @@
+import { useServerTable } from './use-server-table'
+import type { ServerTable } from './server-table'
+import type { TableLocalization } from './table-types'
+import type { Iso } from 'iso-fns'
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+type Expect<T extends true> = T
+type Equal<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false
+
+// =============================================================================
+// Setup
+// =============================================================================
+
+type Row = {
+  id: string
+  status: 'active' | 'inactive'
+  name: string
+  createdAt: string
+}
+
+// =============================================================================
+// Filter and sort config inference
+// =============================================================================
+
+function testFilterAndSortInference() {
+  const serverTable = null as unknown as ServerTable.ServerTable<Row, { status: 'active' | 'inactive' }, { newest: true; oldest: true }>
+
+  const table = useServerTable(serverTable, { getRowId: (row) => row.id })
+
+  // getFilterConfig() keys match the provided filter names
+  type _FilterKeys = Expect<Equal<keyof ReturnType<typeof table.getFilterConfig>, 'status'>>
+
+  // getSortConfig() keys match the provided sort names
+  type _SortKeys = Expect<Equal<keyof ReturnType<typeof table.getSortConfig>, 'newest' | 'oldest'>>
+
+  // state.sort is the union of sort keys | null
+  type _SortState = Expect<Equal<typeof table.state.sort, 'newest' | 'oldest' | null>>
+
+  // state.filters keys match filter names
+  type _FilterStateKeys = Expect<Equal<keyof typeof table.state.filters, 'status'>>
+}
+
+// =============================================================================
+// Localization compatibility — select filter
+// =============================================================================
+
+function testLocalizationWithSelectFilter() {
+  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 _LocFilterKeys = Expect<Equal<keyof Loc['filters'], 'status'>>
+  type _LocSortKeys = Expect<Equal<keyof Loc['sorts'], 'newest' | 'oldest'>>
+
+  // Valid localization with typed option values
+  const _loc: Loc = {
+    filters: {
+      status: {
+        label: 'Status',
+        options: [
+          { label: 'Active', value: 'active' },
+          { label: 'Inactive', value: 'inactive' }
+        ]
+      }
+    },
+    sorts: {
+      newest: { label: 'Newest' },
+      oldest: { label: 'Oldest' }
+    }
+  }
+}
+
+// =============================================================================
+// Localization compatibility — date range filter
+// =============================================================================
+
+function testLocalizationWithDateRangeFilter() {
+  type RowWithDate = {
+    id: string
+    dateRange: { startDate: Iso.Date; endDate: Iso.Date }
+  }
+
+  const serverTable = null as unknown as ServerTable.ServerTable<
+    RowWithDate,
+    { dateRange: { startDate: Iso.Date; endDate: Iso.Date } },
+    {}
+  >
+
+  const table = useServerTable(serverTable, { getRowId: (row) => row.id })
+
+  type Loc = TableLocalization<
+    ReturnType<typeof table.getFilterConfig>,
+    ReturnType<typeof table.getSortConfig>
+  >
+
+  // Valid: date-range filter accepts DateRangeTableFilter form
+  const _loc: Loc = {
+    filters: {
+      dateRange: { label: 'Date Range', type: 'date-range' }
+    },
+    sorts: {}
+  }
+
+  // Invalid: date-range filter rejects select-style options
+  const _badLoc: Loc = {
+    filters: {
+      dateRange: {
+        label: 'Date Range',
+        type: 'date-range',
+        // @ts-expect-error — select-style options array is not valid for date-range
+        options: [{ label: 'X', value: 'x' }]
+      }
+    },
+    sorts: {}
+  }
+}
+
+// =============================================================================
+// Negative: wrong localization option value
+// =============================================================================
+
+declare function checkLocalization(l: TableLocalization<{ status: 'active' | 'inactive' }, {}>): void
+
+function testWrongLocalizationOptionValue() {
+  checkLocalization({
+    filters: {
+      status: {
+        label: 'Status',
+        // @ts-expect-error — 'unknown' is not assignable to 'active' | 'inactive'
+        options: [{ label: 'Unknown', value: 'unknown' }]
+      }
+    },
+    sorts: {}
+  })
+}
+
+// =============================================================================
+// No filters/sorts → empty localization
+// =============================================================================
+
+function testNoFiltersOrSorts() {
+  const serverTable = null as unknown as ServerTable.ServerTable<Row, {}, {}>
+
+  const table = useServerTable(serverTable, { getRowId: (row) => row.id })
+
+  type Loc = TableLocalization<
+    ReturnType<typeof table.getFilterConfig>,
+    ReturnType<typeof table.getSortConfig>
+  >
+
+  type _EmptyFilters = Expect<Equal<Loc['filters'], {}>>
+  type _EmptySorts = Expect<Equal<Loc['sorts'], {}>>
+}
+
+// =============================================================================
+// State shape — search and pagination
+// =============================================================================
+
+function testStateShape() {
+  const serverTable = null as unknown as ServerTable.ServerTable<Row, { status: 'active' | 'inactive' }, { newest: true }>
+
+  const table = useServerTable(serverTable, { getRowId: (row) => row.id })
+
+  type _Search = Expect<Equal<typeof table.state.search, string>>
+  type _Pagination = Expect<Equal<typeof table.state.pagination, { limit: number; skip: number }>>
+}

package/src/components/tabs.tsx

@@ -96,7 +96,7 @@ TabList.displayName = 'TabList'
 function TabItem({ children, className, ...props }: TabProps) {
   const { color, variant } = React.useContext(TabListContext)
   const colors = tabColorMap[color]
-  const focusClasses = `outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-offset-2 data-[focus-visible]:${colors.outline}`
+  const focusClasses = `outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:${colors.outline}`
 
   return (
     <AriaTab

package/src/components/tag-field.tsx

@@ -226,7 +226,7 @@ function Tag({
   return (
     <span
       className={tw(
-        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-normal bg-primary-500/10 text-primary-500',
+        'inline-flex items-center rounded-full pl-2 pr-1.5 py-0.5 text-xs font-normal bg-primary-500/10 text-primary-500',
         isDisabled && 'opacity-50'
       )}
     >
@@ -238,11 +238,11 @@ function Tag({
             e.stopPropagation()
             onRemove()
           }}
-          className="inline-flex items-center justify-center h-4 w-4 -m-0.5 p-0.5 rounded-full translate-x-1 hover:bg-black/10"
+          className="inline-flex items-center justify-center size-4 -m-0.5 p-0.5 rounded-full translate-x-1 hover:bg-neutral-950/10"
           aria-label="Remove"
           tabIndex={-1}
         >
-          <Icon name="x-mark" className="h-2 w-2" aria-hidden="true" />
+          <Icon name="x-mark" className="size-2" aria-hidden="true" />
         </button>
       )}
     </span>

package/src/components/text-area.tsx

@@ -113,7 +113,7 @@ export function TextArea(props: TextAreaProps) {
           ref={textAreaRef}
           id={textAreaId}
           className={tw(
-            'w-full bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400',
+            'w-full bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm max-sm:text-base text-neutral-900 placeholder:text-neutral-400',
             autoResize && 'resize-none overflow-hidden col-span-full row-span-full',
             (props.isDisabled || props.isReadonly) && 'cursor-not-allowed',
             !autoResize && props.resize === 'none' && 'resize-none',

package/src/components/text-field.tsx

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

package/src/components/toast.tsx

@@ -99,7 +99,7 @@ function ToastItem({ toast }: { toast: { content: Toast; key: string } }) {
       style={{ viewTransitionName: toast.key } as React.CSSProperties}
       className={tw(
         'pointer-events-auto',
-        'flex gap-3 rounded-md border px-4 py-3 shadow-lg',
+        'flex gap-3 rounded-lg px-4 py-3 shadow-lg',
         'min-w-[300px] max-w-md',
         '[view-transition-class:toast]',
         hasDescription ? 'items-start' : 'items-center',
@@ -152,11 +152,11 @@ function DeclaredToast({
 // --- Variant Maps ---
 
 const variantClasses = {
-  info: 'bg-info-500/10 text-info-500 border-info-500/20',
-  positive: 'bg-positive-50 text-positive-800 border-positive-200',
-  warning: 'bg-notice-50 text-notice-800 border-notice-200',
-  negative: 'bg-negative-50 text-negative-800 border-negative-200',
-  notice: 'bg-neutral-100 text-neutral-700 border-neutral-200'
+  info: 'bg-info-50 text-info-800 ring-1 ring-info-200',
+  positive: 'bg-positive-50 text-positive-800 ring-1 ring-positive-200',
+  warning: 'bg-notice-50 text-notice-800 ring-1 ring-notice-200',
+  negative: 'bg-negative-50 text-negative-800 ring-1 ring-negative-200',
+  notice: 'bg-neutral-50 text-neutral-700 ring-1 ring-neutral-200'
 }
 
 const variantIconNames = {

package/src/components/toggle-button-group.tsx

@@ -82,12 +82,12 @@ function getToggleButtonClasses({ size = 'md', isSelected }: { size?: ButtonSize
     // Unselected
     !isSelected && 'bg-white ring-1 ring-inset ring-neutral-300',
     !isSelected && 'data-[hovered]:bg-neutral-50 data-[hovered]:ring-neutral-400',
-    !isSelected && 'text-neutral-700 data-[focus-visible]:outline-neutral-400',
+    !isSelected && 'text-neutral-700 data-[focus-visible]:outline-primary-600',
 
     // Selected
     isSelected && 'bg-primary-500 text-white ring-1 ring-inset ring-primary-700',
     isSelected && 'data-[hovered]:bg-primary-600 data-[hovered]:ring-primary-700',
-    isSelected && 'data-[focus-visible]:outline-primary-500',
+    isSelected && 'data-[focus-visible]:outline-primary-600',
 
     'inline-flex justify-center items-center gap-x-2'
   )

package/src/utils/icons.d.ts

@@ -13,7 +13,8 @@ declare module '~/icons/types' {
     'chevron-down',
     'exclamation-triangle',
     'minus',
-    'arrow-path'
+    'arrow-path',
+    'magnifying-glass'
   ] as const
 
   export type IconName = (typeof iconNames)[number]