@masaraxui/react 1.0.0

package/dist/components/search-field/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon } from "./search-field";
+export declare const SearchField: (({ children, className, fullWidth, variant, ...props }: import("./search-field").SearchFieldRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./search-field").SearchFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ children, className, ...props }: import("./search-field").SearchFieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("./search-field").SearchFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    SearchIcon: ({ children, className, ...props }: import("./search-field").SearchFieldSearchIconProps) => import("react/jsx-runtime").JSX.Element;
+    ClearButton: ({ className, ...props }: import("./search-field").SearchFieldClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type SearchField = {
+    Props: ComponentProps<typeof SearchFieldRoot>;
+    RootProps: ComponentProps<typeof SearchFieldRoot>;
+    GroupProps: ComponentProps<typeof SearchFieldGroup>;
+    InputProps: ComponentProps<typeof SearchFieldInput>;
+    SearchIconProps: ComponentProps<typeof SearchFieldSearchIcon>;
+    ClearButtonProps: ComponentProps<typeof SearchFieldClearButton>;
+};
+export { SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon, };
+export type { SearchFieldRootProps, SearchFieldRootProps as SearchFieldProps, SearchFieldGroupProps, SearchFieldInputProps, SearchFieldSearchIconProps, SearchFieldClearButtonProps, } from "./search-field";
+export { searchFieldVariants } from "@masaraxui/styles";
+export type { SearchFieldVariants } from "@masaraxui/styles";

package/dist/components/search-field/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { SearchFieldRoot, SearchFieldClearButton, SearchFieldSearchIcon, SearchFieldInput, SearchFieldGroup } from './search-field.js';
+export { searchFieldVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const SearchField = Object.assign(SearchFieldRoot, {
+  Root: SearchFieldRoot,
+  Group: SearchFieldGroup,
+  Input: SearchFieldInput,
+  SearchIcon: SearchFieldSearchIcon,
+  ClearButton: SearchFieldClearButton
+});
+
+export { SearchField, SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon };

package/dist/components/search-field/search-field.d.ts

@@ -0,0 +1,23 @@
+import type { SearchFieldVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Group as GroupPrimitive, Input as InputPrimitive, SearchField as SearchFieldPrimitive } from "react-aria-components";
+import { CloseButton } from "../close-button";
+interface SearchFieldRootProps extends ComponentPropsWithRef<typeof SearchFieldPrimitive>, SearchFieldVariants {
+}
+declare const SearchFieldRoot: ({ children, className, fullWidth, variant, ...props }: SearchFieldRootProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldGroupProps extends ComponentPropsWithRef<typeof GroupPrimitive> {
+}
+declare const SearchFieldGroup: ({ children, className, ...props }: SearchFieldGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldInputProps extends ComponentPropsWithRef<typeof InputPrimitive> {
+}
+declare const SearchFieldInput: ({ className, ...props }: SearchFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldSearchIconProps extends ComponentPropsWithRef<"svg"> {
+    children?: React.ReactNode;
+}
+declare const SearchFieldSearchIcon: ({ children, className, ...props }: SearchFieldSearchIconProps) => import("react/jsx-runtime").JSX.Element;
+interface SearchFieldClearButtonProps extends ComponentPropsWithRef<typeof CloseButton> {
+}
+declare const SearchFieldClearButton: ({ className, ...props }: SearchFieldClearButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { SearchFieldRoot, SearchFieldGroup, SearchFieldInput, SearchFieldSearchIcon, SearchFieldClearButton, };
+export type { SearchFieldRootProps, SearchFieldGroupProps, SearchFieldInputProps, SearchFieldSearchIconProps, SearchFieldClearButtonProps, };

package/dist/components/search-field/search-field.js

@@ -0,0 +1,127 @@
+"use client";
+import { searchFieldVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { SearchField, Input, Group } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { CloseButton } from '../close-button/index.js';
+import { IconSearch } from '../icons.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const SearchFieldContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => searchFieldVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(SearchFieldContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(SearchField, {
+      "data-slot": "search-field",
+      ...props,
+      className: composeTwRenderProps(className, slots?.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Group
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldGroup = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  return /*#__PURE__*/jsx(Group, {
+    className: composeTwRenderProps(className, slots?.group()),
+    "data-slot": "search-field-group",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "search-field-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Search Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldSearchIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  if (children && /*#__PURE__*/React__default.isValidElement(children)) {
+    return /*#__PURE__*/React__default.cloneElement(children, {
+      ...props,
+      className: composeSlotClassName(slots?.searchIcon, className),
+      "data-slot": "search-field-search-icon"
+    });
+  }
+  return /*#__PURE__*/jsx(IconSearch, {
+    className: composeSlotClassName(slots?.searchIcon, className),
+    "data-slot": "search-field-search-icon",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * SearchField Clear Button
+ * -----------------------------------------------------------------------------------------------*/
+
+const SearchFieldClearButton = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SearchFieldContext);
+  return /*#__PURE__*/jsx(CloseButton, {
+    className: composeTwRenderProps(className, slots?.clearButton()),
+    "data-slot": "search-field-clear-button",
+    slot: "clear",
+    ...props
+  });
+};
+
+export { SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon };

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

@@ -0,0 +1,21 @@
+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";
+export { selectVariants } from "@masaraxui/styles";
+export type { SelectVariants } from "@masaraxui/styles";

package/dist/components/select/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { SelectRoot, SelectPopover, SelectIndicator, SelectValue, SelectTrigger } from './select.js';
+export { selectVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 "@masaraxui/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,140 @@
+"use client";
+import { selectVariants } from '@masaraxui/styles';
+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 { 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,13 @@
+import type { ComponentProps } from "react";
+import { SeparatorRoot } from "./separator";
+export declare const Separator: (({ className, orientation, variant, ...props }: import("./separator").SeparatorRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, orientation, variant, ...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";
+export { separatorVariants } from "@masaraxui/styles";
+export type { SeparatorVariants } from "@masaraxui/styles";

package/dist/components/separator/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { SeparatorRoot } from './separator.js';
+export { separatorVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 "@masaraxui/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, variant, ...props }: SeparatorRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SeparatorRoot };
+export type { SeparatorRootProps };

package/dist/components/separator/separator.js

@@ -0,0 +1,27 @@
+"use client";
+import { separatorVariants } from '@masaraxui/styles';
+import { useSlottedContext, SeparatorContext, Separator } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+const SeparatorRoot = ({
+  className,
+  orientation,
+  variant,
+  ...props
+}) => {
+  const context = useSlottedContext(SeparatorContext);
+  const resolvedOrientation = orientation ?? context?.orientation ?? "horizontal";
+  return /*#__PURE__*/jsx(Separator, {
+    "data-orientation": resolvedOrientation,
+    "data-slot": "separator",
+    orientation: resolvedOrientation,
+    className: separatorVariants({
+      orientation: resolvedOrientation,
+      variant,
+      className
+    }),
+    ...props
+  });
+};
+
+export { SeparatorRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { SkeletonRoot } from "./skeleton";
+export declare const Skeleton: (({ animationType, className, ...props }: import("./skeleton").SkeletonRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ animationType, className, ...props }: import("./skeleton").SkeletonRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Skeleton = {
+    Props: ComponentProps<typeof SkeletonRoot>;
+    RootProps: ComponentProps<typeof SkeletonRoot>;
+};
+export { SkeletonRoot };
+export type { SkeletonRootProps, SkeletonRootProps as SkeletonProps } from "./skeleton";
+export { skeletonVariants } from "@masaraxui/styles";
+export type { SkeletonVariants } from "@masaraxui/styles";

package/dist/components/skeleton/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { SkeletonRoot } from './skeleton.js';
+export { skeletonVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Skeleton = Object.assign(SkeletonRoot, {
+  Root: SkeletonRoot
+});
+
+export { Skeleton, SkeletonRoot };

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { SkeletonVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+interface SkeletonRootProps extends Omit<ComponentPropsWithRef<"div">, "children">, SkeletonVariants {
+}
+declare const SkeletonRoot: ({ animationType, className, ...props }: SkeletonRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SkeletonRoot };
+export type { SkeletonRootProps };

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,25 @@
+"use client";
+import { skeletonVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { useCSSVariable } from '../../hooks/use-css-variable.js';
+import { jsx } from 'react/jsx-runtime';
+
+const SkeletonRoot = ({
+  animationType,
+  className,
+  ...props
+}) => {
+  // Use the new hook to get CSS variable value with SSR support
+  const resolvedAnimationType = useCSSVariable("--skeleton-animation", animationType);
+  const slots = React__default.useMemo(() => skeletonVariants({
+    animationType: resolvedAnimationType
+  }), [resolvedAnimationType]);
+  return /*#__PURE__*/jsx("div", {
+    className: slots.base({
+      className
+    }),
+    ...props
+  });
+};
+
+export { SkeletonRoot };

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

@@ -0,0 +1,23 @@
+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";
+export { sliderVariants } from "@masaraxui/styles";
+export type { SliderVariants } from "@masaraxui/styles";

package/dist/components/slider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { SliderRoot, SliderMarks, SliderThumb, SliderFill, SliderTrack, SliderOutput } from './slider.js';
+export { sliderVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 { SliderVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import { SliderOutput as SliderOutputPrimitive, Slider as SliderPrimitive, SliderThumb as SliderThumbPrimitive, SliderTrack as SliderTrackPrimitive } from "react-aria-components";
+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, };