@moduix/solid-tailwind 1.0.0

package/dist/components/angle-slider/AngleSlider.js

@@ -0,0 +1,165 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { AngleSlider, useAngleSlider, useAngleSliderContext } from "@ark-ui/solid/angle-slider";
+import { For, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function AngleSliderRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(AngleSlider.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "angle-slider-root",
+        get ["class"] () {
+            return cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function AngleSliderLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(AngleSlider.Label, mergeProps({
+        "data-slot": "angle-slider-label",
+        get ["class"] () {
+            return cn('text-center text-sm font-medium text-foreground', local.class);
+        }
+    }, others));
+}
+function AngleSliderRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'value'
+    ]);
+    return createComponent(AngleSlider.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get value () {
+            return local.value;
+        },
+        "data-slot": "angle-slider-root-provider",
+        get ["class"] () {
+            return cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function AngleSliderControl(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'onPointerDown'
+    ]);
+    return createComponent(AngleSlider.Control, mergeProps({
+        "data-slot": "angle-slider-control",
+        get ["class"] () {
+            return cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class);
+        },
+        onPointerDown: (event)=>{
+            local.onPointerDown?.(event);
+            event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
+        }
+    }, others));
+}
+function AngleSliderThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(AngleSlider.Thumb, mergeProps({
+        "data-slot": "angle-slider-thumb",
+        get ["class"] () {
+            return cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class);
+        }
+    }, others));
+}
+function AngleSliderMarkerGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(AngleSlider.MarkerGroup, mergeProps({
+        "data-slot": "angle-slider-marker-group",
+        get ["class"] () {
+            return cn('pointer-events-none absolute inset-0 z-1', local.class);
+        }
+    }, others));
+}
+function AngleSliderMarker(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(AngleSlider.Marker, mergeProps({
+        "data-slot": "angle-slider-marker",
+        get ["class"] () {
+            return cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class);
+        }
+    }, others));
+}
+function AngleSliderMarks(props) {
+    const [local, others] = splitProps(props, [
+        'values'
+    ]);
+    return createComponent(AngleSliderMarkerGroup, mergeProps(others, {
+        get children () {
+            return createComponent(For, {
+                get each () {
+                    return local.values;
+                },
+                children: (value)=>createComponent(AngleSliderMarker, {
+                        value: value
+                    })
+            });
+        }
+    }));
+}
+function AngleSliderDial(props) {
+    const [local, others] = splitProps(props, [
+        'children'
+    ]);
+    return createComponent(AngleSliderControl, mergeProps(others, {
+        get children () {
+            return [
+                memo(()=>local.children),
+                createComponent(AngleSliderThumb, {})
+            ];
+        }
+    }));
+}
+function AngleSliderValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(AngleSlider.ValueText, mergeProps({
+        "data-slot": "angle-slider-value-text",
+        get ["class"] () {
+            return cn('text-center text-sm font-medium text-foreground', local.class);
+        }
+    }, others));
+}
+const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
+    Root: AngleSliderRoot,
+    RootProvider: AngleSliderRootProvider,
+    Context: AngleSlider.Context,
+    HiddenInput: AngleSlider.HiddenInput,
+    Label: AngleSliderLabel,
+    Control: AngleSliderControl,
+    Dial: AngleSliderDial,
+    Thumb: AngleSliderThumb,
+    MarkerGroup: AngleSliderMarkerGroup,
+    Marker: AngleSliderMarker,
+    Marks: AngleSliderMarks,
+    ValueText: AngleSliderValueText
+});
+const AngleSlider_useAngleSlider = useAngleSlider;
+export { AngleSlider_AngleSlider as AngleSlider, AngleSlider_useAngleSlider as useAngleSlider, useAngleSliderContext };

package/dist/components/angle-slider/AngleSlider.jsx

