@godxjp/ui 20.2.1 → 22.0.0

package/dist/components/data-entry/month-range-picker.js

@@ -1,301 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ArrowRight, CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
-import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { useControlledLatch } from "../../lib/hooks.js";
-import { pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
-import { cn } from "../../lib/utils.js";
-import { resolveAllowClear } from "./control-surface.js";
-import { CONTROL_STATUS_CHROME_CLASS, CONTROL_VARIANT_CHROME_CLASS } from "./control-appearance.js";
-import { Button } from "../general/button.js";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
-const YM_HINT = "yyyy/mm";
-const toYmText = (d) => d ? `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}` : "";
-const parseYm = (raw) => {
-  const m = /^(\d{4})[/-](\d{1,2})$/.exec(raw.trim());
-  if (!m) return void 0;
-  const month = Number(m[2]);
-  if (month < 1 || month > 12) return void 0;
-  return new Date(Number(m[1]), month - 1, 1);
-};
-const ymIndex = (d) => d.getFullYear() * 12 + d.getMonth();
-function MonthRangePicker({
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  name,
-  fromYear,
-  toYear,
-  allowClear,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  status,
-  variant,
-  size,
-  inputReadOnly,
-  preserveInvalidOnBlur,
-  placement = "bottom-start",
-  renderExtraFooter,
-  ref,
-  ...ariaProps
-}) {
-  const { t } = useTranslation();
-  const { locale } = usePickerLocales();
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-  const isOpenControlled = openProp !== void 0;
-  const open = isOpenControlled ? openProp : internalOpen;
-  const setOpen = React.useCallback(
-    (next) => {
-      if (next && inputReadOnly) return;
-      if (!isOpenControlled) setInternalOpen(next);
-      onOpenChange?.(next);
-    },
-    [isOpenControlled, onOpenChange, inputReadOnly]
-  );
-  const groupA11y = pickGroupFieldA11y(ariaProps);
-  const autoId = React.useId();
-  const groupId = id ?? autoId;
-  const fromId = `${groupId}-from`;
-  const toId = `${groupId}-to`;
-  const identity = useFieldIdentity({ id: groupId, name, "data-field": groupA11y["data-field"] });
-  const rangeField = groupA11y["data-field"] ?? identity["data-field"];
-  const rangeName = name ?? identity.name;
-  const isControlled = useControlledLatch(valueProp !== void 0);
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
-  const value = isControlled ? valueProp : internalValue;
-  const [fromText, setFromText] = React.useState(() => toYmText(value?.from));
-  const [toText, setToText] = React.useState(() => toYmText(value?.to));
-  const [viewYear, setViewYear] = React.useState(() => (value?.from ?? /* @__PURE__ */ new Date()).getFullYear());
-  React.useEffect(() => {
-    setFromText(toYmText(value?.from));
-    setToText(toYmText(value?.to));
-    if (value?.from) setViewYear(value.from.getFullYear());
-  }, [value?.from, value?.to]);
-  const monthLabels = React.useMemo(() => {
-    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
-    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2026, i, 1)));
-  }, [locale]);
-  const emit = (next) => {
-    if (!isControlled) setInternalValue(next);
-    onValueChange?.(next);
-  };
-  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
-  const showClear = clearControl.enabled && Boolean(value?.from || value?.to) && !disabled && !inputReadOnly;
-  const prevDisabled = fromYear !== void 0 && viewYear <= fromYear;
-  const nextDisabled = toYear !== void 0 && viewYear >= toYear;
-  const clear = () => {
-    emit(void 0);
-    setFromText("");
-    setToText("");
-  };
-  const commitEdge = (edge, raw) => {
-    const trimmed = raw.trim();
-    const parsed = trimmed === "" ? void 0 : parseYm(trimmed);
-    if (trimmed !== "" && !parsed) return;
-    const next = { from: value?.from, to: value?.to, [edge]: parsed };
-    if (next.from && next.to && ymIndex(next.from) > ymIndex(next.to)) {
-      const swapped = { from: next.to, to: next.from };
-      emit(swapped);
-      return;
-    }
-    emit(next.from || next.to ? next : void 0);
-  };
-  const pickMonth = (picked) => {
-    const pendingFrom = value?.from && !value?.to ? value.from : void 0;
-    if (!pendingFrom) {
-      emit({ from: picked, to: void 0 });
-      return;
-    }
-    const [from, to] = ymIndex(picked) < ymIndex(pendingFrom) ? [picked, pendingFrom] : [pendingFrom, picked];
-    emit({ from, to });
-    setOpen(false);
-  };
-  const sharedKeyHandlers = {
-    onKeyDown: (event) => {
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setOpen(true);
-      } else if (event.key === "Escape" && open) {
-        setOpen(false);
-      }
-    }
-  };
-  const innerInputClass = "ui-month-picker-input";
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.monthPicker.placeholder") ?? YM_HINT;
-  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "group",
-      id: groupId,
-      ...groupA11y,
-      "data-field": rangeField,
-      "aria-disabled": disabled ? true : void 0,
-      "data-disabled": disabled ? "" : void 0,
-      "data-state": open ? "open" : "closed",
-      "data-size": size,
-      "data-status": status,
-      "data-variant": variant,
-      className: cn(
-        "ui-control ui-control-composite-field",
-        "aria-invalid:border-destructive",
-        CONTROL_VARIANT_CHROME_CLASS[variant ?? "outlined"],
-        CONTROL_STATUS_CHROME_CLASS,
-        className
-      ),
-      onClick: () => {
-        if (!disabled) setOpen(true);
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            id: fromId,
-            "data-field": rangeField ? `${rangeField}_from` : void 0,
-            name: rangeName ? `${rangeName}_from` : void 0,
-            value: fromText,
-            disabled,
-            readOnly: inputReadOnly,
-            "aria-readonly": inputReadOnly || void 0,
-            placeholder: resolvedPlaceholder,
-            inputMode: "numeric",
-            autoComplete: "off",
-            "aria-label": t("dataEntry.dateRangePicker.from") ?? "From",
-            className: innerInputClass,
-            ...sharedKeyHandlers,
-            onChange: (event) => {
-              setFromText(event.target.value);
-              commitEdge("from", event.target.value);
-            },
-            onBlur: () => {
-              if (!preserveInvalidOnBlur) setFromText(toYmText(value?.from));
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: toId,
-            "data-field": rangeField ? `${rangeField}_to` : void 0,
-            name: rangeName ? `${rangeName}_to` : void 0,
-            value: toText,
-            disabled,
-            readOnly: inputReadOnly,
-            "aria-readonly": inputReadOnly || void 0,
-            placeholder: resolvedPlaceholder,
-            inputMode: "numeric",
-            autoComplete: "off",
-            "aria-label": t("dataEntry.dateRangePicker.to") ?? "To",
-            className: innerInputClass,
-            ...sharedKeyHandlers,
-            onChange: (event) => {
-              setToText(event.target.value);
-              commitEdge("to", event.target.value);
-            },
-            onBlur: () => {
-              if (!preserveInvalidOnBlur) setToText(toYmText(value?.to));
-            }
-          }
-        ),
-        showClear ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            "aria-label": clearControl.label,
-            className: "text-muted-foreground hover:text-foreground shrink-0",
-            onClick: (event) => {
-              event.stopPropagation();
-              event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
-              clear();
-            },
-            children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-          }
-        ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            tabIndex: -1,
-            "aria-label": t("dataEntry.monthPicker.openGrid") ?? "Open month grid",
-            className: "text-muted-foreground hover:text-foreground shrink-0",
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          PopoverContent,
-          {
-            className: "ui-month-picker-panel",
-            side: placement.startsWith("top") ? "top" : "bottom",
-            align: placement.endsWith("end") ? "end" : "start",
-            onOpenAutoFocus: (event) => event.preventDefault(),
-            onClick: (event) => event.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-nav", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "outline",
-                    size: "icon-sm",
-                    disabled: prevDisabled,
-                    "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
-                    className: "ui-month-picker-nav-button",
-                    onClick: () => setViewYear((y) => y - 1),
-                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: viewYear }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "outline",
-                    size: "icon-sm",
-                    disabled: nextDisabled,
-                    "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
-                    className: "ui-month-picker-nav-button",
-                    onClick: () => setViewYear((y) => y + 1),
-                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-month-picker-icon", "aria-hidden": "true" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "ui-month-picker-grid", children: monthLabels.map((label, i) => {
-                const cell = new Date(viewYear, i, 1);
-                const cellIdx = ymIndex(cell);
-                const fromIdx = value?.from ? ymIndex(value.from) : void 0;
-                const toIdx = value?.to ? ymIndex(value.to) : void 0;
-                const isEdge = cellIdx === fromIdx || cellIdx === toIdx;
-                const inRange = fromIdx !== void 0 && toIdx !== void 0 && cellIdx > fromIdx && cellIdx < toIdx;
-                return /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: isEdge ? "default" : inRange ? "secondary" : "ghost",
-                    size: "sm",
-                    "aria-pressed": isEdge,
-                    className: "ui-month-picker-cell",
-                    onClick: () => pickMonth(cell),
-                    children: label
-                  },
-                  label
-                );
-              }) }),
-              renderExtraFooter?.()
-            ]
-          }
-        )
-      ]
-    }
-  ) }) });
-}
-export {
-  MonthRangePicker
-};

