@moduix/react-tailwind 1.0.0

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

@@ -0,0 +1,25 @@
+import { RadioGroup as RadioGroupPrimitive, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext } from '@ark-ui/react/radio-group';
+import type { ComponentProps, ReactNode } from 'react';
+type RadioGroupItemControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type RadioGroupItemControlProps = ComponentProps<typeof RadioGroupPrimitive.ItemControl> & {
+    size?: RadioGroupItemControlSize;
+};
+type RadioGroupOptionProps = Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'asChild' | 'children'> & {
+    children: ReactNode;
+    size?: RadioGroupItemControlSize;
+};
+declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: import("@ark-ui/react/radio-group").RadioGroupContextProps) => ReactNode;
+    ItemContext: (props: import("@ark-ui/react/radio-group").RadioGroupItemContextProps) => ReactNode;
+    Label: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemHiddenInput: import("react").ForwardRefExoticComponent<RadioGroupPrimitive.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Option: import("react").ForwardRefExoticComponent<Omit<RadioGroupOptionProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemControl: import("react").ForwardRefExoticComponent<Omit<RadioGroupItemControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { RadioGroup, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext };
+export type { RadioGroupItemControlProps, RadioGroupItemControlSize, RadioGroupOptionProps };

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

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext } from "@ark-ui/react/radio-group";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+const radioGroupItemControlVariants = cva("relative inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-background text-primary-foreground outline-0 transition-[background-color,border-color,border-width,color,opacity] duration-200 ease-in-out select-none before:block before:rounded-full before:bg-current before:content-[''] before:scale-[0.6] before:opacity-0 before:transition-[opacity,transform] before:duration-200 before:ease-in-out data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:before:scale-100 data-[state=checked]:before:opacity-100 data-invalid:border-destructive data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-disabled:cursor-default [@media(hover:hover)]:[&[data-state=unchecked]:not([data-readonly]):not([data-disabled]):hover]:bg-accent motion-reduce:transition-none motion-reduce:before:transition-none", {
+    variants: {
+        size: {
+            xs: 'size-3.5 before:size-1',
+            sm: 'size-4 before:size-1.5',
+            md: 'size-5 before:size-2',
+            lg: 'size-control-xs before:size-2.5',
+            xl: 'size-7 before:size-3'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const RadioGroup_RadioGroupRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.Root, {
+        ref: ref,
+        "data-slot": "radio-group-root",
+        className: cn('relative flex flex-col gap-2 text-foreground data-disabled:cursor-default', className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.RootProvider, {
+        ref: ref,
+        "data-slot": "radio-group-root-provider",
+        className: cn('relative flex flex-col gap-2 text-foreground data-disabled:cursor-default', className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.Label, {
+        ref: ref,
+        "data-slot": "radio-group-label",
+        className: cn('text-sm leading-5 font-semibold text-inherit', className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.Item, {
+        ref: ref,
+        "data-slot": "radio-group-item",
+        className: cn('inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroupOption = /*#__PURE__*/ forwardRef(function({ children, size, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(RadioGroup_RadioGroupItem, {
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(RadioGroup.ItemHiddenInput, {}),
+            /*#__PURE__*/ jsx(RadioGroup_RadioGroupItemControl, {
+                size: size
+            }),
+            /*#__PURE__*/ jsx(RadioGroup_RadioGroupItemText, {
+                children: children
+            })
+        ]
+    });
+});
+const RadioGroup_RadioGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.ItemControl, {
+        ref: ref,
+        "data-slot": "radio-group-item-control",
+        "data-size": size,
+        className: cn(radioGroupItemControlVariants({
+            size
+        }), className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroupItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.ItemText, {
+        ref: ref,
+        "data-slot": "radio-group-item-text",
+        className: cn('text-sm leading-5 font-medium text-inherit', className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroupIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RadioGroup.Indicator, {
+        ref: ref,
+        "data-slot": "radio-group-indicator",
+        className: cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] h-[var(--height)] w-[var(--width)] rounded-full bg-primary opacity-[0.12] transition-[var(--transition-property,translate)] duration-200 ease-in-out motion-reduce:transition-none', className),
+        ...props
+    });
+});
+const RadioGroup_RadioGroup = Object.assign(RadioGroup_RadioGroupRoot, {
+    Root: RadioGroup_RadioGroupRoot,
+    RootProvider: RadioGroup_RadioGroupRootProvider,
+    Context: RadioGroup.Context,
+    ItemContext: RadioGroup.ItemContext,
+    Label: RadioGroup_RadioGroupLabel,
+    Item: RadioGroup_RadioGroupItem,
+    ItemHiddenInput: RadioGroup.ItemHiddenInput,
+    Option: RadioGroup_RadioGroupOption,
+    ItemControl: RadioGroup_RadioGroupItemControl,
+    ItemText: RadioGroup_RadioGroupItemText,
+    Indicator: RadioGroup_RadioGroupIndicator
+});
+export { RadioGroup_RadioGroup as RadioGroup, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext };

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

@@ -0,0 +1,2 @@
+export { RadioGroup, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext, } from './RadioGroup.js';
+export type { RadioGroupItemControlProps, RadioGroupItemControlSize, RadioGroupOptionProps, } from './RadioGroup.js';

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

@@ -0,0 +1 @@
+export { RadioGroup, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext } from "./RadioGroup.js";

package/dist/components/rating-group/RatingGroup.d.ts

@@ -0,0 +1,27 @@
+import { RatingGroup as RatingGroupPrimitive, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from '@ark-ui/react/rating-group';
+import type { ComponentProps, ReactNode } from 'react';
+type RatingGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type RatingGroupRootProps = ComponentProps<typeof RatingGroupPrimitive.Root> & {
+    size?: RatingGroupSize;
+};
+type RatingGroupRootProviderProps = ComponentProps<typeof RatingGroupPrimitive.RootProvider> & {
+    size?: RatingGroupSize;
+};
+type RatingGroupItemIndicatorProps = ComponentProps<'span'>;
+declare function RatingGroupItems({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+declare const RatingGroup: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: RatingGroupPrimitive.ContextProps) => ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<RatingGroupPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<RatingGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<RatingGroupPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<RatingGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemContext: (props: RatingGroupPrimitive.ItemContextProps) => ReactNode;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Items: typeof RatingGroupItems;
+};
+export { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };
+export type { RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize, };

package/dist/components/rating-group/RatingGroup.js

@@ -0,0 +1,92 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { RatingStarIcon } from "../../internal/icons/ui/index.js";
+const RatingGroup_RatingGroupRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(RatingGroup.Root, {
+        ref: ref,
+        "data-slot": "rating-group-root",
+        "data-size": size,
+        className: cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', className),
+        ...props
+    });
+});
+const RatingGroup_RatingGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
+    return /*#__PURE__*/ jsx(RatingGroup.RootProvider, {
+        ref: ref,
+        "data-slot": "rating-group-root-provider",
+        "data-size": size,
+        className: cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', className),
+        ...props
+    });
+});
+const RatingGroup_RatingGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RatingGroup.Label, {
+        ref: ref,
+        "data-slot": "rating-group-label",
+        className: cn('text-sm leading-5 font-semibold text-foreground select-none data-disabled:opacity-50', className),
+        ...props
+    });
+});
+const RatingGroup_RatingGroupControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RatingGroup.Control, {
+        ref: ref,
+        "data-slot": "rating-group-control",
+        className: cn('inline-flex items-center gap-1 data-disabled:opacity-50', className),
+        ...props
+    });
+});
+const RatingGroup_RatingGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(RatingGroup.Item, {
+        ref: ref,
+        "data-slot": "rating-group-item",
+        className: cn('inline-flex cursor-pointer items-center justify-center rounded-sm leading-none text-inherit outline-1 -outline-offset-1 outline-transparent transition-[color,opacity] duration-200 ease-in-out data-disabled:pointer-events-none data-disabled:cursor-default data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-readonly:cursor-default', className),
+        ...props
+    });
+});
+const RatingGroup_RatingGroupItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    const { half, highlighted } = useRatingGroupItemContext();
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "data-slot": "rating-group-item-indicator",
+        "data-half": half ? '' : void 0,
+        "data-highlighted": highlighted ? '' : void 0,
+        className: cn('relative inline-flex size-5 items-center justify-center text-primary group-data-[size=lg]/rating-group:size-6 group-data-[size=sm]/rating-group:size-4 group-data-[size=xl]/rating-group:size-7 group-data-[size=xs]/rating-group:size-3.5 [&>svg]:size-full [&>svg]:flex-none [&>svg]:transition-[color,fill,stroke,clip-path] [&>svg]:duration-200 [&>svg]:ease-in-out', className),
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(RatingStarIcon, {
+                    "data-slot": "rating-group-item-indicator-bg",
+                    className: "absolute inset-0 size-full flex-none fill-transparent stroke-current text-muted-foreground"
+                }),
+                /*#__PURE__*/ jsx(RatingStarIcon, {
+                    "data-slot": "rating-group-item-indicator-fg",
+                    className: cn('absolute inset-0 size-full flex-none fill-current stroke-current text-primary [clip-path:inset(0_0_0_0)]', half && '[clip-path:inset(0_50%_0_0)] rtl:[clip-path:inset(0_0_0_50%)]', !highlighted && '[clip-path:inset(0_100%_0_0)]')
+                })
+            ]
+        })
+    });
+});
+function RatingGroupItems({ children }) {
+    return /*#__PURE__*/ jsx(RatingGroup.Context, {
+        children: ({ items })=>items.map((item)=>/*#__PURE__*/ jsx(RatingGroup_RatingGroupItem, {
+                    index: item,
+                    children: children ?? /*#__PURE__*/ jsx(RatingGroup_RatingGroupItemIndicator, {})
+                }, item))
+    });
+}
+const RatingGroup_RatingGroup = Object.assign(RatingGroup_RatingGroupRoot, {
+    Root: RatingGroup_RatingGroupRoot,
+    RootProvider: RatingGroup_RatingGroupRootProvider,
+    Context: RatingGroup.Context,
+    HiddenInput: RatingGroup.HiddenInput,
+    Label: RatingGroup_RatingGroupLabel,
+    Control: RatingGroup_RatingGroupControl,
+    Item: RatingGroup_RatingGroupItem,
+    ItemContext: RatingGroup.ItemContext,
+    ItemIndicator: RatingGroup_RatingGroupItemIndicator,
+    Items: RatingGroupItems
+});
+export { RatingGroup_RatingGroup as RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

package/dist/components/rating-group/index.d.ts

@@ -0,0 +1,2 @@
+export { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext, } from './RatingGroup.js';
+export type { RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize, } from './RatingGroup.js';

package/dist/components/rating-group/index.js

@@ -0,0 +1 @@
+export { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "./RatingGroup.js";

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,23 @@
+import { ScrollArea as ScrollAreaPrimitive, useScrollArea, useScrollAreaContext } from '@ark-ui/react/scroll-area';
+import type { ComponentProps } from 'react';
+type ModuixScrollAreaRootProps = ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    fade?: boolean;
+    variant?: 'hover' | 'always';
+};
+type ModuixScrollAreaRootProviderProps = ComponentProps<typeof ScrollAreaPrimitive.RootProvider> & {
+    fade?: boolean;
+    variant?: 'hover' | 'always';
+};
+declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: ScrollAreaPrimitive.ContextProps) => import("react").ReactNode;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Scrollbar: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Corner: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.CornerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    useScrollArea: (props?: import("@ark-ui/react/scroll-area").UseScrollAreaProps) => import("@ark-ui/react/scroll-area").UseScrollAreaReturn;
+};
+export { ScrollArea, useScrollArea, useScrollAreaContext };
+export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps };

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea, useScrollArea, useScrollAreaContext } from "@ark-ui/react/scroll-area";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+const ScrollArea_ScrollAreaRoot = /*#__PURE__*/ forwardRef(function({ className, fade, variant = 'hover', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.Root, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-root",
+        "data-fade": fade ? '' : void 0,
+        "data-variant": variant,
+        className: cn('group/scroll-area relative h-full min-h-0 w-full min-w-0 text-foreground', className)
+    });
+});
+const ScrollArea_ScrollAreaRootProvider = /*#__PURE__*/ forwardRef(function({ className, fade, variant = 'hover', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.RootProvider, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-root-provider",
+        "data-fade": fade ? '' : void 0,
+        "data-variant": variant,
+        className: cn('group/scroll-area relative h-full min-h-0 w-full min-w-0 text-foreground', className)
+    });
+});
+const ScrollArea_ScrollAreaViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.Viewport, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-viewport",
+        className: cn('h-full min-h-0 w-full min-w-0 [scrollbar-width:none] rounded-md bg-transparent outline-0 group-data-[fade]/scroll-area:[mask-image:linear-gradient(to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,0px))),transparent_100%)] group-data-[fade]/scroll-area:mask-no-repeat focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring forced-colors:mask-none forced-colors:focus-visible:outline-[Highlight] [&::-webkit-scrollbar]:hidden', className)
+    });
+});
+const ScrollArea_ScrollAreaContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.Content, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-content",
+        className: cn('block', className)
+    });
+});
+const ScrollArea_ScrollAreaScrollbar = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-scrollbar",
+        className: cn("pointer-events-none absolute hidden touch-none justify-center rounded-md bg-transparent opacity-0 transition-[opacity,width,height] duration-200 ease-in-out select-none group-data-[variant=always]/scroll-area:pointer-events-auto group-data-[variant=always]/scroll-area:opacity-100 before:absolute before:content-[''] data-dragging:pointer-events-auto data-hover:pointer-events-auto data-hover:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0 data-[orientation=horizontal]:start-0 data-[orientation=horizontal]:end-[var(--corner-width,0px)] data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:bottom-1/2 data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:translate-y-1/2 data-[orientation=horizontal]:hover:h-1.5 data-[orientation=horizontal]:data-dragging:h-1.5 data-[orientation=horizontal]:data-overflow-x:flex data-[orientation=vertical]:end-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-[var(--corner-height,0px)] data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=vertical]:w-1 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2 data-[orientation=vertical]:hover:w-1.5 data-[orientation=vertical]:data-dragging:w-1.5 data-[orientation=vertical]:data-overflow-y:flex motion-reduce:transition-none", className)
+    });
+});
+const ScrollArea_ScrollAreaThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.Thumb, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-thumb",
+        className: cn('rounded-full bg-border data-[orientation=horizontal]:h-full data-[orientation=horizontal]:min-w-control-xs data-[orientation=vertical]:min-h-control-xs data-[orientation=vertical]:w-full forced-colors:bg-[ButtonText]', className)
+    });
+});
+const ScrollArea_ScrollAreaCorner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ScrollArea.Corner, {
+        ref: ref,
+        ...props,
+        "data-slot": "scroll-area-corner",
+        className: cn('bg-transparent', className)
+    });
+});
+const ScrollArea_ScrollArea = Object.assign(ScrollArea_ScrollAreaRoot, {
+    Root: ScrollArea_ScrollAreaRoot,
+    RootProvider: ScrollArea_ScrollAreaRootProvider,
+    Context: ScrollArea.Context,
+    Viewport: ScrollArea_ScrollAreaViewport,
+    Content: ScrollArea_ScrollAreaContent,
+    Scrollbar: ScrollArea_ScrollAreaScrollbar,
+    Thumb: ScrollArea_ScrollAreaThumb,
+    Corner: ScrollArea_ScrollAreaCorner,
+    useScrollArea: useScrollArea
+});
+export { ScrollArea_ScrollArea as ScrollArea, useScrollArea, useScrollAreaContext };

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

