@moduix/solid-tailwind 1.0.0

package/dist/components/chart/Chart.jsx

@@ -0,0 +1,265 @@
+import { ark } from "@ark-ui/solid/factory";
+import { createChartRendererAdapter } from "@tanstack/charts/adapter/renderer";
+import { motion } from "@tanstack/charts/motion";
+import { svgChartRenderer } from "@tanstack/charts/svg/renderer";
+import { For, Show, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { cn } from "../../internal/cn.jsx";
+const defaultChartRenderer = motion({
+    transition: {
+        type: 'spring',
+        stiffness: 260,
+        damping: 30,
+        mass: 0.8
+    }
+});
+function mergeTooltipClassName(className) {
+    return cn('!rounded-md !border !border-border !bg-popover !p-3 !font-sans !text-xs !leading-4 !font-medium !text-popover-foreground !shadow-lg', className);
+}
+function withTooltipStyles(definition) {
+    const tooltip = definition.tooltip;
+    if (!tooltip) return definition;
+    const styledTooltip = 'object' == typeof tooltip && 'use' in tooltip ? {
+        ...tooltip,
+        className: mergeTooltipClassName(tooltip.className)
+    } : {
+        use: tooltip,
+        className: mergeTooltipClassName()
+    };
+    return {
+        ...definition,
+        tooltip: styledTooltip
+    };
+}
+function ChartRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.figure asChild={local.asChild} {...others} data-scope="chart" data-part="root" data-slot="chart-root" class={cn('grid w-full min-w-0 gap-5 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm', local.class)}/>;
+}
+function ModuixTooltipObjectContent(props) {
+    return <div data-slot="chart-tooltip-body" class="grid gap-1">
+      <Show when={props.content().title}>
+        <div data-slot="chart-tooltip-title" class="flex items-center gap-2 font-semibold text-popover-foreground">
+          <Show when={props.content().color}>
+            <span aria-hidden="true" data-slot="chart-tooltip-swatch" class="size-2.5 rounded-full shadow-[inset_0_0_0_1px_rgb(0_0_0_/_8%)]" style={{
+        'background-color': props.content().color
+    }}/>
+          </Show>
+          {props.content().title}
+        </div>
+      </Show>
+      <Show when={props.content().rows.length}>
+        <div data-slot="chart-tooltip-rows" class="grid gap-1">
+          <For each={props.content().rows}>
+            {(row)=><div data-has-swatch={row.color ? '' : void 0} data-slot="chart-tooltip-row" class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 data-[has-swatch]:grid-cols-[0.625rem_minmax(0,1fr)_auto]">
+                <Show when={row.color}>
+                  <span aria-hidden="true" data-slot="chart-tooltip-swatch" class="size-2.5 rounded-full shadow-[inset_0_0_0_1px_rgb(0_0_0_/_8%)]" style={{
+            'background-color': row.color
+        }}/>
+                </Show>
+                <span data-slot="chart-tooltip-label" class="min-w-0 text-muted-foreground">
+                  {row.label}
+                </span>
+                <span data-slot="chart-tooltip-value" class="text-right font-semibold whitespace-nowrap text-popover-foreground tabular-nums">
+                  {row.value}
+                </span>
+              </div>}
+          </For>
+        </div>
+      </Show>
+    </div>;
+}
+function ModuixTooltipBody(props) {
+    return <>
+      <Show when={'string' == typeof props.content()}>
+        <span data-slot="chart-tooltip-text">{props.content()}</span>
+      </Show>
+      <Show when={'string' != typeof props.content()}>
+        <ModuixTooltipObjectContent content={()=>props.content()}/>
+      </Show>
+    </>;
+}
+function TanStackTooltipSwatch(props) {
+    return <span aria-hidden="true" class="ts-chart-tooltip__swatch" style={{
+        display: 'block',
+        width: '0.55rem',
+        height: '0.55rem',
+        'border-radius': '0.15rem',
+        'box-shadow': 'inset 0 0 0 1px rgb(0 0 0/.12)',
+        background: props.color
+    }}/>;
+}
+function TanStackTooltipObjectContent(props) {
+    return <>
+      <Show when={props.content().title}>
+        <div class="ts-chart-tooltip__title" style={{
+        display: 'flex',
+        'align-items': 'center',
+        gap: '0.4rem',
+        'font-weight': 650,
+        'margin-bottom': props.content().rows.length ? '0.3rem' : 0
+    }}>
+          <Show when={props.content().color}>
+            <TanStackTooltipSwatch color={props.content().color}/>
+          </Show>
+          {props.content().title}
+        </div>
+      </Show>
+      <Show when={props.content().rows.length}>
+        <div class="ts-chart-tooltip__rows" aria-hidden="true">
+          <For each={props.content().rows}>
+            {(row)=><div class="ts-chart-tooltip__row" style={{
+            display: 'grid',
+            'grid-template-columns': '0.55rem minmax(0,1fr) auto',
+            'align-items': 'center',
+            'column-gap': '0.4rem'
+        }}>
+                {row.color ? <TanStackTooltipSwatch color={row.color}/> : <span/>}
+                <span>{row.label}</span>
+                <span style={{
+            'text-align': 'right',
+            'font-variant-numeric': 'tabular-nums',
+            'white-space': 'nowrap'
+        }}>
+                  {row.value}
+                </span>
+              </div>}
+          </For>
+        </div>
+      </Show>
+    </>;
+}
+function TanStackTooltipBody(props) {
+    return <>
+      <Show when={'string' == typeof props.content()}>{props.content()}</Show>
+      <Show when={'string' != typeof props.content()}>
+        <TanStackTooltipObjectContent content={()=>props.content()}/>
+      </Show>
+    </>;
+}
+function ChartTooltipBody(props) {
+    const context = {
+        get points () {
+            return props.target().points;
+        },
+        get content () {
+            return props.target().content;
+        },
+        defaultBody: <TanStackTooltipBody content={()=>props.target().content}/>,
+        get pinned () {
+            return props.target().pinned;
+        },
+        get dismiss () {
+            return props.target().dismiss;
+        }
+    };
+    return <Portal mount={props.target().element}>{props.render(context)}</Portal>;
+}
+const renderDefaultTooltipBody = (context)=><ModuixTooltipBody content={()=>context.content}/>;
+function ChartPrimitive(props) {
+    const generatedId = `ts-chart-${createUniqueId().replaceAll(/[^a-zA-Z0-9_-]/g, '')}`;
+    const resolvedRenderer = createMemo(()=>props.renderer ?? (false === props.motion ? svgChartRenderer : defaultChartRenderer));
+    const [tooltipTarget, setTooltipTarget] = createSignal(null);
+    const getOptions = ()=>{
+        const { class: _class, motion: _motion, renderTooltipBody, renderer: _renderer, style: _style, ...others } = props;
+        return {
+            ...others,
+            definition: withTooltipStyles(props.definition),
+            idPrefix: props.idPrefix ?? generatedId,
+            renderer: resolvedRenderer(),
+            onTooltipBodyChange: renderTooltipBody ? setTooltipTarget : void 0
+        };
+    };
+    const adapter = createChartRendererAdapter(getOptions());
+    const initialMarkup = adapter.prerender();
+    let surface;
+    createEffect(()=>adapter.update(getOptions()));
+    onMount(()=>adapter.mount(surface));
+    onCleanup(()=>adapter.destroy());
+    return <>
+      <div class={cn('ts-chart-host', props.class)} style={{
+        position: 'relative',
+        width: void 0 === props.width ? '100%' : `${props.width}px`,
+        height: void 0 === props.height ? 'number' == typeof props.aspectRatio && Number.isFinite(props.aspectRatio) && props.aspectRatio > 0 ? void 0 : '320px' : `${props.height}px`,
+        'aspect-ratio': void 0 === props.height && 'number' == typeof props.aspectRatio && Number.isFinite(props.aspectRatio) && props.aspectRatio > 0 ? props.aspectRatio.toString() : void 0,
+        ...props.style
+    }}>
+        <div ref={(element)=>surface = element} class="ts-chart-surface" style={{
+        width: '100%',
+        height: '100%'
+    }} innerHTML={initialMarkup}/>
+      </div>
+      <Show when={props.renderTooltipBody} keyed>
+        {(render)=><Show when={tooltipTarget()} keyed>
+            {(target)=><ChartTooltipBody render={render} target={()=>target}/>}
+          </Show>}
+      </Show>
+    </>;
+}
+function ChartPlot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'motion',
+        'renderTooltipBody',
+        'renderer',
+        'style'
+    ]);
+    return <ChartPrimitive {...others} class={cn('[&_.ts-chart:focus-visible]:outline-offset-0.5 min-w-0 text-muted-foreground [&_.ts-chart]:rounded-md [&_.ts-chart]:outline-none [&_.ts-chart:focus-visible]:outline-2 [&_.ts-chart:focus-visible]:outline-ring', local.class)} motion={local.motion} renderTooltipBody={local.renderTooltipBody ?? renderDefaultTooltipBody} renderer={local.renderer} style={local.style}/>;
+}
+function ChartHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.figcaption asChild={local.asChild} {...others} data-scope="chart" data-part="header" data-slot="chart-header" class={cn('grid gap-1', local.class)}/>;
+}
+function ChartTitle(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.h3 asChild={local.asChild} {...others} data-scope="chart" data-part="title" data-slot="chart-title" class={cn('text-lg font-semibold', local.class)}/>;
+}
+function ChartDescription(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.p asChild={local.asChild} {...others} data-scope="chart" data-part="description" data-slot="chart-description" class={cn('text-sm text-muted-foreground', local.class)}/>;
+}
+function ChartLegend(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return <ark.ul asChild={local.asChild} {...others} data-scope="chart" data-part="legend" data-slot="chart-legend" class={cn('flex flex-wrap gap-3', local.class)}/>;
+}
+function ChartLegendItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'color',
+        'style'
+    ]);
+    return <ark.li asChild={local.asChild} {...others} data-scope="chart" data-part="legend-item" data-slot="chart-legend-item" class={cn('inline-flex items-center gap-2 text-sm text-muted-foreground', local.class)} style={local.style}>
+      {local.asChild ? local.children : <>
+          <span aria-hidden="true" class="size-2.5 shrink-0 rounded-full bg-muted-foreground shadow-[inset_0_0_0_1px_rgb(0_0_0_/_8%)]" style={local.color ? {
+        'background-color': local.color
+    } : void 0}/>
+          {local.children}
+        </>}
+    </ark.li>;
+}
+const Chart = Object.assign(ChartRoot, {
+    Root: ChartRoot,
+    Plot: ChartPlot,
+    Header: ChartHeader,
+    Title: ChartTitle,
+    Description: ChartDescription,
+    Legend: ChartLegend,
+    LegendItem: ChartLegendItem
+});
+export { Chart };

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

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

