@godxjp/ui 31.7.0 → 31.8.0

package/dist/styles/control.css

@@ -738,6 +738,85 @@
     text-transform: uppercase;
   }
 
+  .ui-color-picker[data-panel] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ui-color-picker-picker {
+    display: flex;
+    align-items: center;
+    gap: var(--control-gap);
+  }
+
+  .ui-color-picker-presets {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-picker-presets-gap);
+  }
+
+  .ui-color-picker-presets-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-block-size: var(--touch-target-min);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--color-picker-presets-font-size);
+    text-align: start;
+  }
+
+  .ui-color-picker-presets-chevron {
+    width: var(--control-icon-size);
+    height: var(--control-icon-size);
+    flex-shrink: 0;
+    transition: rotate 150ms;
+  }
+
+  .ui-color-picker-presets-trigger[data-state="closed"] .ui-color-picker-presets-chevron {
+    rotate: -90deg;
+  }
+
+  .ui-color-picker-presets-trigger[data-state="closed"]:dir(rtl) .ui-color-picker-presets-chevron {
+    rotate: 90deg;
+  }
+
+  .ui-color-picker-presets-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--color-picker-preset-gap);
+    padding-block: var(--space-1);
+  }
+
+  .ui-color-picker-presets-color {
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: var(--color-picker-preset-size);
+    block-size: var(--color-picker-preset-size);
+    border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
+    border-radius: var(--control-radius);
+    background-color: var(--color-picker-preset-color, transparent);
+    cursor: pointer;
+    forced-color-adjust: none;
+  }
+
+  .ui-color-picker-presets-color[data-selected] {
+    box-shadow:
+      0 0 0 var(--stroke-md) hsl(var(--background)),
+      0 0 0 calc(var(--stroke-md) * 2) hsl(var(--foreground));
+  }
+
+  .ui-color-picker-presets-color[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-color-picker-presets-empty {
+    display: block;
+    padding-block: var(--space-1);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--color-picker-presets-font-size);
+  }
+
   .ui-query-refetch-icon[data-fetching="true"] {
     animation: spin 1s linear infinite;
   }

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.7.0",
+  "version": "31.8.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/tokens/components/control.css

@@ -157,6 +157,10 @@
 
   --color-picker-input-width: 6.5rem;
 
+  --color-picker-preset-size: var(--touch-target-min);
+  --color-picker-preset-gap: var(--space-2);
+  --color-picker-presets-gap: var(--space-1);
+
   --command-list-max-height: min(300px, 50vh);
   --command-input-padding-x: var(--space-3);
   --command-group-padding: var(--space-1);
@@ -192,6 +196,10 @@
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
   );
+  --color-picker-presets-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --command-group-heading-font-size: var(
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))

package/docs/data-entry/color-picker.tsx

