@moduix/solid-tailwind 1.0.0

package/dist/components/switch/Switch.jsx

@@ -0,0 +1,57 @@
+import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/solid/switch";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+function SwitchRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return <Switch.Root asChild={local.asChild} data-slot="switch-root" data-size={local.size ?? 'md'} class={cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+      {local.children}
+    </Switch.Root>;
+}
+function SwitchRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return <Switch.RootProvider asChild={local.asChild} data-slot="switch-root-provider" data-size={local.size ?? 'md'} class={cn('group/switch inline-flex w-fit cursor-pointer items-center gap-2 align-middle data-disabled:cursor-default data-disabled:opacity-50 data-readonly:cursor-default', local.class)} {...others}>
+      {local.children}
+    </Switch.RootProvider>;
+}
+function SwitchControl(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Switch.Control data-slot="switch-control" class={cn("[@media(hover:hover)]:[&:not([data-disabled]):not([data-readonly])[data-state='unchecked'][data-hover]:bg-accent relative inline-flex h-control-xs w-11 shrink-0 items-center rounded-full border border-border bg-muted p-0.5 leading-none outline-0 transition-[background-color,border-color,opacity] duration-200 ease-in-out select-none group-data-[size=lg]/switch:h-7 group-data-[size=lg]/switch:w-13 group-data-[size=sm]/switch:h-5 group-data-[size=sm]/switch:w-9 group-data-[size=xl]/switch:h-control-sm group-data-[size=xl]/switch:w-15 group-data-[size=xs]/switch:h-4 group-data-[size=xs]/switch:w-7 data-focus-visible:outline-1 data-focus-visible:outline-offset-1 data-focus-visible:outline-ring data-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary motion-reduce:transition-none", local.class)} {...others}>
+      {resolvedChildren() ?? <SwitchThumb/>}
+    </Switch.Control>;
+}
+function SwitchThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Switch.Thumb data-slot="switch-thumb" class={cn('inline-flex size-5 translate-x-0 items-center justify-center rounded-full border-transparent bg-background text-muted shadow-sm transition-[translate,background-color,color] duration-200 ease-in-out group-data-[size=lg]/switch:size-control-xs group-data-[size=sm]/switch:size-4 group-data-[size=xl]/switch:size-7 group-data-[size=xs]/switch:size-3 data-[state=checked]:translate-x-[18px] data-[state=checked]:bg-primary-foreground data-[state=checked]:text-primary group-data-[size=lg]/switch:data-[state=checked]:translate-x-[22px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=xl]/switch:data-[state=checked]:translate-x-[26px] group-data-[size=xs]/switch:data-[state=checked]:translate-x-[10px] motion-reduce:transition-none rtl:data-[state=checked]:-translate-x-[18px] group-data-[size=lg]/switch:rtl:data-[state=checked]:-translate-x-[22px] group-data-[size=sm]/switch:rtl:data-[state=checked]:-translate-x-[14px] group-data-[size=xl]/switch:rtl:data-[state=checked]:-translate-x-[26px] group-data-[size=xs]/switch:rtl:data-[state=checked]:-translate-x-[10px] [&>svg]:block [&>svg]:size-[65%] [&>svg]:shrink-0', local.class)} {...others}/>;
+}
+function SwitchLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Switch.Label data-slot="switch-label" class={cn('text-sm leading-5 font-medium text-foreground select-none', local.class)} {...others}/>;
+}
+const Switch_Switch = Object.assign(SwitchRoot, {
+    Root: SwitchRoot,
+    RootProvider: SwitchRootProvider,
+    HiddenInput: Switch.HiddenInput,
+    Control: SwitchControl,
+    Thumb: SwitchThumb,
+    Label: SwitchLabel,
+    Context: SwitchContext
+});
+export { Switch_Switch as Switch, useSwitch, useSwitchContext };

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

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

package/dist/components/switch/index.js

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

package/dist/components/switch/index.jsx

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

package/dist/components/table/Table.d.ts

