@hoardodile/ui 0.0.0

package/dist/components/section-tabs.js

@@ -0,0 +1,145 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { useId, useRef, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var TRIGGER_CLASSES = "relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-none border-0 bg-transparent px-0.5 pt-1 pb-3 text-xs font-semibold uppercase tracking-[0.1em] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 after:absolute after:inset-x-0 after:-bottom-[2px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity";
+function triggerClassName(active) {
+  return cn(TRIGGER_CLASSES, active && "text-foreground after:opacity-100");
+}
+function SectionTabs(props) {
+  const {
+    value,
+    items,
+    onChange,
+    className,
+    panelClassName,
+    listClassName,
+    controls,
+    ariaLabel
+  } = props;
+  const baseId = useId();
+  const listRef = useRef(null);
+  const activeIndex = items.findIndex((item) => item.value === value);
+  const activeItem = activeIndex >= 0 ? items[activeIndex] : void 0;
+  function activate(next) {
+    if (next !== value) onChange?.(next);
+  }
+  function focusTriggerAt(index) {
+    const trigger = listRef.current?.querySelectorAll('[role="tab"]')[index];
+    trigger?.focus();
+  }
+  function handleKeyDown(event) {
+    const from = activeIndex < 0 ? 0 : activeIndex;
+    const count = items.length;
+    let nextIndex;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (from + 1) % count;
+        break;
+      case "ArrowLeft":
+        nextIndex = (from - 1 + count) % count;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = count - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const next = items[nextIndex];
+    if (next === void 0) return;
+    activate(next.value);
+    focusTriggerAt(nextIndex);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: listRef,
+          role: "tablist",
+          "aria-label": ariaLabel,
+          className: cn(
+            // The 2px strong edge is an inset shadow over the bottom
+            // padding zone: the active underline (positioned 2px
+            // below the trigger) lands inside the padding box —
+            // a border would be outside it and get clipped by the
+            // scroll list's overflow-y-hidden. The color reads the
+            // runtime palette variable directly (what border-border
+            // compiles to), not the @theme mirror — the mirror
+            // lives in a cascade layer and is not reliable here.
+            "flex min-w-0 flex-1 items-center gap-6 overflow-x-auto overflow-y-hidden no-scrollbar pb-0.5 shadow-[inset_0_-2px_0_0_var(--border)]",
+            listClassName
+          ),
+          children: items.map((item, index) => {
+            const active = item.value === value;
+            const triggerProps = {
+              id: `${baseId}-tab-${index}`,
+              role: "tab",
+              tabIndex: active ? 0 : -1,
+              "aria-selected": active,
+              "aria-controls": item.panel !== void 0 ? `${baseId}-panel-${index}` : void 0,
+              "data-testid": item.testId,
+              onKeyDown: handleKeyDown
+            };
+            if (item.render !== void 0) {
+              return /* @__PURE__ */ jsx(Fragment, { children: item.render(active, triggerClassName(active), triggerProps) }, item.value);
+            }
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                ...triggerProps,
+                onClick: () => activate(item.value),
+                className: triggerClassName(active),
+                children: item.label
+              },
+              item.value
+            );
+          })
+        }
+      ),
+      controls
+    ] }),
+    activeItem?.panel !== void 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${baseId}-panel-${activeIndex}`,
+        "aria-labelledby": `${baseId}-tab-${activeIndex}`,
+        className: cn(
+          "flex-1 text-sm outline-none",
+          activeItem.panelClassName ?? panelClassName ?? "mt-4"
+        ),
+        children: activeItem.panel
+      }
+    ) : null
+  ] });
+}
+
+export { SectionTabs };
+//# sourceMappingURL=section-tabs.js.map
+//# sourceMappingURL=section-tabs.js.map

package/dist/components/section-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/section-tabs.tsx"],"names":[],"mappings":"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","file":"section-tabs.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import { cn } from \"@hoardodile/ui/lib/utils\"\nimport {\n\tFragment,\n\ttype KeyboardEvent,\n\ttype ReactNode,\n\tuseId,\n\tuseRef,\n} from \"react\"\n\nexport type SectionTabTriggerProps = {\n\treadonly id: string\n\treadonly role: \"tab\"\n\treadonly tabIndex: number\n\treadonly \"aria-selected\": boolean\n\treadonly \"aria-controls\": string | undefined\n\treadonly \"data-testid\": string | undefined\n\treadonly onKeyDown: (event: KeyboardEvent<HTMLElement>) => void\n}\n\nexport type SectionTabItem<T extends string> = {\n\treadonly value: T\n\treadonly label: ReactNode\n\treadonly testId?: string\n\t/** Replaces the trigger element (e.g. a router Link) — receives the\n\t    active state, the trigger classes and the ARIA/keyboard props to\n\t    spread onto the element. */\n\treadonly render?: (\n\t\tactive: boolean,\n\t\tclassName: string,\n\t\ttrigger: SectionTabTriggerProps,\n\t) => ReactNode\n\t/** Content panel; mounted only while the tab is active. */\n\treadonly panel?: ReactNode\n\t/** Panel wrapper classes, replacing the default `mt-4`. */\n\treadonly panelClassName?: string\n}\n\nexport type SectionTabsProps<T extends string> = {\n\treadonly value: T\n\treadonly items: readonly SectionTabItem<T>[]\n\treadonly onChange?: (value: T) => void\n\treadonly className?: string\n\treadonly panelClassName?: string\n\t/** Overrides for the tab bar itself (e.g. an indented side-panel bar). */\n\treadonly listClassName?: string\n\t/** Right-hand controls sharing the tab row (e.g. a sort toggle). */\n\treadonly controls?: ReactNode\n\treadonly ariaLabel?: string\n}\n\nconst TRIGGER_CLASSES =\n\t\"relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-none border-0 bg-transparent px-0.5 pt-1 pb-3 text-xs font-semibold uppercase tracking-[0.1em] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 after:absolute after:inset-x-0 after:-bottom-[2px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity\"\n\nfunction triggerClassName(active: boolean): string {\n\treturn cn(TRIGGER_CLASSES, active && \"text-foreground after:opacity-100\")\n}\n\n/**\n * Section-mode tab bar: uppercase 12px labels, a 2px underline on the\n * active tab over a 2px strong bottom edge, and a hidden horizontal\n * scrollbar on overflow. Standalone replacement for the shadcn tabs'\n * `section` variant — the group-data variant chains it leaned on were\n * too fragile to extend.\n */\nexport function SectionTabs<T extends string>(props: SectionTabsProps<T>) {\n\tconst {\n\t\tvalue,\n\t\titems,\n\t\tonChange,\n\t\tclassName,\n\t\tpanelClassName,\n\t\tlistClassName,\n\t\tcontrols,\n\t\tariaLabel,\n\t} = props\n\tconst baseId = useId()\n\tconst listRef = useRef<HTMLDivElement>(null)\n\n\tconst activeIndex = items.findIndex((item) => item.value === value)\n\tconst activeItem = activeIndex >= 0 ? items[activeIndex] : undefined\n\n\tfunction activate(next: T): void {\n\t\tif (next !== value) onChange?.(next)\n\t}\n\n\tfunction focusTriggerAt(index: number): void {\n\t\tconst trigger =\n\t\t\tlistRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[index]\n\t\ttrigger?.focus()\n\t}\n\n\tfunction handleKeyDown(event: KeyboardEvent<HTMLElement>): void {\n\t\tconst from = activeIndex < 0 ? 0 : activeIndex\n\t\tconst count = items.length\n\t\tlet nextIndex: number\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tnextIndex = (from + 1) % count\n\t\t\t\tbreak\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tnextIndex = (from - 1 + count) % count\n\t\t\t\tbreak\n\t\t\tcase \"Home\":\n\t\t\t\tnextIndex = 0\n\t\t\t\tbreak\n\t\t\tcase \"End\":\n\t\t\t\tnextIndex = count - 1\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\t\treturn\n\t\t}\n\t\tevent.preventDefault()\n\t\tconst next = items[nextIndex]\n\t\tif (next === undefined) return\n\t\tactivate(next.value)\n\t\tfocusTriggerAt(nextIndex)\n\t}\n\n\treturn (\n\t\t<div className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n\t\t\t<div className=\"flex items-center gap-6\">\n\t\t\t\t<div\n\t\t\t\t\tref={listRef}\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// The 2px strong edge is an inset shadow over the bottom\n\t\t\t\t\t\t// padding zone: the active underline (positioned 2px\n\t\t\t\t\t\t// below the trigger) lands inside the padding box —\n\t\t\t\t\t\t// a border would be outside it and get clipped by the\n\t\t\t\t\t\t// scroll list's overflow-y-hidden. The color reads the\n\t\t\t\t\t\t// runtime palette variable directly (what border-border\n\t\t\t\t\t\t// compiles to), not the @theme mirror — the mirror\n\t\t\t\t\t\t// lives in a cascade layer and is not reliable here.\n\t\t\t\t\t\t\"flex min-w-0 flex-1 items-center gap-6 overflow-x-auto overflow-y-hidden no-scrollbar pb-0.5 shadow-[inset_0_-2px_0_0_var(--border)]\",\n\t\t\t\t\t\tlistClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{items.map((item, index) => {\n\t\t\t\t\t\tconst active = item.value === value\n\t\t\t\t\t\tconst triggerProps: SectionTabTriggerProps = {\n\t\t\t\t\t\t\tid: `${baseId}-tab-${index}`,\n\t\t\t\t\t\t\trole: \"tab\",\n\t\t\t\t\t\t\ttabIndex: active ? 0 : -1,\n\t\t\t\t\t\t\t\"aria-selected\": active,\n\t\t\t\t\t\t\t\"aria-controls\":\n\t\t\t\t\t\t\t\titem.panel !== undefined\n\t\t\t\t\t\t\t\t\t? `${baseId}-panel-${index}`\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\"data-testid\": item.testId,\n\t\t\t\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (item.render !== undefined) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Fragment key={item.value}>\n\t\t\t\t\t\t\t\t\t{item.render(active, triggerClassName(active), triggerProps)}\n\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t{...triggerProps}\n\t\t\t\t\t\t\t\tonClick={() => activate(item.value)}\n\t\t\t\t\t\t\t\tclassName={triggerClassName(active)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t\t{controls}\n\t\t\t</div>\n\t\t\t{activeItem?.panel !== undefined ? (\n\t\t\t\t<div\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={`${baseId}-panel-${activeIndex}`}\n\t\t\t\t\taria-labelledby={`${baseId}-tab-${activeIndex}`}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex-1 text-sm outline-none\",\n\t\t\t\t\t\tactiveItem.panelClassName ?? panelClassName ?? \"mt-4\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{activeItem.panel}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t)\n}\n"]}

package/dist/components/separator.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+
+type SeparatorSize = "hairline" | "seam";
+/**
+ * Horizontal/vertical divider: hairlines are 1px and quiet; the 2px
+ * `seam` tier marks only structural seams (tab bars, panel sections,
+ * pinned action bars).
+ */
+declare function Separator({ className, orientation, size, ...props }: Separator$1.Props & {
+    readonly size?: SeparatorSize;
+}): React.JSX.Element;
+
+export { Separator, type SeparatorSize };

package/dist/components/separator.js

@@ -0,0 +1,49 @@
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/separator.tsx
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  size = "hairline",
+  ...props
+}) {
+  const thickness = size === "seam" ? "data-horizontal:h-0.5 data-vertical:w-0.5" : "data-horizontal:h-px data-vertical:w-px";
+  return /* @__PURE__ */ jsx(
+    Separator$1,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:w-full data-vertical:self-stretch",
+        thickness,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Separator };
+//# sourceMappingURL=separator.js.map
+//# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/separator.tsx"],"names":["SeparatorPrimitive"],"mappings":";;;;;;AAQO,IAAM,UAAA,GAAa;AAAA,EACzB,MAAM,CAAC,MAAA,EAAQ,MAAM,KAAA,EAAO,WAAA,EAAa,eAAe,OAAO,CAAA;AAAA,EAC/D,SAAS,CAAC,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,EACtD,QAAA,EAAU,CAAC,OAAO,CAAA;AAAA,EAClB,MAAA,EAAQ,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,EACzB,SAAA,EAAW,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,EAC1C,IAAA,EAAM,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,EACvB,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,OAAA,EAAS,CAAC,MAAA,EAAQ,KAAK;AACxB,CAAA;AAEO,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAC1C,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA;AAClB,CAAC,CAAA;;;AClBM,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACMA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,IAAA,GAAO,UAAA;AAAA,EACP,GAAG;AACL,CAAA,EAEG;AACD,EAAA,MAAM,SAAA,GACJ,IAAA,KAAS,MAAA,GACL,2CAAA,GACA,yCAAA;AACN,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,sEAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"separator.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@hoardodile/ui/lib/utils\"\n\nexport type SeparatorSize = \"hairline\" | \"seam\"\n\n/**\n * Horizontal/vertical divider: hairlines are 1px and quiet; the 2px\n * `seam` tier marks only structural seams (tab bars, panel sections,\n * pinned action bars).\n */\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  size = \"hairline\",\n  ...props\n}: SeparatorPrimitive.Props & {\n  readonly size?: SeparatorSize\n}) {\n  const thickness =\n    size === \"seam\"\n      ? \"data-horizontal:h-0.5 data-vertical:w-0.5\"\n      : \"data-horizontal:h-px data-vertical:w-px\"\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:w-full data-vertical:self-stretch\",\n        thickness,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n"]}

package/dist/components/sheet.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+
+declare function Sheet({ open, defaultOpen, onOpenChange, ...props }: Omit<Dialog.Root.Props, "onOpenChange"> & {
+    /**
+     * `eventDetails` is absent for closes triggered by the mobile back
+     * gesture (a synthetic close with no underlying Base UI event).
+     */
+    onOpenChange?: (open: boolean, eventDetails?: Dialog.Root.ChangeEventDetails) => void;
+}): React.JSX.Element;
+declare function SheetTrigger({ ...props }: Dialog.Trigger.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: Dialog.Close.Props): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: Dialog.Popup.Props & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };