@moduix/solid 1.0.0

package/dist/components/breadcrumbs/Breadcrumbs.jsx

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

package/dist/components/breadcrumbs/Breadcrumbs.module.js

@@ -0,0 +1,12 @@
+import "./Breadcrumbs_module.css";
+const Breadcrumbs_module = {
+    root: "root-B6shiI",
+    list: "list-FZ1rud",
+    item: "item-RCrA_4",
+    link: "link-xaIY1W",
+    page: "page-IrZ65J",
+    ellipsis: "ellipsis-BQEu94",
+    separator: "separator-VULbp1",
+    separatorIcon: "separatorIcon-Te8UH5"
+};
+export default Breadcrumbs_module;

package/dist/components/breadcrumbs/Breadcrumbs.module.jsx

@@ -0,0 +1,12 @@
+import "./Breadcrumbs_module.css";
+const Breadcrumbs_module = {
+    root: "root-B6shiI",
+    list: "list-FZ1rud",
+    item: "item-RCrA_4",
+    link: "link-xaIY1W",
+    page: "page-IrZ65J",
+    ellipsis: "ellipsis-BQEu94",
+    separator: "separator-VULbp1",
+    separatorIcon: "separatorIcon-Te8UH5"
+};
+export default Breadcrumbs_module;

package/dist/components/breadcrumbs/Breadcrumbs_module.css

