@moduix/solid 1.0.0

package/dist/components/clipboard/Clipboard.js

@@ -0,0 +1,146 @@
+import { className, createComponent, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { Clipboard, useClipboard, useClipboardContext } from "@ark-ui/solid/clipboard";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CheckIcon, CopyIcon } from "../../internal/icons/ui/Icons.js";
+import Clipboard_module from "./Clipboard.module.js";
+var _tmpl$ = /*#__PURE__*/ template("<span aria-hidden=true data-slot=clipboard-indicator-copied-icon>"), _tmpl$2 = /*#__PURE__*/ template("<span aria-hidden=true data-slot=clipboard-indicator-idle-icon>");
+function ClipboardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Root, mergeProps({
+        "data-slot": "clipboard-root",
+        get ["class"] () {
+            return clsx(Clipboard_module.root, local.class);
+        }
+    }, others));
+}
+function ClipboardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.RootProvider, mergeProps({
+        "data-slot": "clipboard-root-provider",
+        get ["class"] () {
+            return clsx(Clipboard_module.root, local.class);
+        }
+    }, others));
+}
+function ClipboardLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Label, mergeProps({
+        "data-slot": "clipboard-label",
+        get ["class"] () {
+            return clsx(Clipboard_module.label, local.class);
+        }
+    }, others));
+}
+function ClipboardControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Control, mergeProps({
+        "data-slot": "clipboard-control",
+        get ["class"] () {
+            return clsx(Clipboard_module.control, local.class);
+        }
+    }, others));
+}
+function ClipboardInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Input, mergeProps({
+        "data-slot": "clipboard-input",
+        get ["class"] () {
+            return clsx(Clipboard_module.input, local.class);
+        }
+    }, others));
+}
+function ClipboardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.Trigger, mergeProps({
+        "data-slot": "clipboard-trigger",
+        get ["class"] () {
+            return clsx(Clipboard_module.trigger, local.class);
+        }
+    }, others));
+}
+function ClipboardIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Clipboard.Indicator, mergeProps({
+        "data-slot": "clipboard-indicator",
+        get ["class"] () {
+            return clsx(Clipboard_module.indicator, local.class);
+        },
+        get copied () {
+            return local.copied ?? (()=>{
+                var _el$ = _tmpl$();
+                insert(_el$, createComponent(CheckIcon, {}));
+                effect(()=>className(_el$, Clipboard_module.icon));
+                return _el$;
+            })();
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? (()=>{
+                var _el$2 = _tmpl$2();
+                insert(_el$2, createComponent(CopyIcon, {}));
+                effect(()=>className(_el$2, Clipboard_module.icon));
+                return _el$2;
+            })();
+        }
+    }));
+}
+function ClipboardValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Clipboard.ValueText, mergeProps({
+        "data-slot": "clipboard-value-text",
+        get ["class"] () {
+            return clsx(Clipboard_module.valueText, local.class);
+        }
+    }, others));
+}
+function ClipboardCopyText(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ClipboardIndicator, mergeProps({
+        "data-slot": "clipboard-copy-text",
+        get copied () {
+            return memo(()=>void 0 === local.copied)() ? 'Copied' : local.copied;
+        }
+    }, others, {
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? 'Copy' : resolvedChildren();
+        }
+    }));
+}
+const Clipboard_Clipboard = Object.assign(ClipboardRoot, {
+    Root: ClipboardRoot,
+    RootProvider: ClipboardRootProvider,
+    Context: Clipboard.Context,
+    Label: ClipboardLabel,
+    Control: ClipboardControl,
+    Input: ClipboardInput,
+    Trigger: ClipboardTrigger,
+    Indicator: ClipboardIndicator,
+    CopyText: ClipboardCopyText,
+    ValueText: ClipboardValueText,
+    useClipboard: useClipboard
+});
+export { Clipboard_Clipboard as Clipboard, useClipboard, useClipboardContext };

package/dist/components/clipboard/Clipboard.jsx

