@sakura-ui/sakura-ui 0.2.0 → 0.4.1

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 import {
   type InputSize,
@@ -8,90 +8,86 @@ import {
   iconStyles
 } from './inputStyle'
 
-export interface CheckboxProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace Checkbox {
+  export interface Props extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, ref) => {
-    const { id, className, size = 'lg', children, ...restProps } = props
-    const checkboxId = id || React.useId()
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
-    if (ctx.groupName) {
-      restProps.name = ctx.groupName
-    }
+export const Checkbox = (props: Checkbox.Props) => {
+  const { id, className, size = 'lg', children, ...restProps } = props
+  const genId = React.useId()
+  const checkboxId = id || genId
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
+  if (ctx.groupName) {
+    restProps.name = ctx.groupName
+  }
 
-    const scales: { [key in InputSize]: number } = {
-      lg: 22 / 24,
-      md: 18 / 24,
-      sm: 18 / 24
-    }
+  const scales: { [key in InputSize]: number } = {
+    lg: 22 / 24,
+    md: 18 / 24,
+    sm: 18 / 24
+  }
 
-    const styleInput = `
-      peer
-      sr-only
-    `
+  const styleInput = `
+    peer
+    sr-only
+  `
 
-    const styleCheck = `
-      bg-clip-content
-      rounded
-      border
-      border-solid
-      border-sumi-900
-      fill-transparent
-      peer-checked:fill-white
-      peer-checked:bg-sea-600
-      peer-checked:border-none
-      peer-disabled:border-sumi-500
-      peer-focus-visible:ring-2
-      peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-500
-    `
+  const styleCheck = `
+    bg-clip-content
+    rounded-sm
+    border
+    border-solid
+    border-solid-gray-900
+    fill-transparent
+    peer-checked:fill-white
+    peer-checked:bg-blue-600
+    peer-checked:border-none
+    peer-disabled:border-solid-gray-500
+    ${Style.Peer.focusRect}
+  `
 
-    return (
-      <label
-        htmlFor={checkboxId}
-        className={cx(
-          borderlessInputBaseStyles,
-          borderlessInputSizeStyles[size],
-          className
-        )}
-      >
-        <span className="flex items-center">
-          <input
-            id={checkboxId}
-            className={styleInput}
-            type="checkbox"
-            aria-describedby={ctx.helperTextId}
-            aria-errormessage={ctx.errorMessageId}
-            aria-invalid={ctx.isInvalid ?? false}
-            aria-required={ctx.isRequired ?? false}
-            {...restProps}
-            ref={ref}
-          />
-          <span className={cx(styleCheck, iconStyles[size])}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden={true}
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <title>check</title>
-              <g transform={`scale(${scales[size]} ${scales[size]})`}>
-                <path d="m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" />
-              </g>
-            </svg>
-          </span>
-          <span className="peer-disabled:text-sumi-500">{children}</span>
+  return (
+    <label
+      htmlFor={checkboxId}
+      className={cx(
+        borderlessInputBaseStyles,
+        borderlessInputSizeStyles[size],
+        className
+      )}
+    >
+      <span className="flex items-center">
+        <input
+          id={checkboxId}
+          className={styleInput}
+          type="checkbox"
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? false}
+          aria-required={ctx.isRequired ?? false}
+          {...restProps}
+        />
+        <span className={cx(styleCheck, iconStyles[size])}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden={true}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <g transform={`scale(${scales[size]} ${scales[size]})`}>
+              <path d="m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" />
+            </g>
+          </svg>
         </span>
-      </label>
-    )
-  }
-)
+        <span className="peer-disabled:text-solid-gray-500">{children}</span>
+      </span>
+    </label>
+  )
+}
 
 Checkbox.displayName = 'Checkbox'

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