@@ -0,0 +1,2 @@
+export { ScrollArea, useScrollArea, useScrollAreaContext } from './ScrollArea.js';
+export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps } from './ScrollArea.js';

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

@@ -0,0 +1 @@
+export { ScrollArea, useScrollArea, useScrollAreaContext } from "./ScrollArea.js";

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -0,0 +1,25 @@
+import { SegmentGroup as SegmentGroupPrimitive, useSegmentGroup as useSegmentGroupPrimitive, useSegmentGroupContext, useSegmentGroupItemContext } from '@ark-ui/react/segment-group';
+import type { ReactNode } from 'react';
+type SegmentGroupMachineProps = Parameters<typeof useSegmentGroupPrimitive>[0];
+declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/react/segment-group").UseSegmentGroupReturn;
+declare function SegmentGroupItems({ items, }: {
+    items: readonly {
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+    }[];
+}): import("react").JSX.Element[];
+declare const SegmentGroup: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: SegmentGroupPrimitive.ContextProps) => ReactNode;
+    ItemContext: (props: SegmentGroupPrimitive.ItemContextProps) => ReactNode;
+    Label: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemHiddenInput: import("react").ForwardRefExoticComponent<SegmentGroupPrimitive.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Items: typeof SegmentGroupItems;
+};
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

