@stll/ui 0.0.1-placeholder.0 → 0.2.0

package/dist/components/date-picker-popover.logic.js

@@ -0,0 +1,26 @@
+//#region src/components/date-picker-popover.logic.ts
+const DATE_ROLLOVER_EPSILON_MS = 50;
+const padDatePart = (value) => value.toString().padStart(2, "0");
+const localDateFromTimestamp = (timestamp) => {
+	const current = new Date(timestamp);
+	return [
+		current.getFullYear(),
+		padDatePart(current.getMonth() + 1),
+		padDatePart(current.getDate())
+	].join("-");
+};
+const calendarMonthFromDate = (date) => {
+	const current = /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+	return {
+		month: current.getUTCMonth(),
+		year: current.getUTCFullYear()
+	};
+};
+const resolveCalendarViewMonth = ({ override, today, value }) => override ?? calendarMonthFromDate(value || today);
+const millisecondsUntilNextLocalDate = (timestamp) => {
+	const current = new Date(timestamp);
+	const nextLocalDate = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+	return Math.max(0, nextLocalDate.getTime() - timestamp) + DATE_ROLLOVER_EPSILON_MS;
+};
+//#endregion
+export { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth };

package/dist/components/destructive-action-confirmation.d.ts

@@ -0,0 +1,21 @@
+import { InputProps } from "./input.js";
+import * as React$1 from "react";
+//#region src/components/destructive-action-confirmation.d.ts
+type DestructiveActionConfirmationProps = Omit<InputProps, "onChange" | "type" | "value"> & {
+  confirmation: string;
+  description?: React$1.ReactNode;
+  fieldClassName?: string;
+  inputClassName?: string;
+  label: React$1.ReactNode;
+  onValueChange: (value: string) => void;
+  value: string;
+};
+declare const DestructiveActionConfirmation: ({ className, confirmation, description, fieldClassName, inputClassName, label, onValueChange, value, ...props }: DestructiveActionConfirmationProps) => React$1.JSX.Element;
+declare function useDestructiveActionConfirmation(confirmation: string): {
+  confirmed: boolean;
+  onValueChange: React$1.Dispatch<React$1.SetStateAction<string>>;
+  reset: () => void;
+  value: string;
+};
+//#endregion
+export { DestructiveActionConfirmation, useDestructiveActionConfirmation };

package/dist/components/destructive-action-confirmation.js

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+import { Field, FieldDescription, FieldLabel } from "./field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/destructive-action-confirmation.tsx
+const DestructiveActionConfirmation = ({ className, confirmation, description, fieldClassName, inputClassName, label, onValueChange, value, ...props }) => {
+	const confirmed = isDestructiveActionConfirmed({
+		confirmation,
+		value
+	});
+	const invalid = value.length >= confirmation.length && !confirmed;
+	return /* @__PURE__ */ jsxs(Field, {
+		className: fieldClassName,
+		"data-confirmed": confirmed || void 0,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, { children: label }),
+			description !== void 0 ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx("code", {
+				className: cn("bg-muted text-foreground max-w-full rounded-md border px-2 py-1 font-mono text-xs break-all", className),
+				"data-slot": "destructive-action-confirmation-phrase",
+				children: confirmation
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				"aria-invalid": invalid || void 0,
+				autoCapitalize: "none",
+				autoComplete: "off",
+				className: inputClassName,
+				"data-slot": "destructive-action-confirmation-input",
+				spellCheck: false,
+				...props,
+				onChange: (event) => {
+					onValueChange(event.currentTarget.value);
+				},
+				type: "text",
+				value
+			})
+		]
+	});
+};
+function useDestructiveActionConfirmation(confirmation) {
+	const [value, setValue] = React$1.useState("");
+	return {
+		confirmed: isDestructiveActionConfirmed({
+			confirmation,
+			value
+		}),
+		onValueChange: setValue,
+		reset: () => {
+			setValue("");
+		},
+		value
+	};
+}
+function isDestructiveActionConfirmed({ confirmation, value }) {
+	return value === confirmation;
+}
+//#endregion
+export { DestructiveActionConfirmation, useDestructiveActionConfirmation };

