@sakura-ui/sakura-ui 0.1.21 → 0.3.0

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-sup text-sumi-700
+    text-label text-solid-gray-700
   `
 
   const styleError = `
-    text-sup 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'

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

@@ -1,70 +1,82 @@
-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,
+  borderlessInputBaseStyles,
+  borderlessInputSizeStyles,
+  iconStyles
+} from './inputStyle'
 
-export interface RadioProps extends React.ComponentPropsWithRef<'input'> {}
-
-export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
-  (props, ref) => {
-    const { className, children, ...newProps } = props
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      newProps.required = true
-    }
-    if (ctx.groupName) {
-      newProps.name = ctx.groupName
-    }
+export namespace Radio {
+  export interface Props extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: InputSize
+  }
+}
 
-    const style = `
-      inline-block
-      text-base
-      cursor-pointer
-      py-2
-      mr-4
-    `
+export const Radio = (props: Radio.Props) => {
+  const { id, className, size = 'lg', children, ...restProps } = props
+  const genId = React.useId()
+  const radioId = id || genId
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
+  if (ctx.groupName) {
+    restProps.name = ctx.groupName
+  }
 
-    const styleInput = `
-      peer
-      sr-only
-    `
+  const styleInput = `
+    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
-      peer-focus-visible:ring-2
-      peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-500
-    `
+  const styleRadio = `
+    bg-clip-content
+    rounded-full
+    border
+    border-solid
+    border-solid-gray-900
+    peer-checked:bg-blue-600
+    peer-checked:border-blue-600
+    peer-disabled:border-solid-gray-500
+    ${Style.Peer.focusRect}
+  `
 
-    return (
-      <label htmlFor={newProps.id} className={cx(style, className)}>
-        <span className="flex items-center">
-          <input
-            className={styleInput}
-            type="radio"
-            aria-describedby={ctx.helperTextId}
-            aria-errormessage={ctx.errorMessageId}
-            aria-invalid={ctx.isInvalid ?? false}
-            aria-required={ctx.isRequired ?? false}
-            {...newProps}
-            ref={ref}
-          />
-          <span className={styleRadio}></span>
-          <span className="peer-disabled:text-sumi-500">{children}</span>
-        </span>
-      </label>
-    )
+  const radioSizes: { [key in InputSize]: string } = {
+    lg: 'p-1',
+    md: 'p-[3px]',
+    sm: 'p-[3px]'
   }
-)
+
+  return (
+    <label
+      htmlFor={radioId}
+      className={cx(
+        borderlessInputBaseStyles,
+        borderlessInputSizeStyles[size],
+        className
+      )}
+    >
+      <span className="flex items-center">
+        <input
+          id={radioId}
+          className={styleInput}
+          type="radio"
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? false}
+          aria-required={ctx.isRequired ?? false}
+          {...restProps}
+        />
+        <span
+          aria-hidden={true}
+          className={cx(styleRadio, radioSizes[size], iconStyles[size])}
+        />
+        <span className="peer-disabled:text-solid-gray-500">{children}</span>
+      </span>
+    </label>
+  )
+}
 
 Radio.displayName = 'Radio'

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

@@ -1,67 +1,77 @@
-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,
+  borderedInputBaseStyles,
+  borderedInputSizeStyles
+} from './inputStyle'
 
