@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuLabel, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, SidebarTriggerProps } from "./sidebar.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuLabel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps };

package/dist/components/sidebar/index.js

@@ -0,0 +1,2 @@
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuLabel, SidebarProvider, SidebarTrigger } from "./sidebar.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuLabel, SidebarProvider, SidebarTrigger };

package/dist/components/sidebar/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/sidebar/meta.ts
+const meta = defineMeta({
+	name: "sidebar",
+	title: "Sidebar",
+	description: "The application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.",
+	category: "navigation",
+	status: "stable",
+	dependencies: ["radix-ui"],
+	registryDependencies: ["sheet"],
+	files: ["sidebar.tsx"],
+	a11y: "The navigation landmark must be named — a page has several, and three regions all called \"navigation\" is a list nobody can choose from. The active entry carries aria-current=\"page\" rather than only a background colour. On a narrow screen it is a Sheet, not a styled div: an overlay needs a focus trap and an Escape key, and without them the page behind stays reachable by Tab while the menu covers it. When the rail collapses, labels are visually hidden rather than removed — removing them leaves controls whose only content is an icon, which is how a collapsed sidebar becomes a column of links all announced as \"link\". The trigger says what pressing it will do, not what the state currently is. The overlay is mounted only on a narrow screen and has its own open state: a modal dialog that CSS hides is still modal, and mounting it always made every wide screen aria-hidden and unclickable whenever the rail was open."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/sidebar/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/sidebar/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"sidebar\",\n  title: \"Sidebar\",\n  description:\n    \"The application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [\"sheet\"],\n  files: [\"sidebar.tsx\"],\n  a11y:\n    \"The navigation landmark must be named — a page has several, and three regions all called \" +\n    '\"navigation\" is a list nobody can choose from. The active entry carries aria-current=' +\n    '\"page\" rather than only a background colour. On a narrow screen it is a Sheet, not a ' +\n    \"styled div: an overlay needs a focus trap and an Escape key, and without them the page \" +\n    \"behind stays reachable by Tab while the menu covers it. When the rail collapses, labels \" +\n    \"are visually hidden rather than removed — removing them leaves controls whose only content \" +\n    \"is an icon, which is how a collapsed sidebar becomes a column of links all announced as \" +\n    '\"link\". The trigger says what pressing it will do, not what the state currently is. The ' +\n    \"overlay is mounted only on a narrow screen and has its own open state: a modal dialog that \" +\n    \"CSS hides is still modal, and mounting it always made every wide screen aria-hidden and \" +\n    \"unclickable whenever the rail was open.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC,OAAO;CAC9B,OAAO,CAAC,aAAa;CACrB,MACE;AAWJ,CAAC"}

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,69 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/sidebar/sidebar.d.ts
+interface SidebarProviderProps {
+  /** Controlled open state. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function SidebarProvider({ open: openProp, defaultOpen, onOpenChange, children }: SidebarProviderProps): import("react").JSX.Element;
+interface SidebarProps extends ComponentPropsWithRef<"aside"> {
+  /**
+   * Names the navigation landmark.
+   *
+   * Required, not optional. A page has more than one navigation region — this,
+   * a breadcrumb, a footer — and three landmarks all called "navigation" is a
+   * list a screen reader user cannot choose from.
+   */
+  label: string;
+  /** Title for the overlay on a narrow screen, where it is a dialog. */
+  mobileTitle?: string;
+}
+declare function Sidebar({ className, label, mobileTitle, children, ...props }: SidebarProps): import("react").JSX.Element;
+declare function SidebarHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function SidebarContent({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function SidebarFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function SidebarGroup({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+/**
+ * A heading for a group of links.
+ *
+ * Hidden rather than removed when the rail is collapsed, so the grouping
+ * survives for anyone not reading the layout visually.
+ */
+declare function SidebarGroupLabel({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function SidebarMenu({ className, ...props }: ComponentPropsWithRef<"ul">): import("react").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: ComponentPropsWithRef<"li">): import("react").JSX.Element;
+interface SidebarMenuButtonProps extends ComponentPropsWithRef<"a"> {
+  /** Render the child as the control, for a router's own link or a button. */
+  asChild?: boolean;
+  /** The page currently being shown. */
+  isActive?: boolean;
+}
+/**
+ * One entry in the navigation.
+ *
+ * `aria-current="page"` when active, not merely a background colour: which page
+ * you are on is information, and a highlight conveys it to exactly one kind of
+ * reader.
+ */
+declare function SidebarMenuButton({ className, asChild, isActive, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+/**
+ * The text of a menu entry.
+ *
+ * Visually hidden rather than removed when the rail is collapsed. Removing it
+ * leaves a control whose only content is an icon, and an icon has no accessible
+ * name — which is how a collapsed sidebar becomes a column of buttons all
+ * announced as "link".
+ */
+declare function SidebarMenuLabel({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+interface SidebarTriggerProps extends ComponentPropsWithRef<"button"> {
+  /** Overrides the label, which otherwise says what pressing it will do. */
+  label?: string;
+}
+declare function SidebarTrigger({ className, label, ...props }: SidebarTriggerProps): import("react").JSX.Element;
+/** The region the sidebar sits beside. */
+declare function SidebarInset({ className, ...props }: ComponentPropsWithRef<"main">): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuLabel, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, SidebarTriggerProps };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/sidebar/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"mappings":";;UA6FiB;;EAEf;EACA;EACA,gBAAgB;EAChB,WAAW;;iBAGG,kBACd,MAAM,UACN,aACA,cACA,YACC,uCAAoB,IAAA;UAiCN,qBAAqB;;;;;;;;EAQpC;;EAEA;;iBAGc,UAAU,WAAW,OAAO,aAAa,aAAa,SAAS,+BAAY,IAAA;iBA6C3E,gBAAgB,cAAc,SAAS,+CAA4B,IAAA;iBAUnE,iBAAiB,cAAc,SAAS,+CAA4B,IAAA;iBAUpE,gBAAgB,cAAc,SAAS,+CAA4B,IAAA;iBAInE,eAAe,cAAc,SAAS,+CAA4B,IAAA;;;;;;;iBAUlE,oBAAoB,cAAc,SAAS,+CAA4B,IAAA;iBAkBvE,cAAc,cAAc,SAAS,8CAA2B,IAAA;iBAIhE,kBAAkB,cAAc,SAAS,8CAA2B,IAAA;UAInE,+BAA+B;;EAE9C;;EAEA;;;;;;;;;iBAUc,oBACd,WACA,SACA,UACA,aACG,SACF,yCAAsB,IAAA;;;;;;;;;iBAkCT,mBAAmB,cAAc,SAAS,gDAA6B,IAAA;UAYtE,4BAA4B;;EAE3C;;iBAGc,iBAAiB,WAAW,UAAU,SAAS,sCAAmB,IAAA;;iBAyClE,eAAe,cAAc,SAAS,gDAA6B,IAAA"}

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,256 @@
+"use client";
+import { disabledStyles, focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Sheet, SheetContent, SheetTitle } from "../sheet/sheet.js";
+import { Slot } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo, useState, useSyncExternalStore } from "react";
+//#region src/components/sidebar/sidebar.tsx
+/**
+* The application's own navigation.
+*
+* Two states, not one. On a wide screen it collapses to a rail of icons and
+* stays in the page; on a narrow one it is an overlay, which needs a focus trap
+* and an Escape key and is therefore a Sheet rather than a div with a
+* transform. Building one behaviour and hiding it at a breakpoint gets the
+* mobile case wrong every time — the page behind stays reachable by Tab while
+* the menu covers it.
+*
+* The collapsed rail is where these usually fail. Hiding the label leaves a
+* button whose only content is an icon, and an icon has no accessible name. The
+* label here is not removed but visually hidden, so the control keeps its name
+* whether or not the text is on screen.
+*
+* The overlay is mounted only on a narrow screen, and it has its own open
+* state. Mounting it always and hiding it with CSS was the first version, and
+* it was wrong in a way no visual check catches: a modal dialog that is
+* `display: none` is still modal. It marks the rest of the page `aria-hidden`,
+* traps focus in an element nothing can focus, and turns pointer events off on
+* the body — so on a desktop the whole application was invisible to a screen
+* reader and unclickable the moment the sidebar was open, which is its default.
+*/
+/** Below Tailwind's `md` breakpoint, which is where the rail gives way to the overlay. */
+const NARROW_QUERY = "(max-width: 767px)";
+function subscribeToNarrow(callback) {
+	const query = window.matchMedia(NARROW_QUERY);
+	query.addEventListener("change", callback);
+	return () => {
+		query.removeEventListener("change", callback);
+	};
+}
+/**
+* Whether the viewport is narrow enough for the overlay.
+*
+* The server snapshot says "wide": the rail renders in the HTML and CSS hides
+* it below the breakpoint, so a narrow screen shows nothing wrong before
+* hydration and the sheet mounts, closed, straight after.
+*/
+function useIsNarrow() {
+	return useSyncExternalStore(subscribeToNarrow, () => window.matchMedia(NARROW_QUERY).matches, () => false);
+}
+const SidebarContext = createContext(null);
+function useSidebar(component) {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error(`${component} must be rendered inside <SidebarProvider>.`);
+	return context;
+}
+function SidebarProvider({ open: openProp, defaultOpen = true, onOpenChange, children }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = openProp ?? uncontrolled;
+	const [overlayOpen, setOverlayOpen] = useState(false);
+	const narrow = useIsNarrow();
+	const sidebarId = useId();
+	const value = useMemo(() => {
+		const setOpen = (next) => {
+			if (openProp === void 0) setUncontrolled(next);
+			onOpenChange?.(next);
+		};
+		return {
+			open,
+			setOpen,
+			narrow,
+			overlayOpen,
+			setOverlayOpen,
+			toggle: () => {
+				if (narrow) setOverlayOpen(!overlayOpen);
+				else setOpen(!open);
+			},
+			sidebarId
+		};
+	}, [
+		open,
+		openProp,
+		onOpenChange,
+		narrow,
+		overlayOpen,
+		sidebarId
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value,
+		children
+	});
+}
+function Sidebar({ className, label, mobileTitle, children, ...props }) {
+	const { open, narrow, overlayOpen, setOverlayOpen, sidebarId } = useSidebar("Sidebar");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [narrow ? /* @__PURE__ */ jsx(Sheet, {
+		open: overlayOpen,
+		onOpenChange: setOverlayOpen,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "left",
+			className: "w-72 p-0",
+			children: [/* @__PURE__ */ jsx(SheetTitle, {
+				className: "sr-only",
+				children: mobileTitle ?? label
+			}), /* @__PURE__ */ jsx("nav", {
+				"aria-label": label,
+				className: "flex h-full flex-col gap-2 p-3",
+				children
+			})]
+		})
+	}) : null, /* @__PURE__ */ jsx("aside", {
+		id: sidebarId,
+		"data-slot": "sidebar",
+		"data-state": open ? "expanded" : "collapsed",
+		className: cn("hidden shrink-0 border-e border-border bg-background md:block", "transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", open ? "w-60" : "w-14", className),
+		...props,
+		children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": label,
+			className: "flex h-full flex-col gap-2 p-3",
+			children
+		})
+	})] });
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		className: cn("flex min-h-9 items-center gap-2 px-1", className),
+		...props
+	});
+}
+function SidebarContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-content",
+		className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto", className),
+		...props
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		className: cn("mt-auto", className),
+		...props
+	});
+}
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		className: cn("grid gap-1", className),
+		...props
+	});
+}
+/**
+* A heading for a group of links.
+*
+* Hidden rather than removed when the rail is collapsed, so the grouping
+* survives for anyone not reading the layout visually.
+*/
+function SidebarGroupLabel({ className, ...props }) {
+	const { open, narrow } = useSidebar("SidebarGroupLabel");
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-label",
+		className: cn("px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase", !open && !narrow && "sr-only", className),
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		className: cn("grid gap-0.5", className),
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+/**
+* One entry in the navigation.
+*
+* `aria-current="page"` when active, not merely a background colour: which page
+* you are on is information, and a highlight conveys it to exactly one kind of
+* reader.
+*/
+function SidebarMenuButton({ className, asChild = false, isActive = false, children, ...props }) {
+	const Component = asChild ? Slot.Root : "a";
+	return /* @__PURE__ */ jsx(Component, {
+		"data-slot": "sidebar-menu-button",
+		"data-active": isActive || void 0,
+		"aria-current": isActive ? "page" : void 0,
+		className: cn("flex h-9 w-full items-center gap-2.5 rounded-md px-2 text-sm", "transition-colors duration-[var(--duration-fast)]", "[&>svg]:size-4 [&>svg]:shrink-0", isActive ? "bg-accent font-medium text-accent-foreground" : "text-muted-foreground hover:bg-accent/60 hover:text-foreground", focusRing, disabledStyles, className),
+		...props,
+		children
+	});
+}
+/**
+* The text of a menu entry.
+*
+* Visually hidden rather than removed when the rail is collapsed. Removing it
+* leaves a control whose only content is an icon, and an icon has no accessible
+* name — which is how a collapsed sidebar becomes a column of buttons all
+* announced as "link".
+*/
+function SidebarMenuLabel({ className, ...props }) {
+	const { open, narrow } = useSidebar("SidebarMenuLabel");
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "sidebar-menu-label",
+		className: cn("min-w-0 truncate", !open && !narrow && "sr-only", className),
+		...props
+	});
+}
+function SidebarTrigger({ className, label, ...props }) {
+	const { open, narrow, overlayOpen, toggle, sidebarId } = useSidebar("SidebarTrigger");
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "sidebar-trigger",
+		"aria-expanded": narrow ? overlayOpen : open,
+		"aria-controls": narrow ? void 0 : sidebarId,
+		"aria-label": label ?? (narrow ? overlayOpen ? "Close navigation" : "Open navigation" : open ? "Collapse navigation" : "Expand navigation"),
+		onClick: toggle,
+		className: cn("grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", focusRing, className),
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": true,
+			className: "size-4",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "4",
+				width: "18",
+				height: "16",
+				rx: "2",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M9 4v16",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			})]
+		})
+	});
+}
+/** The region the sidebar sits beside. */
+function SidebarInset({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "sidebar-inset",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuLabel, SidebarProvider, SidebarTrigger };
+
+//# sourceMappingURL=sidebar.js.map

package/dist/components/sidebar/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Sheet, SheetContent, SheetTitle } from \"@/components/sheet\";\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The application's own navigation.\n *\n * Two states, not one. On a wide screen it collapses to a rail of icons and\n * stays in the page; on a narrow one it is an overlay, which needs a focus trap\n * and an Escape key and is therefore a Sheet rather than a div with a\n * transform. Building one behaviour and hiding it at a breakpoint gets the\n * mobile case wrong every time — the page behind stays reachable by Tab while\n * the menu covers it.\n *\n * The collapsed rail is where these usually fail. Hiding the label leaves a\n * button whose only content is an icon, and an icon has no accessible name. The\n * label here is not removed but visually hidden, so the control keeps its name\n * whether or not the text is on screen.\n *\n * The overlay is mounted only on a narrow screen, and it has its own open\n * state. Mounting it always and hiding it with CSS was the first version, and\n * it was wrong in a way no visual check catches: a modal dialog that is\n * `display: none` is still modal. It marks the rest of the page `aria-hidden`,\n * traps focus in an element nothing can focus, and turns pointer events off on\n * the body — so on a desktop the whole application was invisible to a screen\n * reader and unclickable the moment the sidebar was open, which is its default.\n */\n\n/** Below Tailwind's `md` breakpoint, which is where the rail gives way to the overlay. */\nconst NARROW_QUERY = \"(max-width: 767px)\";\n\nfunction subscribeToNarrow(callback: () => void): () => void {\n  const query = window.matchMedia(NARROW_QUERY);\n  query.addEventListener(\"change\", callback);\n  return () => {\n    query.removeEventListener(\"change\", callback);\n  };\n}\n\n/**\n * Whether the viewport is narrow enough for the overlay.\n *\n * The server snapshot says \"wide\": the rail renders in the HTML and CSS hides\n * it below the breakpoint, so a narrow screen shows nothing wrong before\n * hydration and the sheet mounts, closed, straight after.\n */\nfunction useIsNarrow(): boolean {\n  return useSyncExternalStore(\n    subscribeToNarrow,\n    () => window.matchMedia(NARROW_QUERY).matches,\n    () => false,\n  );\n}\n\ninterface SidebarContextValue {\n  /** The rail is expanded rather than collapsed. */\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  /** The viewport is narrow, so the navigation is an overlay. */\n  narrow: boolean;\n  /** The overlay is showing. Only meaningful when `narrow`. */\n  overlayOpen: boolean;\n  setOverlayOpen: (open: boolean) => void;\n  /** Whichever of the two states applies on this viewport. */\n  toggle: () => void;\n  /** Id of the sidebar element, for the trigger's aria-controls. */\n  sidebarId: string;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nfunction useSidebar(component: string): SidebarContextValue {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <SidebarProvider>.`);\n  }\n  return context;\n}\n\nexport interface SidebarProviderProps {\n  /** Controlled open state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function SidebarProvider({\n  open: openProp,\n  defaultOpen = true,\n  onOpenChange,\n  children,\n}: SidebarProviderProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  // Separate from `open`, and never true to begin with: \"expanded by default\"\n  // is a fact about the rail. An overlay that covers the page on first load is\n  // a menu nobody asked for.\n  const [overlayOpen, setOverlayOpen] = useState(false);\n  const narrow = useIsNarrow();\n  const sidebarId = useId();\n\n  const value = useMemo<SidebarContextValue>(() => {\n    const setOpen = (next: boolean) => {\n      if (openProp === undefined) setUncontrolled(next);\n      onOpenChange?.(next);\n    };\n\n    return {\n      open,\n      setOpen,\n      narrow,\n      overlayOpen,\n      setOverlayOpen,\n      toggle: () => {\n        if (narrow) setOverlayOpen(!overlayOpen);\n        else setOpen(!open);\n      },\n      sidebarId,\n    };\n  }, [open, openProp, onOpenChange, narrow, overlayOpen, sidebarId]);\n\n  return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;\n}\n\nexport interface SidebarProps extends ComponentPropsWithRef<\"aside\"> {\n  /**\n   * Names the navigation landmark.\n   *\n   * Required, not optional. A page has more than one navigation region — this,\n   * a breadcrumb, a footer — and three landmarks all called \"navigation\" is a\n   * list a screen reader user cannot choose from.\n   */\n  label: string;\n  /** Title for the overlay on a narrow screen, where it is a dialog. */\n  mobileTitle?: string;\n}\n\nexport function Sidebar({ className, label, mobileTitle, children, ...props }: SidebarProps) {\n  const { open, narrow, overlayOpen, setOverlayOpen, sidebarId } = useSidebar(\"Sidebar\");\n\n  return (\n    <>\n      {/*\n        The overlay, on a narrow screen. A Sheet rather than a styled div: it\n        traps focus, closes on Escape and marks the rest of the page inert,\n        none of which a transform does — and without them the page behind stays\n        reachable by Tab while the menu covers it.\n\n        Mounted only when the screen is narrow. Those three behaviours are\n        exactly why it must not exist on a wide one: see the note at the top.\n      */}\n      {narrow ? (\n        <Sheet open={overlayOpen} onOpenChange={setOverlayOpen}>\n          <SheetContent side=\"left\" className=\"w-72 p-0\">\n            <SheetTitle className=\"sr-only\">{mobileTitle ?? label}</SheetTitle>\n            <nav aria-label={label} className=\"flex h-full flex-col gap-2 p-3\">\n              {children}\n            </nav>\n          </SheetContent>\n        </Sheet>\n      ) : null}\n\n      <aside\n        id={sidebarId}\n        data-slot=\"sidebar\"\n        data-state={open ? \"expanded\" : \"collapsed\"}\n        className={cn(\n          \"hidden shrink-0 border-e border-border bg-background md:block\",\n          \"transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          open ? \"w-60\" : \"w-14\",\n          className,\n        )}\n        {...props}\n      >\n        <nav aria-label={label} className=\"flex h-full flex-col gap-2 p-3\">\n          {children}\n        </nav>\n      </aside>\n    </>\n  );\n}\n\nexport function SidebarHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      className={cn(\"flex min-h-9 items-center gap-2 px-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      className={cn(\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return <div data-slot=\"sidebar-footer\" className={cn(\"mt-auto\", className)} {...props} />;\n}\n\nexport function SidebarGroup({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return <div data-slot=\"sidebar-group\" className={cn(\"grid gap-1\", className)} {...props} />;\n}\n\n/**\n * A heading for a group of links.\n *\n * Hidden rather than removed when the rail is collapsed, so the grouping\n * survives for anyone not reading the layout visually.\n */\nexport function SidebarGroupLabel({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { open, narrow } = useSidebar(\"SidebarGroupLabel\");\n\n  return (\n    <div\n      data-slot=\"sidebar-group-label\"\n      className={cn(\n        \"px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase\",\n        // The rail's collapsed state is not the overlay's: a sheet is always\n        // wide enough for its labels.\n        !open && !narrow && \"sr-only\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({ className, ...props }: ComponentPropsWithRef<\"ul\">) {\n  return <ul data-slot=\"sidebar-menu\" className={cn(\"grid gap-0.5\", className)} {...props} />;\n}\n\nexport function SidebarMenuItem({ className, ...props }: ComponentPropsWithRef<\"li\">) {\n  return <li data-slot=\"sidebar-menu-item\" className={cn(\"min-w-0\", className)} {...props} />;\n}\n\nexport interface SidebarMenuButtonProps extends ComponentPropsWithRef<\"a\"> {\n  /** Render the child as the control, for a router's own link or a button. */\n  asChild?: boolean;\n  /** The page currently being shown. */\n  isActive?: boolean;\n}\n\n/**\n * One entry in the navigation.\n *\n * `aria-current=\"page\"` when active, not merely a background colour: which page\n * you are on is information, and a highlight conveys it to exactly one kind of\n * reader.\n */\nexport function SidebarMenuButton({\n  className,\n  asChild = false,\n  isActive = false,\n  children,\n  ...props\n}: SidebarMenuButtonProps) {\n  const Component = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Component\n      data-slot=\"sidebar-menu-button\"\n      data-active={isActive || undefined}\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        \"flex h-9 w-full items-center gap-2.5 rounded-md px-2 text-sm\",\n        \"transition-colors duration-[var(--duration-fast)]\",\n        \"[&>svg]:size-4 [&>svg]:shrink-0\",\n        isActive\n          ? \"bg-accent font-medium text-accent-foreground\"\n          : \"text-muted-foreground hover:bg-accent/60 hover:text-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n\n/**\n * The text of a menu entry.\n *\n * Visually hidden rather than removed when the rail is collapsed. Removing it\n * leaves a control whose only content is an icon, and an icon has no accessible\n * name — which is how a collapsed sidebar becomes a column of buttons all\n * announced as \"link\".\n */\nexport function SidebarMenuLabel({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  const { open, narrow } = useSidebar(\"SidebarMenuLabel\");\n\n  return (\n    <span\n      data-slot=\"sidebar-menu-label\"\n      className={cn(\"min-w-0 truncate\", !open && !narrow && \"sr-only\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Overrides the label, which otherwise says what pressing it will do. */\n  label?: string;\n}\n\nexport function SidebarTrigger({ className, label, ...props }: SidebarTriggerProps) {\n  const { open, narrow, overlayOpen, toggle, sidebarId } = useSidebar(\"SidebarTrigger\");\n\n  const expanded = narrow ? overlayOpen : open;\n  const fallback = narrow\n    ? overlayOpen\n      ? \"Close navigation\"\n      : \"Open navigation\"\n    : open\n      ? \"Collapse navigation\"\n      : \"Expand navigation\";\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"sidebar-trigger\"\n      aria-expanded={expanded}\n      // The rail is what this controls. The overlay is a dialog that names\n      // itself, and pointing at an element CSS has hidden helps nobody.\n      aria-controls={narrow ? undefined : sidebarId}\n      // Says what pressing it does, not what the state currently is. \"Collapse\n      // navigation\" while it is expanded is the useful half.\n      aria-label={label ?? fallback}\n      onClick={toggle}\n      className={cn(\n        \"grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden className=\"size-4\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"M9 4v16\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      </svg>\n    </button>\n  );\n}\n\n/** The region the sidebar sits beside. */\nexport function SidebarInset({ className, ...props }: ComponentPropsWithRef<\"main\">) {\n  return (\n    <main data-slot=\"sidebar-inset\" className={cn(\"min-w-0 flex-1\", className)} {...props} />\n  );\n}\n"],"mappings":"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"}

