@godxjp/ui 18.4.0 → 18.6.0

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

@@ -48,11 +48,14 @@ export type { TreeSelectProps } from "./tree-select.js";
 export { Transfer } from "./transfer.js";
 export type { TransferProps, TransferItemProp } from "./transfer.js";
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command.js";
+export { CommandPalette } from "./command-palette.js";
+export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";
 export type { PasswordInputProps } from "./password-input.js";
 export { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 export type { PasswordRule, PasswordStrengthLabels, PasswordStrengthProps, PasswordStrengthReturn, } from "./password-strength.js";
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
+export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "./input-otp.js";
 export { Rating } from "./rating.js";
 export type { RatingProps } from "./rating.js";
 export { TagInput } from "./tag-input.js";

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

@@ -44,6 +44,7 @@ import {
   CommandItem,
   CommandList
 } from "./command.js";
+import { CommandPalette } from "./command-palette.js";
 import { PasswordInput } from "./password-input.js";
 import { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
@@ -61,6 +62,7 @@ export {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandPalette,
   DatePicker,
   DateRangePicker,
   Field,

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

@@ -1 +1,2 @@
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../ui/input-otp.js";
+export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProps, } from "../ui/input-otp.js";

package/dist/components/feedback/dialog.d.ts

@@ -13,6 +13,7 @@ declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitiv
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     showClose?: boolean;
     showCloseButton?: boolean;
+    overlayClassName?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 interface DialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     title?: React.ReactNode;
@@ -34,6 +35,19 @@ declare const DialogFooter: {
 };
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type AlertDialogRootProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {};
+/**
+ * Compound alert-dialog Root — the `role="alertdialog"` mirror of {@link DialogRoot}.
+ *
+ * The flat {@link AlertDialog} preset owns the confirm / challenge / step-up recipe and cannot be
+ * re-composed; this Root is what a consumer reaches for when the confirmation needs bespoke
+ * content. It supplies the Radix AlertDialog context that `AlertDialogTitle`,
+ * `AlertDialogDescription`, `AlertDialogAction` and `AlertDialogCancel` read, so the compound
+ * parts are assemblable from the public API alone (no direct `@radix-ui/react-alert-dialog`
+ * import). Focus trap, focus restoration and the modal `role="alertdialog"` semantics stay
+ * Radix-owned.
+ */
+declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
 declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -73,6 +87,7 @@ export declare const Dialog: typeof DialogRoot & {
     Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
         showClose?: boolean;
         showCloseButton?: boolean;
+        overlayClassName?: string;
     } & React.RefAttributes<HTMLDivElement>>;
     Header: {
         ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
@@ -92,4 +107,4 @@ export declare const Dialog: typeof DialogRoot & {
     Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 };
-export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogAction, DialogCancel, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, };
+export { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogAction, DialogCancel, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, };

package/dist/components/feedback/dialog.js

@@ -36,39 +36,48 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
-  const { t } = useTranslation();
-  const showCloseButton = showCloseButtonProp ?? showClose ?? true;
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        ref,
-        "data-slot": "dialog-content",
-        className: cn(
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton ? /* @__PURE__ */ jsxs(
-            DialogPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
-              children: [
-                /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
-              ]
-            }
-          ) : null
-        ]
-      }
-    )
-  ] });
-});
+const DialogContent = React.forwardRef(
+  ({
+    className,
+    children,
+    showClose,
+    showCloseButton: showCloseButtonProp,
+    overlayClassName,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const showCloseButton = showCloseButtonProp ?? showClose ?? true;
+    return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          "data-slot": "dialog-content",
+          className: cn(
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            showCloseButton ? /* @__PURE__ */ jsxs(
+              DialogPrimitive.Close,
+              {
+                "data-slot": "dialog-close",
+                className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+                children: [
+                  /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
 DialogContent.displayName = "DialogContent";
 const DialogHeader = ({
   className,
@@ -123,6 +132,9 @@ const DialogDescription = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 DialogDescription.displayName = "DialogDescription";
+function AlertDialogRoot(props) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -372,6 +384,7 @@ export {
   AlertDialogHeader,
   AlertDialogOverlay,
   AlertDialogPortal,
+  AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
   Dialog,

package/dist/components/feedback/index.d.ts

@@ -1,6 +1,9 @@
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogAction, DialogCancel, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, } from "./dialog.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogBody, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogAction, DialogCancel, AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, } from "./dialog.js";
 export type { AlertDialogProp, AlertDialogProps } from "./dialog.js";
-export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, } from "./sheet.js";
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, useSheetResponsiveMode, } from "./sheet.js";
+export type { SheetContentProps, SheetPresentation, SheetResponsiveProp } from "./sheet.js";
+export { TwoFactorSetup } from "./two-factor-setup.js";
+export type { TwoFactorSetupLabels, TwoFactorSetupProps } from "./two-factor-setup.js";
 export { Toaster } from "./sonner.js";
 export { toast } from "./use-toast.js";
 export { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";

package/dist/components/feedback/index.js

@@ -12,6 +12,7 @@ import {
   DialogTrigger,
   DialogAction,
   DialogCancel,
+  AlertDialogRoot,
   AlertDialogTrigger,
   AlertDialogPortal,
   AlertDialogOverlay,
@@ -35,8 +36,10 @@ import {
   SheetOverlay,
   SheetPortal,
   SheetTitle,
-  SheetTrigger
+  SheetTrigger,
+  useSheetResponsiveMode
 } from "./sheet.js";
+import { TwoFactorSetup } from "./two-factor-setup.js";
 import { Toaster } from "./sonner.js";
 import { toast } from "./use-toast.js";
 import { Skeleton, SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonStat } from "./skeleton.js";
@@ -63,6 +66,7 @@ export {
   AlertDialogHeader,
   AlertDialogOverlay,
   AlertDialogPortal,
+  AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertQueryError,
@@ -101,5 +105,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-  toast
+  TwoFactorSetup,
+  toast,
+  useSheetResponsiveMode
 };

package/dist/components/feedback/sheet.d.ts

@@ -1,23 +1,46 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { type VariantProps } from "class-variance-authority";
+import type { SheetResponsiveProp } from "../../props/components/feedback.prop.js";
 import type { ToneProp, WidthProp } from "../../props/vocabulary/index.js";
+export type { SheetResponsiveProp } from "../../props/components/feedback.prop.js";
+/** Resolved presentation of a responsive sheet: the named side panel, or the mobile bottom sheet. */
+export type SheetPresentation = "side" | "bottom";
+/**
+ * The canonical responsive-overlay decision, shared by `SheetContent` and by any composite that
+ * swaps a desktop surface for a mobile sheet (see `OrgSwitcher`). Returns `"bottom"` when the
+ * viewport is at or below `--sheet-responsive-breakpoint-width`.
+ *
+ * Public so a consumer NEVER hand-rolls `useMediaQuery("(max-width: 390px)")` in app code — the
+ * breakpoint stays one themeable knob for the whole system.
+ */
+export declare function useSheetResponsiveMode(responsive?: SheetResponsiveProp): SheetPresentation;
 export declare function Sheet(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 export declare function SheetTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 export declare function SheetClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 export declare function SheetPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 export declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     showCloseButton?: boolean;
+    /** Optional semantic class for the owned backdrop (for a shell-specific overlay token). */
+    overlayClassName?: string;
     /**
      * Desired panel size for side left/right (Ant Drawer `width`). Caps at the viewport — a small
      * screen still gets a full-width panel (`min(width, 100%)`), it is NOT a hard fixed width. Omit
-     * to keep the default `w-3/4 sm:max-w-md`.
+     * to keep the canonical drawer default from `--sheet-width-default`.
      */
     width?: WidthProp;
+    /**
+     * Responsive drawer / detail-panel contract. `"side"` (default) keeps today's behaviour: the
+     * physical `side` the consumer named, at every viewport. `"auto"` renders the desktop side panel
+     * above `--sheet-responsive-breakpoint-width` and the mobile bottom sheet at/below it (capped by
+     * `--sheet-bottom-max-height`), so ONE `<Sheet>` covers both without a page-local media query.
+     * `"bottom"` pins the bottom-sheet presentation.
+     */
+    responsive?: SheetResponsiveProp;
 }
 export declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface SheetHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
@@ -35,4 +58,3 @@ export declare const SheetBody: ({ className, ...props }: React.HTMLAttributes<H
 export declare const SheetFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export {};

package/dist/components/feedback/sheet.js

@@ -4,10 +4,38 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
+import { useMediaQuery } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
+const SHEET_BREAKPOINT_TOKEN = "--sheet-responsive-breakpoint-width";
+const SHEET_BREAKPOINT_FALLBACK_QUERY = "(max-width: 768px)";
+function cssLengthToPx(value, rootFontSize) {
+  const match = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(value.trim());
+  if (match == null) return void 0;
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) return void 0;
+  return match[2] === "rem" || match[2] === "em" ? amount * rootFontSize : amount;
+}
+function readSheetBreakpointQuery() {
+  if (typeof document === "undefined" || typeof window.getComputedStyle !== "function") {
+    return SHEET_BREAKPOINT_FALLBACK_QUERY;
+  }
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const rootFontSize = cssLengthToPx(rootStyle.fontSize || "16px", 16) ?? 16;
+  const px = cssLengthToPx(rootStyle.getPropertyValue(SHEET_BREAKPOINT_TOKEN), rootFontSize);
+  return px == null ? SHEET_BREAKPOINT_FALLBACK_QUERY : `(max-width: ${String(px)}px)`;
+}
+function useSheetResponsiveMode(responsive = "side") {
+  const [query, setQuery] = React.useState(SHEET_BREAKPOINT_FALLBACK_QUERY);
+  React.useEffect(() => {
+    setQuery(readSheetBreakpointQuery());
+  }, []);
+  const compact = useMediaQuery(query);
+  if (responsive === "side" || responsive === "bottom") return responsive;
+  return compact ? "bottom" : "side";
+}
 function Sheet(props) {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -44,9 +72,9 @@ const sheetVariants = cva(
       // the Radix/shadcn Sheet convention. The physical classes below are intended.
       side: {
         /* rtl-ignore: named physical side */
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md",
+        right: "inset-y-0 right-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
         /* rtl-ignore: named physical side */
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md",
+        left: "inset-y-0 left-0 h-full w-[min(var(--sheet-width-default),100%)] max-w-none border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
       }
@@ -55,23 +83,41 @@ const sheetVariants = cva(
   }
 );
 const SheetContent = React.forwardRef(
-  ({ side = "right", className, children, showCloseButton = true, width, style, ...props }, ref) => {
+  ({
+    side = "right",
+    className,
+    children,
+    showCloseButton = true,
+    overlayClassName,
+    width,
+    responsive = "side",
+    style,
+    ...props
+  }, ref) => {
     const { t } = useTranslation();
-    const horizontal = side === "left" || side === "right";
+    const presentation = useSheetResponsiveMode(responsive);
+    const resolvedSide = presentation === "bottom" ? "bottom" : side;
+    const bottomSheet = responsive !== "side" && presentation === "bottom";
+    const horizontal = resolvedSide === "left" || resolvedSide === "right";
     const widthSet = width != null && horizontal;
     const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
     return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-      /* @__PURE__ */ jsx(SheetOverlay, {}),
+      /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
       /* @__PURE__ */ jsxs(
         DialogPrimitive.Content,
         {
           ref,
           "data-slot": "sheet-content",
+          "data-responsive": responsive,
+          "data-side": resolvedSide,
           style: mergedStyle,
           className: cn(
-            sheetVariants({ side }),
+            sheetVariants({ side: resolvedSide }),
             // `width` caps at the viewport: full-width panel on a small screen, capped on a large one.
             widthSet && "w-[min(var(--sheet-width),100%)] max-w-none sm:max-w-none",
+            // Only the RESPONSIVE bottom presentation is capped — a plain `side="bottom"` sheet keeps
+            // its content-sized height so existing usage is untouched.
+            bottomSheet && "max-h-[var(--sheet-bottom-max-height)]",
             className
           ),
           ...props,
@@ -193,5 +239,6 @@ export {
   SheetOverlay,
   SheetPortal,
   SheetTitle,
-  SheetTrigger
+  SheetTrigger,
+  useSheetResponsiveMode
 };

package/dist/components/feedback/two-factor-setup.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type TwoFactorSetupLabels = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    qrLabel: string;
+    manualKeyLabel: React.ReactNode;
+    codeLabel: string;
+    codePlaceholder?: string;
+    recoveryNotice: React.ReactNode;
+    cancel: React.ReactNode;
+    confirm: React.ReactNode;
+    acknowledge: React.ReactNode;
+};
+export type TwoFactorSetupProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    qrValue?: string;
+    manualKey: string;
+    code: string;
+    onCodeChange: (code: string) => void;
+    onConfirm: () => void;
+    recoveryCodes?: string[];
+    onAcknowledge: () => void;
+    labels: TwoFactorSetupLabels;
+    pending?: boolean;
+};
+/**
+ * Canonical two-factor setup overlay. Network requests and state persistence remain application
+ * concerns; this component only owns the QR/manual-key/OTP/recovery presentation contract.
+ */
+export declare function TwoFactorSetup({ open, onOpenChange, qrValue, manualKey, code, onCodeChange, onConfirm, recoveryCodes, onAcknowledge, labels, pending, }: TwoFactorSetupProps): React.JSX.Element;

package/dist/components/feedback/two-factor-setup.js

@@ -0,0 +1,97 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CredentialReveal } from "../data-display/credential-reveal.js";
+import { QrCode } from "../data-display/qr-code.js";
+import { Input } from "../data-entry/input.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./dialog.js";
+function TwoFactorSetup({
+  open,
+  onOpenChange,
+  qrValue,
+  manualKey,
+  code,
+  onCodeChange,
+  onConfirm,
+  recoveryCodes = [],
+  onAcknowledge,
+  labels,
+  pending = false
+}) {
+  const showingRecovery = recoveryCodes.length > 0;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "ui-two-factor-setup",
+      overlayClassName: "ui-two-factor-setup-overlay",
+      showCloseButton: !pending,
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: labels.description })
+        ] }),
+        /* @__PURE__ */ jsx(DialogBody, { children: showingRecovery ? /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "ui-two-factor-setup-recovery",
+            "aria-live": "polite",
+            "data-state": "recovery",
+            children: [
+              /* @__PURE__ */ jsx(Text, { as: "p", tone: "muted", children: labels.recoveryNotice }),
+              /* @__PURE__ */ jsx("ul", { className: "ui-two-factor-setup-recovery-codes", children: recoveryCodes.map((recoveryCode) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: recoveryCode }) }, recoveryCode)) })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "ui-two-factor-setup-enrollment", "data-state": "enrollment", children: [
+          /* @__PURE__ */ jsx(Text, { as: "p", tone: "muted", children: labels.description }),
+          /* @__PURE__ */ jsxs("div", { className: "ui-two-factor-setup-grid", children: [
+            qrValue ? /* @__PURE__ */ jsx(QrCode, { value: qrValue, label: labels.qrLabel, size: "sm" }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "ui-two-factor-setup-fields", children: [
+              /* @__PURE__ */ jsx(
+                CredentialReveal,
+                {
+                  secret: manualKey,
+                  label: labels.manualKeyLabel,
+                  warning: null,
+                  defaultRevealed: true,
+                  size: "sm"
+                }
+              ),
+              /* @__PURE__ */ jsxs("label", { className: "ui-two-factor-setup-code", children: [
+                /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", weight: "medium", children: labels.codeLabel }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: code,
+                    onChange: (event) => onCodeChange(event.target.value.replace(/\D/g, "").slice(0, 6)),
+                    inputMode: "numeric",
+                    autoComplete: "one-time-code",
+                    maxLength: 6,
+                    placeholder: labels.codePlaceholder,
+                    "aria-label": labels.codeLabel
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { as: "p", size: "sm", tone: "muted", className: "ui-two-factor-setup-notice", children: labels.recoveryNotice })
+        ] }) }),
+        /* @__PURE__ */ jsx(DialogFooter, { children: showingRecovery ? /* @__PURE__ */ jsx(Button, { onClick: onAcknowledge, children: labels.acknowledge }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: pending, children: labels.cancel }),
+          /* @__PURE__ */ jsx(Button, { onClick: onConfirm, disabled: pending || code.length !== 6, loading: pending, children: labels.confirm })
+        ] }) })
+      ]
+    }
+  ) });
+}
+export {
+  TwoFactorSetup
+};

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

