@spark-ui/components 13.1.4 → 13.2.0

package/dist/skeleton/index.mjs

@@ -1,11 +1,7 @@
-import {
-  VisuallyHidden
-} from "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/skeleton/Skeleton.styles.ts
-import { cva } from "class-variance-authority";
-var skeletonStyles = cva([], {
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { V as u } from "../VisuallyHidden-KH1biLx-.mjs";
+import { cva as i } from "class-variance-authority";
+const f = i([], {
   variants: {
     isAnimated: {
       true: [
@@ -17,38 +13,31 @@ var skeletonStyles = cva([], {
     }
   },
   defaultVariants: {
-    isAnimated: true
+    isAnimated: !0
   }
-});
-
-// src/skeleton/Skeleton.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var Skeleton = ({
-  isAnimated = true,
-  label,
-  className,
-  children,
-  ref: forwardedRef,
-  ...rest
-}) => /* @__PURE__ */ jsxs(
+}), g = ({
+  isAnimated: e = !0,
+  label: a,
+  className: t,
+  children: n,
+  ref: m,
+  ...p
+}) => /* @__PURE__ */ h(
   "div",
   {
-    ref: forwardedRef,
+    ref: m,
     "data-spark-component": "skeleton",
     role: "presentation",
-    className: skeletonStyles({ isAnimated, className }),
-    ...rest,
+    className: f({ isAnimated: e, className: t }),
+    ...p,
     children: [
-      children,
-      label && /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+      n,
+      a && /* @__PURE__ */ l(u, { children: a })
     ]
   }
 );
-Skeleton.displayName = "Skeleton";
-
-// src/skeleton/SkeletonItem.styles.ts
-import { cva as cva2 } from "class-variance-authority";
-var skeletonItemStyles = cva2(["bg-neutral/dim-4", "min-h-lg min-w-lg"], {
+g.displayName = "Skeleton";
+const S = i(["bg-neutral/dim-4", "min-h-lg min-w-lg"], {
   variants: {
     shape: {
       line: ["w-full [&:last-child:not(:first-child)]:w-5/6", "rounded-lg"],
@@ -59,8 +48,7 @@ var skeletonItemStyles = cva2(["bg-neutral/dim-4", "min-h-lg min-w-lg"], {
   defaultVariants: {
     shape: "rectangle"
   }
-});
-var skeletonLineStyles = cva2(["flex flex-col", "w-full"], {
+}), y = i(["flex flex-col", "w-full"], {
   variants: {
     gap: {
       sm: "gap-sm",
@@ -74,74 +62,54 @@ var skeletonLineStyles = cva2(["flex flex-col", "w-full"], {
   defaultVariants: {
     gap: "md"
   }
-});
-
-// src/skeleton/SkeletonItem.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var getSizeValue = (size) => {
-  if (typeof size === "number") return `${size}px`;
-  return size;
-};
-var SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }) => {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ref: forwardedRef,
-      "aria-hidden": "true",
-      className: skeletonItemStyles({ shape, className }),
-      ...rest
-    }
-  );
-};
-var SkeletonRectangle = ({ width = "100%", height, ...rest }) => {
-  return /* @__PURE__ */ jsx2(
-    SkeletonItem,
-    {
-      style: {
-        "--skeleton-rect-width": getSizeValue(width),
-        "--skeleton-rect-height": getSizeValue(height)
-      },
-      className: "h-(--skeleton-rect-height) w-(--skeleton-rect-width)",
-      ...rest,
-      shape: "rectangle",
-      "data-shape": "rectangle"
-    }
-  );
-};
-var SkeletonCircle = ({ size, ...rest }) => /* @__PURE__ */ jsx2(
-  SkeletonItem,
+}), s = (e) => typeof e == "number" ? `${e}px` : e, r = ({ shape: e, className: a, ref: t, ...n }) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: t,
+    "aria-hidden": "true",
+    className: S({ shape: e, className: a }),
+    ...n
+  }
+), o = ({ width: e = "100%", height: a, ...t }) => /* @__PURE__ */ l(
+  r,
   {
-    style: { "--skeleton-circle-size": getSizeValue(size) },
+    style: {
+      "--skeleton-rect-width": s(e),
+      "--skeleton-rect-height": s(a)
+    },
+    className: "h-(--skeleton-rect-height) w-(--skeleton-rect-width)",
+    ...t,
+    shape: "rectangle",
+    "data-shape": "rectangle"
+  }
+), c = ({ size: e, ...a }) => /* @__PURE__ */ l(
+  r,
+  {
+    style: { "--skeleton-circle-size": s(e) },
     className: "size-(--skeleton-circle-size)",
-    ...rest,
+    ...a,
     shape: "circle",
     "data-shape": "circle"
   }
-);
-var SkeletonLine = ({
-  lines = 1,
-  gap: gapProp,
-  className,
-  ...rest
-}) => {
-  const gap = gapProp || "md";
-  return /* @__PURE__ */ jsx2("div", { className: skeletonLineStyles({ gap, className }), "aria-hidden": "true", children: [...new Array(lines)].map((_, index) => /* @__PURE__ */ jsx2(SkeletonItem, { ...rest, shape: "line", "data-shape": "line" }, `line_${index}`)) });
-};
-SkeletonRectangle.displayName = "Skeleton.Rectangle";
-SkeletonCircle.displayName = "Skeleton.Circle";
-SkeletonLine.displayName = "Skeleton.Line";
-
-// src/skeleton/index.ts
-var Skeleton2 = Object.assign(Skeleton, {
-  Circle: SkeletonCircle,
-  Line: SkeletonLine,
-  Rectangle: SkeletonRectangle
+), d = ({
+  lines: e = 1,
+  gap: a,
+  className: t,
+  ...n
+}) => /* @__PURE__ */ l("div", { className: y({ gap: a || "md", className: t }), "aria-hidden": "true", children: [...new Array(e)].map((p, k) => /* @__PURE__ */ l(r, { ...n, shape: "line", "data-shape": "line" }, `line_${k}`)) });
+o.displayName = "Skeleton.Rectangle";
+c.displayName = "Skeleton.Circle";
+d.displayName = "Skeleton.Line";
+const x = Object.assign(g, {
+  Circle: c,
+  Line: d,
+  Rectangle: o
 });
-Skeleton2.displayName = "Skeleton";
-SkeletonLine.displayName = "Skeleton.Line";
-SkeletonCircle.displayName = "Skeleton.Circle";
-SkeletonRectangle.displayName = "Skeleton.Rectangle";
+x.displayName = "Skeleton";
+d.displayName = "Skeleton.Line";
+c.displayName = "Skeleton.Circle";
+o.displayName = "Skeleton.Rectangle";
 export {
-  Skeleton2 as Skeleton
+  x as Skeleton
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/skeleton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":"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","names":["cva","jsx","Skeleton"]}
+{"version":3,"file":"index.mjs","sources":["../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx","../../src/skeleton/index.ts"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n  variants: {\n    isAnimated: {\n      true: [\n        '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n        '[mask-size:200%_100%]',\n        'animate-standalone-shimmer motion-reduce:animate-none!',\n      ],\n      false: [],\n    },\n  },\n  defaultVariants: {\n    isAnimated: true,\n  },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n  /**\n   * Displays an animated light effect.\n   * @default true\n   */\n  isAnimated?: boolean\n  /**\n   * Adds an accessible fallback label.\n   */\n  label?: string\n}\n\nexport const Skeleton = ({\n  isAnimated = true,\n  label,\n  className,\n  children,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n  <div\n    ref={forwardedRef}\n    data-spark-component=\"skeleton\"\n    role=\"presentation\"\n    className={skeletonStyles({ isAnimated, className })}\n    {...rest}\n  >\n    {children}\n\n    {label && <VisuallyHidden>{label}</VisuallyHidden>}\n  </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n  variants: {\n    shape: {\n      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n      rectangle: ['rounded-sm'],\n      circle: ['flex-none', 'rounded-full'],\n    },\n  },\n  defaultVariants: {\n    shape: 'rectangle',\n  },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n  variants: {\n    gap: {\n      sm: 'gap-sm',\n      md: 'gap-md',\n      lg: 'gap-lg',\n      xl: 'gap-xl',\n      '2xl': 'gap-2xl',\n      '3xl': 'gap-3xl',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n  },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n  type SkeletonItemStyleProps,\n  skeletonItemStyles,\n  skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n  width?: string | number\n  height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n  lines?: number\n  /**\n   * Sets the gaps between group items.\n   */\n  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n  if (typeof size === 'number') return `${size}px`\n\n  return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n  return (\n    <div\n      ref={forwardedRef}\n      aria-hidden=\"true\"\n      className={skeletonItemStyles({ shape, className })}\n      {...rest}\n    />\n  )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n  return (\n    <SkeletonItem\n      style={\n        {\n          '--skeleton-rect-width': getSizeValue(width),\n          '--skeleton-rect-height': getSizeValue(height),\n        } as CSSProperties\n      }\n      className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n      {...rest}\n      shape=\"rectangle\"\n      data-shape=\"rectangle\"\n    />\n  )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n  <SkeletonItem\n    style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n    className=\"size-(--skeleton-circle-size)\"\n    {...rest}\n    shape=\"circle\"\n    data-shape=\"circle\"\n  />\n)\n\nexport const SkeletonLine = ({\n  lines = 1,\n  gap: gapProp,\n  className,\n  ...rest\n}: SkeletonLineProps) => {\n  const gap = gapProp || 'md'\n\n  return (\n    <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n      {[...new Array(lines)].map((_, index) => (\n        <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n      ))}\n    </div>\n  )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n","import { Skeleton as Root } from './Skeleton'\nimport {\n  SkeletonCircle as Circle,\n  SkeletonLine as Line,\n  SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n  Circle: typeof Circle\n  Line: typeof Line\n  Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n  Circle,\n  Line,\n  Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n"],"names":["skeletonStyles","cva","Skeleton","isAnimated","label","className","children","forwardedRef","rest","jsxs","jsx","VisuallyHidden","skeletonItemStyles","skeletonLineStyles","getSizeValue","size","SkeletonItem","shape","SkeletonRectangle","width","height","SkeletonCircle","SkeletonLine","lines","gapProp","_","index","Root","Circle","Line","Rectangle"],"mappings":"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"}

package/dist/slider/Slider.d.ts

@@ -0,0 +1,60 @@
+import { Slider as RadixSlider } from 'radix-ui';
+import { PropsWithChildren, Ref } from 'react';
+import { SliderRangeVariantsProps } from './SliderTrack.styles';
+export interface SliderProps extends Omit<RadixSlider.SliderProps, 'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'>, PropsWithChildren<SliderRangeVariantsProps> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
+     */
+    defaultValue?: number[];
+    /**
+     * The controlled value of the slider. Must be used in conjunction with `onValueChange`.
+     */
+    value?: number[];
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: number[]) => void;
+    /**
+     * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
+     */
+    onValueCommit?: (value: number[]) => void;
+    /**
+     * The name of the slider. Submitted with its owning form as part of a name/value pair.
+     * If wrapped with a FormField with a name, will be inherited from it.
+     */
+    name?: string;
+    /**
+     * When `true`, prevents the user from interacting with the slider.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the slider as interactive or not.
+     */
+    readOnly?: boolean;
+    /**
+     * The minimum value for the range.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value for the range.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The stepping interval.
+     * @default 1
+     */
+    step?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Slider: {
+    ({ asChild, intent, shape, children, className, ref, disabled: disabledProp, readOnly: readOnlyProp, name: nameProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/Slider.styles.d.ts

@@ -0,0 +1 @@
+export declare const rootStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/slider/SliderContext.d.ts

@@ -0,0 +1,7 @@
+import { SliderProps } from './Slider';
+export type SliderContextInterface = Pick<SliderProps, 'intent' | 'shape'> & {
+    fieldLabelId?: string;
+    fieldId?: string;
+};
+export declare const SliderContext: import('react').Context<SliderContextInterface>;
+export declare const useSliderContext: () => SliderContextInterface;

package/dist/slider/SliderThumb.d.ts

@@ -0,0 +1,14 @@
+import { Slider as RadixSlider } from 'radix-ui';
+import { Ref } from 'react';
+export interface SliderThumbProps extends RadixSlider.SliderThumbProps {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const SliderThumb: {
+    ({ asChild, className, onPointerDown, onKeyDown, onBlur, ref: forwardedRef, ...rest }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderThumb.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const thumbVariants: (props?: ({
+    intent?: "main" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SliderThumbVariantsProps = VariantProps<typeof thumbVariants>;

package/dist/slider/SliderTrack.d.ts

@@ -0,0 +1,14 @@
+import { Slider as RadixSlider } from 'radix-ui';
+import { Ref } from 'react';
+export interface SliderTrackProps extends RadixSlider.SliderTrackProps, RadixSlider.SliderRangeProps {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const SliderTrack: {
+    ({ asChild, className, ref, ...rest }: SliderTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/slider/SliderTrack.styles.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const trackVariants: (props?: ({
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const rangeVariants: (props?: ({
+    intent?: "main" | "alert" | "error" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | null | undefined;
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>;

package/dist/slider/index.d.mts

@@ -1,97 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Slider as Slider$2 } from 'radix-ui';
-import { PropsWithChildren, Ref } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-declare const rangeVariants: (props?: ({
-    intent?: "main" | "alert" | "support" | "accent" | "basic" | "info" | "neutral" | "success" | "error" | null | undefined;
-    shape?: "rounded" | "square" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>;
-
-interface SliderProps extends Omit<Slider$2.SliderProps, 'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'>, PropsWithChildren<SliderRangeVariantsProps> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    /**
-     * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
-     */
-    defaultValue?: number[];
-    /**
-     * The controlled value of the slider. Must be used in conjunction with `onValueChange`.
-     */
-    value?: number[];
-    /**
-     * Event handler called when the value changes.
-     */
-    onValueChange?: (value: number[]) => void;
-    /**
-     * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
-     */
-    onValueCommit?: (value: number[]) => void;
-    /**
-     * The name of the slider. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * When `true`, prevents the user from interacting with the slider.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The minimum value for the range.
-     * @default 0
-     */
-    min?: number;
-    /**
-     * The maximum value for the range.
-     * @default 100
-     */
-    max?: number;
-    /**
-     * The stepping interval.
-     * @default 1
-     */
-    step?: number;
-    ref?: Ref<HTMLDivElement>;
-}
-declare const Slider$1: {
-    ({ asChild, intent, shape, children, className, ref, ...rest }: SliderProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface SliderThumbProps extends Slider$2.SliderThumbProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLSpanElement>;
-}
-declare const SliderThumb: {
-    ({ asChild, className, onPointerDown, onKeyDown, onBlur, ref: forwardedRef, ...rest }: SliderThumbProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface SliderTrackProps extends Slider$2.SliderTrackProps, Slider$2.SliderRangeProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-declare const SliderTrack: {
-    ({ asChild, className, ref, ...rest }: SliderTrackProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const Slider: typeof Slider$1 & {
-    Thumb: typeof SliderThumb;
-    Track: typeof SliderTrack;
-};
-
-export { Slider, type SliderProps, type SliderThumbProps, type SliderTrackProps };
+import { Slider as Root, SliderProps } from './Slider';
+import { SliderThumb as Thumb, SliderThumbProps } from './SliderThumb';
+import { SliderTrack as Track, SliderTrackProps } from './SliderTrack';
+export declare const Slider: typeof Root & {
+    Thumb: typeof Thumb;
+    Track: typeof Track;
+};
+export type { SliderProps, SliderThumbProps, SliderTrackProps };

package/dist/slider/index.d.ts

@@ -1,97 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Slider as Slider$2 } from 'radix-ui';
-import { PropsWithChildren, Ref } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-declare const rangeVariants: (props?: ({
-    intent?: "main" | "alert" | "support" | "accent" | "basic" | "info" | "neutral" | "success" | "error" | null | undefined;
-    shape?: "rounded" | "square" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>;
-
-interface SliderProps extends Omit<Slider$2.SliderProps, 'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'>, PropsWithChildren<SliderRangeVariantsProps> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    /**
-     * The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
-     */
-    defaultValue?: number[];
-    /**
-     * The controlled value of the slider. Must be used in conjunction with `onValueChange`.
-     */
-    value?: number[];
-    /**
-     * Event handler called when the value changes.
-     */
-    onValueChange?: (value: number[]) => void;
-    /**
-     * Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
-     */
-    onValueCommit?: (value: number[]) => void;
-    /**
-     * The name of the slider. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * When `true`, prevents the user from interacting with the slider.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The minimum value for the range.
-     * @default 0
-     */
-    min?: number;
-    /**
-     * The maximum value for the range.
-     * @default 100
-     */
-    max?: number;
-    /**
-     * The stepping interval.
-     * @default 1
-     */
-    step?: number;
-    ref?: Ref<HTMLDivElement>;
-}
-declare const Slider$1: {
-    ({ asChild, intent, shape, children, className, ref, ...rest }: SliderProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface SliderThumbProps extends Slider$2.SliderThumbProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLSpanElement>;
-}
-declare const SliderThumb: {
-    ({ asChild, className, onPointerDown, onKeyDown, onBlur, ref: forwardedRef, ...rest }: SliderThumbProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface SliderTrackProps extends Slider$2.SliderTrackProps, Slider$2.SliderRangeProps {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-declare const SliderTrack: {
-    ({ asChild, className, ref, ...rest }: SliderTrackProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const Slider: typeof Slider$1 & {
-    Thumb: typeof SliderThumb;
-    Track: typeof SliderTrack;
-};
-
-export { Slider, type SliderProps, type SliderThumbProps, type SliderTrackProps };
+import { Slider as Root, SliderProps } from './Slider';
+import { SliderThumb as Thumb, SliderThumbProps } from './SliderThumb';
+import { SliderTrack as Track, SliderTrackProps } from './SliderTrack';
+export declare const Slider: typeof Root & {
+    Thumb: typeof Thumb;
+    Track: typeof Track;
+};
+export type { SliderProps, SliderThumbProps, SliderTrackProps };