@sakura-ui/sakura-ui 0.1.21 → 0.2.0

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

@@ -1,12 +1,22 @@
 import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
+import {
+  type InputSize,
+  borderlessInputBaseStyles,
+  borderlessInputSizeStyles,
+  iconStyles
+} from './inputStyle'
 
-export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {}
+export interface CheckboxProps
+  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+  size?: InputSize
+}
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { className, children, ...restProps } = props
+    const { id, className, size = 'lg', children, ...restProps } = props
+    const checkboxId = id || React.useId()
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
       restProps.required = true
@@ -15,13 +25,11 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       restProps.name = ctx.groupName
     }
 
-    const style = `
-      inline-block
-      text-base
-      cursor-pointer
-      py-2
-      mr-4
-    `
+    const scales: { [key in InputSize]: number } = {
+      lg: 22 / 24,
+      md: 18 / 24,
+      sm: 18 / 24
+    }
 
     const styleInput = `
       peer
@@ -30,15 +38,12 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
 
     const styleCheck = `
       bg-clip-content
-      w-6 h-6
-      ml-1
-      mr-2
       rounded
       border
       border-solid
       border-sumi-900
       fill-transparent
-      peer-checked:fill-white-1000
+      peer-checked:fill-white
       peer-checked:bg-sea-600
       peer-checked:border-none
       peer-disabled:border-sumi-500
@@ -48,9 +53,17 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     `
 
     return (
-      <label htmlFor={restProps.id} className={cx(style, className)}>
+      <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}
@@ -60,9 +73,18 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             {...restProps}
             ref={ref}
           />
-          <span className={styleCheck}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-              <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" />
+          <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>

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

@@ -62,7 +62,7 @@ export const FieldsetControl = React.forwardRef<
           <p
             id={context.errorMessageId}
             className={cx(
-              'text-sup text-sun-800',
+              'text-label text-sun-800',
               helperText ? 'mt-1' : 'mt-2'
             )}
           >

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

@@ -6,7 +6,7 @@ export interface FileInputProps extends React.ComponentPropsWithRef<'input'> {}
 
 export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
   (props, ref) => {
-    const { className, ...restProps } = props
+    const { id, className, ...restProps } = props
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
       restProps.required = true
@@ -44,11 +44,13 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
       file:p-4
       file:text-button
       file:rounded-lg
+      file:leading-snug
     `
     const styleInput = `
+      text-label
+      text-sumi-900
       rounded-lg
       outline-offset-2
-      text-sumi-900
       focus:outline
       focus:outline-2
       focus:outline-wood-600
@@ -58,7 +60,7 @@ export const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(
     return (
       <input
         type="file"
-        id={restProps.id ?? ctx.id}
+        id={id || ctx.id}
         className={cx(base, secondary, styleLg, styleInput, className)}
         aria-describedby={ctx.helperTextId}
         aria-errormessage={ctx.errorMessageId}

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

@@ -1,38 +1,34 @@
 import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
+import {
+  type InputSize,
+  borderedInputBaseStyles,
+  borderedInputSizeStyles
+} from './inputStyle'
 
-export interface InputProps extends React.ComponentPropsWithRef<'input'> {}
+export interface InputProps
+  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+  size?: InputSize
+}
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (props, ref) => {
-    const { className, ...restProps } = props
+    const { id, className, size = 'lg', ...restProps } = props
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
       restProps.required = true
     }
 
-    const style = `
-      p-4
-      rounded-lg
-      border
-      border-solid
-      border-sumi-900
-      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
-    `
-
     return (
       <input
         type="text"
-        id={restProps.id ?? ctx.id}
-        className={cx(style, className)}
+        id={id || ctx.id}
+        className={cx(
+          borderedInputBaseStyles,
+          borderedInputSizeStyles[size],
+          className
+        )}
         aria-describedby={ctx.helperTextId}
         aria-errormessage={ctx.errorMessageId}
         aria-invalid={ctx.isInvalid ?? false}

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

@@ -36,11 +36,11 @@ export const LabelControl = React.forwardRef<
   }
 
   const styleHelp = `
-    text-sup text-sumi-700
+    text-label text-sumi-700
   `
 
   const styleError = `