-export interface SelectProps extends React.ComponentPropsWithRef<'select'> {}
+export namespace Select {
+  export interface Props extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
+    size?: InputSize
+  }
+}
+
+export const Select = (props: Select.Props) => {
+  const { id, className, size = 'lg', children, ...restProps } = props
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
 
-export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  (props, ref) => {
-    const { className, children, ...restProps } = props
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
+  const style = `
+    !pr-8
+    peer
+    cursor-pointer
+    appearance-none
+  `
 
-    const style = `
-      peer
-      cursor-pointer
-      appearance-none
-      text-base
-      w-full
-      bg-white-100
-      border
-      border-solid
-      border-sumi-900
-      py-4 px-4 pr-8
-      rounded-[8px]
-      outline-offset-2
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
-      disabled:bg-transparent
-      disabled:text-sumi-500
-      disabled:border-sumi-500
-      aria-invalid:border-sun-800
-    `
+  const styleArrow = `
+    pointer-events-none
+    absolute
+    right-4
+    top-1/2
+    -translate-y-1/2
+    text-solid-gray-900
+    peer-disabled:text-solid-gray-500
+  `
 
-    const styleArrow = `
-      flex items-center
-      absolute inset-y-0 right-0
-      px-2
-      pointer-events-none
-      peer-disabled:fill-sumi-500
-    `
+  return (
+    <div className="inline-block relative">
+      <select
+        id={id || ctx.id}
+        className={cx(
+          style,
+          borderedInputBaseStyles,
+          borderedInputSizeStyles[size],
+          className
+        )}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        aria-required={ctx.isRequired ?? false}
+        {...restProps}
+      >
+        {children}
+      </select>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden={true}
+        className={styleArrow}
+        fill="none"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <title>arrow down</title>
+        <path
+          d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  )
+}
 
-    return (
-      <label className="inline-block relative">
-        <select
-          id={restProps.id ?? ctx.id}
-          className={cx(style, props.className)}
-          aria-describedby={ctx.helperTextId}
-          aria-errormessage={ctx.errorMessageId}
-          aria-invalid={ctx.isInvalid ?? false}
-          aria-required={ctx.isRequired ?? false}
-          {...restProps}
-          ref={ref}
-        >
-          {children}
-        </select>
-        <span className={styleArrow}>
-          <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-            <path d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" />
-          </svg>
-        </span>
-      </label>
-    )
-  }
-)
+Select.displayName = 'Select'

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

@@ -1,72 +1,68 @@
-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'
 
-export interface TextareaProps
-  extends React.ComponentPropsWithRef<'textarea'> {}
+export namespace Textarea {
+  export interface Props extends ComponentPropsWithRef<'textarea'> {}
+}
 
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const { className, children, onChange, maxLength, ...restProps } = props
+export const Textarea = (props: Textarea.Props) => {
+  const { id, className, children, onChange, maxLength, ...restProps } = props
 
-    const [count, setCount] = React.useState(0)
+  const [count, setCount] = React.useState(0)
 
-    const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      if (onChange) onChange(e)
+  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) onChange(e)
 
-      setCount(e.target.value.length)
-    }
+    setCount(e.target.value.length)
+  }
 
-    const ctx = React.useContext(ControllerContext)
-    if (ctx.isRequired) {
-      restProps.required = true
-    }
+  const ctx = React.useContext(ControllerContext)
+  if (ctx.isRequired) {
+    restProps.required = true
+  }
 
-    const overtextStyle =
-      count > (maxLength || 0) ? 'text-sun-800' : 'text-sumi-700'
+  const overtextStyle =
+    count > (maxLength || 0) ? 'text-red-800' : 'text-solid-gray-700'
 
-    const style = `
+  const style = `
       p-4
+      text-label
       rounded-lg
       border
       border-solid
-      border-sumi-900
-      outline-offset-2
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
+      border-solid-gray-900
       disabled:bg-transparent