@@ -0,0 +1,103 @@
+@layer moduix.components {
+  .root-B6shiI {
+    max-width: var(--moduix-breadcrumbs-max-width, 100%);
+    color: var(--moduix-breadcrumbs-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-breadcrumbs-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-breadcrumbs-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .list-FZ1rud {
+    align-items: center;
+    gap: var(--moduix-breadcrumbs-gap, var(--moduix-spacing-1));
+    white-space: nowrap;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .list-FZ1rud > .item-RCrA_4:last-child {
+    max-width: var(--moduix-breadcrumbs-item-max-width, 16rem);
+    flex: auto;
+  }
+
+  .item-RCrA_4 {
+    align-items: center;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .link-xaIY1W, .page-IrZ65J {
+    min-width: 0;
+    max-width: 100%;
+    padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
+    white-space: nowrap;
+    display: block;
+  }
+
+  .link-xaIY1W, .page-IrZ65J, .ellipsis-BQEu94 {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .link-xaIY1W {
+    color: var(--moduix-breadcrumbs-link-color, var(--moduix-color-muted-foreground));
+    -webkit-text-decoration: var(--moduix-breadcrumbs-link-text-decoration, none);
+    text-decoration: var(--moduix-breadcrumbs-link-text-decoration, none);
+    text-underline-offset: var(--moduix-breadcrumbs-link-underline-offset, .2em);
+    border-radius: var(--moduix-breadcrumbs-link-radius, var(--moduix-radius-sm));
+    transition: color var(--moduix-breadcrumbs-link-transition, var(--moduix-transition-default));
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    .link-xaIY1W:hover {
+      color: var(--moduix-breadcrumbs-link-color-hover, var(--moduix-color-foreground));
+      -webkit-text-decoration: var(--moduix-breadcrumbs-link-text-decoration-hover, none);
+      text-decoration: var(--moduix-breadcrumbs-link-text-decoration-hover, none);
+    }
+  }
+
+  .link-xaIY1W:focus-visible {
+    box-shadow: 0 0 0
+        var(--moduix-breadcrumbs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-breadcrumbs-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .page-IrZ65J {
+    color: var(--moduix-breadcrumbs-page-color, var(--moduix-color-foreground));
+    font-weight: var(--moduix-breadcrumbs-page-font-weight, var(--moduix-weight-medium));
+  }
+
+  .separator-VULbp1 {
+    color: var(--moduix-breadcrumbs-separator-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-breadcrumbs-separator-font-size, .875em);
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .separatorIcon-Te8UH5 {
+    width: var(--moduix-breadcrumbs-separator-icon-size, 1em);
+    height: var(--moduix-breadcrumbs-separator-icon-size, 1em);
+    flex: none;
+  }
+
+  [dir="rtl"] .separatorIcon-Te8UH5 {
+    transform: rotate(180deg);
+  }
+
+  .ellipsis-BQEu94 {
+    min-width: var(--moduix-breadcrumbs-ellipsis-size, var(--moduix-spacing-4));
+    min-height: var(--moduix-breadcrumbs-ellipsis-size, var(--moduix-spacing-4));
+    padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
+    color: var(--moduix-breadcrumbs-ellipsis-color, var(--moduix-color-muted-foreground));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+

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

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

package/dist/components/breadcrumbs/index.js

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

package/dist/components/breadcrumbs/index.jsx

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

package/dist/components/button/Button.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type ButtonRootProps = HTMLArkProps<'button'> & {
+    loading?: boolean;
+    variant?: 'default' | 'outline' | 'secondary' | 'destructive' | 'destructive-outline' | 'ghost' | 'link';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon-sm' | 'icon-md' | 'icon-lg';
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    onClickCapture?: (event: MouseEvent) => void;
+};
+declare function ButtonRoot(props: ButtonRootProps): JSX.Element;
+declare const Button: typeof ButtonRoot & {
+    Root: typeof ButtonRoot;
+};
+export { Button };

package/dist/components/button/Button.js

@@ -0,0 +1,88 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { useFocusVisible } from "@ark-ui/solid";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Button_module from "./Button.module.js";
+const ArkButton = ark.button;
+function ButtonRoot(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'disabled',
+        'loading',
+        'onClick',
+        'onClickCapture',
+        'size',
+        'type',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'variant',
+        'aria-busy',
+        'aria-disabled'
+    ]);
+    const isDisabled = ()=>local.disabled || local.loading || true === local['aria-disabled'] || 'true' === local['aria-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    return createComponent(ArkButton, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get type () {
+            return memo(()=>!!local.asChild)() ? local.type : local.type ?? 'button';
+        },
+        get disabled () {
+            return memo(()=>!!local.asChild)() ? void 0 : isDisabled();
+        },
+        get ["aria-busy"] () {
+            return memo(()=>!!local.loading)() ? true : local['aria-busy'];
+        },
+        get ["aria-disabled"] () {
+            return memo(()=>!!isDisabled())() ? true : local['aria-disabled'];
+        },
+        "oncapture:click": handleClickCapture,
+        get onClick () {
+            return local.onClick;
+        },
+        get ["data-scope"] () {
+            return local['data-scope'] ?? 'button';
+        },
+        get ["data-part"] () {
+            return local['data-part'] ?? 'root';
+        },
+        get ["data-slot"] () {
+            return local['data-slot'] ?? 'button-root';
+        },
+        get ["data-variant"] () {
+            return local.variant ?? 'default';
+        },
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-disabled"] () {
+            return isDisabled() ? '' : void 0;
+        },
+        get ["data-focus-visible"] () {
+            return focusVisible() ? '' : void 0;
+        },
+        get ["data-loading"] () {
+            return local.loading ? '' : void 0;
+        },
+        get ["class"] () {
+            return clsx(Button_module.root, local.class);
+        }
+    }));
+}
+const Button = Object.assign(ButtonRoot, {
+    Root: ButtonRoot
+});
+export { Button };

package/dist/components/button/Button.jsx

@@ -0,0 +1,39 @@
+import { useFocusVisible } from "@ark-ui/solid";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import Button_module from "./Button.module.jsx";
+const ArkButton = ark.button;
+function ButtonRoot(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'disabled',
+        'loading',
+        'onClick',
+        'onClickCapture',
+        'size',
+        'type',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'variant',
+        'aria-busy',
+        'aria-disabled'
+    ]);
+    const isDisabled = ()=>local.disabled || local.loading || true === local['aria-disabled'] || 'true' === local['aria-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    return <ArkButton asChild={local.asChild} {...others} type={local.asChild ? local.type : local.type ?? 'button'} disabled={local.asChild ? void 0 : isDisabled()} aria-busy={local.loading ? true : local['aria-busy']} aria-disabled={isDisabled() ? true : local['aria-disabled']} oncapture:click={handleClickCapture} onClick={local.onClick} data-scope={local['data-scope'] ?? 'button'} data-part={local['data-part'] ?? 'root'} data-slot={local['data-slot'] ?? 'button-root'} data-variant={local.variant ?? 'default'} data-size={local.size ?? 'md'} data-disabled={isDisabled() ? '' : void 0} data-focus-visible={focusVisible() ? '' : void 0} data-loading={local.loading ? '' : void 0} class={clsx(Button_module.root, local.class)}/>;
+}
+const Button = Object.assign(ButtonRoot, {
+    Root: ButtonRoot
+});
+export { Button };

package/dist/components/button/Button.module.js

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

package/dist/components/button/Button.module.jsx

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

package/dist/components/button/Button_module.css

@@ -0,0 +1,219 @@
+@layer moduix.components {
+  .root-RR_712 {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-button-content-gap, var(--moduix-spacing-2));
+    border: var(--moduix-button-border-width, var(--moduix-border-width-sm)) solid transparent;
+    border-radius: var(--moduix-button-radius, var(--moduix-radius-md));
+    color: var(--moduix-button-color, var(--moduix-color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--moduix-button-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-button-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-button-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--moduix-button-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-button-transition, var(--moduix-transition-default)),
+      color var(--moduix-button-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-button-transition, var(--moduix-transition-default)),
+      transform var(--moduix-button-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .root-RR_712:focus[data-focus-visible] {
+    outline: var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-button-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-button-focus-ring-offset, var(--moduix-button-border-width, var(--moduix-border-width-sm))) *
+          -1);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .root-RR_712:active:not([data-variant="link"]) {
+      transform: translateY(1px);
+    }
+  }
+
+  .root-RR_712[data-disabled] {
+    opacity: var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .root-RR_712[data-loading] {
+    cursor: progress;
+  }
+
+  .root-RR_712 > :where(svg) {
+    width: var(--moduix-button-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-button-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+  }
+
+  .root-RR_712[data-variant="default"] {
+    border-color: var(--moduix-button-default-border-color, var(--moduix-color-primary));
+    background-color: var(--moduix-button-default-bg, var(--moduix-color-primary));
+    color: var(--moduix-button-default-color, var(--moduix-color-primary-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="default"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-default-bg-hover, color-mix(in srgb,
+              var(--moduix-button-default-bg, var(--moduix-color-primary)) 88%,
+              black));
+    }
+  }
+
+  .root-RR_712[data-variant="outline"] {
+    border-color: var(--moduix-button-outline-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-button-outline-bg, var(--moduix-color-background));
+    color: var(--moduix-button-outline-color, var(--moduix-color-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="outline"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-outline-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-RR_712[data-variant="secondary"] {
+    border-color: var(--moduix-button-secondary-border-color, var(--moduix-color-secondary));
+    background-color: var(--moduix-button-secondary-bg, var(--moduix-color-secondary));
+    color: var(--moduix-button-secondary-color, var(--moduix-color-secondary-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="secondary"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-secondary-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-RR_712[data-variant="destructive"] {
+    border-color: var(--moduix-button-destructive-border-color, var(--moduix-color-destructive));
+    background-color: var(--moduix-button-destructive-bg, var(--moduix-color-destructive));
+    color: var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="destructive"]:not([data-disabled]):hover {
+      filter: brightness(var(--moduix-button-destructive-hover-brightness, .96));
+    }
+  }
+
+  .root-RR_712[data-variant="destructive-outline"] {
+    border-color: var(--moduix-button-destructive-outline-border-color, var(--moduix-color-destructive));
+    background-color: var(--moduix-button-destructive-outline-bg, var(--moduix-color-background));
+    color: var(--moduix-button-destructive-outline-color, var(--moduix-color-destructive));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="destructive-outline"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-destructive-outline-bg-hover, var(--moduix-color-destructive));
+      color: var(--moduix-button-destructive-outline-color-hover, var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground)));
+    }
+  }
+
+  .root-RR_712[data-variant="ghost"] {
+    border-color: var(--moduix-button-ghost-border-color, transparent);
+    background-color: var(--moduix-button-ghost-bg, transparent);
+    color: var(--moduix-button-ghost-color, var(--moduix-color-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="ghost"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-ghost-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-RR_712[data-variant="link"] {
+    color: var(--moduix-button-link-color, var(--moduix-color-primary));
+    -webkit-text-decoration: var(--moduix-button-link-text-decoration, underline);
+    text-decoration: var(--moduix-button-link-text-decoration, underline);
+    text-underline-offset: var(--moduix-button-link-underline-offset, .25em);
+    background-color: #0000;
+    border-color: #0000;
+    padding-inline: 0;
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="link"]:not([data-disabled]):hover {
+      color: var(--moduix-button-link-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .root-RR_712[data-size="xs"] {
+    min-height: var(--moduix-button-size-xs, var(--moduix-size-xs));
+    padding-block: var(--moduix-button-padding-y-xs, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-button-padding-x-xs, var(--moduix-spacing-2-5));
+    font-size: var(--moduix-button-font-size-xs, var(--moduix-text-xs));
+    line-height: var(--moduix-button-line-height-xs, var(--moduix-line-height-text-xs));
+  }
+
+  .root-RR_712[data-size="sm"] {
+    min-height: var(--moduix-button-size-sm, var(--moduix-size-sm));
+    padding-block: var(--moduix-button-padding-y-sm, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-button-padding-x-sm, var(--moduix-spacing-3));
+    font-size: var(--moduix-button-font-size-sm, var(--moduix-text-sm));
+    line-height: var(--moduix-button-line-height-sm, var(--moduix-line-height-text-sm));
+  }
+
+  .root-RR_712[data-size="md"] {
+    min-height: var(--moduix-button-size-md, var(--moduix-size-md));
+    padding-block: var(--moduix-button-padding-y-md, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-button-padding-x-md, var(--moduix-spacing-4));
+    font-size: var(--moduix-button-font-size-md, var(--moduix-text-sm));
+    line-height: var(--moduix-button-line-height-md, var(--moduix-line-height-text-sm));
+  }
+
+  .root-RR_712[data-size="lg"] {
+    min-height: var(--moduix-button-size-lg, var(--moduix-size-lg));
+    padding-block: var(--moduix-button-padding-y-lg, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-button-padding-x-lg, var(--moduix-spacing-5));
+    font-size: var(--moduix-button-font-size-lg, var(--moduix-text-md));
+    line-height: var(--moduix-button-line-height-lg, var(--moduix-line-height-text-md));
+  }
+
+  .root-RR_712[data-size="xl"] {
+    min-height: var(--moduix-button-size-xl, var(--moduix-size-xl));
+    padding-block: var(--moduix-button-padding-y-xl, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-button-padding-x-xl, var(--moduix-spacing-6));
+    font-size: var(--moduix-button-font-size-xl, var(--moduix-text-lg));
+    line-height: var(--moduix-button-line-height-xl, var(--moduix-line-height-text-lg));
+  }
+
+  .root-RR_712[data-size="icon-sm"], .root-RR_712[data-size="icon-md"], .root-RR_712[data-size="icon-lg"] {
+    gap: 0;
+    padding: 0;
+  }
+
+  .root-RR_712[data-size="icon-sm"] {
+    width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+    min-width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+    height: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+  }
+
+  .root-RR_712[data-size="icon-md"] {
+    width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+    min-width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+    height: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+  }
+
+  .root-RR_712[data-size="icon-lg"] {
+    width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+    min-width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+    height: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+  }
+
+  .root-RR_712[data-variant="link"] {
+    min-height: 0;
+    padding-block: 0;
+  }
+}
+

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

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

package/dist/components/button/index.js

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

package/dist/components/button/index.jsx

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

package/dist/components/card/Card.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type CardRootProps = HTMLArkProps<'div'> & {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'elevated' | 'outline' | 'subtle';
+};
+declare function CardRoot(props: CardRootProps): import("solid-js").JSX.Element;
+declare function CardHeader(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardBody(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardMedia(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardBackground(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardFooter(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardTitle(props: HTMLArkProps<'h3'>): import("solid-js").JSX.Element;
+declare function CardDescription(props: HTMLArkProps<'p'>): import("solid-js").JSX.Element;
+declare function CardAction(props: HTMLArkProps<'div'>): import("solid-js").JSX.Element;
+declare function CardLink(props: HTMLArkProps<'a'>): import("solid-js").JSX.Element;
+declare const Card: typeof CardRoot & {
+    Root: typeof CardRoot;
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Media: typeof CardMedia;
+    Background: typeof CardBackground;
+    Footer: typeof CardFooter;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Action: typeof CardAction;
+    Link: typeof CardLink;
+};
+export { Card };