package/dist/components/chart/index.js

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

package/dist/components/chart/index.jsx

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

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import { Checkbox as CheckboxPrimitive, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from '@ark-ui/solid/checkbox';
+import type { ComponentProps } from 'solid-js';
+type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type CheckboxRootProps = ComponentProps<typeof CheckboxPrimitive.Root> & {
+    size?: CheckboxSize;
+};
+type CheckboxRootProviderProps = ComponentProps<typeof CheckboxPrimitive.RootProvider> & {
+    size?: CheckboxSize;
+};
+declare function CheckboxRoot(props: CheckboxRootProps): import("solid-js").JSX.Element;
+declare function CheckboxRootProvider(props: CheckboxRootProviderProps): import("solid-js").JSX.Element;
+declare function CheckboxIndicator(props: ComponentProps<typeof CheckboxPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function CheckboxControl(props: ComponentProps<typeof CheckboxPrimitive.Control>): import("solid-js").JSX.Element;
+declare function CheckboxLabel(props: ComponentProps<typeof CheckboxPrimitive.Label>): import("solid-js").JSX.Element;
+declare function CheckboxGroup(props: ComponentProps<typeof CheckboxPrimitive.Group>): import("solid-js").JSX.Element;
+declare const Checkbox: typeof CheckboxRoot & {
+    Root: typeof CheckboxRoot;
+    RootProvider: typeof CheckboxRootProvider;
+    Context: (props: CheckboxPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    HiddenInput: (props: CheckboxPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Control: typeof CheckboxControl;
+    Indicator: typeof CheckboxIndicator;
+    Label: typeof CheckboxLabel;
+    Group: typeof CheckboxGroup;
+};
+export { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,139 @@
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
+import { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from "@ark-ui/solid/checkbox";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { CheckIcon, IndeterminateIcon } from "../../internal/icons/ui/Icons.js";
+var _tmpl$ = /*#__PURE__*/ template('<span aria-hidden=true class="inline-flex size-3 items-center justify-center leading-none text-inherit group-data-[size=lg]/checkbox:size-3.5 group-data-[size=sm]/checkbox:size-2.5 group-data-[size=xl]/checkbox:size-4 group-data-[size=xs]/checkbox:size-2 [&amp;>svg]:size-full">');
+function CheckboxRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(Checkbox.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "checkbox-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function CheckboxRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(Checkbox.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "checkbox-root-provider",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function CheckboxIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'indeterminate'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const slot = ()=>local.indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
+    return createComponent(Checkbox.Indicator, mergeProps({
+        "data-slot": "checkbox-indicator",
+        get ["class"] () {
+            return cn('inline-flex h-full w-full items-center justify-center text-inherit', local.class);
+        },
+        get indeterminate () {
+            return local.indeterminate;
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (()=>{
+                var _el$ = _tmpl$();
+                insert(_el$, (()=>{
+                    var _c$ = memo(()=>!!local.indeterminate);
+                    return ()=>_c$() ? createComponent(IndeterminateIcon, {}) : createComponent(CheckIcon, {});
+                })());
+                effect(()=>setAttribute(_el$, "data-slot", slot()));
+                return _el$;
+            })();
+        }
+    }));
+}
+function CheckboxControl(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Checkbox.Control, mergeProps({
+        "data-slot": "checkbox-control",
+        get ["class"] () {
+            return cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent box-border inline-flex size-5 shrink-0 items-center justify-center rounded-xs border border-border bg-background p-0 leading-none text-primary-foreground transition-[background-color,border-color,color,opacity] duration-200 select-none group-data-[size=lg]/checkbox:size-control-xs group-data-[size=sm]/checkbox:size-4 group-data-[size=xl]/checkbox:size-7 group-data-[size=xs]/checkbox:size-3.5 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:data-focus-visible:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-invalid:data-[state=checked]:border-destructive data-invalid:data-[state=checked]:bg-destructive data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-invalid:data-[state=indeterminate]:border-destructive data-invalid:data-[state=indeterminate]:bg-destructive motion-reduce:transition-none", local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? [
+                createComponent(CheckboxIndicator, {}),
+                createComponent(CheckboxIndicator, {
+                    indeterminate: true
+                })
+            ];
+        }
+    }));
+}
+function CheckboxLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Checkbox.Label, mergeProps({
+        "data-slot": "checkbox-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium text-inherit', local.class);
+        }
+    }, others));
+}
+function CheckboxGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Checkbox.Group, mergeProps({
+        "data-slot": "checkbox-group",
+        get ["class"] () {
+            return cn('flex flex-col gap-2 text-foreground', local.class);
+        }
+    }, others));
+}
+const Checkbox_Checkbox = Object.assign(CheckboxRoot, {
+    Root: CheckboxRoot,
+    RootProvider: CheckboxRootProvider,
+    Context: Checkbox.Context,
+    HiddenInput: Checkbox.HiddenInput,
+    Control: CheckboxControl,
+    Indicator: CheckboxIndicator,
+    Label: CheckboxLabel,
+    Group: CheckboxGroup
+});
+export { Checkbox_Checkbox as Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };

package/dist/components/checkbox/Checkbox.jsx

@@ -0,0 +1,76 @@
+import { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from "@ark-ui/solid/checkbox";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { CheckIcon, IndeterminateIcon } from "../../internal/icons/ui/Icons.jsx";
+function CheckboxRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return <Checkbox.Root asChild={local.asChild} data-slot="checkbox-root" data-size={local.size ?? 'md'} class={cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+      {local.children}
+    </Checkbox.Root>;
+}
+function CheckboxRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return <Checkbox.RootProvider asChild={local.asChild} data-slot="checkbox-root-provider" data-size={local.size ?? 'md'} class={cn('group/checkbox inline-flex cursor-pointer items-center gap-2 align-middle text-foreground data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+      {local.children}
+    </Checkbox.RootProvider>;
+}
+function CheckboxIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'indeterminate'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const slot = ()=>local.indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
+    return <Checkbox.Indicator data-slot="checkbox-indicator" class={cn('inline-flex h-full w-full items-center justify-center text-inherit', local.class)} indeterminate={local.indeterminate} {...others}>
+      {resolvedChildren() ?? <span aria-hidden="true" data-slot={slot()} class="inline-flex size-3 items-center justify-center leading-none text-inherit group-data-[size=lg]/checkbox:size-3.5 group-data-[size=sm]/checkbox:size-2.5 group-data-[size=xl]/checkbox:size-4 group-data-[size=xs]/checkbox:size-2 [&>svg]:size-full">
+          {local.indeterminate ? <IndeterminateIcon/> : <CheckIcon/>}
+        </span>}
+    </Checkbox.Indicator>;
+}
+function CheckboxControl(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Checkbox.Control data-slot="checkbox-control" class={cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent box-border inline-flex size-5 shrink-0 items-center justify-center rounded-xs border border-border bg-background p-0 leading-none text-primary-foreground transition-[background-color,border-color,color,opacity] duration-200 select-none group-data-[size=lg]/checkbox:size-control-xs group-data-[size=sm]/checkbox:size-4 group-data-[size=xl]/checkbox:size-7 group-data-[size=xs]/checkbox:size-3.5 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-invalid:text-destructive-foreground data-invalid:data-focus-visible:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-invalid:data-[state=checked]:border-destructive data-invalid:data-[state=checked]:bg-destructive data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-invalid:data-[state=indeterminate]:border-destructive data-invalid:data-[state=indeterminate]:bg-destructive motion-reduce:transition-none", local.class)} {...others}>
+      {resolvedChildren() ?? <>
+          <CheckboxIndicator/>
+          <CheckboxIndicator indeterminate/>
+        </>}
+    </Checkbox.Control>;
+}
+function CheckboxLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Checkbox.Label data-slot="checkbox-label" class={cn('text-sm leading-5 font-medium text-inherit', local.class)} {...others}/>;
+}
+function CheckboxGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Checkbox.Group data-slot="checkbox-group" class={cn('flex flex-col gap-2 text-foreground', local.class)} {...others}/>;
+}
+const Checkbox_Checkbox = Object.assign(CheckboxRoot, {
+    Root: CheckboxRoot,
+    RootProvider: CheckboxRootProvider,
+    Context: Checkbox.Context,
+    HiddenInput: Checkbox.HiddenInput,
+    Control: CheckboxControl,
+    Indicator: CheckboxIndicator,
+    Label: CheckboxLabel,
+    Group: CheckboxGroup
+});
+export { Checkbox_Checkbox as Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };

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

