@maestro-js/components 1.0.0-alpha.0 → 1.0.0-alpha.10

package/scripts/build.ts

@@ -9,6 +9,7 @@ interface RegistryFile {
 
 interface RegistryEntry {
   name: string
+  dependencies?: string[]
   files: RegistryFile[]
 }
 
@@ -19,6 +20,7 @@ interface OutputFile {
 
 interface OutputEntry {
   name: string
+  dependencies?: string[]
   files: OutputFile[]
 }
 
@@ -29,14 +31,19 @@ const registry: RegistryEntry[] = JSON.parse(await readFile(resolve(packageRoot,
 const output: OutputEntry[] = await Promise.all(
   registry.map(async (entry) => {
     const files = await Promise.all(
-      entry.files.map(async (file) => ({
-        name: `${file.type}/${basename(file.path)}`,
-        content: await readFile(resolve(packageRoot, file.path), 'utf-8')
-      }))
+      entry.files.map(async (file) => {
+        const content = await readFile(resolve(packageRoot, file.path), 'utf-8')
+        const header = `// From @maestro-js/components\n// Install with: pnpm maestro components:add ${entry.name} --directory app\n\n`
+        return {
+          name: `${file.type}/${basename(file.path)}`,
+          content: header + content
+        }
+      })
     )
 
     return {
       name: entry.name,
+      ...(entry.dependencies?.length && { dependencies: entry.dependencies }),
       files
     }
   })

package/src/components/alert-dialog.tsx

@@ -86,7 +86,7 @@ function AlertDialog_({
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={!isDismissable}
       className={tw(
-        'fixed inset-0 z-[4000] flex items-center justify-center  bg-black/70 backdrop-blur-lg',
+        'fixed inset-0 z-[4000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
         'transition-opacity duration-200 ease-out',
         'data-[entering]:opacity-0',
         'data-[exiting]:opacity-0'
@@ -100,14 +100,14 @@ function AlertDialog_({
           'data-[exiting]:scale-95 data-[exiting]:opacity-0 data-[exiting]:translate-y-2'
         )}
       >
-        <Dialog className={tw('outline-none bg-white rounded-lg shadow-2xl 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
                 value={{ orientation: 'horizontal', alignment: 'center', fullWidth: true, className: 'flex-nowrap' }}
               >
                 <ButtonContext.Provider value={{ shape: 'rectangle', variant: 'soft', fullWidth: true }}>
-                  <div className={tw('border rounded-lg p-6', styles.container)}>
+                  <div className={tw('border rounded-xl p-6', styles.container)}>
                     <div className="flex flex-col items-center text-center">
                       {displayIcon && (
                         <div className={tw('w-12 h-12 rounded-xl flex items-center justify-center mb-4', styles.iconBg)}>

package/src/components/avatar.tsx

@@ -22,7 +22,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       <div
         ref={ref}
         className={tw(
-          'size-10 relative inline-flex items-center justify-center overflow-hidden font-medium text-white select-none',
+          'size-10 relative inline-flex items-center justify-center overflow-hidden font-medium text-white select-none ring-1 ring-black/5',
           !showImage && 'bg-neutral-300',
           shape === 'circle' && 'rounded-full',
           shape === 'rounded' && 'rounded',

package/src/components/button-link.tsx

@@ -56,6 +56,9 @@ export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           className: tw(fullWidth && 'w-full', className)
         })}
       >
+        {(size === 'xs' || size === 'sm' || shape === 'circle') && (
+          <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2" aria-hidden="true" />
+        )}
         <span className={tw('inline-flex items-center gap-2', showSpinner && 'opacity-0')}>{children}</span>
         <span
           aria-hidden={!showSpinner ? true : undefined}

package/src/components/button.tsx

@@ -74,6 +74,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         data-pending={isPending}
         onClick={onClick}
+        {...(isToggled != null ? { 'aria-pressed': isToggled } : {})}
         className={composeTailwindRenderProps(
           props.className,
           tw(getButtonClasses({ variant, color, size, shape, isToggled }), fullWidth && 'w-full')
@@ -81,6 +82,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {composeRenderProps(props.children, (children) => (
           <>
+            {(size === 'xs' || size === 'sm' || shape === 'circle') && (
+              <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2" aria-hidden="true" />
+            )}
             <span className={tw('inline-flex items-center gap-2', showSpinner && 'opacity-0')}>{children}</span>
             <span
               aria-hidden={!showSpinner ? true : undefined}

package/src/components/checkbox.tsx

@@ -78,7 +78,7 @@ export function PlainCheckbox(props: PlainCheckboxProps) {
       isDisabled={props.isDisabled}
       isInvalid={props.isInvalid || validationInvalid}
       aria-label={props['aria-label']}
-      className="group inline-flex items-center focus:outline-none [&>div]:focus-visible:ring-2 [&>div]:focus-visible:ring-primary-500/20 [&>div]:focus-visible:ring-offset-2"
+      className="group inline-flex items-center focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
     >
       {({ isSelected, isIndeterminate, isDisabled }) => (
         <>
@@ -139,7 +139,7 @@ export function LabeledCheckbox(props: LabeledCheckboxProps) {
       isDisabled={props.isDisabled}
       isInvalid={isInvalid}
       aria-describedby={helpTextId}
-      className="group relative flex items-start gap-3 select-none focus:outline-none [&>div:first-child>div]:focus-visible:ring-2 [&>div:first-child>div]:focus-visible:ring-primary-500/20 [&>div:first-child>div]:focus-visible:ring-offset-2"
+      className="group relative flex items-start gap-3 select-none focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
     >
       {({ isSelected, isIndeterminate, isDisabled }) => (
         <>
@@ -191,16 +191,16 @@ function CheckboxBox({
   return (
     <div
       className={tw(
-        'relative h-5 w-5 rounded border transition-all duration-50',
-        isSelected || isIndeterminate ? 'bg-primary-500 border-primary-500' : 'bg-white border-neutral-300',
+        'relative size-5 rounded border transition-colors duration-200',
+        isSelected || isIndeterminate ? 'bg-primary-600 border-primary-600' : 'bg-white border-neutral-300',
         !isDisabled && !(isSelected || isIndeterminate) && 'group-hovered:border-neutral-400',
-        isDisabled && 'opacity-50 cursor-not-allowed'
+        isDisabled && 'cursor-not-allowed border-neutral-300 bg-neutral-100'
       )}
     >
       {isIndeterminate ? (
-        <Icon name="minus" className="h-5/6 absolute inset-0 m-auto aspect-square text-white" />
+        <Icon name="minus" className="h-5/6 absolute inset-0 m-auto aspect-square stroke-white text-white" />
       ) : (
-        <Icon name="check" className="h-5/6 absolute inset-0 m-auto aspect-square text-white" />
+        <Icon name="check" className="h-5/6 absolute inset-0 m-auto aspect-square stroke-white text-white" />
       )}
     </div>
   )

package/src/components/chip.tsx

@@ -60,7 +60,7 @@ export function Chip(props: ChipProps) {
           className={tw(
             'inline-flex items-center justify-center rounded-full transition-colors translate-x-1',
             removeBtnSizeClasses[size],
-            !isDisabled && 'hover:bg-black/10',
+            !isDisabled && 'hover:bg-neutral-950/10',
             isDisabled && 'cursor-not-allowed'
           )}
           aria-label="Remove"
@@ -146,13 +146,13 @@ const darkHoverColorClasses = {
 }
 
 const removeBtnSizeClasses = {
-  sm: 'h-4 w-4 -m-0.5 p-0.5',
-  md: 'h-5 w-5 -m-1 p-1',
-  lg: 'h-6 w-6 -m-1.5 p-1.5'
+  sm: 'size-4 -m-0.5 p-0.5',
+  md: 'size-5 -m-1 p-1',
+  lg: 'size-6 -m-1.5 p-1.5'
 }
 
 const removeIconSizeClasses = {
-  sm: 'h-2 w-2',
-  md: 'h-3 w-3',
-  lg: 'h-4 w-4'
+  sm: 'size-2',
+  md: 'size-3',
+  lg: 'size-4'
 }

package/src/components/container.tsx

@@ -71,9 +71,9 @@ const sizeClasses: Record<ContainerSize, string> = {
 }
 
 const elevationClasses: Record<string, string> = {
-  '0': 'bg-white border border-neutral-200',
-  '-1': 'bg-neutral-50 border border-neutral-200',
-  '-2': 'bg-neutral-100 border border-neutral-300',
+  '0': 'bg-white ring-1 ring-neutral-950/5',
+  '-1': 'bg-neutral-50 ring-1 ring-neutral-950/5',
+  '-2': 'bg-neutral-100 ring-1 ring-neutral-950/10',
   inherit: ''
 }
 

package/src/components/date-range.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react'
+import {
+  RangeCalendar,
+  CalendarGrid,
+  CalendarCell,
+  Heading,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarGridBody,
+  Button,
+  I18nProvider
+} from 'react-aria-components'
+import { twMerge } from 'tailwind-merge'
+import { parseDate, type CalendarDate, type DateValue } from '@internationalized/date'
+import type { Iso } from 'iso-fns'
+
+export type DateRangeRootAdditionalProps = {
+  defaultStart: Iso.Date | null
+  defaultEnd: Iso.Date | null
+  shouldDisableDate: (date: string) => boolean
+  shouldDisableStartDate: (date: string) => boolean
+  shouldDisableEndDate: (date: string) => boolean
+}
+
+type DateRangePickerProps = {
+  start: Iso.Date | null
+  end: Iso.Date | null
+  onStartChange: (value: Iso.Date | null, field: 'start' | 'end' | null) => void
+  onEndChange: (value: Iso.Date | null, field: 'start' | 'end' | null) => void
+  currentField: 'start' | 'end' | null
+  shouldDisableDate?: (date: string) => boolean
+  shouldDisableStartDate?: (date: string) => boolean
+  shouldDisableEndDate?: (date: string) => boolean
+}
+
+export function DateRangePicker(props: DateRangePickerProps) {
+  const ariaValue = React.useMemo(() => {
+    if (!props.start || !props.end) return null
+    try {
+      return { start: parseDate(props.start), end: parseDate(props.end) }
+    } catch {
+      return null
+    }
+  }, [props.start, props.end])
+
+  const handleChange = (range: { start: CalendarDate; end: CalendarDate } | null) => {
+    if (!range) {
+      props.onStartChange(null, null)
+      props.onEndChange(null, null)
+      return
+    }
+    const start = range.start.toString() as Iso.Date
+    const end = range.end.toString() as Iso.Date
+    props.onStartChange(start, 'end')
+    props.onEndChange(end, null)
+  }
+
+  const isDateUnavailable = React.useCallback(
+    (date: DateValue) => {
+      const dateStr = date.toString()
+      return props.shouldDisableDate?.(dateStr) ?? false
+    },
+    [props.shouldDisableDate]
+  )
+
+  return (
+    <I18nProvider locale="en">
+      <RangeCalendar
+        value={ariaValue}
+        onChange={handleChange}
+        isDateUnavailable={isDateUnavailable}
+        visibleDuration={{ months: 2 }}
+        className="text-sm"
+      >
+        <header className="flex items-center justify-between mb-2 px-1">
+          <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
+            <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">
+            <ChevronRight />
+          </Button>
+        </header>
+        <div className="flex gap-4">
+          <CalendarGrid>
+            <CalendarGridHeader>
+              {(day) => (
+                <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
+              )}
+            </CalendarGridHeader>
+            <CalendarGridBody>
+              {(date) => (
+                <CalendarCell
+                  date={date}
+                  className={({ isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, isDisabled, isUnavailable }) =>
+                    twMerge(
+                      'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
+                      'hover:bg-neutral-100',
+                      isOutsideMonth && 'text-neutral-300',
+                      (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
+                      isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
+                      (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500'
+                    )
+                  }
+                />
+              )}
+            </CalendarGridBody>
+          </CalendarGrid>
+          <CalendarGrid offset={{ months: 1 }}>
+            <CalendarGridHeader>
+              {(day) => (
+                <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
+              )}
+            </CalendarGridHeader>
+            <CalendarGridBody>
+              {(date) => (
+                <CalendarCell
+                  date={date}
+                  className={({ isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, isDisabled, isUnavailable }) =>
+                    twMerge(
+                      'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
+                      'hover:bg-neutral-100',
+                      isOutsideMonth && 'text-neutral-300',
+                      (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
+                      isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
+                      (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500'
+                    )
+                  }
+                />
+              )}
+            </CalendarGridBody>
+          </CalendarGrid>
+        </div>
+      </RangeCalendar>
+    </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/dialog.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import type { To, RelativeRoutingType } from 'react-router'
+import { useNavigate } from 'react-router'
 import { Modal, ModalOverlay, Dialog as AriaDialog, Heading } from 'react-aria-components'
 import { tw } from '../utils/tw'
 import { Button } from './button'
@@ -7,8 +9,10 @@ export type DialogProps = {
   children?: React.ReactNode
   title?: React.ReactNode
   isOpen?: boolean
-  onOpenChange?: (isOpen: boolean) => void
-  size?: 'sm' | 'lg'
+  close?:
+    | ((isOpen: boolean) => void)
+    | { to: To; replace?: boolean; relative?: RelativeRoutingType; reloadDocument?: boolean }
+  size?: 'xs' | 'sm' | 'lg'
   className?: string
   isDismissable?: boolean
   actions?: React.ReactNode
@@ -24,12 +28,22 @@ function Dialog_({
   children,
   title,
   isOpen = false,
-  onOpenChange,
+  close,
   size = 'sm',
   className,
   isDismissable = false,
   actions
 }: DialogProps) {
+  const navigate = useNavigate()
+
+  const onOpenChange = close
+    ? typeof close === 'function'
+      ? close
+      : (open: boolean) => {
+          if (!open) navigate(close.to, { replace: close.replace, relative: close.relative })
+        }
+    : undefined
+
   return (
     <ModalOverlay
       isOpen={isOpen}
@@ -37,7 +51,7 @@ function Dialog_({
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={!isDismissable}
       className={tw(
-        'fixed inset-0 z-[2000] flex items-center justify-center bg-black/70 backdrop-blur-lg',
+        'fixed inset-0 z-[2000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
         'transition-opacity duration-300 ease-in-out',
         'data-[entering]:opacity-0',
         'data-[exiting]:opacity-0'
@@ -46,7 +60,7 @@ function Dialog_({
       <Modal
         className={tw(
           'w-[calc(100%-4rem)] m-auto',
-          size === 'lg' ? 'max-w-[1080px]' : 'max-w-[640px]',
+          size === 'lg' ? 'max-w-[1080px]' : size === 'xs' ? 'max-w-[400px]' : 'max-w-[640px]',
           'transition-all duration-300 ease-in-out',
           'data-[entering]:scale-95 data-[entering]:opacity-0',
           'data-[exiting]:scale-95 data-[exiting]:opacity-0'
@@ -54,7 +68,7 @@ function Dialog_({
       >
         <AriaDialog
           className={tw(
-            'w-full max-h-[calc(100vh-6rem)] bg-white shadow-xl outline-none rounded-lg',
+            'w-full max-h-[calc(100vh-6rem)] bg-white shadow-xl ring-1 ring-black/5 outline-none rounded-xl',
             'flex flex-col overflow-x-hidden overflow-y-auto',
             className
           )}
@@ -63,7 +77,7 @@ function Dialog_({
             <DialogContext.Provider value={{ close }}>
               <div className="flex items-start justify-between gap-4 pt-6 px-6">
                 {title ? (
-                  <Heading slot="title" className="flex-1 text-xl font-semibold text-neutral-900">
+                  <Heading slot="title" className="flex-1 text-lg font-semibold text-neutral-900">
                     {title}
                   </Heading>
                 ) : (

package/src/components/disclosure.tsx

@@ -85,7 +85,7 @@ function DisclosureHeader({
           name="chevron-right"
           className={tw(
             'shrink-0 transition-transform duration-200 ease-in-out',
-            size === 'md' || size === 'lg' ? 'w-4 h-4' : 'w-3 h-3',
+            size === 'md' || size === 'lg' ? 'size-4' : 'size-3',
             isExpanded && 'rotate-90',
             isDisabled ? 'text-neutral-300' : 'text-neutral-500'
           )}

package/src/components/drawer.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import type { To, RelativeRoutingType } from 'react-router'
+import { useNavigate } from 'react-router'
 import { Drawer as VaulDrawer } from 'vaul'
 import { tw } from '../utils/tw'
 
@@ -6,7 +8,9 @@ export type DrawerProps = {
   children?: React.ReactNode
   title?: React.ReactNode
   isOpen?: boolean
-  onOpenChange?: (isOpen: boolean) => void
+  close?:
+    | ((isOpen: boolean) => void)
+    | { to: To; replace?: boolean; relative?: RelativeRoutingType; reloadDocument?: boolean }
   size?: 'sm' | 'md' | 'lg'
   className?: string
   isDismissable?: boolean
@@ -19,7 +23,7 @@ export function Drawer({
   children,
   title,
   isOpen = false,
-  onOpenChange,
+  close,
   size = 'md',
   className,
   isDismissable = true,
@@ -27,10 +31,20 @@ export function Drawer({
   actions,
   contentsContainerClassName
 }: DrawerProps) {
+  const navigate = useNavigate()
+
+  const onOpenChange = close
+    ? typeof close === 'function'
+      ? close
+      : (open: boolean) => {
+          if (!open) navigate(close.to, { replace: close.replace, relative: close.relative })
+        }
+    : undefined
+
   return (
     <VaulDrawer.Root open={isOpen} onOpenChange={onOpenChange} direction={position} dismissible={isDismissable}>
       <VaulDrawer.Portal>
-        <VaulDrawer.Overlay className="fixed inset-0 z-49 bg-black/70 backdrop-blur-lg" />
+        <VaulDrawer.Overlay className="fixed inset-0 z-49 bg-black/25 backdrop-blur-sm" />
         <VaulDrawer.Content
           className={tw(
             'flex h-auto flex-col text-sm group/drawer-content fixed z-50',
@@ -50,7 +64,7 @@ export function Drawer({
           {isDismissable ? (
             <div
               className={tw(
-                'absolute bg-neutral-200 rounded-full shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block',
+                'absolute bg-neutral-300 rounded-full shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block',
                 'group-data-[vaul-drawer-direction=left]/drawer-content:h-25 group-data-[vaul-drawer-direction=left]/drawer-content:w-1 group-data-[vaul-drawer-direction=left]/drawer-content:right-2 group-data-[vaul-drawer-direction=left]/drawer-content:top-[calc(50%-50px)]',
                 'group-data-[vaul-drawer-direction=right]/drawer-content:h-25 group-data-[vaul-drawer-direction=right]/drawer-content:w-1 group-data-[vaul-drawer-direction=right]/drawer-content:left-2 group-data-[vaul-drawer-direction=right]/drawer-content:top-[calc(50%-50px)]',
                 'group-data-[vaul-drawer-direction=top]/drawer-content:w-25 group-data-[vaul-drawer-direction=top]/drawer-content:h-1 group-data-[vaul-drawer-direction=top]/drawer-content:bottom-2 group-data-[vaul-drawer-direction=top]/drawer-content:left-[calc(50%-50px)]',
@@ -59,7 +73,7 @@ export function Drawer({
             />
           ) : null}
 
-          <div className="bg-white size-full pt-6 px-6 pb-6 rounded-md shadow-xl">
+          <div className="bg-white size-full pt-6 px-6 pb-6 rounded-xl shadow-xl ring-1 ring-black/5">
             <div className="flex items-start justify-between gap-4 pb-5">
               {title ? (
                 <VaulDrawer.Title className="flex-1 text-xl font-semibold text-neutral-900">{title}</VaulDrawer.Title>

package/src/components/form.tsx

@@ -1,19 +1,20 @@
+import { forwardRef } from 'react'
 import {
   type FormProps as ReactRouterFormProps,
   Form as ReactRouterForm,
   data,
   type ClientActionFunctionArgs
 } from 'react-router'
-import { HeadlessForm } from '@maestro-js/form'
+import { HeadlessForm, type StandardSchema, type ParseFormDataOptions, type ParseFormDataResult } from '@maestro-js/form'
 import { serverOnly$ } from 'vite-env-only/macros'
 
-function _Form({ children, ...props }: ReactRouterFormProps) {
+const _Form = forwardRef<HTMLFormElement, ReactRouterFormProps>(function Form({ children, ...props }, ref) {
   return (
-    <HeadlessForm as={ReactRouterForm} {...props}>
+    <HeadlessForm as={ReactRouterForm} ref={ref} {...props}>
       {children}
     </HeadlessForm>
   )
-}
+})
 
 export const Form = Object.assign(_Form, {
   HiddenInput: HeadlessForm.HiddenInput,
@@ -23,7 +24,28 @@ export const Form = Object.assign(_Form, {
   useTopLevelFormValidation: HeadlessForm.useTopLevelFormValidation,
   useReset: HeadlessForm.useReset,
   clientSafeParse: HeadlessForm.parseFormDataClientSide,
-  serverSafeParse: HeadlessForm.parseFormData,
+  serverSafeParse<T>(
+    schema: StandardSchema<T, T>,
+    formData: FormData | Promise<FormData>,
+    options?: {
+      handleFile: ParseFormDataOptions<T>['handleFile']
+    }
+  ): Promise<ParseFormDataResult<T>> {
+    return HeadlessForm.parseFormData(schema, formData, {
+      ...options,
+      jsonSchemaLibraryOptions: {
+        unrepresentable: 'any',
+        override: (ctx) => {
+          const meta = ctx.zodSchema.meta()
+          const custom = meta?.jsonSchema
+
+          if (custom && typeof custom === 'object') {
+            Object.assign(ctx.jsonSchema, custom)
+          }
+        }
+      }
+    })
+  },
   validationError: serverOnly$(validationError) as typeof validationError,
   customValidationError: serverOnly$(customValidationError) as typeof customValidationError,
   composeValidators: HeadlessForm.composeValidators,

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

@@ -85,17 +85,16 @@ const FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(
       <Group
         ref={ref}
         className={tw(
-          'relative overflow-hidden border transition-all duration-200 max-w-96',
-          'focus-within:ring-1',
+          '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 && 'border-neutral-100 bg-neutral-50 text-neutral-400 cursor-not-allowed',
-          opts.isInvalid && 'border-negative-200 bg-negative-50 focus-within:border-negative-500 focus-within:ring-negative-500/20',
-          opts.hasWarning &&
-            'border-notice-200 bg-notice-50 focus-within:border-notice-500 focus-within:ring-notice-500/20',
+          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 &&
-            'border-neutral-200 hover:border-neutral-300 focus-within:border-primary-500 focus-within:ring-primary-500/20',
+            'ring-black/10 hover:ring-black/20 focus-within:outline-primary-500',
           className
         )}
         onClick={onClick}
@@ -114,7 +113,7 @@ const FieldInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) =
       className={composeTailwindRenderProps(
         props.className,
         tw(
-          'flex-1 bg-transparent px-3 py-2 border-0 focus:ring-0 focus:outline-none text-sm text-neutral-900 placeholder:text-neutral-400',
+          'flex-1 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',
           (props.disabled || props.readOnly) && 'cursor-not-allowed'
         )
       )}