-      disabled:text-sumi-500
-      disabled:border-sumi-500
-      aria-invalid:border-sun-800
+      disabled:text-solid-gray-500
+      disabled:border-solid-gray-500
+      aria-invalid:border-red-800
+      ${Style.focusRect}
     `
 
-    return (
-      <>
-        <textarea
-          id={restProps.id ?? ctx.id}
-          className={cx(style, className)}
-          aria-describedby={ctx.helperTextId}
-          aria-errormessage={ctx.errorMessageId}
-          aria-invalid={ctx.isInvalid ?? false}
-          aria-required={ctx.isRequired ?? false}
-          onChange={onChangeHandler}
-          {...restProps}
-          ref={ref}
-        >
-          {children}
-        </textarea>
-        {maxLength ? (
-          <p className="text-sup text-sumi-700">
-            <span className={overtextStyle}>{count}</span>/
-            <span>{maxLength}</span>
-          </p>
-        ) : (
-          ''
-        )}
-      </>
-    )
-  }
-)
+  return (
+    <>
+      <textarea
+        id={id || ctx.id}
+        className={cx(style, className)}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        aria-required={ctx.isRequired ?? false}
+        onChange={onChangeHandler}
+        {...restProps}
+      >
+        {children}
+      </textarea>
+      {maxLength ? (
+        <p className="text-label text-solid-gray-700">
+          <span className={overtextStyle}>{count}</span>/
+          <span>{maxLength}</span>
+        </p>
+      ) : (
+        ''
+      )}
+    </>
+  )
+}
 
 Textarea.displayName = 'Textarea'

package/packages/forms/src/components/controlled/CheckboxGroup.tsx

@@ -1,23 +1,24 @@
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import { Checkbox } from '../Checkbox'
 import { FieldsetControl } from '../FieldsetControl'
-import { InputItem } from './InputItem'
+import type { InputItem } from './InputItem'
+import type { InputSize } from '../inputStyle'
 
-export interface CheckboxGroupProps
-  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
+export namespace CheckboxGroup {
+  export interface Props
+    extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+    items: InputItem[]
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    size?: InputSize
+  }
 }
 
-export const CheckboxGroup = React.forwardRef<
-  HTMLFieldSetElement,
-  CheckboxGroupProps
->((props, ref) => {
+export const CheckboxGroup = (props: CheckboxGroup.Props) => {
   const {
     items,
     onChange,
@@ -27,6 +28,7 @@ export const CheckboxGroup = React.forwardRef<
     errorMessage,
     isInvalid,
     isRequired,
+    size,
     ...restProps
   } = props
 
@@ -38,18 +40,22 @@ export const CheckboxGroup = React.forwardRef<
       errorMessage={errorMessage}
       isInvalid={isInvalid}
       isRequired={isRequired}
-      ref={ref}
       {...restProps}
     >
-      {items.map(({ label, value }, index) => {
+      {items.map(({ label, value }) => {
         return (
-          <Checkbox key={index} value={value} onChange={onChange}>
+          <Checkbox
+            key={`${label}-${value}`}
+            size={size}
+            value={value}
+            onChange={onChange}
+          >
             {label}
           </Checkbox>
         )
       })}
     </FieldsetControl>
   )
-})
+}
 
 CheckboxGroup.displayName = 'CheckboxGroup'

package/packages/forms/src/components/controlled/RadioGroup.tsx

@@ -1,24 +1,25 @@
-import React from 'react'
+import React, { type ComponentPropsWithRef } from 'react'
 import { Radio } from '../Radio'
 import { FieldsetControl } from '../FieldsetControl'
-import { InputItem } from './InputItem'
+import type { InputItem } from './InputItem'
+import type { InputSize } from '../inputStyle'
 
-export interface RadioGroupProps
-  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
-  items: InputItem[]
-  onChange: React.ChangeEventHandler<HTMLInputElement>
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-  defaultValue?: string
+export namespace RadioGroup {
+  export interface Props
+    extends Omit<ComponentPropsWithRef<'fieldset'>, 'onChange'> {
+    items: InputItem[]
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    labelText: string
+    helperText?: string
+    errorMessage?: string
+    isInvalid?: boolean
+    isRequired?: boolean
+    defaultValue?: string
+    size?: InputSize
+  }
 }
 
-export const RadioGroup = React.forwardRef<
-  HTMLFieldSetElement,
-  RadioGroupProps
->((props, ref) => {
+export const RadioGroup = (props: RadioGroup.Props) => {
   const {
     items,
     onChange,
@@ -29,6 +30,7 @@ export const RadioGroup = React.forwardRef<
     isInvalid,
     isRequired,
     defaultValue,
+    size,
     ...restProps
   } = props
 
@@ -40,13 +42,13 @@ export const RadioGroup = React.forwardRef<
       errorMessage={errorMessage}
       isInvalid={isInvalid}
       isRequired={isRequired}
-      ref={ref}
       {...restProps}
     >
-      {items.map(({ label, value }, index) => {
+      {items.map(({ label, value }) => {
         return (
           <Radio
-            key={index}
+            key={`${label}-${value}`}
+            size={size}
             value={value}
             onChange={onChange}
             defaultChecked={defaultValue === value}
@@ -57,6 +59,6 @@ export const RadioGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-})
+}
 
 RadioGroup.displayName = 'RadioGroup'

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

@@ -1,4 +1,2 @@
 export { CheckboxGroup } from './CheckboxGroup'
 export { RadioGroup } from './RadioGroup'
-export { SelectControl } from './SelectControl'
-export { TextareaControl } from './TextareaControl'

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

@@ -1,8 +1,8 @@
-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'
+export { Checkbox } from './Checkbox'
+export { Radio } from './Radio'
+export { Select } from './Select'
+export { FileInput } from './FileInput'
+export { Input } from './Input'
+export { Textarea } from './Textarea'
+export { LabelControl } from './LabelControl'
+export { FieldsetControl } from './FieldsetControl'