@@ -0,0 +1,97 @@
+import { AngleSlider, useAngleSlider, useAngleSliderContext } from "@ark-ui/solid/angle-slider";
+import { For, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function AngleSliderRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <AngleSlider.Root asChild={local.asChild} data-slot="angle-slider-root" class={cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+      {local.children}
+    </AngleSlider.Root>;
+}
+function AngleSliderLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <AngleSlider.Label data-slot="angle-slider-label" class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others}/>;
+}
+function AngleSliderRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'value'
+    ]);
+    return <AngleSlider.RootProvider asChild={local.asChild} value={local.value} data-slot="angle-slider-root-provider" class={cn('box-border inline-flex min-w-0 flex-col items-center gap-3 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+      {local.children}
+    </AngleSlider.RootProvider>;
+}
+function AngleSliderControl(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'onPointerDown'
+    ]);
+    return <AngleSlider.Control data-slot="angle-slider-control" class={cn("relative box-border flex aspect-square w-32 min-w-0 cursor-pointer items-center justify-center rounded-full bg-muted shadow-[inset_0_0_0_1px_var(--color-border)] outline-0 transition-colors duration-200 select-none before:absolute before:z-1 before:size-1.5 before:rounded-[inherit] before:bg-foreground before:content-[''] after:absolute after:inset-3.5 after:z-1 after:rounded-[inherit] after:bg-background after:shadow-[inset_0_0_0_1px_var(--color-border)] after:content-[''] data-disabled:cursor-default data-invalid:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-invalid:after:shadow-[inset_0_0_0_1px_var(--color-destructive)] data-readonly:cursor-default motion-reduce:transition-none [&:has([data-scope='angle-slider'][data-part='thumb']:focus-visible)]:shadow-[inset_0_0_0_1px_var(--color-border),0_0_0_3px_var(--color-ring)] [&:not([data-disabled]):not([data-readonly]):active]:bg-muted [@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly]):hover]:bg-muted", local.class)} onPointerDown={(event)=>{
+        local.onPointerDown?.(event);
+        event.currentTarget.querySelector('[data-scope="angle-slider"][data-part="thumb"]')?.blur();
+    }} {...others}/>;
+}
+function AngleSliderThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <AngleSlider.Thumb data-slot="angle-slider-thumb" class={cn("absolute inset-y-0 left-[calc(50%-0.09375rem)] z-2 w-[0.1875rem] outline-0 before:absolute before:top-3.5 before:left-1/2 before:box-border before:size-4 before:-translate-x-1/2 before:rounded-full before:border before:border-border before:bg-primary before:shadow-sm before:transition-[border-color,box-shadow,background-color,scale] before:duration-200 before:content-[''] after:absolute after:top-[2.125rem] after:left-1/2 after:h-[calc(50%-2.25rem)] after:w-[0.1875rem] after:-translate-x-1/2 after:rounded-full after:bg-linear-to-b after:from-primary after:to-transparent after:content-[''] focus-visible:before:border-ring focus-visible:before:ring-1 focus-visible:before:ring-ring data-disabled:pointer-events-none data-invalid:before:border-destructive data-invalid:before:bg-destructive data-invalid:after:from-destructive motion-reduce:before:transition-none [&:active:not([data-disabled]):not([data-readonly])]:before:scale-[1.08]", local.class)} {...others}/>;
+}
+function AngleSliderMarkerGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <AngleSlider.MarkerGroup data-slot="angle-slider-marker-group" class={cn('pointer-events-none absolute inset-0 z-1', local.class)} {...others}/>;
+}
+function AngleSliderMarker(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <AngleSlider.Marker data-slot="angle-slider-marker" class={cn("absolute inset-0 before:absolute before:top-4 before:left-1/2 before:h-2.5 before:w-0.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-muted-foreground before:content-[''] data-[state=at-value]:before:bg-foreground data-[state=under-value]:before:bg-primary", local.class)} {...others}/>;
+}
+function AngleSliderMarks(props) {
+    const [local, others] = splitProps(props, [
+        'values'
+    ]);
+    return <AngleSliderMarkerGroup {...others}>
+      <For each={local.values}>{(value)=><AngleSliderMarker value={value}/>}</For>
+    </AngleSliderMarkerGroup>;
+}
+function AngleSliderDial(props) {
+    const [local, others] = splitProps(props, [
+        'children'
+    ]);
+    return <AngleSliderControl {...others}>
+      {local.children}
+      <AngleSliderThumb/>
+    </AngleSliderControl>;
+}
+function AngleSliderValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <AngleSlider.ValueText data-slot="angle-slider-value-text" class={cn('text-center text-sm font-medium text-foreground', local.class)} {...others}/>;
+}
+const AngleSlider_AngleSlider = Object.assign(AngleSliderRoot, {
+    Root: AngleSliderRoot,
+    RootProvider: AngleSliderRootProvider,
+    Context: AngleSlider.Context,
+    HiddenInput: AngleSlider.HiddenInput,
+    Label: AngleSliderLabel,
+    Control: AngleSliderControl,
+    Dial: AngleSliderDial,
+    Thumb: AngleSliderThumb,
+    MarkerGroup: AngleSliderMarkerGroup,
+    Marker: AngleSliderMarker,
+    Marks: AngleSliderMarks,
+    ValueText: AngleSliderValueText
+});
+const AngleSlider_useAngleSlider = useAngleSlider;
+export { AngleSlider_AngleSlider as AngleSlider, AngleSlider_useAngleSlider as useAngleSlider, useAngleSliderContext };

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