package/dist/components/ui/date-range-picker.d.ts

@@ -1 +0,0 @@
-export * from "../data-entry/date-range-picker.js";

package/dist/components/ui/date-range-picker.js

@@ -1,2 +0,0 @@
-"use client";
-export * from "../data-entry/date-range-picker.js";

package/docs/data-display/tree-list.tsx

@@ -1,107 +0,0 @@
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  EmptyState,
-  TreeList,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { FolderTree } from "lucide-react";
-
-/**
- * TreeList — a flat array rendered as an indented hierarchy; depth is data-driven
- * (never nest DOM). active highlights a row (aria-current); badge surfaces a
- * secondary label. Indentation is defined for depth 0-2, so flatten deeper
- * branches before rendering. Composed only from real @godxjp/ui components.
- */
-const accounts = [
-  { id: "1000", title: "資産", depth: 0, badge: "親科目" },
-  { id: "1100", title: "流動資産", depth: 1, description: "1年以内に現金化" },
-  {
-    id: "1110",
-    title: "現金及び預金",
-    description: "普通・当座・小口",
-    depth: 2,
-    badge: "3 口座",
-    active: true,
-  },
-  {
-    id: "1120",
-    title: "売掛金",
-    description: "得意先への未回収債権",
-    depth: 2,
-    badge: (
-      <Badge variant="outline" tone="warning">
-        要確認
-      </Badge>
-    ),
-  },
-  { id: "2000", title: "負債", depth: 0, badge: "親科目" },
-  { id: "2100", title: "流動負債", depth: 1, description: "1年以内に支払" },
-  { id: "2110", title: "買掛金", depth: 2, badge: "12 件" },
-];
-
-// Independent data: active is allowed on any depth, including a top-level parent.
-const departments = [
-  { id: "d0", title: "本社", depth: 0, active: true, badge: "選択中" },
-  { id: "d1", title: "営業部", depth: 1, description: "首都圏・関西" },
-  { id: "d2", title: "開発部", depth: 1, description: "プロダクト・基盤" },
-];
-
-export default function Demo() {
-  return (
-    <PageContainer
-      title="TreeList"
-      subtitle="Hierarchical list · depth lives in the data, not the DOM"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>勘定科目ツリー</CardTitle>
-            <CardDescription>
-              Pre-filter server-side; each item still carries its depth (0-2). An active leaf
-              carries aria-current; badges accept a string or a nested Badge node.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TreeList items={accounts} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>組織ツリー（親を選択中）</CardTitle>
-            <CardDescription>
-              active is data-driven and works at any depth. Here the depth-0 parent is the current
-              row.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TreeList items={departments} />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>空の状態</CardTitle>
-            <CardDescription>
-              An empty items={"{[]}"} array renders an empty list. Pair it with an EmptyState
-              placeholder.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TreeList items={[]} />
-            <EmptyState
-              icon={FolderTree}
-              title="科目がありません"
-              description="フィルター条件に一致する勘定科目が見つかりませんでした。"
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-entry/date-range-picker.tsx

@@ -1,175 +0,0 @@
-import { useState } from "react";
-import { ja } from "date-fns/locale";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { DateRangePicker, FormField } from "@godxjp/ui/data-entry";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import type { DateRange } from "react-day-picker";
-
-/**
- * DateRangePicker — WAI-ARIA date-range control with two typeable ISO inputs
- * + popover calendar. Submits as ${name}_from / ${name}_to. Never compose
- * two DatePickers side-by-side to fake a range. Composed only from real
- * @godxjp/ui components.
- */
-export default function Demo() {
-  const [period, setPeriod] = useState<DateRange | undefined>({
-    from: new Date(2026, 3, 1),
-    to: new Date(2027, 2, 31),
-  });
-  const [reportRange, setReportRange] = useState<DateRange | undefined>(undefined);
-  const [campaign, setCampaign] = useState<DateRange | undefined>({
-    from: new Date(2026, 5, 1),
-    to: new Date(2026, 5, 30),
-  });
-
-  return (
-    <PageContainer
-      title="DateRangePicker"
-      subtitle="期間入力 · 開始/終了 ISO 入力 + 範囲カレンダーポップオーバー"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>基本 (controlled)</CardTitle>
-            <CardDescription>
-              value + onValueChange
-              で制御。開始/終了を直接タイプ入力するか、カレンダーアイコンを開いて
-              範囲を選択できる。name=&#34;period&#34; を指定すると period_from / period_to として
-              ISO yyyy-MM-dd でフォーム送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="period" label="会計期間" required>
-              <DateRangePicker
-                id="period"
-                name="period"
-                value={period}
-                onValueChange={setPeriod}
-                fromDate={new Date(2020, 0, 1)}
-                toDate={new Date(2030, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>レポート期間フィルター (未選択)</CardTitle>
-            <CardDescription>
-              初期値なし。選択後は reportRange_from / reportRange_to
-              がクエリパラメータとして使われる。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="report-range" label="レポート期間">
-              <DateRangePicker
-                id="report-range"
-                name="reportRange"
-                value={reportRange}
-                onValueChange={setReportRange}
-                fromDate={new Date(2024, 0, 1)}
-                toDate={new Date(2026, 11, 31)}
-                placeholder="yyyy-mm-dd"
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>非制御 (defaultValue)</CardTitle>
-            <CardDescription>
-              value / onValueChange を渡さず defaultValue
-              で初期範囲だけ与える。状態はコンポーネント内部で 保持され、name=&#34;fiscal_year&#34;
-              のまま fiscal_year_from / fiscal_year_to として送信される。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="fiscal-year" label="会計年度 (初期値のみ)">
-              <DateRangePicker
-                id="fiscal-year"
-                name="fiscal_year"
-                defaultValue={{
-                  from: new Date(2026, 3, 1),
-                  to: new Date(2027, 2, 31),
-                }}
-                fromDate={new Date(2020, 0, 1)}
-                toDate={new Date(2030, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>locale で日本語カレンダー</CardTitle>
-            <CardDescription>
-              locale=&#123;ja&#125; を渡すとポップオーバーのカレンダーが日本語表記 (曜日・月名)
-              になる。 入力欄は常に ISO yyyy-MM-dd を保持する。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="campaign-period" label="キャンペーン期間">
-              <DateRangePicker
-                id="campaign-period"
-                name="campaign_period"
-                value={campaign}
-                onValueChange={setCampaign}
-                locale={ja}
-                fromDate={new Date(2024, 0, 1)}
-                toDate={new Date(2027, 11, 31)}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>disabled 状態</CardTitle>
-            <CardDescription>確定済み期間や読み取り専用フィールドに使用。</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="locked-period" label="確定期間">
-              <DateRangePicker
-                id="locked-period"
-                name="locked_period"
-                value={{
-                  from: new Date(2025, 3, 1),
-                  to: new Date(2026, 2, 31),
-                }}
-                disabled
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>期間プリセットと確定</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FormField id="preset-range" label="集計期間">
-              <DateRangePicker
-                id="preset-range"
-                name="report"
-                format="yyyy/MM/dd"
-                needConfirm
-                allowEmpty={[false, true]}
-                showWeek
-                minDate={new Date(2026, 0, 1)}
-                maxDate={new Date(2026, 11, 31)}
-                presets={[
-                  {
-                    label: "9月",
-                    value: () => ({ from: new Date(2026, 8, 1), to: new Date(2026, 8, 30) }),
-                  },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}