@zentauri-ui/zentauri-components 1.0.0 → 1.1.1

package/dist/ui/file-upload.js

@@ -0,0 +1,142 @@
+"use client";
+'use strict';
+
+var chunkWZ2GOU2J_js = require('../chunk-WZ2GOU2J.js');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var fileUploadVariants = classVarianceAuthority.cva(
+  "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  {
+    variants: {
+      appearance: {
+        idle: "border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]",
+        active: "border-violet-400/70 bg-violet-500/10 text-white",
+        disabled: "cursor-not-allowed opacity-50",
+        error: "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
+        success: "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
+        warning: "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
+        info: "border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
+        neutral: "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
+        purple: "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
+        indigo: "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
+        emerald: "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
+        amber: "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
+        pink: "border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
+        orange: "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
+        teal: "border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15"
+      }
+    },
+    defaultVariants: {
+      appearance: "idle"
+    }
+  }
+);
+function FileUpload({
+  className,
+  onFiles,
+  accept,
+  multiple = false,
+  disabled = false,
+  name,
+  children,
+  onChange,
+  ref,
+  appearance = "idle",
+  ...rest
+}) {
+  const inputId = react.useId();
+  const [dragOver, setDragOver] = react.useState(false);
+  const emitFiles = react.useCallback(
+    (fileList) => {
+      if (!fileList?.length) {
+        return;
+      }
+      onFiles?.(Array.from(fileList));
+    },
+    [onFiles]
+  );
+  const handleChange = react.useCallback(
+    (event) => {
+      onChange?.(event);
+      emitFiles(event.target.files);
+      event.target.value = "";
+    },
+    [emitFiles, onChange]
+  );
+  const handleDrop = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      setDragOver(false);
+      if (disabled) {
+        return;
+      }
+      emitFiles(event.dataTransfer.files);
+    },
+    [disabled, emitFiles]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "file-upload",
+      className: chunkWZ2GOU2J_js.cn(fileUploadVariants({ appearance }), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: inputId,
+            name,
+            type: "file",
+            className: "sr-only",
+            accept,
+            multiple,
+            disabled,
+            onChange: handleChange,
+            "aria-hidden": true,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: chunkWZ2GOU2J_js.cn(
+              "flex w-full cursor-pointer flex-col items-center gap-2",
+              disabled && "cursor-not-allowed"
+            ),
+            onDragEnter: (e) => {
+              e.preventDefault();
+              if (!disabled) {
+                setDragOver(true);
+              }
+            },
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!disabled) {
+                setDragOver(true);
+              }
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: handleDrop,
+            children: [
+              children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-slate-100", children: "Drop files here" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-400", children: "or click to browse from your device" })
+              ] }),
+              dragOver && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-400", children: "Drop files here" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+FileUpload.displayName = "FileUpload";
+
+exports.FileUpload = FileUpload;
+exports.fileUploadVariants = fileUploadVariants;
+//# sourceMappingURL=file-upload.js.map
+//# sourceMappingURL=file-upload.js.map

