@moduix/solid 1.0.0

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

@@ -0,0 +1,33 @@
+import { RatingGroup as RatingGroupPrimitive, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from '@ark-ui/solid/rating-group';
+import type { ComponentProps, JSX } from 'solid-js';
+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 RatingGroupRoot(props: RatingGroupRootProps): JSX.Element;
+declare function RatingGroupRootProvider(props: RatingGroupRootProviderProps): JSX.Element;
+declare function RatingGroupLabel(props: ComponentProps<typeof RatingGroupPrimitive.Label>): JSX.Element;
+declare function RatingGroupControl(props: ComponentProps<typeof RatingGroupPrimitive.Control>): JSX.Element;
+declare function RatingGroupItem(props: ComponentProps<typeof RatingGroupPrimitive.Item>): JSX.Element;
+declare function RatingGroupItemIndicator(props: RatingGroupItemIndicatorProps): JSX.Element;
+declare function RatingGroupItems(props: {
+    children?: JSX.Element;
+}): JSX.Element;
+declare const RatingGroup: typeof RatingGroupRoot & {
+    Root: typeof RatingGroupRoot;
+    RootProvider: typeof RatingGroupRootProvider;
+    Context: (props: RatingGroupPrimitive.ContextProps) => JSX.Element;
+    HiddenInput: (props: RatingGroupPrimitive.HiddenInputProps) => JSX.Element;
+    Label: typeof RatingGroupLabel;
+    Control: typeof RatingGroupControl;
+    Item: typeof RatingGroupItem;
+    ItemContext: (props: RatingGroupPrimitive.ItemContextProps) => JSX.Element;
+    ItemIndicator: typeof RatingGroupItemIndicator;
+    Items: typeof RatingGroupItems;
+};
+export { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };
+export type { RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize, };

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

@@ -0,0 +1,153 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/solid/rating-group";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { RatingStarIcon } from "../../internal/icons/ui/Icons.js";
+import RatingGroup_module from "./RatingGroup.module.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 clsx(RatingGroup_module.root, 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 clsx(RatingGroup_module.root, 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 clsx(RatingGroup_module.label, 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 clsx(RatingGroup_module.control, 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 clsx(RatingGroup_module.item, 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 clsx(RatingGroup_module.itemIndicator, local.class);
+            }
+        }, others), false, true);
+        insert(_el$, ()=>resolvedChildren() ?? [
+                createComponent(RatingStarIcon, {
+                    "data-slot": "rating-group-item-indicator-bg",
+                    get ["class"] () {
+                        return RatingGroup_module.iconBg;
+                    }
+                }),
+                createComponent(RatingStarIcon, {
+                    "data-slot": "rating-group-item-indicator-fg",
+                    get ["class"] () {
+                        return RatingGroup_module.iconFg;
+                    }
+                })
+            ]);
+        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,81 @@
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/solid/rating-group";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { RatingStarIcon } from "../../internal/icons/ui/Icons.jsx";
+import RatingGroup_module from "./RatingGroup.module.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={clsx(RatingGroup_module.root, 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={clsx(RatingGroup_module.root, 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={clsx(RatingGroup_module.label, local.class)} {...others}/>;
+}
+function RatingGroupControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <RatingGroup.Control data-slot="rating-group-control" class={clsx(RatingGroup_module.control, local.class)} {...others}/>;
+}
+function RatingGroupItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <RatingGroup.Item data-slot="rating-group-item" class={clsx(RatingGroup_module.item, 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={clsx(RatingGroup_module.itemIndicator, local.class)} {...others}>
+      {resolvedChildren() ?? <>
+          <RatingStarIcon data-slot="rating-group-item-indicator-bg" class={RatingGroup_module.iconBg}/>
+          <RatingStarIcon data-slot="rating-group-item-indicator-fg" class={RatingGroup_module.iconFg}/>
+        </>}
+    </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/RatingGroup.module.js

@@ -0,0 +1,11 @@
+import "./RatingGroup_module.css";
+const RatingGroup_module = {
+    root: "root-estfrz",
+    label: "label-UyOU8X",
+    control: "control-WjR44a",
+    item: "item-KSLnDf",
+    itemIndicator: "itemIndicator-vRie_M",
+    iconFg: "iconFg-SJSzOf",
+    iconBg: "iconBg-VMO5ZC"
+};
+export default RatingGroup_module;

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

@@ -0,0 +1,11 @@
+import "./RatingGroup_module.css";
+const RatingGroup_module = {
+    root: "root-estfrz",
+    label: "label-UyOU8X",
+    control: "control-WjR44a",
+    item: "item-KSLnDf",
+    itemIndicator: "itemIndicator-vRie_M",
+    iconFg: "iconFg-SJSzOf",
+    iconBg: "iconBg-VMO5ZC"
+};
+export default RatingGroup_module;

package/dist/components/rating-group/RatingGroup_module.css

@@ -0,0 +1,139 @@
+@layer moduix.components {
+  .root-estfrz {
+    gap: var(--moduix-rating-group-root-gap, var(--moduix-spacing-1));
+    color: var(--moduix-rating-group-color, var(--moduix-color-muted-foreground));
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .root-estfrz[data-size="xs"] {
+    --_rating-group-icon-size: var(--moduix-rating-group-icon-size-xs, var(--moduix-spacing-3-5));
+  }
+
+  .root-estfrz[data-size="sm"] {
+    --_rating-group-icon-size: var(--moduix-rating-group-icon-size-sm, var(--moduix-spacing-4));
+  }
+
+  .root-estfrz[data-size="md"] {
+    --_rating-group-icon-size: var(--moduix-rating-group-icon-size-md, var(--moduix-spacing-5));
+  }
+
+  .root-estfrz[data-size="lg"] {
+    --_rating-group-icon-size: var(--moduix-rating-group-icon-size-lg, var(--moduix-spacing-6));
+  }
+
+  .root-estfrz[data-size="xl"] {
+    --_rating-group-icon-size: var(--moduix-rating-group-icon-size-xl, var(--moduix-spacing-7));
+  }
+
+  .label-UyOU8X {
+    color: var(--moduix-rating-group-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-rating-group-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-rating-group-label-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-rating-group-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .label-UyOU8X[data-disabled] {
+    opacity: var(--moduix-rating-group-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .control-WjR44a {
+    align-items: center;
+    gap: var(--moduix-rating-group-gap, var(--moduix-spacing-1));
+    display: inline-flex;
+  }
+
+  .control-WjR44a[data-disabled] {
+    opacity: var(--moduix-rating-group-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .item-KSLnDf {
+    border-radius: var(--moduix-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    transition: color var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-rating-group-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+  }
+
+  .item-KSLnDf[data-readonly], .item-KSLnDf[data-disabled] {
+    cursor: default;
+  }
+
+  .item-KSLnDf[data-disabled] {
+    pointer-events: none;
+  }
+
+  .item-KSLnDf[data-focus-visible] {
+    outline: var(--moduix-rating-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-rating-group-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-rating-group-focus-ring-offset, var(--moduix-border-width-sm));
+  }
+
+  .itemIndicator-vRie_M {
+    width: var(--_rating-group-icon-size, var(--moduix-rating-group-icon-size-md, var(--moduix-spacing-5)));
+    height: var(--_rating-group-icon-size, var(--moduix-rating-group-icon-size-md, var(--moduix-spacing-5)));
+    color: var(--moduix-rating-group-active-color, var(--moduix-color-primary));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .itemIndicator-vRie_M > svg {
+    width: 100%;
+    height: 100%;
+    transition: color var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+        fill var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+        stroke var(--moduix-rating-group-transition, var(--moduix-transition-default)),
+        clip-path var(--moduix-rating-group-transition, var(--moduix-transition-default));
+    flex: none;
+  }
+
+  .itemIndicator-vRie_M[data-half] .iconFg-SJSzOf {
+    clip-path: inset(0 50% 0 0);
+  }
+
+  .itemIndicator-vRie_M:not([data-highlighted]) .iconFg-SJSzOf {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  .item-KSLnDf[data-half] .iconFg-SJSzOf {
+    clip-path: inset(0 50% 0 0);
+  }
+
+  .item-KSLnDf:not([data-highlighted]) .iconFg-SJSzOf {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .itemIndicator-vRie_M[data-half] .iconFg-SJSzOf, .root-estfrz:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .item-KSLnDf[data-half] .iconFg-SJSzOf {
+    clip-path: inset(0 0 0 50%);
+  }
+
+  .iconBg-VMO5ZC {
+    color: var(--moduix-rating-group-color, var(--moduix-color-muted-foreground));
+    fill: #0000;
+    stroke: currentColor;
+    position: absolute;
+    inset: 0;
+  }
+
+  .iconFg-SJSzOf {
+    color: var(--moduix-rating-group-active-color, var(--moduix-color-primary));
+    fill: currentColor;
+    stroke: currentColor;
+    clip-path: inset(0);
+    position: absolute;
+    inset: 0;
+  }
+}
+

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,110 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ScrollArea, useScrollArea, useScrollAreaContext } from "@ark-ui/solid/scroll-area";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import ScrollArea_module from "./ScrollArea.module.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 clsx(ScrollArea_module.root, 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 clsx(ScrollArea_module.root, 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 clsx(ScrollArea_module.viewport, 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 clsx(ScrollArea_module.content, 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 clsx(ScrollArea_module.scrollbar, 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 clsx(ScrollArea_module.thumb, 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 clsx(ScrollArea_module.corner, 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,62 @@
+import { ScrollArea, useScrollArea, useScrollAreaContext } from "@ark-ui/solid/scroll-area";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import ScrollArea_module from "./ScrollArea.module.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={clsx(ScrollArea_module.root, 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={clsx(ScrollArea_module.root, local.class)}/>;
+}
+function ScrollAreaViewport(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Viewport {...others} data-slot="scroll-area-viewport" class={clsx(ScrollArea_module.viewport, local.class)}/>;
+}
+function ScrollAreaContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Content {...others} data-slot="scroll-area-content" class={clsx(ScrollArea_module.content, local.class)}/>;
+}
+function ScrollAreaScrollbar(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Scrollbar {...others} data-slot="scroll-area-scrollbar" class={clsx(ScrollArea_module.scrollbar, local.class)}/>;
+}
+function ScrollAreaThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Thumb {...others} data-slot="scroll-area-thumb" class={clsx(ScrollArea_module.thumb, local.class)}/>;
+}
+function ScrollAreaCorner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ScrollArea.Corner {...others} data-slot="scroll-area-corner" class={clsx(ScrollArea_module.corner, 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.module.js

@@ -0,0 +1,10 @@
+import "./ScrollArea_module.css";
+const ScrollArea_module = {
+    root: "root-FtAkRy",
+    viewport: "viewport-SrqU1k",
+    content: "content-PFPQ4z",
+    scrollbar: "scrollbar-LN_VI4",
+    thumb: "thumb-eKzpKM",
+    corner: "corner-dcr1vM"
+};
+export default ScrollArea_module;

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

@@ -0,0 +1,10 @@
+import "./ScrollArea_module.css";
+const ScrollArea_module = {
+    root: "root-FtAkRy",
+    viewport: "viewport-SrqU1k",
+    content: "content-PFPQ4z",
+    scrollbar: "scrollbar-LN_VI4",
+    thumb: "thumb-eKzpKM",
+    corner: "corner-dcr1vM"
+};
+export default ScrollArea_module;