@geckou/ui-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Geckou LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# @geckou/ui-react
+
+Web（React 19 / Next.js）用の UI コンポーネント集。
+
+ロジックは [`@geckou/ui-core`](../core) が持ち、このパッケージは DOM の記述だけを担当する。
+同じ core を [`@geckou/ui-vue`](../vue) も使うため、バリデーション・日付処理の挙動は両者で一致する。
+
+Mobile（Expo / NativeWind）では使えない（DOM 前提のため）。
+
+## インストール
+
+```bash
+yarn add @geckou/ui-react
+```
+
+ソースをそのまま配布しているため、利用側でトランスパイルの対象に含める。
+
+1. `next.config.ts` の `transpilePackages` に `'@geckou/ui-react'` を追加
+2. `tailwind.config.ts` の `content` に `'./node_modules/@geckou/ui-react/src/**/*.{ts,tsx}'` を追加
+3. グローバル CSS に `@import '@geckou/ui-react/styles/tokens.css';` を追加（デザイントークン）
+
+`tokens.css` は既定値です。上書きする変数の一覧はリポジトリの [README](../../README.md#design-tokens) を参照してください。
+
+## 使い方
+
+```tsx
+import { TextBox, BasicButton, ModalBox } from '@geckou/ui-react'
+```
+
+### フォーム全体の検証状態
+
+`useFormValidation` で各入力の検証結果を集約する。
+Vue 版の `FormValidationManager` と同じストア（`@geckou/ui-core`）を使う。
+
+```tsx
+const { isAllValid, store } = useFormValidation()
+
+return (
+  <form>
+    <DatePicker name="startedOn" isRequired />
+    <button disabled={!isAllValid}>送信</button>
+  </form>
+)
+```
+
+## 収録コンポーネント
+
+フォーム系 25 種（`TextBox` / `TextArea` / `SelectBox` / `SearchableSelectBox` / `CheckBox` 系 /
+`RadioButtons` / `ToggleButton` / `DatePicker` / `DateRangePicker` / `DateSelector` /
+`FileInput` / `ModalBox` / `PopupBox` / `DropdownUi` / `SlideDownUi` / `TabUI` ほか）とアイコン 5 種。
+
+記事一覧（ArticleList）は Vue 版のみに収録している。
+
+## テスト
+
+```bash
+yarn workspace @geckou/ui-react test
+```
+
+## License
+
+[MIT](../../LICENSE)

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@geckou/ui-react",
+  "version": "0.1.0",
+  "description": "A set of reusable React UI components (forms) by Geckou",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/geckou/ui.git",
+    "directory": "packages/react"
+  },
+  "author": "geckou-shogo <shogo.nojima@geckou.net>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@geckou/ui-core": "^0.1.0"
+  },
+  "scripts": {
+    "build": "echo 'ソースをそのまま配布する（利用側で transpilePackages に指定する）'",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  }
+}

