@godxjp/ui 18.4.0 → 18.6.0

package/dist/components/layout/org-switcher.js

@@ -0,0 +1,218 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronsUpDown, Loader2, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../data-entry/command.js";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+  useSheetResponsiveMode
+} from "../feedback/sheet.js";
+import { Button } from "../general/button.js";
+function OrganizationMark({ organization }) {
+  return /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-avatar", "aria-hidden": "true", children: organization?.avatar ?? organization?.name.trim().charAt(0).toUpperCase() ?? "?" });
+}
+function OrganizationBadge({ organization }) {
+  if (organization.badge == null) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "org-switcher-badge",
+      className: "shrink-0",
+      "aria-hidden": organization.badgeLabel != null ? "true" : void 0,
+      children: organization.badge
+    }
+  );
+}
+const OrgSwitcherTrigger = React.forwardRef(
+  ({ organization, collapsed, disabled, label, ...props }, ref) => {
+    const reactId = React.useId();
+    const badgeDescriptionId = !collapsed && organization?.badge != null && organization.badgeLabel != null ? `${reactId}-badge` : void 0;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        type: "button",
+        variant: "ghost",
+        className: "ui-org-switcher-trigger",
+        "data-collapsed": collapsed ? "true" : void 0,
+        disabled,
+        "aria-label": label,
+        "aria-describedby": badgeDescriptionId,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(OrganizationMark, { organization }),
+          !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-current", children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-name", children: organization?.name ?? label }),
+              organization?.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-meta", children: organization.meta }) : null
+            ] }),
+            organization != null ? /* @__PURE__ */ jsx(OrganizationBadge, { organization }) : null,
+            badgeDescriptionId != null ? /* @__PURE__ */ jsx("span", { id: badgeDescriptionId, className: "sr-only", children: organization?.badgeLabel }) : null,
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ui-org-switcher-chevron", "aria-hidden": "true" })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+OrgSwitcherTrigger.displayName = "OrgSwitcherTrigger";
+function OrgSwitcherPanel({
+  organizations,
+  value,
+  onValueChange,
+  loading,
+  error,
+  onRetry,
+  labels,
+  close
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-org-switcher-state", role: "status", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ui-org-switcher-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: labels.loading })
+    ] });
+  }
+  if (error != null) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-org-switcher-state", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry != null ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }),
+        labels.retry
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Command, { label: labels.title, className: "ui-org-switcher-command", children: [
+    /* @__PURE__ */ jsx(CommandInput, { placeholder: labels.search, "aria-label": labels.search }),
+    /* @__PURE__ */ jsxs(CommandList, { children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
+      /* @__PURE__ */ jsx(CommandGroup, { children: organizations.map((organization) => {
+        const selected = organization.id === value;
+        return /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: `${organization.name} ${String(organization.meta ?? "")}`,
+            keywords: organization.badgeLabel != null ? [organization.id, organization.badgeLabel] : [organization.id],
+            disabled: organization.disabled,
+            onSelect: () => {
+              onValueChange?.(organization.id);
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsx(OrganizationMark, { organization }),
+              /* @__PURE__ */ jsxs("span", { className: "ui-org-switcher-option", children: [
+                /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-name", children: organization.name }),
+                organization.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-org-switcher-meta", children: organization.meta }) : null
+              ] }),
+              /* @__PURE__ */ jsx(OrganizationBadge, { organization }),
+              organization.badge != null && organization.badgeLabel != null ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: organization.badgeLabel }) : null,
+              selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Check, { className: "ui-org-switcher-check", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                  "(",
+                  labels.title,
+                  ")"
+                ] })
+              ] }) : null
+            ]
+          },
+          organization.id
+        );
+      }) })
+    ] })
+  ] });
+}
+function OrgSwitcher({
+  organizations,
+  value,
+  onValueChange,
+  collapsed = false,
+  disabled = false,
+  loading = false,
+  error,
+  onRetry,
+  labels,
+  responsive = "auto",
+  open,
+  onOpenChange,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const controlled = open !== void 0;
+  const resolvedOpen = controlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (!controlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [controlled, onOpenChange]
+  );
+  const compactViewport = useSheetResponsiveMode("auto") === "bottom";
+  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const current = organizations.find((organization) => organization.id === value);
+  const fallbackName = current?.name ?? labels.title;
+  const triggerLabel = labels.trigger(fallbackName);
+  const triggerDisabled = disabled;
+  const trigger = /* @__PURE__ */ jsx(
+    OrgSwitcherTrigger,
+    {
+      organization: current,
+      collapsed,
+      disabled: triggerDisabled,
+      label: triggerLabel
+    }
+  );
+  const panel = /* @__PURE__ */ jsx(
+    OrgSwitcherPanel,
+    {
+      organizations,
+      value,
+      onValueChange,
+      loading,
+      error,
+      onRetry,
+      labels,
+      close: () => setOpen(false)
+    }
+  );
+  if (sheet) {
+    return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          responsive: "bottom",
+          className: "ui-org-switcher-sheet",
+          style: {
+            "--sheet-bottom-max-height": "var(--org-switcher-sheet-max-height)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { title: labels.title }),
+            /* @__PURE__ */ jsx(SheetBody, { children: panel })
+          ]
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "ui-org-switcher-popover", "aria-label": labels.title, children: panel })
+  ] }) });
+}
+export {
+  OrgSwitcher
+};

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, density, variant, preset, headerLayout, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -44,6 +44,9 @@ function PageContainerRoot({
   linkComponent: LinkComponent = "a",
   density,
   variant = "default",
+  preset = "default",
+  headerLayout = "stack",
+  measure = "default",
   stickyFooter = false,
   footerReveal = "always",
   fill = false,
@@ -56,6 +59,8 @@ function PageContainerRoot({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-preset": preset,
+      "data-measure": measure,
       "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
@@ -69,7 +74,7 @@ function PageContainerRoot({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", children: [
+        /* @__PURE__ */ jsxs("header", { ref: headerRef, className: "ui-page-header", "data-layout": headerLayout, children: [
           breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
             "nav",
             {
@@ -100,7 +105,7 @@ function PageContainerRoot({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "ui-page-header-row", children: [
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ui-page-header-heading min-w-0", children: [
               /* @__PURE__ */ jsx("h1", { className: "ui-page-title", children: title }),
               subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
             ] }),

package/dist/components/layout/sidebar-link.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { SidebarLinkComponentProp } from "../../props/components/layout.prop.js";
+/**
+ * Adapt a framework router `Link` to {@link SidebarLinkComponentProp} (gh#213) — a dependency-free
+ * factory, so `@godxjp/ui` still ships ZERO router/framework dependencies.
+ *
+ * It lives in its own module (imports only React + the prop types) so `@godxjp/ui/inertia` can build
+ * on it without pulling the whole Sidebar — and its Collapsible/Popover/Tooltip tree — into a
+ * form-only consumer's bundle.
+ *
+ * It normalizes only the two things that differ between routers:
+ * 1. **Which prop carries the destination** — `"href"` (Inertia, Next.js) or `"to"` (React Router,
+ *    TanStack Router).
+ * 2. **A row with no destination** — a disabled row must never mount a router link (Inertia and
+ *    React Router both require a string destination and would navigate to `""`); it falls back to an
+ *    inert `<a>` that keeps the canonical row class and `aria-disabled`. That fallback carries an
+ *    explicit `role="link"`: an `<a>` without `href` has NO implicit role, so a screen reader would
+ *    announce it as plain text and `aria-label` would be a prohibited attribute — which is exactly
+ *    how the icon-only collapsed rail (where the label lives on `aria-label`) would have lost the
+ *    name of every disabled row. Callers that supply their own role — the collapsed flyout's
+ *    `menuitem` — still win, because `rest` is spread after it.
+ *
+ * Everything else — the icon, the label, the badge, `data-active`/`aria-current`, the collapsed
+ * rail's `aria-label` — is composed by the LIBRARY and arrives as `children`. The consumer never
+ * reconstructs row markup, which is what makes the reported "every sidebar icon disappeared"
+ * regression impossible.
+ *
+ * @example
+ * ```tsx
+ * // React Router / TanStack Router — destination prop is `to`.
+ * import { Link } from "react-router-dom";
+ * const RouterLink = createSidebarLink(Link, "to");
+ * <Sidebar linkComponent={RouterLink} sections={sections} activeId={activeId} />
+ *
+ * // Inertia / Next.js — destination prop is `href` (the default).
+ * import { Link } from "@inertiajs/react";
+ * const InertiaLink = createSidebarLink(Link);
+ * ```
+ */
+export declare function createSidebarLink<P extends {
+    className?: string;
+    children?: React.ReactNode;
+}>(Link: React.ComponentType<P>, hrefProp?: "href" | "to"): SidebarLinkComponentProp;

package/dist/components/layout/sidebar-link.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+function createSidebarLink(Link, hrefProp = "href") {
+  const Adapter = React.forwardRef(function SidebarLinkAdapter({ href, ...rest }, ref) {
+    if (!href) return /* @__PURE__ */ jsx("a", { ref, role: "link", ...rest });
+    const routed = { [hrefProp]: href, ...rest, ref };
+    return /* @__PURE__ */ jsx(Link, { ...routed });
+  });
+  return Adapter;
+}
+export {
+  createSidebarLink
+};

package/dist/components/layout/sidebar.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { SidebarItemData, SidebarProp } from "../../props/components/layout.prop.js";
-export type { SidebarItemData, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, } from "../../props/components/layout.prop.js";
-type RenderItem = (item: SidebarItemData) => React.ReactNode;
+import type { SidebarItemData, SidebarLinkComponentProp, SidebarProp, SidebarRenderItemProp } from "../../props/components/layout.prop.js";
+export type { SidebarItemData, SidebarLinkComponentProp, SidebarLinkProp, SidebarProductProp as SidebarProduct, SidebarProp, SidebarProp as SidebarProps, SidebarRenderItemProp, } from "../../props/components/layout.prop.js";
+type RenderItem = (item: SidebarItemData, rowProps: SidebarRenderItemProp) => React.ReactNode;
 type SidebarHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 type SidebarSectionProps = {
     label?: string;
@@ -13,9 +13,46 @@ type SidebarItemProps = {
     active?: boolean;
     sub?: boolean;
     onActivate?: (id: string) => void;
+    /**
+     * Framework-router link element TYPE (gh#213). The row content stays library-composed — see
+     * {@link SidebarLinkProp}. Applied only when `item.href` is set.
+     */
+    linkComponent?: SidebarLinkComponentProp;
+    /**
+     * Radix-style element swap: the single child element (a router `<Link>`) BECOMES the row and the
+     * library injects its composed icon + label + badge as that element's children (gh#213). Use it
+     * when you compose `SidebarItem` by hand instead of passing `sections` + `linkComponent`.
+     */
+    asChild?: boolean;
+    /** @deprecated Use `linkComponent` / `asChild` — see {@link SidebarProp.renderItem}. */
     renderItem?: RenderItem;
 };
 export declare function SidebarHeader({ children, className, ...props }: SidebarHeaderProps): React.JSX.Element;
 export declare function SidebarSection({ label, collapsed, children, className, ...props }: SidebarSectionProps & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-export declare function SidebarItem({ item, active, sub, onActivate, renderItem, children, ...props }: SidebarItemProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">): React.JSX.Element;
-export declare function Sidebar({ ariaLabel: ariaLabelCamel, activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): React.JSX.Element;
+export declare function SidebarItem({ item, active, sub, onActivate, linkComponent: LinkComponent, asChild, renderItem, children, ...props }: SidebarItemProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick">): React.JSX.Element;
+export { createSidebarLink } from "./sidebar-link.js";
+/**
+ * Sidebar — data-driven vertical nav rail.
+ *
+ * ROUTER LINKS (gh#213): pass `linkComponent` and the LIBRARY keeps composing every row (icon slot,
+ * label, badge, active state, the icon-only collapsed rail and its tooltip name) — the consumer
+ * supplies only the link ELEMENT. Use {@link createSidebarLink} to adapt a router `Link`, or
+ * `SidebarItem asChild` when composing rows by hand. `renderItem` is DEPRECATED: it left row content
+ * to the consumer, so a `<Link>{item.label}</Link>` dropped every icon and badge.
+ *
+ * THEMING (gh#228): the row/label and the nav ICON read SEPARATE component tokens, so a service can
+ * match a canonical shell's darker 16px icons without page-local CSS and without re-tinting every
+ * muted text globally:
+ *
+ * - `--sidebar-nav-item-foreground` (row + label, incl. sub rows) · default `hsl(var(--muted-foreground))`
+ * - `--sidebar-nav-item-hover-foreground` · default `hsl(var(--foreground))`
+ * - `--sidebar-nav-item-disabled-foreground` · default = the resting row colour
+ * - `--sidebar-nav-icon-foreground` (`.sb-icon`, incl. the collapsed rail + group triggers) ·
+ *   default `currentColor` = the row colour
+ * - `--sidebar-nav-icon-{hover,active,disabled}-foreground` · each defaults to the base icon knob
+ *
+ * The active row keeps `--sidebar-item-active-background` / `--sidebar-item-active-foreground`.
+ * These are COLOUR knobs only — icon size stays `--sidebar-nav-icon-size` (16px) and row geometry
+ * stays `--sidebar-nav-item-height` / `-gap` / `-padding-x`.
+ */
+export declare function Sidebar({ ariaLabel: ariaLabelCamel, activeId, onSelect, sections, product, onProductClick, brand, collapsed, children, linkComponent, renderItem, footer, "aria-label": ariaLabel, }: SidebarProp): React.JSX.Element;