@godxjp/ui 18.12.0 → 18.12.2

package/dist/components/data-entry/select.js

@@ -2,11 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlTriggerClass } from "../../lib/control-styles.js";
 import { mergeAriaIds, omitFieldA11y, pickFieldA11y } from "../../lib/field-a11y.js";
 import { SearchSelect } from "./search-select.js";
+import { useTranslation } from "../../i18n/use-translation.js";
 function isDataSelect(props) {
   return "options" in props || "loadOptions" in props;
 }
@@ -203,6 +204,7 @@ function DataSelect({
   const ariaProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
+  const { t } = useTranslation();
   const searchable = showSearch ?? Boolean(loadOptions);
   const hasOptions = options.length > 0;
   if (searchable) {
@@ -255,7 +257,9 @@ function DataSelect({
     option.value
   );
   const isControlled = value !== void 0;
-  return /* @__PURE__ */ jsxs(
+  const canClear = clearable !== false && isControlled && !disabled && !readOnly;
+  const showClear = canClear && Boolean(value);
+  const select = /* @__PURE__ */ jsxs(
     SelectPrimitive.Root,
     {
       "data-slot": "select",
@@ -268,7 +272,17 @@ function DataSelect({
       disabled: disabled || !hasOptions,
       name,
       children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { id, "data-testid": dataTestId, className, ...ariaProps, children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            id,
+            "data-testid": dataTestId,
+            className: cn(showClear && "pe-9", canClear ? void 0 : className),
+            showIndicator: !showClear,
+            ...ariaProps,
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+          }
+        ),
         /* @__PURE__ */ jsx(SelectContent, { children: groupDataOptions(options).map(
           (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
             /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
@@ -278,6 +292,21 @@ function DataSelect({
       ]
     }
   );
+  if (!canClear) return select;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    select,
+    showClear ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 end-2 flex items-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
+        "data-testid": dataTestId ? `${dataTestId}-clear` : void 0,
+        className: "flex size-6 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+        onClick: () => onValueChange?.("", void 0),
+        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+      }
+    ) }) : null
+  ] });
 }
 export {
   Select,

package/dist/components/layout/responsive-grid.d.ts

@@ -1,7 +1,13 @@
 import type { ReactNode } from "react";
-import type { ResponsiveGridColumnsProp } from "../../props/components/layout.prop.js";
+import type { ResponsiveGridColumnsProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
 export type ResponsiveGridProps = {
     columns?: ResponsiveGridColumnsProp;
+    /**
+     * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
+     * Wins over `columns` when both are set, so a caller migrating to a preset does not also need
+     * to strip its old `columns` prop.
+     */
+    preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, children }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, preset, children }: ResponsiveGridProps): import("react").JSX.Element;

package/dist/components/layout/responsive-grid.js

@@ -1,20 +1,31 @@
 import { jsx } from "react/jsx-runtime";
+const RESPONSIVE_GRID_PRESET_COLUMNS = {
+  "pricing-plans": { sm: 3, md: 3, lg: 3 }
+};
 function resolveColumns(columns) {
   if (typeof columns === "number") {
     return {
-      "--responsive-grid-sm": Math.min(columns, 2),
-      "--responsive-grid-md": Math.min(columns, 3),
-      "--responsive-grid-lg": columns
+      sm: Math.min(columns, 2),
+      md: Math.min(columns, 3),
+      lg: columns
     };
   }
   return {
-    "--responsive-grid-sm": columns.sm ?? 1,
-    "--responsive-grid-md": columns.md ?? columns.sm ?? 1,
-    "--responsive-grid-lg": columns.lg ?? columns.md ?? columns.sm ?? 1
+    sm: columns.sm ?? 1,
+    md: columns.md ?? columns.sm ?? 1,
+    lg: columns.lg ?? columns.md ?? columns.sm ?? 1
+  };
+}
+function toStyle(resolved) {
+  return {
+    "--responsive-grid-sm": resolved.sm,
+    "--responsive-grid-md": resolved.md,
+    "--responsive-grid-lg": resolved.lg
   };
 }
-function ResponsiveGrid({ columns = 4, children }) {
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: resolveColumns(columns), children }) });
+function ResponsiveGrid({ columns = 4, preset, children }) {
+  const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid", style: toStyle(resolved), children }) });
 }
 export {
   ResponsiveGrid

package/dist/props/components/layout.prop.d.ts

@@ -136,6 +136,19 @@ export type ResponsiveGridColumnsProp = number | {
     md?: number;
     lg?: number;
 };
+/**
+ * Named, package-owned column geometry for ResponsiveGrid — the semantic alternative to a
+ * consumer hand-rolling a `columns={{ sm, md, lg }}` breakpoint map for a recognised collection
+ * shape. Takes priority over `columns` when both are set (`columns` is then ignored, not merged).
+ *
+ * `pricing-plans` — the canonical billing/pricing-plan collection: 1 column until the `lg` step
+ * (container ≥ 64rem), then 3 columns from `lg` upward. Because ResponsiveGrid has no step above
+ * `lg`, this reads as exactly 3 columns at BOTH the 1024px and 1440px reference widths and 1
+ * column at 390px — the 3/3/1 contract requested for the billing plan catalog
+ * (dxs-platform/platform#333, tracked upstream at dxs-platform/pkg-ui#14). General-purpose beyond
+ * pricing: any 3-up desktop / 1-up mobile collection (no intermediate `md` step) can reuse it.
+ */
+export type ResponsiveGridPresetProp = "pricing-plans";
 export type MasterDetailRailWidthProp = "compact" | "standard";
 export type MasterDetailRailProp = "master" | "detail";
 /**

package/dist/props/registry.d.ts

@@ -532,6 +532,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly ResponsiveGridPresetProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly MasterDetailRailWidthProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";

package/dist/props/registry.js

@@ -525,6 +525,7 @@ const COMPONENT_PROP_REGISTRY = {
     ]
   },
   ResponsiveGridColumnsProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
+  ResponsiveGridPresetProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   MasterDetailRailWidthProp: {
     group: "layout",
     file: "components/layout.prop.ts",

package/package.json

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