beez-ui 0.6.2 → 0.8.0

package/dist/components/rich-link-editor.js

@@ -0,0 +1,320 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** `contentEditable` editor for plain text with markdown links, driven by `useRichLinkEditor`. */
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { RICH_LINK_POPOVER_MODE, RICH_TEXT_EDITOR_KEY, RICH_TEXT_SEGMENT_TYPE } from "../lib/rich-text/link-markdown-constants.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BUTTON_TYPE = "button";
+const BUTTON_VARIANT = {
+	ghost: "ghost",
+	outline: "outline"
+};
+const URL_INPUT_TYPE = "url";
+const LINK_TARGET = "_blank";
+const LINK_REL = "noreferrer";
+/**
+* Presentation of each part. iOS Safari zooms the page when a focused editable region renders
+* text below 16px, so the editor and the inputs are pinned to 1rem on phones.
+*/
+const RICH_LINK_EDITOR_CLASS_NAMES = {
+	editor: "min-h-28 w-full cursor-text border-0 bg-background p-0 leading-[1.65] whitespace-pre-wrap text-foreground [font:inherit] [overflow-wrap:anywhere] focus:outline-0 empty:before:pointer-events-none empty:before:text-muted-foreground/75 empty:before:content-[attr(data-placeholder)] max-md:text-base",
+	editorInvalid: "rounded-[0.35rem] shadow-[inset_0_-2px_0_var(--destructive)] outline-0",
+	editorLink: "cursor-pointer rounded-[0.2rem] font-bold text-primary underline decoration-[0.08em] underline-offset-[0.18em] transition-colors hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+	popover: "gap-3",
+	editForm: "grid gap-3 animate-in fade-in slide-in-from-bottom-1 duration-200",
+	actions: "flex flex-wrap items-center gap-2",
+	label: "grid gap-[0.35rem] text-[0.85rem] font-bold text-muted-foreground",
+	input: "min-h-8 rounded-lg border border-border/80 bg-background px-[0.65rem] font-normal text-foreground outline-0 transition-[border-color,box-shadow] [font:inherit] focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_35%,transparent)] aria-invalid:border-destructive aria-invalid:focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_25%,transparent)] max-md:text-base"
+};
+const RICH_LINK_EDITOR_DEFAULT_COPY = {
+	editAction: "Editar",
+	editCancel: "Cancelar",
+	editSave: "Guardar",
+	popoverTextLabel: "Texto",
+	popoverUrlLabel: "Enlace",
+	removeAction: "Quitar enlace"
+};
+/**
+* `contentEditable` rich link editor: renders the controller's preview segments,
+* turning each link into a popover that edits or removes it. All state lives in
+* the `useRichLinkEditor` controller; this component is presentation only.
+*/
+export function RichLinkEditor(t0) {
+	const $ = _c(50);
+	const { ariaDescribedBy, ariaLabel, copy: copyOverrides, editor, isDisabled: t1, isInvalid: t2, placeholder } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const isInvalid = t2 === undefined ? false : t2;
+	const { activeLink, closeLinkPopover, handleBeforeInput, handleInput, handleKeyDown, handlePaste, hasContent, hasInvalidLinkUrl, isLinkEditValid, linkTextInput, linkUrlInput, openLinkPopover, popoverMode, removeLink, saveLinkEdit, segments, setEditorElement, setLinkTextInput, setLinkUrlInput, setPopoverMode } = editor;
+	let t3;
+	if ($[0] !== copyOverrides) {
+		t3 = {
+			...RICH_LINK_EDITOR_DEFAULT_COPY,
+			...copyOverrides
+		};
+		$[0] = copyOverrides;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const copy = t3;
+	const linkTextInputRef = useRef(null);
+	const isEditingLink = popoverMode === RICH_LINK_POPOVER_MODE.edit;
+	const t4 = isInvalid && RICH_LINK_EDITOR_CLASS_NAMES.editorInvalid;
+	let t5;
+	if ($[2] !== t4) {
+		t5 = cn(RICH_LINK_EDITOR_CLASS_NAMES.editor, t4);
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t5 = $[3];
+	}
+	const editorClassName = t5;
+	let t6;
+	let t7;
+	if ($[4] !== closeLinkPopover || $[5] !== isDisabled) {
+		t6 = () => {
+			if (isDisabled) {
+				closeLinkPopover();
+			}
+		};
+		t7 = [closeLinkPopover, isDisabled];
+		$[4] = closeLinkPopover;
+		$[5] = isDisabled;
+		$[6] = t6;
+		$[7] = t7;
+	} else {
+		t6 = $[6];
+		t7 = $[7];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[8] !== isEditingLink) {
+		t8 = () => {
+			if (isEditingLink) {
+				linkTextInputRef.current?.focus();
+			}
+		};
+		$[8] = isEditingLink;
+		$[9] = t8;
+	} else {
+		t8 = $[9];
+	}
+	const t9 = activeLink?.key;
+	let t10;
+	if ($[10] !== isEditingLink || $[11] !== t9) {
+		t10 = [isEditingLink, t9];
+		$[10] = isEditingLink;
+		$[11] = t9;
+		$[12] = t10;
+	} else {
+		t10 = $[12];
+	}
+	useEffect(t8, t10);
+	let t11;
+	if ($[13] !== activeLink || $[14] !== isLinkEditValid || $[15] !== saveLinkEdit) {
+		t11 = (event) => {
+			if (event.key !== RICH_TEXT_EDITOR_KEY.enter) {
+				return;
+			}
+			event.preventDefault();
+			if (activeLink && isLinkEditValid) {
+				saveLinkEdit(activeLink);
+			}
+		};
+		$[13] = activeLink;
+		$[14] = isLinkEditValid;
+		$[15] = saveLinkEdit;
+		$[16] = t11;
+	} else {
+		t11 = $[16];
+	}
+	const handleEditFieldKeyDown = t11;
+	const t12 = !isDisabled;
+	let t13;
+	if ($[17] !== activeLink || $[18] !== closeLinkPopover || $[19] !== copy || $[20] !== handleEditFieldKeyDown || $[21] !== hasContent || $[22] !== hasInvalidLinkUrl || $[23] !== isDisabled || $[24] !== isLinkEditValid || $[25] !== linkTextInput || $[26] !== linkUrlInput || $[27] !== openLinkPopover || $[28] !== popoverMode || $[29] !== removeLink || $[30] !== saveLinkEdit || $[31] !== segments || $[32] !== setLinkTextInput || $[33] !== setLinkUrlInput || $[34] !== setPopoverMode) {
+		t13 = hasContent ? segments.map((segment) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? isDisabled ? /* @__PURE__ */ _jsx("a", {
+			"aria-disabled": true,
+			className: RICH_LINK_EDITOR_CLASS_NAMES.editorLink,
+			href: segment.url,
+			onClick: _temp,
+			rel: LINK_REL,
+			tabIndex: -1,
+			target: LINK_TARGET,
+			children: segment.text
+		}, segment.key) : /* @__PURE__ */ _jsxs(Popover, {
+			onOpenChange: (isOpen) => {
+				if (isOpen) {
+					openLinkPopover(segment);
+				} else {
+					if (activeLink?.key === segment.key) {
+						closeLinkPopover();
+					}
+				}
+			},
+			open: activeLink?.key === segment.key,
+			children: [/* @__PURE__ */ _jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ _jsx("a", {
+					className: RICH_LINK_EDITOR_CLASS_NAMES.editorLink,
+					href: segment.url,
+					onClick: (event_1) => {
+						event_1.preventDefault();
+						openLinkPopover(segment);
+					},
+					rel: LINK_REL,
+					target: LINK_TARGET,
+					children: segment.text
+				})
+			}), /* @__PURE__ */ _jsx(PopoverContent, {
+				className: RICH_LINK_EDITOR_CLASS_NAMES.popover,
+				onBeforeInput: _temp2,
+				onInput: _temp3,
+				onKeyDown: _temp4,
+				onPaste: _temp5,
+				children: popoverMode === RICH_LINK_POPOVER_MODE.actions ? /* @__PURE__ */ _jsxs("div", {
+					className: RICH_LINK_EDITOR_CLASS_NAMES.actions,
+					children: [/* @__PURE__ */ _jsx(Button, {
+						onClick: () => {
+							setPopoverMode(RICH_LINK_POPOVER_MODE.edit);
+						},
+						type: BUTTON_TYPE,
+						variant: BUTTON_VARIANT.ghost,
+						children: copy.editAction
+					}), /* @__PURE__ */ _jsx(Button, {
+						onClick: () => {
+							removeLink(segment);
+						},
+						type: BUTTON_TYPE,
+						variant: BUTTON_VARIANT.ghost,
+						children: copy.removeAction
+					})]
+				}) : /* @__PURE__ */ _jsxs("div", {
+					className: RICH_LINK_EDITOR_CLASS_NAMES.editForm,
+					children: [
+						/* @__PURE__ */ _jsxs("label", {
+							className: RICH_LINK_EDITOR_CLASS_NAMES.label,
+							children: [/* @__PURE__ */ _jsx("span", { children: copy.popoverTextLabel }), /* @__PURE__ */ _jsx("input", {
+								className: RICH_LINK_EDITOR_CLASS_NAMES.input,
+								onChange: (event_6) => {
+									setLinkTextInput(event_6.currentTarget.value);
+								},
+								onKeyDown: handleEditFieldKeyDown,
+								ref: linkTextInputRef,
+								value: linkTextInput
+							})]
+						}),
+						/* @__PURE__ */ _jsxs("label", {
+							className: RICH_LINK_EDITOR_CLASS_NAMES.label,
+							children: [/* @__PURE__ */ _jsx("span", { children: copy.popoverUrlLabel }), /* @__PURE__ */ _jsx("input", {
+								"aria-invalid": hasInvalidLinkUrl,
+								className: RICH_LINK_EDITOR_CLASS_NAMES.input,
+								onChange: (event_7) => {
+									setLinkUrlInput(event_7.currentTarget.value);
+								},
+								onKeyDown: handleEditFieldKeyDown,
+								type: URL_INPUT_TYPE,
+								value: linkUrlInput
+							})]
+						}),
+						/* @__PURE__ */ _jsxs("div", {
+							className: RICH_LINK_EDITOR_CLASS_NAMES.actions,
+							children: [/* @__PURE__ */ _jsx(Button, {
+								disabled: !isLinkEditValid,
+								onClick: () => {
+									if (activeLink) {
+										saveLinkEdit(activeLink);
+									}
+								},
+								type: BUTTON_TYPE,
+								children: copy.editSave
+							}), /* @__PURE__ */ _jsx(Button, {
+								onClick: closeLinkPopover,
+								type: BUTTON_TYPE,
+								variant: BUTTON_VARIANT.outline,
+								children: copy.editCancel
+							})]
+						})
+					]
+				})
+			})]
+		}, segment.key) : segment.text) : null;
+		$[17] = activeLink;
+		$[18] = closeLinkPopover;
+		$[19] = copy;
+		$[20] = handleEditFieldKeyDown;
+		$[21] = hasContent;
+		$[22] = hasInvalidLinkUrl;
+		$[23] = isDisabled;
+		$[24] = isLinkEditValid;
+		$[25] = linkTextInput;
+		$[26] = linkUrlInput;
+		$[27] = openLinkPopover;
+		$[28] = popoverMode;
+		$[29] = removeLink;
+		$[30] = saveLinkEdit;
+		$[31] = segments;
+		$[32] = setLinkTextInput;
+		$[33] = setLinkUrlInput;
+		$[34] = setPopoverMode;
+		$[35] = t13;
+	} else {
+		t13 = $[35];
+	}
+	let t14;
+	if ($[36] !== ariaDescribedBy || $[37] !== ariaLabel || $[38] !== editorClassName || $[39] !== handleBeforeInput || $[40] !== handleInput || $[41] !== handleKeyDown || $[42] !== handlePaste || $[43] !== isDisabled || $[44] !== isInvalid || $[45] !== placeholder || $[46] !== setEditorElement || $[47] !== t12 || $[48] !== t13) {
+		t14 = /* @__PURE__ */ _jsx("div", {
+			"aria-describedby": ariaDescribedBy,
+			"aria-disabled": isDisabled,
+			"aria-invalid": isInvalid,
+			"aria-label": ariaLabel,
+			"aria-multiline": true,
+			className: editorClassName,
+			"data-slot": "rich-link-editor",
+			contentEditable: t12,
+			"data-placeholder": placeholder,
+			onBeforeInput: handleBeforeInput,
+			onInput: handleInput,
+			onKeyDown: handleKeyDown,
+			onPaste: handlePaste,
+			ref: setEditorElement,
+			role: "textbox",
+			suppressContentEditableWarning: true,
+			children: t13
+		});
+		$[36] = ariaDescribedBy;
+		$[37] = ariaLabel;
+		$[38] = editorClassName;
+		$[39] = handleBeforeInput;
+		$[40] = handleInput;
+		$[41] = handleKeyDown;
+		$[42] = handlePaste;
+		$[43] = isDisabled;
+		$[44] = isInvalid;
+		$[45] = placeholder;
+		$[46] = setEditorElement;
+		$[47] = t12;
+		$[48] = t13;
+		$[49] = t14;
+	} else {
+		t14 = $[49];
+	}
+	return t14;
+}
+function _temp5(event_5) {
+	event_5.stopPropagation();
+}
+function _temp4(event_4) {
+	event_4.stopPropagation();
+}
+function _temp3(event_3) {
+	event_3.stopPropagation();
+}
+function _temp2(event_2) {
+	event_2.stopPropagation();
+}
+function _temp(event_0) {
+	event_0.preventDefault();
+}

