@dowel-ui/react 0.1.0

package/dist/components/select/select.js

@@ -0,0 +1,128 @@
+"use client";
+import { focusRing, invalidStyles } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Select } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/select/select.tsx
+/**
+* Picks one value from a list.
+*
+* For a short, known list. Past roughly a dozen options people want to type
+* rather than scroll — reach for Combobox there. Unlike a native `<select>`,
+* the options are real elements, so they can carry icons and descriptions.
+*/
+const Select$1 = Select.Root;
+const SelectGroup = Select.Group;
+const SelectValue = Select.Value;
+const selectTriggerVariants = cva(cn("flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background", "whitespace-nowrap text-foreground shadow-xs", "transition-[border-color,box-shadow] duration-[var(--duration-fast)]", "data-[placeholder]:text-muted-foreground", "focus-visible:border-ring", "disabled:cursor-not-allowed disabled:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2", focusRing, invalidStyles), {
+	variants: { triggerSize: {
+		sm: "h-8 px-2.5 text-sm",
+		md: "h-9 px-3 text-sm",
+		lg: "h-10 px-3.5 text-base"
+	} },
+	defaultVariants: { triggerSize: "md" }
+});
+function SelectTrigger({ className, triggerSize, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		className: cn(selectTriggerVariants({ triggerSize }), className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				className: "size-4 opacity-60",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "m7 10 5 5 5-5",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})]
+	});
+}
+/** Scroll affordance shown only when the list overflows. Decorative. */
+function ScrollButton({ direction, className, ...props }) {
+	const Comp = direction === "up" ? Select.ScrollUpButton : Select.ScrollDownButton;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": `select-scroll-${direction}`,
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "size-4 opacity-60",
+			children: /* @__PURE__ */ jsx("path", {
+				d: direction === "up" ? "m7 14 5-5 5 5" : "m7 10 5 5 5-5",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
+function SelectContent({ className, children, position = "popper", sideOffset = 6, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
+		"data-slot": "select-content",
+		position,
+		sideOffset: position === "popper" ? sideOffset : void 0,
+		className: cn("relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]", "min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover", "p-1 text-popover-foreground shadow-lg", "origin-[var(--radix-select-content-transform-origin)]", "data-[state=closed]:animate-float-out data-[state=open]:animate-float-in", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollButton, { direction: "up" }),
+			/* @__PURE__ */ jsx(Select.Viewport, {
+				className: "p-0",
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollButton, { direction: "down" })
+		]
+	}) });
+}
+function SelectItem({ className, label, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [label === void 0 ? /* @__PURE__ */ jsx(Select.ItemText, { children }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Select.ItemText, { children: label }), children] }), /* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 grid size-4 place-items-center",
+			children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				className: "size-3.5",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "m5 13 4 4L19 7",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}) })
+		})]
+	});
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Label, {
+		"data-slot": "select-label",
+		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
+		...props
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		"data-slot": "select-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { focusRing, invalidStyles } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Picks one value from a list.\n *\n * For a short, known list. Past roughly a dozen options people want to type\n * rather than scroll — reach for Combobox there. Unlike a native `<select>`,\n * the options are real elements, so they can carry icons and descriptions.\n */\nexport const Select = SelectPrimitive.Root;\nexport const SelectGroup = SelectPrimitive.Group;\nexport const SelectValue = SelectPrimitive.Value;\n\nconst selectTriggerVariants = cva(\n  cn(\n    \"flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n    \"whitespace-nowrap text-foreground shadow-xs\",\n    \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n    \"data-[placeholder]:text-muted-foreground\",\n    \"focus-visible:border-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\n    focusRing,\n    invalidStyles,\n  ),\n  {\n    variants: {\n      triggerSize: {\n        sm: \"h-8 px-2.5 text-sm\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-10 px-3.5 text-base\",\n      },\n    },\n    defaultVariants: {\n      triggerSize: \"md\",\n    },\n  },\n);\n\nexport interface SelectTriggerProps\n  extends\n    ComponentPropsWithRef<typeof SelectPrimitive.Trigger>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nexport function SelectTrigger({\n  className,\n  triggerSize,\n  children,\n  ...props\n}: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(selectTriggerVariants({ triggerSize }), className)}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-60\">\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\n/** Scroll affordance shown only when the list overflows. Decorative. */\nfunction ScrollButton({\n  direction,\n  className,\n  ...props\n}: {\n  direction: \"up\" | \"down\";\n} & ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>) {\n  const Comp =\n    direction === \"up\" ? SelectPrimitive.ScrollUpButton : SelectPrimitive.ScrollDownButton;\n\n  return (\n    <Comp\n      data-slot={`select-scroll-${direction}`}\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-60\">\n        <path\n          d={direction === \"up\" ? \"m7 14 5-5 5 5\" : \"m7 10 5 5 5-5\"}\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </Comp>\n  );\n}\n\nexport type SelectContentProps = ComponentPropsWithRef<typeof SelectPrimitive.Content>;\n\nexport function SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  sideOffset = 6,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        position={position}\n        sideOffset={position === \"popper\" ? sideOffset : undefined}\n        className={cn(\n          \"relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]\",\n          \"min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover\",\n          \"p-1 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-select-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          position === \"popper\" && \"w-full min-w-[var(--radix-select-trigger-width)]\",\n          className,\n        )}\n        {...props}\n      >\n        <ScrollButton direction=\"up\" />\n        <SelectPrimitive.Viewport className=\"p-0\">{children}</SelectPrimitive.Viewport>\n        <ScrollButton direction=\"down\" />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport interface SelectItemProps extends ComponentPropsWithRef<typeof SelectPrimitive.Item> {\n  /**\n   * What the trigger shows once this option is chosen.\n   *\n   * The primitive clones the item's text into the trigger, so a rich option —\n   * a name with a description under it — would otherwise drag all of that into\n   * a one-line trigger. Give the label here and the rest as children.\n   */\n  label?: ReactNode;\n}\n\nexport function SelectItem({ className, label, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {label === undefined ? (\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      ) : (\n        <>\n          <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>\n          {children}\n        </>\n      )}\n      {/* Decorative: selection is already announced through aria-selected. */}\n      <span className=\"absolute right-2 grid size-4 place-items-center\">\n        <SelectPrimitive.ItemIndicator>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { selectTriggerVariants };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Separator, SeparatorProps } from "./separator.js";
+export { Separator, type SeparatorProps };

package/dist/components/separator/index.js

@@ -0,0 +1,2 @@
+import { Separator } from "./separator.js";
+export { Separator };

package/dist/components/separator/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/separator/meta.ts
+const meta = defineMeta({
+	name: "separator",
+	title: "Separator",
+	description: "A horizontal or vertical rule that divides content.",
+	category: "layout",
+	status: "stable",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["separator.tsx"],
+	a11y: "Decorative by default and hidden from assistive technology. Set decorative={false} to expose it as a semantic separator when it divides meaningfully distinct groups."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/separator/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"separator\",\n  title: \"Separator\",\n  description: \"A horizontal or vertical rule that divides content.\",\n  category: \"layout\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"separator.tsx\"],\n  a11y:\n    \"Decorative by default and hidden from assistive technology. Set decorative={false} to \" +\n    \"expose it as a semantic separator when it divides meaningfully distinct groups.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,eAAe;CACvB,MACE;AAEJ,CAAC"}

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,15 @@
+import { Separator } from "radix-ui";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/separator/separator.d.ts
+type SeparatorProps = ComponentPropsWithRef<typeof Separator.Root>;
+/**
+ * Visual or semantic divider.
+ *
+ * Defaults to decorative, which removes it from the accessibility tree. Pass
+ * `decorative={false}` only when the rule genuinely separates two groups of
+ * content that a screen reader user needs to know are distinct.
+ */
+declare function Separator$1({ className, orientation, decorative, ...props }: SeparatorProps): import("react").JSX.Element;
+//#endregion
+export { Separator$1 as Separator, SeparatorProps };
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","names":[],"sources":["../../../src/components/separator/separator.tsx"],"mappings":";;;KAKY,iBAAiB,6BAA6B,UAAmB;;;;;;;;iBAS7D,cACd,WACA,aACA,eACG,SACF,iCAAc,IAAA"}

package/dist/components/separator/separator.js

@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils.js";
+import { Separator } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/separator/separator.tsx
+/**
+* Visual or semantic divider.
+*
+* Defaults to decorative, which removes it from the accessibility tree. Pass
+* `decorative={false}` only when the rule genuinely separates two groups of
+* content that a screen reader user needs to know are distinct.
+*/
+function Separator$1({ className, orientation = "horizontal", decorative = true, ...props }) {
+	return /* @__PURE__ */ jsx(Separator.Root, {
+		orientation,
+		decorative,
+		className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		...props
+	});
+}
+//#endregion
+export { Separator$1 as Separator };
+
+//# sourceMappingURL=separator.js.map

package/dist/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":["Separator","SeparatorPrimitive"],"sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type SeparatorProps = ComponentPropsWithRef<typeof SeparatorPrimitive.Root>;\n\n/**\n * Visual or semantic divider.\n *\n * Defaults to decorative, which removes it from the accessibility tree. Pass\n * `decorative={false}` only when the rule genuinely separates two groups of\n * content that a screen reader user needs to know are distinct.\n */\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive.Root\n      orientation={orientation}\n      decorative={decorative}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAcA,SAAgBA,YAAU,EACxB,WACA,cAAc,cACd,aAAa,MACb,GAAG,SACc;CACjB,OACE,oBAACC,UAAmB,MAApB;EACe;EACD;EACZ,WAAW,GACT,sBACA,gBAAgB,eAAe,gBAAgB,eAC/C,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { Sheet, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants } from "./sheet.js";
+export { Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants };

package/dist/components/sheet/index.js

@@ -0,0 +1,2 @@
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants } from "./sheet.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants };

package/dist/components/sheet/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/sheet/meta.ts
+const meta = defineMeta({
+	name: "sheet",
+	title: "Sheet",
+	description: "A panel that enters from an edge of the viewport for secondary content.",
+	category: "overlay",
+	status: "stable",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["sheet.tsx"],
+	a11y: "Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. For a side navigation sheet, put a nav landmark inside rather than relying on placement to convey the role."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/sheet/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"sheet\",\n  title: \"Sheet\",\n  description: \"A panel that enters from an edge of the viewport for secondary content.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"sheet.tsx\"],\n  a11y:\n    \"Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. \" +\n    \"For a side navigation sheet, put a nav landmark inside rather than relying on placement \" +\n    \"to convey the role.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,WAAW;CACnB,MACE;AAGJ,CAAC"}

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,31 @@
+import { Dialog } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/sheet/sheet.d.ts
+/**
+ * A panel that enters from an edge of the viewport.
+ *
+ * Built on the same modal primitive as Dialog, so focus management, Escape
+ * handling and page inerting are identical; only the placement and motion
+ * differ. Reach for Sheet when the content is a secondary surface — filters,
+ * details, navigation — rather than a decision that must be answered.
+ */
+declare const Sheet: import("react").FC<Dialog.DialogProps>;
+declare const SheetTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: import("react").FC<Dialog.DialogPortalProps>;
+declare const SheetClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare function SheetOverlay({ className, ...props }: ComponentPropsWithRef<typeof Dialog.Overlay>): import("react").JSX.Element;
+declare const sheetVariants: (props?: ({
+  side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends ComponentPropsWithRef<typeof Dialog.Content>, VariantProps<typeof sheetVariants> {
+  showCloseButton?: boolean;
+}
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): import("react").JSX.Element;
+declare function SheetHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function SheetFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+declare function SheetTitle({ className, ...props }: ComponentPropsWithRef<typeof Dialog.Title>): import("react").JSX.Element;
+declare function SheetDescription({ className, ...props }: ComponentPropsWithRef<typeof Dialog.Description>): import("react").JSX.Element;
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants };
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","names":[],"sources":["../../../src/components/sheet/sheet.tsx"],"mappings":";;;;;;;;;;;;cAiBa,uBAAK,GAAA,OAAA;cACL,8BAAY,0BAAA,OAAA,qCAAA,cAAA;cACZ,6BAAW,GAAA,OAAA;cACX,4BAAU,0BAAA,OAAA,mCAAA,cAAA;iBAEP,eACd,cACG,SACF,6BAA6B,OAAe,2BAAQ,IAAA;cAcjD,gBAAa;;6CAoBlB;UAEgB,0BAEb,6BAA6B,OAAe,UAC5C,oBAAoB;EACtB;;iBAGc,eACd,WACA,UACA,MACA,oBACG,SACF,oCAAiB,IAAA;iBAoCJ,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAUjE,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAajE,aACd,cACG,SACF,6BAA6B,OAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,OAAe,+BAAY,IAAA"}

package/dist/components/sheet/sheet.js

@@ -0,0 +1,90 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/sheet/sheet.tsx
+/**
+* A panel that enters from an edge of the viewport.
+*
+* Built on the same modal primitive as Dialog, so focus management, Escape
+* handling and page inerting are identical; only the placement and motion
+* differ. Reach for Sheet when the content is a secondary surface — filters,
+* details, navigation — rather than a decision that must be answered.
+*/
+const Sheet = Dialog.Root;
+const SheetTrigger = Dialog.Trigger;
+const SheetPortal = Dialog.Portal;
+const SheetClose = Dialog.Close;
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Overlay, {
+		"data-slot": "sheet-overlay",
+		className: cn("fixed inset-0 z-[var(--z-overlay)] bg-overlay", "data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in", className),
+		...props
+	});
+}
+const sheetVariants = cva(cn("fixed z-[var(--z-drawer)] flex flex-col gap-4 bg-card p-6 text-card-foreground shadow-xl", "data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in"), {
+	variants: { side: {
+		top: "inset-x-0 top-0 border-b [--slide-y:-100%]",
+		bottom: "inset-x-0 bottom-0 border-t [--slide-y:100%]",
+		left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]",
+		right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]"
+	} },
+	defaultVariants: { side: "right" }
+});
+function SheetContent({ className, children, side, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		"data-slot": "sheet-content",
+		className: cn(sheetVariants({ side }), className),
+		...props,
+		children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, {
+			"data-slot": "sheet-close",
+			"aria-label": "Close",
+			className: cn("absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", "[&_svg]:size-4", focusRing),
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "m6 6 12 12M18 6 6 18",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})
+			})
+		}) : null]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-1.5 pr-8 text-left", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: cn("text-lg leading-tight font-semibold tracking-tight", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, sheetVariants };
+
+//# sourceMappingURL=sheet.js.map

package/dist/components/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../../src/components/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A panel that enters from an edge of the viewport.\n *\n * Built on the same modal primitive as Dialog, so focus management, Escape\n * handling and page inerting are identical; only the placement and motion\n * differ. Reach for Sheet when the content is a secondary surface — filters,\n * details, navigation — rather than a decision that must be answered.\n */\nexport const Sheet = SheetPrimitive.Root;\nexport const SheetTrigger = SheetPrimitive.Trigger;\nexport const SheetPortal = SheetPrimitive.Portal;\nexport const SheetClose = SheetPrimitive.Close;\n\nexport function SheetOverlay({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst sheetVariants = cva(\n  cn(\n    \"fixed z-[var(--z-drawer)] flex flex-col gap-4 bg-card p-6 text-card-foreground shadow-xl\",\n    \"data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in\",\n  ),\n  {\n    variants: {\n      // --slide-x/--slide-y feed the shared slide keyframes, so all four sides\n      // reuse one animation pair instead of eight bespoke keyframes.\n      side: {\n        top: \"inset-x-0 top-0 border-b [--slide-y:-100%]\",\n        bottom: \"inset-x-0 bottom-0 border-t [--slide-y:100%]\",\n        left: \"inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]\",\n        right: \"inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  },\n);\n\nexport interface SheetContentProps\n  extends\n    ComponentPropsWithRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  showCloseButton?: boolean;\n}\n\nexport function SheetContent({\n  className,\n  children,\n  side,\n  showCloseButton = true,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            aria-label=\"Close\"\n            className={cn(\n              \"absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n              \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n              \"[&_svg]:size-4\",\n              focusRing,\n            )}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m6 6 12 12M18 6 6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </SheetPrimitive.Close>\n        ) : null}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 pr-8 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { sheetVariants };\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,QAAQA,OAAe;AACpC,MAAa,eAAeA,OAAe;AAC3C,MAAa,cAAcA,OAAe;AAC1C,MAAa,aAAaA,OAAe;AAEzC,SAAgB,aAAa,EAC3B,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,iDACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,IACpB,GACE,4FACA,0EACF,GACA;CACE,UAAU,EAGR,MAAM;EACJ,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AASA,SAAgB,aAAa,EAC3B,WACA,UACA,MACA,kBAAkB,MAClB,GAAG,SACiB;CACpB,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;EAChD,GAAI;EAHN,UAAA,CAKG,UACA,kBACC,oBAACA,OAAe,OAAhB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,0FACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACe,CAAA,IACpB,IACkB;CACb,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,WAAW,EACzB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

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

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

package/dist/components/skeleton/index.js

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

package/dist/components/skeleton/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/skeleton/meta.ts
+const meta = defineMeta({
+	name: "skeleton",
+	title: "Skeleton",
+	description: "A shaped placeholder that holds layout while content loads.",
+	category: "feedback",
+	status: "stable",
+	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."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/skeleton/skeleton.d.ts
+/**
+ * Placeholder shown while content loads.
+ *
+ * Rendered aria-hidden: the shape is meaningless to a screen reader, and the
+ * loading state belongs on the region that owns the data (via aria-busy) rather
+ * than on each individual placeholder.
+ *
+ * A `span` set to `display: block`, not a `div`. A skeleton stands in for
+ * whatever was going to be there, so it gets placed inside paragraphs, headings
+ * and labels as often as inside layout containers — and a `div` inside a `p` is
+ * 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.
+ */
+declare function Skeleton({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+//#endregion
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"mappings":";;;;;;;;;;;;;;;;iBAkBgB,WAAW,cAAc,SAAS,gDAA6B,IAAA"}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+/**
+* Placeholder shown while content loads.
+*
+* Rendered aria-hidden: the shape is meaningless to a screen reader, and the
+* loading state belongs on the region that owns the data (via aria-busy) rather
+* than on each individual placeholder.
+*
+* A `span` set to `display: block`, not a `div`. A skeleton stands in for
+* whatever was going to be there, so it gets placed inside paragraphs, headings
+* and labels as often as inside layout containers — and a `div` inside a `p` is
+* 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.
+*/
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "skeleton",
+		"aria-hidden": "true",
+		className: cn("block animate-pulse-soft rounded-md bg-muted", className),
+		...props
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+import { Slider, SliderProps } from "./slider.js";
+export { Slider, type SliderProps };

package/dist/components/slider/index.js

@@ -0,0 +1,2 @@
+import { Slider } from "./slider.js";
+export { Slider };

package/dist/components/slider/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/slider/meta.ts
+const meta = defineMeta({
+	name: "slider",
+	title: "Slider",
+	description: "Selects a value, or a range, from a continuous span.",
+	category: "form",
+	status: "stable",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["slider.tsx"],
+	a11y: "Each thumb is a role=\"slider\" with arrow keys, Home/End and Page Up/Down. The name is forwarded onto the thumbs, since the root has no role — a range slider should name each thumb separately with thumbLabels. A development-only warning fires if a thumb would be unnamed. Pass aria-valuetext when the raw number is not meaningful on its own (a price, a duration). Show the current value on screen too — a slider is imprecise, so pair it with a numeric input when exactness matters."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/slider/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"slider\",\n  title: \"Slider\",\n  description: \"Selects a value, or a range, from a continuous span.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"slider.tsx\"],\n  a11y:\n    'Each thumb is a role=\"slider\" with arrow keys, Home/End and Page Up/Down. The name is ' +\n    \"forwarded onto the thumbs, since the root has no role — a range slider should name each \" +\n    \"thumb separately with thumbLabels. A development-only warning fires if a thumb would be \" +\n    \"unnamed. Pass aria-valuetext when the raw number is not meaningful on its own \" +\n    \"(a price, a duration). Show the current value on screen too — a slider is imprecise, so \" +\n    \"pair it with a numeric input when exactness matters.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAMJ,CAAC"}

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,29 @@
+import { Slider } from "radix-ui";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/slider/slider.d.ts
+/**
+ * Selects a value, or a range, from a continuous span.
+ *
+ * Renders one thumb per value, so a range slider is just two values. Sliders
+ * are imprecise by nature: if the exact number matters, pair it with a numeric
+ * input rather than asking people to land on a pixel.
+ */
+interface SliderProps extends ComponentPropsWithRef<typeof Slider.Root> {
+  /**
+   * Accessible name per thumb, in order.
+   *
+   * A range slider is two independent `role="slider"` controls, and naming both
+   * of them "Price" tells a screen reader user nothing about which one they are
+   * on. Give them distinct names — "Minimum price", "Maximum price".
+   */
+  thumbLabels?: string[];
+  /**
+   * Spoken value per thumb, in order, for values whose raw number is not
+   * meaningful on its own — a price, a duration, a rating.
+   */
+  thumbValueTexts?: string[];
+}
+declare function Slider$1({ className, value, defaultValue, min, max, thumbLabels, thumbValueTexts, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...props }: SliderProps): import("react").JSX.Element;
+//#endregion
+export { Slider$1 as Slider, SliderProps };
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","names":[],"sources":["../../../src/components/slider/slider.tsx"],"mappings":";;;;;;;;;;UAeiB,oBAAoB,6BAA6B,OAAgB;;;;;;;;EAQhF;;;;;EAKA;;iBAGc,WACd,WACA,OACA,cACA,KACA,KACA,aACA,+BAGc,8BACK,kCACD,kBACf,SACF,8BAAW,IAAA"}