@moduix/react 1.1.0

package/dist/components/carousel/Carousel.module.js

@@ -0,0 +1,18 @@
+import './Carousel.css';
+//#region src/components/carousel/Carousel.module.css
+var Carousel_module_default = {
+	"autoplayIndicator": "m9QXca_autoplayIndicator",
+	"autoplayTrigger": "m9QXca_autoplayTrigger",
+	"control": "m9QXca_control",
+	"defaultIcon": "m9QXca_defaultIcon",
+	"indicator": "m9QXca_indicator",
+	"indicatorGroup": "m9QXca_indicatorGroup",
+	"item": "m9QXca_item",
+	"itemGroup": "m9QXca_itemGroup",
+	"nextTrigger": "m9QXca_nextTrigger",
+	"prevTrigger": "m9QXca_prevTrigger",
+	"progressText": "m9QXca_progressText",
+	"root": "m9QXca_root"
+};
+//#endregion
+export { Carousel_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Carousel } from "./Carousel.js";
+export { Carousel };

package/dist/components/checkbox/Checkbox.css

@@ -0,0 +1,135 @@
+@layer ui.components {
+  .xohwwq_root {
+    align-items: center;
+    gap: var(--checkbox-gap, var(--spacing-2));
+    vertical-align: middle;
+    color: var(--checkbox-label-color, var(--color-foreground));
+    cursor: pointer;
+    display: inline-flex;
+
+    &[data-disabled], &[data-readonly] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      opacity: var(--checkbox-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .xohwwq_control {
+    box-sizing: border-box;
+    width: var(--_checkbox-size, 1.25rem);
+    height: var(--_checkbox-size, 1.25rem);
+    border: var(--checkbox-border-width, var(--border-width-sm)) solid
+      var(--checkbox-border-color, var(--color-border));
+    border-radius: var(--checkbox-radius, var(--radius-xs));
+    background-color: var(--checkbox-bg, var(--color-background));
+    color: var(--checkbox-color, var(--color-primary-foreground));
+    user-select: none;
+    transition: background-color var(--checkbox-transition, var(--transition-default)),
+      border-color var(--checkbox-transition, var(--transition-default)),
+      color var(--checkbox-transition, var(--transition-default)),
+      opacity var(--checkbox-transition, var(--transition-default));
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+
+    &[data-state="checked"], &[data-state="indeterminate"] {
+      border-color: var(--checkbox-border-color-checked, var(--color-primary));
+      background-color: var(--checkbox-bg-checked, var(--color-primary));
+    }
+
+    &[data-focus-visible] {
+      outline: var(--checkbox-focus-ring-width, var(--border-width-sm)) solid
+        var(--checkbox-focus-ring-color, var(--color-ring));
+      outline-offset: var(--checkbox-focus-ring-offset, var(--border-width-sm));
+    }
+
+    &[data-invalid] {
+      border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
+      color: var(--checkbox-color-invalid, var(--color-primary-foreground));
+
+      &[data-state="checked"], &[data-state="indeterminate"] {
+        border-color: var(--checkbox-border-color-invalid, var(--color-destructive));
+        background-color: var(--checkbox-bg-invalid, var(--color-destructive));
+      }
+
+      &[data-focus-visible] {
+        outline-color: var(--checkbox-border-color-invalid, var(--color-destructive));
+      }
+    }
+
+    @media (hover: hover) {
+      &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
+        background-color: var(--checkbox-bg-hover, var(--color-accent));
+      }
+    }
+  }
+
+  .xohwwq_root[data-size="xs"] .xohwwq_control {
+    --_checkbox-size: var(--checkbox-size-xs, .875rem);
+    --_checkbox-icon-size: var(--checkbox-icon-size-xs, .5rem);
+  }
+
+  .xohwwq_root[data-size="sm"] .xohwwq_control {
+    --_checkbox-size: var(--checkbox-size-sm, 1rem);
+    --_checkbox-icon-size: var(--checkbox-icon-size-sm, .625rem);
+  }
+
+  .xohwwq_root[data-size="md"] .xohwwq_control {
+    --_checkbox-size: var(--checkbox-size-md, 1.25rem);
+    --_checkbox-icon-size: var(--checkbox-icon-size-md, .75rem);
+  }
+
+  .xohwwq_root[data-size="lg"] .xohwwq_control {
+    --_checkbox-size: var(--checkbox-size-lg, 1.5rem);
+    --_checkbox-icon-size: var(--checkbox-icon-size-lg, .875rem);
+  }
+
+  .xohwwq_root[data-size="xl"] .xohwwq_control {
+    --_checkbox-size: var(--checkbox-size-xl, 1.75rem);
+    --_checkbox-icon-size: var(--checkbox-icon-size-xl, 1rem);
+  }
+
+  .xohwwq_indicator {
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .xohwwq_icon {
+    width: var(--_checkbox-icon-size, .75rem);
+    height: var(--_checkbox-icon-size, .75rem);
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .xohwwq_label {
+    color: var(--checkbox-label-color, var(--color-foreground));
+    font-size: var(--checkbox-label-font-size, var(--text-sm));
+    font-weight: var(--checkbox-label-font-weight, var(--weight-medium));
+    line-height: var(--checkbox-label-line-height, var(--line-height-text-sm));
+  }
+
+  .xohwwq_group {
+    gap: var(--checkbox-group-gap, var(--spacing-2));
+    color: var(--checkbox-group-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+import { Checkbox } from "@ark-ui/react/checkbox";
+
+//#region src/components/checkbox/Checkbox.d.ts
+type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type RootProps = ComponentProps<typeof Checkbox.Root> & {
+  size?: CheckboxSize;
+};
+type RootProviderProps = ComponentProps<typeof Checkbox.RootProvider> & {
+  size?: CheckboxSize;
+};
+declare const Checkbox$1: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<RootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Checkbox.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<Checkbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Group: import("react").ForwardRefExoticComponent<Omit<Checkbox.GroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,84 @@
+import { CheckIcon, IndeterminateIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Checkbox_module_default from "./Checkbox.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Checkbox } from "@ark-ui/react/checkbox";
+//#region src/components/checkbox/Checkbox.tsx
+const CheckboxRoot = forwardRef(function CheckboxRoot({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		ref,
+		"data-slot": "checkbox-root",
+		"data-size": size,
+		className: clsx(Checkbox_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const CheckboxRootProvider = forwardRef(function CheckboxRootProvider({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.RootProvider, {
+		ref,
+		"data-slot": "checkbox-root-provider",
+		"data-size": size,
+		className: clsx(Checkbox_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const CheckboxControl = forwardRef(function CheckboxControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Control, {
+		ref,
+		"data-slot": "checkbox-control",
+		className: clsx(Checkbox_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const CheckboxIndicator = forwardRef(function CheckboxIndicator({ className, children, indeterminate, ...props }, ref) {
+	const slot = indeterminate ? "checkbox-indicator-indeterminate-icon" : "checkbox-indicator-checked-icon";
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		ref,
+		"data-slot": "checkbox-indicator",
+		className: clsx(Checkbox_module_default.indicator, normalizeClassName(className)),
+		indeterminate,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": slot,
+			className: Checkbox_module_default.icon,
+			children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+});
+const CheckboxHiddenInput = forwardRef(function CheckboxHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.HiddenInput, {
+		ref,
+		"data-slot": "checkbox-hidden-input",
+		...props
+	});
+});
+const CheckboxLabel = forwardRef(function CheckboxLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Label, {
+		ref,
+		"data-slot": "checkbox-label",
+		className: clsx(Checkbox_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const CheckboxGroup = forwardRef(function CheckboxGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Group, {
+		ref,
+		"data-slot": "checkbox-group",
+		className: clsx(Checkbox_module_default.group, normalizeClassName(className)),
+		...props
+	});
+});
+const Checkbox$1 = Object.assign(CheckboxRoot, {
+	Root: CheckboxRoot,
+	RootProvider: CheckboxRootProvider,
+	Control: CheckboxControl,
+	Indicator: CheckboxIndicator,
+	HiddenInput: CheckboxHiddenInput,
+	Label: CheckboxLabel,
+	Group: CheckboxGroup
+});
+//#endregion
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/Checkbox.module.js

@@ -0,0 +1,12 @@
+import './Checkbox.css';
+//#region src/components/checkbox/Checkbox.module.css
+var Checkbox_module_default = {
+	"control": "xohwwq_control",
+	"group": "xohwwq_group",
+	"icon": "xohwwq_icon",
+	"indicator": "xohwwq_indicator",
+	"label": "xohwwq_label",
+	"root": "xohwwq_root"
+};
+//#endregion
+export { Checkbox_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Checkbox } from "./Checkbox.js";
+export { Checkbox };

package/dist/components/clipboard/Clipboard.css

@@ -0,0 +1,145 @@
+@layer ui.components {
+  .BmLivq_root {
+    gap: var(--clipboard-gap, .375rem);
+    width: var(--clipboard-width, 100%);
+    max-width: var(--clipboard-max-width, 20rem);
+    color: var(--clipboard-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .BmLivq_label {
+    color: var(--clipboard-label-color, currentColor);
+    font-size: var(--clipboard-label-font-size, var(--text-sm));
+    font-weight: var(--clipboard-label-font-weight, var(--weight-medium));
+    line-height: var(--clipboard-label-line-height, var(--line-height-text-sm));
+  }
+
+  .BmLivq_control {
+    align-items: center;
+    gap: var(--clipboard-control-gap, var(--spacing-2));
+    width: 100%;
+    display: flex;
+  }
+
+  .BmLivq_input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--clipboard-input-height, var(--input-height-md, var(--size-lg)));
+    border: var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))
+      solid var(--clipboard-input-border-color, var(--input-border-color, var(--color-border)));
+    border-radius: var(--clipboard-input-radius, var(--input-radius, var(--radius-md)));
+    padding-block: var(--clipboard-input-padding-y, var(--input-padding-y-md, .5rem));
+    padding-inline: var(--clipboard-input-padding-x, var(--input-padding-x-md, .875rem));
+    background-color: var(--clipboard-input-bg, var(--input-bg, var(--color-background)));
+    color: var(--clipboard-input-color, var(--input-color, var(--color-foreground)));
+    font: inherit;
+    font-size: var(--clipboard-input-font-size, var(--input-font-size-md, var(--text-md)));
+    line-height: var(--clipboard-input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
+    outline: var(--clipboard-input-focus-ring-width, var(--input-focus-ring-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--clipboard-input-focus-ring-offset, var(--clipboard-input-border-width, var(--input-border-width, var(--border-width-sm)))) *
+        -1);
+    transition: border-color var(--clipboard-transition, var(--input-transition, var(--transition-default))),
+      outline-color var(--clipboard-transition, var(--input-transition, var(--transition-default))),
+      background-color
+        var(--clipboard-transition, var(--input-transition, var(--transition-default))),
+      color var(--clipboard-transition, var(--input-transition, var(--transition-default))),
+      opacity var(--clipboard-transition, var(--input-transition, var(--transition-default)));
+    margin: 0;
+
+    &::placeholder {
+      color: var(--clipboard-input-placeholder-color, var(--input-placeholder-color, var(--color-muted-foreground)));
+    }
+
+    &:focus-visible {
+      outline-color: var(--clipboard-input-focus-ring-color, var(--input-focus-ring-color, var(--color-ring)));
+    }
+
+    &[data-readonly] {
+      background-color: var(--clipboard-input-readonly-bg, var(--input-readonly-bg, var(--clipboard-input-bg, var(--color-background))));
+      color: var(--clipboard-input-readonly-color, var(--input-readonly-color, var(--clipboard-input-color, var(--color-foreground))));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: var(--clipboard-disabled-opacity, var(--input-disabled-opacity, var(--opacity-disabled)));
+    }
+  }
+
+  .BmLivq_trigger {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--clipboard-trigger-gap, var(--button-content-gap, var(--spacing-2)));
+    min-height: var(--clipboard-trigger-height, var(--button-size-md, var(--size-lg)));
+    padding-inline: var(--clipboard-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    border: var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
+      solid
+      var(--clipboard-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
+    border-radius: var(--clipboard-trigger-radius, var(--button-radius, var(--radius-md)));
+    background-color: var(--clipboard-trigger-bg, var(--button-outline-bg, var(--color-background)));
+    color: var(--clipboard-trigger-color, var(--button-outline-color, var(--color-foreground)));
+    appearance: none;
+    font: inherit;
+    font-size: var(--clipboard-trigger-font-size, var(--button-font-size, var(--text-sm)));
+    font-weight: var(--clipboard-trigger-font-weight, var(--button-font-weight, var(--weight-medium)));
+    line-height: var(--clipboard-trigger-line-height, var(--button-line-height, var(--line-height-text-sm)));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: border-color var(--clipboard-transition, var(--button-transition, var(--transition-default))),
+      background-color
+        var(--clipboard-transition, var(--button-transition, var(--transition-default))),
+      color var(--clipboard-transition, var(--button-transition, var(--transition-default))),
+      opacity var(--clipboard-transition, var(--button-transition, var(--transition-default))),
+      box-shadow var(--clipboard-transition, var(--button-transition, var(--transition-default)));
+    flex-shrink: 0;
+    display: inline-flex;
+
+    & :where(svg) {
+      width: var(--clipboard-indicator-size, var(--button-icon-size, 1rem));
+      height: var(--clipboard-indicator-size, var(--button-icon-size, 1rem));
+      flex-shrink: 0;
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled, [data-disabled]) {
+        background-color: var(--clipboard-trigger-bg-hover, var(--button-outline-bg-hover, var(--color-accent)));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--clipboard-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+        solid
+        var(--clipboard-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
+      outline-offset: calc(var(--clipboard-trigger-focus-ring-offset, var(--clipboard-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *
+          -1);
+    }
+
+    &:is(:disabled, [data-disabled]) {
+      pointer-events: none;
+      opacity: var(--clipboard-disabled-opacity, var(--button-disabled-opacity, var(--opacity-disabled)));
+      cursor: default;
+    }
+  }
+
+  .BmLivq_indicator, .BmLivq_icon {
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .BmLivq_valueText {
+    min-width: 0;
+    color: var(--clipboard-value-text-color, currentColor);
+    font-size: var(--clipboard-value-text-font-size, inherit);
+    font-weight: var(--clipboard-value-text-font-weight, inherit);
+    line-height: var(--clipboard-value-text-line-height, inherit);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Clipboard } from "@ark-ui/react/clipboard";
+
+//#region src/components/clipboard/Clipboard.d.ts
+declare const Clipboard$1: import("react").ForwardRefExoticComponent<Omit<Clipboard.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Clipboard.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Clipboard.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<Clipboard.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<Clipboard.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<Clipboard.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Clipboard.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Clipboard.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ValueText: import("react").ForwardRefExoticComponent<Omit<Clipboard.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Clipboard$1 as Clipboard };

package/dist/components/clipboard/Clipboard.js

@@ -0,0 +1,96 @@
+import { CheckIcon, CopyIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Clipboard_module_default from "./Clipboard.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Clipboard } from "@ark-ui/react/clipboard";
+//#region src/components/clipboard/Clipboard.tsx
+const ClipboardRoot = forwardRef(function ClipboardRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.Root, {
+		ref,
+		"data-slot": "clipboard-root",
+		className: clsx(Clipboard_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ClipboardRootProvider = forwardRef(function ClipboardRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.RootProvider, {
+		ref,
+		"data-slot": "clipboard-root-provider",
+		className: clsx(Clipboard_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ClipboardLabel = forwardRef(function ClipboardLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.Label, {
+		ref,
+		"data-slot": "clipboard-label",
+		className: clsx(Clipboard_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const ClipboardControl = forwardRef(function ClipboardControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.Control, {
+		ref,
+		"data-slot": "clipboard-control",
+		className: clsx(Clipboard_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const ClipboardInput = forwardRef(function ClipboardInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.Input, {
+		ref,
+		"data-slot": "clipboard-input",
+		className: clsx(Clipboard_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const ClipboardTrigger = forwardRef(function ClipboardTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.Trigger, {
+		ref,
+		"data-slot": "clipboard-trigger",
+		className: clsx(Clipboard_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const ClipboardIndicator = forwardRef(function ClipboardIndicator({ className, children, copied, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.Indicator, {
+		ref,
+		"data-slot": "clipboard-indicator",
+		className: clsx(Clipboard_module_default.indicator, normalizeClassName(className)),
+		copied: copied ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "clipboard-indicator-copied-icon",
+			className: Clipboard_module_default.icon,
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "clipboard-indicator-idle-icon",
+			className: Clipboard_module_default.icon,
+			children: /* @__PURE__ */ jsx(CopyIcon, {})
+		})
+	});
+});
+const ClipboardValueText = forwardRef(function ClipboardValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Clipboard.ValueText, {
+		ref,
+		"data-slot": "clipboard-value-text",
+		className: clsx(Clipboard_module_default.valueText, normalizeClassName(className)),
+		...props
+	});
+});
+const Clipboard$1 = Object.assign(ClipboardRoot, {
+	Root: ClipboardRoot,
+	RootProvider: ClipboardRootProvider,
+	Label: ClipboardLabel,
+	Control: ClipboardControl,
+	Input: ClipboardInput,
+	Trigger: ClipboardTrigger,
+	Indicator: ClipboardIndicator,
+	ValueText: ClipboardValueText
+});
+//#endregion
+export { Clipboard$1 as Clipboard };

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

@@ -0,0 +1,14 @@
+import './Clipboard.css';
+//#region src/components/clipboard/Clipboard.module.css
+var Clipboard_module_default = {
+	"control": "BmLivq_control",
+	"icon": "BmLivq_icon",
+	"indicator": "BmLivq_indicator",
+	"input": "BmLivq_input",
+	"label": "BmLivq_label",
+	"root": "BmLivq_root",
+	"trigger": "BmLivq_trigger",
+	"valueText": "BmLivq_valueText"
+};
+//#endregion
+export { Clipboard_module_default as default };

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

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

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

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

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

@@ -0,0 +1,6 @@
+//#region src/components/close-button/CloseButton.d.ts
+declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { CloseButton };

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

@@ -0,0 +1,39 @@
+import { CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import CloseButton_module_default from "./CloseButton.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/close-button/CloseButton.tsx
+const CloseButtonRoot = forwardRef(function CloseButtonRoot({ asChild, className, children, disabled, onClick, type, "aria-disabled": ariaDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		asChild,
+		type: asChild ? type : type ?? "button",
+		disabled,
+		"data-scope": "close-button",
+		"data-part": "root",
+		"data-slot": "close-button-root",
+		"data-disabled": isDisabled ? "" : void 0,
+		className: clsx(CloseButton_module_default.root, normalizeClassName(className)),
+		"aria-disabled": ariaDisabled,
+		"aria-label": ariaLabel ?? (children == null && ariaLabelledBy == null ? "Close" : void 0),
+		"aria-labelledby": ariaLabelledBy,
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+});
+const CloseButton = Object.assign(CloseButtonRoot, { Root: CloseButtonRoot });
+//#endregion
+export { CloseButton };

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

@@ -0,0 +1,5 @@
+import './CloseButton.css';
+//#region src/components/close-button/CloseButton.module.css
+var CloseButton_module_default = { "root": "CLvmvW_root" };
+//#endregion
+export { CloseButton_module_default as default };