@godxjp/ui 33.20.0 → 33.22.1

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

@@ -62,8 +62,10 @@ const badgeVariants = cva(
       variant: {
         default: "border-transparent bg-primary text-primary-foreground",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
-        outline: "text-foreground",
-        dashed: "border-dashed text-foreground",
+        // gh#1439 — the outline / dashed ink is a role-mirror knob (default --foreground), so a
+        // brand whose plain chip reads muted sets it once instead of wrapping every label.
+        outline: "text-[color:var(--badge-outline-foreground,hsl(var(--foreground)))]",
+        dashed: "border-dashed text-[color:var(--badge-outline-foreground,hsl(var(--foreground)))]",
         /* `color` mode. Deliberately empty and deliberately NOT in the public
          * `BadgeVariant` union: every fill, border and text utility has to stay
          * off the element so badge-layout.css's `[data-tinted]` rule is

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

@@ -429,6 +429,9 @@ const ImageRoot = React.forwardRef(function Image({
   className,
   onLoad,
   onError,
+  fetchPriority,
+  loading = fetchPriority === "high" ? "eager" : "lazy",
+  decoding = "async",
   ...imgProps
 }, ref) {
   const { t } = useTranslation();
@@ -486,6 +489,9 @@ const ImageRoot = React.forwardRef(function Image({
       "img",
       {
         ...imgProps,
+        loading,
+        decoding,
+        fetchPriority,
         width,
         height,
         ref: setImgRef,

package/dist/components/data-entry/form-field.js

@@ -54,7 +54,7 @@ function FormField({
   const labelId = `${resolvedId}-label`;
   const hasLabel = !(label === void 0 || label === null || label === false || label === "");
   const helperId = helper ? `${resolvedId}-helper` : void 0;
-  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground text-xs", children: helper }) : null;
+  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground", children: helper }) : null;
   const validationStatus = error ? "error" : validateStatus;
   const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
   const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
@@ -200,7 +200,7 @@ function FormField({
             }
           ) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong", children: error }) : null
         ] })
       ]
     }

package/dist/components/data-entry/number-input.d.ts

@@ -25,6 +25,7 @@ export declare const NumberInput: React.ForwardRefExoticComponent<import(".").Fi
     placeholder?: import("../../props/index.js").PlaceholderProp;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    width?: import("../../props/index.js").ControlWidthProp;
     name?: import("../../props/index.js").NameProp;
     id?: import("../../props/index.js").IdProp;
     className?: import("../../props/index.js").ClassNameProp;

package/dist/components/data-entry/number-input.js

@@ -15,6 +15,7 @@ function decimalsOf(n) {
   const dot = s.indexOf(".");
   return dot === -1 ? 0 : s.length - dot - 1;
 }
+const AUTO_CHARS_UNBOUNDED = 6;
 function clamp(n, min, max) {
   let out = n;
   if (min != null && out < min) out = min;
@@ -51,6 +52,7 @@ const NumberInput = React.forwardRef(
     placeholder,
     prefix,
     suffix,
+    width = "full",
     name,
     id,
     className,
@@ -182,6 +184,10 @@ const NumberInput = React.forwardRef(
       if (!changeOnWheel || !interactive || !focused || event.deltaY === 0) return;
       stepBy(event.deltaY < 0 ? 1 : -1);
     };
+    const autoChars = width !== "auto" ? null : min == null && max == null ? AUTO_CHARS_UNBOUNDED : Math.max(
+      ...[min, max].filter((bound) => bound != null && Number.isFinite(bound)).map((bound) => formatAtRest(bound).length),
+      1
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -190,7 +196,9 @@ const NumberInput = React.forwardRef(
         "data-status": status,
         "data-variant": variant,
         "data-controls": controls ? void 0 : "off",
+        "data-width": width === "full" ? void 0 : width,
         className: cn("ui-number-input", className),
+        style: autoChars == null ? void 0 : { "--number-input-chars": autoChars },
         children: [
           prefix != null ? /* @__PURE__ */ jsx(
             "span",

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

@@ -319,6 +319,7 @@ const SelectTrigger = React.forwardRef(
       },
       [ref]
     );
+    const openedWithPointer = React.useRef(false);
     const wasOpen = React.useRef(false);
     React.useEffect(() => {
       if (!wasOpen.current || isOpen) {
@@ -354,6 +355,7 @@ const SelectTrigger = React.forwardRef(
         ref: composedRef,
         id,
         onPointerDown: (event) => {
+          openedWithPointer.current = true;
           event.currentTarget.focus();
         },
         ...events,
@@ -384,6 +386,10 @@ const SelectTrigger = React.forwardRef(
             "data-status": status,
             "data-width": width,
             "data-state": isOpen ? "open" : "closed",
+            "data-open-modality": isOpen ? openedWithPointer.current ? "pointer" : "keyboard" : void 0,
+            onKeyDownCapture: () => {
+              openedWithPointer.current = false;
+            },
             "data-placeholder": hasValue ? void 0 : "",
             "data-value": dataValue
           }
@@ -600,6 +606,13 @@ function groupDataOptions(options) {
   }
   return order.map((key) => ({ heading: key || void 0, items: buckets.get(key) ?? [] }));
 }
+function withOptionIcon(option, label) {
+  if (!option.icon) return label;
+  return /* @__PURE__ */ jsxs("span", { className: "ui-select-option-body", children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-select-option-icon", "aria-hidden": "true", children: option.icon }),
+    /* @__PURE__ */ jsx("span", { className: "ui-select-option-label", children: label })
+  ] });
+}
 function DataSelectLabel({
   labelRender,
   options
@@ -716,7 +729,7 @@ function DataSelect(props) {
         disabled: option.disabled,
         "data-testid": optionTestId(option.value),
         selectedIcon: menuItemSelectedIcon,
-        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : option.label
+        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : withOptionIcon(option, option.label)
       },
       option.value
     );
@@ -771,7 +784,16 @@ function DataSelect(props) {
             ...ariaProps,
             children: [
               prefix === void 0 || prefix === null ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-prefix", className: "ui-select-prefix", children: prefix }),
-              /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? t("dataEntry.searchSelect.placeholder"), children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : void 0 }),
+              /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? t("dataEntry.searchSelect.placeholder"), children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : options.some((option) => option.icon) ? (
+                // gh#1444 — the selected option's icon leads the trigger too, as in the search panel.
+                /* @__PURE__ */ jsx(
+                  DataSelectLabel,
+                  {
+                    labelRender: ({ label, option }) => option ? withOptionIcon(option, label) : label,
+                    options
+                  }
+                )
+              ) : void 0 }),
               suffixIcon === void 0 || suffixIcon === null || showClear || loading ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-suffix", className: "ui-select-suffix", "aria-hidden": "true", children: suffixIcon })
             ]
           }

package/dist/components/general/button.js

@@ -74,6 +74,11 @@ const buttonVariants = cva("ui-button", {
   },
   defaultVariants: { variant: "default", size: "default", shape: "default" }
 });