package/src/components/BasicButton.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'
+import type { ButtonStyleForEachStatus } from '../types'
+import { LoadingSpinner } from './LoadingSpinner'
+import { COLOR } from '../constants'
+
+type Props = {
+  cssStyle?: ButtonStyleForEachStatus
+  duration?: number
+  isLoading?: boolean
+  isDisabled?: boolean
+  buttonType?: 'button' | 'submit' | 'reset'
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  loading?: ReactNode
+  children?: ReactNode
+}
+
+export function BasicButton({
+  cssStyle,
+  duration = 0.3,
+  isLoading,
+  isDisabled,
+  buttonType = 'button',
+  onClick,
+  loading,
+  children,
+}: Props) {
+  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
+
+  const currentCssStyle = {
+    textColor: COLOR.white,
+    backgroundColor: isDisabled ? COLOR.darkGray : COLOR.blue,
+    backgroundImage: 'none',
+    border: {
+      color: isDisabled ? COLOR.darkGray : COLOR.blue,
+      size: '1px',
+      radius: '.25rem',
+    },
+    boxShadow: '0 0 0 0 transparent',
+    ...baseStyle,
+  }
+
+  const hoverStyle = cssStyle?.hover || {}
+
+  const style = {
+    '--text-color': currentCssStyle.textColor,
+    '--background-color': currentCssStyle.backgroundColor,
+    '--background-image': currentCssStyle.backgroundImage,
+    '--radius-size': currentCssStyle.border?.radius,
+    '--button-shadow': `0 0 0 ${currentCssStyle.border?.size} ${currentCssStyle.border?.color} inset, ${currentCssStyle.boxShadow}`,
+    '--hover-text-color': hoverStyle.textColor || currentCssStyle.textColor,
+    '--hover-background-color':
+      hoverStyle.backgroundColor ||
+      (currentCssStyle.backgroundColor &&
+        `${currentCssStyle.backgroundColor}cc`),
+    '--hover-background-image':
+      hoverStyle.backgroundImage || currentCssStyle.backgroundImage,
+    '--hover-radius-size':
+      hoverStyle.border?.radius || currentCssStyle.border?.radius,
+    '--hover-button-shadow': `0 0 0 ${hoverStyle.border?.size || currentCssStyle.border?.size} ${hoverStyle.border?.color || currentCssStyle.border?.color} inset, ${hoverStyle.boxShadow || currentCssStyle.boxShadow}`,
+    '--duration': `${duration}s`,
+  } as CSSProperties
+
+  return (
+    <button
+      type={buttonType}
+      disabled={isDisabled || isLoading}
+      onClick={onClick}
+      style={style}
+      className="relative inline-flex w-max cursor-pointer items-center justify-center rounded-(--radius-size) border-none bg-(--background-color) px-8 py-4 leading-none text-(--text-color) shadow-(--button-shadow) transition-all duration-(--duration) enabled:hover:rounded-(--hover-radius-size) enabled:hover:bg-(--hover-background-color) enabled:hover:text-(--hover-text-color) enabled:hover:shadow-(--hover-button-shadow) disabled:pointer-events-none disabled:before:pointer-events-auto disabled:before:absolute disabled:before:inset-0 disabled:before:cursor-not-allowed disabled:before:content-['']"
+    >
+      {isLoading && (
+        <span className="absolute inset-0 m-auto flex max-h-[calc(100%-1.5rem)] items-center justify-center fill-current text-current [&_*]:max-h-full [&_*]:fill-current">
+          {loading ?? <LoadingSpinner />}
+        </span>
+      )}
+      <span className={isLoading ? 'invisible' : undefined}>{children}</span>
+    </button>
+  )
+}

package/src/components/CheckBox.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import type { CSSProperties, ReactNode } from 'react'
+import type { CheckBoxStyleForEachStatus } from '../types'
+import { CheckIcon } from './icons/CheckIcon'
+import { COLOR } from '../constants'
+
+type Props = {
+  name: string
+  checked?: boolean
+  onChange?: (newValue: boolean) => void
+  isDisabled?: boolean
+  cssStyle?: CheckBoxStyleForEachStatus
+  isDisableAnimation?: boolean
+  check?: ReactNode
+}
+
+export function CheckBox({
+  name,
+  checked,
+  onChange,
+  isDisabled,
+  cssStyle,
+  isDisableAnimation,
+  check,
+}: Props) {
+  const isChecked = checked ?? false
+  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
+
+  const currentCssStyle = {
+    textColor: isDisabled ? COLOR.darkGray : COLOR.blue,
+    backgroundColor: isDisabled ? COLOR.lightGray : COLOR.white,
+    border: {
+      color: isDisabled ? COLOR.darkGray : COLOR.blue,
+      size: '1px',
+      radius: '.25rem',
+    },
+    ...baseStyle,
+  }
+
+  const style = {
+    '--text-color': currentCssStyle.textColor,
+    '--border-color': currentCssStyle.border?.color,
+    '--border-size': currentCssStyle.border?.size,
+    '--radius-size': currentCssStyle.border?.radius,
+    '--background-color': currentCssStyle.backgroundColor,
+    '--duration': isDisableAnimation ? '0s' : '.3s',
+  } as CSSProperties
+
+  return (
+    <>
+      <style>
+        {
+          '@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}'
+        }
+      </style>
+      <button
+        type="button"
+        style={style}
+        aria-label={name}
+        aria-pressed={isChecked}
+        disabled={isDisabled}
+        onClick={(event) => {
+          event.stopPropagation()
+          if (!isDisabled) onChange?.(!isChecked)
+        }}
+        className={`relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) border-none shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color) has-[input:disabled]:pointer-events-none has-[input:disabled]:before:pointer-events-auto has-[input:disabled]:before:absolute has-[input:disabled]:before:inset-0 has-[input:disabled]:before:cursor-not-allowed has-[input:disabled]:before:content-[''] ${isChecked ? 'animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)' : 'bg-(--background-color)'}`}
+      >
+        <input
+          type="checkbox"
+          name={name}
+          checked={isChecked}
+          disabled={isDisabled}
+          onChange={(event) => {
+            if (!isDisabled) onChange?.(event.target.checked)
+          }}
+          className="hidden"
+        />
+        <div
+          className={`flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${isChecked ? 'text-(--background-color)' : 'text-(--border-color)'}`}
+        >
+          {check ?? <CheckIcon />}
+        </div>
+      </button>
+    </>
+  )
+}

package/src/components/CheckBoxes.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import type { Option, CheckBoxStyleForEachStatus } from '../types'
+import { MESSAGES } from '@geckou/ui-core'
+import { useEffect, useRef, useState } from 'react'
+import { LabeledCheckbox } from './LabeledCheckbox'
+import { ErrorMessage } from './ErrorMessage'
+import { COLOR } from '../constants'
+
+type Props = {
+  name: string
+  options: Option[]
+  value?: string[]
+  onChange?: (newValue: string[]) => void
+  isDisabled?: boolean
+  isRequired?: boolean
+  cssStyle?: CheckBoxStyleForEachStatus
+}
+
+export function CheckBoxes({
+  name,
+  options,
+  value,
+  onChange,
+  isDisabled,
+  isRequired,
+  cssStyle,
+}: Props) {
+  const [checkedValues, setCheckedValues] = useState<string[]>(value ?? [])
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const validateInput = (newValues: string[]) =>
+    setErrorMessage(isRequired && newValues.length === 0 ? MESSAGES.required : '')
+
+  const isFirstRender = useRef(true)
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      if (value?.length) validateInput(value)
+      return
+    }
+
+    if (value) setCheckedValues(value)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Vue 版（@geckou/ui-vue）同様、外部からの値変更時のみ同期する
+  }, [value])
+
+  const toggleValue = (optionValue: string, checked: boolean) => {
+    const newValues = options
+      .map((option) => String(option.value))
+      .filter((candidate) =>
+        candidate === optionValue ? checked : checkedValues.includes(candidate),
+      )
+
+    setCheckedValues(newValues)
+    validateInput(newValues)
+    onChange?.(newValues)
+  }
+
+  const errorColor = {
+    ...(cssStyle?.error ?? {}),
+    textColor: COLOR.white,
+    backgroundColor: COLOR.red,
+    border: {
+      color: COLOR.red,
+      size: '1px',
+      radius: '.25rem',
+    },
+  }
+
+  return (
+    <div className="relative flex flex-wrap gap-x-6 gap-y-4">
+      {options.map((option) => (
+        <LabeledCheckbox
+          key={option.value}
+          name={name}
+          label={option.label}
+          checked={checkedValues.includes(String(option.value))}
+          onChange={(checked) => toggleValue(String(option.value), checked)}
+          isDisabled={isDisabled}
+          cssStyle={cssStyle}
+        />
+      ))}
+      <ErrorMessage
+        errorMessages={errorMessage ? [errorMessage] : []}
+        cssStyle={{
+          textColor: errorColor.textColor,
+          backgroundColor: errorColor.backgroundColor,
+        }}
+      />
+    </div>
+  )
+}

