@sakura-ui/sakura-ui 0.1.12 → 0.1.14

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

@@ -12,67 +12,66 @@ export interface FieldsetControlProps
   direction?: 'flex-col' | 'flex-row'
 }
 
-export const FieldsetControl: React.ElementType<FieldsetControlProps> =
-  React.forwardRef<HTMLFieldSetElement, FieldsetControlProps>((props, ref) => {
-    const id = React.useId()
-    const {
-      labelText,
-      className,
-      helperText,
-      errorMessage,
-      isInvalid,
-      isRequired,
-      direction,
-      children,
-      ...restProps
-    } = props
+export const FieldsetControl = React.forwardRef<
+  HTMLFieldSetElement,
+  FieldsetControlProps
+>((props, ref) => {
+  const id = React.useId()
+  const {
+    labelText,
+    className,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    direction,
+    children,
+    ...restProps
+  } = props
 
-    const groupName = restProps.name ?? `group-${id}`
+  const groupName = restProps.name ?? `group-${id}`
 
-    const context = {
-      groupName: groupName,
-      helperTextId: `helper-text-${id}`,
-      errorMessageId: `error-message-${id}`,
-      isInvalid: isInvalid ?? false,
-      isRequired: isRequired ?? false
-    }
+  const context = {
+    groupName: groupName,
+    helperTextId: `helper-text-${id}`,
+    errorMessageId: `error-message-${id}`,
+    isInvalid: isInvalid ?? false,
+    isRequired: isRequired ?? false
+  }
 
-    const styleDirection = direction ?? 'flex-col'
+  const styleDirection = direction ?? 'flex-col'
 
-    return (
-      <ControllerContext.Provider value={context}>
-        <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
-          <legend>
-            <p
-              className={cx(
-                'block mb-2 text-label',
-                isInvalid && 'text-sun-800'
-              )}
-            >
-              {labelText}
-              {isRequired && <span className="text-sun-800">&nbsp;*</span>}
-            </p>
-          </legend>
-          <div className={cx('inline-flex', styleDirection)}>{children}</div>
-          {helperText && (
-            <p id={context.helperTextId} className="text-xs text-sumi-700 mt-2">
-              {helperText}
-            </p>
-          )}
-          {isInvalid && (
-            <p
-              id={context.errorMessageId}
-              className={cx(
-                'text-xs text-sun-800',
-                helperText ? 'mt-1' : 'mt-2'
-              )}
-            >
-              {errorMessage}
-            </p>
-          )}
-        </fieldset>
-      </ControllerContext.Provider>
-    )
-  })
+  return (
+    <ControllerContext.Provider value={context}>
+      <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
+        <legend>
+          <p
+            className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
+          >
+            {labelText}
+            {isRequired && <span className="text-sun-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">
+            {helperText}
+          </p>
+        )}
+        {isInvalid && (
+          <p
+            id={context.errorMessageId}
+            className={cx(
+              'text-sup text-sun-800',
+              helperText ? 'mt-1' : 'mt-2'
+            )}
+          >
+            {errorMessage}
+          </p>
+        )}
+      </fieldset>
+    </ControllerContext.Provider>
+  )
+})
 
 FieldsetControl.displayName = 'FieldsetControl'

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

@@ -4,19 +4,17 @@ import { ControllerContext } from './context'
 
 export interface InputProps extends React.ComponentPropsWithRef<'input'> {}
 
-export const Input: React.ElementType<InputProps> = React.forwardRef<
-  HTMLInputElement,
-  InputProps
->((props, ref) => {
-  const { className, ...restProps } = props
-  const ctx = React.useContext(ControllerContext)
-  if (ctx.isRequired) {
-    restProps.required = true
-  }
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props
+    const ctx = React.useContext(ControllerContext)
+    if (ctx.isRequired) {
+      restProps.required = true
+    }
 
-  const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
 
-  const style = `
+    const style = `
     p-4
     rounded-lg
     border
@@ -29,18 +27,19 @@ export const Input: React.ElementType<InputProps> = React.forwardRef<
     disabled:border-sumi-500
   `
 
-  return (
-    <input
-      type="text"
-      id={restProps.id ?? ctx.id}
-      className={cx(style, invalidStyle, className)}
-      aria-describedby={ctx.helperTextId}
-      aria-errormessage={ctx.errorMessageId}
-      aria-invalid={ctx.isInvalid ?? false}
-      ref={ref}
-      {...restProps}
-    />
-  )
-})
+    return (
+      <input
+        type="text"
+        id={restProps.id ?? ctx.id}
+        className={cx(style, invalidStyle, className)}
+        aria-describedby={ctx.helperTextId}
+        aria-errormessage={ctx.errorMessageId}
+        aria-invalid={ctx.isInvalid ?? false}
+        ref={ref}
+        {...restProps}
+      />
+    )
+  }
+)
 
 Input.displayName = 'Input'

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

@@ -11,60 +11,62 @@ export interface LabelControlProps
   isRequired?: boolean
 }
 
-export const LabelControl: React.ElementType<LabelControlProps> =
-  React.forwardRef<HTMLLabelElement, LabelControlProps>((props, ref) => {
-    const id = React.useId()
-    const {
-      labelText,
-      className,
-      helperText,
-      errorMessage,
-      isInvalid,
-      isRequired,
-      children,
-      ...restProps
-    } = props
+export const LabelControl = React.forwardRef<
+  HTMLLabelElement,
+  LabelControlProps
+>((props, ref) => {
+  const id = React.useId()
+  const {
+    labelText,
+    className,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    children,
+    ...restProps
+  } = props
 
-    const context = {
-      id: props.htmlFor ?? `input-${id}`,
-      helperTextId: `helper-text-${id}`,
-      errorMessageId: `error-message-${id}`,
-      isInvalid: isInvalid ?? false,
-      isRequired: isRequired ?? false
-    }
+  const context = {
+    id: props.htmlFor ?? `input-${id}`,
+    helperTextId: `helper-text-${id}`,
+    errorMessageId: `error-message-${id}`,
+    isInvalid: isInvalid ?? false,
+    isRequired: isRequired ?? false
+  }
 
-    return (
-      <ControllerContext.Provider value={context}>
-        <div className={cx('mb-4', className)}>
-          <label
-            className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
-            htmlFor={context.id}
-            ref={ref}
-            {...restProps}
+  return (
+    <ControllerContext.Provider value={context}>
+      <div className={cx('mb-4', className)}>
+        <label
+          className={cx('block mb-2 text-label', isInvalid && 'text-sun-800')}
+          htmlFor={context.id}
+          ref={ref}
+          {...restProps}
+        >
+          {labelText}
+          {isRequired && <span className="text-sun-800">&nbsp;*</span>}
+        </label>
+        {helperText && (
+          <p id={context.helperTextId} className="text-sup text-sumi-700 mb-2">
+            {helperText}
+          </p>
+        )}
+        {children}
+        {isInvalid && (
+          <p
+            id={context.errorMessageId}
+            className={cx(
+              'text-sup text-sun-800',
+              helperText ? 'mt-1' : 'mt-2'
+            )}
           >
-            {labelText}
-            {isRequired && <span className="text-sun-800">&nbsp;*</span>}
-          </label>
-          {helperText && (
-            <p id={context.helperTextId} className="text-xs text-sumi-700 mb-2">
-              {helperText}
-            </p>
-          )}
-          {children}
-          {isInvalid && (
-            <p
-              id={context.errorMessageId}
-              className={cx(
-                'text-xs text-sun-800',
-                helperText ? 'mt-1' : 'mt-2'
-              )}
-            >
-              {errorMessage}
-            </p>
-          )}
-        </div>
-      </ControllerContext.Provider>
-    )
-  })
+            {errorMessage}
+          </p>
+        )}
+      </div>
+    </ControllerContext.Provider>
+  )
+})
 
 LabelControl.displayName = 'LabelControl'

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

@@ -4,20 +4,18 @@ import { ControllerContext } from './context'
 
 export interface RadioProps extends React.ComponentPropsWithRef<'input'> {}
 
-export const Radio: React.ElementType<RadioProps> = 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 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
+    }
 
-  const style = `
+    const style = `
     inline-block
     text-base
     cursor-pointer
@@ -25,12 +23,12 @@ export const Radio: React.ElementType<RadioProps> = React.forwardRef<
     mr-4
     
   `
-  const styleInput = `
+    const styleInput = `
     peer
     hidden
   `
 
-  const styleRadio = `
+    const styleRadio = `
     bg-clip-content
     w-6 h-6
     ml-1
@@ -44,23 +42,24 @@ export const Radio: React.ElementType<RadioProps> = React.forwardRef<
     peer-checked:border-sea-600
     peer-disabled:border-sumi-500
   `
-  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}
-          {...newProps}
-          ref={ref}
-        />
-        <span className={styleRadio}></span>
-        <span className="peer-disabled:text-sumi-500">{children}</span>
-      </span>
-    </label>
-  )
-})
+    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}
+            {...newProps}
+            ref={ref}
+          />
+          <span className={styleRadio}></span>
+          <span className="peer-disabled:text-sumi-500">{children}</span>
+        </span>
+      </label>
+    )
+  }
+)
 
 Radio.displayName = 'Radio'

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

@@ -4,19 +4,17 @@ import { ControllerContext } from './context'
 
 export interface SelectProps extends React.ComponentPropsWithRef<'select'> {}
 
-export const Select: React.ElementType<SelectProps> = React.forwardRef<
-  HTMLSelectElement,
-  SelectProps
->((props, ref) => {
-  const { className, 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 invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
 
-  const style = `
+    const style = `
     peer
     cursor-pointer
     appearance-none
@@ -35,7 +33,7 @@ export const Select: React.ElementType<SelectProps> = React.forwardRef<
     disabled:border-sumi-500
   `
 
-  const styleArrow = `
+    const styleArrow = `
     flex items-center
     absolute inset-y-0 right-0
     px-2
@@ -43,24 +41,25 @@ export const Select: React.ElementType<SelectProps> = React.forwardRef<
     peer-disabled:fill-sumi-500
   `
 
-  return (
-    <label className="inline-block relative">
-      <select
-        id={restProps.id ?? ctx.id}
-        className={cx(style, invalidStyle, props.className)}
-        aria-describedby={ctx.helperTextId}
-        aria-errormessage={ctx.errorMessageId}
-        aria-invalid={ctx.isInvalid ?? 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>
-  )
-})
+    return (
+      <label className="inline-block relative">
+        <select
+          id={restProps.id ?? ctx.id}
+          className={cx(style, invalidStyle, props.className)}
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? 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>
+    )
+  }
+)

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

@@ -5,30 +5,28 @@ import { ControllerContext } from './context'
 export interface TextareaProps
   extends React.ComponentPropsWithRef<'textarea'> {}
 
-export const Textarea: React.ElementType<TextareaProps> = React.forwardRef<
-  HTMLTextAreaElement,
-  TextareaProps
->((props, ref) => {
-  const { className, children, onChange, maxLength, ...restProps } = props
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { 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 invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
-  const overtextStyle =
-    count > (maxLength || 0) ? 'text-sun-800' : 'text-sumi-700'
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
+    const overtextStyle =
+      count > (maxLength || 0) ? 'text-sun-800' : 'text-sumi-700'
 
-  const style = `
+    const style = `
     p-4
     rounded-lg
     border
@@ -41,30 +39,31 @@ export const Textarea: React.ElementType<TextareaProps> = React.forwardRef<
     disabled:border-sumi-500
   `
 
-  return (
-    <>
-      <textarea
-        id={restProps.id ?? ctx.id}
-        className={cx(style, invalidStyle, className)}
-        aria-describedby={ctx.helperTextId}
-        aria-errormessage={ctx.errorMessageId}
-        aria-invalid={ctx.isInvalid ?? false}
-        onChange={onChangeHandler}
-        {...restProps}
-        ref={ref}
-      >
-        {children}
-      </textarea>
-      {maxLength ? (
-        <p className="text-xs text-sumi-700">
-          <span className={overtextStyle}>{count}</span>/
-          <span>{maxLength}</span>
-        </p>
-      ) : (
-        ''
-      )}
-    </>
-  )
-})
+    return (
+      <>
+        <textarea
+          id={restProps.id ?? ctx.id}
+          className={cx(style, invalidStyle, className)}
+          aria-describedby={ctx.helperTextId}
+          aria-errormessage={ctx.errorMessageId}
+          aria-invalid={ctx.isInvalid ?? 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>
+        ) : (
+          ''
+        )}
+      </>
+    )
+  }
+)
 
 Textarea.displayName = 'Textarea'

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

@@ -14,40 +14,42 @@ export interface CheckboxGroupProps
   isRequired?: boolean
 }
 
-export const CheckboxGroup: React.ElementType<CheckboxGroupProps> =
-  React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>((props, ref) => {
-    const {
-      items,
-      onChange,
-      className,
-      labelText,
-      helperText,
-      errorMessage,
-      isInvalid,
-      isRequired,
-      ...restProps
-    } = props
+export const CheckboxGroup = React.forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>((props, ref) => {
+  const {
+    items,
+    onChange,
+    className,
+    labelText,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    ...restProps
+  } = props
 
-    return (
-      <FieldsetControl
-        className={className}
-        labelText={labelText}
-        helperText={helperText}
-        errorMessage={errorMessage}
-        isInvalid={isInvalid}
-        isRequired={isRequired}
-        ref={ref}
-        {...restProps}
-      >
-        {items.map(({ label, value }, index) => {
-          return (
-            <Checkbox key={index} value={value} onChange={onChange}>
-              {label}
-            </Checkbox>
-          )
-        })}
-      </FieldsetControl>
-    )
-  })
+  return (
+    <FieldsetControl
+      className={className}
+      labelText={labelText}
+      helperText={helperText}
+      errorMessage={errorMessage}
+      isInvalid={isInvalid}
+      isRequired={isRequired}
+      ref={ref}
+      {...restProps}
+    >
+      {items.map(({ label, value }, index) => {
+        return (
+          <Checkbox key={index} value={value} onChange={onChange}>
+            {label}
+          </Checkbox>
+        )
+      })}
+    </FieldsetControl>
+  )
+})
 
 CheckboxGroup.displayName = 'CheckboxGroup'

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

@@ -15,7 +15,7 @@ export interface RadioGroupProps
   defaultValue?: string
 }
 
-export const RadioGroup: React.ElementType<RadioGroupProps> = React.forwardRef<
+export const RadioGroup = React.forwardRef<
   HTMLFieldSetElement,
   RadioGroupProps
 >((props, ref) => {