@sakura-ui/sakura-ui 0.1.11 → 0.1.13

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

@@ -2,7 +2,8 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface FieldsetControlProps extends React.ComponentProps<'fieldset'> {
+export interface FieldsetControlProps
+  extends React.ComponentPropsWithRef<'fieldset'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -11,61 +12,67 @@ export interface FieldsetControlProps extends React.ComponentProps<'fieldset'> {
   direction?: 'flex-col' | 'flex-row'
 }
 
-export const FieldsetControl = 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.ElementType<FieldsetControlProps> =
+  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>
-  )
-}) as React.ElementType
+    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>
+    )
+  })
+
+FieldsetControl.displayName = 'FieldsetControl'

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

@@ -2,42 +2,45 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface InputProps extends React.ComponentProps<'input'> {}
+export interface InputProps extends React.ComponentPropsWithRef<'input'> {}
 
-export const Input = 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.ElementType<InputProps> = 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 = `
-      p-4
-      rounded-lg
-      border
-      border-solid
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
-      disabled:bg-transparent
-      disabled:text-sumi-500
-      disabled:border-sumi-500
-    `
+  const style = `
+    p-4
+    rounded-lg
+    border
+    border-solid
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:bg-transparent
+    disabled:text-sumi-500
+    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}
-        {...restProps}
-        ref={ref}
-      />
-    )
-  }
-) as React.ElementType
+  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

@@ -2,7 +2,8 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface LabelControlProps extends React.ComponentProps<'label'> {
+export interface LabelControlProps
+  extends React.ComponentPropsWithRef<'label'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -10,57 +11,60 @@ export interface LabelControlProps extends React.ComponentProps<'label'> {
   isRequired?: boolean
 }
 
-export const LabelControl = React.forwardRef<
-  HTMLLabelElement,
-  LabelControlProps
->((props, ref) => {
-  const id = React.useId()
-  const {
-    labelText,
-    className,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    children,
-    ...restProps
-  } = props
+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
 
-  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}
-        >
-          {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')}
+    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}
           >
-            {errorMessage}
-          </p>
-        )}
-      </div>
-    </ControllerContext.Provider>
-  )
-}) as React.ElementType
+            {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>
+    )
+  })
+
+LabelControl.displayName = 'LabelControl'

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

@@ -2,9 +2,12 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface Props extends React.ComponentProps<'input'> {}
+export interface RadioProps extends React.ComponentPropsWithRef<'input'> {}
 
-export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
+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) {
@@ -58,4 +61,6 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
       </span>
     </label>
   )
-}) as React.ElementType
+})
+
+Radio.displayName = 'Radio'

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

@@ -2,64 +2,65 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface SelectProps extends React.ComponentProps<'select'> {}
+export interface SelectProps extends React.ComponentPropsWithRef<'select'> {}
 
-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
-    }
+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
+  }
 
-    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
+  const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
 
-    const style = `
-      peer
-      cursor-pointer
-      appearance-none
-      text-base
-      w-full
-      bg-white-100
-      border
-      border-solid
-      py-4 px-4 pr-8
-      rounded-[8px]
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
-      disabled:bg-transparent
-      disabled:text-sumi-500
-      disabled:border-sumi-500
-    `
+  const style = `
+    peer
+    cursor-pointer
+    appearance-none
+    text-base
+    w-full
+    bg-white-100
+    border
+    border-solid
+    py-4 px-4 pr-8
+    rounded-[8px]
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:bg-transparent
+    disabled:text-sumi-500
+    disabled:border-sumi-500
+  `
 
-    const styleArrow = `
-      flex items-center
-      absolute inset-y-0 right-0
-      px-2
-      pointer-events-none
-      peer-disabled:fill-sumi-500
-    `
+  const styleArrow = `
+    flex items-center
+    absolute inset-y-0 right-0
+    px-2
+    pointer-events-none
+    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>
-    )
-  }
-) as React.ElementType
+  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

@@ -2,65 +2,69 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface TextareaProps extends React.ComponentProps<'textarea'> {}
+export interface TextareaProps
+  extends React.ComponentPropsWithRef<'textarea'> {}
 
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const { className, children, onChange, maxLength, ...restProps } = props
+export const Textarea: React.ElementType<TextareaProps> = 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 = `
+    p-4
+    rounded-lg
+    border
+    border-solid
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:bg-transparent
+    disabled:text-sumi-500
+    disabled:border-sumi-500
+  `
 
-    const style = `
-      p-4
-      rounded-lg
-      border
-      border-solid
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
-      disabled:bg-transparent
-      disabled:text-sumi-500
-      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-xs text-sumi-700">
-            <span className={overtextStyle}>{count}</span>/
-            <span>{maxLength}</span>
-          </p>
-        ) : (
-          ''
-        )}
-      </>
-    )
-  }
-) as React.ElementType
+Textarea.displayName = 'Textarea'