@@ -0,0 +1,86 @@
+import { Clipboard, useClipboard, useClipboardContext } from "@ark-ui/solid/clipboard";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CheckIcon, CopyIcon } from "../../internal/icons/ui/Icons.jsx";
+import Clipboard_module from "./Clipboard.module.jsx";
+function ClipboardRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Root data-slot="clipboard-root" class={clsx(Clipboard_module.root, local.class)} {...others}/>;
+}
+function ClipboardRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.RootProvider data-slot="clipboard-root-provider" class={clsx(Clipboard_module.root, local.class)} {...others}/>;
+}
+function ClipboardLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Label data-slot="clipboard-label" class={clsx(Clipboard_module.label, local.class)} {...others}/>;
+}
+function ClipboardControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Control data-slot="clipboard-control" class={clsx(Clipboard_module.control, local.class)} {...others}/>;
+}
+function ClipboardInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Input data-slot="clipboard-input" class={clsx(Clipboard_module.input, local.class)} {...others}/>;
+}
+function ClipboardTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.Trigger data-slot="clipboard-trigger" class={clsx(Clipboard_module.trigger, local.class)} {...others}/>;
+}
+function ClipboardIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <Clipboard.Indicator data-slot="clipboard-indicator" class={clsx(Clipboard_module.indicator, local.class)} copied={local.copied ?? <span aria-hidden="true" data-slot="clipboard-indicator-copied-icon" class={Clipboard_module.icon}>
+            <CheckIcon/>
+          </span>} {...others}>
+      {resolvedChildren() ?? <span aria-hidden="true" data-slot="clipboard-indicator-idle-icon" class={Clipboard_module.icon}>
+          <CopyIcon/>
+        </span>}
+    </Clipboard.Indicator>;
+}
+function ClipboardValueText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Clipboard.ValueText data-slot="clipboard-value-text" class={clsx(Clipboard_module.valueText, local.class)} {...others}/>;
+}
+function ClipboardCopyText(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'copied'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ClipboardIndicator data-slot="clipboard-copy-text" copied={void 0 === local.copied ? 'Copied' : local.copied} {...others}>
+      {void 0 === resolvedChildren() ? 'Copy' : resolvedChildren()}
+    </ClipboardIndicator>;
+}
+const Clipboard_Clipboard = Object.assign(ClipboardRoot, {
+    Root: ClipboardRoot,
+    RootProvider: ClipboardRootProvider,
+    Context: Clipboard.Context,
+    Label: ClipboardLabel,
+    Control: ClipboardControl,
+    Input: ClipboardInput,
+    Trigger: ClipboardTrigger,
+    Indicator: ClipboardIndicator,
+    CopyText: ClipboardCopyText,
+    ValueText: ClipboardValueText,
+    useClipboard: useClipboard
+});
+export { Clipboard_Clipboard as Clipboard, useClipboard, useClipboardContext };

package/dist/components/clipboard/Clipboard.module.js

@@ -0,0 +1,12 @@
+import "./Clipboard_module.css";
+const Clipboard_module = {
+    root: "root-igDKa1",
+    label: "label-HTlyWS",
+    control: "control-up5DGr",
+    input: "input-POor1w",
+    trigger: "trigger-dngdJp",
+    indicator: "indicator-Btp5UV",
+    icon: "icon-gfTIa2",
+    valueText: "valueText-fWokSL"
+};
+export default Clipboard_module;

package/dist/components/clipboard/Clipboard.module.jsx

@@ -0,0 +1,12 @@
+import "./Clipboard_module.css";
+const Clipboard_module = {
+    root: "root-igDKa1",
+    label: "label-HTlyWS",
+    control: "control-up5DGr",
+    input: "input-POor1w",
+    trigger: "trigger-dngdJp",
+    indicator: "indicator-Btp5UV",
+    icon: "icon-gfTIa2",
+    valueText: "valueText-fWokSL"
+};
+export default Clipboard_module;

package/dist/components/clipboard/Clipboard_module.css