package/dist/components/segment-group/SegmentGroup.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { useFieldsetContext } from "@ark-ui/react/fieldset";
+import { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "@ark-ui/react/segment-group";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+function omitUndefined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, value])=>void 0 !== value));
+}
+function SegmentGroup_useSegmentGroup(props) {
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
+    return useSegmentGroup({
+        disabled: field?.disabled ?? fieldset?.disabled,
+        invalid: field?.invalid ?? fieldset?.invalid,
+        readOnly: field?.readOnly,
+        required: field?.required,
+        ...omitUndefined(props ?? {})
+    });
+}
+const SegmentGroup_SegmentGroupRoot = /*#__PURE__*/ forwardRef(function({ className, defaultValue, disabled, form, id, ids, invalid, name, onValueChange, orientation = 'horizontal', readOnly, required, value, ...props }, ref) {
+    const segmentGroup = SegmentGroup_useSegmentGroup({
+        defaultValue,
+        disabled,
+        form,
+        id,
+        ids,
+        invalid,
+        name,
+        onValueChange,
+        orientation,
+        readOnly,
+        required,
+        value
+    });
+    return /*#__PURE__*/ jsx(SegmentGroup.RootProvider, {
+        ref: ref,
+        value: segmentGroup,
+        "data-slot": "segment-group-root",
+        className: cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', className),
+        ...props
+    });
+});
+const SegmentGroup_SegmentGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.RootProvider, {
+        ref: ref,
+        "data-slot": "segment-group-root-provider",
+        className: cn('group/segment-group relative isolate box-border inline-flex max-w-full items-stretch gap-1 rounded-lg border border-border bg-muted p-1 text-foreground data-disabled:opacity-50 data-invalid:border-destructive data-[orientation=vertical]:flex-col', className),
+        ...props
+    });
+});
+const SegmentGroup_SegmentGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.Label, {
+        ref: ref,
+        "data-slot": "segment-group-label",
+        className: cn('relative z-1 text-sm leading-5 font-semibold text-inherit select-none', className),
+        ...props
+    });
+});
+const SegmentGroup_SegmentGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.Item, {
+        ref: ref,
+        "data-slot": "segment-group-item",
+        className: cn('relative z-1 box-border inline-flex min-h-control-sm cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 text-sm leading-5 font-medium whitespace-nowrap text-muted-foreground outline-0 transition-[color,opacity] duration-200 ease-in-out select-none group-data-disabled/segment-group:!opacity-100 data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:outline-1 data-focus-visible:-outline-offset-1 data-focus-visible:outline-ring data-invalid:data-focus-visible:outline-destructive data-readonly:cursor-default data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[state=checked]:text-foreground [@media(hover:hover)]:[&:not([data-readonly]):not([data-disabled]):hover]:text-foreground', className),
+        ...props
+    });
+});
+const SegmentGroup_SegmentGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.ItemControl, {
+        ref: ref,
+        "data-slot": "segment-group-item-control",
+        className: cn('hidden', className),
+        ...props
+    });
+});
+const SegmentGroup_SegmentGroupItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.ItemText, {
+        ref: ref,
+        "data-slot": "segment-group-item-text",
+        className: cn('relative z-1', className),
+        ...props
+    });
+});
+const SegmentGroup_SegmentGroupIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.Indicator, {
+        ref: ref,
+        "data-slot": "segment-group-indicator",
+        className: cn('pointer-events-none absolute top-[var(--top)] left-[var(--left)] z-0 h-[var(--height)] w-[var(--width)] rounded-md bg-background shadow-sm !duration-200 !ease-in-out', className),
+        ...props
+    });
+});
+function SegmentGroupItems({ items }) {
+    return items.map(({ value, label, disabled })=>/*#__PURE__*/ jsxs(SegmentGroup_SegmentGroupItem, {
+            value: value,
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemText, {
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemControl, {}),
+                /*#__PURE__*/ jsx(SegmentGroup.ItemHiddenInput, {})
+            ]
+        }, value));
+}
+const SegmentGroup_SegmentGroup = Object.assign(SegmentGroup_SegmentGroupRoot, {
+    Root: SegmentGroup_SegmentGroupRoot,
+    RootProvider: SegmentGroup_SegmentGroupRootProvider,
+    Context: SegmentGroup.Context,
+    ItemContext: SegmentGroup.ItemContext,
+    Label: SegmentGroup_SegmentGroupLabel,
+    Item: SegmentGroup_SegmentGroupItem,
+    ItemHiddenInput: SegmentGroup.ItemHiddenInput,
+    ItemControl: SegmentGroup_SegmentGroupItemControl,
+    ItemText: SegmentGroup_SegmentGroupItemText,
+    Indicator: SegmentGroup_SegmentGroupIndicator,
+    Items: SegmentGroupItems
+});
+export { SegmentGroup_SegmentGroup as SegmentGroup, SegmentGroup_useSegmentGroup as useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

package/dist/components/segment-group/index.d.ts

@@ -0,0 +1 @@
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext, } from './SegmentGroup.js';