package/dist/components/rich-markdown-content.d.ts

@@ -0,0 +1,10 @@
+export interface RichMarkdownContentProps {
+    content: string;
+    className?: string;
+}
+/**
+ * Parses and renders the content as paragraphs and lists.
+ * @param props - Stored content and optional class name.
+ * @returns The rendered blocks.
+ */
+export declare function RichMarkdownContent({ content, className }: RichMarkdownContentProps): import("react").JSX.Element;

package/dist/components/rich-markdown-content.js

@@ -0,0 +1,56 @@
+/**
+* Renders long-form content with a safe markdown subset: paragraphs, unordered lists, inline
+* bold and the shared link syntax. Raw HTML in the content is never interpreted as markup.
+*/
+import { cn } from "../lib/utils.js";
+import { RICH_MARKDOWN_BLOCK_TYPE, RICH_MARKDOWN_INLINE_TYPE, parseRichMarkdownBlocks } from "../lib/rich-text/rich-markdown.js";
+import { RICH_TEXT_LINK_CLASS_NAME } from "./rich-text-content.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LINK_TARGET = "_blank";
+const LINK_REL = "noreferrer";
+/**
+* Renders the inline pieces of a paragraph or list item.
+* @param segments - Parsed inline segments.
+* @returns Text, bold runs and links.
+*/
+function renderInlineSegments(segments) {
+	return segments.map((segment, segmentIndex) => {
+		const segmentKey = segment.type + String(segmentIndex);
+		if (segment.type === RICH_MARKDOWN_INLINE_TYPE.link) {
+			return /* @__PURE__ */ _jsx("a", {
+				"data-slot": "rich-text-link",
+				className: RICH_TEXT_LINK_CLASS_NAME,
+				href: segment.url,
+				rel: LINK_REL,
+				target: LINK_TARGET,
+				children: segment.text
+			}, segmentKey);
+		}
+		if (segment.type === RICH_MARKDOWN_INLINE_TYPE.bold) {
+			return /* @__PURE__ */ _jsx("strong", { children: segment.text }, segmentKey);
+		}
+		return segment.text;
+	});
+}
+/**
+* Parses and renders the content as paragraphs and lists.
+* @param props - Stored content and optional class name.
+* @returns The rendered blocks.
+*/
+export function RichMarkdownContent({ content, className }) {
+	const blocks = parseRichMarkdownBlocks(content);
+	return /* @__PURE__ */ _jsx("div", {
+		"data-slot": "rich-markdown-content",
+		className: cn("grid gap-[0.9rem]", className),
+		children: blocks.map((block, blockIndex) => block.type === RICH_MARKDOWN_BLOCK_TYPE.list ? /* @__PURE__ */ _jsx("ul", {
+			className: "m-0 grid list-disc gap-[0.35rem] pl-[1.4rem]",
+			children: block.items.map((itemSegments, itemIndex) => /* @__PURE__ */ _jsx("li", {
+				className: "leading-[1.7] [overflow-wrap:anywhere] marker:text-muted-foreground",
+				children: renderInlineSegments(itemSegments)
+			}, block.type + String(blockIndex) + String(itemIndex)))
+		}, block.type + String(blockIndex)) : /* @__PURE__ */ _jsx("p", {
+			className: "m-0 leading-[1.7] whitespace-pre-wrap [overflow-wrap:anywhere]",
+			children: renderInlineSegments(block.segments)
+		}, block.type + String(blockIndex)))
+	});
+}

package/dist/components/rich-text-content.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Renders persisted rich text (markdown links plus auto-detected URLs) as plain text interleaved
+ * with safe `<a>` links. Raw HTML in the content is never interpreted as markup.
+ */
+import type { MouseEvent } from "react";
+/** Shared look of links inside rendered rich text. */
+export declare const RICH_TEXT_LINK_CLASS_NAME = "rounded-[0.2rem] text-primary underline decoration-primary/45 underline-offset-[0.18em] transition-[color,text-decoration-color] [word-break:break-word] hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+export interface RichTextContentProps {
+    content: string;
+    onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    linkClassName?: string;
+}
+/**
+ * Renders an inline fragment instead of a wrapper element, so it composes inside any container
+ * without altering layout-sensitive behavior such as `line-clamp` on an ancestor.
+ * @param props - Stored content, optional link click handler and link class name.
+ * @returns Text and links.
+ */
+export declare function RichTextContent({ content, onLinkClick, linkClassName }: RichTextContentProps): import("react").JSX.Element;

package/dist/components/rich-text-content.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/utils.js";
+import { RICH_TEXT_SEGMENT_TYPE } from "../lib/rich-text/link-markdown-constants.js";
+import { parseRichTextSegments } from "../lib/rich-text/link-markdown.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const LINK_TARGET = "_blank";
+const LINK_REL = "noreferrer";
+/** Shared look of links inside rendered rich text. */
+export const RICH_TEXT_LINK_CLASS_NAME = "rounded-[0.2rem] text-primary underline decoration-primary/45 underline-offset-[0.18em] transition-[color,text-decoration-color] [word-break:break-word] hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+/**
+* Renders an inline fragment instead of a wrapper element, so it composes inside any container
+* without altering layout-sensitive behavior such as `line-clamp` on an ancestor.
+* @param props - Stored content, optional link click handler and link class name.
+* @returns Text and links.
+*/
+export function RichTextContent({ content, onLinkClick, linkClassName }) {
+	const segments = parseRichTextSegments(content);
+	return /* @__PURE__ */ _jsx(_Fragment, { children: segments.map((segment, segmentIndex) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? /* @__PURE__ */ _jsx("a", {
+		"data-slot": "rich-text-link",
+		className: cn(RICH_TEXT_LINK_CLASS_NAME, "font-bold decoration-[0.08em]", linkClassName),
+		href: segment.url,
+		onClick: onLinkClick,
+		rel: LINK_REL,
+		target: LINK_TARGET,
+		children: segment.text
+	}, segment.type + String(segmentIndex)) : segment.text) });
+}

package/dist/components/select.js

@@ -116,7 +116,7 @@ function SelectTrigger(t0) {
 	const size = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-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-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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);
+		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none select-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-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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);
 		$[5] = className;
 		$[6] = t2;
 	} else {

package/dist/components/sheet.js

@@ -196,7 +196,7 @@ function SheetContent(t0) {
 	}
 	let t5;
 	if ($[7] !== className) {
-		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg transition ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t 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=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=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
+		t5 = cn("fixed z-50 flex flex-col gap-4 overflow-y-auto overscroll-contain data-[side=bottom]:max-h-dvh data-[side=top]:max-h-dvh bg-background bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t 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=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=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm ", className);
 		$[7] = className;
 		$[8] = t5;
 	} else {
@@ -207,14 +207,17 @@ function SheetContent(t0) {
 		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
-			children: /* @__PURE__ */ _jsxs(Button, {
-				variant: "ghost",
-				className: "absolute top-4 right-4",
-				size: "icon-sm",
-				children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
+			children: /* @__PURE__ */ _jsx(MotionSlot, {
+				kind: "delayed-pop",
+				children: /* @__PURE__ */ _jsxs(Button, {
+					variant: "ghost",
+					className: "absolute top-4 right-4",
+					size: "icon-sm",
+					children: [/* @__PURE__ */ _jsx(XIcon, {}), /* @__PURE__ */ _jsx("span", {
+						className: "sr-only",
+						children: "Close"
+					})]
+				})
 			})
 		});
 		$[9] = showCloseButton;

package/dist/components/sidebar.js

@@ -7,6 +7,7 @@ import { useIsMobile } from "../hooks/use-mobile.js";
 import { useSidebarPersistence, saveSidebarPreference } from "../hooks/use-sidebar-persistence.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
+import { MOTION_EASE_DRAWER } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
 import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME } from "../constants/sidebar.js";
 import { Button } from "./button.js";
@@ -21,6 +22,8 @@ const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/** Drawer curve shared by the collapse transitions: quick start, long gentle settle. */
+const SIDEBAR_EASE = `cubic-bezier(${MOTION_EASE_DRAWER.join(", ")})`;
 const SIDEBAR_MENU_SKELETON_TEXT_WIDTH = "70%";
 function subscribeToClientMount() {
 	return () => {};
@@ -158,6 +161,7 @@ function SidebarProvider(t0) {
 		t7 = {
 			"--sidebar-width": SIDEBAR_WIDTH,
 			"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+			"--sidebar-ease": SIDEBAR_EASE,
 			...style
 		};
 		$[26] = style;
@@ -339,7 +343,7 @@ function Sidebar(t0) {
 	const t5 = variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)";
 	let t6;
 	if ($[27] !== t5) {
-		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
+		t6 = cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-(--sidebar-ease)", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t5);
 		$[27] = t5;
 		$[28] = t6;
 	} else {
@@ -359,7 +363,7 @@ function Sidebar(t0) {
 	const t8 = variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l";
 	let t9;
 	if ($[31] !== className || $[32] !== t8) {
-		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
+		t9 = cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-(--sidebar-ease) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", t8, className);
 		$[31] = className;
 		$[32] = t8;
 		$[33] = t9;
@@ -507,7 +511,7 @@ function SidebarRail(t0) {
 	const { toggleSidebar } = useSidebar();
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
+		t1 = cn("absolute inset-y-0 z-20 hidden w-4 transition-all duration-300 ease-(--sidebar-ease) group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -812,7 +816,7 @@ function SidebarGroupLabel(t0) {
 	const Comp = asChild ? Slot.Root : "div";
 	let t2;
 	if ($[4] !== className) {
-		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
+		t2 = cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-300 ease-(--sidebar-ease) group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className);
 		$[4] = className;
 		$[5] = t2;
 	} else {
@@ -996,7 +1000,7 @@ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w
 	variants: {
 		variant: {
 			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-			outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
 		},
 		size: {
 			default: "h-8 text-sm",

package/dist/components/skeleton.d.ts

@@ -1,2 +1,8 @@
+/**
+ * Placeholder with a soft shine that sweeps across it while content loads.
+ * The shine rests outside the box, so reduced motion shows a plain muted block.
+ * @param props - Native div properties and optional consumer overrides.
+ * @returns The placeholder element with its loading animation.
+ */
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 export { Skeleton };

package/dist/components/skeleton.js

@@ -1,12 +1,18 @@
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Placeholder with a soft shine that sweeps across it while content loads.
+* The shine rests outside the box, so reduced motion shows a plain muted block.
+* @param props - Native div properties and optional consumer overrides.
+* @returns The placeholder element with its loading animation.
+*/
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ _jsx(MotionSlot, {
 		kind: "skeleton",
 		children: /* @__PURE__ */ _jsx("div", {
 			"data-slot": "skeleton",
-			className: cn("rounded-md bg-muted", className),
+			className: cn("relative overflow-hidden rounded-md bg-muted after:pointer-events-none after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-foreground/6 after:to-transparent", className),
 			...props
 		})
 	});

package/dist/components/switch.js

@@ -36,7 +36,7 @@ function Switch(t0) {
 			kind: "thumb",
 			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
 				"data-slot": "switch-thumb",
-				className: "pointer-events-none block rounded-full bg-background ring-0  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)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+				className: "pointer-events-none block rounded-full bg-background shadow-sm ring-0 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)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
 			})
 		});
 		$[6] = t3;

package/dist/components/textarea.js

@@ -12,7 +12,7 @@ function Textarea({ className, ...props }) {
 		kind: "field",
 		children: /* @__PURE__ */ _jsx("textarea", {
 			"data-slot": "textarea",
-			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 			...props
 		})
 	});