@godxjp/ui 31.31.8 → 32.0.0

package/docs/providers/format-date.tsx

@@ -1,230 +0,0 @@
-import { AppProvider } from "@godxjp/ui/app";
-import { formatDate } from "@godxjp/ui/datetime";
-import { Text } from "@godxjp/ui/general";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * formatDate · MANDATORY date/time display function from @godxjp/ui/datetime.
- * Reads locale, timezone, dateFormat, and timeFormat from AppProvider context.
- * NEVER call date-fns or Intl.DateTimeFormat directly; use formatDate instead.
- * Composed only from real @godxjp/ui components. All inputs are fixed ISO strings.
- */
-
-const ISO_DATE = "2024-04-12";
-const ISO_DATETIME = "2024-04-12T09:30:00+09:00";
-const HH_MM = "09:30";
-const PAST_DATETIME = "2024-01-15T14:45:00+09:00";
-const NULL_VALUE = null;
-
-export default function Demo() {
-  return (
-    <AppProvider
-      defaultLocale="ja"
-      defaultTimezone="Asia/Tokyo"
-      defaultDateFormat="iso"
-      defaultTimeFormat="24h"
-      persist={false}
-    >
-      <PageContainer
-        title="formatDate"
-        subtitle="日付・時刻・相対表示の統一フォーマット関数 · AppProvider コンテキストを自動参照"
-      >
-        <Flex direction="col" gap="lg">
-          {/* Overview */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>概要</CardTitle>
-              <CardDescription>
-                formatDate は @godxjp/ui/datetime からインポートする関数。 AppProvider の locale /
-                timezone / dateFormat / timeFormat を読み取り、 null / undefined を渡すと em-dash
-                (&mdash;) を返す。 date-fns や Intl.DateTimeFormat を直接呼ばないこと。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Text as="p" tone="muted">
-                このデモは{" "}
-                <Text as="code" mono size="xs">
-                  defaultLocale=&quot;ja&quot; defaultTimezone=&quot;Asia/Tokyo&quot;
-                  defaultDateFormat=&quot;iso&quot; defaultTimeFormat=&quot;24h&quot;
-                </Text>{" "}
-                の AppProvider でラップされている。
-              </Text>
-            </CardContent>
-          </Card>
-
-          {/* kind: "date" */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind: &quot;date&quot; · 日付のみ</CardTitle>
-              <CardDescription>
-                ISO yyyy-MM-dd を渡すと auto で &quot;date&quot; と判定されるが、 kind:
-                &quot;date&quot; を明示すると ISO datetime 文字列でも日付部分だけを表示できる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={2}>
-                <Descriptions.Item label="入力値" mono>
-                  {ISO_DATE}
-                </Descriptions.Item>
-                <Descriptions.Item label="kind">&quot;date&quot;</Descriptions.Item>
-                <Descriptions.Item label="出力" mono span={2}>
-                  {formatDate(ISO_DATE, { kind: "date" })}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-
-          {/* kind: "time" */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind: &quot;time&quot; · 時刻のみ</CardTitle>
-              <CardDescription>
-                HH:mm 文字列は auto-detection で &quot;time&quot; と判定される。 AppProvider の
-                timeFormat (24h / 12h) に従い出力が切り替わる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={2}>
-                <Descriptions.Item label="入力値" mono>
-                  {HH_MM}
-                </Descriptions.Item>
-                <Descriptions.Item label="kind">&quot;time&quot;</Descriptions.Item>
-                <Descriptions.Item label="出力 (24h)" mono span={2}>
-                  {formatDate(HH_MM, { kind: "time" })}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-
-          {/* kind: "datetime" */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind: &quot;datetime&quot; · 日時</CardTitle>
-              <CardDescription>
-                ISO datetime 文字列を渡すと auto-detection で &quot;datetime&quot; と判定される。
-                取引タイムスタンプや更新日時の表示に使用する。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={2}>
-                <Descriptions.Item label="入力値" mono span={2}>
-                  {ISO_DATETIME}
-                </Descriptions.Item>
-                <Descriptions.Item label="kind">&quot;datetime&quot;</Descriptions.Item>
-                <Descriptions.Item label="出力" mono>
-                  {formatDate(ISO_DATETIME, { kind: "datetime" })}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-
-          {/* kind: "long" */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind: &quot;long&quot; · 長形式 (PPP)</CardTitle>
-              <CardDescription>
-                モーダルや詳細パネルで年月日を読みやすく表示するときに使う。
-                ロケールに合わせた月名や曜日を含む完全形式で出力される。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={2}>
-                <Descriptions.Item label="入力値" mono>
-                  {ISO_DATE}
-                </Descriptions.Item>
-                <Descriptions.Item label="kind">&quot;long&quot;</Descriptions.Item>
-                <Descriptions.Item label="出力" mono span={2}>
-                  {formatDate(ISO_DATE, { kind: "long" })}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-
-          {/* kind: "relative" */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind: &quot;relative&quot; · 相対表示</CardTitle>
-              <CardDescription>
-                アクティビティフィードや監査ログで &quot;3日前&quot; のような相対表現を出力する。
-                ロケールに応じた文字列 (ja: &quot;3日前&quot; / en: &quot;3 days ago&quot;) になる。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={2}>
-                <Descriptions.Item label="入力値" mono span={2}>
-                  {PAST_DATETIME}
-                </Descriptions.Item>
-                <Descriptions.Item label="kind">&quot;relative&quot;</Descriptions.Item>
-                <Descriptions.Item label="出力" mono>
-                  {formatDate(PAST_DATETIME, { kind: "relative" })}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-
-          {/* null / undefined handling */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>null / undefined · em-dash フォールバック</CardTitle>
-              <CardDescription>
-                null / undefined / 空文字を渡すと em-dash (&mdash;) を返す。
-                呼び出し前に三項演算子でガードする必要はない。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={2}>
-                <Descriptions.Item label="入力値" mono>
-                  null
-                </Descriptions.Item>
-                <Descriptions.Item label="kind">(省略)</Descriptions.Item>
-                <Descriptions.Item label="出力" mono span={2}>
-                  {formatDate(NULL_VALUE)}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-
-          {/* Summary table */}
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind オプション一覧</CardTitle>
-              <CardDescription>
-                各 kind と対応する入力・出力の早見表。auto は入力値の形式から自動判定する。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Descriptions columns={3}>
-                <Descriptions.Item label='kind: "date"' mono>
-                  {formatDate(ISO_DATE, { kind: "date" })}
-                </Descriptions.Item>
-                <Descriptions.Item label='kind: "time"' mono>
-                  {formatDate(HH_MM, { kind: "time" })}
-                </Descriptions.Item>
-                <Descriptions.Item label='kind: "datetime"' mono>
-                  {formatDate(ISO_DATETIME, { kind: "datetime" })}
-                </Descriptions.Item>
-                <Descriptions.Item label='kind: "long"' mono>
-                  {formatDate(ISO_DATE, { kind: "long" })}
-                </Descriptions.Item>
-                <Descriptions.Item label='kind: "relative"' mono>
-                  {formatDate(PAST_DATETIME, { kind: "relative" })}
-                </Descriptions.Item>
-                <Descriptions.Item label='kind: "auto" (省略時)' mono>
-                  {formatDate(ISO_DATE)}
-                </Descriptions.Item>
-              </Descriptions>
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppProvider>
-  );
-}

package/docs/providers/theme-scope.tsx

@@ -1,186 +0,0 @@
-import { ThemeScope, tenantTheme } from "@godxjp/ui/app";
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@godxjp/ui/data-display";
-import { Select } from "@godxjp/ui/data-entry";
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  Toaster,
-  toast,
-} from "@godxjp/ui/feedback";
-import { Button, Text } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * ThemeScope · the region whose overlays keep the region's tokens (gh#877).
- *
- * The screen is a review queue handled on behalf of two customers at once — the case that makes
- * the defect visible, because both regions are on the page together and every overlay they open
- * used to come back in the package's own violet.
- *
- * Each region is themed a DIFFERENT way on purpose: the first from `tenantTheme(hex).vars`, the
- * second from a `.dark` class. ThemeScope has no theme prop and reads neither — it reads the
- * COMPUTED tokens at its own element, which is why both work and why a `[data-tenant]` rule in a
- * consumer's own stylesheet works too. Open a Dialog, a Select listbox, a Popover or a toast from
- * either region: all of them are painted by that region.
- *
- * Composed only from real @godxjp/ui components.
- */
-
-const REVIEWERS = [
-  { value: "sato", label: "Sakura Sato" },
-  { value: "tran", label: "Trần Minh" },
-  { value: "novak", label: "Ana Novák" },
-];
-
-function ReviewRegion({ name }: { name: string }) {
-  const { t } = useTranslation();
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>{name}</CardTitle>
-        <CardDescription>{t("themeScopeDocs.region.description")}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="col" gap="md">
-          <Flex gap="sm" align="center" wrap>
-            <Badge>{t("themeScopeDocs.region.pending")}</Badge>
-            <Text tone="muted">{t("themeScopeDocs.region.queue")}</Text>
-          </Flex>
-
-          <Select
-            aria-label={t("themeScopeDocs.region.reviewerLabel")}
-            placeholder={t("themeScopeDocs.region.reviewerPlaceholder")}
-            options={REVIEWERS}
-          />
-
-          <Flex gap="sm" wrap>
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button>{t("themeScopeDocs.region.approve")}</Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>{t("themeScopeDocs.dialog.title")}</DialogTitle>
-                  <DialogDescription>{t("themeScopeDocs.dialog.description")}</DialogDescription>
-                </DialogHeader>
-                <DialogBody>
-                  <Text>{t("themeScopeDocs.dialog.body")}</Text>
-                </DialogBody>
-                <DialogFooter>
-                  <Button onClick={() => toast.success(t("themeScopeDocs.toast.approved"))}>
-                    {t("themeScopeDocs.dialog.confirm")}
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline">{t("themeScopeDocs.region.history")}</Button>
-              </PopoverTrigger>
-              <PopoverContent>
-                <Text>{t("themeScopeDocs.popover.body")}</Text>
-              </PopoverContent>
-            </Popover>
-
-            <Button variant="ghost" onClick={() => toast(t("themeScopeDocs.toast.saved"))}>
-              {t("themeScopeDocs.region.notify")}
-            </Button>
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function Demo() {
-  const { t } = useTranslation();
-  const acme = tenantTheme("#0076bd");
-
-  return (
-    <PageContainer
-      title={t("themeScopeDocs.page.title")}
-      subtitle={t("themeScopeDocs.page.subtitle")}
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("themeScopeDocs.intro.title")}</CardTitle>
-            <CardDescription>{t("themeScopeDocs.intro.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Text as="p" tone="muted">
-              {t("themeScopeDocs.intro.body")}
-            </Text>
-          </CardContent>
-        </Card>
-
-        {/* Themed from a customer hex. The Toaster lives inside the region, so its toasts do too. */}
-        <ThemeScope style={acme.vars} data-tenant="acme">
-          <ReviewRegion name={t("themeScopeDocs.acme.name")} />
-          <Toaster />
-
-          {/*
-            NESTED, and themed by a CLASS rather than a style: the night-shift console stays dark
-            whatever the page does. The INNER scope wins for its overlays — measured, its Dialog
-            reads --card 48 8% 12% (dark) where the outer region reads 60 33% 99%.
-
-            `acme.vars` is repeated here on purpose, and that is worth knowing: `.dark` RESTATES the
-            whole brand ramp, so an inner scope that only adds the class would hand its overlays the
-            package's dark violet rather than the customer's blue. Inheritance carries what the
-            inner scope does not redeclare; `.dark` redeclares this.
-          */}
-          <ThemeScope className="dark" style={acme.vars}>
-            <ReviewRegion name={t("themeScopeDocs.night.name")} />
-          </ThemeScope>
-        </ThemeScope>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("themeScopeDocs.without.title")}</CardTitle>
-            <CardDescription>{t("themeScopeDocs.without.description")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* No ThemeScope: the region is themed, its overlays are not. This is the defect. */}
-            <div style={acme.vars} data-tenant="acme-unscoped">
-              <Dialog>
-                <DialogTrigger asChild>
-                  <Button>{t("themeScopeDocs.without.open")}</Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>{t("themeScopeDocs.without.dialogTitle")}</DialogTitle>
-                    <DialogDescription>
-                      {t("themeScopeDocs.without.dialogDescription")}
-                    </DialogDescription>
-                  </DialogHeader>
-                  <DialogBody>
-                    <Text>{t("themeScopeDocs.without.dialogBody")}</Text>
-                  </DialogBody>
-                </DialogContent>
-              </Dialog>
-            </div>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/query/button-refetch.tsx

@@ -1,161 +0,0 @@
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-
-import {
-  Badge,
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  DataTable,
-  type ColumnDef,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { ButtonRefetch } from "@godxjp/ui/query";
-
-/**
- * ButtonRefetch · a Refresh button wired directly to a useQuery result: it spins
- * and auto-disables while query.isFetching and calls query.refetch() on click.
- * Never pass onClick/disabled yourself. Composed from real @godxjp/ui +
- * @tanstack/react-query.
- */
-const queryClient = new QueryClient();
-
-type Invoice = { id: string; partner: string; status: "active" | "pending" };
-const invoices: Invoice[] = [
-  { id: "INV-0312", partner: "株式会社ベトヤ", status: "active" },
-  { id: "INV-0311", partner: "ハノイ物流", status: "pending" },
-];
-const columns: ColumnDef<Invoice>[] = [
-  { key: "id", header: "請求書番号" },
-  { key: "partner", header: "取引先" },
-  { key: "status", header: "状態", render: (row) => <Badge status={row.status} /> },
-];
-
-/** Each card owns its own query so the matrices never refetch in lockstep. */
-function useInvoiceQuery(key: string) {
-  return useQuery({ queryKey: [key], queryFn: async () => invoices });
-}
-
-function Block() {
-  const query = useInvoiceQuery("br-invoices");
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>請求書 一覧</CardTitle>
-        <CardDescription>The header Refresh button is bound to the query.</CardDescription>
-        <CardAction>
-          <ButtonRefetch query={query} label="更新" />
-        </CardAction>
-      </CardHeader>
-      <CardContent flush>
-        <DataTable
-          data={query.data ?? []}
-          columns={columns}
-          getRowId={(r) => r.id}
-          loading={query.isPending}
-        />
-      </CardContent>
-    </Card>
-  );
-}
-
-function VariantBlock() {
-  const query = useInvoiceQuery("br-variants");
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>variant</CardTitle>
-        <CardDescription>
-          Button の構造バリアントをそのまま受け取る。既定は outline · ページヘッダーでは outline か
-          ghost を使い、default は主要操作のために空けておく。
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="row" gap="sm" wrap>
-          <ButtonRefetch query={query} variant="default" label="default" />
-          <ButtonRefetch query={query} variant="secondary" label="secondary" />
-          <ButtonRefetch query={query} variant="outline" label="outline" />
-          <ButtonRefetch query={query} variant="dashed" label="dashed" />
-          <ButtonRefetch query={query} variant="ghost" label="ghost" />
-          <ButtonRefetch query={query} variant="destructive" label="destructive" />
-          <ButtonRefetch query={query} variant="link" label="link" />
-          <ButtonRefetch query={query} variant="bare" label="bare" />
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-function SizeBlock() {
-  const query = useInvoiceQuery("br-sizes");
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>size</CardTitle>
-        <CardDescription>
-          テキスト付きの 5 段階と、正方形のアイコンのみ 4 段階。アイコンのみの場合は label
-          を外し、aria-label で名前を与える。
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="col" gap="md">
-          <Flex direction="row" gap="sm" wrap>
-            <ButtonRefetch query={query} size="xs" label="xs" />
-            <ButtonRefetch query={query} size="sm" label="sm" />
-            <ButtonRefetch query={query} size="md" label="md" />
-            <ButtonRefetch query={query} size="default" label="default" />
-            <ButtonRefetch query={query} size="lg" label="lg" />
-          </Flex>
-          <Flex direction="row" gap="sm" wrap>
-            <ButtonRefetch query={query} size="icon-xs" label={null} aria-label="更新 icon-xs" />
-            <ButtonRefetch query={query} size="icon-sm" label={null} aria-label="更新 icon-sm" />
-            <ButtonRefetch query={query} size="icon" label={null} aria-label="更新 icon" />
-            <ButtonRefetch query={query} size="icon-lg" label={null} aria-label="更新 icon-lg" />
-          </Flex>
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-function ShapeBlock() {
-  const query = useInvoiceQuery("br-shapes");
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle level={2}>shape</CardTitle>
-        <CardDescription>
-          角の形状。既定は制御半径 · pill は完全な丸み · sharp は直角で、隣接するツールバーの
-          角に合わせる。
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Flex direction="row" gap="sm" wrap>
-          <ButtonRefetch query={query} shape="default" label="default" />
-          <ButtonRefetch query={query} shape="pill" label="pill" />
-          <ButtonRefetch query={query} shape="sharp" label="sharp" />
-        </Flex>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function Demo() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <PageContainer
-        title="ButtonRefetch"
-        subtitle="Refresh button bound to a useQuery · spins while fetching"
-      >
-        <Flex direction="col" gap="lg">
-          <Block />
-          <VariantBlock />
-          <SizeBlock />
-          <ShapeBlock />
-        </Flex>
-      </PageContainer>
-    </QueryClientProvider>
-  );
-}