package/dist/components/skeleton/index.d.ts

@@ -1,2 +1,2 @@
-import { Skeleton } from "./skeleton.js";
-export { Skeleton };
+import { Skeleton, SkeletonProps } from "./skeleton.js";
+export { Skeleton, type SkeletonProps };

package/dist/components/skeleton/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: [],
 	registryDependencies: [],
 	files: ["skeleton.tsx"],
-	a11y: "Hidden from assistive technology. Put aria-busy on the container that owns the loading data so the state is announced once instead of once per placeholder."
+	a11y: "Hidden from assistive technology. Put aria-busy on the container that owns the loading data so the state is announced once instead of once per placeholder. Pulse and shimmer are decoration and stop under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/skeleton/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/skeleton/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"skeleton\",\n  title: \"Skeleton\",\n  description: \"A shaped placeholder that holds layout while content loads.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"skeleton.tsx\"],\n  a11y:\n    \"Hidden from assistive technology. Put aria-busy on the container that owns the loading \" +\n    \"data so the state is announced once instead of once per placeholder.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAEJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/skeleton/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"skeleton\",\n  title: \"Skeleton\",\n  description: \"A shaped placeholder that holds layout while content loads.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"skeleton.tsx\"],\n  a11y:\n    \"Hidden from assistive technology. Put aria-busy on the container that owns the loading \" +\n    \"data so the state is announced once instead of once per placeholder. Pulse and shimmer \" +\n    \"are decoration and stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAGJ,CAAC"}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,5 +1,13 @@
 import { ComponentPropsWithRef } from "react";
 //#region src/components/skeleton/skeleton.d.ts