@@ -0,0 +1,168 @@
+@layer moduix.components {
+  .root-igDKa1 {
+    gap: var(--moduix-clipboard-gap, var(--moduix-spacing-1-5));
+    width: var(--moduix-clipboard-width, 100%);
+    max-width: var(--moduix-clipboard-max-width, none);
+    color: var(--moduix-clipboard-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .label-HTlyWS {
+    color: var(--moduix-clipboard-label-color, currentColor);
+    font-size: var(--moduix-clipboard-label-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-clipboard-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-clipboard-label-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .control-up5DGr {
+    align-items: center;
+    gap: var(--moduix-clipboard-control-gap, var(--moduix-spacing-2));
+    width: 100%;
+    display: flex;
+  }
+
+  .input-POor1w {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--moduix-clipboard-input-height, var(--moduix-input-height-md, var(--moduix-size-md)));
+    border: var(--moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-clipboard-input-border-color, var(--moduix-input-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-clipboard-input-radius, var(--moduix-input-radius, var(--moduix-radius-md)));
+    padding-block: var(--moduix-clipboard-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-clipboard-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3-5)));
+    background-color: var(--moduix-clipboard-input-bg, var(--moduix-input-bg, var(--moduix-color-background)));
+    color: var(--moduix-clipboard-input-color, var(--moduix-input-color, var(--moduix-color-foreground)));
+    font: inherit;
+    font-size: var(--moduix-clipboard-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md)));
+    line-height: var(--moduix-clipboard-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md)));
+    outline: var(--moduix-clipboard-input-focus-ring-width, var(--moduix-input-focus-ring-width, var(--moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))))
+      solid transparent;
+    outline-offset: calc(var(--moduix-clipboard-input-focus-ring-offset, var(--moduix-clipboard-input-border-width, var(--moduix-input-border-width, var(--moduix-border-width-sm)))) *
+        -1);
+    transition: border-color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      outline-color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      background-color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      color
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-clipboard-transition, var(--moduix-input-transition, var(--moduix-transition-default)));
+    margin: 0;
+  }
+
+  .input-POor1w::placeholder {
+    color: var(--moduix-clipboard-input-placeholder-color, var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground)));
+  }
+
+  .input-POor1w:focus-visible {
+    outline-color: var(--moduix-clipboard-input-focus-ring-color, var(--moduix-input-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .input-POor1w[data-readonly] {
+    background-color: var(--moduix-clipboard-input-readonly-bg, var(--moduix-input-readonly-bg, var(--moduix-clipboard-input-bg, var(--moduix-color-background))));
+    color: var(--moduix-clipboard-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-clipboard-input-color, var(--moduix-color-foreground))));
+  }
+
+  .input-POor1w:is(:disabled, [data-disabled]) {
+    pointer-events: none;
+    opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled)));
+  }
+
+  .trigger-dngdJp {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-clipboard-trigger-gap, var(--moduix-button-content-gap, var(--moduix-spacing-2)));
+    min-height: var(--moduix-clipboard-trigger-height, var(--moduix-button-size-md, var(--moduix-size-md)));
+    padding-inline: var(--moduix-clipboard-trigger-padding-x, var(--moduix-button-padding-x-md, var(--moduix-spacing-4)));
+    border: var(--moduix-clipboard-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-clipboard-trigger-border-color, var(--moduix-button-outline-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-clipboard-trigger-radius, var(--moduix-button-radius, var(--moduix-radius-md)));
+    background-color: var(--moduix-clipboard-trigger-bg, var(--moduix-button-outline-bg, var(--moduix-color-background)));
+    color: var(--moduix-clipboard-trigger-color, var(--moduix-button-outline-color, var(--moduix-color-foreground)));
+    appearance: none;
+    font: inherit;
+    font-size: var(--moduix-clipboard-trigger-font-size, var(--moduix-button-font-size, var(--moduix-text-sm)));
+    font-weight: var(--moduix-clipboard-trigger-font-weight, var(--moduix-button-font-weight, var(--moduix-weight-medium)));
+    line-height: var(--moduix-clipboard-trigger-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: border-color
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      background-color
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      color
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      opacity
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      box-shadow
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      transform
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)));
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  .trigger-dngdJp :where(svg) {
+    width: var(--moduix-clipboard-indicator-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+    height: var(--moduix-clipboard-indicator-size, var(--moduix-button-icon-size, var(--moduix-spacing-4)));
+    flex-shrink: 0;
+  }
+
+  @media (hover: hover) {
+    .trigger-dngdJp:hover:not(:disabled, [data-disabled]) {
+      background-color: var(--moduix-clipboard-trigger-bg-hover, var(--moduix-button-outline-bg-hover, var(--moduix-color-accent)));
+    }
+  }
+
+  .trigger-dngdJp:focus-visible {
+    outline: var(--moduix-clipboard-trigger-focus-ring-width, var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md))))
+        solid
+        var(--moduix-clipboard-trigger-focus-ring-color, var(--moduix-button-focus-ring-color, var(--moduix-color-ring)));
+    outline-offset: calc(var(--moduix-clipboard-trigger-focus-ring-offset, var(--moduix-clipboard-trigger-border-width, var(--moduix-button-border-width, var(--moduix-border-width-sm)))) *
+          -1);
+  }
+
+  .trigger-dngdJp:active:not(:disabled, [data-disabled]) {
+    opacity: .94;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .trigger-dngdJp:active:not(:disabled, [data-disabled]) {
+      transform: translateY(1px) scale(.985);
+    }
+  }
+
+  .trigger-dngdJp:is(:disabled, [data-disabled]) {
+    pointer-events: none;
+    opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled)));
+    cursor: default;
+  }
+
+  .indicator-Btp5UV, .icon-gfTIa2 {
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .valueText-fWokSL {
+    min-width: 0;
+    color: var(--moduix-clipboard-value-text-color, currentColor);
+    font-size: var(--moduix-clipboard-value-text-font-size, inherit);
+    font-weight: var(--moduix-clipboard-value-text-font-weight, inherit);
+    line-height: var(--moduix-clipboard-value-text-line-height, inherit);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+

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

@@ -0,0 +1 @@
+export { Clipboard, useClipboard, useClipboardContext } from './Clipboard.js';

package/dist/components/clipboard/index.js

@@ -0,0 +1 @@
+export { Clipboard, useClipboard, useClipboardContext } from "./Clipboard.js";

package/dist/components/clipboard/index.jsx

@@ -0,0 +1 @@
+export { Clipboard, useClipboard, useClipboardContext } from "./Clipboard.jsx";

package/dist/components/close-button/CloseButton.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type CloseButtonRootProps = HTMLArkProps<'button'> & {
+    'data-disabled'?: string;
+    'data-part'?: string;
+    'data-scope'?: string;
+    'data-slot'?: string;
+    onClickCapture?: (event: MouseEvent) => void;
+};
+declare function CloseButtonRoot(props: CloseButtonRootProps): JSX.Element;
+declare const CloseButton: typeof CloseButtonRoot & {
+    Root: typeof CloseButtonRoot;
+};
+export { CloseButton };

package/dist/components/close-button/CloseButton.js

@@ -0,0 +1,88 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CloseIcon } from "../../internal/icons/ui/Icons.js";
+import CloseButton_module from "./CloseButton.module.js";
+const ArkButton = ark.button;
+function CloseButtonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'aria-disabled',
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class',
+        'data-disabled',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'disabled',
+        'onClick',
+        'onClickCapture',
+        'type'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const isDisabled = ()=>local.disabled || true === local['aria-disabled'] || 'true' === local['aria-disabled'] || void 0 !== local['data-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    const handleClick = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClick?.(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 : local.disabled;
+        },
+        get ["data-scope"] () {
+            return local['data-scope'] ?? 'close-button';
+        },
+        get ["data-part"] () {
+            return local['data-part'] ?? 'root';
+        },
+        get ["data-slot"] () {
+            return local['data-slot'] ?? 'close-button-root';
+        },
+        get ["data-disabled"] () {
+            return local['data-disabled'] ?? (isDisabled() ? '' : void 0);
+        },
+        get ["class"] () {
+            return clsx(CloseButton_module.root, local.class);
+        },
+        get ["aria-disabled"] () {
+            return memo(()=>!!(local.asChild && local.disabled))() ? true : local['aria-disabled'];
+        },
+        get ["aria-label"] () {
+            return local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Close' : void 0);
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "oncapture:click": handleClickCapture,
+        onClick: handleClick,
+        get children () {
+            return memo(()=>!!local.asChild)() ? void 0 : resolvedChildren() || createComponent(CloseIcon, {});
+        }
+    }));
+}
+const CloseButton = Object.assign(CloseButtonRoot, {
+    Root: CloseButtonRoot
+});
+export { CloseButton };

package/dist/components/close-button/CloseButton.jsx

@@ -0,0 +1,49 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { children, splitProps } from "solid-js";
+import { CloseIcon } from "../../internal/icons/ui/Icons.jsx";
+import CloseButton_module from "./CloseButton.module.jsx";
+const ArkButton = ark.button;
+function CloseButtonRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'aria-disabled',
+        'aria-label',
+        'aria-labelledby',
+        'children',
+        'class',
+        'data-disabled',
+        'data-part',
+        'data-scope',
+        'data-slot',
+        'disabled',
+        'onClick',
+        'onClickCapture',
+        'type'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const isDisabled = ()=>local.disabled || true === local['aria-disabled'] || 'true' === local['aria-disabled'] || void 0 !== local['data-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    const handleClick = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClick?.(event);
+    };
+    return <ArkButton asChild={local.asChild} {...others} type={local.asChild ? local.type : local.type ?? 'button'} disabled={local.asChild ? void 0 : local.disabled} data-scope={local['data-scope'] ?? 'close-button'} data-part={local['data-part'] ?? 'root'} data-slot={local['data-slot'] ?? 'close-button-root'} data-disabled={local['data-disabled'] ?? (isDisabled() ? '' : void 0)} class={clsx(CloseButton_module.root, local.class)} aria-disabled={local.asChild && local.disabled ? true : local['aria-disabled']} aria-label={local['aria-label'] ?? (null == local['aria-labelledby'] ? 'Close' : void 0)} aria-labelledby={local['aria-labelledby']} oncapture:click={handleClickCapture} onClick={handleClick}>
+      {local.asChild ? void 0 : resolvedChildren() || <CloseIcon/>}
+    </ArkButton>;
+}
+const CloseButton = Object.assign(CloseButtonRoot, {
+    Root: CloseButtonRoot
+});
+export { CloseButton };

