@camox/ui 0.36.1 → 0.36.2

package/dist/components/kbd.js

@@ -0,0 +1,21 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/label.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/label.d.ts
+declare function Label({
+  className,
+  ...props
+}: React.ComponentProps<"label">): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/label.tsx
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+
+//#endregion
+export { Label };

package/dist/components/panel.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/panel.d.ts
+declare const Panel: ({
+  children,
+  className,
+  render,
+  ...props
+}: Omit<React.ComponentProps<"section">, "children"> & {
+  render?: React.ReactElement<{
+    className?: string;
+  }>;
+  children?: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const PanelHeader: ({
+  children,
+  className,
+  render,
+  ...props
+}: Omit<React.ComponentProps<"header">, "children"> & {
+  render?: React.ReactElement<{
+    className?: string;
+  }>;
+  children?: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const PanelTitle: ({
+  children,
+  className,
+  render,
+  ...props
+}: Omit<React.ComponentProps<"h3">, "children"> & {
+  render?: React.ReactElement<{
+    className?: string;
+  }>;
+  children?: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const PanelContent: ({
+  children,
+  className,
+  render,
+  ...props
+}: Omit<React.ComponentProps<"main">, "children"> & {
+  render?: React.ReactElement<{
+    className?: string;
+  }>;
+  children?: React.ReactNode;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Panel, PanelContent, PanelHeader, PanelTitle };

package/dist/components/panel.js

@@ -0,0 +1,56 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/panel.tsx
+const Panel = ({ children, className, render, ...props }) => {
+	if (render) return React.cloneElement(render, {
+		...props,
+		className: cn("flex flex-col bg-background border-2 border-border shadow-xl rounded-lg overflow-hidden", className, render.props.className),
+		children
+	});
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("flex flex-col bg-background border-2 border-border shadow-xl rounded-lg overflow-hidden", className),
+		...props,
+		children
+	});
+};
+const PanelHeader = ({ children, className, render, ...props }) => {
+	if (render) return React.cloneElement(render, {
+		...props,
+		className: cn("p-4 border-b-2 border-border", className, render.props.className),
+		children
+	});
+	return /* @__PURE__ */ jsx("header", {
+		className: cn("p-4 border-b-2 border-border", className),
+		...props,
+		children
+	});
+};
+const PanelTitle = ({ children, className, render, ...props }) => {
+	if (render) return React.cloneElement(render, {
+		...props,
+		className: cn("text-lg leading-none font-semibold", className, render.props.className),
+		children
+	});
+	return /* @__PURE__ */ jsx("h3", {
+		className: cn("text-lg leading-none font-semibold", className),
+		...props,
+		children
+	});
+};
+const PanelContent = ({ children, className, render, ...props }) => {
+	if (render) return React.cloneElement(render, {
+		...props,
+		className: cn("grow overflow-auto", className, render.props.className),
+		children
+	});
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("grow overflow-auto", className),
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Panel, PanelContent, PanelHeader, PanelTitle };

package/dist/components/popover.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+
+//#region src/components/popover.d.ts
+declare function Popover({
+  ...props
+}: Popover$1.Root.Props): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverTrigger({
+  ...props
+}: Popover$1.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverContent({
+  className,
+  align,
+  alignOffset,
+  side,
+  sideOffset,
+  anchor,
+  ...props
+}: Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor">): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverTitle({
+  className,
+  ...props
+}: Popover$1.Title.Props): _$react_jsx_runtime0.JSX.Element;
+declare function PopoverDescription({
+  className,
+  ...props
+}: Popover$1.Description.Props): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/components/popover.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+
+//#region src/components/popover.tsx
+function Popover({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		anchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function PopoverHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-1 text-sm", className),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
+
+//#endregion
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/components/select.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Select as Select$1 } from "@base-ui/react/select";
+
+//#region src/components/select.d.ts
+declare const Select: typeof Select$1.Root;
+declare function SelectGroup({
+  className,
+  ...props
+}: Select$1.Group.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SelectValue({
+  className,
+  ...props
+}: Select$1.Value.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SelectTrigger({
+  className,
+  size,
+  children,
+  ...props
+}: Select$1.Trigger.Props & {
+  size?: "sm" | "default";
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SelectContent({
+  className,
+  children,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  alignItemWithTrigger,
+  ...props
+}: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): _$react_jsx_runtime0.JSX.Element;
+declare function SelectLabel({
+  className,
+  ...props
+}: Select$1.GroupLabel.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SelectItem({
+  className,
+  children,
+  ...props
+}: Select$1.Item.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SelectSeparator({
+  className,
+  ...props
+}: Select$1.Separator.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof Select$1.ScrollUpArrow>): _$react_jsx_runtime0.JSX.Element;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof Select$1.ScrollDownArrow>): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/select.js

@@ -0,0 +1,99 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as Select$1 } from "@base-ui/react/select";
+
+//#region src/components/select.tsx
+const Select = Select$1.Root;
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Group, {
+		"data-slot": "select-group",
+		className: cn("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Value, {
+		"data-slot": "select-value",
+		className: cn("flex flex-1 text-left", className),
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" }) })]
+	});
+}
+function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select$1.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		"data-slot": "select-label",
+		className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		"data-slot": "select-item",
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Separator, {
+		"data-slot": "select-separator",
+		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+}
+
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/separator.d.ts

@@ -0,0 +1,11 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+
+//#region src/components/separator.d.ts
+declare function Separator({
+  className,
+  orientation,
+  ...props
+}: Separator$1.Props): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Separator };

package/dist/components/separator.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+
+//#region src/components/separator.tsx
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-slot": "separator",
+		orientation,
+		className: cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", className),
+		...props
+	});
+}
+
+//#endregion
+export { Separator };

package/dist/components/sheet.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/sheet.d.ts
+declare function Sheet({
+  ...props
+}: Dialog.Root.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SheetTrigger({
+  ...props
+}: Dialog.Trigger.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SheetClose({
+  ...props
+}: Dialog.Close.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SheetContent({
+  className,
+  children,
+  side,
+  showCloseButton,
+  showOverlay,
+  keepMounted,
+  ...props
+}: Dialog.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+  showOverlay?: boolean;
+  keepMounted?: boolean;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function SheetHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function SheetFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function SheetTitle({
+  className,
+  ...props
+}: Dialog.Title.Props): _$react_jsx_runtime0.JSX.Element;
+declare function SheetDescription({
+  className,
+  ...props
+}: Dialog.Description.Props): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/components/sheet.js

@@ -0,0 +1,93 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/components/sheet.tsx
+function Sheet({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+}
+function SheetTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+function SheetPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "sheet-overlay",
+		className: cn("fixed inset-0 z-50 bg-black/66 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+		...props
+	});
+}
+function SheetContent({ className, children, side = "right", showCloseButton = true, showOverlay = true, keepMounted = false, ...props }) {
+	return /* @__PURE__ */ jsxs(SheetPortal, {
+		keepMounted,
+		children: [showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			"data-slot": "sheet-content",
+			"data-side": side,
+			className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-300 ease-in-out data-open:duration-500 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
+			...props,
+			children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+				"data-slot": "sheet-close",
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					className: "absolute top-4 right-4",
+					size: "icon-sm"
+				}),
+				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})]
+	});
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-1.5 p-4", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: cn("font-medium text-foreground", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,9 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/skeleton.d.ts
+declare function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,14 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+
+//#endregion
+export { Skeleton };

package/dist/components/spinner.d.ts

@@ -0,0 +1,9 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/spinner.d.ts
+declare function Spinner({
+  className,
+  ...props
+}: React.ComponentProps<"svg">): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Spinner };

package/dist/components/spinner.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+
+//#region src/components/spinner.tsx
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+}
+
+//#endregion
+export { Spinner };

package/dist/components/switch.d.ts

@@ -0,0 +1,13 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+
+//#region src/components/switch.d.ts
+declare function Switch({
+  className,
+  size,
+  ...props
+}: Switch$1.Root.Props & {
+  size?: "sm" | "default";
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,20 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+
+//#region src/components/switch.tsx
+function Switch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+		})
+	});
+}
+
+//#endregion
+export { Switch };