@geckou/ui-react 0.1.0 → 0.2.0

package/README.md

@@ -13,11 +13,32 @@ Mobile（Expo / NativeWind）では使えない（DOM 前提のため）。
 yarn add @geckou/ui-react
 ```
 
-ソースをそのまま配布しているため、利用側でトランスパイルの対象に含める。
+ビルド済みの JavaScript と型定義（`dist/`）を配布しています。トランスパイルの設定は要りません。
 
-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';` を追加（デザイントークン）
+1. グローバル CSS に `@import '@geckou/ui-react/styles/tokens.css';` を追加（デザイントークン）
+2. Tailwind を使う場合は、配布物をスキャン対象に加える
+
+**Tailwind CSS v4 が必須です。** コンポーネントは `bg-(--background-color)`、
+`rounded-(--radius-size)`、`flex-none!` のような v4 の記法を直書きしているため、
+v3 ではこれらのクラスが生成されません。v4 はスキャン対象を CSS 側の `@source` で指定します。
+
+```css
+/* グローバル CSS */
+@import 'tailwindcss';
+@source '../node_modules/@geckou/ui-react/dist';
+
+@import '@geckou/ui-react/styles/tokens.css';
+```
+
+`@source` のパスは、その CSS ファイルからの相対で書きます。
+
+`'use client'` はビルド後も各ファイルの先頭に残るので、Next.js の App Router では
+Server Component から直接 import できます（状態を持つコンポーネントだけが Client Component になります）。
+
+> **0.1.1 以前から更新する場合**: ソース配布をやめたため、`next.config.ts` の
+> `transpilePackages` から `'@geckou/ui-react'` を外し、Tailwind のスキャン対象を
+> `src/**/*.{ts,tsx}` から `dist` に変えてください。`transpilePackages` は
+> 残しても動きますが、スキャン対象が `src` のままだとクラスが検出されずスタイルが当たりません。
 
 `tokens.css` は既定値です。上書きする変数の一覧はリポジトリの [README](../../README.md#design-tokens) を参照してください。
 
@@ -31,18 +52,38 @@ import { TextBox, BasicButton, ModalBox } from '@geckou/ui-react'
 
 `useFormValidation` で各入力の検証結果を集約する。
 Vue 版の `FormValidationManager` と同じストア（`@geckou/ui-core`）を使う。
+**`store` を入力コンポーネントの `formValidationStore` に渡してください**（渡さない入力は集計されません）。
+対応しているのは `DatePicker` / `DateRangePicker` / `DateSelector`。
 
 ```tsx
 const { isAllValid, store } = useFormValidation()
+const [startedOn, setStartedOn] = useState('')
+const [period, setPeriod] = useState({ start: '', end: '' })
 
 return (
   <form>
-    <DatePicker name="startedOn" isRequired />
+    <DatePicker
+      name="startedOn"
+      value={startedOn}
+      onChange={setStartedOn}
+      isRequired
+      formValidationStore={store}
+    />
+    <DateRangePicker name="period" value={period} onChange={setPeriod} />
     <button disabled={!isAllValid}>送信</button>
   </form>
 )
 ```
 
+props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあたるものが
+`value` + `onChange` になるだけで、名前と意味は同じ。
+
+| Component | value | 主な props |
+|-----------|-------|-----------|
+| `DatePicker` | `string`（`YYYY-MM-DD` / `type="month"` なら `YYYY-MM`） | `name` / `isRequired` / `isDisabled` / `minDate` / `maxDate` / `size` / `type` / `formValidationStore` |
+| `DateRangePicker` | `{ start: string; end: string }` | `DatePicker` と同じ（開始日と終了日の min / max が自動連動）。各入力の name は `<name>Start` / `<name>End` |
+| `DateSelector` | `string`（`YYYY-MM-DD` / `type="month"` なら `YYYY-MM`） | `name` / `isRequired` / `type` / `formValidationStore` |
+
 ## 収録コンポーネント
 
 フォーム系 25 種（`TextBox` / `TextArea` / `SelectBox` / `SearchableSelectBox` / `CheckBox` 系 /

package/dist/components/BasicButton.d.ts

@@ -0,0 +1,14 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { ButtonStyleForEachStatus } from '../types';
+type Props = {
+    cssStyle?: ButtonStyleForEachStatus;
+    duration?: number;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    buttonType?: 'button' | 'submit' | 'reset';
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    loading?: ReactNode;
+    children?: ReactNode;
+};
+export declare function BasicButton({ cssStyle, duration, isLoading, isDisabled, buttonType, onClick, loading, children, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/BasicButton.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs as z, jsx as t } from "react/jsx-runtime";
+import { LoadingSpinner as $ } from "./LoadingSpinner.js";
+import { COLOR as n } from "@geckou/ui-core";
+function B({
+  cssStyle: r,
+  duration: m = 0.3,
+  isLoading: d,
+  isDisabled: a,
+  buttonType: v = "button",
+  onClick: f,
+  loading: k,
+  children: p
+}) {
+  var b, u, i, l, c, s, h, x, g;
+  const w = a ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, o = {
+    textColor: n.white,
+    backgroundColor: a ? n.darkGray : n.blue,
+    backgroundImage: "none",
+    border: {
+      color: a ? n.darkGray : n.blue,
+      size: "1px",
+      radius: ".25rem"
+    },
+    boxShadow: "0 0 0 0 transparent",
+    ...w
+  }, e = (r == null ? void 0 : r.hover) || {}, C = {
+    "--text-color": o.textColor,
+    "--background-color": o.backgroundColor,
+    "--background-image": o.backgroundImage,
+    "--radius-size": (b = o.border) == null ? void 0 : b.radius,
+    "--button-shadow": `0 0 0 ${(u = o.border) == null ? void 0 : u.size} ${(i = o.border) == null ? void 0 : i.color} inset, ${o.boxShadow}`,
+    "--hover-text-color": e.textColor || o.textColor,
+    "--hover-background-color": e.backgroundColor || o.backgroundColor && `${o.backgroundColor}cc`,
+    "--hover-background-image": e.backgroundImage || o.backgroundImage,
+    "--hover-radius-size": ((l = e.border) == null ? void 0 : l.radius) || ((c = o.border) == null ? void 0 : c.radius),
+    "--hover-button-shadow": `0 0 0 ${((s = e.border) == null ? void 0 : s.size) || ((h = o.border) == null ? void 0 : h.size)} ${((x = e.border) == null ? void 0 : x.color) || ((g = o.border) == null ? void 0 : g.color)} inset, ${e.boxShadow || o.boxShadow}`,
+    "--duration": `${m}s`
+  };
+  return /* @__PURE__ */ z(
+    "button",
+    {
+      type: v,
+      disabled: a || d,
+      onClick: f,
+      style: C,
+      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-['']",
+      children: [
+        d && /* @__PURE__ */ t("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", children: k ?? /* @__PURE__ */ t($, {}) }),
+        /* @__PURE__ */ t("span", { className: d ? "invisible" : void 0, children: p })
+      ]
+    }
+  );
+}
+export {
+  B as BasicButton
+};

package/dist/components/CheckBox.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { CheckBoxStyleForEachStatus } from '../types';
+type Props = {
+    name: string;
+    checked?: boolean;
+    onChange?: (newValue: boolean) => void;
+    isDisabled?: boolean;
+    cssStyle?: CheckBoxStyleForEachStatus;
+    isDisableAnimation?: boolean;
+    check?: ReactNode;
+};
+export declare function CheckBox({ name, checked, onChange, isDisabled, cssStyle, isDisableAnimation, check, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/CheckBox.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs as b, Fragment as x, jsx as c } from "react/jsx-runtime";
+import { CheckIcon as v } from "./icons/CheckIcon.js";
+import { COLOR as t } from "@geckou/ui-core";
+function j({
+  name: l,
+  checked: f,
+  onChange: r,
+  isDisabled: e,
+  cssStyle: o,
+  isDisableAnimation: p,
+  check: k
+}) {
+  var u, s, n;
+  const i = f ?? !1, h = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, d = {
+    textColor: e ? t.darkGray : t.blue,
+    backgroundColor: e ? t.lightGray : t.white,
+    border: {
+      color: e ? t.darkGray : t.blue,
+      size: "1px",
+      radius: ".25rem"
+    },
+    ...h
+  }, m = {
+    "--text-color": d.textColor,
+    "--border-color": (u = d.border) == null ? void 0 : u.color,
+    "--border-size": (s = d.border) == null ? void 0 : s.size,
+    "--radius-size": (n = d.border) == null ? void 0 : n.radius,
+    "--background-color": d.backgroundColor,
+    "--duration": p ? "0s" : ".3s"
+  };
+  return /* @__PURE__ */ b(x, { children: [
+    /* @__PURE__ */ c("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
+    /* @__PURE__ */ b(
+      "button",
+      {
+        type: "button",
+        style: m,
+        "aria-label": l,
+        "aria-pressed": i,
+        disabled: e,
+        onClick: (a) => {
+          a.stopPropagation(), e || r == null || r(!i);
+        },
+        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-[''] ${i ? "animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)" : "bg-(--background-color)"}`,
+        children: [
+          /* @__PURE__ */ c(
+            "input",
+            {
+              type: "checkbox",
+              name: l,
+              checked: i,
+              disabled: e,
+              onChange: (a) => {
+                e || r == null || r(a.target.checked);
+              },
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: `flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${i ? "text-(--background-color)" : "text-(--border-color)"}`,
+              children: k ?? /* @__PURE__ */ c(v, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  j as CheckBox
+};

package/dist/components/CheckBoxes.d.ts

@@ -0,0 +1,12 @@
+import { Option, SelectValue, CheckBoxStyleForEachStatus } from '../types';
+type Props = {
+    name: string;
+    options: Option[];
+    value?: SelectValue[];
+    onChange?: (newValue: SelectValue[]) => void;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    cssStyle?: CheckBoxStyleForEachStatus;
+};
+export declare function CheckBoxes({ name, options, value, onChange, isDisabled, isRequired, cssStyle, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/CheckBoxes.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs as M, jsx as g } from "react/jsx-runtime";
+import { COLOR as i, MESSAGES as V } from "@geckou/ui-core";
+import { useState as p, useRef as w, useEffect as R } from "react";
+import { LabeledCheckbox as j } from "./LabeledCheckbox.js";
+import { ErrorMessage as L } from "./ErrorMessage.js";
+function F({
+  name: b,
+  options: a,
+  value: r,
+  onChange: s,
+  isDisabled: k,
+  isRequired: C,
+  cssStyle: o
+}) {
+  const [u, d] = p(r ?? []), [f, h] = p(""), m = (e) => h(
+    C && e.length === 0 ? V.required : ""
+  ), n = w(!0);
+  R(() => {
+    if (n.current) {
+      n.current = !1, r != null && r.length && m(r);
+      return;
+    }
+    r && d(r);
+  }, [r]);
+  const E = (e, c) => {
+    const l = a.map((t) => t.value).filter(
+      (t) => t === e ? c : u.includes(t)
+    );
+    d(l), m(l), s == null || s(l);
+  }, x = {
+    ...(o == null ? void 0 : o.error) ?? {},
+    textColor: i.white,
+    backgroundColor: i.red,
+    border: {
+      color: i.red,
+      size: "1px",
+      radius: ".25rem"
+    }
+  };
+  return /* @__PURE__ */ M("div", { className: "relative flex flex-wrap gap-x-6 gap-y-4", children: [
+    a.map((e) => /* @__PURE__ */ g(
+      j,
+      {
+        name: b,
+        label: e.label,
+        checked: u.includes(e.value),
+        onChange: (c) => E(e.value, c),
+        isDisabled: k,
+        cssStyle: o
+      },
+      e.value
+    )),
+    /* @__PURE__ */ g(
+      L,
+      {
+        errorMessages: f ? [f] : [],
+        cssStyle: {
+          textColor: x.textColor,
+          backgroundColor: x.backgroundColor
+        }
+      }
+    )
+  ] });
+}
+export {
+  F as CheckBoxes
+};

package/dist/components/CheckButton.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { CheckBoxStyleForEachStatus } from '../types';
+type Props = {
+    name: string;
+    checked?: boolean;
+    onChange?: (newValue: boolean) => void;
+    isDisabled?: boolean;
+    cssStyle?: CheckBoxStyleForEachStatus;
+    isDisableAnimation?: boolean;
+    check?: ReactNode;
+};
+export declare function CheckButton({ name, checked, onChange, isDisabled, cssStyle, isDisableAnimation, check, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/CheckButton.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs as l, Fragment as k, jsx as o } from "react/jsx-runtime";
+import { CheckIcon as m } from "./icons/CheckIcon.js";
+function _({
+  name: n,
+  checked: u,
+  onChange: r,
+  isDisabled: i,
+  cssStyle: s = { default: {} },
+  isDisableAnimation: b,
+  check: f
+}) {
+  var a, d, c;
+  const t = u ?? !1, e = i ? s.disabled : s.default, h = {
+    "--border-color": ((a = e == null ? void 0 : e.border) == null ? void 0 : a.color) || "blue",
+    "--border-size": ((d = e == null ? void 0 : e.border) == null ? void 0 : d.size) || "1px",
+    "--radius-size": ((c = e == null ? void 0 : e.border) == null ? void 0 : c.radius) || "0.25rem",
+    "--background-color": (e == null ? void 0 : e.backgroundColor) || "#fff",
+    "--duration": b ? "0s" : ".3s"
+  };
+  return /* @__PURE__ */ l(k, { children: [
+    /* @__PURE__ */ o("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
+    /* @__PURE__ */ l(
+      "label",
+      {
+        style: h,
+        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) ${t ? "animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)" : "bg-(--background-color)"}`,
+        children: [
+          /* @__PURE__ */ o(
+            "input",
+            {
+              type: "checkbox",
+              name: n,
+              checked: t,
+              disabled: i,
+              onChange: (p) => {
+                i || r == null || r(p.target.checked);
+              },
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: `flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${t ? "text-(--background-color)" : "text-(--border-color)"}`,
+              children: f ?? /* @__PURE__ */ o(m, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  _ as CheckButton
+};

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,18 @@
+import { FormValidationStore } from '@geckou/ui-core';
+import { InputBoxStyleForEachStatus } from '../types';
+type Props = {
+    name: string;
+    value?: string;
+    onChange?: (newValue: string) => void;
+    cssStyle?: InputBoxStyleForEachStatus;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    /** useFormValidation() が返す store。渡すとフォーム全体の検証状態に参加する */
+    formValidationStore?: FormValidationStore | null;
+    minDate?: string;
+    maxDate?: string;
+    size?: 'small' | 'medium';
+    type?: 'date' | 'month';
+};
+export declare function DatePicker({ name, value, onChange, cssStyle, isDisabled, isRequired, formValidationStore, minDate, maxDate, size, type, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/DatePicker.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs as V, jsx as t } from "react/jsx-runtime";
+import { formatDateValue as b, splitDate as h, COLOR as A, MESSAGES as B, composeDateValue as G, validateDateObject as R } from "@geckou/ui-core";
+import { useState as g, useRef as q, useEffect as C } from "react";
+import { InputBox as F } from "./InputBox.js";
+import { ErrorMessage as H } from "./ErrorMessage.js";
+import { CalendarIcon as J } from "./icons/CalendarIcon.js";
+import { useRegisterValidation as K } from "../hooks/useFormValidation.js";
+function _({
+  name: l,
+  value: a,
+  onChange: s,
+  cssStyle: N,
+  isDisabled: i,
+  isRequired: o,
+  formValidationStore: O,
+  minDate: E = "",
+  maxDate: S = "",
+  size: M = "medium",
+  type: r = "date"
+}) {
+  const [k, n] = g(
+    () => a ? b(a, r) : ""
+  ), [c, d] = g(
+    () => a ? h(b(a, r)) : { year: "", month: "", day: "" }
+  ), [p, $] = g(""), w = q(a);
+  C(() => {
+    if (w.current === a)
+      return;
+    w.current = a;
+    const e = a ? b(a, r) : "";
+    n(e), d(h(e));
+  }, [a, r]);
+  const y = (e) => !e && o ? { isValid: !1, message: B.required } : { isValid: !0, message: "" }, D = (e) => R(e, { type: r, isRequired: o }), I = (e) => {
+    n(e), d(h(e));
+    const { message: v } = y(e);
+    $(v), s == null || s(e);
+  }, u = (e, v) => {
+    const x = { ...c, [e]: v };
+    d(x);
+    const { isValid: z, message: P } = D(x);
+    if ($(P), z) {
+      const j = G(x, r);
+      n(j), s == null || s(j);
+    }
+  };
+  K(
+    O,
+    l,
+    y(k).isValid
+  );
+  const m = M === "small", f = `flex-none! ${m ? "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)]!"}`, L = { "--icon-color": A.blue };
+  return /* @__PURE__ */ V(
+    F,
+    {
+      cssStyle: N,
+      isDisabled: i,
+      isErrored: !!p,
+      className: `flex w-full items-center leading-none ${m ? "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)]"}`,
+      children: [
+        /* @__PURE__ */ V("div", { className: "relative flex-none", style: L, children: [
+          /* @__PURE__ */ t(
+            J,
+            {
+              className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${m ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
+            }
+          ),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: r,
+              name: l,
+              value: k,
+              max: S,
+              min: E,
+              required: o,
+              disabled: i,
+              onChange: (e) => I(e.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 ${m ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            value: c.year,
+            placeholder: "年",
+            "aria-label": `${l}の年`,
+            maxLength: 4,
+            type: "text",
+            disabled: i,
+            onChange: (e) => u("year", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${f}`
+          }
+        ),
+        "/",
+        /* @__PURE__ */ t(
+          "input",
+          {
+            value: c.month,
+            placeholder: "月",
+            "aria-label": `${l}の月`,
+            maxLength: 2,
+            type: "text",
+            disabled: i,
+            onChange: (e) => u("month", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${f}`
+          }
+        ),
+        r === "date" && /* @__PURE__ */ t("span", { children: "/" }),
+        r === "date" && /* @__PURE__ */ t(
+          "input",
+          {
+            value: c.day,
+            placeholder: "日",
+            "aria-label": `${l}の日`,
+            maxLength: 2,
+            type: "text",
+            disabled: i,
+            onChange: (e) => u("day", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${f}`
+          }
+        ),
+        /* @__PURE__ */ t(H, { errorMessages: p ? [p] : void 0 })
+      ]
+    }
+  );
+}
+export {
+  _ as DatePicker
+};

package/dist/components/DateRangePicker.d.ts

@@ -0,0 +1,22 @@
+import { FormValidationStore } from '@geckou/ui-core';
+export type DateRange = {
+    start: string;
+    end: string;
+};
+type Props = {
+    /** 各入力の name は `<name>Start` / `<name>End` になる */
+    name: string;
+    /** 制御コンポーネントとして使う。省略時は空の範囲から始まる */
+    value?: DateRange;
+    onChange?: (newValue: DateRange) => void;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    /** useFormValidation() が返す store。渡すとフォーム全体の検証状態に参加する */
+    formValidationStore?: FormValidationStore | null;
+    minDate?: string;
+    maxDate?: string;
+    size?: 'small' | 'medium';
+    type?: 'date' | 'month';
+};
+export declare function DateRangePicker({ name, value, onChange, isDisabled, isRequired, formValidationStore, minDate, maxDate, size, type, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/DateRangePicker.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { DatePicker as b } from "./DatePicker.js";
+import { COLOR as f } from "@geckou/ui-core";
+const h = { start: "", end: "" };
+function N({
+  name: c,
+  value: r = h,
+  onChange: t,
+  isDisabled: n,
+  isRequired: a,
+  formValidationStore: o,
+  minDate: s = "",
+  maxDate: l = "",
+  size: m = "medium",
+  type: i = "date"
+}) {
+  const x = (e) => t == null ? void 0 : t({ start: e, end: r.end }), u = (e) => t == null ? void 0 : t({ start: r.start, end: e }), v = {
+    "--range-background-color": f.white,
+    "--range-border-color": f.gray
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      style: v,
+      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)",
+      children: [
+        /* @__PURE__ */ d(
+          b,
+          {
+            name: `${c}Start`,
+            value: r.start,
+            isDisabled: n,
+            isRequired: a,
+            formValidationStore: o,
+            minDate: s,
+            maxDate: r.end || l,
+            size: m,
+            type: i,
+            onChange: x
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: "flex flex-none! items-center px-[var(--bv,0.375rem)]", children: "〜" }),
+        /* @__PURE__ */ d(
+          b,
+          {
+            name: `${c}End`,
+            value: r.end,
+            isDisabled: n,
+            isRequired: a,
+            formValidationStore: o,
+            minDate: r.start || s,
+            maxDate: l,
+            size: m,
+            type: i,
+            onChange: u
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  N as DateRangePicker
+};

package/dist/components/DateSelector.d.ts

@@ -0,0 +1,13 @@
+import { FormValidationStore } from '@geckou/ui-core';
+type Props = {
+    name: string;
+    value?: string;
+    onChange?: (newValue: string) => void;
+    isRequired?: boolean;
+    /** useFormValidation() が返す store。渡すとフォーム全体の検証状態に参加する */
+    formValidationStore?: FormValidationStore | null;
+    /** 'month' なら日の選択を出さない（Vue 版と揃える） */
+    type?: 'date' | 'month';
+};
+export declare function DateSelector({ name, value, onChange, isRequired, formValidationStore, type, }: Props): import("react").JSX.Element;
+export {};