package/src/components/CheckButton.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import type { CSSProperties, ReactNode } from 'react'
+import type { CheckBoxStyleForEachStatus } from '../types'
+import { CheckIcon } from './icons/CheckIcon'
+
+type Props = {
+  name: string
+  checked?: boolean
+  onChange?: (newValue: boolean) => void
+  isDisabled?: boolean
+  cssStyle?: CheckBoxStyleForEachStatus
+  isDisableAnimation?: boolean
+  check?: ReactNode
+}
+
+export function CheckButton({
+  name,
+  checked,
+  onChange,
+  isDisabled,
+  cssStyle = { default: {} },
+  isDisableAnimation,
+  check,
+}: Props) {
+  const isChecked = checked ?? false
+  const currentCssStyle = isDisabled ? cssStyle.disabled : cssStyle.default
+
+  const style = {
+    '--border-color': currentCssStyle?.border?.color || 'blue',
+    '--border-size': currentCssStyle?.border?.size || '1px',
+    '--radius-size': currentCssStyle?.border?.radius || '0.25rem',
+    '--background-color': currentCssStyle?.backgroundColor || '#fff',
+    '--duration': isDisableAnimation ? '0s' : '.3s',
+  } as CSSProperties
+
+  return (
+    <>
+      <style>
+        {
+          '@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}'
+        }
+      </style>
+      <label
+        style={style}
+        className={`relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] has-[input:disabled]:pointer-events-none has-[input:disabled]:before:pointer-events-auto has-[input:disabled]:before:absolute has-[input:disabled]:before:inset-0 has-[input:disabled]:before:cursor-not-allowed has-[input:disabled]:before:content-[''] has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${isChecked ? 'animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)' : 'bg-(--background-color)'}`}
+      >
+        <input
+          type="checkbox"
+          name={name}
+          checked={isChecked}
+          disabled={isDisabled}
+          onChange={(event) => {
+            if (!isDisabled) onChange?.(event.target.checked)
+          }}
+          className="sr-only"
+        />
+        <div
+          className={`flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${isChecked ? 'text-(--background-color)' : 'text-(--border-color)'}`}
+        >
+          {check ?? <CheckIcon />}
+        </div>
+      </label>
+    </>
+  )
+}

package/src/components/DatePicker.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import type { DateObject, InputBoxStyleForEachStatus } from '../types'
+import {
+  MESSAGES,
+  composeDateValue,
+  formatDateValue,
+  splitDate,
+  validateDateObject,
+} from '@geckou/ui-core'
+import { useEffect, useRef, useState } from 'react'
+import { InputBox } from './InputBox'
+import { ErrorMessage } from './ErrorMessage'
+import { CalendarIcon } from './icons/CalendarIcon'
+import { COLOR } from '../constants'
+
+type Props = {
+  name: string
+  value?: string
+  onChange?: (newValue: string) => void
+  cssStyle?: InputBoxStyleForEachStatus
+  isDisabled?: boolean
+  isRequired?: boolean
+  minDate?: string
+  maxDate?: string
+  size?: 'small' | 'medium'
+  type?: 'date' | 'month'
+}
+
+export function DatePicker({
+  name,
+  value,
+  onChange,
+  cssStyle,
+  isDisabled,
+  isRequired,
+  minDate = '',
+  maxDate = '',
+  size = 'medium',
+  type = 'date',
+}: Props) {
+  const [dateValue, setDateValue] = useState(() =>
+    value ? formatDateValue(value, type) : '',
+  )
+  const [dateObject, setDateObject] = useState<DateObject>(() =>
+    value ? splitDate(formatDateValue(value, type)) : { year: '', month: '', day: '' },
+  )
+  const [errorMessage, setErrorMessage] = useState('')
+
+  // prop が実際に変わったときだけ同期する（内部編集を上書きしないため）
+  const lastValueProp = useRef(value)
+
+  useEffect(() => {
+    if (lastValueProp.current === value) return
+    lastValueProp.current = value
+
+    const normalized = value ? formatDateValue(value, type) : ''
+    setDateValue(normalized)
+    setDateObject(splitDate(normalized))
+  }, [value, type])
+
+  const validateInput = (newValue: string) => {
+    if (!newValue && isRequired)
+      {return { isValid: false, message: MESSAGES.required }}
+    return { isValid: true, message: '' }
+  }
+
+  const validateObject = (object: DateObject) =>
+    validateDateObject(object, { type, isRequired })
+
+  const handleDateValueChange = (newValue: string) => {
+    setDateValue(newValue)
+    setDateObject(splitDate(newValue))
+    const { message } = validateInput(newValue)
+    setErrorMessage(message)
+    onChange?.(newValue)
+  }
+
+  const handleObjectChange = (key: keyof DateObject, newValue: string) => {
+    const next = { ...dateObject, [key]: newValue }
+    setDateObject(next)
+    const { isValid, message } = validateObject(next)
+    setErrorMessage(message)
+
+    if (isValid) {
+      const joined = composeDateValue(next, type)
+      setDateValue(joined)
+      onChange?.(joined)
+    }
+  }
+
+  const isSmall = size === 'small'
+  const textInputClass = `flex-none! ${isSmall ? 'px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]' : 'p-[var(--sp-medium,0.75rem)]!'}`
+  const iconStyle = { '--icon-color': COLOR.blue } as CSSProperties
+
+  return (
+    <InputBox
+      cssStyle={cssStyle}
+      isDisabled={isDisabled}
+      isErrored={!!errorMessage}
+      className={`flex w-full items-center leading-none ${isSmall ? 'h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]' : 'h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]'}`}
+    >
+      <div className="relative flex-none" style={iconStyle}>
+        <CalendarIcon
+          className={`pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${isSmall ? 'size-[var(--icon-small,0.9375rem)]' : 'size-[var(--icon-medium,1.125rem)]'}`}
+        />
+        <input
+          type={type}
+          name={name}
+          value={dateValue}
+          max={maxDate}
+          min={minDate}
+          required={isRequired}
+          disabled={isDisabled}
+          onChange={(event) => handleDateValueChange(event.target.value)}
+          className={`w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${isSmall ? 'py-[var(--sp-min,0.1875rem)]!' : 'py-[var(--sp-medium,0.75rem)]!'}`}
+        />
+      </div>
+      <input
+        value={dateObject.year}
+        placeholder="年"
+        maxLength={4}
+        type="text"
+        disabled={isDisabled}
+        onChange={(event) => handleObjectChange('year', event.target.value)}
+        className={`w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${textInputClass}`}
+      />
+      /
+      <input
+        value={dateObject.month}
+        placeholder="月"
+        maxLength={2}
+        type="text"
+        disabled={isDisabled}
+        onChange={(event) => handleObjectChange('month', event.target.value)}
+        className={`w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${textInputClass}`}
+      />
+      {type === 'date' && <span>/</span>}
+      {type === 'date' && (
+        <input
+          value={dateObject.day}
+          placeholder="日"
+          maxLength={2}
+          type="text"
+          disabled={isDisabled}
+          onChange={(event) => handleObjectChange('day', event.target.value)}
+          className={`w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${textInputClass}`}
+        />
+      )}
+      <ErrorMessage errorMessages={errorMessage ? [errorMessage] : undefined} />
+    </InputBox>
+  )
+}

