@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-entry/calendar.tsx

@@ -1,226 +0,0 @@
-import { useState } from "react";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@godxjp/ui/data-display";
-import { Calendar } from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { CalendarIcon } from "lucide-react";
-import { ja } from "react-day-picker/locale";
-import type { DateRange } from "react-day-picker";
-
-/**
- * Calendar — styled react-day-picker grid for single, multiple, or range
- * selection. Embed inside a Popover for picker UX; use DatePicker /
- * `DatePicker range` for form-submittable inputs instead. Composed only from
- * real @godxjp/ui components.
- */
-export default function Demo() {
-  const [issueDate, setIssueDate] = useState<Date | undefined>(new Date(2026, 3, 15));
-  const [range, setRange] = useState<DateRange | undefined>({
-    from: new Date(2026, 3, 1),
-    to: new Date(2026, 3, 30),
-  });
-  const [ruledRange, setRuledRange] = useState<DateRange | undefined>({
-    from: new Date(2026, 3, 13),
-    to: new Date(2026, 3, 22),
-  });
-  const [shiftDays, setShiftDays] = useState<Date[] | undefined>([
-    new Date(2026, 3, 6),
-    new Date(2026, 3, 13),
-    new Date(2026, 3, 20),
-  ]);
-
-  return (
-    <PageContainer
-      title="Calendar"
-      subtitle="カレンダーグリッド · 常時表示またはポップオーバー内で使用"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>単一日付選択 (インライン常時表示)</CardTitle>
-            <CardDescription>
-              mode="single" で日付を選択。フォームに送信が必要な場合は DatePicker を使用する。ja
-              ロケールで曜日・月名を日本語表示。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Calendar
-              mode="single"
-              selected={issueDate}
-              onSelect={setIssueDate}
-              defaultMonth={issueDate}
-              locale={ja}
-              disabled={{ before: new Date(2026, 0, 1) }}
-              footer={
-                issueDate
-                  ? `選択日: ${issueDate.toLocaleDateString("ja-JP")}`
-                  : "発行日を選択してください"
-              }
-              aria-label="発行日カレンダー"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
-            </CardTitle>
-            <CardDescription>
-              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --border、
-              背景に対し約 1.15:1)。表の行やカードの枠と同じ段なので、罫線が枠より濃くなることは
-              ない。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
-              罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
-              {"{false}"} を渡す。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="lg" wrap>
-              <Calendar
-                mode="range"
-                selected={ruledRange}
-                onSelect={setRuledRange}
-                defaultMonth={new Date(2026, 3, 1)}
-                today={new Date(2026, 3, 8)}
-                locale={ja}
-                disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
-                aria-label="罫線あり (既定) の期間カレンダー"
-                data-testid="calendar-ruled"
-              />
-              <Calendar
-                mode="range"
-                selected={ruledRange}
-                onSelect={setRuledRange}
-                defaultMonth={new Date(2026, 3, 1)}
-                today={new Date(2026, 3, 8)}
-                locale={ja}
-                disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
-                bordered={false}
-                aria-label="罫線なし (bordered=false) の期間カレンダー"
-                data-testid="calendar-unruled"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>範囲選択 · Popover 内</CardTitle>
-            <CardDescription>
-              mode="range" でポップオーバー内に配置。DatePicker range
-              はこのパターンにフォーム送信を加えた上位コンポーネント。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline">
-                  <CalendarIcon />
-                  期間を選択
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto" style={{ padding: 0 }} align="start">
-                <Calendar
-                  mode="range"
-                  selected={range}
-                  onSelect={setRange}
-                  defaultMonth={range?.from}
-                  locale={ja}
-                  numberOfMonths={2}
-                  disabled={{ after: new Date(2027, 2, 31) }}
-                  autoFocus
-                  aria-label="レポート期間カレンダー"
-                />
-              </PopoverContent>
-            </Popover>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>年月ドロップダウン (captionLayout="dropdown")</CardTitle>
-            <CardDescription>
-              過去の会計期間に素早くジャンプする場合に便利。startMonth / endMonth
-              でナビゲーション範囲を絞る。captionLayout は dropdown-months / dropdown-years
-              で月のみ・年のみのドロップダウンにも切り替え可能。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Calendar
-              mode="single"
-              selected={issueDate}
-              onSelect={setIssueDate}
-              defaultMonth={issueDate}
-              locale={ja}
-              captionLayout="dropdown"
-              startMonth={new Date(2020, 0, 1)}
-              endMonth={new Date(2030, 11, 31)}
-              aria-label="会計期間カレンダー"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>複数日選択 (mode="multiple")</CardTitle>
-            <CardDescription>
-              mode="multiple" で個別の複数日を選択 (Date[])。max
-              で選択上限を制限できる。ここでは出勤シフト日を最大 5 日まで選択。showOutsideDays=
-              {"{false}"} で前後月のはみ出し日を非表示にしている。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Calendar
-              mode="multiple"
-              selected={shiftDays}
-              onSelect={setShiftDays}
-              defaultMonth={shiftDays?.[0]}
-              locale={ja}
-              max={5}
-              showOutsideDays={false}
-              footer={
-                shiftDays && shiftDays.length > 0
-                  ? `選択日数: ${shiftDays.length} 日`
-                  : "出勤日を選択してください"
-              }
-              aria-label="出勤シフトカレンダー"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>フッター操作 (showToday / showClose)</CardTitle>
-            <CardDescription>
-              showToday で「今日」へジャンプして選択、showClose で onClose を呼ぶ。両方とも既定は
-              off。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Calendar
-              mode="single"
-              selected={issueDate}
-              onSelect={setIssueDate}
-              defaultMonth={issueDate}
-              locale={ja}
-              showToday
-              showClose
-              onClose={() => setIssueDate(undefined)}
-              aria-label="請求日カレンダー (フッター付き)"
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/cascader.tsx

@@ -1,380 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Form, Cascader, FormField } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { TreeOptionProp } from "@godxjp/ui/props";
-
-/**
- * Cascader — 階層パスピッカー（カラム式）。
- * value は常に string[] (単一) または string[][] (複数)。
- * 絶対に flat な string を渡さない。
- * Composed only from real @godxjp/ui components.
- */
-
-const EXPENSE_CATEGORIES = [
-  {
-    value: "operating",
-    label: "営業費用",
-    children: [
-      {
-        value: "selling",
-        label: "販売費",
-        children: [
-          { value: "advertising", label: "広告宣伝費" },
-          { value: "travel", label: "旅費交通費" },
-          { value: "entertainment", label: "交際費" },
-        ],
-      },
-      {
-        value: "admin",
-        label: "一般管理費",
-        children: [
-          { value: "salary", label: "給料手当" },
-          { value: "rent", label: "地代家賃" },
-          { value: "utilities", label: "水道光熱費" },
-          { value: "supplies", label: "消耗品費" },
-        ],
-      },
-    ],
-  },
-  {
-    value: "non-operating",
-    label: "営業外費用",
-    children: [
-      { value: "interest", label: "支払利息" },
-      { value: "fx-loss", label: "為替差損" },
-    ],
-  },
-];
-
-const REGIONS = [
-  {
-    value: "kanto",
-    label: "関東",
-    children: [
-      {
-        value: "tokyo",
-        label: "東京都",
-        children: [
-          { value: "shinjuku", label: "新宿区" },
-          { value: "shibuya", label: "渋谷区" },
-          { value: "chiyoda", label: "千代田区" },
-        ],
-      },
-      {
-        value: "kanagawa",
-        label: "神奈川県",
-        children: [
-          { value: "yokohama", label: "横浜市" },
-          { value: "kawasaki", label: "川崎市" },
-        ],
-      },
-    ],
-  },
-  {
-    value: "kansai",
-    label: "関西",
-    children: [
-      {
-        value: "osaka",
-        label: "大阪府",
-        children: [
-          { value: "osaka-city", label: "大阪市" },
-          { value: "sakai", label: "堺市" },
-        ],
-      },
-      {
-        value: "kyoto",
-        label: "京都府",
-        children: [{ value: "kyoto-city", label: "京都市" }],
-      },
-    ],
-  },
-];
-
-/**
- * 配送区分ツリー — ノード単位のフラグを実演:
- * - disabled: そのノード（および子）を選択不可（休止中の区分）
- * - isLeaf: 子を持たない葉として扱い、カスケード矢印を出さない
- * - disableCheckbox: TreeOption 共通フラグ（チェックボックスのみ無効化の意図を表す）
- */
-const SHIPPING_TYPES: TreeOptionProp[] = [
-  {
-    value: "domestic",
-    label: "国内配送",
-    children: [
-      { value: "standard", label: "通常便" },
-      { value: "express", label: "速達便", disableCheckbox: true },
-      { value: "cool", label: "クール便（休止中）", disabled: true },
-    ],
-  },
-  {
-    value: "international",
-    label: "国際配送（準備中）",
-    disabled: true,
-    children: [{ value: "ems", label: "EMS" }],
-  },
-  // isLeaf: 子なしの確定ノード（カスケードしない）
-  { value: "pickup", label: "店頭受取", isLeaf: true },
-];
-
-/**
- * fieldNames で実 API 形状（id / name / items）を value/label/children へ写像。
- * 実データは value/label/children 以外のキーを使うことが多い。
- */
-const ORG_UNITS = [
-  {
-    id: "sales",
-    name: "営業本部",
-    items: [
-      { id: "sales-east", name: "東日本営業部" },
-      { id: "sales-west", name: "西日本営業部" },
-    ],
-  },
-  {
-    id: "dev",
-    name: "開発本部",
-    items: [
-      { id: "dev-frontend", name: "フロントエンド部" },
-      { id: "dev-backend", name: "バックエンド部" },
-    ],
-  },
-];
-
-/**
- * Resolve a value-path (string[]) to its human labels by walking the option tree.
- * `value` carries machine codes; a readout must never show those — map to labels.
- * `keys` adapts to fieldNames-mapped data (e.g. id/name/items).
- */
-function pathToLabels(
-  options: readonly Record<string, any>[],
-  path: string[],
-  keys = { value: "value", label: "label", children: "children" },
-): string[] {
-  const labels: string[] = [];
-  let level: readonly Record<string, any>[] | undefined = options;
-  for (const seg of path) {
-    const node = level?.find((n) => n[keys.value] === seg);
-    if (!node) break;
-    labels.push(String(node[keys.label]));
-    level = node[keys.children] as readonly Record<string, any>[] | undefined;
-  }
-  return labels;
-}
-
-const ORG_KEYS = { value: "id", label: "name", children: "items" };
-
-export default function Demo() {
-  const [categoryPath, setCategoryPath] = useState<string[]>([]);
-  const [regionPath, setRegionPath] = useState<string[]>([]);
-  const [multiPaths, setMultiPaths] = useState<string[][]>([]);
-  const [shippingPaths, setShippingPaths] = useState<string[][]>([]);
-  const [orgPath, setOrgPath] = useState<string[]>([]);
-  const [hoverPath, setHoverPath] = useState<string[]>([]);
-
-  return (
-    <PageContainer
-      title="Cascader"
-      subtitle="階層パスピッカー · value は string[] (単一) / string[][] (複数)"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>経費カテゴリ選択（単一・検索付き）</CardTitle>
-            <CardDescription>
-              費用科目の階層パスを選択。showSearch でリーフまで全文検索できる。 選択パス:{" "}
-              {categoryPath.length > 0
-                ? pathToLabels(EXPENSE_CATEGORIES, categoryPath).join(" / ")
-                : "未選択"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="category-path" label="経費カテゴリ">
-              <Cascader
-                id="category-path"
-                options={EXPENSE_CATEGORIES}
-                value={categoryPath}
-                onValueChange={(v) => setCategoryPath(v as string[])}
-                showSearch
-                placeholder="カテゴリを選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>地域選択（単一・changeOnSelect）</CardTitle>
-            <CardDescription>
-              changeOnSelect=true で中間ノードも確定値として選択可能。 選択パス:{" "}
-              {regionPath.length > 0 ? pathToLabels(REGIONS, regionPath).join(" / ") : "未選択"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="region-path" label="地域">
-              <Cascader
-                id="region-path"
-                options={REGIONS}
-                value={regionPath}
-                onValueChange={(v) => setRegionPath(v as string[])}
-                changeOnSelect
-                placeholder="地域を選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>複数経費カテゴリ（multiple）</CardTitle>
-            <CardDescription>
-              multiple=true で string[][] を管理。チェックボックスで複数パスを選択。 選択数:{" "}
-              {multiPaths.length} パス
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="multi-category" label="経費カテゴリ（複数）">
-              <Cascader
-                id="multi-category"
-                options={EXPENSE_CATEGORIES}
-                multiple
-                value={multiPaths}
-                onValueChange={(v) => setMultiPaths(v as string[][])}
-                showSearch
-                placeholder="カテゴリを選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>地域選択（expandTrigger=&quot;hover&quot;）</CardTitle>
-            <CardDescription>
-              expandTrigger=&quot;hover&quot; で列のホバーだけで次の階層が展開（既定は
-              &quot;click&quot;）。 リーフはクリックで確定。 選択パス:{" "}
-              {hoverPath.length > 0 ? pathToLabels(REGIONS, hoverPath).join(" / ") : "未選択"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="hover-region" label="地域（ホバー展開）">
-              <Cascader
-                id="hover-region"
-                options={REGIONS}
-                value={hoverPath}
-                onValueChange={(v) => setHoverPath(v as string[])}
-                expandTrigger="hover"
-                placeholder="地域を選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>配送区分（ノード単位フラグ・複数）</CardTitle>
-            <CardDescription>
-              ノードの disabled で「クール便」「国際配送」を選択不可（薄表示）に、isLeaf
-              で「店頭受取」を 子なし確定ノードに。 選択数: {shippingPaths.length} パス
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="shipping-type" label="配送区分">
-              <Cascader
-                id="shipping-type"
-                options={SHIPPING_TYPES}
-                multiple
-                value={shippingPaths}
-                onValueChange={(v) => setShippingPaths(v as string[][])}
-                placeholder="配送区分を選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>組織選択（fieldNames でキー写像）</CardTitle>
-            <CardDescription>
-              実 API 形状（id / name / items）を fieldNames=&#123;&#123; value: &quot;id&quot;,
-              label: &quot;name&quot;, children: &quot;items&quot; &#125;&#125; で写像。 選択パス:{" "}
-              {orgPath.length > 0
-                ? pathToLabels(ORG_UNITS, orgPath, ORG_KEYS).join(" / ")
-                : "未選択"}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="org-unit" label="所属組織">
-              <Cascader
-                id="org-unit"
-                options={ORG_UNITS as unknown as TreeOptionProp[]}
-                fieldNames={{ value: "id", label: "name", children: "items" }}
-                value={orgPath}
-                onValueChange={(v) => setOrgPath(v as string[])}
-                placeholder="組織を選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              非制御モード（defaultValue・allowClear=&#123;false&#125;）
-            </CardTitle>
-            <CardDescription>
-              defaultValue で初期パスを与え、状態を内部管理（非制御）。allowClear=&#123;false&#125;
-              で クリア（×）ボタンを無効化し、必須項目として常に値を保持。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="default-category" label="既定カテゴリ（非制御）">
-              <Cascader
-                id="default-category"
-                options={EXPENSE_CATEGORIES}
-                defaultValue={["operating", "selling", "advertising"]}
-                allowClear={false}
-                placeholder="カテゴリを選択..."
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>無効状態（disabled・選択済み）</CardTitle>
-            <CardDescription>
-              disabled で操作不可。value
-              を与えて「選択済みのまま無効化」も表現（編集権限なしの読み取り表示）。
-              無効時はクリア（×）も非表示。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md">
-                <FormField id="disabled-empty" label="無効（未選択）">
-                  <Cascader
-                    id="disabled-empty"
-                    options={EXPENSE_CATEGORIES}
-                    disabled
-                    placeholder="カテゴリを選択..."
-                  />
-                </FormField>
-                <FormField id="disabled-selected" label="無効（選択済み）">
-                  <Cascader
-                    id="disabled-selected"
-                    options={EXPENSE_CATEGORIES}
-                    disabled
-                    defaultValue={["operating", "admin", "salary"]}
-                    placeholder="カテゴリを選択..."
-                  />
-                </FormField>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}