@@ -1,21 +1,19 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 
-export interface FieldsetControlProps
-  extends React.ComponentPropsWithRef<'fieldset'> {
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  direction?: 'flex-col' | 'flex-row'
+export namespace FieldsetControl {
+  export interface Props extends ComponentPropsWithRef<'fieldset'> {
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    direction?: 'flex-col' | 'flex-row'
+  }
 }
 
-export const FieldsetControl = React.forwardRef<
-  HTMLFieldSetElement,
-  FieldsetControlProps
->((props, ref) => {
+export const FieldsetControl = (props: FieldsetControl.Props) => {
   const id = React.useId()
   const {
     labelText,
@@ -43,35 +41,30 @@ export const FieldsetControl = React.forwardRef<
 
   return (
     <ControllerContext.Provider value={context}>
-      <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
+      <fieldset
+        className={cx('flex flex-col items-start gap-2', className)}
+        {...restProps}
+      >
         <legend>
-          <p
-            className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
-          >
+          <p className={cx('block text-label', isInvalid && 'text-red-800')}>
             {labelText}
-            {isRequired && <span className="text-sun-800">&nbsp;*</span>}
+            {isRequired && <span className="text-red-800">&nbsp;*</span>}
           </p>
         </legend>
         <div className={cx('inline-flex', styleDirection)}>{children}</div>
         {helperText && (
-          <p id={context.helperTextId} className="text-sup text-sumi-700 mt-2">
+          <p id={context.helperTextId} className="text-sup text-solid-gray-700">
             {helperText}
           </p>
         )}
         {isInvalid && (
-          <p
-            id={context.errorMessageId}
-            className={cx(
-              'text-label text-sun-800',
-              helperText ? 'mt-1' : 'mt-2'
-            )}
-          >
+          <p id={context.errorMessageId} className="text-label text-red-800">
             {errorMessage}
           </p>
         )}
       </fieldset>
     </ControllerContext.Provider>
   )
-})
+}
 
 FieldsetControl.displayName = 'FieldsetControl'

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

@@ -1,76 +1,105 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
+import type { InputSize } from './inputStyle'
 
-export interface FileInputProps extends React.ComponentPropsWithRef<'input'> {}
+export namespace FileInput {
+  export interface Props extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
+}
 
-export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
-  (props, ref) => {
-    const { id, className, ...restProps } = props
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
+export const FileInput = (props: FileInput.Props) => {
+  const { id, className, size = 'lg', ...restProps } = props
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
 
-    const base = `
-      file:mr-2
-      file:inline-block
-      file:text-button
-      file:text-center
-      file:cursor-pointer
-      file:select-none
-      file:touch-manipulation
-      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 base = `
+    file:mr-2
+    file:inline-block
+    file:text-button
+    file:text-center
+    file:cursor-pointer
+    file:select-none
+    file:touch-manipulation
+    file:whitespace-nowrap
+    file:border
+    file:border-solid
+    file:border-blue-900
+    file:hover:border-blue-1000
+    file:active:border-blue-1200
+    file:disabled:border-solid-gray-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 = `
+  const outline = `
+    file:text-blue-900
+    file:hover:text-blue-1000
+    file:active:text-blue-1200
+    file:bg-transparent
+    file:hover:bg-blue-200
+    file:active:bg-blue-300
+    file:disabled:text-solid-gray-500
+    file:disabled:bg-transparent
+  `
+
+  const styleInput = `
+    text-label
+    text-solid-gray-900
+    rounded-lg
+    outline-offset-2
+    aria-invalid:text-red-800
+    ${Style.hoverUnderline}
+    ${Style.focusRounded}
+  `
+
+  const sizeStyles: { [key in InputSize]: string } = {
+    // 16(p-4) * 2 + 22(text-button * leading-snug) + boader * 2 = 56px
+    lg: `
       file:p-4
       file:text-button
       file:rounded-lg
       file:leading-snug
+    `,
+    // 12(py-3) * 2 + 22(text-button * leading-snug) + boader * 2 = 48px
+    md: `
+      file:px-4
+      file:py-3
+      file:text-button
+      file:rounded-lg
+      file:leading-snug
+    `,
+    // 8(py-2) * 2 + 22(text-button * leading-snug) + boader * 2 = 40px
+    sm: `
+      file:px-3
+      file:py-2
+      file:text-button
+      file:rounded-md
+      file:leading-snug
     `
-    const styleInput = `
-      text-label
-      text-sumi-900
-      rounded-lg
-      outline-offset-2
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-600
-      aria-invalid:text-sun-800
-    `
-
-    return (
-      <input
-        type="file"
-        id={id || ctx.id}
-        className={cx(base, secondary, styleLg, styleInput, className)}
-        aria-describedby={ctx.helperTextId}
-        aria-errormessage={ctx.errorMessageId}
-        aria-invalid={ctx.isInvalid ?? false}
-        aria-required={ctx.isRequired ?? false}
-        ref={ref}
-        {...restProps}
-      />
-    )
   }
-)
+
+  // TODO: aria-required is not valid on input[type=file] and role="button" does not
+  // describe a file picker. Both need to be reworked (the required attribute changes
+  // form submission behaviour), so they are tracked separately from this change.
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: see the TODO above
+    // biome-ignore lint/a11y/useSemanticElements: see the TODO above
+    <input
+      type="file"
+      id={id || ctx.id}
+      className={cx(base, outline, sizeStyles[size], styleInput, className)}
+      aria-describedby={ctx.helperTextId}
+      aria-errormessage={ctx.errorMessageId}
+      aria-invalid={ctx.isInvalid ?? false}
+      aria-required={ctx.isRequired ?? false}
+      role="button"
+      aria-label="File Upload"
+      {...restProps}
+    />
+  )
+}
 
 FileInput.displayName = 'FileInput'

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 import {
   type InputSize,
@@ -7,37 +7,35 @@ import {
   borderedInputSizeStyles
 } from './inputStyle'
 
-export interface InputProps
-  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
-  size?: InputSize
+export namespace Input {
+  export interface Props extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (props, ref) => {
-    const { id, className, size = 'lg', ...restProps } = props
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
-
-    return (
-      <input
-        type="text"
-        id={id || ctx.id}
-        className={cx(
-          borderedInputBaseStyles,
-          borderedInputSizeStyles[size],
-          className
-        )}
-        aria-describedby={ctx.helperTextId}
-        aria-errormessage={ctx.errorMessageId}
-        aria-invalid={ctx.isInvalid ?? false}
-        aria-required={ctx.isRequired ?? false}
-        ref={ref}
-        {...restProps}
-      />
-    )
+export const Input = (props: Input.Props) => {
+  const { id, className, size = 'lg', ...restProps } = props
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
   }
-)
+
+  return (
+    <input
+      type="text"
+      id={id || ctx.id}
+      className={cx(
+        borderedInputBaseStyles,
+        borderedInputSizeStyles[size],
+        className
+      )}
+      aria-describedby={ctx.helperTextId}
+      aria-errormessage={ctx.errorMessageId}
+      aria-invalid={ctx.isInvalid ?? false}
+      aria-required={ctx.isRequired ?? false}
+      {...restProps}
+    />
+  )
+}
 
 Input.displayName = 'Input'

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

@@ -1,20 +1,18 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import React, { type ComponentPropsWithRef } from 'react'
+import { cx } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
 
-export interface LabelControlProps
-  extends React.ComponentPropsWithRef<'label'> {
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
+export namespace LabelControl {
+  export interface Props extends ComponentPropsWithRef<'label'> {
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+  }
 }
 
-export const LabelControl = React.forwardRef<
-  HTMLLabelElement,
-  LabelControlProps
->((props, ref) => {
+export const LabelControl = (props: LabelControl.Props) => {
   const id = React.useId()
   const {
     labelText,
@@ -36,44 +34,40 @@ export const LabelControl = React.forwardRef<
   }
 
   const styleHelp = `
-    text-label text-sumi-700
+    text-label text-solid-gray-700
   `
 
   const styleError = `
-    text-label text-sun-800
+    text-label text-red-800
   `
 
   return (
     <ControllerContext.Provider value={context}>
-      <div className={cx('mb-4', className)}>
+      <div className={cx('flex flex-col items-start gap-2', className)}>
         <label
-          className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
+          className={cx('block text-label', isInvalid && 'text-red-800')}
           htmlFor={context.id}
-          ref={ref}
           {...restProps}
         >
           {labelText}
           {isRequired && (
-            <span className="text-label text-sun-800">&nbsp;*</span>
+            <span className="text-label text-red-800">&nbsp;*</span>
           )}
         </label>
         {helperText && (
-          <p id={context.helperTextId} className={cx(styleHelp, 'mb-2')}>
+          <p id={context.helperTextId} className={styleHelp}>
             {helperText}
           </p>
         )}
         {children}
         {isInvalid && (
-          <p
-            id={context.errorMessageId}
-            className={cx(styleError, helperText ? 'mt-1' : 'mt-2')}
-          >
+          <p id={context.errorMessageId} className={styleError}>
             {errorMessage}
           </p>
         )}
       </div>
     </ControllerContext.Provider>
   )
-})
+}
 
 LabelControl.displayName = 'LabelControl'