@nsaa/core 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/native-select/index.d.ts

@@ -0,0 +1,3 @@
+
+import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./native-select.js";
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/native-select/native-select.d.ts

@@ -0,0 +1,9 @@
+
+import * as React from "react";
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default";
+};
+declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React.JSX.Element;
+declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/native-select/native-select.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/native-select/native-select.tsx
+function NativeSelect({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+		"data-slot": "native-select-wrapper",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-slot": "native-select",
+			"data-size": size,
+			className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			...props
+		}), /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon",
+			children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		})]
+	});
+}
+function NativeSelectOption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("option", {
+		"data-slot": "native-select-option",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+}
+function NativeSelectOptGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("optgroup", {
+		"data-slot": "native-select-optgroup",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+}
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/pagination/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,18 @@
+
+import { Button } from "../button/button.js";
+import * as React from "react";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/pagination/pagination.js

@@ -0,0 +1,134 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ControlDefaultsContext } from "../lib/control-defaults.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/pagination/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		"data-slot": "pagination",
+		className: cn("mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn("flex items-center gap-0.5", className),
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+	return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
+		value: SILENT,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: isActive ? "outline" : "ghost",
+			size,
+			className: cn(className),
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx("a", {
+				role: "link",
+				"aria-current": isActive ? "page" : void 0,
+				"data-slot": "pagination-link",
+				"data-active": isActive,
+				...props
+			})
+		})
+	});
+}
+const SILENT = { sound: false };
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		size: "default",
+		className: cn("pl-1.5!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			"data-icon": "inline-start",
+			className: "cn-rtl-flip",
+			children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})]
+	});
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		size: "default",
+		className: cn("pr-1.5!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			"data-icon": "inline-end",
+			className: "cn-rtl-flip",
+			children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+		})]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "1"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "19",
+					cy: "12",
+					r: "1"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "5",
+					cy: "12",
+					r: "1"
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/popover/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover.js";
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/popover/popover.d.ts

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

package/dist/popover/popover.js

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

package/dist/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+export { RadioGroup, RadioGroupItem };

package/dist/radio-group/radio-group.d.ts

@@ -0,0 +1,6 @@
+
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+declare function RadioGroup$1({ className, onValueChange, ...props }: RadioGroup.Props): import("react").JSX.Element;
+declare function RadioGroupItem({ className, ...props }: Radio.Root.Props): import("react").JSX.Element;
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };

package/dist/radio-group/radio-group.js

@@ -0,0 +1,33 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/radio-group/radio-group.tsx
+function RadioGroup$1({ className, onValueChange, ...props }) {
+	const cue = useCue("radio-group");
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group",
+		className: cn("grid w-full gap-2", className),
+		onValueChange: (value, details) => {
+			onValueChange?.(value, details);
+			if (!details.isCanceled) cue("change");
+		},
+		...props
+	});
+}
+function RadioGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+		})
+	});
+}
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };

package/dist/select/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/select/select.d.ts

@@ -0,0 +1,16 @@
+
+import * as React from "react";
+import { Select } from "@base-ui/react/select";
+declare function Select$1<Value, Multiple extends boolean | undefined = false>({ onValueChange, ...props }: Select.Root.Props<Value, Multiple>): React.JSX.Element;
+declare function SelectGroup({ className, ...props }: Select.Group.Props): React.JSX.Element;
+declare function SelectValue({ className, ...props }: Select.Value.Props): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: Select.Trigger.Props & {
+  size?: "sm" | "default";
+}): React.JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: Select.Popup.Props & Pick<Select.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: Select.GroupLabel.Props): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: Select.Item.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: Select.Separator.Props): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select.ScrollUpArrow>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select.ScrollDownArrow>): React.JSX.Element;
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/select/select.js

@@ -0,0 +1,148 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+// src/select/select.tsx
+function Select$1({ onValueChange, ...props }) {
+	const cue = useCue("select");
+	return /* @__PURE__ */ jsx(Select.Root, {
+		onValueChange: (value, details) => {
+			onValueChange?.(value, details);
+			if (!details.isCanceled) cue("choose");
+		},
+		...props
+	});
+}
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		"data-slot": "select-group",
+		className: cn("scroll-my-1 p-1", className),
+		...props
+	});
+}
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn("flex flex-1 text-left", className),
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, { render: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "pointer-events-none size-4 text-muted-foreground",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		}) })]
+	});
+}
+function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: cn("cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		"data-slot": "select-label",
+		className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				className: "pointer-events-none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+			})
+		})]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		"data-slot": "select-separator",
+		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+		})
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		})
+	});
+}
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/separator/index.d.ts

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

package/dist/separator/separator.d.ts

@@ -0,0 +1,4 @@
+
+import { Separator } from "@base-ui/react/separator";
+declare function Separator$1({ className, orientation, ...props }: Separator.Props): import("react").JSX.Element;
+export { Separator$1 as Separator };

package/dist/separator/separator.js

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

package/dist/skeleton/index.d.ts

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

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,10 @@
+
+import * as React from "react";
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * What replaces a Skeleton once it loads (#128): it fades in over duration.fast (opacity only;
+ * feel.css), instantly under reduced motion or after keyboard input. Render it in the Skeleton's
+ * place: `{loading ? <Skeleton className="h-4 w-40" /> : <SkeletonContent>…</SkeletonContent>}`.
+ */
+declare function SkeletonContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Skeleton, SkeletonContent };

package/dist/skeleton/skeleton.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/skeleton/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+/**
+* What replaces a Skeleton once it loads (#128): it fades in over duration.fast (opacity only;
+* feel.css), instantly under reduced motion or after keyboard input. Render it in the Skeleton's
+* place: `{loading ? <Skeleton className="h-4 w-40" /> : <SkeletonContent>…</SkeletonContent>}`.
+*/
+function SkeletonContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton-content",
+		className,
+		...props
+	});
+}
+export { Skeleton, SkeletonContent };

package/dist/slider/index.d.ts

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

package/dist/slider/slider.d.ts

@@ -0,0 +1,4 @@
+
+import { Slider } from "@base-ui/react/slider";
+declare function Slider$1({ className, defaultValue, value, min, max, onValueCommitted, ...props }: Slider.Root.Props): import("react").JSX.Element;
+export { Slider$1 as Slider };

package/dist/slider/slider.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCue } from "../sound/sound-map.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+// src/slider/slider.tsx
+function Slider$1({ className, defaultValue, value, min = 0, max = 100, onValueCommitted, ...props }) {
+	const cue = useCue("slider");
+	const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		className: cn("data-horizontal:w-full data-vertical:h-full", className),
+		"data-slot": "slider",
+		defaultValue,
+		value,
+		min,
+		max,
+		thumbAlignment: "edge",
+		onValueCommitted: (next, details) => {
+			onValueCommitted?.(next, details);
+			cue("commit");
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(Slider.Control, {
+			className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				"data-slot": "slider-track",
+				className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
+				children: /* @__PURE__ */ jsx(Slider.Indicator, {
+					"data-slot": "slider-range",
+					className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+				})
+			}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+				"data-slot": "slider-thumb",
+				className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+			}, index))]
+		})
+	});
+}
+export { Slider$1 as Slider };