-    text-sup text-sun-800
+    text-label text-sun-800
   `
 
   return (

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

@@ -1,28 +1,30 @@
 import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
+import {
+  type InputSize,
+  borderlessInputBaseStyles,
+  borderlessInputSizeStyles,
+  iconStyles
+} from './inputStyle'
 
-export interface RadioProps extends React.ComponentPropsWithRef<'input'> {}
+export interface RadioProps
+  extends Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+  size?: InputSize
+}
 
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   (props, ref) => {
-    const { className, children, ...newProps } = props
+    const { id, className, size = 'lg', children, ...restProps } = props
+    const radioId = id || React.useId()
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
-      newProps.required = true
+      restProps.required = true
     }
     if (ctx.groupName) {
-      newProps.name = ctx.groupName
+      restProps.name = ctx.groupName
     }
 
-    const style = `
-      inline-block
-      text-base
-      cursor-pointer
-      py-2
-      mr-4
-    `
-
     const styleInput = `
       peer
       sr-only
@@ -30,10 +32,6 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
 
     const styleRadio = `
       bg-clip-content
-      w-6 h-6
-      ml-1
-      mr-2
-      p-1
       rounded-full
       border
       border-solid
@@ -46,20 +44,37 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       peer-focus-visible:ring-wood-500
     `
 
+    const radioSizes: { [key in InputSize]: string } = {
+      lg: 'p-1',
+      md: 'p-[3px]',
+      sm: 'p-[3px]'
+    }
+
     return (
-      <label htmlFor={newProps.id} className={cx(style, className)}>
+      <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}
-            {...newProps}
+            {...restProps}
             ref={ref}
           />
-          <span className={styleRadio}></span>
+          <span
+            aria-hidden={true}
+            className={cx(styleRadio, radioSizes[size], iconStyles[size])}
+          />
           <span className="peer-disabled:text-sumi-500">{children}</span>
         </span>
       </label>

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

@@ -1,52 +1,52 @@
 import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
+import {
+  type InputSize,
+  borderedInputBaseStyles,
+  borderedInputSizeStyles
+} from './inputStyle'
 
-export interface SelectProps extends React.ComponentPropsWithRef<'select'> {}
+export interface SelectProps
+  extends Omit<React.ComponentPropsWithRef<'select'>, 'size'> {
+  size?: InputSize
+}
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
-    const { className, children, ...restProps } = props
+    const { id, className, size = 'lg', children, ...restProps } = props
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
       restProps.required = true
     }
 
     const style = `
+      !pr-8
       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 = `
-      flex items-center
-      absolute inset-y-0 right-0
-      px-2
       pointer-events-none
-      peer-disabled:fill-sumi-500
+      absolute
+      right-4
+      top-1/2
+      -translate-y-1/2
+      text-sumi-900
+      peer-disabled:text-sumi-500
     `
 
     return (
-      <label className="inline-block relative">
+      <div className="inline-block relative">
         <select
-          id={restProps.id ?? ctx.id}
-          className={cx(style, props.className)}
+          id={id || ctx.id}
+          className={cx(
+            style,
+            borderedInputBaseStyles,
+            borderedInputSizeStyles[size],
+            props.className
+          )}
           aria-describedby={ctx.helperTextId}
           aria-errormessage={ctx.errorMessageId}
           aria-invalid={ctx.isInvalid ?? false}
@@ -56,12 +56,22 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         >
           {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>
+        <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>
     )
   }
 )

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

@@ -7,7 +7,7 @@ export interface TextareaProps
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
-    const { className, children, onChange, maxLength, ...restProps } = props
+    const { id, className, children, onChange, maxLength, ...restProps } = props
 
     const [count, setCount] = React.useState(0)
 
@@ -27,6 +27,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     const style = `
       p-4
+      text-label
       rounded-lg
       border
       border-solid
@@ -44,7 +45,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <>
         <textarea
-          id={restProps.id ?? ctx.id}
+          id={id || ctx.id}
           className={cx(style, className)}
           aria-describedby={ctx.helperTextId}
           aria-errormessage={ctx.errorMessageId}