@@ -0,0 +1 @@
+export * from './AngleSlider.js';

package/dist/components/angle-slider/index.js

@@ -0,0 +1 @@
+export * from "./AngleSlider.js";

package/dist/components/angle-slider/index.jsx

@@ -0,0 +1 @@
+export * from "./AngleSlider.jsx";

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type AspectRatioRootProps = HTMLArkProps<'div'> & {
+    ratio: number;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+declare function AspectRatioRoot(props: AspectRatioRootProps): JSX.Element;
+declare const AspectRatio: typeof AspectRatioRoot & {
+    Root: typeof AspectRatioRoot;
+};
+export { AspectRatio };

package/dist/components/aspect-ratio/AspectRatio.js

@@ -0,0 +1,43 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function AspectRatioRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'ratio',
+        'style',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    const aspectRatioStyle = ()=>{
+        const ratio = local.ratio;
+        if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError('AspectRatio `ratio` must be a finite number greater than zero.');
+        if ('string' == typeof local.style) return `${local.style};--_aspect-ratio-value:${ratio}`;
+        return {
+            ...local.style,
+            '--_aspect-ratio-value': ratio
+        };
+    };
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "aspect-ratio",
+        "data-part": "root",
+        "data-slot": "aspect-ratio-root",
+        get ["class"] () {
+            return cn('relative block aspect-[var(--_aspect-ratio-value)] w-full', local.class);
+        },
+        get style () {
+            return aspectRatioStyle();
+        }
+    }));
+}
+const AspectRatio = Object.assign(AspectRatioRoot, {
+    Root: AspectRatioRoot
+});
+export { AspectRatio };

package/dist/components/aspect-ratio/AspectRatio.jsx

@@ -0,0 +1,28 @@
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function AspectRatioRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'ratio',
+        'style',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    const aspectRatioStyle = ()=>{
+        const ratio = local.ratio;
+        if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError('AspectRatio `ratio` must be a finite number greater than zero.');
+        if ('string' == typeof local.style) return `${local.style};--_aspect-ratio-value:${ratio}`;
+        return {
+            ...local.style,
+            '--_aspect-ratio-value': ratio
+        };
+    };
+    return <ark.div asChild={local.asChild} {...others} data-scope="aspect-ratio" data-part="root" data-slot="aspect-ratio-root" class={cn('relative block aspect-[var(--_aspect-ratio-value)] w-full', local.class)} style={aspectRatioStyle()}/>;
+}
+const AspectRatio = Object.assign(AspectRatioRoot, {
+    Root: AspectRatioRoot
+});
+export { AspectRatio };

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export { AspectRatio } from './AspectRatio.js';

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1 @@
+export { AspectRatio } from "./AspectRatio.js";