package/src/components/DateRangePicker.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import { useState } from 'react'
+import { DatePicker } from './DatePicker'
+import { COLOR } from '../constants'
+
+type DateRange = {
+  startDate: string
+  endDate: string
+}
+
+type Props = {
+  isDisabled?: boolean
+  onChange?: (newValue: DateRange) => void
+}
+
+export function DateRangePicker({ isDisabled, onChange }: Props) {
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+
+  const handleStartChange = (newValue: string) => {
+    setStartDate(newValue)
+    onChange?.({ startDate: newValue, endDate })
+  }
+
+  const handleEndChange = (newValue: string) => {
+    setEndDate(newValue)
+    onChange?.({ startDate, endDate: newValue })
+  }
+
+  const style = {
+    '--range-background-color': COLOR.white,
+    '--range-border-color': COLOR.gray,
+  } as CSSProperties
+
+  return (
+    <div
+      style={style}
+      className="flex bg-(--range-background-color) [&>*]:flex-auto [&>*]:rounded-none! [&>*:first-child]:rounded-s-[calc(var(--bv,0.375rem)/2)]! [&>*:last-child]:rounded-e-[calc(var(--bv,0.375rem)/2)]! [&>*:not(:last-child)]:border-e [&>*:not(:last-child)]:border-(--range-border-color)"
+    >
+      <DatePicker
+        value={startDate}
+        name="startDate"
+        isDisabled={isDisabled}
+        onChange={handleStartChange}
+      />
+      <div className="flex flex-none! items-center px-[var(--bv,0.375rem)]">
+        〜
+      </div>
+      <DatePicker
+        value={endDate}
+        name="endDate"
+        isDisabled={isDisabled}
+        onChange={handleEndChange}
+      />
+    </div>
+  )
+}