@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/data-display/scroll-area.js

@@ -113,7 +113,16 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
   }, [viewport, enabled, offset]);
 }
 const ScrollArea = React.forwardRef(
-  ({ className, children, viewportRef, anchor = "none", anchorOffset, onAnchoredChange, ...props }, ref) => {
+  ({
+    className,
+    children,
+    viewportRef,
+    anchor = "none",
+    anchorOffset,
+    onAnchoredChange,
+    orientation = "vertical",
+    ...props
+  }, ref) => {
     const [viewport, setViewport] = React.useState(null);
     const attachViewport = React.useCallback(
       (node) => {
@@ -139,11 +148,13 @@ const ScrollArea = React.forwardRef(
               tabIndex: 0,
               "data-slot": "scroll-area-viewport",
               "data-anchor": anchor,
+              "data-orientation": orientation,
               className: "size-full rounded-[inherit]",
               children
             }
           ),
-          /* @__PURE__ */ jsx(ScrollBar, {}),
+          orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+          orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
           /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
         ]
       }

package/dist/components/data-display/service-launcher-card.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Plus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Badge } from "./badge.js";
-import { Card } from "./card.js";
+import { Card, CardContent } from "./card.js";
 const ServiceLauncherCard = React.forwardRef(
   ({
     className,
@@ -20,7 +20,7 @@ const ServiceLauncherCard = React.forwardRef(
     ...props
   }, ref) => {
     const Heading = `h${titleLevel}`;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Card,
       {
         ref,
@@ -29,7 +29,7 @@ const ServiceLauncherCard = React.forwardRef(
         "data-service-launcher": "",
         "data-unavailable": disabledReason != null ? "" : void 0,
         ...props,
-        children: [
+        children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
           /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-heading", children: [
             /* @__PURE__ */ jsx("span", { "data-slot": "service-launcher-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
             /* @__PURE__ */ jsx(Heading, { "data-slot": "service-launcher-title", children: title }),
@@ -39,14 +39,14 @@ const ServiceLauncherCard = React.forwardRef(
           metadata != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-metadata", children: metadata }) : null,
           disabledReason != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-disabled-reason", children: disabledReason }) : null,
           /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-action", children: action })
-        ]
+        ] })
       }
     );
   }
 );
 ServiceLauncherCard.displayName = "ServiceLauncherCard";
 const ServiceCatalogCta = React.forwardRef(
-  ({ className, icon: Icon = Plus, title, action, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ({ className, icon: Icon = Plus, title, action, ...props }, ref) => /* @__PURE__ */ jsx(
     Card,
     {
       ref,
@@ -54,11 +54,11 @@ const ServiceCatalogCta = React.forwardRef(
       className: cn("ui-service-catalog-cta", className),
       "data-service-catalog-cta": "",
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
         /* @__PURE__ */ jsx(Icon, { "data-slot": "service-catalog-icon", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("div", { "data-slot": "service-catalog-title", children: title }),
         /* @__PURE__ */ jsx("div", { "data-slot": "service-catalog-action", children: action })
-      ]
+      ] })
     }
   )
 );
@@ -68,7 +68,7 @@ function ServiceLauncherCardSkeleton({
   label,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Card,
     {
       density: "tight",
@@ -76,7 +76,7 @@ function ServiceLauncherCardSkeleton({
       "data-service-launcher": "",
       "aria-busy": "true",
       ...props,
-      children: [
+      children: /* @__PURE__ */ jsxs(CardContent, { solo: true, children: [
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
         /* @__PURE__ */ jsxs("div", { "data-slot": "service-launcher-skeleton-heading", children: [
           /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-icon" }),
@@ -86,7 +86,7 @@ function ServiceLauncherCardSkeleton({
         /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-description" }),
         /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-metadata" }),
         /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-action" })
-      ]
+      ] })
     }
   );
 }

package/dist/components/data-display/table.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { BreakpointProp, FlushProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, FlushProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, WidthProp } from "../../props/vocabulary/index.js";
 export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
     /**
      * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table
@@ -53,6 +53,14 @@ export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttribu
 type TableCellPriority = {
     priority?: TableColumnPriorityProp;
 };
+/** Logical column alignment, wrapping and measure, shared by header and body cells.
+ * Numeric cells use tabular figures and end alignment unless align is explicit. */
+type TableCellAxes = {
+    align?: "start" | "center" | "end";
+    numeric?: boolean;
+    wrap?: boolean;
+    width?: WidthProp;
+};
 /**
  * Rendered into the DOM unconditionally (so it exists for the preset's CSS to reveal) but visually
  * hidden above the collapse step, where the real `<th>` already carries the label — an ordinary
@@ -61,7 +69,7 @@ type TableCellPriority = {
 type TableCellLabel = {
     label?: React.ReactNode;
 };
-export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & TableCellPriority & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableHead: React.ForwardRefExoticComponent<Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "align"> & TableCellPriority & TableCellAxes & React.RefAttributes<HTMLTableCellElement>>;
 /**
  * The cell's CONTENT owns its inset — an expanded detail panel, a nested table, a full-bleed media
  * strip. The cell drops its own padding so the child reaches the cell edges; without it the only
@@ -79,5 +87,5 @@ type TableCellFlush = {
 type TableCellIndent = {
     indent?: TableCellIndentProp;
 };
-export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & TableCellPriority & TableCellLabel & TableCellFlush & TableCellIndent & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> & TableCellPriority & TableCellLabel & TableCellFlush & TableCellIndent & TableCellAxes & React.RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/components/data-display/table.js

@@ -65,34 +65,64 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, priority, ...props }, ref) => /* @__PURE__ */ jsx(
+function cellWidth(width) {
+  if (width === void 0) return void 0;
+  return typeof width === "number" ? `${width}px` : width;
+}
+const TableHead = React.forwardRef(({ className, priority, align, numeric, wrap, width, style, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
     "data-slot": "table-head",
     "data-priority": priority,
+    "data-align": align,
+    "data-numeric": numeric ? "" : void 0,
+    "data-wrap": wrap ? "" : void 0,
     className: cn(tableHeadHeightClass, className),
+    style: width === void 0 ? style : { ...style, inlineSize: cellWidth(width) },
     ...props
   }
 ));
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, priority, label, flush, indent, children, style, ...props }, ref) => /* @__PURE__ */ jsxs(
-  "td",
-  {
-    ref,
-    "data-slot": "table-cell",
-    "data-priority": priority,
-    "data-flush": flush ? "" : void 0,
-    "data-indent": indent === void 0 ? void 0 : indent,
-    className: cn(className),
-    style: indent === void 0 ? style : { ...style, "--table-cell-indent-level": indent },
-    ...props,
-    children: [
-      label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
-      children
-    ]
-  }
-));
+const TableCell = React.forwardRef(
+  ({
+    className,
+    priority,
+    label,
+    flush,
+    indent,
+    align,
+    numeric,
+    wrap,
+    width,
+    children,
+    style,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "td",
+    {
+      ref,
+      "data-slot": "table-cell",
+      "data-priority": priority,
+      "data-flush": flush ? "" : void 0,
+      "data-indent": indent === void 0 ? void 0 : indent,
+      "data-align": align,
+      "data-numeric": numeric ? "" : void 0,
+      "data-wrap": wrap ? "" : void 0,
+      className: cn(className),
+      style: indent === void 0 && width === void 0 ? style : {
+        ...style,
+        ...indent === void 0 ? null : { "--table-cell-indent-level": indent },
+        ...width === void 0 ? null : { inlineSize: cellWidth(width) }
+      },
+      ...props,
+      children: [
+        label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
+        children
+      ]
+    }
+  )
+);
 TableCell.displayName = "TableCell";
 export {
   Table,

package/dist/components/data-display/tree-list.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Package } from "lucide-react";
 import { Badge } from "./badge.js";
 function TreeList({ items }) {
   return /* @__PURE__ */ jsx("ul", { className: "ui-tree-list", children: items.map((item) => /* @__PURE__ */ jsxs(
@@ -8,19 +7,15 @@ function TreeList({ items }) {
     {
       className: "ui-tree-item",
       "data-active": item.active ? "true" : void 0,
-      "data-depth": item.depth ?? 0,
+      "data-depth": Math.max(0, item.depth ?? 0),
+      style: { "--tree-item-depth": Math.max(0, item.depth ?? 0) },
       "aria-current": item.active ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(Package, { "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { className: "ui-tree-item-body", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ui-tree-item-title", children: [
-            item.active ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Current: " }) : null,
-            item.title
-          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ui-tree-item-title", children: item.title }),
           item.description ? /* @__PURE__ */ jsx("div", { className: "ui-tree-item-description", children: item.description }) : null
         ] }),
-        item.badge ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item.badge }) : null
+        item.badge != null ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: item.badge }) : null
       ]
     },
     item.id

package/dist/components/data-entry/calendar.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CalendarProp } from "../../props/components/data-entry.prop.js";
-export type { CalendarProp, CalendarProp as CalendarProps, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
-export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;
+export type { CalendarProp, CalendarProp as CalendarProps, CalendarCellRenderProp, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
+export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, cellRender, month: monthProp, onMonthChange, ...props }: CalendarProp): React.JSX.Element;

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

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker, dateMatchModifiers } from "react-day-picker";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { DayButton, DayPicker, dateMatchModifiers } from "react-day-picker";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconSmClass } from "../../lib/control-styles.js";
@@ -21,6 +21,9 @@ function Calendar({
   showClose = false,
   onClose,
   footer,
+  width = "auto",
+  bordered = false,
+  cellRender,
   month: monthProp,
   onMonthChange,
   ...props
@@ -78,6 +81,8 @@ function Calendar({
         labelNav: labels?.labelNav ?? (() => `${ariaLabel ?? "Calendar"} navigation`)
       },
       className: cn("ui-calendar", className),
+      "data-width": width === "full" ? "full" : void 0,
+      "data-bordered": bordered ? "true" : void 0,
       classNames: {
         months: cn("ui-calendar-months", classNames?.months),
         month: cn("ui-calendar-month", classNames?.month),
@@ -100,51 +105,92 @@ function Calendar({
           classNames?.button_next
         ),
         month_grid: cn("ui-calendar-grid", classNames?.month_grid),
-        weekdays: cn("flex", classNames?.weekdays),
+        /*
+         * The weekday row needs a DS class of its own. It only ever carried `flex`, so any rule
+         * written for it — the ruled grid's end edge, the header tint — matched nothing and failed
+         * silently while looking correct in the stylesheet.
+         */
+        weekdays: cn("ui-calendar-weekdays flex", classNames?.weekdays),
+        /*
+         * Named for the same reason the weekday row is: a slot with no DS class cannot be styled
+         * from this package, and a rule written for one fails silently. These two only render with
+         * `showWeekNumber`, which is exactly why the gap went unnoticed.
+         */
+        week_number: cn("ui-calendar-week-number", classNames?.week_number),
+        week_number_header: cn("ui-calendar-week-number-header", classNames?.week_number_header),
         weekday: cn("ui-calendar-weekday", classNames?.weekday),
         week: cn("ui-calendar-week", classNames?.week),
-        day: cn(
-          "ui-calendar-day",
-          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
-          "[&:has([aria-selected].day-range-end)]:rounded-e-md",
-          classNames?.day
-        ),
+        /*
+         * ONE ELEMENT OWNS THE DAY SURFACE, and it is the `<button>`.
+         *
+         * It used to be split: hover painted the button, selection painted the `<td>`. Measured on
+         * a real page — the selected day came out a SHARP blue square (td, border-radius 0) while
+         * hover was a rounded grey (button, 3.71px). Same for `outside`: `text-muted-foreground`
+         * sat on the td while the ghost button set its own colour underneath, so days from the
+         * neighbouring month were not greyed at all. Two symptoms, one cause.
+         *
+         * So the `td` keeps ONLY grid duties — column width, the row it sits in — and every state
+         * (hover, selected, today, outside, disabled, range) is expressed on the button, where the
+         * radius and the padding already live. Adding a state later means adding it in one place;
+         * that was the part that kept going wrong.
+         */
+        day: cn("ui-calendar-day", classNames?.day),
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
           "ui-calendar-day-button",
           classNames?.day_button
         ),
-        range_start: cn("day-range-start rounded-s-md", classNames?.range_start),
-        range_end: cn("day-range-end rounded-e-md", classNames?.range_end),
-        range_middle: cn(
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-          classNames?.range_middle
-        ),
-        selected: cn(
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-          // The day is a ghost <button> that sets its OWN (dark --foreground) text colour, which
-          // overrides the cell's text-primary-foreground and fails contrast on the blue fill
-          // (axe color-contrast). Force the button label to primary-foreground through hover/focus.
-          "[&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground [&>button:focus]:text-primary-foreground",
-          classNames?.selected
-        ),
-        today: cn("bg-accent text-accent-foreground", classNames?.today),
-        outside: cn(
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-          classNames?.outside
-        ),
+        range_start: cn("day-range-start", classNames?.range_start),
+        range_end: cn("day-range-end", classNames?.range_end),
+        range_middle: cn("day-range-middle", classNames?.range_middle),
+        selected: cn("day-selected", classNames?.selected),
+        today: cn("day-today", classNames?.today),
+        outside: cn("day-outside", classNames?.outside),
         disabled: cn("ui-calendar-day-disabled", classNames?.disabled),
         hidden: cn("invisible", classNames?.hidden),
-        footer: cn("ui-calendar-footer", classNames?.footer),
-        ...classNames
+        footer: cn("ui-calendar-footer", classNames?.footer)
+        /*
+         * NO `...classNames` here. Spreading the consumer's object last REPLACED each slot that it
+         * names, so `classNames={{ day: "my-class" }}` dropped `.ui-calendar-day` — and with it
+         * every state selector, because they all key on that class. The slots above already merge
+         * the consumer's value through `cn()`; this line only ever un-merged them.
+         *
+         * A slot this component does not name still passes straight through: react-day-picker
+         * reads its own defaults for anything absent from this object.
+         */
       },
+      ...props,
       components: {
+        /*
+         * FOUR orientations, not two. `Nav` asks for left/right, but `Dropdown` asks for "down" —
+         * and mapping everything that is not "left" to ChevronRight pointed the month and year
+         * selects sideways. react-day-picker's own Chevron handles all four; ours has to as well.
+         */
         Chevron: ({ orientation, className: chevronClassName }) => {
-          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          const Icon = orientation === "left" ? ChevronLeft : orientation === "up" ? ChevronUp : orientation === "down" ? ChevronDown : ChevronRight;
           return /* @__PURE__ */ jsx(Icon, { className: cn("ui-calendar-chevron", chevronClassName), "aria-hidden": "true" });
-        }
+        },
+        /**
+         * `cellRender` WRAPS the library's own day button rather than replacing it (gh#390). The
+         * button carries the selection state, `aria-selected`, the disabled handling and its place
+         * in the grid's roving tabindex; handing a consumer a blank cell to rebuild would mean
+         * every 祝日 marker in every app re-derives all of that, and most would get it wrong.
+         * So the original node is passed in and the consumer decorates around it.
+         */
+        ...cellRender ? {
+          DayButton: (dayButtonProps) => /* @__PURE__ */ jsx(Fragment, { children: cellRender(dayButtonProps.day.date, { originNode: /* @__PURE__ */ jsx(DayButton, { ...dayButtonProps }) }) })
+        } : {},
+        /*
+         * A consumer's `components` MERGE with ours; they must not replace the object.
+         *
+         * `{...props}` used to sit after this block, so `components={{ DayButton: Custom }}` — the
+         * documented way to put a marker on a day — silently deleted our `Chevron` too. Measured
+         * on a live page: the nav arrows came back as react-day-picker's own polygon chevron,
+         * which needs a `fill` and therefore picked up `--rdp-accent-color: blue`. The consumer
+         * replaced one component and lost an unrelated one, with no error.
+         */
+        ...props.components
       },
-      ...props,
       ...rangeDefaults
     }
   );

package/dist/components/data-entry/cascader.d.ts

@@ -2,4 +2,4 @@ import * as React from "react";
 import type { CascaderProp } from "../../props/components/data-entry.prop.js";
 export type { CascaderProp, CascaderProp as CascaderProps, } from "../../props/components/data-entry.prop.js";
 export type { TreeOption, TreeFieldNames } from "./tree-utils.js";
-export declare function Cascader({ options: optionsProp, value, defaultValue, onValueChange, multiple, changeOnSelect, showSearch, placeholder, disabled, className, id, expandTrigger, fieldNames, allowClear, ...ariaProps }: CascaderProp): React.JSX.Element;
+export declare function Cascader({ options: optionsProp, value, defaultValue, onValueChange, multiple, changeOnSelect, showSearch, placeholder, disabled, readOnly, name, className, id, expandTrigger, fieldNames, allowClear, size, status, variant, loading, open: openProp, defaultOpen, onOpenChange, showCheckedStrategy, loadData, displayRender, optionRender, maxTagCount, maxTagPlaceholder, notFoundContent, autoClearSearchValue, search: searchProp, onSearchChange, ...ariaProps }: CascaderProp): React.JSX.Element;