@godxjp/ui 18.4.0 → 18.5.0

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

@@ -1,23 +1,41 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Text } from "../general/typography.js";
 const ListRow = React.forwardRef(
-  ({ as = "div", leading, title, description, trailing, align = "center", className, ...props }, ref) => {
+  ({
+    as = "div",
+    leading,
+    title,
+    description,
+    trailing,
+    align = "center",
+    overflow = "truncate",
+    unread,
+    className,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
     const Comp = as;
+    const truncate = overflow !== "wrap";
     return /* @__PURE__ */ jsxs(
       Comp,
       {
         ref,
         "data-slot": "list-row",
         "data-align": align === "start" ? "start" : void 0,
+        "data-overflow": overflow === "wrap" ? "wrap" : void 0,
+        "data-unread": unread === true ? "" : void 0,
         className: cn("ui-list-row", className),
         ...props,
         children: [
+          unread !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-indicator", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? t("dataDisplay.listRow.unread") : t("dataDisplay.listRow.read") }) }) : null,
           leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
           /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
-            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate: true, children: title }),
-            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate: true, children: description }) : null
+            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate, children: title }),
+            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate, children: description }) : null
           ] }),
           trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
         ]

package/dist/components/data-display/service-launcher-card.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import type { HeadingLevelProp, ToneProp } from "../../props/vocabulary/index.js";
+export type ServiceLauncherStatusTone = Extract<ToneProp, "success" | "warning" | "destructive" | "info" | "neutral" | "muted">;
+export interface ServiceLauncherCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon: LucideIcon;
+    title: React.ReactNode;
+    titleLevel?: HeadingLevelProp;
+    statusLabel?: React.ReactNode;
+    statusTone?: ServiceLauncherStatusTone;
+    description?: React.ReactNode;
+    metadata?: React.ReactNode;
+    action: React.ReactNode;
+    disabledReason?: React.ReactNode;
+}
+/**
+ * Token-owned launcher surface for an organization-scoped downstream service.
+ *
+ * Consumers supply real status, metadata and actions; access is NEVER inferred — the component
+ * derives no entitlement, no launch URL and no disabled state of its own. `statusLabel`/
+ * `statusTone` are rendered verbatim, and the action's `disabled` state is the consumer's Button
+ * prop. The only thing derived from a prop is presentational: supplying `disabledReason` marks
+ * the tile `data-unavailable` so the token layer can drop the medallion's brand wash.
+ *
+ * Layout is NOT owned here: place tiles in `ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}` for
+ * the canonical 3 → 2 → 1 launcher grid (the grid queries its own container, never the viewport).
+ */
+export declare const ServiceLauncherCard: React.ForwardRefExoticComponent<ServiceLauncherCardProps & React.RefAttributes<HTMLDivElement>>;
+export interface ServiceCatalogCtaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: LucideIcon;
+    title: React.ReactNode;
+    action: React.ReactNode;
+}
+/** Dashed companion tile for the real catalog/add action beside launcher cards. */
+export declare const ServiceCatalogCta: React.ForwardRefExoticComponent<ServiceCatalogCtaProps & React.RefAttributes<HTMLDivElement>>;
+export interface ServiceLauncherCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+/** Shape-matched loading placeholder for a launcher card. */
+export declare function ServiceLauncherCardSkeleton({ className, label, ...props }: ServiceLauncherCardSkeletonProps): React.JSX.Element;

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

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+const ServiceLauncherCard = React.forwardRef(
+  ({
+    className,
+    icon: Icon,
+    title,
+    titleLevel = 2,
+    statusLabel,
+    statusTone = "neutral",
+    description,
+    metadata,
+    action,
+    disabledReason,
+    ...props
+  }, ref) => {
+    const Heading = `h${titleLevel}`;
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        density: "tight",
+        className: cn("ui-service-launcher-card", className),
+        "data-service-launcher": "",
+        "data-unavailable": disabledReason != null ? "" : void 0,
+        ...props,
+        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 }),
+            statusLabel != null ? /* @__PURE__ */ jsx(Badge, { tone: statusTone, "data-slot": "service-launcher-status", children: statusLabel }) : null
+          ] }),
+          description != null ? /* @__PURE__ */ jsx("div", { "data-slot": "service-launcher-description", children: description }) : null,
+          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(
+    Card,
+    {
+      ref,
+      variant: "outline",
+      className: cn("ui-service-catalog-cta", className),
+      "data-service-catalog-cta": "",
+      ...props,
+      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 })
+      ]
+    }
+  )
+);
+ServiceCatalogCta.displayName = "ServiceCatalogCta";
+function ServiceLauncherCardSkeleton({
+  className,
+  label,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      density: "tight",
+      className: cn("ui-service-launcher-card", className),
+      "data-service-launcher": "",
+      "aria-busy": "true",
+      ...props,
+      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" }),
+          /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-title" }),
+          /* @__PURE__ */ jsx("span", { className: "ui-skeleton-block", "data-slot": "service-launcher-skeleton-status" })
+        ] }),
+        /* @__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" })
+      ]
+    }
+  );
+}
+export {
+  ServiceCatalogCta,
+  ServiceLauncherCard,
+  ServiceLauncherCardSkeleton
+};

package/dist/components/data-entry/command-palette.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type CommandPaletteItem = {
+    id: string;
+    label: React.ReactNode;
+    searchValue?: string;
+    meta?: React.ReactNode;
+    disabled?: boolean;
+};
+export type CommandPaletteGroup = {
+    id: string;
+    label: React.ReactNode;
+    items: CommandPaletteItem[];
+};
+export type CommandPaletteLabels = {
+    open: string;
+    title: string;
+    description: string;
+    placeholder: string;
+    empty: React.ReactNode;
+    loading?: React.ReactNode;
+    move?: React.ReactNode;
+    select?: React.ReactNode;
+    close?: React.ReactNode;
+};
+export type CommandPaletteProps = {
+    groups: CommandPaletteGroup[];
+    labels: CommandPaletteLabels;
+    onSelect: (item: CommandPaletteItem) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    loading?: boolean;
+    error?: React.ReactNode;
+    trigger?: React.ReactNode;
+    shortcut?: boolean;
+};
+export declare function CommandPalette({ groups, labels, onSelect, open: controlledOpen, defaultOpen, onOpenChange, loading, error, trigger, shortcut, }: CommandPaletteProps): React.JSX.Element;

package/dist/components/data-entry/command-palette.js

@@ -0,0 +1,125 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search } from "lucide-react";
+import { Button } from "../general/button.js";
+import { Dialog, DialogContent } from "../feedback/dialog.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "./command.js";
+function CommandPalette({
+  groups,
+  labels,
+  onSelect,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  loading = false,
+  error,
+  trigger,
+  shortcut = true
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const shortcutRestoreFocusRef = React.useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (!shortcut) return;
+    const handleKeyDown = (event) => {
+      if (!event.isComposing && event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        if (!open && document.activeElement instanceof HTMLElement) {
+          shortcutRestoreFocusRef.current = document.activeElement;
+        }
+        setOpen(!open);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, setOpen, shortcut]);
+  const triggerNode = trigger ?? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ui-command-palette-trigger", children: [
+    /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: labels.open }),
+    /* @__PURE__ */ jsx("span", { className: "kbd", "aria-hidden": "true", children: "\u2318K" })
+  ] });
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "ui-command-palette",
+        showCloseButton: false,
+        "aria-modal": "true",
+        "aria-describedby": "ui-command-palette-description",
+        onCloseAutoFocus: (event) => {
+          const restoreTarget = shortcutRestoreFocusRef.current;
+          if (restoreTarget?.isConnected) {
+            event.preventDefault();
+            requestAnimationFrame(() => {
+              if (restoreTarget.isConnected) {
+                restoreTarget.focus({ preventScroll: true });
+              }
+            });
+          }
+          shortcutRestoreFocusRef.current = null;
+        },
+        children: [
+          /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: labels.title }),
+          /* @__PURE__ */ jsx(Dialog.Description, { id: "ui-command-palette-description", className: "sr-only", children: labels.description }),
+          /* @__PURE__ */ jsxs(Command, { label: labels.title, children: [
+            /* @__PURE__ */ jsx(CommandInput, { autoFocus: true, placeholder: labels.placeholder, "aria-label": labels.placeholder }),
+            /* @__PURE__ */ jsx(CommandList, { "aria-busy": loading, children: loading ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsx("div", { className: "ui-command-palette-state", role: "alert", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: labels.empty }),
+              groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: item.searchValue ?? `${item.id} ${String(item.label)}`,
+                  disabled: item.disabled,
+                  onSelect: () => {
+                    setOpen(false);
+                    onSelect(item);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "ui-command-palette-label", children: item.label }),
+                    item.meta != null ? /* @__PURE__ */ jsx("span", { className: "ui-command-palette-meta", children: item.meta }) : null
+                  ]
+                },
+                item.id
+              )) }, group.id))
+            ] }) })
+          ] }),
+          labels.move != null || labels.select != null || labels.close != null ? /* @__PURE__ */ jsxs("div", { className: "ui-command-palette-hints", "aria-hidden": "true", children: [
+            labels.move != null ? /* @__PURE__ */ jsxs("span", { children: [
+              "\u2191\u2193 ",
+              labels.move
+            ] }) : null,
+            labels.select != null ? /* @__PURE__ */ jsxs("span", { children: [
+              "\u21B5 ",
+              labels.select
+            ] }) : null,
+            labels.close != null ? /* @__PURE__ */ jsxs("span", { children: [
+              "esc ",
+              labels.close
+            ] }) : null
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CommandPalette
+};

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

@@ -48,6 +48,8 @@ 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";

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/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;
@@ -73,6 +74,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;

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,

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 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

@@ -35,8 +35,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";
@@ -101,5 +103,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 {};