@@ -3,19 +3,33 @@ import { useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { ColorPicker, FormField } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
+/** A fixed tag palette (gh#1055): tags pick from it, never from free hex. */
+const TAG_PALETTE = ["#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#9333ea"];
+
 /**
  * ColorPicker — hex color swatch + optional editable hex input.
  * Always initialize state to a valid 3- or 6-digit hex string.
  * Use controlled mode (value + onValueChange); no uncontrolled path.
  * Composed only from real @godxjp/ui components.
+ *
+ * `presets` / `panelRender` port antd ColorPicker (gh#1055). Deviations from antd, on purpose:
+ * - `colors` are hex strings only — the value is hex; antd also takes colour objects/gradients.
+ * - There is no popover: the picker is inline, so `panelRender` replaces the inline body. The
+ *   presets-only recipe is antd's own: `panelRender={(_, { components: { Presets } }) => <Presets />}`.
+ * - Each swatch is a real radio (APG radio group, named by its hex, arrow keys select); antd's
+ *   preset blocks are click-only divs.
  */
 export default function Demo() {
   const [brandColor, setBrandColor] = useState("#2563eb");
   const [accentColor, setAccentColor] = useState("#16a34a");
   const [categoryColor, setCategoryColor] = useState("#dc2626");
   const [validatedColor, setValidatedColor] = useState("#9333ea");
+  const [labelColor, setLabelColor] = useState("#16a34a");
+  const [tagColor, setTagColor] = useState("#2563eb");
+  const { t } = useTranslation();
 
   return (
     <PageContainer title="ColorPicker" subtitle="カラーピッカー · スウォッチ＋Hex入力">
@@ -75,6 +89,64 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.colorPicker.presetsTitle")}</CardTitle>
+            <CardDescription>{t("showcase.colorPicker.presetsDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="label-color" label={t("showcase.colorPicker.paletteLabel")}>
+              <ColorPicker
+                id="label-color"
+                value={labelColor}
+                onValueChange={setLabelColor}
+                presets={[
+                  {
+                    key: "recommended",
+                    label: t("showcase.colorPicker.recommendedGroup"),
+                    colors: TAG_PALETTE,
+                  },
+                  {
+                    key: "recent",
+                    label: t("showcase.colorPicker.recentGroup"),
+                    colors: ["#2563eb", "#16a34a"],
+                    defaultOpen: false,
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.colorPicker.presetsOnlyTitle")}</CardTitle>
+            <CardDescription>{t("showcase.colorPicker.presetsOnlyDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="tag-color"
+              label={t("showcase.colorPicker.tagColorLabel")}
+              helper={t("showcase.colorPicker.tagColorHelper")}
+            >
+              <ColorPicker
+                id="tag-color"
+                name="tag_color"
+                value={tagColor}
+                onValueChange={setTagColor}
+                presets={[
+                  {
+                    key: "tags",
+                    label: t("showcase.colorPicker.recommendedGroup"),
+                    colors: TAG_PALETTE,
+                  },
+                ]}
+                panelRender={(_, { components: { Presets } }) => <Presets />}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Hex バリデーションと確定動作</CardTitle>

package/docs/data-entry/select.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { X } from "lucide-react";
 
@@ -32,6 +33,7 @@ import { X } from "lucide-react";
  * trigger. Never a raw <select>. Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t, locale } = useTranslation();
   const [status, setStatus] = useState("paid");
   const [currency, setCurrency] = useState("JPY");
   const [priority, setPriority] = useState("medium");
@@ -43,6 +45,8 @@ export default function Demo() {
   const [reviewerLabel, setReviewerLabel] = useState("tanaka");
   const [prefixed, setPrefixed] = useState("JPY");
   const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
+  const [labels, setLabels] = useState<string[]>([]);
+  const [created, setCreated] = useState<string[]>([]);
   // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
   const [assignedTo, setAssignedTo] = useState<
     { value: string; label: React.ReactNode } | undefined
@@ -481,6 +485,40 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.select.createTitle")}</CardTitle>
+            <CardDescription>{t("showcase.select.createDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="issue-labels"
+              label={t("showcase.select.createField")}
+              helper={
+                created.length
+                  ? t("showcase.select.createdHelper", {
+                      list: new Intl.ListFormat(locale).format(created),
+                    })
+                  : t("showcase.select.createdNone")
+              }
+            >
+              <Select
+                id="issue-labels"
+                mode="tags"
+                value={labels}
+                onValueChange={setLabels}
+                onCreate={(text) => setCreated((previous) => [...previous, text])}
+                allowCreate={(text) => text.length <= 12}
+                options={[
+                  { value: "bug", label: "Bug" },
+                  { value: "feature", label: "Feature" },
+                  { value: "docs", label: "Docs" },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>

package/docs/i18n/messages/en.json

@@ -543,6 +543,24 @@
       "longIdTitle": "Long identifiers and +N",
       "ledgerLabel": "Ledger ID",
       "ledgerHelper": "A 71-character identifier still stays inside the control"
+    },
+    "select": {
+      "createTitle": "Tags: create row, onCreate and case-insensitive matching",
+      "createDescription": "Typed text that matches no option is offered as an explicit “Create” row. onCreate reports only invented text, never an option id. Typing “bug” finds “Bug” instead of creating a duplicate (caseSensitive restores exact matching). Unlike antd, the create row is labelled and text longer than 12 characters is refused through allowCreate.",
+      "createField": "Labels",
+      "createdHelper": "Created in this session: {list}",
+      "createdNone": "Nothing created yet"
+    },
+    "colorPicker": {
+      "presetsTitle": "Tag colour from a palette",
+      "presetsDescription": "presets — fixed swatch groups under the picker; each group collapses, and the free picker stays available.",
+      "paletteLabel": "Label colour",
+      "recommendedGroup": "Recommended",
+      "recentGroup": "Recently used",
+      "presetsOnlyTitle": "Palette only",
+      "presetsOnlyDescription": "panelRender returns only Presets — people pick from the palette and cannot type an arbitrary hex.",
+      "tagColorLabel": "Tag colour",
+      "tagColorHelper": "Arrow keys move between swatches; the selected one is announced."
     }
   },
   "serviceLauncherShowcase": {

package/docs/i18n/messages/ja.json

@@ -537,6 +537,24 @@
       "longIdTitle": "長い識別子と「+N」",
       "ledgerLabel": "台帳ID",
       "ledgerHelper": "71文字の識別子でも行からはみ出さない"
+    },
+    "select": {
+      "createTitle": "タグ: 作成行・onCreate・大文字小文字を区別しない照合",
+      "createDescription": "どの選択肢にも一致しない入力は「作成」行として明示されます。onCreate は新しく作られたテキストだけを通知し、選択肢の ID では発火しません。「bug」と入力すると「Bug」が見つかり、重複は作られません（caseSensitive で完全一致に戻せます）。antd と異なり作成行にはラベルが付き、12 文字を超える入力は allowCreate で拒否しています。",
+      "createField": "ラベル",
+      "createdHelper": "このセッションで作成: {list}",
+      "createdNone": "まだ作成されていません"
+    },
+    "colorPicker": {
+      "presetsTitle": "パレットからタグの色を選ぶ",
+      "presetsDescription": "presets — ピッカーの下に固定スウォッチのグループを表示。グループは折りたためて、自由入力も残る。",
+      "paletteLabel": "ラベルの色",
+      "recommendedGroup": "おすすめ",
+      "recentGroup": "最近使った色",
+      "presetsOnlyTitle": "パレットのみ",
+      "presetsOnlyDescription": "panelRender で Presets だけを返すと、パレットからの選択のみになり任意の HEX は入力できない。",
+      "tagColorLabel": "タグの色",
+      "tagColorHelper": "矢印キーでスウォッチ間を移動し、選択中の色が読み上げられる。"
     }
   },
   "serviceLauncherShowcase": {

package/docs/i18n/messages/vi.json

@@ -537,6 +537,24 @@
       "longIdTitle": "Định danh dài và +N",
       "ledgerLabel": "Mã sổ cái",
       "ledgerHelper": "Định danh 71 ký tự vẫn nằm trong khung"
+    },
+    "select": {
+      "createTitle": "Tags: dòng tạo mới, onCreate và so khớp không phân biệt hoa thường",
+      "createDescription": "Văn bản gõ vào không khớp tùy chọn nào được đưa ra thành dòng “Tạo” rõ ràng. onCreate chỉ báo văn bản mới tạo, không bao giờ báo id của tùy chọn. Gõ “bug” sẽ tìm thấy “Bug” thay vì tạo bản trùng (caseSensitive trả lại so khớp chính xác). Khác antd, dòng tạo có nhãn và văn bản dài hơn 12 ký tự bị allowCreate từ chối.",
+      "createField": "Nhãn",
+      "createdHelper": "Đã tạo trong phiên này: {list}",
+      "createdNone": "Chưa tạo gì"
+    },
+    "colorPicker": {
+      "presetsTitle": "Màu thẻ chọn từ bảng màu",
+      "presetsDescription": "presets — các nhóm ô màu cố định dưới bộ chọn; mỗi nhóm thu gọn được, bộ chọn tự do vẫn còn.",
+      "paletteLabel": "Màu nhãn",
+      "recommendedGroup": "Đề xuất",
+      "recentGroup": "Dùng gần đây",
+      "presetsOnlyTitle": "Chỉ bảng màu",
+      "presetsOnlyDescription": "panelRender chỉ trả về Presets — người dùng chọn trong bảng màu, không gõ được mã hex tuỳ ý.",
+      "tagColorLabel": "Màu thẻ",
+      "tagColorHelper": "Phím mũi tên di chuyển giữa các ô màu; ô đang chọn được đọc lên."
     }
   },
   "serviceLauncherShowcase": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.7.0",
-  "godxUiMcp": "31.7.0",
+  "version": "31.8.0",
+  "godxUiMcp": "31.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",