package/dist/components/segment-group/index.js

@@ -0,0 +1 @@
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "./SegmentGroup.js";

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

@@ -0,0 +1,39 @@
+import { Select as SelectPrimitive, type SelectRootComponent as ArkSelectRootComponent, type SelectRootProviderComponent as ArkSelectRootProviderComponent, useSelect, useSelectContext, useSelectItemContext } from '@ark-ui/react/select';
+import type { ComponentProps, ReactNode } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type SelectRootComponent = ArkSelectRootComponent<OverlayPortalProps>;
+type SelectRootProviderComponent = ArkSelectRootProviderComponent<OverlayPortalProps>;
+type SelectFieldProps = Omit<ComponentProps<typeof SelectPrimitive.Control>, 'asChild' | 'children'> & {
+    clearLabel?: string;
+    indicator?: ReactNode;
+    placeholder?: ComponentProps<typeof SelectPrimitive.ValueText>['placeholder'];
+};
+declare const Select: SelectRootComponent & {
+    Root: SelectRootComponent;
+    RootProvider: SelectRootProviderComponent;
+    Context: <T extends unknown>(props: SelectPrimitive.ContextProps<T>) => ReactNode;
+    HiddenSelect: import("react").ForwardRefExoticComponent<SelectPrimitive.HiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+    ItemContext: (props: SelectPrimitive.ItemContextProps) => ReactNode;
+    useSelect: <T extends unknown>(props: import("@ark-ui/react/select").UseSelectProps<T>) => import("@ark-ui/react/select").UseSelectReturn<T>;
+    useSelectContext: () => import("@ark-ui/react/select").UseSelectContext<any>;
+    useSelectItemContext: () => import("@ark-ui/react/select").UseSelectItemContext;
+    Label: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Field: import("react").ForwardRefExoticComponent<Omit<SelectFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemTextContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemTextIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemTextLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { Select, useSelect, useSelectContext, useSelectItemContext };