@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

package/dist/modules/design_system/gallery/entries/overlays.js

@@ -1,13 +1,19 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import {
-  FilePlus2,
+  CircleAlert,
+  CircleCheck,
+  Globe,
   Info,
-  LayoutDashboard,
   Settings,
   TriangleAlert,
   UserRound,
-  Users
+  X
 } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { CheckboxField } from "@open-mercato/ui/primitives/checkbox-field";
+import { SwitchField } from "@open-mercato/ui/primitives/switch-field";
+import { StepperDots } from "@open-mercato/ui/primitives/step-indicator";
 import { Button } from "@open-mercato/ui/primitives/button";
 import {
   Dialog,
@@ -41,45 +47,427 @@ import {
 } from "@open-mercato/ui/primitives/sheet";
 import {
   Popover,
+  PopoverArrow,
+  PopoverClose,
   PopoverContent,
   PopoverTrigger
 } from "@open-mercato/ui/primitives/popover";
-import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
-import {
-  CommandMenu,
-  CommandMenuContent,
-  CommandMenuEmpty,
-  CommandMenuFooter,
-  CommandMenuGroup,
-  CommandMenuInput,
-  CommandMenuItem,
-  CommandMenuList,
-  CommandMenuSeparator,
-  CommandMenuTrigger
-} from "@open-mercato/ui/primitives/command-menu";
+import { SimpleTooltip, TooltipCard } from "@open-mercato/ui/primitives/tooltip";
+import { CommandSourceExample } from "../demos/menus.js";
+import { commandSourceCode } from "../demos/menu-sources.js";
+const headerIcons = { default: Settings, error: CircleAlert, warning: TriangleAlert, success: CircleCheck, info: Info };
+function FooterLeading({ kind }) {
+  const t = useT();
+  if (kind === "checkbox") return /* @__PURE__ */ jsx(CheckboxField, { label: t("design_system.gallery.samples.overlay.remember") });
+  if (kind === "toggle") return /* @__PURE__ */ jsx(SwitchField, { label: t("design_system.gallery.samples.overlay.remember") });
+  if (kind === "stepper") return /* @__PURE__ */ jsx(StepperDots, { count: 3, activeStep: 0, size: "sm", "aria-label": t("design_system.gallery.samples.overlay.steps") });
+  if (kind === "link") return /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", children: t("design_system.gallery.samples.overlay.help") });
+  if (kind === "information") return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Info, { "aria-hidden": "true", className: "size-4" }),
+    t("design_system.gallery.samples.overlay.information")
+  ] });
+  return null;
+}
+function DialogExample({ header = "basic", compact = false, footer = "basic", alignment = "horizontal", status = false }) {
+  const t = useT();
+  const Icon = header === "basic" ? void 0 : headerIcons[header];
+  return /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsxs("section", { "data-dialog-preview": "", "aria-label": t("design_system.gallery.samples.overlay.title"), className: "relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm", children: [
+    !status ? /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "absolute right-4 top-4 size-4 text-muted-foreground" }) : null,
+    /* @__PURE__ */ jsxs(DialogHeader, { className: status ? "p-6" : "p-4 pr-12", compact, alignment, leadingTone: header === "basic" ? "default" : header, leading: Icon ? /* @__PURE__ */ jsx(Icon, { className: compact || status ? "size-6" : "size-5" }) : void 0, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: status ? "text-base font-medium leading-6 tracking-normal" : "text-sm font-medium leading-5 tracking-normal", children: t("design_system.gallery.samples.overlay.title") }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: compact ? "sr-only" : void 0, children: t("design_system.gallery.samples.overlay.description") })
+    ] }),
+    !status ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-sm text-muted-foreground", children: t("design_system.gallery.samples.overlay.body") }) : null,
+    /* @__PURE__ */ jsxs(DialogFooter, { layout: footer === "equal" ? "equal" : "default", leading: footer === "basic" || footer === "equal" ? void 0 : /* @__PURE__ */ jsx(FooterLeading, { kind: footer }), className: "mx-0 gap-3 px-4 py-4", children: [
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "default", children: /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.samples.overlay.cancel") }) }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, variant: "primary-filled", size: "default", children: /* @__PURE__ */ jsx("span", { children: t("design_system.gallery.samples.overlay.continue") }) })
+    ] })
+  ] }) });
+}
+function DrawerExample({ header = "basic", compact = false, footer = "basic" }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Drawer, { children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.openDrawer") }) }),
+    /* @__PURE__ */ jsxs(DrawerContent, { closeAriaLabel: t("design_system.gallery.samples.overlay.close"), children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { compact, leading: header === "default" ? /* @__PURE__ */ jsx(Settings, { className: compact ? "size-6" : "size-5" }) : void 0, children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { className: "text-sm font-medium leading-5", children: t("design_system.gallery.samples.overlay.title") }),
+        /* @__PURE__ */ jsx(DrawerDescription, { className: compact ? "sr-only" : void 0, children: t("design_system.gallery.samples.overlay.description") })
+      ] }),
+      /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("p", { className: "py-6 text-sm text-muted-foreground", children: t("design_system.gallery.samples.overlay.body") }) }),
+      /* @__PURE__ */ jsxs(DrawerFooter, { layout: footer === "equal" ? "equal" : "default", leading: footer === "basic" || footer === "equal" ? void 0 : /* @__PURE__ */ jsx(FooterLeading, { kind: footer }), className: "flex-wrap [&_[data-slot=drawer-footer-trailing]]:ml-auto", children: [
+        /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.cancel") }) }),
+        /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary-filled", children: t("design_system.gallery.samples.overlay.continue") }) })
+      ] })
+    ] })
+  ] });
+}
+function overlayExampleCode(kind, example) {
+  const header = example.header ?? "basic";
+  const icon = header === "basic" ? null : { default: "Settings", error: "CircleAlert", warning: "TriangleAlert", success: "CircleCheck", info: "Info" }[header];
+  const footer = example.footer ?? "basic";
+  const leading = footer === "checkbox" ? '<CheckboxField label="Don\u2019t show again" />' : footer === "toggle" ? '<SwitchField label="Don\u2019t show again" />' : footer === "stepper" ? '<StepperDots count={3} activeStep={0} size="sm" aria-label="Step 1 of 3" />' : footer === "link" ? '<Button variant="link" size="sm">Help</Button>' : footer === "information" ? '<span className="text-xs text-muted-foreground">Changes apply immediately</span>' : null;
+  if (kind === "Dialog") return `${icon ? `import { ${icon}, X } from 'lucide-react'
+` : "import { X } from 'lucide-react'\n"}${footer === "checkbox" ? "import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\n" : ""}${footer === "toggle" ? "import { SwitchField } from '@open-mercato/ui/primitives/switch-field'\n" : ""}${footer === "stepper" ? "import { StepperDots } from '@open-mercato/ui/primitives/step-indicator'\n" : ""}import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@open-mercato/ui/primitives/dialog'
+
+<Dialog>
+  <section aria-label="Workspace settings" className="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+    ${example.status ? "" : '<X aria-hidden="true" className="absolute right-4 top-4 size-4 text-muted-foreground" />'}
+    <DialogHeader className="${example.status ? "p-6" : "p-4 pr-12"}" alignment="${example.alignment ?? "horizontal"}" leadingTone="${header === "basic" ? "default" : header}"${example.compact ? " compact" : ""}${icon ? ` leading={<${icon} className="${example.compact || example.status ? "size-6" : "size-5"}" />}` : ""}>
+      <DialogTitle className="${example.status ? "text-base font-medium leading-6 tracking-normal" : "text-sm font-medium leading-5 tracking-normal"}">Workspace settings</DialogTitle>
+      <DialogDescription${example.compact ? ' className="sr-only"' : ""}>Choose how these changes apply to your workspace.</DialogDescription>
+    </DialogHeader>
+    ${example.status ? "" : '<div className="px-4 py-6 text-sm text-muted-foreground">Review your settings before continuing.</div>'}
+    <DialogFooter layout="${footer === "equal" ? "equal" : "default"}"${leading ? ` leading={${leading}}` : ""} className="mx-0 gap-3 px-4 py-4">
+      <Button asChild variant="outline" size="default"><span>Cancel</span></Button>
+      <Button asChild variant="primary-filled" size="default"><span>Continue</span></Button>
+    </DialogFooter>
+  </section>
+</Dialog>`;
+  return `${icon ? `import { ${icon} } from 'lucide-react'
+` : ""}${footer === "checkbox" ? "import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\n" : ""}${footer === "toggle" ? "import { SwitchField } from '@open-mercato/ui/primitives/switch-field'\n" : ""}${footer === "stepper" ? "import { StepperDots } from '@open-mercato/ui/primitives/step-indicator'\n" : ""}import { Button } from '@open-mercato/ui/primitives/button'
+import { ${kind}, ${kind}Trigger, ${kind}Content, ${kind}Header, ${kind}Title, ${kind}Description, ${kind}Footer, ${kind}Close, DrawerBody } from '@open-mercato/ui/primitives/${kind.toLowerCase()}'
+
+<${kind}>
+  <${kind}Trigger asChild><Button variant="outline">Open ${kind.toLowerCase()}</Button></${kind}Trigger>
+  <${kind}Content>
+    <${kind}Header${example.compact ? " compact" : ""}${icon ? ` leading={<${icon} className="${example.compact || example.status ? "size-6" : "size-5"}" />}` : ""}>
+      <${kind}Title className="${example.status ? "text-base font-medium leading-6 tracking-normal" : "text-sm font-medium leading-5 tracking-normal"}">Workspace settings</${kind}Title>
+      <${kind}Description${example.compact ? ' className="sr-only"' : ""}>Choose how these changes apply to your workspace.</${kind}Description>
+    </${kind}Header>
+    <DrawerBody><p className="py-6 text-sm text-muted-foreground">Review your settings before continuing.</p></DrawerBody>
+    <${kind}Footer layout="${footer === "equal" ? "equal" : "default"}"${leading ? ` leading={${leading}}` : ""} className="flex-wrap [&_[data-slot=drawer-footer-trailing]]:ml-auto">
+      <${kind}Close asChild><Button variant="outline">Cancel</Button></${kind}Close>
+      <${kind}Close asChild><Button variant="primary-filled">Continue</Button></${kind}Close>
+    </${kind}Footer>
+  </${kind}Content>
+</${kind}>`;
+}
+const overlayPlacements = [
+  { label: "Top left", side: "bottom", align: "start" },
+  { label: "Top center", side: "bottom", align: "center" },
+  { label: "Top right", side: "bottom", align: "end" },
+  { label: "Bottom left", side: "top", align: "start" },
+  { label: "Bottom center", side: "top", align: "center" },
+  { label: "Bottom right", side: "top", align: "end" },
+  { label: "Left", side: "right", align: "center" },
+  { label: "Right", side: "left", align: "center" },
+  { label: "Left top", side: "right", align: "start" },
+  { label: "Left bottom", side: "right", align: "end" },
+  { label: "Right top", side: "left", align: "start" },
+  { label: "Right bottom", side: "left", align: "end" }
+];
+function TooltipPlacements({ size, variant }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-2 gap-3 sm:grid-cols-4", children: overlayPlacements.slice(0, 8).map(({ label, side, align }) => size === "lg" ? /* @__PURE__ */ jsx(TooltipCard, { title: t("design_system.gallery.samples.overlay.tooltip"), description: t("design_system.gallery.samples.overlay.description"), leading: /* @__PURE__ */ jsx(Globe, { className: "size-5" }), variant, side, align, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "justify-self-center", children: label }) }, label) : /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.samples.overlay.tooltip"), size, variant, side, align, delayDuration: 0, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "justify-self-center", children: label }) }, label)) });
+}
+function tooltipPlacementCode({ size, variant }) {
+  const component = size === "lg" ? "TooltipCard" : "SimpleTooltip";
+  return `import { ${component} } from '@open-mercato/ui/primitives/tooltip'
+import { Button } from '@open-mercato/ui/primitives/button'
+${size === "lg" ? "import { Globe } from 'lucide-react'\n" : ""}
+// Figma's arrow edge is opposite Radix's content side. Collision handling stays enabled.
+<div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-4">
+${overlayPlacements.slice(0, 8).map(({ label, side, align }) => `  <${component} ${size === "lg" ? 'title="Workspace settings" description="Choose how these changes apply to your workspace." leading={<Globe className="size-5" />}' : `content="Workspace settings" size="${size}"`} variant="${variant}" side="${side}" align="${align}"${size === "lg" ? "" : " delayDuration={0}"}>
+    <Button variant="outline" size="sm" className="justify-self-center">${label}</Button>
+  </${component}>`).join("\n")}
+</div>`;
+}
+function PopoverExample({ placements = false, footer = "equal" }) {
+  const t = useT();
+  const [step, setStep] = React.useState(0);
+  const options = placements ? overlayPlacements : [overlayPlacements[0]];
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full grid-cols-2 gap-3 sm:grid-cols-4", children: options.map(({ label, side, align }) => /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "justify-self-center", children: placements ? label : t("design_system.gallery.samples.overlay.openPopover") }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { side, align, sideOffset: 6, role: "dialog", "aria-label": t("design_system.gallery.samples.overlay.title"), className: "w-[312px] max-w-[calc(100vw-24px)] min-w-0 overflow-visible rounded-xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-5 pb-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("design_system.gallery.samples.overlay.title") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.samples.overlay.description") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 px-5 py-4", children: [
+        footer === "stepper" ? /* @__PURE__ */ jsx(StepperDots, { count: 3, activeStep: step, size: "sm", "aria-label": t("design_system.gallery.samples.overlay.steps") }) : null,
+        footer === "text" ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          step + 1,
+          " / 3"
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: footer === "equal" ? "flex w-full gap-3 [&>*]:flex-1" : "ml-auto flex gap-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: step === 0, onClick: () => setStep((previous) => Math.max(0, previous - 1)), children: t("design_system.gallery.samples.overlay.back") }),
+          step === 2 ? /* @__PURE__ */ jsx(PopoverClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "primary-filled", size: "sm", children: t("design_system.gallery.samples.overlay.done") }) }) : /* @__PURE__ */ jsx(Button, { variant: "primary-filled", size: "sm", onClick: () => setStep((previous) => Math.min(2, previous + 1)), children: t("design_system.gallery.samples.overlay.next") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(PopoverArrow, {})
+    ] })
+  ] }, label)) });
+}
+function popoverExampleCode(footer) {
+  return `import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverClose } from '@open-mercato/ui/primitives/popover'
+${footer === "stepper" ? "import { StepperDots } from '@open-mercato/ui/primitives/step-indicator'\n" : ""}
+function Example() {
+  const [step, setStep] = React.useState(0)
+  return <Popover>
+    <PopoverTrigger asChild><Button variant="outline">Open popover</Button></PopoverTrigger>
+    <PopoverContent side="bottom" align="start" sideOffset={6} role="dialog" aria-label="Workspace settings" className="w-[312px] max-w-[calc(100vw-24px)] min-w-0 rounded-xl">
+      <div className="space-y-1 p-5 pb-0"><p className="text-sm font-medium">Workspace settings</p><p className="text-sm text-muted-foreground">Choose how these changes apply to your workspace.</p></div>
+      <div className="flex flex-wrap items-center gap-3 px-5 py-4">
+        ${footer === "stepper" ? '<StepperDots count={3} activeStep={step} size="sm" aria-label="Progress" />' : footer === "text" ? '<span className="text-xs text-muted-foreground">{step + 1} / 3</span>' : ""}
+        <div className="${footer === "equal" ? "flex w-full gap-3 [&>*]:flex-1" : "ml-auto flex gap-3"}">
+          <Button variant="outline" size="sm" disabled={step === 0} onClick={() => setStep(value => value - 1)}>Back</Button>
+          {step === 2 ? <PopoverClose asChild><Button variant="primary-filled" size="sm">Done</Button></PopoverClose> : <Button variant="primary-filled" size="sm" onClick={() => setStep(value => value + 1)}>Next</Button>}
+        </div>
+      </div>
+      <PopoverArrow />
+    </PopoverContent>
+  </Popover>
+}`;
+}
+const dialogExamples = [
+  {
+    "id": "header-small-basic",
+    "title": "Header / small / basic",
+    "header": "basic",
+    "compact": true
+  },
+  {
+    "id": "header-small-default",
+    "title": "Header / small / default",
+    "header": "default",
+    "compact": true
+  },
+  {
+    "id": "header-small-error",
+    "title": "Header / small / error",
+    "header": "error",
+    "compact": true
+  },
+  {
+    "id": "header-small-warning",
+    "title": "Header / small / warning",
+    "header": "warning",
+    "compact": true
+  },
+  {
+    "id": "header-small-success",
+    "title": "Header / small / success",
+    "header": "success",
+    "compact": true
+  },
+  {
+    "id": "header-small-info",
+    "title": "Header / small / info",
+    "header": "info",
+    "compact": true
+  },
+  {
+    "id": "header-medium-basic",
+    "title": "Header / medium / basic",
+    "header": "basic",
+    "compact": false
+  },
+  {
+    "id": "header-medium-default",
+    "title": "Header / medium / default",
+    "header": "default",
+    "compact": false
+  },
+  {
+    "id": "header-medium-error",
+    "title": "Header / medium / error",
+    "header": "error",
+    "compact": false
+  },
+  {
+    "id": "header-medium-warning",
+    "title": "Header / medium / warning",
+    "header": "warning",
+    "compact": false
+  },
+  {
+    "id": "header-medium-success",
+    "title": "Header / medium / success",
+    "header": "success",
+    "compact": false
+  },
+  {
+    "id": "header-medium-info",
+    "title": "Header / medium / info",
+    "header": "info",
+    "compact": false
+  },
+  {
+    "id": "footer-basic",
+    "title": "Footer / basic",
+    "footer": "basic"
+  },
+  {
+    "id": "footer-equal",
+    "title": "Footer / equal",
+    "footer": "equal"
+  },
+  {
+    "id": "footer-checkbox",
+    "title": "Footer / checkbox",
+    "footer": "checkbox"
+  },
+  {
+    "id": "footer-information",
+    "title": "Footer / information",
+    "footer": "information"
+  },
+  {
+    "id": "footer-toggle",
+    "title": "Footer / toggle",
+    "footer": "toggle"
+  },
+  {
+    "id": "footer-stepper",
+    "title": "Footer / stepper",
+    "footer": "stepper"
+  },
+  {
+    "id": "footer-link",
+    "title": "Footer / link",
+    "footer": "link"
+  },
+  {
+    "id": "status-horizontal-error",
+    "title": "Status / horizontal / error",
+    "header": "error",
+    "alignment": "horizontal",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-horizontal-warning",
+    "title": "Status / horizontal / warning",
+    "header": "warning",
+    "alignment": "horizontal",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-horizontal-success",
+    "title": "Status / horizontal / success",
+    "header": "success",
+    "alignment": "horizontal",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-horizontal-info",
+    "title": "Status / horizontal / info",
+    "header": "info",
+    "alignment": "horizontal",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-vertical-error",
+    "title": "Status / vertical / error",
+    "header": "error",
+    "alignment": "vertical",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-vertical-warning",
+    "title": "Status / vertical / warning",
+    "header": "warning",
+    "alignment": "vertical",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-vertical-success",
+    "title": "Status / vertical / success",
+    "header": "success",
+    "alignment": "vertical",
+    "status": true,
+    "footer": "checkbox"
+  },
+  {
+    "id": "status-vertical-info",
+    "title": "Status / vertical / info",
+    "header": "info",
+    "alignment": "vertical",
+    "status": true,
+    "footer": "checkbox"
+  }
+];
+const drawerExamples = [
+  {
+    "id": "header-small-basic",
+    "title": "Header / small / basic",
+    "header": "basic",
+    "compact": true
+  },
+  {
+    "id": "header-small-default",
+    "title": "Header / small / default",
+    "header": "default",
+    "compact": true
+  },
+  {
+    "id": "header-large-basic",
+    "title": "Header / large / basic",
+    "header": "basic",
+    "compact": false
+  },
+  {
+    "id": "header-large-default",
+    "title": "Header / large / default",
+    "header": "default",
+    "compact": false
+  },
+  {
+    "id": "footer-equal",
+    "title": "Footer / equal",
+    "footer": "equal"
+  },
+  {
+    "id": "footer-basic",
+    "title": "Footer / basic",
+    "footer": "basic"
+  },
+  {
+    "id": "footer-checkbox",
+    "title": "Footer / checkbox",
+    "footer": "checkbox"
+  },
+  {
+    "id": "footer-toggle",
+    "title": "Footer / toggle",
+    "footer": "toggle"
+  },
+  {
+    "id": "footer-stepper",
+    "title": "Footer / stepper",
+    "footer": "stepper"
+  },
+  {
+    "id": "footer-link",
+    "title": "Footer / link",
+    "footer": "link"
+  }
+];
 const dialogEntry = {
   id: "dialog",
+  figmaNodeId: "466:4778",
   title: "Dialog",
   importPath: "@open-mercato/ui/primitives/dialog",
   docsAnchor: "#dialog",
   variants: [
+    ...dialogExamples.map((example) => ({
+      id: example.id,
+      title: example.title,
+      render: () => /* @__PURE__ */ jsx(DialogExample, { ...example }),
+      code: overlayExampleCode("Dialog", example)
+    })),
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(Dialog, { children: [
-        /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open dialog" }) }),
-        /* @__PURE__ */ jsxs(DialogContent, { children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { children: [
-            /* @__PURE__ */ jsx(DialogTitle, { children: "Rename view" }),
-            /* @__PURE__ */ jsx(DialogDescription, { children: "The new name is visible to everyone in this workspace." })
-          ] }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Press Escape or click outside to dismiss." }),
-          /* @__PURE__ */ jsxs(DialogFooter, { children: [
-            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }),
-            /* @__PURE__ */ jsx(Button, { children: "Save changes" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(DialogOverlaysDefaultSample, {}),
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Dialog,
@@ -115,19 +503,7 @@ import {
     {
       id: "status-leading",
       title: "Status leading badge",
-      render: () => /* @__PURE__ */ jsxs(Dialog, { children: [
-        /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "destructive-outline", children: "Delete record" }) }),
-        /* @__PURE__ */ jsxs(DialogContent, { size: "sm", children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { leading: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }), leadingTone: "error", children: [
-            /* @__PURE__ */ jsx(DialogTitle, { children: "Delete this record?" }),
-            /* @__PURE__ */ jsx(DialogDescription, { children: "This removes the record from every linked view." })
-          ] }),
-          /* @__PURE__ */ jsxs(DialogFooter, { layout: "equal", children: [
-            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }),
-            /* @__PURE__ */ jsx(Button, { variant: "destructive-solid", children: "Delete" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(DialogOverlaysStatusLeadingSample, {}),
       code: `import { TriangleAlert } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import {
@@ -170,36 +546,16 @@ const drawerEntry = {
   docsAnchor: "#drawer",
   figmaNodeId: "486:7366",
   variants: [
+    ...drawerExamples.map((example) => ({
+      id: example.id,
+      title: example.title,
+      render: () => /* @__PURE__ */ jsx(DrawerExample, { ...example }),
+      code: overlayExampleCode("Drawer", example)
+    })),
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(Drawer, { children: [
-        /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open drawer" }) }),
-        /* @__PURE__ */ jsxs(DrawerContent, { children: [
-          /* @__PURE__ */ jsxs(DrawerHeader, { children: [
-            /* @__PURE__ */ jsx(DrawerTitle, { children: "Edit person" }),
-            /* @__PURE__ */ jsx(DrawerDescription, { children: "Update the contact details below." })
-          ] }),
-          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-input text-sm", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Name" }),
-              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Anna Kowalska" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Role" }),
-              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Account manager" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Team" }),
-              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Sales EU" })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxs(DrawerFooter, { layout: "equal", children: [
-            /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }),
-            /* @__PURE__ */ jsx(Button, { children: "Save changes" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(DrawerOverlaysDefaultSample, {}),
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Drawer,
@@ -235,24 +591,7 @@ import {
     {
       id: "leading-icon",
       title: "Header leading icon",
-      render: () => /* @__PURE__ */ jsxs(Drawer, { children: [
-        /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open profile drawer" }) }),
-        /* @__PURE__ */ jsxs(DrawerContent, { children: [
-          /* @__PURE__ */ jsxs(DrawerHeader, { leading: /* @__PURE__ */ jsx(UserRound, { className: "size-4" }), children: [
-            /* @__PURE__ */ jsx(DrawerTitle, { children: "Profile details" }),
-            /* @__PURE__ */ jsx(DrawerDescription, { children: "Read-only summary of this account." })
-          ] }),
-          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-            "The header badge takes any Lucide icon via the ",
-            /* @__PURE__ */ jsx("code", { children: "leading" }),
-            " prop."
-          ] }) }),
-          /* @__PURE__ */ jsxs(DrawerFooter, { layout: "equal", children: [
-            /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }),
-            /* @__PURE__ */ jsx(Button, { children: "Continue" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(DrawerOverlaysLeadingIconSample, {}),
       code: `import { UserRound } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import {
@@ -296,20 +635,7 @@ const sheetEntry = {
     {
       id: "right",
       title: "right (default)",
-      render: () => /* @__PURE__ */ jsxs(Sheet, { children: [
-        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open sheet" }) }),
-        /* @__PURE__ */ jsxs(SheetContent, { children: [
-          /* @__PURE__ */ jsxs(SheetHeader, { children: [
-            /* @__PURE__ */ jsx(SheetTitle, { children: "Filters" }),
-            /* @__PURE__ */ jsx(SheetDescription, { children: "Narrow down the current list." })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 text-sm text-muted-foreground", children: "Sheet body content scrolls independently of the header and footer." }),
-          /* @__PURE__ */ jsxs(SheetFooter, { children: [
-            /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Reset" }),
-            /* @__PURE__ */ jsx(Button, { children: "Apply" })
-          ] })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SheetOverlaysRightSample, {}),
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Sheet,
@@ -341,16 +667,7 @@ import {
     {
       id: "left",
       title: 'side="left"',
-      render: () => /* @__PURE__ */ jsxs(Sheet, { children: [
-        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open left sheet" }) }),
-        /* @__PURE__ */ jsxs(SheetContent, { side: "left", children: [
-          /* @__PURE__ */ jsxs(SheetHeader, { children: [
-            /* @__PURE__ */ jsx(SheetTitle, { children: "Navigation" }),
-            /* @__PURE__ */ jsx(SheetDescription, { children: "Slides in from the left edge." })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 text-sm text-muted-foreground", children: "Use the left side for mobile menus and secondary navigation." })
-        ] })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(SheetOverlaysLeftSample, {}),
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Sheet,
@@ -378,19 +695,18 @@ import {
 };
 const popoverEntry = {
   id: "popover",
+  figmaNodeId: "4431:81573",
   title: "Popover",
   importPath: "@open-mercato/ui/primitives/popover",
   variants: [
+    { id: "positions", title: "12 arrow positions", render: () => /* @__PURE__ */ jsx(PopoverExample, { placements: true }), code: popoverExampleCode("equal") + "\n\n// Source arrow edge \u2192 content side / alignment\n" + overlayPlacements.map((item) => `// ${item.label} \u2192 side="${item.side}" align="${item.align}"`).join("\n") },
+    { id: "footer-equal", title: "Footer / equal", render: () => /* @__PURE__ */ jsx(PopoverExample, { footer: "equal" }), code: popoverExampleCode("equal") },
+    { id: "footer-text", title: "Footer / text", render: () => /* @__PURE__ */ jsx(PopoverExample, { footer: "text" }), code: popoverExampleCode("text") },
+    { id: "footer-stepper", title: "Footer / stepper", render: () => /* @__PURE__ */ jsx(PopoverExample, { footer: "stepper" }), code: popoverExampleCode("stepper") },
     {
       id: "default",
       title: "default",
-      render: () => /* @__PURE__ */ jsxs(Popover, { children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open popover" }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Display density" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Anchored to its trigger; Escape and outside-click dismiss it." })
-        ] }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(PopoverOverlaysDefaultSample, {}),
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Popover,
@@ -410,10 +726,7 @@ import {
     {
       id: "align-end",
       title: 'align="end" + side="top"',
-      render: () => /* @__PURE__ */ jsxs(Popover, { children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open above" }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: "end", className: "p-4", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Placement follows Radix side/align props and flips when space runs out." }) })
-      ] }),
+      render: () => /* @__PURE__ */ jsx(PopoverOverlaysAlignEndSample, {}),
       code: `import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Popover,
@@ -434,15 +747,22 @@ import {
 };
 const tooltipEntry = {
   id: "tooltip",
+  figmaNodeId: "2604:269",
   title: "Tooltip",
   importPath: "@open-mercato/ui/primitives/tooltip",
   docsAnchor: "#tooltip--simpletooltip",
   variants: [
+    { id: "positions-sm-light", title: "8 positions / sm / light", render: () => /* @__PURE__ */ jsx(TooltipPlacements, { size: "sm", variant: "light" }), code: tooltipPlacementCode({ size: "sm", variant: "light" }) },
+    { id: "positions-sm-dark", title: "8 positions / sm / dark", render: () => /* @__PURE__ */ jsx(TooltipPlacements, { size: "sm", variant: "dark" }), code: tooltipPlacementCode({ size: "sm", variant: "dark" }) },
+    { id: "positions-default-light", title: "8 positions / default / light", render: () => /* @__PURE__ */ jsx(TooltipPlacements, { size: "default", variant: "light" }), code: tooltipPlacementCode({ size: "default", variant: "light" }) },
+    { id: "positions-default-dark", title: "8 positions / default / dark", render: () => /* @__PURE__ */ jsx(TooltipPlacements, { size: "default", variant: "dark" }), code: tooltipPlacementCode({ size: "default", variant: "dark" }) },
+    { id: "positions-lg-light", title: "8 positions / lg / light", render: () => /* @__PURE__ */ jsx(TooltipPlacements, { size: "lg", variant: "light" }), code: tooltipPlacementCode({ size: "lg", variant: "light" }) },
+    { id: "positions-lg-dark", title: "8 positions / lg / dark", render: () => /* @__PURE__ */ jsx(TooltipPlacements, { size: "lg", variant: "dark" }), code: tooltipPlacementCode({ size: "lg", variant: "dark" }) },
     {
       id: "default",
       title: "default (dark)",
-      render: () => /* @__PURE__ */ jsx(SimpleTooltip, { content: "Duplicates this view with all filters", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Hover me" }) }),
-      code: `import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+      render: () => /* @__PURE__ */ jsx(TooltipOverlaysDefaultSample, {}),
+      code: `import { SimpleTooltip, TooltipCard } from '@open-mercato/ui/primitives/tooltip'
 import { Button } from '@open-mercato/ui/primitives/button'
 
 <SimpleTooltip content="Duplicates this view with all filters">
@@ -452,12 +772,9 @@ import { Button } from '@open-mercato/ui/primitives/button'
     {
       id: "light",
       title: "light",
-      render: () => /* @__PURE__ */ jsx(SimpleTooltip, { content: "Help text on a light surface", variant: "light", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
-        /* @__PURE__ */ jsx(Info, {}),
-        "Light variant"
-      ] }) }),
+      render: () => /* @__PURE__ */ jsx(TooltipOverlaysLightSample, {}),
       code: `import { Info } from 'lucide-react'
-import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+import { SimpleTooltip, TooltipCard } from '@open-mercato/ui/primitives/tooltip'
 import { Button } from '@open-mercato/ui/primitives/button'
 
 <SimpleTooltip content="Help text on a light surface" variant="light">
@@ -467,12 +784,8 @@ import { Button } from '@open-mercato/ui/primitives/button'
     {
       id: "sizes",
       title: "Sizes",
-      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(SimpleTooltip, { content: "Small", size: "sm", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "sm" }) }),
-        /* @__PURE__ */ jsx(SimpleTooltip, { content: "Default", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "default" }) }),
-        /* @__PURE__ */ jsx(SimpleTooltip, { content: "Large tooltip for longer helper copy", size: "lg", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "lg" }) })
-      ] }),
-      code: `import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+      render: () => /* @__PURE__ */ jsx(TooltipOverlaysSizesSample, {}),
+      code: `import { SimpleTooltip, TooltipCard } from '@open-mercato/ui/primitives/tooltip'
 import { Button } from '@open-mercato/ui/primitives/button'
 
 <SimpleTooltip content="Small" size="sm">
@@ -489,77 +802,20 @@ import { Button } from '@open-mercato/ui/primitives/button'
 };
 const commandMenuEntry = {
   id: "command-menu",
+  figmaNodeId: "4171:15653",
   title: "CommandMenu",
   importPath: "@open-mercato/ui/primitives/command-menu",
   docsAnchor: "#commandmenu",
+  usage: { do: [
+    "The source Small (48) label is inaccurate: all six small rows measure 40 px. The larger rows measure 64 px. Numeric sizes opt into these measurements; unsized rows keep the legacy layout.",
+    "Basic, Avatar, Left Icon, Brand, Company and Country use real source assets or production primitives. Keyboard selection updates the result and closes the palette.",
+    "Search and clear stay synchronized. Group captions and actions flow together without overlapping long headings; the footer includes real keyboard hints and a local help action."
+  ] },
   variants: [
-    {
-      id: "default",
-      title: "default",
-      render: () => /* @__PURE__ */ jsxs(CommandMenu, { children: [
-        /* @__PURE__ */ jsx(CommandMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open command menu" }) }),
-        /* @__PURE__ */ jsxs(CommandMenuContent, { children: [
-          /* @__PURE__ */ jsx(CommandMenuInput, { placeholder: "Search actions..." }),
-          /* @__PURE__ */ jsxs(CommandMenuList, { children: [
-            /* @__PURE__ */ jsx(CommandMenuEmpty, { children: "No results." }),
-            /* @__PURE__ */ jsxs(CommandMenuGroup, { heading: "Actions", children: [
-              /* @__PURE__ */ jsx(CommandMenuItem, { leading: /* @__PURE__ */ jsx(FilePlus2, { className: "size-4 text-muted-foreground" }), children: "Create record" }),
-              /* @__PURE__ */ jsx(CommandMenuItem, { leading: /* @__PURE__ */ jsx(Users, { className: "size-4 text-muted-foreground" }), description: "Invite teammates to this workspace", children: "Manage members" })
-            ] }),
-            /* @__PURE__ */ jsx(CommandMenuSeparator, {}),
-            /* @__PURE__ */ jsxs(CommandMenuGroup, { heading: "Navigate", children: [
-              /* @__PURE__ */ jsx(CommandMenuItem, { leading: /* @__PURE__ */ jsx(LayoutDashboard, { className: "size-4 text-muted-foreground" }), children: "Go to dashboard" }),
-              /* @__PURE__ */ jsx(CommandMenuItem, { leading: /* @__PURE__ */ jsx(Settings, { className: "size-4 text-muted-foreground" }), children: "Open settings" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CommandMenuFooter, {})
-        ] })
-      ] }),
-      code: `import { FilePlus2, LayoutDashboard, Settings, Users } from 'lucide-react'
-import { Button } from '@open-mercato/ui/primitives/button'
-import {
-  CommandMenu,
-  CommandMenuTrigger,
-  CommandMenuContent,
-  CommandMenuInput,
-  CommandMenuList,
-  CommandMenuEmpty,
-  CommandMenuGroup,
-  CommandMenuItem,
-  CommandMenuSeparator,
-  CommandMenuFooter,
-} from '@open-mercato/ui/primitives/command-menu'
-
-<CommandMenu>
-  <CommandMenuTrigger asChild>
-    <Button variant="outline">Open command menu</Button>
-  </CommandMenuTrigger>
-  <CommandMenuContent>
-    <CommandMenuInput placeholder="Search actions..." />
-    <CommandMenuList>
-      <CommandMenuEmpty>No results.</CommandMenuEmpty>
-      <CommandMenuGroup heading="Actions">
-        <CommandMenuItem leading={<FilePlus2 className="size-4" />}>
-          Create record
-        </CommandMenuItem>
-        <CommandMenuItem leading={<Users className="size-4" />} description="Invite teammates to this workspace">
-          Manage members
-        </CommandMenuItem>
-      </CommandMenuGroup>
-      <CommandMenuSeparator />
-      <CommandMenuGroup heading="Navigate">
-        <CommandMenuItem leading={<LayoutDashboard className="size-4" />}>
-          Go to dashboard
-        </CommandMenuItem>
-        <CommandMenuItem leading={<Settings className="size-4" />}>
-          Open settings
-        </CommandMenuItem>
-      </CommandMenuGroup>
-    </CommandMenuList>
-    <CommandMenuFooter />
-  </CommandMenuContent>
-</CommandMenu>`
-    }
+    { id: "default", title: "All six types / 40 px", render: () => /* @__PURE__ */ jsx(CommandSourceExample, {}), code: commandSourceCode + "\n<CommandSourceExample size={40} />" },
+    { id: "medium", title: "All six types / 64 px", render: () => /* @__PURE__ */ jsx(CommandSourceExample, { size: 64 }), code: commandSourceCode + "\n<CommandSourceExample size={64} />" },
+    { id: "groups", title: "Captions / action / separator / footer", render: () => /* @__PURE__ */ jsx(CommandSourceExample, { withGroups: true }), code: commandSourceCode + "\n<CommandSourceExample withGroups />" },
+    { id: "empty", title: "No results / clear to recover", render: () => /* @__PURE__ */ jsx(CommandSourceExample, { empty: true }), code: commandSourceCode + "\n<CommandSourceExample empty />" }
   ]
 };
 const entries = [
@@ -570,6 +826,158 @@ const entries = [
   tooltipEntry,
   commandMenuEntry
 ];
+function DialogOverlaysDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.openDialog") }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t("design_system.gallery.sampleCopy.renameView") }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t("design_system.gallery.sampleCopy.theNewNameIsVisibleToEveryoneInThisWorkspace") })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.pressEscapeOrClickOutsideToDismiss") }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.cancel") }) }),
+        /* @__PURE__ */ jsx(Button, { children: t("design_system.gallery.samples.primaryAction") })
+      ] })
+    ] })
+  ] });
+}
+function DialogOverlaysStatusLeadingSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "destructive-outline", children: t("design_system.gallery.sampleCopy.deleteRecord") }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { size: "sm", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { leading: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }), leadingTone: "error", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t("design_system.gallery.sampleCopy.deleteThisRecord") }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t("design_system.gallery.sampleCopy.thisRemovesTheRecordFromEveryLinkedView") })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { layout: "equal", children: [
+        /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.cancel") }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "destructive-solid", children: t("design_system.gallery.sampleCopy.delete") })
+      ] })
+    ] })
+  ] });
+}
+function DrawerOverlaysDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Drawer, { children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.openDrawer") }) }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { children: t("design_system.gallery.sampleCopy.editPerson") }),
+        /* @__PURE__ */ jsx(DrawerDescription, { children: t("design_system.gallery.sampleCopy.updateTheContactDetailsBelow") })
+      ] }),
+      /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-input text-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("design_system.gallery.samples.textInput.basic") }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "Anna Kowalska" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("design_system.gallery.sampleCopy.role") }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: t("design_system.gallery.samples.table.description") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("design_system.gallery.samples.hr.team") }),
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: t("design_system.gallery.sampleCopy.salesEU") })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DrawerFooter, { layout: "equal", children: [
+        /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.cancel") }) }),
+        /* @__PURE__ */ jsx(Button, { children: t("design_system.gallery.samples.primaryAction") })
+      ] })
+    ] })
+  ] });
+}
+function DrawerOverlaysLeadingIconSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Drawer, { children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.openProfileDrawer") }) }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { leading: /* @__PURE__ */ jsx(UserRound, { className: "size-4" }), children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { children: t("design_system.gallery.sampleCopy.profileDetails") }),
+        /* @__PURE__ */ jsx(DrawerDescription, { children: t("design_system.gallery.sampleCopy.readonlySummaryOfThisAccount") })
+      ] }),
+      /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        t("design_system.gallery.sampleCopy.theHeaderBadgeTakesAnyLucideIconViaThe"),
+        " ",
+        /* @__PURE__ */ jsx("code", { children: "leading" }),
+        " ",
+        t("design_system.gallery.sampleCopy.prop")
+      ] }) }),
+      /* @__PURE__ */ jsxs(DrawerFooter, { layout: "equal", children: [
+        /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.cancel") }) }),
+        /* @__PURE__ */ jsx(Button, { children: t("design_system.gallery.samples.overlay.continue") })
+      ] })
+    ] })
+  ] });
+}
+function SheetOverlaysRightSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Sheet, { children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.openSheet") }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsx(SheetTitle, { children: t("design_system.families.filters") }),
+        /* @__PURE__ */ jsx(SheetDescription, { children: t("design_system.gallery.sampleCopy.narrowDownTheCurrentList") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.sheetBodyContentScrollsIndependentlyOfTheHeaderAndFooter") }),
+      /* @__PURE__ */ jsxs(SheetFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.reset") }),
+        /* @__PURE__ */ jsx(Button, { children: t("design_system.gallery.examples.sourceFilters.apply") })
+      ] })
+    ] })
+  ] });
+}
+function SheetOverlaysLeftSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Sheet, { children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.openLeftSheet") }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "left", children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsx(SheetTitle, { children: t("design_system.families.navigation") }),
+        /* @__PURE__ */ jsx(SheetDescription, { children: t("design_system.gallery.sampleCopy.slidesInFromTheLeftEdge") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.useTheLeftSideForMobileMenusAndSecondaryNavigation") })
+    ] })
+  ] });
+}
+function PopoverOverlaysDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.samples.overlay.openPopover") }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: t("design_system.gallery.sampleCopy.displayDensity") }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.anchoredToItsTriggerEscapeAndOutsideclickDismissIt") })
+    ] }) })
+  ] });
+}
+function PopoverOverlaysAlignEndSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.openAbove") }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: "end", className: "p-4", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("design_system.gallery.sampleCopy.placementFollowsRadixSidealignPropsAndFlipsWhenSpaceRuns") }) })
+  ] });
+}
+function TooltipOverlaysDefaultSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.sampleCopy.duplicatesThisViewWithAllFilters"), children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("design_system.gallery.sampleCopy.hoverMe") }) });
+}
+function TooltipOverlaysLightSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.sampleCopy.helpTextOnALightSurface"), variant: "light", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+    /* @__PURE__ */ jsx(Info, {}),
+    t("design_system.gallery.sampleCopy.lightVariant")
+  ] }) });
+}
+function TooltipOverlaysSizesSample() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.sampleCopy.small"), size: "sm", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "sm" }) }),
+    /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.examples.aiProduct.default"), children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "default" }) }),
+    /* @__PURE__ */ jsx(SimpleTooltip, { content: t("design_system.gallery.sampleCopy.largeTooltipForLongerHelperCopy"), size: "lg", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "lg" }) })
+  ] });
+}
 export {
   entries
 };