@moduix/solid-tailwind 1.0.0

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

@@ -0,0 +1,150 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/solid/rating-group";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { RatingStarIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=rating-group-item-indicator>");
+function RatingGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(RatingGroup.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "rating-group-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function RatingGroupRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(RatingGroup.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "rating-group-root-provider",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function RatingGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(RatingGroup.Label, mergeProps({
+        "data-slot": "rating-group-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-semibold text-foreground select-none data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function RatingGroupControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(RatingGroup.Control, mergeProps({
+        "data-slot": "rating-group-control",
+        get ["class"] () {
+            return cn('inline-flex items-center gap-1 data-disabled:opacity-50', local.class);
+        }
+    }, others));
+}
+function RatingGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(RatingGroup.Item, mergeProps({
+        "data-slot": "rating-group-item",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function RatingGroupItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const item = useRatingGroupItemContext();
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps({
+            get ["data-half"] () {
+                return item().half ? '' : void 0;
+            },
+            get ["data-highlighted"] () {
+                return item().highlighted ? '' : void 0;
+            },
+            get ["class"] () {
+                return 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', local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? [
+                createComponent(RatingStarIcon, {
+                    "data-slot": "rating-group-item-indicator-bg",
+                    class: "absolute inset-0 size-full flex-none fill-transparent stroke-current text-muted-foreground"
+                }),
+                createComponent(RatingStarIcon, {
+                    "data-slot": "rating-group-item-indicator-fg",
+                    get ["class"] () {
+                        return cn('absolute inset-0 size-full flex-none fill-current stroke-current text-primary [clip-path:inset(0_0_0_0)]', item().half && '[clip-path:inset(0_50%_0_0)] rtl:[clip-path:inset(0_0_0_50%)]', !item().highlighted && '[clip-path:inset(0_100%_0_0)]');
+                    }
+                })
+            ]);
+        return _el$;
+    })();
+}
+function RatingGroupItems(props) {
+    return createComponent(RatingGroup.Context, {
+        children: (ratingGroup)=>createComponent(For, {
+                get each () {
+                    return ratingGroup().items;
+                },
+                children: (item)=>createComponent(RatingGroupItem, {
+                        index: item,
+                        get children () {
+                            return props.children ?? createComponent(RatingGroupItemIndicator, {});
+                        }
+                    })
+            })
+    });
+}
+const RatingGroup_RatingGroup = Object.assign(RatingGroupRoot, {
+    Root: RatingGroupRoot,
+    RootProvider: RatingGroupRootProvider,
+    Context: RatingGroup.Context,
+    HiddenInput: RatingGroup.HiddenInput,
+    Label: RatingGroupLabel,
+    Control: RatingGroupControl,
+    Item: RatingGroupItem,
+    ItemContext: RatingGroup.ItemContext,
+    ItemIndicator: RatingGroupItemIndicator,
+    Items: RatingGroupItems
+});
+export { RatingGroup_RatingGroup as RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

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

@@ -0,0 +1,80 @@
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/solid/rating-group";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { RatingStarIcon } from "../../internal/icons/ui/Icons.jsx";
+function RatingGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return <RatingGroup.Root asChild={local.asChild} data-slot="rating-group-root" data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others}>
+      {local.children}
+    </RatingGroup.Root>;
+}
+function RatingGroupRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return <RatingGroup.RootProvider asChild={local.asChild} data-slot="rating-group-root-provider" data-size={local.size ?? 'md'} class={cn('group/rating-group inline-flex flex-col gap-1 text-muted-foreground', local.class)} {...others}>
+      {local.children}
+    </RatingGroup.RootProvider>;
+}
+function RatingGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <RatingGroup.Label data-slot="rating-group-label" class={cn('text-sm leading-5 font-semibold text-foreground select-none data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function RatingGroupControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <RatingGroup.Control data-slot="rating-group-control" class={cn('inline-flex items-center gap-1 data-disabled:opacity-50', local.class)} {...others}/>;
+}
+function RatingGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <RatingGroup.Item data-slot="rating-group-item" class={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', local.class)} {...others}/>;
+}
+function RatingGroupItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const item = useRatingGroupItemContext();
+    return <span data-slot="rating-group-item-indicator" data-half={item().half ? '' : void 0} data-highlighted={item().highlighted ? '' : void 0} class={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', local.class)} {...others}>
+      {resolvedChildren() ?? <>
+          <RatingStarIcon data-slot="rating-group-item-indicator-bg" class="absolute inset-0 size-full flex-none fill-transparent stroke-current text-muted-foreground"/>
+          <RatingStarIcon data-slot="rating-group-item-indicator-fg" class={cn('absolute inset-0 size-full flex-none fill-current stroke-current text-primary [clip-path:inset(0_0_0_0)]', item().half && '[clip-path:inset(0_50%_0_0)] rtl:[clip-path:inset(0_0_0_50%)]', !item().highlighted && '[clip-path:inset(0_100%_0_0)]')}/>
+        </>}
+    </span>;
+}
+function RatingGroupItems(props) {
+    return <RatingGroup.Context>
+      {(ratingGroup)=><For each={ratingGroup().items}>
+          {(item)=><RatingGroupItem index={item}>
+              {props.children ?? <RatingGroupItemIndicator/>}
+            </RatingGroupItem>}
+        </For>}
+    </RatingGroup.Context>;
+}
+const RatingGroup_RatingGroup = Object.assign(RatingGroupRoot, {
+    Root: RatingGroupRoot,
+    RootProvider: RatingGroupRootProvider,
+    Context: RatingGroup.Context,
+    HiddenInput: RatingGroup.HiddenInput,
+    Label: RatingGroupLabel,
+    Control: RatingGroupControl,
+    Item: RatingGroupItem,
+    ItemContext: RatingGroup.ItemContext,
+    ItemIndicator: 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/rating-group/index.jsx

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

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

@@ -0,0 +1,30 @@
+import { ScrollArea as ScrollAreaPrimitive, useScrollArea, useScrollAreaContext } from '@ark-ui/solid/scroll-area';
+import type { ComponentProps } from 'solid-js';
+type ModuixScrollAreaRootProps = ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    fade?: boolean;
+    variant?: 'hover' | 'always';
+};
+type ModuixScrollAreaRootProviderProps = ComponentProps<typeof ScrollAreaPrimitive.RootProvider> & {
+    fade?: boolean;
+    variant?: 'hover' | 'always';
+};
+declare function ScrollAreaRoot(props: ModuixScrollAreaRootProps): import("solid-js").JSX.Element;
+declare function ScrollAreaRootProvider(props: ModuixScrollAreaRootProviderProps): import("solid-js").JSX.Element;
+declare function ScrollAreaViewport(props: ComponentProps<typeof ScrollAreaPrimitive.Viewport>): import("solid-js").JSX.Element;
+declare function ScrollAreaContent(props: ComponentProps<typeof ScrollAreaPrimitive.Content>): import("solid-js").JSX.Element;
+declare function ScrollAreaScrollbar(props: ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>): import("solid-js").JSX.Element;
+declare function ScrollAreaThumb(props: ComponentProps<typeof ScrollAreaPrimitive.Thumb>): import("solid-js").JSX.Element;
+declare function ScrollAreaCorner(props: ComponentProps<typeof ScrollAreaPrimitive.Corner>): import("solid-js").JSX.Element;
+declare const ScrollArea: typeof ScrollAreaRoot & {
+    Root: typeof ScrollAreaRoot;
+    RootProvider: typeof ScrollAreaRootProvider;
+    Context: typeof ScrollAreaPrimitive.Context;
+    Viewport: typeof ScrollAreaViewport;
+    Content: typeof ScrollAreaContent;
+    Scrollbar: typeof ScrollAreaScrollbar;
+    Thumb: typeof ScrollAreaThumb;
+    Corner: typeof ScrollAreaCorner;
+    useScrollArea: (props?: import("@ark-ui/solid").UseScrollAreaProps) => import("@ark-ui/solid").UseScrollAreaReturn;
+};
+export { ScrollArea, useScrollArea, useScrollAreaContext };
+export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps };

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

@@ -0,0 +1,109 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ScrollArea, useScrollArea, useScrollAreaContext } from "@ark-ui/solid/scroll-area";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function ScrollAreaRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fade',
+        'variant'
+    ]);
+    return createComponent(ScrollArea.Root, mergeProps(others, {
+        "data-slot": "scroll-area-root",
+        get ["data-fade"] () {
+            return local.fade ? '' : void 0;
+        },
+        get ["data-variant"] () {
+            return local.variant ?? 'hover';
+        },
+        get ["class"] () {
+            return cn('group/scroll-area relative h-full min-h-0 w-full min-w-0 text-foreground', local.class);
+        }
+    }));
+}
+function ScrollAreaRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fade',
+        'variant'
+    ]);
+    return createComponent(ScrollArea.RootProvider, mergeProps(others, {
+        "data-slot": "scroll-area-root-provider",
+        get ["data-fade"] () {
+            return local.fade ? '' : void 0;
+        },
+        get ["data-variant"] () {
+            return local.variant ?? 'hover';
+        },
+        get ["class"] () {
+            return cn('group/scroll-area relative h-full min-h-0 w-full min-w-0 text-foreground', local.class);
+        }
+    }));
+}
+function ScrollAreaViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ScrollArea.Viewport, mergeProps(others, {
+        "data-slot": "scroll-area-viewport",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }));
+}
+function ScrollAreaContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ScrollArea.Content, mergeProps(others, {
+        "data-slot": "scroll-area-content",
+        get ["class"] () {
+            return cn('block', local.class);
+        }
+    }));
+}
+function ScrollAreaScrollbar(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ScrollArea.Scrollbar, mergeProps(others, {
+        "data-slot": "scroll-area-scrollbar",
+        get ["class"] () {
+            return 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", local.class);
+        }
+    }));
+}
+function ScrollAreaThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ScrollArea.Thumb, mergeProps(others, {
+        "data-slot": "scroll-area-thumb",
+        get ["class"] () {
+            return 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]', local.class);
+        }
+    }));
+}
+function ScrollAreaCorner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ScrollArea.Corner, mergeProps(others, {
+        "data-slot": "scroll-area-corner",
+        get ["class"] () {
+            return cn('bg-transparent', local.class);
+        }
+    }));
+}
+const ScrollArea_ScrollArea = Object.assign(ScrollAreaRoot, {
+    Root: ScrollAreaRoot,
+    RootProvider: ScrollAreaRootProvider,
+    Context: ScrollArea.Context,
+    Viewport: ScrollAreaViewport,
+    Content: ScrollAreaContent,
+    Scrollbar: ScrollAreaScrollbar,
+    Thumb: ScrollAreaThumb,
+    Corner: ScrollAreaCorner,
+    useScrollArea: useScrollArea
+});
+export { ScrollArea_ScrollArea as ScrollArea, useScrollArea, useScrollAreaContext };

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

@@ -0,0 +1,61 @@
+import { ScrollArea, useScrollArea, useScrollAreaContext } from "@ark-ui/solid/scroll-area";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function ScrollAreaRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fade',
+        'variant'
+    ]);
+    return <ScrollArea.Root {...others} data-slot="scroll-area-root" data-fade={local.fade ? '' : void 0} data-variant={local.variant ?? 'hover'} class={cn('group/scroll-area relative h-full min-h-0 w-full min-w-0 text-foreground', local.class)}/>;
+}
+function ScrollAreaRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'fade',
+        'variant'
+    ]);
+    return <ScrollArea.RootProvider {...others} data-slot="scroll-area-root-provider" data-fade={local.fade ? '' : void 0} data-variant={local.variant ?? 'hover'} class={cn('group/scroll-area relative h-full min-h-0 w-full min-w-0 text-foreground', local.class)}/>;
+}
+function ScrollAreaViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Viewport {...others} data-slot="scroll-area-viewport" class={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', local.class)}/>;
+}
+function ScrollAreaContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Content {...others} data-slot="scroll-area-content" class={cn('block', local.class)}/>;
+}
+function ScrollAreaScrollbar(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Scrollbar {...others} data-slot="scroll-area-scrollbar" class={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", local.class)}/>;
+}
+function ScrollAreaThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Thumb {...others} data-slot="scroll-area-thumb" class={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]', local.class)}/>;
+}
+function ScrollAreaCorner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Corner {...others} data-slot="scroll-area-corner" class={cn('bg-transparent', local.class)}/>;
+}
+const ScrollArea_ScrollArea = Object.assign(ScrollAreaRoot, {
+    Root: ScrollAreaRoot,
+    RootProvider: ScrollAreaRootProvider,
+    Context: ScrollArea.Context,
+    Viewport: ScrollAreaViewport,
+    Content: ScrollAreaContent,
+    Scrollbar: ScrollAreaScrollbar,
+    Thumb: ScrollAreaThumb,
+    Corner: 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/scroll-area/index.jsx

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

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

@@ -0,0 +1,33 @@
+import { SegmentGroup as SegmentGroupPrimitive, useSegmentGroup as useSegmentGroupPrimitive, useSegmentGroupContext, useSegmentGroupItemContext } from '@ark-ui/solid/segment-group';
+import type { ComponentProps, JSX } from 'solid-js';
+type SegmentGroupMachineProps = NonNullable<Parameters<typeof useSegmentGroupPrimitive>[0]>;
+type SegmentGroupOption = {
+    value: string;
+    label: JSX.Element;
+    disabled?: boolean;
+};
+declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/solid").UseSegmentGroupReturn;
+declare function SegmentGroupRoot(props: ComponentProps<typeof SegmentGroupPrimitive.Root>): JSX.Element;
+declare function SegmentGroupRootProvider(props: ComponentProps<typeof SegmentGroupPrimitive.RootProvider>): JSX.Element;
+declare function SegmentGroupLabel(props: ComponentProps<typeof SegmentGroupPrimitive.Label>): JSX.Element;
+declare function SegmentGroupItem(props: ComponentProps<typeof SegmentGroupPrimitive.Item>): JSX.Element;
+declare function SegmentGroupItemControl(props: ComponentProps<typeof SegmentGroupPrimitive.ItemControl>): JSX.Element;
+declare function SegmentGroupItemText(props: ComponentProps<typeof SegmentGroupPrimitive.ItemText>): JSX.Element;
+declare function SegmentGroupIndicator(props: ComponentProps<typeof SegmentGroupPrimitive.Indicator>): JSX.Element;
+declare function SegmentGroupItems(props: {
+    items: readonly SegmentGroupOption[];
+}): JSX.Element;
+declare const SegmentGroup: typeof SegmentGroupRoot & {
+    Root: typeof SegmentGroupRoot;
+    RootProvider: typeof SegmentGroupRootProvider;
+    Context: (props: SegmentGroupPrimitive.ContextProps) => JSX.Element;
+    ItemContext: (props: SegmentGroupPrimitive.ItemContextProps) => JSX.Element;
+    Label: typeof SegmentGroupLabel;
+    Item: typeof SegmentGroupItem;
+    ItemHiddenInput: (props: SegmentGroupPrimitive.ItemHiddenInputProps) => JSX.Element;
+    ItemControl: typeof SegmentGroupItemControl;
+    ItemText: typeof SegmentGroupItemText;
+    Indicator: typeof SegmentGroupIndicator;
+    Items: typeof SegmentGroupItems;
+};
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };