@moduix/solid-tailwind 1.0.0

package/dist/components/signature-pad/SignaturePad.jsx

@@ -0,0 +1,116 @@
+import { useFieldContext } from "@ark-ui/solid/field";
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/solid/signature-pad";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { RotateCcwIcon } from "../../internal/icons/ui/Icons.jsx";
+import { CloseButton } from "../close-button/index.jsx";
+const SignaturePadReadOnlyContext = createContext(()=>false);
+const signaturePadReadOnly = Symbol();
+function SignaturePadRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const field = useFieldContext();
+    return <SignaturePad.Root asChild={local.asChild} data-slot="signature-pad-root" class={cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+      <SignaturePadReadOnlyContext.Provider value={()=>others.readOnly ?? field?.().readOnly ?? false}>
+        {local.children}
+      </SignaturePadReadOnlyContext.Provider>
+    </SignaturePad.Root>;
+}
+function SignaturePadRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <SignaturePadReadOnlyContext.Provider value={()=>{
+        const signaturePad = others.value;
+        return signaturePad[signaturePadReadOnly]?.() ?? false;
+    }}>
+      <SignaturePad.RootProvider asChild={local.asChild} data-slot="signature-pad-root-provider" class={cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class)} {...others}>
+        {local.children}
+      </SignaturePad.RootProvider>
+    </SignaturePadReadOnlyContext.Provider>;
+}
+function SignaturePadLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <SignaturePad.Label data-slot="signature-pad-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+}
+function SignaturePadControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <SignaturePad.Control data-slot="signature-pad-control" class={cn('box-border h-40 min-h-40 w-full min-w-0 overflow-hidden rounded-md border border-border bg-background text-foreground shadow-sm transition-[border-color,box-shadow,opacity] duration-200 ease-in-out outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-not-allowed motion-reduce:transition-none', local.class)} {...others}/>;
+}
+function SignaturePadSegment(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <SignaturePad.Segment data-slot="signature-pad-segment" class={cn('fill-current', local.class)} {...others}/>;
+}
+function SignaturePadGuide(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <SignaturePad.Guide data-slot="signature-pad-guide" class={cn('pointer-events-none absolute start-6 end-6 bottom-8 border-b border-dashed border-border', local.class)} {...others}/>;
+}
+function SignaturePadClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class',
+        'disabled'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const readOnly = useContext(SignaturePadReadOnlyContext);
+    const isDisabled = ()=>readOnly() || local.disabled ? true : void 0;
+    const triggerClass = cn('absolute end-2 top-2 border-0', local.class);
+    if (local.asChild) return <SignaturePad.ClearTrigger asChild={local.asChild} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} data-slot="signature-pad-clear-trigger" class={triggerClass} {...others} disabled={isDisabled()}>
+        {local.children}
+      </SignaturePad.ClearTrigger>;
+    return <SignaturePad.ClearTrigger asChild={(triggerProps)=>{
+        const resolvedProps = triggerProps();
+        return <CloseButton.Root {...resolvedProps} aria-label={local['aria-label']} aria-labelledby={local['aria-labelledby']} class={cn(resolvedProps.class, 'size-7 rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', local.class)}>
+            {resolvedChildren() ?? <RotateCcwIcon class="size-4" aria-hidden="true"/>}
+          </CloseButton.Root>;
+    }} data-slot="signature-pad-clear-trigger" class={triggerClass} {...others} disabled={isDisabled()}/>;
+}
+function SignaturePadCanvas(props) {
+    return <SignaturePadControl {...props}>
+      <SignaturePadSegment/>
+      <SignaturePadClearTrigger>
+        <RotateCcwIcon class="size-4" aria-hidden="true"/>
+      </SignaturePadClearTrigger>
+      <SignaturePadGuide/>
+    </SignaturePadControl>;
+}
+const SignaturePad_SignaturePad = Object.assign(SignaturePadRoot, {
+    Root: SignaturePadRoot,
+    RootProvider: SignaturePadRootProvider,
+    Context: SignaturePad.Context,
+    HiddenInput: SignaturePad.HiddenInput,
+    Label: SignaturePadLabel,
+    Control: SignaturePadControl,
+    Canvas: SignaturePadCanvas,
+    Segment: SignaturePadSegment,
+    Guide: SignaturePadGuide,
+    ClearTrigger: SignaturePadClearTrigger
+});
+function SignaturePad_useSignaturePad(props) {
+    const field = useFieldContext();
+    const signaturePad = useSignaturePad(props);
+    const api = Object.assign(signaturePad, {
+        [signaturePadReadOnly]: ()=>{
+            const machineProps = 'function' == typeof props ? props() : props;
+            return machineProps?.readOnly ?? field?.().readOnly ?? false;
+        }
+    });
+    return api;
+}
+export { SignaturePad_SignaturePad as SignaturePad, SignaturePad_useSignaturePad as useSignaturePad, useSignaturePadContext };