+function hasDirectText(children) {
+  return React.Children.toArray(children).some(
+    (child) => typeof child === "string" && child.trim() !== "" || typeof child === "number"
+  );
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -94,11 +99,15 @@ const Button = React.forwardRef(
     disabled,
     type,
     children,
+    onClick,
     ...props
   }, ref) => {
     const { locale } = useTranslation();
     const Comp = asChild ? Slot : "button";
     const isLoading = !asChild && loading;
+    const handleClick = isLoading ? (event) => {
+      event.preventDefault();
+    } : onClick;
     const content = isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", "aria-hidden": "true" }),
       loadingText ?? children
@@ -108,6 +117,7 @@ const Button = React.forwardRef(
     const spokenCount = countLabel ? `${countText} ${countLabel}` : countText;
     const ariaLabel = props["aria-label"];
     const foldedAriaLabel = showCount && ariaLabel != null ? { "aria-label": `${ariaLabel}, ${spokenCount}` } : null;
+    const labelled = asChild ? React.isValidElement(children) && hasDirectText(children.props.children) : hasDirectText(loadingText ?? children);
     const countNode = showCount ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", "aria-hidden": "true", children: countText }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spokenCount}` })
@@ -124,8 +134,11 @@ const Button = React.forwardRef(
         "data-wrap": wrap ? "" : void 0,
         "data-align": align === "center" ? void 0 : align,
         "data-loading": isLoading ? "" : void 0,
+        "data-label": labelled ? "" : void 0,
         "aria-busy": isLoading || void 0,
-        disabled: isLoading || disabled,
+        "aria-disabled": isLoading && !disabled || void 0,
+        disabled,
+        onClick: handleClick,
         type: asChild ? void 0 : type ?? "button",
         className: cn(
           fullWidth && "w-full",

package/dist/components/general/typography.d.ts

@@ -44,7 +44,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     as?: "span" | "p" | "div" | "a" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
     asChild?: import("../../props/index.js").AsChildProp;
     link?: boolean;
-    size?: import("../../props/index.js").TextSizeProp;
+    size?: import("../../props/index.js").TextSizeProp | "inherit";
     tone?: import("../../props/index.js").TextToneProp;
     weight?: import("../../props/index.js").FontWeightProp;
     align?: import("../../props/index.js").TextAlignProp;

package/dist/components/layout/app-shell.d.ts

@@ -3,4 +3,4 @@ import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
 /** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
 export declare function useAppShellNavigationMode(): "drawer" | "docked";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileNav, mobileNavLabel, mobileNavTriggerLabel, mobileNavOnCloseAutoFocus, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileTabBar, mobileTabBarLabel, mobileNav, mobileNavLabel, mobileNavTriggerLabel, mobileNavOnCloseAutoFocus, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -6,6 +6,8 @@ import { Menu } from "lucide-react";
 import { useMediaQuery } from "../../lib/hooks.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
+import { ShellTabBar } from "./mobile-shell.js";
+import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
 import { TopbarItem } from "./topbar-item.js";
 import { isDevelopment } from "../../lib/dev.js";
@@ -30,6 +32,8 @@ function AppShell({
   navRailPosition = "start",
   navRailEnd,
   navRailLabel,
+  mobileTabBar,
+  mobileTabBarLabel,
   mobileNav,
   mobileNavLabel,
   mobileNavTriggerLabel,
@@ -39,6 +43,23 @@ function AppShell({
 }) {
   const { t } = useTranslation();
   const navigationMode = useAppShellNavigationMode();
+  const rootRef = React.useRef(null);
+  const tabBarRef = React.useRef(null);
+  const showTabBar = responsiveNavigation === "drawer" && navigationMode === "drawer" && mobileTabBar != null && mobileTabBar !== false;
+  useToastStickyBarClearance(showTabBar ? [tabBarRef] : [], showTabBar);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    const bar2 = tabBarRef.current;
+    if (!root || !bar2 || !showTabBar || typeof ResizeObserver === "undefined") return;
+    const publish = () => root.style.setProperty("--app-shell-mobile-tab-bar-block-size", `${bar2.offsetHeight}px`);
+    publish();
+    const observer = new ResizeObserver(publish);
+    observer.observe(bar2, { box: "border-box" });
+    return () => {
+      observer.disconnect();
+      root.style.removeProperty("--app-shell-mobile-tab-bar-block-size");
+    };
+  }, [showTabBar]);
   const hasSidebar = sidebar !== void 0 && sidebar !== null && sidebar !== false;
   const railContent = navRail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
     navRail,
@@ -146,10 +167,13 @@ function AppShell({
     ] }),
     hasTopbarContent && resolvedTopbar
   ] });
+  const footerRegion = footer !== void 0 ? /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer }) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: "app-root",
+      "data-mobile-tab-bar": showTabBar ? "" : void 0,
       "data-collapsed": hasSidebar && sidebarCollapsed ? "true" : void 0,
       "data-sidebar": hasSidebar ? void 0 : "none",
       "data-responsive-navigation": responsiveNavigation,
@@ -177,11 +201,13 @@ function AppShell({
             tabIndex: 0,
             children: [
               breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
-              children
+              children,
+              showTabBar && footerRegion
             ]
           }
         ),
-        footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer })
+        !showTabBar && footerRegion,
+        showTabBar && /* @__PURE__ */ jsx(ShellTabBar, { ref: tabBarRef, className: "app-mobile-tab-bar", "aria-label": mobileTabBarLabel, children: mobileTabBar })
       ]
     }
   );

package/dist/components/layout/centered-shell.js

@@ -15,6 +15,8 @@ function PageLayout({
   width = "md",
   align = "start",
   preset = "default",
+  footerTone = "default",
+  flow = "column",
   className
 }) {
   const { t } = useTranslation();
@@ -23,6 +25,7 @@ function PageLayout({
     {
       "data-slot": "centered-shell",
       "data-preset": preset === "default" ? void 0 : preset,
+      "data-flow": flow === "sections" ? "sections" : void 0,
       className: cn("ui-centered-shell", className),
       children: [
         topbar !== void 0 && /* @__PURE__ */ jsx(
@@ -39,6 +42,7 @@ function PageLayout({
           {
             className: "ui-centered-shell-footer",
             "aria-label": t("layout.centeredShell.footerLabel"),
+            "data-tone": footerTone === "inverse" ? "inverse" : void 0,
             children: footer
           }
         )

package/dist/components/layout/editorial-account.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { EditorialAuthCardProp, EditorialAuthProp, EditorialEmptyPanelProp, EditorialFootnoteProp, EditorialMetaBarProp, EditorialStatsProp, EditorialTextButtonProp, EditorialToggleGroupProp, EditorialToolbarProp, HoldingCardActionProp, HoldingCardProp, HoldingGridProp, SettingsLayoutProp, SettingsPanelProp, ThemePickerProp } from "../../props/components/editorial-account.prop.js";
+export type { EditorialAuthCardProp, EditorialAuthCardProp as EditorialAuthCardProps, EditorialAuthProp, EditorialAuthProp as EditorialAuthProps, EditorialEmptyPanelProp, EditorialEmptyPanelProp as EditorialEmptyPanelProps, EditorialFootnoteProp, EditorialFootnoteProp as EditorialFootnoteProps, EditorialMetaBarProp, EditorialMetaBarProp as EditorialMetaBarProps, EditorialStatsItemProp, EditorialStatsProp, EditorialStatsProp as EditorialStatsProps, EditorialTextButtonProp, EditorialTextButtonProp as EditorialTextButtonProps, EditorialToggleGroupItemProp, EditorialToggleGroupProp, EditorialToggleGroupProp as EditorialToggleGroupProps, EditorialToolbarProp, EditorialToolbarProp as EditorialToolbarProps, HoldingCardActionProp, HoldingCardProp, HoldingCardProp as HoldingCardProps, HoldingGridProp, HoldingGridProp as HoldingGridProps, HoldingViewProp, SettingsLayoutProp, SettingsLayoutProp as SettingsLayoutProps, SettingsPanelProp, SettingsPanelProp as SettingsPanelProps, ThemePickerOptionProp, ThemePickerPreviewProp, ThemePickerProp, ThemePickerProp as ThemePickerProps, } from "../../props/components/editorial-account.prop.js";
+/** A named group of `aria-pressed` buttons, one pressed at a time: text filter or icon switch. */
+export declare function EditorialToggleGroup({ items, value, onValueChange, variant, className, ...rest }: EditorialToggleGroupProp): React.JSX.Element;
+/** A hairline-ruled strip: a glyph and a line at the start, a badge at the end. */
+export declare function EditorialMetaBar({ icon, start, end, className }: EditorialMetaBarProp): React.JSX.Element;
+/** A centred signed-out (`guest`, with a card-stack illustration) or empty (`empty`) panel. */
+export declare function EditorialEmptyPanel({ variant, eyebrow, title, level, description, actions, icon, className, }: EditorialEmptyPanelProp): React.JSX.Element;
+/** A strip of figure tiles on unequal tracks; the first tile is the lead. */
+export declare function EditorialStats({ items, className, ...rest }: EditorialStatsProp): React.JSX.Element;
+/**
+ * The row above a collection: a summary (count + note) and / or a start cluster, an end cluster
+ * (order, view switch, primary action), optionally over a hairline. With a `summary` it is a
+ * listing row that keeps one line; without one it is a bar whose clusters may stack.
+ */
+export declare function EditorialToolbar({ summary, start, end, divider, className, }: EditorialToolbarProp): React.JSX.Element;
+/** The track of HoldingCards; `view="list"` turns every card into a wide row. */
+export declare function HoldingGrid({ view, children, className, ...rest }: HoldingGridProp): React.JSX.Element;
+/** One owned item: picture ground, overline, title, meta, tags, purchase line, date, actions. */
+export declare function HoldingCard({ media, overline, title, level, meta, tags, purchase, date, actions, className, }: HoldingCardProp): React.JSX.Element;
+/** A quiet glyph + label action of a HoldingCard; `asChild` turns a router link into it. */
+export declare function HoldingCardAction({ icon, children, asChild, onClick, disabled, className, ...rest }: HoldingCardActionProp): React.JSX.Element;
+/** A settings page: a sticky rail beside the panels. */
+export declare function SettingsLayout({ aside, children, className }: SettingsLayoutProp): React.JSX.Element;
+/** One bordered settings section: number, title, description, then its fields. */
+export declare function SettingsPanel({ number, title, level, description, children, titleId, className, }: SettingsPanelProp): React.JSX.Element;
+/** An illustrated radio group for the colour theme (painted light / dark / system previews). */
+export declare function ThemePicker({ legend, options, value, defaultValue, onValueChange, name, className, }: ThemePickerProp): React.JSX.Element;
+/** A sign-in / sign-up page: the story column beside the form card. */
+export declare function EditorialAuth({ eyebrow, title, description, art, benefits, children, className, }: EditorialAuthProp): React.JSX.Element;
+/** The form card of EditorialAuth: badge, title, copy, the form and a ruled footer line. */
+export declare function EditorialAuthCard({ badge, title, level, description, children, footer, className, }: EditorialAuthCardProp): React.JSX.Element;
+/** An underlined text action in the primary tone; `asChild` turns a router link into it. */
+export declare function EditorialTextButton({ children, icon, asChild, onClick, disabled, className, }: EditorialTextButtonProp): React.JSX.Element;
+/**
+ * `EditorialSearch variant="inline"` (gh#1439) — internal: a collection's own search row, visible
+ * label, framed field with a glyph and a live count. Rendered by EditorialSearch; not exported.
+ */
+export declare function EditorialSearchInline({ label, id, placeholder, defaultValue, onSearch, debounce, count, className, }: {
+    label: string;
+    id?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    onSearch?: (query: string) => void;
+    debounce?: number;
+    count?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** A quiet closing line: a note at the start, an optional action at the end. */
+export declare function EditorialFootnote({ children, action, align, className, }: EditorialFootnoteProp): React.JSX.Element;