@maestro-js/components 1.0.0-alpha.17 → 1.0.0-alpha.18

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

package/src/components/date-range.tsx

@@ -13,6 +13,7 @@ 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
@@ -74,11 +75,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">
-            <ChevronLeft />
+            <Icon name="chevron-left" />
           </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 />
+            <Icon name="chevron-right" />
           </Button>
         </header>
         <div className="flex gap-4">
@@ -135,27 +136,3 @@ 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/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>