@sakura-ui/sakura-ui 0.1.10 → 0.1.12

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,44 +2,69 @@ import React from 'react'
 import { cx } from '../utils/class'
 import { ControllerContext } from './context'
 
-export interface TextareaProps extends React.ComponentProps<'textarea'> {}
-
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (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 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 (
+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
+
+  const [count, setCount] = React.useState(0)
+
+  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) onChange(e)
+
+    setCount(e.target.value.length)
+  }
+
+  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 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>
-    )
-  }
-) as React.ElementType
+      {maxLength ? (
+        <p className="text-xs text-sumi-700">
+          <span className={overtextStyle}>{count}</span>/
+          <span>{maxLength}</span>
+        </p>
+      ) : (
+        ''
+      )}
+    </>
+  )
+})
+
+Textarea.displayName = 'Textarea'

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

@@ -4,7 +4,7 @@ import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
 
 export interface CheckboxGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
   labelText: string
@@ -14,40 +14,40 @@ export interface CheckboxGroupProps
   isRequired?: boolean
 }
 
-export const CheckboxGroup = React.forwardRef<
-  HTMLFieldSetElement,
-  CheckboxGroupProps
->((props, ref) => {
-  const {
-    items,
-    onChange,
-    className,
-    labelText,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    ...restProps
-  } = props
+export const CheckboxGroup: React.ElementType<CheckboxGroupProps> =
+  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>
-  )
-}) as React.ElementType
+    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

@@ -4,7 +4,7 @@ import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
 
 export interface RadioGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
   labelText: string
@@ -15,7 +15,7 @@ export interface RadioGroupProps
   defaultValue?: string
 }
 
-export const RadioGroup = React.forwardRef<
+export const RadioGroup: React.ElementType<RadioGroupProps> = React.forwardRef<
   HTMLFieldSetElement,
   RadioGroupProps
 >((props, ref) => {
@@ -57,4 +57,6 @@ export const RadioGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-}) as React.ElementType
+})
+
+RadioGroup.displayName = 'RadioGroup'

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

@@ -2,7 +2,8 @@ import React from 'react'
 import { LabelControl } from '../LabelControl'
 import { Select } from '../Select'
 
-export interface SelectControlProps extends React.ComponentProps<'select'> {
+export interface SelectControlProps
+  extends React.ComponentPropsWithRef<'select'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -10,30 +11,30 @@ export interface SelectControlProps extends React.ComponentProps<'select'> {
   isRequired?: boolean
 }
 
-export const SelectControl = React.forwardRef<
-  HTMLSelectElement,
-  SelectControlProps
->((props, ref) => {
-  const {
-    className,
-    labelText,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    ...restProps
-  } = props
+export const SelectControl: React.ElementType<SelectControlProps> =
+  React.forwardRef<HTMLSelectElement, SelectControlProps>((props, ref) => {
+    const {
+      className,
+      labelText,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      ...restProps
+    } = props
 
-  return (
-    <LabelControl
-      className={className}
-      labelText={labelText}
-      helperText={helperText}
-      errorMessage={errorMessage}
-      isInvalid={isInvalid}
-      isRequired={isRequired}
-    >
-      <Select ref={ref} {...restProps} />
-    </LabelControl>
-  )
-}) as React.ElementType
+    return (
+      <LabelControl
+        className={className}
+        labelText={labelText}
+        helperText={helperText}
+        errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+      >
+        <Select ref={ref} {...restProps} />
+      </LabelControl>
+    )
+  })
+
+SelectControl.displayName = 'SelectControl'