@@ -0,0 +1 @@
+export { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext, } from './Checkbox.js';

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from "./Checkbox.js";

package/dist/components/checkbox/index.jsx

@@ -0,0 +1 @@
+export { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from "./Checkbox.jsx";

package/dist/components/clipboard/Clipboard.d.ts

@@ -0,0 +1,26 @@
+import { Clipboard as ClipboardPrimitive, useClipboard, useClipboardContext } from '@ark-ui/solid/clipboard';
+import type { ComponentProps } from 'solid-js';
+declare function ClipboardRoot(props: ComponentProps<typeof ClipboardPrimitive.Root>): import("solid-js").JSX.Element;
+declare function ClipboardRootProvider(props: ComponentProps<typeof ClipboardPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function ClipboardLabel(props: ComponentProps<typeof ClipboardPrimitive.Label>): import("solid-js").JSX.Element;
+declare function ClipboardControl(props: ComponentProps<typeof ClipboardPrimitive.Control>): import("solid-js").JSX.Element;
+declare function ClipboardInput(props: ComponentProps<typeof ClipboardPrimitive.Input>): import("solid-js").JSX.Element;
+declare function ClipboardTrigger(props: ComponentProps<typeof ClipboardPrimitive.Trigger>): import("solid-js").JSX.Element;
+declare function ClipboardIndicator(props: ComponentProps<typeof ClipboardPrimitive.Indicator>): import("solid-js").JSX.Element;
+declare function ClipboardValueText(props: ComponentProps<typeof ClipboardPrimitive.ValueText>): import("solid-js").JSX.Element;
+declare function ClipboardCopyText(props: ComponentProps<typeof ClipboardPrimitive.Indicator>): import("solid-js").JSX.Element;
+type ClipboardComponent = typeof ClipboardRoot & {
+    Root: typeof ClipboardRoot;
+    RootProvider: typeof ClipboardRootProvider;
+    Context: typeof ClipboardPrimitive.Context;
+    Label: typeof ClipboardLabel;
+    Control: typeof ClipboardControl;
+    Input: typeof ClipboardInput;
+    Trigger: typeof ClipboardTrigger;
+    Indicator: typeof ClipboardIndicator;
+    CopyText: typeof ClipboardCopyText;
+    ValueText: typeof ClipboardValueText;
+    useClipboard: typeof useClipboard;
+};
+declare const Clipboard: ClipboardComponent;
+export { Clipboard, useClipboard, useClipboardContext };