@moduix/solid 1.0.0

package/dist/components/badge/Badge.js

@@ -0,0 +1,66 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Badge_module from "./Badge.module.js";
+function BadgeLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-scope": "badge",
+        "data-part": "label",
+        "data-slot": "badge-label",
+        get ["class"] () {
+            return clsx(Badge_module.label, local.class);
+        }
+    }));
+}
+function BadgeRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-variant',
+        '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 clsx(Badge_module.root, local.class);
+        }
+    }));
+}
+function BadgeDot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-scope": "badge",
+        "data-part": "dot",
+        "data-slot": "badge-dot",
+        "aria-hidden": "true",
+        get ["class"] () {
+            return clsx(Badge_module.dot, local.class);
+        }
+    }));
+}
+const Badge = Object.assign(BadgeRoot, {
+    Root: BadgeRoot,
+    Label: BadgeLabel,
+    Dot: BadgeDot
+});
+export { Badge };

package/dist/components/badge/Badge.jsx

@@ -0,0 +1,40 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Badge_module from "./Badge.module.jsx";
+function BadgeLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <ark.span {...others} data-scope="badge" data-part="label" data-slot="badge-label" class={clsx(Badge_module.label, local.class)}/>;
+}
+function BadgeRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-variant',
+        'variant'
+    ]);
+    return <ark.span {...others} data-scope="badge" data-part="root" data-slot="badge-root" data-variant={local.variant ?? 'default'} class={clsx(Badge_module.root, local.class)}/>;
+}
+function BadgeDot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-hidden',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <ark.span {...others} data-scope="badge" data-part="dot" data-slot="badge-dot" aria-hidden="true" class={clsx(Badge_module.dot, local.class)}/>;
+}
+const Badge = Object.assign(BadgeRoot, {
+    Root: BadgeRoot,
+    Label: BadgeLabel,
+    Dot: BadgeDot
+});
+export { Badge };

package/dist/components/badge/Badge.module.js

@@ -0,0 +1,7 @@
+import "./Badge_module.css";
+const Badge_module = {
+    root: "root-qRQEjV",
+    dot: "dot-V00V3q",
+    label: "label-FgBsAj"
+};
+export default Badge_module;

package/dist/components/badge/Badge.module.jsx

@@ -0,0 +1,7 @@
+import "./Badge_module.css";
+const Badge_module = {
+    root: "root-qRQEjV",
+    dot: "dot-V00V3q",
+    label: "label-FgBsAj"
+};
+export default Badge_module;

package/dist/components/badge/Badge_module.css

@@ -0,0 +1,123 @@
+@layer moduix.components {
+  .root-qRQEjV {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-badge-gap, var(--moduix-spacing-1-5));
+    border: var(--moduix-badge-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-badge-border-color, var(--moduix-badge-default-border-color, transparent));
+    border-radius: var(--moduix-badge-radius, var(--moduix-radius-full));
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    padding-block: var(--moduix-badge-padding-y, 0);
+    padding-inline: var(--moduix-badge-padding-x, var(--moduix-spacing-2-5));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-default-bg, var(--moduix-color-primary)));
+    color: var(--moduix-badge-color, var(--moduix-badge-default-color, var(--moduix-color-primary-foreground)));
+    font-size: var(--moduix-badge-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-badge-font-weight, var(--moduix-weight-medium));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--moduix-badge-line-height, var(--moduix-line-height-text-xs));
+    min-height: var(--moduix-badge-height, 1.25rem);
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    transition: color var(--moduix-badge-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-badge-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-badge-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-badge-transition, var(--moduix-transition-default));
+    text-decoration: none;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .root-qRQEjV:focus-visible {
+    outline: var(--moduix-badge-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-badge-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-badge-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .root-qRQEjV:is(a) {
+    cursor: pointer;
+  }
+
+  .root-qRQEjV:is(a):is([data-variant="default"], [data-variant="secondary"], [data-variant="destructive"]):hover {
+    opacity: var(--moduix-badge-opacity-hover, var(--moduix-opacity-hover));
+  }
+
+  .root-qRQEjV:is(a)[data-variant="outline"]:hover {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-outline-border-color-hover, var(--moduix-color-primary)));
+    color: var(--moduix-badge-color, var(--moduix-badge-outline-color-hover, var(--moduix-color-primary)));
+  }
+
+  .root-qRQEjV:is(a)[data-variant="ghost"]:hover {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-ghost-border-color-hover, var(--moduix-color-primary)));
+    color: var(--moduix-badge-color, var(--moduix-badge-ghost-color-hover, var(--moduix-color-primary)));
+  }
+
+  .root-qRQEjV:is(a)[data-variant="link"]:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .root-qRQEjV > svg {
+    width: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  .root-qRQEjV[data-variant="secondary"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-secondary-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-secondary-bg, var(--moduix-color-secondary)));
+    color: var(--moduix-badge-color, var(--moduix-badge-secondary-color, var(--moduix-color-secondary-foreground)));
+  }
+
+  .root-qRQEjV[data-variant="destructive"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-destructive-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-destructive-bg, var(--moduix-color-destructive)));
+    color: var(--moduix-badge-color, var(--moduix-badge-destructive-color, var(--moduix-color-destructive-foreground)));
+  }
+
+  .root-qRQEjV[data-variant="outline"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-outline-border-color, var(--moduix-color-border)));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-outline-bg, transparent));
+    color: var(--moduix-badge-color, var(--moduix-badge-outline-color, var(--moduix-color-foreground)));
+  }
+
+  .root-qRQEjV[data-variant="ghost"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-ghost-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-ghost-bg, transparent));
+    color: var(--moduix-badge-color, var(--moduix-badge-ghost-color, var(--moduix-color-foreground)));
+  }
+
+  .root-qRQEjV[data-variant="link"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-link-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-link-bg, transparent));
+    min-height: auto;
+    color: var(--moduix-badge-color, var(--moduix-badge-link-color, var(--moduix-color-primary)));
+    text-decoration: underline;
+    -webkit-text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
+    text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
+    text-underline-offset: var(--moduix-badge-link-underline-offset, .15em);
+    border-radius: 0;
+    padding-block: .125em;
+    padding-inline: 0;
+    text-decoration-thickness: from-font;
+  }
+
+  .dot-V00V3q {
+    width: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
+    height: var(--moduix-badge-dot-size, var(--moduix-spacing-1-5));
+    background-color: currentColor;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .label-FgBsAj {
+    text-overflow: ellipsis;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+

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

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

package/dist/components/badge/index.js

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

package/dist/components/badge/index.jsx

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

package/dist/components/bleed/Bleed.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type BleedAmount = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BleedInline = BleedAmount | 'full';
+type BleedRootProps = HTMLArkProps<'div'> & {
+    inline?: BleedInline;
+    block?: BleedAmount;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    'data-inline'?: string;
+    'data-block'?: string;
+};
+declare function BleedRoot(props: BleedRootProps): import("solid-js").JSX.Element;
+declare const Bleed: typeof BleedRoot & {
+    Root: typeof BleedRoot;
+};
+export { Bleed };

package/dist/components/bleed/Bleed.js

@@ -0,0 +1,40 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Bleed_module from "./Bleed.module.js";
+function BleedRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'block',
+        'class',
+        'inline',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-inline',
+        'data-block'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "bleed",
+        "data-part": "root",
+        "data-slot": "bleed-root",
+        get ["data-inline"] () {
+            return local.inline ?? 'full';
+        },
+        get ["data-block"] () {
+            return local.block ?? 'none';
+        },
+        get ["class"] () {
+            return clsx(Bleed_module.root, local.class);
+        }
+    }));
+}
+const Bleed = Object.assign(BleedRoot, {
+    Root: BleedRoot
+});
+export { Bleed };

package/dist/components/bleed/Bleed.jsx

@@ -0,0 +1,22 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Bleed_module from "./Bleed.module.jsx";
+function BleedRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'block',
+        'class',
+        'inline',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-inline',
+        'data-block'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="bleed" data-part="root" data-slot="bleed-root" data-inline={local.inline ?? 'full'} data-block={local.block ?? 'none'} class={clsx(Bleed_module.root, local.class)}/>;
+}
+const Bleed = Object.assign(BleedRoot, {
+    Root: BleedRoot
+});
+export { Bleed };

package/dist/components/bleed/Bleed.module.js

@@ -0,0 +1,5 @@
+import "./Bleed_module.css";
+const Bleed_module = {
+    root: "root-t9_f9j"
+};
+export default Bleed_module;

package/dist/components/bleed/Bleed.module.jsx

@@ -0,0 +1,5 @@
+import "./Bleed_module.css";
+const Bleed_module = {
+    root: "root-t9_f9j"
+};
+export default Bleed_module;

package/dist/components/bleed/Bleed_module.css

@@ -0,0 +1,52 @@
+@layer moduix.components {
+  .root-t9_f9j {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .root-t9_f9j[data-inline="xs"] {
+    margin-inline: calc(var(--moduix-bleed-inline-xs, var(--moduix-spacing-1)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="sm"] {
+    margin-inline: calc(var(--moduix-bleed-inline-sm, var(--moduix-spacing-2)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="md"] {
+    margin-inline: calc(var(--moduix-bleed-inline-md, var(--moduix-spacing-3)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="lg"] {
+    margin-inline: calc(var(--moduix-bleed-inline-lg, var(--moduix-spacing-4)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="xl"] {
+    margin-inline: calc(var(--moduix-bleed-inline-xl, var(--moduix-spacing-6)) * -1);
+  }
+
+  .root-t9_f9j[data-inline="full"] {
+    inline-size: var(--moduix-bleed-inline-full-size, 100vi);
+    margin-inline: var(--moduix-bleed-inline-full, calc(50% - 50vi));
+  }
+
+  .root-t9_f9j[data-block="xs"] {
+    margin-block: calc(var(--moduix-bleed-block-xs, var(--moduix-spacing-1)) * -1);
+  }
+
+  .root-t9_f9j[data-block="sm"] {
+    margin-block: calc(var(--moduix-bleed-block-sm, var(--moduix-spacing-2)) * -1);
+  }
+
+  .root-t9_f9j[data-block="md"] {
+    margin-block: calc(var(--moduix-bleed-block-md, var(--moduix-spacing-3)) * -1);
+  }
+
+  .root-t9_f9j[data-block="lg"] {
+    margin-block: calc(var(--moduix-bleed-block-lg, var(--moduix-spacing-4)) * -1);
+  }
+
+  .root-t9_f9j[data-block="xl"] {
+    margin-block: calc(var(--moduix-bleed-block-xl, var(--moduix-spacing-6)) * -1);
+  }
+}
+

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

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

package/dist/components/bleed/index.js

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

package/dist/components/bleed/index.jsx

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

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type BreadcrumbsPathItem = {
+    href?: string;
+    key?: string | number;
+    label: JSX.Element;
+};
+type BreadcrumbsPathProps = Omit<HTMLArkProps<'ol'>, 'asChild' | 'children'> & {
+    items: readonly BreadcrumbsPathItem[];
+    separator?: JSX.Element;
+};
+declare function BreadcrumbsRoot(props: HTMLArkProps<'nav'>): JSX.Element;
+declare function BreadcrumbsList(props: HTMLArkProps<'ol'>): JSX.Element;
+declare function BreadcrumbsItem(props: HTMLArkProps<'li'>): JSX.Element;
+declare function BreadcrumbsLink(props: HTMLArkProps<'a'>): JSX.Element;
+declare function BreadcrumbsPage(props: HTMLArkProps<'span'>): JSX.Element;
+declare function BreadcrumbsPath(props: BreadcrumbsPathProps): JSX.Element;
+declare function BreadcrumbsSeparator(props: HTMLArkProps<'li'>): JSX.Element;
+declare function BreadcrumbsEllipsis(props: HTMLArkProps<'span'>): JSX.Element;
+declare const Breadcrumbs: typeof BreadcrumbsRoot & {
+    Root: typeof BreadcrumbsRoot;
+    List: typeof BreadcrumbsList;
+    Item: typeof BreadcrumbsItem;
+    Link: typeof BreadcrumbsLink;
+    Path: typeof BreadcrumbsPath;
+    Page: typeof BreadcrumbsPage;
+    Separator: typeof BreadcrumbsSeparator;
+    Ellipsis: typeof BreadcrumbsEllipsis;
+};
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,161 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { For, children, splitProps } from "solid-js";
+import { ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+import Breadcrumbs_module from "./Breadcrumbs.module.js";
+function BreadcrumbsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'class'
+    ]);
+    return createComponent(ark.nav, mergeProps({
+        get ["aria-label"] () {
+            return memo(()=>void 0 === local['aria-label'])() ? 'Breadcrumb' : local['aria-label'];
+        }
+    }, others, {
+        "data-slot": "breadcrumbs-root",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.root, local.class);
+        }
+    }));
+}
+function BreadcrumbsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.ol, mergeProps(others, {
+        "data-slot": "breadcrumbs-list",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.list, local.class);
+        }
+    }));
+}
+function BreadcrumbsItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.li, mergeProps(others, {
+        "data-slot": "breadcrumbs-item",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.item, local.class);
+        }
+    }));
+}
+function BreadcrumbsLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.a, mergeProps(others, {
+        "data-slot": "breadcrumbs-link",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.link, local.class);
+        }
+    }));
+}
+function BreadcrumbsPage(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-slot": "breadcrumbs-page",
+        "aria-current": "page",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.page, local.class);
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function BreadcrumbsPath(props) {
+    const [local, others] = splitProps(props, [
+        'items',
+        'separator'
+    ]);
+    return createComponent(BreadcrumbsList, mergeProps(others, {
+        get children () {
+            return createComponent(For, {
+                get each () {
+                    return local.items;
+                },
+                children: (item, index)=>{
+                    const isLastItem = ()=>index() === local.items.length - 1;
+                    return [
+                        createComponent(BreadcrumbsItem, {
+                            get children () {
+                                return memo(()=>!!isLastItem())() ? createComponent(BreadcrumbsPage, {
+                                    get children () {
+                                        return item.label;
+                                    }
+                                }) : createComponent(BreadcrumbsLink, {
+                                    get href () {
+                                        return item.href;
+                                    },
+                                    get children () {
+                                        return item.label;
+                                    }
+                                });
+                            }
+                        }),
+                        memo(()=>memo(()=>!isLastItem())() ? createComponent(BreadcrumbsSeparator, {
+                                get children () {
+                                    return local.separator;
+                                }
+                            }) : null)
+                    ];
+                }
+            });
+        }
+    }));
+}
+function BreadcrumbsSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ark.li, mergeProps(others, {
+        "data-slot": "breadcrumbs-separator",
+        "aria-hidden": "true",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.separator, local.class);
+        },
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronRightIcon, {
+                get ["class"] () {
+                    return Breadcrumbs_module.separatorIcon;
+                }
+            });
+        }
+    }));
+}
+function BreadcrumbsEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-slot": "breadcrumbs-ellipsis",
+        "aria-hidden": "true",
+        get ["class"] () {
+            return clsx(Breadcrumbs_module.ellipsis, local.class);
+        },
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? '...' : resolvedChildren();
+        }
+    }));
+}
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+    Root: BreadcrumbsRoot,
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+    Path: BreadcrumbsPath,
+    Page: BreadcrumbsPage,
+    Separator: BreadcrumbsSeparator,
+    Ellipsis: BreadcrumbsEllipsis
+});
+export { Breadcrumbs };