@sakura-ui/sakura-ui 0.1.16 → 0.1.17

package/packages/forms/src/components/FileInput.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { cx } from '../utils/class'
+import { ControllerContext } from './context'
+
+export interface FileInputProps extends React.ComponentPropsWithRef<'input'> {}
+
+export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props
+    const ctx = React.useContext(ControllerContext)
+    if (ctx.isRequired) {
+      restProps.required = true
+    }
+
+    const invalidStyle = ctx.isInvalid ? 'text-sun-800' : 'text-sumi-900'
+
+    const base = `
+      file:inline-block
+      file:text-button
+      file:text-center
+      file:cursor-pointer
+      file:whitespace-nowrap
+      file:border
+      file:border-solid
+      file:border-sea-800
+      file:active:border-sea-1200
+      file:hover:border-sea-900
+      file:disabled:border-sumi-500
+      file:disabled:cursor-not-allowed
+    `
+
+    const secondary = `
+      file:text-sea-800
+      file:bg-transparent
+      file:active:bg-sea-200
+      file:hover:bg-sea-100
+      file:active:text-sea-1200
+      file:hover:text-sea-900
+      file:disabled:text-sumi-500
+      file:disabled:bg-transparent
+    `
+    const styleLg = `
+      file:p-4
+      file:text-button
+      file:rounded-lg
+    `
+    const styleInput = `
+      rounded-lg
+      outline-offset-2
+      focus:outline
+      focus:outline-2
+      focus:outline-wood-600
+    `
+
+    return (
+      <input
+        type="file"
+        id={restProps.id ?? ctx.id}
+        className={cx(
+          base,
+          secondary,
+          styleLg,
+          styleInput,
+          invalidStyle,
+          className
+        )}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        ref={ref}
+        {...restProps}
+      />
+    )
+  }
+)
+
+FileInput.displayName = 'FileInput'

package/packages/forms/src/components/Input.tsx

@@ -19,6 +19,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     rounded-lg
     border
     border-solid
+    outline-offset-2
     focus:outline
     focus:outline-2
     focus:outline-wood-500

package/packages/forms/src/components/LabelControl.tsx

@@ -35,6 +35,14 @@ export const LabelControl = React.forwardRef<
     isRequired: isRequired ?? false
   }
 
+  const styleHelp = `
+    text-sup text-sumi-700
+  `
+
+  const styleError = `
+    text-sup text-sun-800
+  `
+
   return (
     <ControllerContext.Provider value={context}>
       <div className={cx('mb-4', className)}>
@@ -45,10 +53,12 @@ export const LabelControl = React.forwardRef<
           {...restProps}
         >
           {labelText}
-          {isRequired && <span className="text-sun-800">&nbsp;*</span>}
+          {isRequired && (
+            <span className="text-label text-sun-800">&nbsp;*</span>
+          )}
         </label>
         {helperText && (
-          <p id={context.helperTextId} className="text-sup text-sumi-700 mb-2">
+          <p id={context.helperTextId} className={cx(styleHelp, 'mb-2')}>
             {helperText}
           </p>
         )}
@@ -56,10 +66,7 @@ export const LabelControl = React.forwardRef<
         {isInvalid && (
           <p
             id={context.errorMessageId}
-            className={cx(
-              'text-sup text-sun-800',
-              helperText ? 'mt-1' : 'mt-2'
-            )}
+            className={cx(styleError, helperText ? 'mt-1' : 'mt-2')}
           >
             {errorMessage}
           </p>

package/packages/forms/src/components/Radio.tsx

@@ -16,32 +16,36 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     }
 
     const style = `
-    inline-block
-    text-base
-    cursor-pointer
-    py-2
-    mr-4
-    
-  `
+      inline-block
+      text-base
+      cursor-pointer
+      py-2
+      mr-4
+    `
+
     const styleInput = `
-    peer
-    hidden
-  `
+      peer
+      sr-only
+    `
 
     const styleRadio = `
-    bg-clip-content
-    w-6 h-6
-    ml-1
-    mr-2
-    p-1
-    rounded-full
-    border
-    border-solid
-    border-sumi-900
-    peer-checked:bg-sea-600
-    peer-checked:border-sea-600
-    peer-disabled:border-sumi-500
-  `
+      bg-clip-content
+      w-6 h-6
+      ml-1
+      mr-2
+      p-1
+      rounded-full
+      border
+      border-solid
+      border-sumi-900
+      peer-checked:bg-sea-600
+      peer-checked:border-sea-600
+      peer-disabled:border-sumi-500
+      peer-focus-visible:ring-2
+      peer-focus-visible:ring-offset-2
+      peer-focus-visible:ring-wood-500
+    `
+
     return (
       <label htmlFor={newProps.id} className={cx(style, className)}>
         <span className="flex items-center">

package/packages/forms/src/components/Select.tsx

@@ -25,6 +25,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
     border-solid
     py-4 px-4 pr-8
     rounded-[8px]
+    outline-offset-2
     focus:outline
     focus:outline-2
     focus:outline-wood-500

package/packages/forms/src/components/Textarea.tsx

@@ -31,6 +31,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     rounded-lg
     border
     border-solid
+    outline-offset-2
     focus:outline
     focus:outline-2
     focus:outline-wood-500

package/packages/forms/src/components/index.ts

@@ -1,7 +1,8 @@
-export { Checkbox } from './Checkbox'
-export { Radio } from './Radio'
-export { Select } from './Select'
-export { Input } from './Input'
-export { Textarea } from './Textarea'
-export { LabelControl } from './LabelControl'
-export { FieldsetControl } from './FieldsetControl'
+export { Checkbox, type CheckboxProps } from './Checkbox'
+export { Radio, type RadioProps } from './Radio'
+export { Select, type SelectProps } from './Select'
+export { FileInput, type FileInputProps } from './FileInput'
+export { Input, type InputProps } from './Input'
+export { Textarea, type TextareaProps } from './Textarea'
+export { LabelControl, type LabelControlProps } from './LabelControl'
+export { FieldsetControl, type FieldsetControlProps } from './FieldsetControl'

package/packages/forms/src/index.ts

@@ -2,12 +2,24 @@ export {
   Checkbox,
   Radio,
   Select,
+  FileInput,
   Input,
   Textarea,
   LabelControl,
   FieldsetControl
 } from './components'
 
+export type {
+  CheckboxProps,
+  RadioProps,
+  SelectProps,
+  FileInputProps,
+  InputProps,
+  TextareaProps,
+  LabelControlProps,
+  FieldsetControlProps
+} from './components'
+
 export {
   CheckboxGroup,
   RadioGroup,