package/dist/components/signature-pad/index.d.ts

@@ -0,0 +1 @@
+export { SignaturePad, useSignaturePad, useSignaturePadContext } from './SignaturePad.js';

package/dist/components/signature-pad/index.js

@@ -0,0 +1 @@
+export { SignaturePad, useSignaturePad, useSignaturePadContext } from "./SignaturePad.js";

package/dist/components/signature-pad/index.jsx

@@ -0,0 +1 @@
+export { SignaturePad, useSignaturePad, useSignaturePadContext } from "./SignaturePad.jsx";

package/dist/components/simple-grid/SimpleGrid.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type SimpleGridRootProps = HTMLArkProps<'div'> & {
+    columns?: number;
+    minChildWidth?: number | string;
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+declare function SimpleGridRoot(props: SimpleGridRootProps): JSX.Element;
+declare const SimpleGrid: typeof SimpleGridRoot & {
+    Root: typeof SimpleGridRoot;
+};
+export { SimpleGrid };

package/dist/components/simple-grid/SimpleGrid.js

@@ -0,0 +1,74 @@
+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 toCssLength(value) {
+    return 'number' == typeof value ? `${value}px` : value;
+}
+function SimpleGridRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'columns',
+        'minChildWidth',
+        'gap',
+        'rowGap',
+        'columnGap',
+        'style',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    const gridStyle = ()=>{
+        if (null != local.columns && (!Number.isFinite(local.columns) || !Number.isInteger(local.columns) || local.columns <= 0)) throw new Error('SimpleGrid `columns` must be a finite positive integer.');
+        if ('number' == typeof local.minChildWidth && (!Number.isFinite(local.minChildWidth) || local.minChildWidth < 0)) throw new Error('SimpleGrid `minChildWidth` must be a finite non-negative number.');
+        let gridTemplateColumns;
+        if (null != local.columns) gridTemplateColumns = `repeat(${local.columns}, minmax(0, 1fr))`;
+        if (null != local.minChildWidth) {
+            const width = 'number' == typeof local.minChildWidth ? `${local.minChildWidth}px` : local.minChildWidth;
+            gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`;
+        }
+        const generatedStyle = {
+            ...null == gridTemplateColumns ? {} : {
+                'grid-template-columns': gridTemplateColumns
+            },
+            ...null == local.gap ? {} : {
+                gap: toCssLength(local.gap)
+            },
+            ...null == local.rowGap ? {} : {
+                'row-gap': toCssLength(local.rowGap)
+            },
+            ...null == local.columnGap ? {} : {
+                'column-gap': toCssLength(local.columnGap)
+            }
+        };
+        if ('string' == typeof local.style) {
+            const generatedStyleText = Object.entries(generatedStyle).map(([property, value])=>`${property}:${value}`).join(';');
+            return `${generatedStyleText}${generatedStyleText ? ';' : ''}${local.style}`;
+        }
+        if (null == local.style) return generatedStyle;
+        return {
+            ...generatedStyle,
+            ...local.style
+        };
+    };
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "simple-grid",
+        "data-part": "root",
+        "data-slot": "simple-grid-root",
+        get ["class"] () {
+            return cn('grid grid-cols-1', local.class);
+        },
+        get style () {
+            return gridStyle();
+        }
+    }));
+}
+const SimpleGrid = Object.assign(SimpleGridRoot, {
+    Root: SimpleGridRoot
+});
+export { SimpleGrid };

package/dist/components/simple-grid/SimpleGrid.jsx

@@ -0,0 +1,59 @@
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function toCssLength(value) {
+    return 'number' == typeof value ? `${value}px` : value;
+}
+function SimpleGridRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'columns',
+        'minChildWidth',
+        'gap',
+        'rowGap',
+        'columnGap',
+        'style',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    const gridStyle = ()=>{
+        if (null != local.columns && (!Number.isFinite(local.columns) || !Number.isInteger(local.columns) || local.columns <= 0)) throw new Error('SimpleGrid `columns` must be a finite positive integer.');
+        if ('number' == typeof local.minChildWidth && (!Number.isFinite(local.minChildWidth) || local.minChildWidth < 0)) throw new Error('SimpleGrid `minChildWidth` must be a finite non-negative number.');
+        let gridTemplateColumns;
+        if (null != local.columns) gridTemplateColumns = `repeat(${local.columns}, minmax(0, 1fr))`;
+        if (null != local.minChildWidth) {
+            const width = 'number' == typeof local.minChildWidth ? `${local.minChildWidth}px` : local.minChildWidth;
+            gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`;
+        }
+        const generatedStyle = {
+            ...null == gridTemplateColumns ? {} : {
+                'grid-template-columns': gridTemplateColumns
+            },
+            ...null == local.gap ? {} : {
+                gap: toCssLength(local.gap)
+            },
+            ...null == local.rowGap ? {} : {
+                'row-gap': toCssLength(local.rowGap)
+            },
+            ...null == local.columnGap ? {} : {
+                'column-gap': toCssLength(local.columnGap)
+            }
+        };
+        if ('string' == typeof local.style) {
+            const generatedStyleText = Object.entries(generatedStyle).map(([property, value])=>`${property}:${value}`).join(';');
+            return `${generatedStyleText}${generatedStyleText ? ';' : ''}${local.style}`;
+        }
+        if (null == local.style) return generatedStyle;
+        return {
+            ...generatedStyle,
+            ...local.style
+        };
+    };
+    return <ark.div asChild={local.asChild} {...others} data-scope="simple-grid" data-part="root" data-slot="simple-grid-root" class={cn('grid grid-cols-1', local.class)} style={gridStyle()}/>;
+}
+const SimpleGrid = Object.assign(SimpleGridRoot, {
+    Root: SimpleGridRoot
+});
+export { SimpleGrid };