package/dist/ui/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/file-upload/variants.ts","../../src/ui/file-upload/file-upload.tsx"],"names":["cva","useId","useState","useCallback","jsxs","cn","jsx","Fragment"],"mappings":"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","file":"file-upload.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const fileUploadVariants = cva(\n  \"relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  {\n    variants: {\n      appearance: {\n        idle: \"border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]\",\n        active: \"border-violet-400/70 bg-violet-500/10 text-white\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        error: \"border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15\",\n        success: \"border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15\",\n        warning: \"border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15\",\n        info: \"border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15\",\n        neutral: \"border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15\",\n        purple: \"border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15\",\n        indigo: \"border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15\",\n        emerald: \"border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15\",\n        amber: \"border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15\",\n        pink: \"border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15\",\n        orange: \"border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15\",\n        teal: \"border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"idle\",\n    },\n  },\n);\n","\"use client\";\n\nimport { useCallback, useId, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { FileUploadProps } from \"./types\";\nimport { fileUploadVariants } from \"./variants\";\n\nexport function FileUpload({\n  className,\n  onFiles,\n  accept,\n  multiple = false,\n  disabled = false,\n  name,\n  children,\n  onChange,\n  ref,\n  appearance = \"idle\",\n  ...rest\n}: FileUploadProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const inputId = useId();\n  const [dragOver, setDragOver] = useState(false);\n\n  const emitFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList?.length) {\n        return;\n      }\n      onFiles?.(Array.from(fileList));\n    },\n    [onFiles],\n  );\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      emitFiles(event.target.files);\n      event.target.value = \"\";\n    },\n    [emitFiles, onChange],\n  );\n\n  const handleDrop = useCallback(\n    (event: React.DragEvent<HTMLLabelElement>) => {\n      event.preventDefault();\n      setDragOver(false);\n      if (disabled) {\n        return;\n      }\n      emitFiles(event.dataTransfer.files);\n    },\n    [disabled, emitFiles],\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"file-upload\"\n      className={cn(fileUploadVariants({ appearance }), className)}\n      {...rest}\n    >\n      <input\n        id={inputId}\n        name={name}\n        type=\"file\"\n        className=\"sr-only\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        aria-hidden\n        tabIndex={-1}\n      />\n      <label\n        htmlFor={inputId}\n        className={cn(\n          \"flex w-full cursor-pointer flex-col items-center gap-2\",\n          disabled && \"cursor-not-allowed\",\n        )}\n        onDragEnter={(e) => {\n          e.preventDefault();\n          if (!disabled) {\n            setDragOver(true);\n          }\n        }}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) {\n            setDragOver(true);\n          }\n        }}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={handleDrop}\n      >\n        {children ?? (\n          <>\n            <span className=\"text-base font-semibold text-slate-100\">\n              Drop files here\n            </span>\n            <span className=\"text-xs text-slate-400\">\n              or click to browse from your device\n            </span>\n          </>\n        )}\n        {\n          dragOver && (\n            <span className=\"text-xs text-slate-400\">\n              Drop files here\n            </span>\n          )\n        }\n      </label>\n    </div>\n  );\n}\n\nFileUpload.displayName = \"FileUpload\";\n"]}

package/dist/ui/file-upload.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { cn } from '../chunk-B23TPTVG.mjs';
+import { useId, useState, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var fileUploadVariants = cva(
+  "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  {
+    variants: {
+      appearance: {
+        idle: "border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]",
+        active: "border-violet-400/70 bg-violet-500/10 text-white",
+        disabled: "cursor-not-allowed opacity-50",
+        error: "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
+        success: "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
+        warning: "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
+        info: "border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
+        neutral: "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
+        purple: "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
+        indigo: "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
+        emerald: "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
+        amber: "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
+        pink: "border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
+        orange: "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
+        teal: "border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15"
+      }
+    },
+    defaultVariants: {
+      appearance: "idle"
+    }
+  }
+);
+function FileUpload({
+  className,
+  onFiles,
+  accept,
+  multiple = false,
+  disabled = false,
+  name,
+  children,
+  onChange,
+  ref,
+  appearance = "idle",
+  ...rest
+}) {
+  const inputId = useId();
+  const [dragOver, setDragOver] = useState(false);
+  const emitFiles = useCallback(
+    (fileList) => {
+      if (!fileList?.length) {
+        return;
+      }
+      onFiles?.(Array.from(fileList));
+    },
+    [onFiles]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      onChange?.(event);
+      emitFiles(event.target.files);
+      event.target.value = "";
+    },
+    [emitFiles, onChange]
+  );
+  const handleDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      setDragOver(false);
+      if (disabled) {
+        return;
+      }
+      emitFiles(event.dataTransfer.files);
+    },
+    [disabled, emitFiles]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "file-upload",
+      className: cn(fileUploadVariants({ appearance }), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            name,
+            type: "file",
+            className: "sr-only",
+            accept,
+            multiple,
+            disabled,
+            onChange: handleChange,
+            "aria-hidden": true,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "flex w-full cursor-pointer flex-col items-center gap-2",
+              disabled && "cursor-not-allowed"
+            ),
+            onDragEnter: (e) => {
+              e.preventDefault();
+              if (!disabled) {
+                setDragOver(true);
+              }
+            },
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!disabled) {
+                setDragOver(true);
+              }
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: handleDrop,
+            children: [
+              children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-slate-100", children: "Drop files here" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: "or click to browse from your device" })
+              ] }),
+              dragOver && /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: "Drop files here" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload, fileUploadVariants };
+//# sourceMappingURL=file-upload.mjs.map
+//# sourceMappingURL=file-upload.mjs.map

