@arobo/react 1.0.1 → 1.1.1

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

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { RadioGroup as RadioGroupPrimitive } from "react-aria-components";
+import type { RadioGroupVariants } from "@arobo/styles";
+interface RadioGroupRootProps extends ComponentPropsWithRef<typeof RadioGroupPrimitive>, RadioGroupVariants {
+}
+declare const RadioGroupRoot: ({ children, className, variant, ...props }: RadioGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioGroupRoot };
+export type { RadioGroupRootProps };

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

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { RadioGroup } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { radioGroupVariants } from '../../packages/styles/src/components/radio-group/radio-group.styles.js';
+
+const RadioGroupRoot = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const styles = React__default.useMemo(() => radioGroupVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(RadioGroup, {
+    "data-slot": "radio-group",
+    ...props,
+    className: composeTwRenderProps(className, styles),
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+export { RadioGroupRoot };

package/dist/components/range-calendar/index.js

@@ -1,5 +1,5 @@
 import { RangeCalendarRoot } from './range-calendar.js';
-export { rangeCalendarVariants } from '../../styles/src/components/range-calendar/range-calendar.styles.js';
+export { rangeCalendarVariants } from '../../packages/styles/src/components/range-calendar/range-calendar.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/range-calendar/range-calendar.js

@@ -2,7 +2,7 @@ import { RangeCalendar, CalendarGrid, CalendarGridBody, CalendarCell } from 'rea
 import { ErrorMessage } from '../error-message/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarHeader, CalendarGridHeader } from '../calendar/calendar.js';
-import { rangeCalendarVariants } from '../../styles/src/components/range-calendar/range-calendar.styles.js';
+import { rangeCalendarVariants } from '../../packages/styles/src/components/range-calendar/range-calendar.styles.js';
 import { composeTwRenderProps } from '../../utils/compose.js';
 
 const RangeCalendarRoot = ({

package/dist/components/scroll-shadow/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ScrollShadowRoot } from "./scroll-shadow";
+export declare const ScrollShadow: {
+    ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: import("./scroll-shadow").ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Root: {
+        ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: import("./scroll-shadow").ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type ScrollShadow = {
+    Props: ComponentProps<typeof ScrollShadowRoot>;
+    RootProps: ComponentProps<typeof ScrollShadowRoot>;
+};
+export { ScrollShadowRoot };
+export type { ScrollShadowRootProps, ScrollShadowRootProps as ScrollShadowProps, ScrollShadowVisibility, } from "./scroll-shadow";
+export { useScrollShadow } from "./use-scroll-shadow";
+export type { UseScrollShadowProps } from "./use-scroll-shadow";

package/dist/components/scroll-shadow/index.js

@@ -0,0 +1,11 @@
+import { ScrollShadowRoot } from './scroll-shadow.js';
+export { useScrollShadow } from './use-scroll-shadow.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Component
+ * -----------------------------------------------------------------------------------------------*/
+const ScrollShadow = Object.assign(ScrollShadowRoot, {
+  Root: ScrollShadowRoot
+});
+
+export { ScrollShadow, ScrollShadowRoot };

package/dist/components/scroll-shadow/scroll-shadow.d.ts

@@ -0,0 +1,32 @@
+import { type ScrollShadowVariants } from "@arobo/styles";
+export type ScrollShadowVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
+export interface ScrollShadowRootProps extends Omit<React.ComponentProps<"div">, "size">, ScrollShadowVariants {
+    /**
+     * The shadow size in pixels
+     * @default 40
+     */
+    size?: number;
+    /**
+     * The scroll offset before showing shadows (in pixels)
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Controlled shadow visibility state
+     * @default "auto"
+     */
+    visibility?: ScrollShadowVisibility;
+    /**
+     * Whether scroll shadow detection is enabled
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Callback invoked when shadow visibility changes
+     */
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+}
+export declare const ScrollShadowRoot: {
+    ({ children, className, hideScrollBar, isEnabled, offset, onVisibilityChange, orientation, ref, size, variant, visibility, ...props }: ScrollShadowRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/scroll-shadow/scroll-shadow.js

@@ -0,0 +1,75 @@
+import { useRef, useMemo } from 'react';
+import { useSafeLayoutEffect } from '../../hooks/use-safe-layout-effect.js';
+import { useScrollShadow } from './use-scroll-shadow.js';
+import { jsx } from 'react/jsx-runtime';
+import { scrollShadowVariants } from '../../packages/styles/src/components/scroll-shadow/scroll-shadow.styles.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
+
+const ScrollShadowRoot = ({
+  children,
+  className,
+  hideScrollBar = false,
+  isEnabled = true,
+  offset = 0,
+  onVisibilityChange,
+  orientation = "vertical",
+  ref,
+  size = 40,
+  variant = "fade",
+  visibility = "auto",
+  ...props
+}) => {
+  const internalRef = useRef(null);
+  useScrollShadow({
+    containerRef: internalRef,
+    isEnabled,
+    offset,
+    onVisibilityChange,
+    orientation,
+    visibility
+  });
+
+  // Handle controlled visibility mode
+  useSafeLayoutEffect(() => {
+    const el = internalRef.current;
+    if (!el || visibility === "auto") return;
+
+    // Clear all data attributes
+    delete el.dataset["topScroll"];
+    delete el.dataset["bottomScroll"];
+    delete el.dataset["topBottomScroll"];
+    delete el.dataset["leftScroll"];
+    delete el.dataset["rightScroll"];
+    delete el.dataset["leftRightScroll"];
+
+    // Set controlled visibility
+    if (visibility === "both") {
+      el.dataset[orientation === "vertical" ? "topBottomScroll" : "leftRightScroll"] = "true";
+    } else if (visibility !== "none") {
+      el.dataset[`${visibility}Scroll`] = "true";
+    }
+  }, [visibility, orientation]);
+  const slots = useMemo(() => scrollShadowVariants({
+    hideScrollBar,
+    orientation,
+    variant
+  }), [orientation, hideScrollBar, variant]);
+  return /*#__PURE__*/jsx("div", {
+    ref: mergeRefs(internalRef, ref),
+    className: slots.base({
+      className
+    }),
+    "data-orientation": orientation,
+    "data-scroll-shadow-size": size,
+    style: {
+      // @ts-expect-error - CSS variables are not typed
+      "--scroll-shadow-size": `${size}px`,
+      ...props.style
+    },
+    ...props,
+    children: children
+  });
+};
+ScrollShadowRoot.displayName = "HeroUI.ScrollShadow";
+
+export { ScrollShadowRoot };

package/dist/components/scroll-shadow/use-scroll-shadow.d.ts

@@ -0,0 +1,11 @@
+import type { ScrollShadowVisibility } from "./scroll-shadow";
+import type { RefObject } from "react";
+export interface UseScrollShadowProps {
+    containerRef: RefObject<HTMLElement>;
+    orientation: "vertical" | "horizontal";
+    offset: number;
+    visibility: ScrollShadowVisibility;
+    isEnabled: boolean;
+    onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
+}
+export declare const useScrollShadow: (props: UseScrollShadowProps) => void;

package/dist/components/scroll-shadow/use-scroll-shadow.js

@@ -0,0 +1,120 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+const useScrollShadow = props => {
+  const {
+    containerRef,
+    isEnabled,
+    offset,
+    onVisibilityChange,
+    orientation,
+    visibility
+  } = props;
+
+  // Cache previous state to avoid unnecessary DOM updates
+  const prevStateRef = useRef(null);
+
+  // Track pending RAF to avoid multiple scheduled updates
+  const rafIdRef = useRef(null);
+  const checkOverflow = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const isVertical = orientation === "vertical";
+    const scrollStart = isVertical ? el.scrollTop : el.scrollLeft;
+    const scrollSize = isVertical ? el.scrollHeight : el.scrollWidth;
+    const clientSize = isVertical ? el.clientHeight : el.clientWidth;
+    const hasScrollBefore = scrollStart > offset;
+    const hasScrollAfter = scrollStart + clientSize + offset < scrollSize;
+
+    // Skip DOM updates if state hasn't changed
+    const prevState = prevStateRef.current;
+    if (prevState && prevState.hasScrollBefore === hasScrollBefore && prevState.hasScrollAfter === hasScrollAfter) {
+      return;
+    }
+
+    // Update state cache
+    prevStateRef.current = {
+      hasScrollBefore,
+      hasScrollAfter
+    };
+
+    // Cancel previous pending update
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+
+    // Batch DOM updates with RAF for better performance
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      if (isVertical) {
+        if (hasScrollBefore && hasScrollAfter) {
+          el.dataset["topBottomScroll"] = "true";
+          delete el.dataset["topScroll"];
+          delete el.dataset["bottomScroll"];
+          onVisibilityChange?.("both");
+        } else {
+          el.dataset["topScroll"] = String(hasScrollBefore);
+          el.dataset["bottomScroll"] = String(hasScrollAfter);
+          delete el.dataset["topBottomScroll"];
+          if (onVisibilityChange) {
+            if (hasScrollBefore) {
+              onVisibilityChange("top");
+            } else if (hasScrollAfter) {
+              onVisibilityChange("bottom");
+            } else {
+              onVisibilityChange("none");
+            }
+          }
+        }
+      } else {
+        if (hasScrollBefore && hasScrollAfter) {
+          el.dataset["leftRightScroll"] = "true";
+          delete el.dataset["leftScroll"];
+          delete el.dataset["rightScroll"];
+          onVisibilityChange?.("both");
+        } else {
+          el.dataset["leftScroll"] = String(hasScrollBefore);
+          el.dataset["rightScroll"] = String(hasScrollAfter);
+          delete el.dataset["leftRightScroll"];
+          if (onVisibilityChange) {
+            if (hasScrollBefore) {
+              onVisibilityChange("left");
+            } else if (hasScrollAfter) {
+              onVisibilityChange("right");
+            } else {
+              onVisibilityChange("none");
+            }
+          }
+        }
+      }
+    });
+  }, [containerRef, orientation, offset, onVisibilityChange]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !isEnabled || visibility !== "auto") return;
+
+    // Initial check
+    checkOverflow();
+
+    // Use passive listener for better scroll performance
+    el.addEventListener("scroll", checkOverflow, {
+      passive: true
+    });
+
+    // Monitor size changes
+    const resizeObserver = new ResizeObserver(checkOverflow);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", checkOverflow);
+      resizeObserver.disconnect();
+
+      // Cancel pending RAF and cleanup cache
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      prevStateRef.current = null;
+    };
+  }, [containerRef, visibility, isEnabled, checkOverflow]);
+};
+
+export { useScrollShadow };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue } from "./select";
+export declare const Select: (<T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, variant, ...props }: import("./select").SelectRootProps<T, M>) => import("react/jsx-runtime").JSX.Element) & {
+    Root: <T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, variant, ...props }: import("./select").SelectRootProps<T, M>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./select").SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Value: ({ children, className, ...props }: import("./select").SelectValueProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ children, className, ...props }: import("./select").SelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Popover: ({ children, className, placement, ...props }: import("./select").SelectPopoverProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Select<T extends object = object> = {
+    Props: ComponentProps<typeof SelectRoot<T>>;
+    RootProps: ComponentProps<typeof SelectRoot<T>>;
+    TriggerProps: ComponentProps<typeof SelectTrigger>;
+    ValueProps: ComponentProps<typeof SelectValue>;
+    IndicatorProps: ComponentProps<typeof SelectIndicator>;
+    PopoverProps: ComponentProps<typeof SelectPopover>;
+};
+export { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue };
+export type { SelectRootProps, SelectRootProps as SelectProps, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, } from "./select";