@@ -57,7 +58,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           {children}
         </textarea>
         {maxLength ? (
-          <p className="text-sup text-sumi-700">
+          <p className="text-label text-sumi-700">
             <span className={overtextStyle}>{count}</span>/
             <span>{maxLength}</span>
           </p>

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

@@ -1,7 +1,8 @@
 import React 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'> {
@@ -12,6 +13,7 @@ export interface CheckboxGroupProps
   errorMessage?: string
   isInvalid?: boolean
   isRequired?: boolean
+  size?: InputSize
 }
 
 export const CheckboxGroup = React.forwardRef<
@@ -27,6 +29,7 @@ export const CheckboxGroup = React.forwardRef<
     errorMessage,
     isInvalid,
     isRequired,
+    size,
     ...restProps
   } = props
 
@@ -41,9 +44,14 @@ export const CheckboxGroup = React.forwardRef<
       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>
         )

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

@@ -1,7 +1,8 @@
 import React 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'> {
@@ -13,6 +14,7 @@ export interface RadioGroupProps
   isInvalid?: boolean
   isRequired?: boolean
   defaultValue?: string
+  size?: InputSize
 }
 
 export const RadioGroup = React.forwardRef<
@@ -29,6 +31,7 @@ export const RadioGroup = React.forwardRef<
     isInvalid,
     isRequired,
     defaultValue,
+    size,
     ...restProps
   } = props
 
@@ -43,10 +46,11 @@ export const RadioGroup = React.forwardRef<
       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}

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/inputStyle.ts

@@ -0,0 +1,83 @@
+export type InputSize = 'lg' | 'md' | 'sm'
+
+export const borderedInputBaseStyles = `
+  bg-white
+  border
+  border-solid
+  border-sumi-900
+  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
+`
+
+// for text input and select
+export const borderedInputSizeStyles: { [key in InputSize]: string } = {
+  // 16(p-4) * 2 + 22(text-label * leading-snug) + boader * 2 = 56px
+  lg: `
+    p-4
+    text-label
+    rounded-lg
+    leading-snug
+  `,
+  // 12(py-3) * 2 + 22(text-label * leading-snug) + boader * 2 = 48px
+  md: `
+    px-4
+    py-3
+    text-label
+    rounded-lg
+    leading-snug
+  `,
+  // 8(py-2) * 2 + 22(text-label * leading-snug) + boader * 2 = 40px
+  sm: `
+    px-3
+    py-2
+    text-label
+    rounded-md
+    leading-snug
+  `
+}
+
+export const borderlessInputBaseStyles = `
+  inline-block
+  cursor-pointer
+  border
+  border-solid
+  border-transparent
+`
+
+// for radio and checkbox
+export const borderlessInputSizeStyles: { [key in InputSize]: string } = {
+  // 16(p-4) * 2 + 22(text-label * leading-snug) + boader(transparent) * 2 = 56px
+  lg: `
+    pr-8
+    py-4
+    text-label
+    leading-snug
+  `,
+  // 12(py-3) * 2 + 22(text-label * leading-snug) + boader(transparent) * 2 = 48px
+  md: `
+    pr-6
+    py-3
+    text-label
+    leading-snug
+  `,
+  // 8(py-2) * 2 + 22(text-label * leading-snug) + boader(transparent) * 2 = 40px
+  sm: `
+    pr-4
+    py-2
+    text-label
+    leading-snug
+  `
+}
+
+// for radio and checkbox
+export const iconStyles: { [key in InputSize]: string } = {
+  lg: 'w-[22px] h-[22px] mr-2',
+  md: 'w-[18px] h-[18px] mr-1.5',
+  sm: 'w-[18px] h-[18px] mr-1'
+}

package/packages/forms/src/index.ts

@@ -20,9 +20,4 @@ export type {
   FieldsetControlProps
 } from './components'
 
-export {
-  CheckboxGroup,
-  RadioGroup,
-  SelectControl,
-  TextareaControl
-} from './components/controlled'
+export { CheckboxGroup, RadioGroup } from './components/controlled'

package/packages/forms/src/utils/class.ts

@@ -1 +1,2 @@
+// biome-ignore lint/suspicious/noExplicitAny:
 export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ')

package/packages/forms/tests/FieldsetControl.test.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
 import { FieldsetControl } from '../src'
 

package/packages/forms/tests/Input.test.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
 import { LabelControl, Input } from '../src'
 

package/packages/forms/tests/LabelControl.test.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
 import { LabelControl, Select, Input, Textarea } from '../src'
 

package/packages/forms/tests/Radio.test.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import React from 'react'
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 
 import { FieldsetControl, Radio } from '../src'
 

package/packages/forms/tests/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'