package/dist/components/destructive-confirm-dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React$1 from "react";
+//#region src/components/destructive-confirm-dialog.d.ts
+type DestructiveConfirmDialogProps = {
+  cancelLabel: React$1.ReactNode;
+  confirmLabel: React$1.ReactNode;
+  confirmation: string;
+  description: React$1.ReactNode;
+  inputLabel: React$1.ReactNode;
+  loading?: boolean | undefined;
+  onConfirm: () => Promise<void> | void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  title: React$1.ReactNode;
+};
+declare const DestructiveConfirmDialog: ({ cancelLabel, confirmLabel, confirmation, description, inputLabel, loading, onConfirm, onOpenChange, open, title }: DestructiveConfirmDialogProps) => React$1.JSX.Element;
+//#endregion
+export { DestructiveConfirmDialog, type DestructiveConfirmDialogProps };

package/dist/components/destructive-confirm-dialog.js

@@ -0,0 +1,49 @@
+"use client";
+import { AlertDialog, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogTitle } from "./alert-dialog.js";
+import { Button } from "./button.js";
+import { DestructiveActionConfirmation, useDestructiveActionConfirmation } from "./destructive-action-confirmation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/destructive-confirm-dialog.tsx
+const DestructiveConfirmDialog = ({ cancelLabel, confirmLabel, confirmation, description, inputLabel, loading = false, onConfirm, onOpenChange, open, title }) => {
+	const typedConfirmation = useDestructiveActionConfirmation(confirmation);
+	const handleOpenChange = (nextOpen) => {
+		onOpenChange(nextOpen);
+		if (!nextOpen) typedConfirmation.reset();
+	};
+	const handleConfirm = async () => {
+		if (!typedConfirmation.confirmed) return;
+		try {
+			await onConfirm();
+			handleOpenChange(false);
+		} catch {}
+	};
+	const handleConfirmClick = () => {
+		handleConfirm().catch(() => void 0);
+	};
+	return /* @__PURE__ */ jsx(AlertDialog, {
+		onOpenChange: handleOpenChange,
+		open,
+		children: /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
+			/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })] }),
+			/* @__PURE__ */ jsx(AlertDialogPanel, { children: /* @__PURE__ */ jsx(DestructiveActionConfirmation, {
+				confirmation,
+				label: inputLabel,
+				onValueChange: typedConfirmation.onValueChange,
+				placeholder: confirmation,
+				value: typedConfirmation.value
+			}) }),
+			/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogClose, {
+				render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				disabled: !typedConfirmation.confirmed,
+				loading,
+				onClick: handleConfirmClick,
+				variant: "destructive",
+				children: confirmLabel
+			})] })
+		] })
+	});
+};
+//#endregion
+export { DestructiveConfirmDialog };

package/dist/components/dialog.d.ts