package/dist/components/simple-grid/index.d.ts

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

package/dist/components/simple-grid/index.js

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

package/dist/components/simple-grid/index.jsx

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type SkeletonProps = HTMLArkProps<'div'> & {
+    loading?: boolean;
+    variant?: 'pulse' | 'none';
+    width?: number | string;
+    height?: number | string;
+    boxSize?: number | string;
+    borderRadius?: number | string;
+};
+declare function SkeletonRoot(props: SkeletonProps): JSX.Element;
+declare const Skeleton: typeof SkeletonRoot & {
+    Root: typeof SkeletonRoot;
+};
+export { Skeleton };

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,74 @@
+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";
+const toCssValue = (value)=>'number' == typeof value ? `${value}px` : value;
+function SkeletonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'asChild',
+        'borderRadius',
+        'boxSize',
+        'children',
+        'class',
+        'height',
+        'loading',
+        'style',
+        'variant',
+        'width'
+    ]);
+    const loading = ()=>local.loading ?? true;
+    const variant = ()=>local.variant ?? 'pulse';
+    const skeletonStyle = ()=>{
+        const width = toCssValue(local.width ?? local.boxSize);
+        const height = toCssValue(local.height ?? local.boxSize);
+        const borderRadius = toCssValue(local.borderRadius);
+        if ('string' == typeof local.style) {
+            const generatedStyle = [
+                void 0 === width ? void 0 : `width: ${width}`,
+                void 0 === height ? void 0 : `height: ${height}`,
+                void 0 === borderRadius ? void 0 : `border-radius: ${borderRadius}`
+            ].filter(Boolean).join(';');
+            return `${generatedStyle}${generatedStyle && local.style ? ';' : ''}${local.style}`;
+        }
+        const generatedStyle = {
+            width,
+            height,
+            'border-radius': borderRadius
+        };
+        return void 0 === local.style ? generatedStyle : Object.assign(generatedStyle, local.style);
+    };
+    return createComponent(ark.div, mergeProps(others, {
+        get asChild () {
+            return local.asChild;
+        },
+        "data-scope": "skeleton",
+        "data-part": "root",
+        "data-slot": "skeleton-root",
+        get ["data-state"] () {
+            return loading() ? 'loading' : 'loaded';
+        },
+        get ["data-loading"] () {
+            return loading() ? '' : void 0;
+        },
+        get ["data-variant"] () {
+            return variant();
+        },
+        get ["aria-hidden"] () {
+            return local['aria-hidden'] ?? (loading() ? true : void 0);
+        },
+        get ["class"] () {
+            return cn('block w-full overflow-hidden rounded-md', loading() && cn('pointer-events-none h-4 bg-muted-foreground/18 text-transparent select-none before:invisible after:invisible [&_*]:invisible', 'none' === variant() ? 'animate-none' : 'animate-[moduix-pulse_2.5s_ease-in-out_infinite]', 'motion-reduce:animate-none'), local.class);
+        },
+        get style () {
+            return skeletonStyle();
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+const Skeleton = Object.assign(SkeletonRoot, {
+    Root: SkeletonRoot
+});
+export { Skeleton };

package/dist/components/skeleton/Skeleton.jsx

@@ -0,0 +1,47 @@
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const toCssValue = (value)=>'number' == typeof value ? `${value}px` : value;
+function SkeletonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'asChild',
+        'borderRadius',
+        'boxSize',
+        'children',
+        'class',
+        'height',
+        'loading',
+        'style',
+        'variant',
+        'width'
+    ]);
+    const loading = ()=>local.loading ?? true;
+    const variant = ()=>local.variant ?? 'pulse';
+    const skeletonStyle = ()=>{
+        const width = toCssValue(local.width ?? local.boxSize);
+        const height = toCssValue(local.height ?? local.boxSize);
+        const borderRadius = toCssValue(local.borderRadius);
+        if ('string' == typeof local.style) {
+            const generatedStyle = [
+                void 0 === width ? void 0 : `width: ${width}`,
+                void 0 === height ? void 0 : `height: ${height}`,
+                void 0 === borderRadius ? void 0 : `border-radius: ${borderRadius}`
+            ].filter(Boolean).join(';');
+            return `${generatedStyle}${generatedStyle && local.style ? ';' : ''}${local.style}`;
+        }
+        const generatedStyle = {
+            width,
+            height,
+            'border-radius': borderRadius
+        };
+        return void 0 === local.style ? generatedStyle : Object.assign(generatedStyle, local.style);
+    };
+    return <ark.div {...others} asChild={local.asChild} data-scope="skeleton" data-part="root" data-slot="skeleton-root" data-state={loading() ? 'loading' : 'loaded'} data-loading={loading() ? '' : void 0} data-variant={variant()} aria-hidden={local['aria-hidden'] ?? (loading() ? true : void 0)} class={cn('block w-full overflow-hidden rounded-md', loading() && cn('pointer-events-none h-4 bg-muted-foreground/18 text-transparent select-none before:invisible after:invisible [&_*]:invisible', 'none' === variant() ? 'animate-none' : 'animate-[moduix-pulse_2.5s_ease-in-out_infinite]', 'motion-reduce:animate-none'), local.class)} style={skeletonStyle()}>
+      {local.children}
+    </ark.div>;
+}
+const Skeleton = Object.assign(SkeletonRoot, {
+    Root: SkeletonRoot
+});
+export { Skeleton };

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

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

package/dist/components/skeleton/index.js

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

package/dist/components/skeleton/index.jsx

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

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,36 @@
+import { Slider as SliderPrimitive, useSlider, useSliderContext } from '@ark-ui/solid/slider';
+import type { ComponentProps } from 'solid-js';
+declare function SliderRoot(props: ComponentProps<typeof SliderPrimitive.Root>): import("solid-js").JSX.Element;
+declare function SliderRootProvider(props: ComponentProps<typeof SliderPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function SliderLabel(props: ComponentProps<typeof SliderPrimitive.Label>): import("solid-js").JSX.Element;
+declare function SliderValueText(props: ComponentProps<typeof SliderPrimitive.ValueText>): import("solid-js").JSX.Element;
+declare function SliderControl(props: ComponentProps<typeof SliderPrimitive.Control>): import("solid-js").JSX.Element;
+declare function SliderTrack(props: ComponentProps<typeof SliderPrimitive.Track>): import("solid-js").JSX.Element;
+declare function SliderRange(props: ComponentProps<typeof SliderPrimitive.Range>): import("solid-js").JSX.Element;
+declare function SliderThumb(props: ComponentProps<typeof SliderPrimitive.Thumb>): import("solid-js").JSX.Element;
+declare function SliderThumbs(props: {
+    class?: string;
+}): import("solid-js").JSX.Element;
+declare function SliderMarkerGroup(props: ComponentProps<typeof SliderPrimitive.MarkerGroup>): import("solid-js").JSX.Element;
+declare function SliderMarker(props: ComponentProps<typeof SliderPrimitive.Marker>): import("solid-js").JSX.Element;
+declare function SliderDraggingIndicator(props: ComponentProps<typeof SliderPrimitive.DraggingIndicator>): import("solid-js").JSX.Element;
+type SliderComponent = typeof SliderRoot & {
+    Root: typeof SliderRoot;
+    RootProvider: typeof SliderRootProvider;
+    Context: typeof SliderPrimitive.Context;
+    useSlider: typeof useSlider;
+    useSliderContext: typeof useSliderContext;
+    Label: typeof SliderLabel;
+    ValueText: typeof SliderValueText;
+    Control: typeof SliderControl;
+    HiddenInput: typeof SliderPrimitive.HiddenInput;
+    Track: typeof SliderTrack;
+    Range: typeof SliderRange;
+    Thumb: typeof SliderThumb;
+    Thumbs: typeof SliderThumbs;
+    MarkerGroup: typeof SliderMarkerGroup;
+    Marker: typeof SliderMarker;
+    DraggingIndicator: typeof SliderDraggingIndicator;
+};
+declare const Slider: SliderComponent;
+export { Slider, useSlider, useSliderContext };