package/dist/components/select/index.js

@@ -0,0 +1,14 @@
+import { SelectRoot, SelectPopover, SelectIndicator, SelectValue, SelectTrigger } from './select.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Select = Object.assign(SelectRoot, {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Indicator: SelectIndicator,
+  Popover: SelectPopover
+});
+
+export { Select, SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue };

package/dist/components/select/select.d.ts

@@ -0,0 +1,24 @@
+import type { SelectVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Button as ButtonPrimitive, Popover as PopoverPrimitive, Select as SelectPrimitive, SelectValue as SelectValuePrimitive } from "react-aria-components";
+interface SelectRootProps<T extends object, M extends "single" | "multiple" = "single"> extends ComponentPropsWithRef<typeof SelectPrimitive<T, M>>, SelectVariants {
+    items?: Iterable<T, M>;
+}
+declare const SelectRoot: <T extends object = object, M extends "single" | "multiple" = "single">({ children, className, fullWidth, variant, ...props }: SelectRootProps<T, M>) => import("react/jsx-runtime").JSX.Element;
+interface SelectTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const SelectTrigger: ({ children, className, ...props }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface SelectValueProps extends ComponentPropsWithRef<typeof SelectValuePrimitive> {
+}
+declare const SelectValue: ({ children, className, ...props }: SelectValueProps) => import("react/jsx-runtime").JSX.Element;
+interface SelectIndicatorProps extends ComponentPropsWithRef<"svg"> {
+    className?: string;
+}
+declare const SelectIndicator: ({ children, className, ...props }: SelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface SelectPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const SelectPopover: ({ children, className, placement, ...props }: SelectPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { SelectRoot, SelectTrigger, SelectValue, SelectIndicator, SelectPopover, };
+export type { SelectRootProps, SelectTriggerProps, SelectValueProps, SelectIndicatorProps, SelectPopoverProps, };

package/dist/components/select/select.js

@@ -0,0 +1,139 @@
+import React__default, { createContext, useContext } from 'react';
+import { Select, Popover, SelectStateContext, SelectValue as SelectValue$1, Button } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { IconChevronDown } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { selectVariants } from '../../packages/styles/src/components/select/select.styles.js';
+import { SurfaceContext } from '../surface/surface.js';
+
+const SelectContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => selectVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(SelectContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Select, {
+      "data-slot": "select",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "select-trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Value
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectValue = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  return /*#__PURE__*/jsx(SelectValue$1, {
+    className: composeTwRenderProps(className, slots?.value()),
+    "data-slot": "select-value",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  const state = useContext(SelectStateContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      className: composeSlotClassName(slots?.indicator, className),
+      "data-slot": "select-indicator",
+      "data-open": dataAttr(state?.isOpen)
+    });
+  }
+  return /*#__PURE__*/jsx(IconChevronDown, {
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-open": dataAttr(state?.isOpen),
+    "data-slot": "select-default-indicator",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Select Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const SelectPopover = ({
+  children,
+  className,
+  placement = "bottom",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SelectContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+
+export { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue };

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import { SeparatorRoot } from "./separator";
+export declare const Separator: (({ className, orientation, ...props }: import("./separator").SeparatorRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, orientation, ...props }: import("./separator").SeparatorRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Separator = {
+    Props: ComponentProps<typeof SeparatorRoot>;
+    RootProps: ComponentProps<typeof SeparatorRoot>;
+};
+export { SeparatorRoot };
+export type { SeparatorRootProps, SeparatorRootProps as SeparatorProps } from "./separator";

package/dist/components/separator/index.js

@@ -0,0 +1,10 @@
+import { SeparatorRoot } from './separator.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Separator = Object.assign(SeparatorRoot, {
+  Root: SeparatorRoot
+});
+
+export { Separator, SeparatorRoot };

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

@@ -0,0 +1,8 @@
+import { type SeparatorVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+import { Separator as SeparatorPrimitive } from "react-aria-components";
+interface SeparatorRootProps extends ComponentPropsWithRef<typeof SeparatorPrimitive>, SeparatorVariants {
+}
+declare const SeparatorRoot: ({ className, orientation, ...props }: SeparatorRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SeparatorRoot };
+export type { SeparatorRootProps };

package/dist/components/separator/separator.js

@@ -0,0 +1,22 @@
+import { Separator } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+import { separatorVariants } from '../../packages/styles/src/components/separator/separator.styles.js';
+
+const SeparatorRoot = ({
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(Separator, {
+    "data-orientation": orientation,
+    "data-slot": "separator",
+    orientation: orientation,
+    className: separatorVariants({
+      orientation,
+      className
+    }),
+    ...props
+  });
+};
+
+export { SeparatorRoot };

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { SliderFill, SliderMarks, SliderOutput, SliderRoot, SliderThumb, SliderTrack } from "./slider";
+export declare const Slider: (({ children, className, orientation, ...props }: import("./slider").SliderRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, orientation, ...props }: import("./slider").SliderRootProps) => import("react/jsx-runtime").JSX.Element;
+    Output: ({ children, className, ...props }: import("./slider").SliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ children, className, ...props }: import("./slider").SliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+    Fill: ({ className, style, ...props }: import("./slider").SliderFillProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ children, className, ...props }: import("./slider").SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+    Marks: ({ className, ...props }: import("./slider").SliderMarksProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Slider = {
+    Props: ComponentProps<typeof SliderRoot>;
+    RootProps: ComponentProps<typeof SliderRoot>;
+    OutputProps: ComponentProps<typeof SliderOutput>;
+    TrackProps: ComponentProps<typeof SliderTrack>;
+    FillProps: ComponentProps<typeof SliderFill>;
+    ThumbProps: ComponentProps<typeof SliderThumb>;
+    MarksProps: ComponentProps<typeof SliderMarks>;
+};
+export { SliderRoot, SliderOutput, SliderTrack, SliderFill, SliderThumb, SliderMarks };
+export type { SliderRootProps, SliderRootProps as SliderProps, SliderOutputProps, SliderTrackProps, SliderFillProps, SliderThumbProps, SliderMarksProps, } from "./slider";

package/dist/components/slider/index.js

@@ -0,0 +1,15 @@
+import { SliderRoot, SliderMarks, SliderThumb, SliderFill, SliderTrack, SliderOutput } from './slider.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Slider = Object.assign(SliderRoot, {
+  Root: SliderRoot,
+  Output: SliderOutput,
+  Track: SliderTrack,
+  Fill: SliderFill,
+  Thumb: SliderThumb,
+  Marks: SliderMarks
+});
+
+export { Slider, SliderFill, SliderMarks, SliderOutput, SliderRoot, SliderThumb, SliderTrack };

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

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithRef } from "react";
+import { SliderOutput as SliderOutputPrimitive, Slider as SliderPrimitive, SliderThumb as SliderThumbPrimitive, SliderTrack as SliderTrackPrimitive } from "react-aria-components";
+import { type SliderVariants } from "@arobo/styles";
+interface SliderRootProps extends ComponentPropsWithRef<typeof SliderPrimitive>, SliderVariants {
+}
+declare const SliderRoot: ({ children, className, orientation, ...props }: SliderRootProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderOutputProps extends ComponentPropsWithRef<typeof SliderOutputPrimitive> {
+}
+declare const SliderOutput: ({ children, className, ...props }: SliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderTrackProps extends ComponentPropsWithRef<typeof SliderTrackPrimitive> {
+}
+declare const SliderTrack: ({ children, className, ...props }: SliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderFillProps extends ComponentPropsWithRef<"div"> {
+}
+declare const SliderFill: ({ className, style, ...props }: SliderFillProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderThumbProps extends ComponentPropsWithRef<typeof SliderThumbPrimitive> {
+}
+declare const SliderThumb: ({ children, className, ...props }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+interface SliderMarksProps extends ComponentPropsWithRef<"div"> {
+}
+declare const SliderMarks: ({ className, ...props }: SliderMarksProps) => import("react/jsx-runtime").JSX.Element;
+export { SliderRoot, SliderOutput, SliderTrack, SliderFill, SliderThumb, SliderMarks };
+export type { SliderRootProps, SliderOutputProps, SliderTrackProps, SliderFillProps, SliderThumbProps, SliderMarksProps, };