package/dist/components/close-button/CloseButton.module.js

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

package/dist/components/close-button/CloseButton.module.jsx

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

package/dist/components/close-button/CloseButton_module.css

@@ -0,0 +1,55 @@
+@layer moduix.components {
+  .root-_7JLUV {
+    box-sizing: border-box;
+    width: var(--moduix-close-button-size, var(--moduix-spacing-7));
+    height: var(--moduix-close-button-size, var(--moduix-spacing-7));
+    background-color: var(--moduix-close-button-bg, transparent);
+    border-radius: var(--moduix-close-button-radius, var(--moduix-radius-sm));
+    color: var(--moduix-close-button-color, var(--moduix-color-muted-foreground));
+    appearance: none;
+    font: inherit;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-close-button-transition, var(--moduix-transition-default)),
+      color var(--moduix-close-button-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-close-button-transition, var(--moduix-transition-default));
+    border: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .root-_7JLUV > svg {
+    width: var(--moduix-close-button-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-close-button-icon-size, var(--moduix-spacing-3));
+    flex-shrink: 0;
+  }
+
+  @media (hover: hover) {
+    .root-_7JLUV:hover:not([data-disabled]) {
+      background-color: var(--moduix-close-button-bg-hover, var(--moduix-color-muted));
+      color: var(--moduix-close-button-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .root-_7JLUV:focus-visible {
+    outline: var(--moduix-close-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-close-button-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-close-button-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .root-_7JLUV:active:not([data-disabled]) {
+    opacity: .94;
+  }
+
+  .root-_7JLUV[data-disabled] {
+    cursor: default;
+    pointer-events: none;
+    opacity: var(--moduix-close-button-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+}
+

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

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

package/dist/components/close-button/index.js

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

package/dist/components/close-button/index.jsx

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