@camox/ui 0.78.0 → 0.80.0

package/dist/components/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
   size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/bubble.d.ts

@@ -4,7 +4,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/bubble.d.ts
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
   align?: "start" | "end";

package/dist/components/button.d.ts

@@ -2,7 +2,7 @@ import { Button as Button$1 } from "@base-ui/react/button";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
   size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;

package/dist/components/slider.d.ts

@@ -0,0 +1,14 @@
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+//#region src/components/slider.d.ts
+/**
+ * A single-thumb slider. `label` names it to assistive technology, and `valueText` reads its value
+ * as words, such as a step's name. `marks` draws a tick at each of that many evenly spaced
+ * values, for a slider with a few named steps.
+ */
+declare function Slider({ className, label, valueText, marks, ...props }: Slider$1.Root.Props<number> & {
+  label: string;
+  valueText?: string;
+  marks?: number;
+}): import("react").JSX.Element;
+//#endregion
+export { Slider };

package/dist/components/slider.js

@@ -0,0 +1,42 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+
+//#region src/components/slider.tsx
+/**
+* A single-thumb slider. `label` names it to assistive technology, and `valueText` reads its value
+* as words, such as a step's name. `marks` draws a tick at each of that many evenly spaced
+* values, for a slider with a few named steps.
+*/
+function Slider({ className, label, valueText, marks, ...props }) {
+	return /* @__PURE__ */ jsx(Slider$1.Root, {
+		"data-slot": "slider",
+		thumbAlignment: "edge",
+		className: cn("data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Slider$1.Control, {
+			"data-slot": "slider-control",
+			className: "relative flex h-5 w-full touch-none items-center select-none data-disabled:cursor-not-allowed",
+			children: [/* @__PURE__ */ jsx(Slider$1.Track, {
+				"data-slot": "slider-track",
+				className: "bg-muted relative h-1.5 w-full grow rounded-full",
+				children: marks !== void 0 && marks > 1 && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-x-2 inset-y-0",
+					children: Array.from({ length: marks }, (_, index) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "bg-muted-foreground/40 absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full",
+						style: { left: `${index / (marks - 1) * 100}%` }
+					}, index))
+				})
+			}), /* @__PURE__ */ jsx(Slider$1.Thumb, {
+				"data-slot": "slider-thumb",
+				getAriaLabel: () => label,
+				"aria-valuetext": valueText,
+				className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border-2 shadow-sm transition-[box-shadow] outline-none hover:ring-4 has-focus-visible:ring-4 data-disabled:pointer-events-none"
+			})]
+		})
+	});
+}
+
+//#endregion
+export { Slider };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/ui",
-  "version": "0.78.0",
+  "version": "0.80.0",
   "license": "UNLICENSED",
   "files": [
     "dist"
@@ -119,6 +119,10 @@
       "types": "./dist/components/spinner.d.ts",
       "default": "./dist/components/spinner.js"
     },
+    "./slider": {
+      "types": "./dist/components/slider.d.ts",
+      "default": "./dist/components/slider.js"
+    },
     "./switch": {
       "types": "./dist/components/switch.d.ts",
       "default": "./dist/components/switch.js"