@@ -0,0 +1,71 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type TableDataProps = {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+type TableRootProps = HTMLArkProps<'table'> & TableDataProps & {
+    interactive?: boolean;
+    showColumnBorder?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    stickyHeader?: boolean;
+    striped?: boolean;
+    variant?: 'line' | 'outline';
+    'data-interactive'?: string | boolean;
+    'data-show-column-border'?: string | boolean;
+    'data-size'?: string;
+    'data-sticky-header'?: string | boolean;
+    'data-striped'?: string | boolean;
+    'data-variant'?: string;
+};
+type TableScrollAreaProps = HTMLArkProps<'div'> & TableDataProps;
+type TableCaptionProps = HTMLArkProps<'caption'> & TableDataProps & {
+    side?: 'top' | 'bottom';
+    'data-side'?: string;
+};
+type TableColumnGroupProps = HTMLArkProps<'colgroup'> & TableDataProps;
+type TableColumnProps = HTMLArkProps<'col'> & TableDataProps & {
+    htmlWidth?: string | number;
+};
+type TableHeaderProps = HTMLArkProps<'thead'> & TableDataProps;
+type TableBodyProps = HTMLArkProps<'tbody'> & TableDataProps;
+type TableFooterProps = HTMLArkProps<'tfoot'> & TableDataProps;
+type TableRowProps = HTMLArkProps<'tr'> & TableDataProps;
+type TableColumnHeaderProps = HTMLArkProps<'th'> & TableDataProps & {
+    numeric?: boolean;
+    'data-numeric'?: string | boolean;
+};
+type TableCellProps = HTMLArkProps<'td'> & TableDataProps & {
+    numeric?: boolean;
+    'data-numeric'?: string | boolean;
+};
+type TableEmptyProps = HTMLArkProps<'td'> & TableDataProps & {
+    colSpan: number;
+};
+declare function TableRoot(props: TableRootProps): import("solid-js").JSX.Element;
+declare function TableScrollArea(props: TableScrollAreaProps): import("solid-js").JSX.Element;
+declare function TableCaption(props: TableCaptionProps): import("solid-js").JSX.Element;
+declare function TableColumnGroup(props: TableColumnGroupProps): import("solid-js").JSX.Element;
+declare function TableColumn(props: TableColumnProps): import("solid-js").JSX.Element;
+declare function TableHeader(props: TableHeaderProps): import("solid-js").JSX.Element;
+declare function TableBody(props: TableBodyProps): import("solid-js").JSX.Element;
+declare function TableFooter(props: TableFooterProps): import("solid-js").JSX.Element;
+declare function TableRow(props: TableRowProps): import("solid-js").JSX.Element;
+declare function TableColumnHeader(props: TableColumnHeaderProps): import("solid-js").JSX.Element;
+declare function TableCell(props: TableCellProps): import("solid-js").JSX.Element;
+declare function TableEmpty(props: TableEmptyProps): import("solid-js").JSX.Element;
+declare const Table: typeof TableRoot & {
+    Root: typeof TableRoot;
+    ScrollArea: typeof TableScrollArea;
+    Caption: typeof TableCaption;
+    ColumnGroup: typeof TableColumnGroup;
+    Column: typeof TableColumn;
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: typeof TableRow;
+    ColumnHeader: typeof TableColumnHeader;
+    Cell: typeof TableCell;
+    Empty: typeof TableEmpty;
+};
+export { Table };

package/dist/components/table/Table.js

@@ -0,0 +1,363 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const tableVariants = cva('group/table isolate w-full border-collapse border-spacing-0 text-left text-foreground', {
+    variants: {
+        size: {
+            sm: 'text-xs leading-4',
+            md: 'text-sm leading-5',
+            lg: 'text-md leading-6'
+        },
+        variant: {
+            line: '',
+            outline: 'border border-border'
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'line'
+    }
+});
+function TableRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-interactive',
+        'data-part',
+        'data-scope',
+        'data-show-column-border',
+        'data-size',
+        'data-slot',
+        'data-sticky-header',
+        'data-striped',
+        'data-variant',
+        'interactive',
+        'showColumnBorder',
+        'size',
+        'stickyHeader',
+        'striped',
+        'variant'
+    ]);
+    const size = ()=>local.size ?? 'md';
+    const variant = ()=>local.variant ?? 'line';
+    return createComponent(ark.table, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "root",
+        "data-slot": "table-root",
+        get ["data-interactive"] () {
+            return local.interactive || void 0;
+        },
+        get ["data-show-column-border"] () {
+            return local.showColumnBorder || void 0;
+        },
+        get ["data-size"] () {
+            return size();
+        },
+        get ["data-sticky-header"] () {
+            return local.stickyHeader || void 0;
+        },
+        get ["data-striped"] () {
+            return local.striped || void 0;
+        },
+        get ["data-variant"] () {
+            return variant();
+        },
+        get ["class"] () {
+            return cn(tableVariants({
+                size: size(),
+                variant: variant()
+            }), local.class);
+        }
+    }));
+}
+function TableScrollArea(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "scroll-area",
+        "data-slot": "table-scroll-area",
+        get ["class"] () {
+            return cn('relative isolate w-full min-w-0 overflow-x-auto rounded-lg border border-border bg-card', local.class);
+        }
+    }));
+}
+function TableCaption(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-side',
+        'data-slot',
+        'side'
+    ]);
+    const side = ()=>local.side ?? 'bottom';
+    return createComponent(ark.caption, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "caption",
+        get ["data-side"] () {
+            return side();
+        },
+        "data-slot": "table-caption",
+        get ["class"] () {
+            return cn('px-4 text-left text-sm leading-5 text-pretty text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=sm]/table:px-3 data-[side=bottom]:caption-bottom data-[side=bottom]:pt-3 data-[side=bottom]:pb-2 data-[side=top]:caption-top data-[side=top]:pt-2 data-[side=top]:pb-3', local.class);
+        }
+    }));
+}
+function TableColumnGroup(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return createComponent(ark.colgroup, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "column-group",
+        "data-slot": "table-column-group",
+        get ["class"] () {
+            return local.class;
+        }
+    }));
+}
+function TableColumn(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'htmlWidth',
+        'width'
+    ]);
+    return createComponent(ark.col, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "column",
+        "data-slot": "table-column",
+        get width () {
+            return local.htmlWidth ?? local.width;
+        },
+        get ["class"] () {
+            return local.class;
+        }
+    }));
+}
+function TableHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return createComponent(ark.thead, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "header",
+        "data-slot": "table-header",
+        get ["class"] () {
+            return cn('group/table-header group-data-[sticky-header]/table:sticky group-data-[sticky-header]/table:top-0 group-data-[sticky-header]/table:z-3 group-data-[sticky-header]/table:bg-card', local.class);
+        }
+    }));
+}
+function TableBody(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return createComponent(ark.tbody, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "body",
+        "data-slot": "table-body",
+        get ["class"] () {
+            return cn('group/table-body', local.class);
+        }
+    }));
+}
+function TableFooter(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return createComponent(ark.tfoot, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "footer",
+        "data-slot": "table-footer",
+        get ["class"] () {
+            return cn('border-t border-border bg-muted font-medium', local.class);
+        }
+    }));
+}
+function TableRow(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    return createComponent(ark.tr, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "row",
+        "data-slot": "table-row",
+        get ["class"] () {
+            return cn('transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-header]/table-header:border-b group-data-[slot=table-header]/table-header:border-border group-data-[slot=table-body]/table-body:last:border-b-0 group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:focus-within:bg-muted group-data-[interactive]/table:group-data-[slot=table-body]/table-body:[&:not([data-empty])]:hover:bg-muted group-data-[striped]/table:[&:nth-child(even):not([data-empty])]:bg-muted/35', local.class);
+        }
+    }));
+}
+function TableColumnHeader(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-numeric',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'numeric'
+    ]);
+    return createComponent(ark.th, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "column-header",
+        get ["data-numeric"] () {
+            return local.numeric || void 0;
+        },
+        "data-slot": "table-column-header",
+        get ["class"] () {
+            return cn('relative z-0 px-4 py-3 align-middle font-medium whitespace-nowrap text-muted-foreground group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 group-data-[sticky-header]/table:data-[sticky]:z-4 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class);
+        }
+    }));
+}
+function TableCell(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-numeric',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'numeric'
+    ]);
+    return createComponent(ark.td, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "table",
+        "data-part": "cell",
+        get ["data-numeric"] () {
+            return local.numeric || void 0;
+        },
+        "data-slot": "table-cell",
+        get ["class"] () {
+            return cn('relative z-0 px-4 py-3 align-middle group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', local.numeric && 'text-end tabular-nums', local.class);
+        }
+    }));
+}
+function TableEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'colSpan',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ark.tr, {
+        "data-scope": "table",
+        "data-part": "row",
+        "data-empty": true,
+        "data-slot": "table-row",
+        class: "transition-colors duration-200 ease-in-out group-data-[slot=table-body]/table-body:border-b group-data-[slot=table-body]/table-body:border-border group-data-[slot=table-body]/table-body:last:border-b-0",
+        get children () {
+            return createComponent(ark.td, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                }
+            }, others, {
+                "data-scope": "table",
+                "data-part": "empty",
+                "data-slot": "table-empty",
+                get colSpan () {
+                    return local.colSpan;
+                },
+                get ["class"] () {
+                    return cn('relative z-0 px-4 py-3 align-middle group-data-[size=lg]/table:px-5 group-data-[size=lg]/table:py-4 group-data-[size=sm]/table:px-3 group-data-[size=sm]/table:py-2 data-[sticky=end]:sticky data-[sticky=end]:end-0 data-[sticky=end]:z-2 data-[sticky=end]:bg-card data-[sticky=start]:sticky data-[sticky=start]:start-0 data-[sticky=start]:z-2 data-[sticky=start]:bg-card group-data-[show-column-border]/table:[&:not(:last-child)]:border-e group-data-[show-column-border]/table:[&:not(:last-child)]:border-border', 'py-6 text-center text-muted-foreground group-data-[size=lg]/table:py-8 group-data-[size=sm]/table:py-4', local.class);
+                },
+                get children () {
+                    return resolvedChildren() ?? 'No results.';
+                }
+            }));
+        }
+    });
+}
+const Table = Object.assign(TableRoot, {
+    Root: TableRoot,
+    ScrollArea: TableScrollArea,
+    Caption: TableCaption,
+    ColumnGroup: TableColumnGroup,
+    Column: TableColumn,
+    Header: TableHeader,
+    Body: TableBody,
+    Footer: TableFooter,
+    Row: TableRow,
+    ColumnHeader: TableColumnHeader,
+    Cell: TableCell,
+    Empty: TableEmpty
+});
+export { Table };