@@ -3,6 +3,6 @@ export type { ButtonProps } from "./button.js";
 export { Text, Heading } from "./typography.js";
 export type { TextProps, HeadingProps, TextProp, HeadingProp } from "./typography.js";
 export { Logo } from "./logo.js";
-export type { LogoProps, LogoSize } from "./logo.js";
+export type { LogoMark, LogoProps, LogoSize, LogoTone } from "./logo.js";
 export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";

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

@@ -1,27 +1,67 @@
 import * as React from "react";
 export type LogoSize = "xs" | "sm" | "md" | "lg";
+export type LogoTone = "primary" | "success";
+export type LogoMark = "glyph" | "godx";
 export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * The brand glyph — a short mark (a letter/initials, default `"g"`) or a custom node such as an
      * inline `<svg>`. Keep it to 1–2 glyphs; the box is square and centres its content.
      */
     glyph?: React.ReactNode;
-    /** Box size tier (tokenised). Default `"md"` (1.75rem). */
+    /**
+     * Semantic mark artwork. `"godx"` renders the canonical GoDX identity mark as an inline vector;
+     * `"glyph"` preserves the configurable boxed-glyph treatment.
+     */
+    mark?: LogoMark;
+    /**
+     * Box size tier (tokenised), applied to EVERY mark. The boxed glyph reads `--logo-size-*`
+     * (default `md` = 1.75rem); `mark="godx"` reads its own `--logo-godx-size-*` scale (default `md`
+     * = 2rem — the identity artwork is a capsule in a square viewBox and needs slightly more box to
+     * read at the same optical weight). On a `wordmark` lockup the tier scales the mark and the
+     * wordmark together. A theme pins the identity box at every tier with `--logo-godx-size`.
+     */
     size?: LogoSize;
+    /**
+     * Semantic fill role. `"success"` provides the canonical green identity mark without changing
+     * the application's primary action colour. Default `"primary"` preserves existing behaviour.
+     */
+    tone?: LogoTone;
+    /**
+     * Readable product name rendered BESIDE the mark as one lockup. Pass the localized product name
+     * (a string, or a node when the name needs its own markup). When set, `Logo` renders
+     * `mark + wordmark` in a single inline-flex lockup: the mark becomes decorative and the wordmark
+     * carries the accessible name, so the pair is announced once. The wordmark reads
+     * `--logo-wordmark-*` tokens — its colour defaults to the identity role for the GoDX/`success`
+     * lockup and NEVER to `--primary`, so a re-themed action colour cannot recolour the brand.
+     * Omit for the bare mark (today's behaviour, unchanged).
+     *
+     * NOTE: the library ships no wordmark ARTWORK — the wordmark is set in the design-system
+     * typeface (`--logo-wordmark-font-family`, default `--font-family-display`). Pass an inline
+     * `<svg>` here when a real logotype asset exists.
+     */
+    wordmark?: React.ReactNode;
     /**
      * Accessible name for the mark. When set, the logo is exposed to assistive tech as an image with
      * this name; when omitted the mark is decorative (`aria-hidden`) — the correct default when a
-     * readable wordmark sits beside it.
+     * readable wordmark sits beside it. With `wordmark` set, `label` overrides the lockup's
+     * accessible name (the wordmark text is otherwise the name).
      */
     label?: string;
 }
 /**
- * Logo — the product brand-mark box: a glyph on the primary fill. Use it INSTEAD of hand-rolling a
- * bare span with a fixed square size, a literal radius, and `bg-primary` + type utilities in shell
- * headers, auth screens, and topbars — that repeats literal size/radius and puts type utilities on
- * a bare span (rules #45/#46). Size, radius, and per-tier font-size are tokens; the fill reads the
- * primary role, so a re-themed `--primary` re-tints the mark automatically. Pair with a wordmark for
- * the full lockup (leave `label` unset so the mark stays decorative and the wordmark carries the
- * accessible name).
+ * Logo — the product brand-mark box: a glyph on the primary fill, or (with `wordmark`) the full
+ * mark + wordmark LOCKUP. Use it INSTEAD of hand-rolling a bare span with a fixed square size, a
+ * literal radius, and `bg-primary` + type utilities in shell headers, auth screens, and topbars —
+ * that repeats literal size/radius and puts type utilities on a bare span (rules #45/#46). Size,
+ * radius, per-tier font-size, the wordmark's face/weight/tracking/colour and the mark↔wordmark gap
+ * are all tokens.
+ *
+ * COLOUR: the boxed glyph fill reads the primary role, so a re-themed `--primary` re-tints it.
+ * `mark="godx"` / `tone="success"` instead read the IDENTITY tokens (`--logo-godx-color`,
+ * `--logo-success-*`, `--logo-wordmark-color`), which never reference `--primary` — the canonical
+ * brand-green GoDX lockup therefore survives any action-colour re-theme with zero consumer CSS.
+ *
+ * A11Y: with a `wordmark`, the mark is decorative and the wordmark text carries the accessible
+ * name (announced once). Without one, set `label` when the mark stands alone.
  */
 export declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLSpanElement>>;