@duro-app/ui 0.27.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.27.0"
+    "@duro-app/tokens": "^0.28.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Input/Input.tsx

@@ -29,6 +29,7 @@ interface InputProps {
   value?: string
   defaultValue?: string
   disabled?: boolean
+  autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: () => void
   ref?: React.Ref<HTMLInputElement>
@@ -46,6 +47,7 @@ export function Input({
   value,
   defaultValue,
   disabled,
+  autoFocus,
   onChange,
   onBlur,
   ref,
@@ -62,9 +64,11 @@ export function Input({
   const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
-  // react-strict-dom omits web-only `pattern` from its types, but the
-  // underlying DOM element supports it. Type-assert to pass it through.
-  const extraProps = pattern !== undefined ? {pattern} : undefined
+  // react-strict-dom omits some web-only props from its types, but the
+  // underlying DOM element supports them. Type-assert to pass them through.
+  const extraProps: Record<string, unknown> = {}
+  if (pattern !== undefined) extraProps.pattern = pattern
+  if (autoFocus) extraProps.autoFocus = true
 
   return (
     <html.input
@@ -86,7 +90,7 @@ export function Input({
       onBlur={effectiveOnBlur as StrictInputProps['onBlur']}
       ref={effectiveRef as React.Ref<HTMLInputElement>}
       style={[styles.base, styles[effectiveVariant], groupCtx?.inGroup && styles.inGroup]}
-      {...(extraProps as Record<string, unknown>)}
+      {...extraProps}
     />
   )
 }

package/src/components/Textarea/Textarea.tsx

@@ -15,6 +15,7 @@ interface TextareaProps {
   value?: string
   defaultValue?: string
   disabled?: boolean
+  autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: () => void
   ref?: React.Ref<HTMLTextAreaElement>
@@ -29,6 +30,7 @@ export function Textarea({
   value,
   defaultValue,
   disabled,
+  autoFocus,
   onChange,
   onBlur,
   ref,
@@ -44,6 +46,9 @@ export function Textarea({
   const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
+  const extraProps: Record<string, unknown> = {}
+  if (autoFocus) extraProps.autoFocus = true
+
   return (
     <html.textarea
       id={ctx?.controlId}
@@ -62,6 +67,7 @@ export function Textarea({
       onBlur={effectiveOnBlur as StrictTextareaProps['onBlur']}
       ref={effectiveRef as React.Ref<HTMLTextAreaElement>}
       style={[styles.base, styles[effectiveVariant]]}
+      {...extraProps}
     />
   )
 }