@moduix/solid 1.0.0

package/dist/components/switch/Switch.js

@@ -0,0 +1,102 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/solid/switch";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import Switch_module from "./Switch.module.js";
+function SwitchRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(Switch.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "switch-root",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return clsx(Switch_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SwitchRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'size'
+    ]);
+    return createComponent(Switch.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "switch-root-provider",
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["class"] () {
+            return clsx(Switch_module.root, local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function SwitchControl(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Switch.Control, mergeProps({
+        "data-slot": "switch-control",
+        get ["class"] () {
+            return clsx(Switch_module.control, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(SwitchThumb, {});
+        }
+    }));
+}
+function SwitchThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Switch.Thumb, mergeProps({
+        "data-slot": "switch-thumb",
+        get ["class"] () {
+            return clsx(Switch_module.thumb, local.class);
+        }
+    }, others));
+}
+function SwitchLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Switch.Label, mergeProps({
+        "data-slot": "switch-label",
+        get ["class"] () {
+            return clsx(Switch_module.label, 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/Switch.jsx

@@ -0,0 +1,58 @@
+import { Switch, SwitchContext, useSwitch, useSwitchContext } from "@ark-ui/solid/switch";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import Switch_module from "./Switch.module.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={clsx(Switch_module.root, 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={clsx(Switch_module.root, 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={clsx(Switch_module.control, local.class)} {...others}>
+      {resolvedChildren() ?? <SwitchThumb/>}
+    </Switch.Control>;
+}
+function SwitchThumb(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Switch.Thumb data-slot="switch-thumb" class={clsx(Switch_module.thumb, local.class)} {...others}/>;
+}
+function SwitchLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Switch.Label data-slot="switch-label" class={clsx(Switch_module.label, 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/Switch.module.js

@@ -0,0 +1,8 @@
+import "./Switch_module.css";
+const Switch_module = {
+    root: "root-BQV0g7",
+    control: "control-_x56fO",
+    thumb: "thumb-AkEGnM",
+    label: "label-OFdult"
+};
+export default Switch_module;

package/dist/components/switch/Switch.module.jsx

@@ -0,0 +1,8 @@
+import "./Switch_module.css";
+const Switch_module = {
+    root: "root-BQV0g7",
+    control: "control-_x56fO",
+    thumb: "thumb-AkEGnM",
+    label: "label-OFdult"
+};
+export default Switch_module;

package/dist/components/switch/Switch_module.css

@@ -0,0 +1,150 @@
+@layer moduix.components {
+  .root-BQV0g7 {
+    align-items: center;
+    gap: var(--moduix-switch-gap, var(--moduix-spacing-2));
+    vertical-align: middle;
+    cursor: pointer;
+    width: fit-content;
+    display: inline-flex;
+  }
+
+  .root-BQV0g7[data-disabled], .root-BQV0g7[data-readonly] {
+    cursor: default;
+  }
+
+  .root-BQV0g7[data-disabled] {
+    opacity: var(--moduix-switch-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .control-_x56fO {
+    box-sizing: border-box;
+    width: var(--_switch-width, 3rem);
+    height: var(--_switch-height, var(--moduix-size-xs));
+    --_switch-thumb-translate-default: calc(var(--_switch-width, 3rem) - var(--_switch-thumb-size, var(--moduix-spacing-5)) -
+        (var(--moduix-switch-padding, var(--moduix-spacing-0-5)) * 2) -
+        (var(--moduix-switch-border-width, var(--moduix-border-width-sm)) * 2));
+    border: var(--moduix-switch-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-switch-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-switch-radius, var(--moduix-radius-full));
+    padding: var(--moduix-switch-padding, var(--moduix-spacing-0-5));
+    background-color: var(--moduix-switch-bg, var(--moduix-color-muted));
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color var(--moduix-switch-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-switch-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-switch-transition, var(--moduix-transition-default));
+    outline: 0;
+    flex-shrink: 0;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .control-_x56fO[data-state="checked"] {
+    border-color: var(--moduix-switch-border-color-checked, var(--moduix-color-primary));
+    background-color: var(--moduix-switch-bg-checked, var(--moduix-color-primary));
+  }
+
+  .control-_x56fO[data-invalid] {
+    border-color: var(--moduix-switch-border-color-invalid, var(--moduix-color-destructive));
+  }
+
+  .control-_x56fO[data-focus-visible] {
+    outline: var(--moduix-switch-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-switch-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-switch-focus-ring-offset, var(--moduix-border-width-sm));
+  }
+
+  @media (hover: hover) {
+    .control-_x56fO[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-switch-bg-hover, var(--moduix-color-accent));
+    }
+
+    .control-_x56fO[data-state="checked"][data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-switch-bg-checked-hover, var(--moduix-switch-bg-checked, var(--moduix-color-primary)));
+    }
+  }
+
+  .root-BQV0g7[data-size="xs"] .control-_x56fO {
+    --_switch-width: var(--moduix-switch-width-xs, 1.75rem);
+    --_switch-height: var(--moduix-switch-height-xs, 1rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-xs, var(--moduix-spacing-3));
+  }
+
+  .root-BQV0g7[data-size="sm"] .control-_x56fO {
+    --_switch-width: var(--moduix-switch-width-sm, 2.25rem);
+    --_switch-height: var(--moduix-switch-height-sm, 1.25rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-sm, var(--moduix-spacing-4));
+  }
+
+  .root-BQV0g7[data-size="md"] .control-_x56fO {
+    --_switch-width: var(--moduix-switch-width-md, 2.75rem);
+    --_switch-height: var(--moduix-switch-height-md, var(--moduix-size-xs));
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-md, var(--moduix-spacing-5));
+  }
+
+  .root-BQV0g7[data-size="lg"] .control-_x56fO {
+    --_switch-width: var(--moduix-switch-width-lg, 3.25rem);
+    --_switch-height: var(--moduix-switch-height-lg, 1.75rem);
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-lg, var(--moduix-size-xs));
+  }
+
+  .root-BQV0g7[data-size="xl"] .control-_x56fO {
+    --_switch-width: var(--moduix-switch-width-xl, 3.75rem);
+    --_switch-height: var(--moduix-switch-height-xl, var(--moduix-size-sm));
+    --_switch-thumb-size: var(--moduix-switch-thumb-size-xl, var(--moduix-spacing-7));
+  }
+
+  .thumb-AkEGnM {
+    width: var(--_switch-thumb-size, var(--moduix-spacing-5));
+    height: var(--_switch-thumb-size, var(--moduix-spacing-5));
+    border: var(--moduix-switch-thumb-border-width, 0) solid
+      var(--moduix-switch-thumb-border-color, transparent);
+    border-radius: var(--moduix-switch-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-switch-thumb-bg-unchecked, var(--moduix-switch-thumb-bg, var(--moduix-color-background)));
+    color: var(--moduix-switch-thumb-color-unchecked, var(--moduix-switch-thumb-color, var(--moduix-color-muted)));
+    box-shadow: var(--moduix-switch-thumb-shadow, var(--moduix-shadow-sm));
+    transition: transform
+        var(--moduix-switch-thumb-transition, var(--moduix-switch-transition, var(--moduix-transition-default))),
+      background-color var(--moduix-switch-transition, var(--moduix-transition-default)),
+      color var(--moduix-switch-transition, var(--moduix-transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    transform: translateX(0);
+  }
+
+  .thumb-AkEGnM[data-state="checked"] {
+    background-color: var(--moduix-switch-thumb-bg-checked, var(--moduix-switch-thumb-bg, var(--moduix-color-primary-foreground)));
+    color: var(--moduix-switch-thumb-color-checked, var(--moduix-switch-thumb-color, var(--moduix-color-primary)));
+    transform: translateX(var(--moduix-switch-thumb-translate, var(--_switch-thumb-translate-default)));
+  }
+
+  .thumb-AkEGnM > svg {
+    width: var(--moduix-switch-thumb-icon-size, 65%);
+    height: var(--moduix-switch-thumb-icon-size, 65%);
+    flex-shrink: 0;
+    display: block;
+  }
+
+  .root-BQV0g7:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) .thumb-AkEGnM[data-state="checked"] {
+    transform: translateX(calc(var(--moduix-switch-thumb-translate, var(--_switch-thumb-translate-default)) * -1));
+  }
+
+  .label-OFdult {
+    color: var(--moduix-switch-label-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-switch-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-switch-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-switch-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control-_x56fO, .thumb-AkEGnM {
+      transition: none;
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export { Switch, useSwitch, useSwitchContext } from './Switch.js';
+export type { SwitchRootProps, SwitchRootProviderProps, SwitchSize } from './Switch.js';

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { Switch, useSwitch, useSwitchContext } from "./Switch.js";

package/dist/components/switch/index.jsx

@@ -0,0 +1 @@
+export { Switch, useSwitch, useSwitchContext } 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 };