package/dist/components/aspect-ratio/index.jsx

@@ -0,0 +1 @@
+export { AspectRatio } from "./AspectRatio.jsx";

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,21 @@
+import { Avatar as AvatarPrimitive, useAvatar, useAvatarContext } from '@ark-ui/solid/avatar';
+import type { ComponentProps } from 'solid-js';
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarRootProps = ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: AvatarSize;
+};
+type AvatarRootProviderProps = ComponentProps<typeof AvatarPrimitive.RootProvider> & {
+    size?: AvatarSize;
+};
+declare function AvatarRoot(props: AvatarRootProps): import("solid-js").JSX.Element;
+declare function AvatarRootProvider(props: AvatarRootProviderProps): import("solid-js").JSX.Element;
+declare function AvatarImage(props: ComponentProps<typeof AvatarPrimitive.Image>): import("solid-js").JSX.Element;
+declare function AvatarFallback(props: ComponentProps<typeof AvatarPrimitive.Fallback>): import("solid-js").JSX.Element;
+declare const Avatar: typeof AvatarRoot & {
+    Root: typeof AvatarRoot;
+    RootProvider: typeof AvatarRootProvider;
+    Context: (props: AvatarPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    Image: typeof AvatarImage;
+    Fallback: typeof AvatarFallback;
+};
+export { Avatar, useAvatar, useAvatarContext };

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,88 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/solid/avatar";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const avatarVariants = cva('relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted align-middle font-medium text-foreground select-none', {
+    variants: {
+        size: {
+            xs: 'size-control-xs text-xs',
+            sm: 'size-control-sm text-sm',
+            md: 'size-control-md text-md',
+            lg: 'size-control-lg text-lg',
+            xl: 'size-control-xl text-lg'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function AvatarRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size'
+    ]);
+    return createComponent(Avatar.Root, mergeProps({
+        "data-slot": "avatar-root",
+        get ["data-size"] () {
+            return local.size;
+        },
+        get ["class"] () {
+            return cn(avatarVariants({
+                size: local.size
+            }), local.class);
+        }
+    }, others));
+}
+function AvatarRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size'
+    ]);
+    return createComponent(Avatar.RootProvider, mergeProps({
+        "data-slot": "avatar-root-provider",
+        get ["data-size"] () {
+            return local.size;
+        },
+        get ["class"] () {
+            return cn(avatarVariants({
+                size: local.size
+            }), local.class);
+        }
+    }, others));
+}
+function AvatarImage(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Avatar.Image, mergeProps({
+        "data-slot": "avatar-image",
+        get ["class"] () {
+            return cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', local.class);
+        }
+    }, others));
+}
+function AvatarFallback(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return createComponent(Avatar.Fallback, mergeProps({
+        "data-slot": "avatar-fallback",
+        get ["class"] () {
+            return cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+const Avatar_Avatar = Object.assign(AvatarRoot, {
+    Root: AvatarRoot,
+    RootProvider: AvatarRootProvider,
+    Context: Avatar.Context,
+    Image: AvatarImage,
+    Fallback: AvatarFallback
+});
+export { Avatar_Avatar as Avatar, useAvatar, useAvatarContext };

package/dist/components/avatar/Avatar.jsx

@@ -0,0 +1,59 @@
+import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/solid/avatar";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const avatarVariants = cva('relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted align-middle font-medium text-foreground select-none', {
+    variants: {
+        size: {
+            xs: 'size-control-xs text-xs',
+            sm: 'size-control-sm text-sm',
+            md: 'size-control-md text-md',
+            lg: 'size-control-lg text-lg',
+            xl: 'size-control-xl text-lg'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+function AvatarRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size'
+    ]);
+    return <Avatar.Root data-slot="avatar-root" data-size={local.size} class={cn(avatarVariants({
+        size: local.size
+    }), local.class)} {...others}/>;
+}
+function AvatarRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size'
+    ]);
+    return <Avatar.RootProvider data-slot="avatar-root-provider" data-size={local.size} class={cn(avatarVariants({
+        size: local.size
+    }), local.class)} {...others}/>;
+}
+function AvatarImage(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Avatar.Image data-slot="avatar-image" class={cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', local.class)} {...others}/>;
+}
+function AvatarFallback(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return <Avatar.Fallback data-slot="avatar-fallback" class={cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', local.class)} {...others}>
+      {local.children}
+    </Avatar.Fallback>;
+}
+const Avatar_Avatar = Object.assign(AvatarRoot, {
+    Root: AvatarRoot,
+    RootProvider: AvatarRootProvider,
+    Context: Avatar.Context,
+    Image: AvatarImage,
+    Fallback: AvatarFallback
+});
+export { Avatar_Avatar as Avatar, useAvatar, useAvatarContext };

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

@@ -0,0 +1 @@
+export { Avatar, useAvatar, useAvatarContext } from './Avatar.js';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, useAvatar, useAvatarContext } from "./Avatar.js";

package/dist/components/avatar/index.jsx

@@ -0,0 +1 @@
+export { Avatar, useAvatar, useAvatarContext } from "./Avatar.jsx";

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+type BadgeRootProps = HTMLArkProps<'span'> & {
+    variant?: BadgeVariant;
+};
+declare function BadgeLabel(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare function BadgeRoot(props: BadgeRootProps): import("solid-js").JSX.Element;
+declare function BadgeDot(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare const Badge: typeof BadgeRoot & {
+    Root: typeof BadgeRoot;
+    Label: typeof BadgeLabel;
+    Dot: typeof BadgeDot;
+};
+export { Badge };

package/dist/components/badge/Badge.js

@@ -0,0 +1,72 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const badgeVariants = cva('inline-flex min-h-5 w-fit max-w-full min-w-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border px-2.5 align-middle font-medium text-xs tabular-nums whitespace-nowrap no-underline select-none transition-[color,background-color,border-color,opacity] duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-0.5 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0 [a&]:cursor-pointer', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:opacity-90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:opacity-90',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground [a&]:hover:opacity-90',
+            outline: 'border-border bg-transparent text-foreground [a&]:hover:border-primary [a&]:hover:text-primary',
+            ghost: 'border-transparent bg-transparent text-foreground [a&]:hover:border-primary [a&]:hover:text-primary',
+            link: 'min-h-auto rounded-none border-transparent bg-transparent px-0 py-[0.125em] text-primary underline decoration-[color-mix(in_oklab,currentColor_55%,transparent)] underline-offset-[0.15em] [text-decoration-thickness:from-font] [a&]:hover:decoration-current'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+function BadgeLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-scope": "badge",
+        "data-part": "label",
+        "data-slot": "badge-label",
+        get ["class"] () {
+            return cn('min-w-0 overflow-hidden text-ellipsis', local.class);
+        }
+    }));
+}
+function BadgeRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'variant'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-scope": "badge",
+        "data-part": "root",
+        "data-slot": "badge-root",
+        get ["data-variant"] () {
+            return local.variant ?? 'default';
+        },
+        get ["class"] () {
+            return cn(badgeVariants({
+                variant: local.variant
+            }), local.class);
+        }
+    }));
+}
+function BadgeDot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-scope": "badge",
+        "data-part": "dot",
+        "data-slot": "badge-dot",
+        "aria-hidden": "true",
+        get ["class"] () {
+            return cn('size-1.5 shrink-0 rounded-full bg-current', local.class);
+        }
+    }));
+}
+const Badge = Object.assign(BadgeRoot, {
+    Root: BadgeRoot,
+    Label: BadgeLabel,
+    Dot: BadgeDot
+});
+export { Badge };