package/dist/ui/file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/file-upload/variants.ts","../../src/ui/file-upload/file-upload.tsx"],"names":[],"mappings":"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","file":"file-upload.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const fileUploadVariants = cva(\n  \"relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  {\n    variants: {\n      appearance: {\n        idle: \"border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]\",\n        active: \"border-violet-400/70 bg-violet-500/10 text-white\",\n        disabled: \"cursor-not-allowed opacity-50\",\n        error: \"border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15\",\n        success: \"border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15\",\n        warning: \"border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15\",\n        info: \"border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15\",\n        neutral: \"border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15\",\n        purple: \"border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15\",\n        indigo: \"border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15\",\n        emerald: \"border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15\",\n        amber: \"border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15\",\n        pink: \"border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15\",\n        orange: \"border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15\",\n        teal: \"border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"idle\",\n    },\n  },\n);\n","\"use client\";\n\nimport { useCallback, useId, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { FileUploadProps } from \"./types\";\nimport { fileUploadVariants } from \"./variants\";\n\nexport function FileUpload({\n  className,\n  onFiles,\n  accept,\n  multiple = false,\n  disabled = false,\n  name,\n  children,\n  onChange,\n  ref,\n  appearance = \"idle\",\n  ...rest\n}: FileUploadProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const inputId = useId();\n  const [dragOver, setDragOver] = useState(false);\n\n  const emitFiles = useCallback(\n    (fileList: FileList | null) => {\n      if (!fileList?.length) {\n        return;\n      }\n      onFiles?.(Array.from(fileList));\n    },\n    [onFiles],\n  );\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n      emitFiles(event.target.files);\n      event.target.value = \"\";\n    },\n    [emitFiles, onChange],\n  );\n\n  const handleDrop = useCallback(\n    (event: React.DragEvent<HTMLLabelElement>) => {\n      event.preventDefault();\n      setDragOver(false);\n      if (disabled) {\n        return;\n      }\n      emitFiles(event.dataTransfer.files);\n    },\n    [disabled, emitFiles],\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"file-upload\"\n      className={cn(fileUploadVariants({ appearance }), className)}\n      {...rest}\n    >\n      <input\n        id={inputId}\n        name={name}\n        type=\"file\"\n        className=\"sr-only\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        onChange={handleChange}\n        aria-hidden\n        tabIndex={-1}\n      />\n      <label\n        htmlFor={inputId}\n        className={cn(\n          \"flex w-full cursor-pointer flex-col items-center gap-2\",\n          disabled && \"cursor-not-allowed\",\n        )}\n        onDragEnter={(e) => {\n          e.preventDefault();\n          if (!disabled) {\n            setDragOver(true);\n          }\n        }}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) {\n            setDragOver(true);\n          }\n        }}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={handleDrop}\n      >\n        {children ?? (\n          <>\n            <span className=\"text-base font-semibold text-slate-100\">\n              Drop files here\n            </span>\n            <span className=\"text-xs text-slate-400\">\n              or click to browse from your device\n            </span>\n          </>\n        )}\n        {\n          dragOver && (\n            <span className=\"text-xs text-slate-400\">\n              Drop files here\n            </span>\n          )\n        }\n      </label>\n    </div>\n  );\n}\n\nFileUpload.displayName = \"FileUpload\";\n"]}

package/dist/ui/slider.d.mts

@@ -0,0 +1,83 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const sliderRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderRangeVariants: (props?: ({
+    appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "amber" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type SliderRootVariantProps = VariantProps<typeof sliderRootVariants>;
+type SliderThumbVariantProps = VariantProps<typeof sliderThumbVariants>;
+type SliderProps = SliderRootVariantProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    disabled?: boolean;
+    appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+    /** Label for the slider group (accessibility). */
+    "aria-label"?: string;
+    /** Optional visible label id */
+    "aria-labelledby"?: string;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
+type SliderTrackProps = ComponentPropsWithoutRef<"div"> & VariantProps<typeof sliderTrackVariants>;
+type SliderRangeProps = ComponentPropsWithoutRef<"div"> & VariantProps<typeof sliderRangeVariants>;
+type SliderThumbProps = SliderThumbVariantProps & ComponentPropsWithoutRef<"div">;
+type RangeSliderProps = SliderRootVariantProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+    disabled?: boolean;
+    appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
+
+declare function Slider({ className, size, min, max, step, value: valueProp, defaultValue, onValueChange, disabled, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, ref, ...rest }: SliderProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace Slider {
+    var displayName: string;
+}
+declare function SliderTrack({ className, ref: refProp, ...rest }: SliderTrackProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SliderTrack {
+    var displayName: string;
+}
+declare function SliderRange({ className, ref, ...rest }: SliderRangeProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SliderRange {
+    var displayName: string;
+}
+declare function SliderThumb({ className, ref: refProp, ...rest }: SliderThumbProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SliderThumb {
+    var displayName: string;
+}
+declare function RangeSlider({ className, size, min, max, step, value: valueProp, defaultValue, onValueChange, disabled, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: RangeSliderProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace RangeSlider {
+    var displayName: string;
+}
+
+export { RangeSlider, type RangeSliderProps, Slider, type SliderProps, SliderRange, type SliderRangeProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, sliderRangeVariants, sliderRootVariants, sliderThumbVariants, sliderTrackVariants };

package/dist/ui/slider.d.ts

@@ -0,0 +1,83 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const sliderRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderRangeVariants: (props?: ({
+    appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "amber" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderThumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type SliderRootVariantProps = VariantProps<typeof sliderRootVariants>;
+type SliderThumbVariantProps = VariantProps<typeof sliderThumbVariants>;
+type SliderProps = SliderRootVariantProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    disabled?: boolean;
+    appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+    /** Label for the slider group (accessibility). */
+    "aria-label"?: string;
+    /** Optional visible label id */
+    "aria-labelledby"?: string;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
+type SliderTrackProps = ComponentPropsWithoutRef<"div"> & VariantProps<typeof sliderTrackVariants>;
+type SliderRangeProps = ComponentPropsWithoutRef<"div"> & VariantProps<typeof sliderRangeVariants>;
+type SliderThumbProps = SliderThumbVariantProps & ComponentPropsWithoutRef<"div">;
+type RangeSliderProps = SliderRootVariantProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+    disabled?: boolean;
+    appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
+
+declare function Slider({ className, size, min, max, step, value: valueProp, defaultValue, onValueChange, disabled, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, ref, ...rest }: SliderProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace Slider {
+    var displayName: string;
+}
+declare function SliderTrack({ className, ref: refProp, ...rest }: SliderTrackProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SliderTrack {
+    var displayName: string;
+}
+declare function SliderRange({ className, ref, ...rest }: SliderRangeProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SliderRange {
+    var displayName: string;
+}
+declare function SliderThumb({ className, ref: refProp, ...rest }: SliderThumbProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SliderThumb {
+    var displayName: string;
+}
+declare function RangeSlider({ className, size, min, max, step, value: valueProp, defaultValue, onValueChange, disabled, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: RangeSliderProps & {
+    ref?: Ref<HTMLDivElement>;
+}): react_jsx_runtime.JSX.Element;
+declare namespace RangeSlider {
+    var displayName: string;
+}
+
+export { RangeSlider, type RangeSliderProps, Slider, type SliderProps, SliderRange, type SliderRangeProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, sliderRangeVariants, sliderRootVariants, sliderThumbVariants, sliderTrackVariants };