@@ -0,0 +1,37 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+import * as React$1 from "react";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.d.ts
+declare const DialogCreateHandle: typeof Dialog$1.createHandle;
+declare const Dialog: typeof Dialog$1.Root;
+declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function DialogTrigger({ tooltip, ...props }: Dialog$1.Trigger.Props & {
+  tooltip?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function DialogClose({ tooltip, ...props }: Dialog$1.Close.Props & {
+  tooltip?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare const DialogBackdrop: ({ className, layer, ...props }: Dialog$1.Backdrop.Props & {
+  layer?: OverlayLayer;
+}) => React$1.JSX.Element;
+declare const DialogViewport: ({ className, layer, ...props }: Dialog$1.Viewport.Props & {
+  layer?: OverlayLayer;
+}) => React$1.JSX.Element;
+declare const DialogPopup: ({ backdropClassName, className, children, showCloseButton, bottomStickOnMobile, layer, viewportClassName, ...props }: Dialog$1.Popup.Props & {
+  backdropClassName?: string;
+  showCloseButton?: boolean;
+  bottomStickOnMobile?: boolean;
+  layer?: OverlayLayer;
+  viewportClassName?: string;
+}) => React$1.JSX.Element;
+declare const DialogHeader: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const DialogFooter: ({ className, variant, ...props }: React$1.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) => React$1.JSX.Element;
+declare const DialogTitle: ({ className, ...props }: Dialog$1.Title.Props) => React$1.JSX.Element;
+declare const DialogDescription: ({ className, ...props }: Dialog$1.Description.Props) => React$1.JSX.Element;
+declare const DialogPanel: ({ className, scrollFade, ...props }: React$1.ComponentProps<"div"> & {
+  scrollFade?: boolean;
+}) => React$1.JSX.Element;
+//#endregion
+export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/dialog.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
+import { Button } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+//#region src/components/dialog.tsx
+const DialogCreateHandle = Dialog$1.createHandle;
+const Dialog = Dialog$1.Root;
+const DialogPortal = Dialog$1.Portal;
+function DialogTrigger({ tooltip, ...props }) {
+	return renderTooltipTrigger({
+		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		trigger: /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+			"data-slot": "dialog-trigger",
+			...props
+		})
+	});
+}
+function DialogClose({ tooltip, ...props }) {
+	return renderTooltipTrigger({
+		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		trigger: /* @__PURE__ */ jsx(Dialog$1.Close, {
+			"data-slot": "dialog-close",
+			...props
+		})
+	});
+}
+const DialogBackdrop = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+	className: cn("fixed inset-0 bg-black/32 backdrop-blur-sm transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	"data-slot": "dialog-backdrop",
+	...props
+});
+const DialogViewport = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(Dialog$1.Viewport, {
+	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	"data-slot": "dialog-viewport",
+	...props
+});
+const DialogPopup = ({ backdropClassName, className, children, showCloseButton = true, bottomStickOnMobile = true, layer = "default", viewportClassName, ...props }) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {
+	className: backdropClassName,
+	layer
+}), /* @__PURE__ */ jsx(DialogViewport, {
+	className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12", viewportClassName),
+	layer,
+	children: /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+		"data-slot": "dialog-popup",
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			"aria-label": "Close",
+			className: "absolute end-2 top-2",
+			render: /* @__PURE__ */ jsx(Button, {
+				size: "icon",
+				variant: "ghost"
+			}),
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})]
+	})
+})] });
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4", className),
+	"data-slot": "dialog-header",
+	...props
+});
+const DialogFooter = ({ className, variant = "default", ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "bg-muted/72 border-t py-4", variant === "bare" && "pt-4 pb-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3", className),
+	"data-slot": "dialog-footer",
+	...props
+});
+const DialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(Dialog$1.Title, {
+	className: cn("font-heading text-xl leading-none font-semibold", className),
+	"data-slot": "dialog-title",
+	...props
+});
+const DialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Dialog$1.Description, {
+	className: cn("text-muted-foreground text-sm", className),
+	"data-slot": "dialog-description",
+	...props
+});
+const DialogPanel = ({ className, scrollFade = true, ...props }) => /* @__PURE__ */ jsx(ScrollArea, {
+	scrollFade,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1", className),
+		"data-slot": "dialog-panel",
+		...props
+	})
+});
+//#endregion
+export { Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport };

package/dist/components/directional-icon.d.ts

@@ -0,0 +1,30 @@
+import { LucideIcon } from "lucide-react";
+//#region src/components/directional-icon.d.ts
+type DirectionalIconProps = {
+  /**
+   * A horizontally-directional lucide icon (chevron / arrow / caret /
+   * chevrons). It is mirrored under an RTL UI so it points the correct
+   * way. Do NOT use this for orientation-independent icons (play/pause,
+   * spinner/refresh/clock, magnifier, checkmark, camera, brand marks,
+   * file-type or chart-axis glyphs) — those must never mirror.
+   */
+  icon: LucideIcon;
+  className?: string;
+  /**
+   * Whether to mirror under RTL. Defaults to `true`. Pass
+   * `flip={!isExpanded}` for disclosure chevrons that also `rotate-90`
+   * on expand, so the horizontal mirror is only applied while collapsed
+   * (an always-on mirror composes with the rotation and points the
+   * expanded state the wrong way).
+   */
+  flip?: boolean;
+};
+/**
+ * Single sanctioned way to render a direction-bearing icon. Centralizes
+ * the `rtl:-scale-x-100` mirror so individual call sites can't get RTL
+ * handling wrong (forget the flip, or wrongly flip a non-directional
+ * icon). See `/conventions-ux` → Right-to-Left & Bidirectional.
+ */
+declare const DirectionalIcon: ({ icon: Icon, className, flip }: DirectionalIconProps) => import("react").JSX.Element;
+//#endregion
+export { DirectionalIcon };

package/dist/components/directional-icon.js

@@ -0,0 +1,12 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/directional-icon.tsx
+/**
+* Single sanctioned way to render a direction-bearing icon. Centralizes
+* the `rtl:-scale-x-100` mirror so individual call sites can't get RTL
+* handling wrong (forget the flip, or wrongly flip a non-directional
+* icon). See `/conventions-ux` → Right-to-Left & Bidirectional.
+*/
+const DirectionalIcon = ({ icon: Icon, className, flip = true }) => /* @__PURE__ */ jsx(Icon, { className: cn(flip && "rtl:-scale-x-100", className) });
+//#endregion
+export { DirectionalIcon };

package/dist/components/field.d.ts

@@ -0,0 +1,11 @@
+import { Field as Field$1 } from "@base-ui/react/field";
+//#region src/components/field.d.ts
+declare const Field: ({ className, ...props }: Field$1.Root.Props) => import("react").JSX.Element;
+declare const FieldLabel: ({ className, ...props }: Field$1.Label.Props) => import("react").JSX.Element;
+declare const FieldItem: ({ className, ...props }: Field$1.Item.Props) => import("react").JSX.Element;
+declare const FieldDescription: ({ className, ...props }: Field$1.Description.Props) => import("react").JSX.Element;
+declare const FieldError: ({ className, ...props }: Field$1.Error.Props) => import("react").JSX.Element;
+declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
+//#endregion
+export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/field.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Field as Field$1 } from "@base-ui/react/field";
+//#region src/components/field.tsx
+const Field = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Root, {
+	className: cn("flex flex-col items-start gap-2", className),
+	"data-slot": "field",
+	...props
+});
+const FieldLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Label, {
+	className: cn("text-foreground inline-flex items-center gap-2 text-base/4.5 font-medium sm:text-sm/4", className),
+	"data-slot": "field-label",
+	...props
+});
+const FieldItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Item, {
+	className: cn("flex", className),
+	"data-slot": "field-item",
+	...props
+});
+const FieldDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Description, {
+	className: cn("text-muted-foreground text-xs", className),
+	"data-slot": "field-description",
+	...props
+});
+const FieldError = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Error, {
+	className: cn("text-destructive-foreground text-xs", className),
+	"data-slot": "field-error",
+	...props
+});
+const FieldControl = Field$1.Control;
+const FieldValidity = Field$1.Validity;
+//#endregion
+export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/form.d.ts

@@ -0,0 +1,5 @@
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/form.d.ts
+declare const Form: ({ className, ...props }: Form$1.Props) => import("react").JSX.Element;
+//#endregion
+export { Form };

package/dist/components/form.js

@@ -0,0 +1,12 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/form.tsx
+const Form = ({ className, ...props }) => /* @__PURE__ */ jsx(Form$1, {
+	className: cn("flex w-full flex-col gap-4", className),
+	"data-slot": "form",
+	...props
+});
+//#endregion
+export { Form };

package/dist/components/frame.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+//#region src/components/frame.d.ts
+declare const Frame: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const FramePanel: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const FrameHeader: ({ className, ...props }: React$1.ComponentProps<"header">) => React$1.JSX.Element;
+declare const FrameTitle: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const FrameDescription: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const FrameFooter: ({ className, ...props }: React$1.ComponentProps<"footer">) => React$1.JSX.Element;
+//#endregion
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/frame.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/frame.tsx
+const Frame = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("bg-muted/72 relative flex flex-col rounded-2xl p-1", "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1", className),
+	"data-slot": "frame",
+	...props
+});
+const FramePanel = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("bg-background relative rounded-xl border bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+	"data-slot": "frame-panel",
+	...props
+});
+const FrameHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("header", {
+	className: cn("flex flex-col px-5 py-4", className),
+	"data-slot": "frame-panel-header",
+	...props
+});
+const FrameTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("text-sm font-semibold", className),
+	"data-slot": "frame-panel-title",
+	...props
+});
+const FrameDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("text-muted-foreground text-sm", className),
+	"data-slot": "frame-panel-description",
+	...props
+});
+const FrameFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("footer", {
+	className: cn("px-5 py-4", className),
+	"data-slot": "frame-panel-footer",
+	...props
+});
+//#endregion
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/hex-color-picker.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+//#region src/components/hex-color-picker.d.ts
+type HexColorPickerProps = {
+  /** Hex color with or without # (e.g. "#ff0000" or "FF0000") */
+  color?: string | undefined;
+  onChange?: (hex: string) => void;
+  className?: string;
+};
+declare const HexColorPicker: ({ color, onChange, className }: HexColorPickerProps) => React$1.JSX.Element;
+//#endregion
+export { HexColorPicker, type HexColorPickerProps };