+declare const variants: {
+  readonly pulse: "animate-pulse-soft";
+  readonly shimmer: string;
+};
+interface SkeletonProps extends ComponentPropsWithRef<"span"> {
+  /** `pulse` fades in and out; `shimmer` sweeps a band of light across. */
+  variant?: keyof typeof variants;
+}
 /**
  * Placeholder shown while content loads.
  *
@@ -13,8 +21,12 @@ import { ComponentPropsWithRef } from "react";
  * invalid HTML that the parser corrects, which breaks hydration rather than
  * merely looking wrong. Phrasing content is valid in both places, and `block`
  * keeps the box behaviour identical.
+ *
+ * `variant="shimmer"` swaps the pulse for a band of light sweeping across. Both
+ * are decoration: under reduced motion they stop and the placeholder is a plain
+ * block.
  */
-declare function Skeleton({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+declare function Skeleton({ className, variant, ...props }: SkeletonProps): import("react").JSX.Element;
 //#endregion
-export { Skeleton };
+export { Skeleton, SkeletonProps };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,WAAW,cAAc,SAAS,gDAA6B,IAAA"}
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"mappings":";;cAiBM;WAAA;WAAA;;UAUW,sBAAsB;;EAErC,uBAAuB;;;;;;;;;;;;;;;;;;;;iBAqBT,WAAW,WAAW,YAAsB,SAAS,gCAAa,IAAA"}

package/dist/components/skeleton/skeleton.js

@@ -1,6 +1,15 @@
 import { cn } from "../../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
+const PREFIX = "dowel-skeleton";
+const STYLES = `
+@keyframes ${PREFIX}-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
+[data-slot=skeleton][data-variant=shimmer]:dir(rtl){animation-direction:reverse}
+`;
+const variants = {
+	pulse: "animate-pulse-soft",
+	shimmer: cn("bg-[linear-gradient(90deg,transparent_30%,color-mix(in_oklab,var(--color-background)_55%,transparent)_50%,transparent_70%)]", "bg-[length:200%_100%] bg-no-repeat", "animate-[dowel-skeleton-shimmer_calc(1.6s*var(--motion-scale))_linear_infinite]")
+};
 /**
 * Placeholder shown while content loads.
 *
@@ -14,14 +23,24 @@ import { jsx } from "react/jsx-runtime";
 * invalid HTML that the parser corrects, which breaks hydration rather than
 * merely looking wrong. Phrasing content is valid in both places, and `block`
 * keeps the box behaviour identical.
+*
+* `variant="shimmer"` swaps the pulse for a band of light sweeping across. Both
+* are decoration: under reduced motion they stop and the placeholder is a plain
+* block.
 */
-function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
+function Skeleton({ className, variant = "pulse", ...props }) {
+	const shimmer = variant === "shimmer";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [shimmer ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsx("span", {
 		"data-slot": "skeleton",
+		"data-variant": shimmer ? "shimmer" : void 0,
 		"aria-hidden": "true",
-		className: cn("block animate-pulse-soft rounded-md bg-muted", className),
+		className: cn("block rounded-md bg-muted", variants[variant], className),
 		...props
-	});
+	})] });
 }
 //#endregion
 export { Skeleton };

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Placeholder shown while content loads.\n *\n * Rendered aria-hidden: the shape is meaningless to a screen reader, and the\n * loading state belongs on the region that owns the data (via aria-busy) rather\n * than on each individual placeholder.\n *\n * A `span` set to `display: block`, not a `div`. A skeleton stands in for\n * whatever was going to be there, so it gets placed inside paragraphs, headings\n * and labels as often as inside layout containers — and a `div` inside a `p` is\n * invalid HTML that the parser corrects, which breaks hydration rather than\n * merely looking wrong. Phrasing content is valid in both places, and `block`\n * keeps the box behaviour identical.\n */\nexport function Skeleton({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"block animate-pulse-soft rounded-md bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAwC;CAC/E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["// Motion from SmoothUI SkeletonLoader (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst PREFIX = \"dowel-skeleton\";\n\n/* The highlight travels from the inline start to the inline end. The gradient\n * is twice the element's width, so moving its position from 150% to -50%\n * carries the bright band from just outside one edge to just outside the other. */\nconst STYLES = `\n@keyframes ${PREFIX}-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}\n[data-slot=skeleton][data-variant=shimmer]:dir(rtl){animation-direction:reverse}\n`;\n\n/* A plain map rather than cva: one axis of two values does not justify adding a\n * dependency to a component that had none. */\nconst variants = {\n  pulse: \"animate-pulse-soft\",\n  // Spelled out because Tailwind reads class names from the source.\n  shimmer: cn(\n    \"bg-[linear-gradient(90deg,transparent_30%,color-mix(in_oklab,var(--color-background)_55%,transparent)_50%,transparent_70%)]\",\n    \"bg-[length:200%_100%] bg-no-repeat\",\n    \"animate-[dowel-skeleton-shimmer_calc(1.6s*var(--motion-scale))_linear_infinite]\",\n  ),\n} as const;\n\nexport interface SkeletonProps extends ComponentPropsWithRef<\"span\"> {\n  /** `pulse` fades in and out; `shimmer` sweeps a band of light across. */\n  variant?: keyof typeof variants;\n}\n\n/**\n * Placeholder shown while content loads.\n *\n * Rendered aria-hidden: the shape is meaningless to a screen reader, and the\n * loading state belongs on the region that owns the data (via aria-busy) rather\n * than on each individual placeholder.\n *\n * A `span` set to `display: block`, not a `div`. A skeleton stands in for\n * whatever was going to be there, so it gets placed inside paragraphs, headings\n * and labels as often as inside layout containers — and a `div` inside a `p` is\n * invalid HTML that the parser corrects, which breaks hydration rather than\n * merely looking wrong. Phrasing content is valid in both places, and `block`\n * keeps the box behaviour identical.\n *\n * `variant=\"shimmer\"` swaps the pulse for a band of light sweeping across. Both\n * are decoration: under reduced motion they stop and the placeholder is a plain\n * block.\n */\nexport function Skeleton({ className, variant = \"pulse\", ...props }: SkeletonProps) {\n  const shimmer = variant === \"shimmer\";\n\n  return (\n    <>\n      {shimmer ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <span\n        data-slot=\"skeleton\"\n        data-variant={shimmer ? \"shimmer\" : undefined}\n        aria-hidden=\"true\"\n        className={cn(\"block rounded-md bg-muted\", variants[variant], className)}\n        {...props}\n      />\n    </>\n  );\n}\n"],"mappings":";;;AAKA,MAAM,SAAS;AAKf,MAAM,SAAS;aACF,OAAO;;;AAMpB,MAAM,WAAW;CACf,OAAO;CAEP,SAAS,GACP,+HACA,sCACA,iFACF;AACF;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,SAAS,EAAE,WAAW,UAAU,SAAS,GAAG,SAAwB;CAClF,MAAM,UAAU,YAAY;CAE5B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,UACC,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,IACL,MACJ,oBAAC,QAAD;EACE,aAAU;EACV,gBAAc,UAAU,YAAY,KAAA;EACpC,eAAY;EACZ,WAAW,GAAG,6BAA6B,SAAS,UAAU,SAAS;EACvE,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/slide-to-confirm/index.d.ts

@@ -0,0 +1,2 @@
+import { SlideToConfirm, SlideToConfirmProps, slideSpring, slideToConfirmVariants } from "./slide-to-confirm.js";
+export { SlideToConfirm, type SlideToConfirmProps, slideSpring, slideToConfirmVariants };

package/dist/components/slide-to-confirm/index.js

@@ -0,0 +1,2 @@
+import { SlideToConfirm, slideSpring, slideToConfirmVariants } from "./slide-to-confirm.js";
+export { SlideToConfirm, slideSpring, slideToConfirmVariants };

package/dist/components/slide-to-confirm/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/slide-to-confirm/meta.ts
+const meta = defineMeta({
+	name: "slide-to-confirm",
+	title: "Slide to Confirm",
+	description: "A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.",
+	category: "form",
+	status: "beta",
+	dependencies: [
+		"class-variance-authority",
+		"motion",
+		"radix-ui"
+	],
+	registryDependencies: [],
+	files: ["slide-to-confirm.tsx"],
+	a11y: "The grip is a real button named by the label and described by a hint. Pressing and holding Enter or Space (or holding the pointer still on it) carries the grip across over holdDuration and confirms; letting go early sends it back, so dragging is never the only way through. The result (\"Confirmed\" / \"Shutting down…\") is announced through a polite status region. The grip travels toward the inline end and its arrow mirrors in right-to-left layouts. Under reduced motion the springs are instant, the shimmer stops and the hold still works."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/slide-to-confirm/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/slide-to-confirm/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"slide-to-confirm\",\n  title: \"Slide to Confirm\",\n  description:\n    \"A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"slide-to-confirm.tsx\"],\n  a11y:\n    \"The grip is a real button named by the label and described by a hint. Pressing and holding Enter or \" +\n    \"Space (or holding the pointer still on it) carries the grip across over holdDuration and confirms; \" +\n    'letting go early sends it back, so dragging is never the only way through. The result (\"Confirmed\" / ' +\n    '\"Shutting down…\") is announced through a polite status region. The grip travels toward the inline end ' +\n    \"and its arrow mirrors in right-to-left layouts. Under reduced motion the springs are instant, the \" +\n    \"shimmer stops and the hold still works.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc;EAAC;EAA4B;EAAU;CAAU;CAC/D,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAMJ,CAAC"}

package/dist/components/slide-to-confirm/slide-to-confirm.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/slide-to-confirm/slide-to-confirm.d.ts
+/** Maps Speed (0–100) to a near-critically damped spring. */
+declare function slideSpring(speed: number): {
+  type: "spring";
+  stiffness: number;
+  damping: number;
+};
+declare const slideToConfirmVariants: (props?: ({
+  variant?: "confirm" | "power" | null | undefined;
+  fill?: "light" | "dark" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SlideToConfirmProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof slideToConfirmVariants> {
+  /** Called once each time the slide completes. */
+  onConfirm?: () => void;
+  /** Names the grip and shows on the track. Defaults per variant. */
+  label?: string;
+  /** Shown and announced once confirmed ("Confirmed" / "Shutting down…"). */
+  confirmedLabel?: string;
+  /** Instructions linked to the grip with aria-describedby. */
+  hint?: string;
+  disabled?: boolean;
+  /** Milliseconds before it resets itself; `null` stays confirmed. 1100 (confirm) / 2000 (power). */
+  resetAfter?: number | null;
+  /** How long Enter, Space or a still pointer must be held to confirm (ms). Default 1000. */
+  holdDuration?: number;
+  /** Spring speed for the snap-back and morph, 0–100. Default 50. */
+  speed?: number;
+  /** Track radius in px, 0–28. The grip and wash use corner − 4. Default 28. */
+  corner?: number;
+}
+/** A slide-to-confirm track whose grip also confirms on a press-and-hold. */
+declare function SlideToConfirm({ className, style, variant, fill, stroke, onConfirm, label, confirmedLabel, hint, disabled, resetAfter, holdDuration, speed, corner, ...props }: SlideToConfirmProps): import("react").JSX.Element;
+//#endregion
+export { SlideToConfirm, SlideToConfirmProps, slideSpring, slideToConfirmVariants };
+//# sourceMappingURL=slide-to-confirm.d.ts.map

package/dist/components/slide-to-confirm/slide-to-confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-to-confirm.d.ts","names":[],"sources":["../../../src/components/slide-to-confirm/slide-to-confirm.tsx"],"mappings":";;;;iBAkFgB,YAAY;;;;;cAKtB,yBAAsB;;;;6CAsB3B;UASgB,4BAEb,KAAK,2CACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAIc,iBACd,WACA,OACA,SACA,MACA,QACA,WACA,OACA,gBACA,MACA,UACA,YACA,cACA,OACA,WACG,SACF,sCAAmB,IAAA"}