@moduix/react 2.1.0 → 2.2.4

package/dist/components/lightbox/Lightbox_module.css

@@ -0,0 +1,255 @@
+@layer moduix.components {
+  .trigger-CDcAJQ {
+    cursor: zoom-in;
+  }
+
+  .trigger-CDcAJQ:focus-visible {
+    outline: var(--moduix-lightbox-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-lightbox-trigger-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-lightbox-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .backdrop-nZRWDl {
+    z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
+    background-color: var(--moduix-lightbox-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
+    min-height: 100dvh;
+    -webkit-backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-lightbox-backdrop-blur, 4px)));
+    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-lightbox-backdrop-blur, 4px)));
+    position: fixed;
+    inset: 0;
+  }
+
+  .backdrop-nZRWDl[data-state="open"] {
+    animation: lightbox-backdrop-in-y5UjxI
+        var(--moduix-lightbox-backdrop-transition, var(--moduix-transition-default));
+  }
+
+  .backdrop-nZRWDl[data-state="closed"] {
+    animation: lightbox-backdrop-out-LsC2c8
+        var(--moduix-lightbox-backdrop-transition, var(--moduix-transition-default));
+  }
+
+  .positioner-T47Xit {
+    box-sizing: border-box;
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
+    overscroll-behavior: contain;
+    padding: var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4));
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+    overflow: auto;
+  }
+
+  .content-N4c6Zm {
+    box-sizing: border-box;
+    gap: var(--moduix-lightbox-content-gap, var(--moduix-spacing-3));
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: min(var(--moduix-lightbox-content-max-width, 80vw),
+      calc(100vw - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
+    max-height: min(var(--moduix-lightbox-content-max-height, 80dvh),
+      calc(100dvh - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
+    background: none;
+    border: 0;
+    outline: 0;
+    display: grid;
+    position: relative;
+  }
+
+  .content-N4c6Zm[data-state="open"] {
+    animation: lightbox-content-in-udHk7o
+        var(--moduix-lightbox-transition, var(--moduix-popup-motion-duration, .22s) var(--moduix-popup-motion-easing, ease));
+  }
+
+  .content-N4c6Zm[data-state="closed"] {
+    animation: lightbox-content-out-ZyLTc7
+        var(--moduix-lightbox-transition, var(--moduix-popup-motion-duration, .22s) var(--moduix-popup-motion-easing, ease));
+  }
+
+  .title-nSprhy {
+    color: var(--moduix-lightbox-title-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-lightbox-title-font-size, var(--moduix-text-md));
+    font-weight: var(--moduix-lightbox-title-font-weight, var(--moduix-weight-semibold));
+    line-height: var(--moduix-lightbox-title-line-height, var(--moduix-line-height-text-md));
+    margin: 0;
+  }
+
+  .description-S7ZYRT {
+    color: var(--moduix-lightbox-description-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-lightbox-description-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-lightbox-description-line-height, var(--moduix-line-height-text-sm));
+    margin: 0;
+  }
+
+  .header-Lx40fF {
+    gap: var(--moduix-lightbox-header-gap, var(--moduix-spacing-1));
+    display: grid;
+  }
+
+  .body-M8rV1J {
+    gap: var(--moduix-lightbox-body-gap, var(--moduix-spacing-3));
+    display: grid;
+  }
+
+  .footer-ZmOqXP {
+    align-items: center;
+    justify-content: var(--moduix-lightbox-footer-justify, flex-end);
+    gap: var(--moduix-lightbox-footer-gap, var(--moduix-spacing-2));
+    color: var(--moduix-lightbox-footer-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-lightbox-footer-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-lightbox-footer-line-height, var(--moduix-line-height-text-sm));
+    display: flex;
+  }
+
+  .image-P32jHl {
+    max-width: min(var(--moduix-lightbox-media-max-width, 80vw), 100%);
+    max-height: min(var(--moduix-lightbox-media-max-height, 80dvh), 100%);
+    object-fit: contain;
+    border-radius: var(--moduix-lightbox-media-radius, var(--moduix-radius-md));
+    box-shadow: var(--moduix-lightbox-media-shadow, var(--moduix-shadow-lg));
+    -webkit-user-select: none;
+    user-select: none;
+    display: block;
+  }
+
+  .image-P32jHl[data-close-on-click] {
+    cursor: zoom-out;
+  }
+
+  .gallery-d_JY9F {
+    --moduix-carousel-gap: var(--moduix-lightbox-gallery-gap, var(--moduix-spacing-4));
+    width: auto;
+    max-width: min(var(--moduix-lightbox-gallery-max-width, 72rem),
+      calc(100vw - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
+    justify-self: center;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-control"] {
+    align-items: center;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-item-group"] {
+    aspect-ratio: var(--moduix-lightbox-gallery-aspect-ratio, 16 / 10);
+    max-height: min(var(--moduix-lightbox-gallery-track-max-height, 68dvh),
+        var(--moduix-lightbox-media-max-height, 80dvh));
+    background: var(--moduix-lightbox-gallery-track-bg, color-mix(in oklab, black 88%, var(--moduix-color-background) 12%));
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-item"] {
+    place-items: center;
+    height: 100%;
+    display: grid;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-item"] img, .gallery-d_JY9F [data-slot="carousel-item"] video {
+    object-fit: contain;
+    border-radius: var(--moduix-lightbox-media-radius, var(--moduix-radius-md));
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-indicator-group"] {
+    flex-wrap: wrap;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: 100%;
+    margin-inline: auto;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-indicator"]:has(img) {
+    width: var(--moduix-lightbox-gallery-thumbnail-width, 5rem);
+    height: var(--moduix-lightbox-gallery-thumbnail-height, var(--moduix-size-xl));
+    border: var(--moduix-border-width-sm) solid transparent;
+    border-radius: var(--moduix-lightbox-gallery-thumbnail-radius, var(--moduix-radius-md));
+    opacity: var(--moduix-lightbox-gallery-thumbnail-opacity, .65);
+    transition: border-color var(--moduix-transition-fast),
+        opacity var(--moduix-transition-fast),
+        transform var(--moduix-transition-fast);
+    background: none;
+    overflow: hidden;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-indicator"]:has(img):hover {
+    opacity: var(--moduix-lightbox-gallery-thumbnail-opacity-hover, .9);
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-indicator"]:has(img)[data-current] {
+    width: var(--moduix-lightbox-gallery-thumbnail-width, 5rem);
+    border-color: var(--moduix-lightbox-gallery-thumbnail-border-color, var(--moduix-color-primary));
+    opacity: 1;
+    transform: translateY(var(--moduix-lightbox-gallery-thumbnail-active-translate-y, calc(0px - var(--moduix-border-width-sm))));
+    background: none;
+  }
+
+  .gallery-d_JY9F [data-slot="carousel-indicator"]:has(img) img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .closeIcon-Xv0OVe {
+    --moduix-close-button-size: var(--moduix-lightbox-close-icon-size, var(--moduix-spacing-8));
+    --moduix-close-button-radius: var(--moduix-lightbox-close-icon-radius, var(--moduix-radius-sm));
+    --moduix-close-button-icon-size: var(--moduix-lightbox-close-icon-glyph-size, var(--moduix-spacing-3-5));
+    --moduix-close-button-color: var(--moduix-lightbox-close-icon-color, var(--moduix-color-foreground));
+    --moduix-close-button-color-hover: var(--moduix-lightbox-close-icon-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-bg: var(--moduix-lightbox-close-icon-bg, var(--moduix-color-background));
+    --moduix-close-button-bg-hover: var(--moduix-lightbox-close-icon-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-focus-ring-color: var(--moduix-lightbox-close-icon-focus-ring-color, var(--moduix-color-ring));
+    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0) + 1);
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+    border: 0;
+    padding: 0;
+    position: fixed;
+    inset-block-start: var(--moduix-lightbox-close-icon-inset-block-start, var(--moduix-spacing-4));
+    inset-inline-end: var(--moduix-lightbox-close-icon-inset-inline-end, var(--moduix-spacing-4));
+  }
+
+  .closeIcon-Xv0OVe[data-state="open"] {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  @keyframes lightbox-backdrop-in-y5UjxI {
+    from {
+      opacity: var(--moduix-lightbox-backdrop-starting-opacity, 0);
+      -webkit-backdrop-filter: var(--moduix-lightbox-backdrop-starting-blur, none);
+      backdrop-filter: var(--moduix-lightbox-backdrop-starting-blur, none);
+    }
+  }
+
+  @keyframes lightbox-backdrop-out-LsC2c8 {
+    to {
+      opacity: var(--moduix-lightbox-backdrop-ending-opacity, 0);
+      -webkit-backdrop-filter: var(--moduix-lightbox-backdrop-ending-blur, none);
+      backdrop-filter: var(--moduix-lightbox-backdrop-ending-blur, none);
+    }
+  }
+
+  @keyframes lightbox-content-in-udHk7o {
+    from {
+      opacity: var(--moduix-lightbox-content-starting-opacity, var(--moduix-popup-motion-starting-opacity, 0));
+      translate: var(--moduix-lightbox-content-starting-translate-x, var(--moduix-popup-motion-starting-translate-x, 0))
+        var(--moduix-lightbox-content-starting-translate-y, var(--moduix-popup-motion-starting-translate-y, 0));
+      scale: var(--moduix-lightbox-content-starting-scale, var(--moduix-popup-motion-starting-scale, .82));
+    }
+  }
+
+  @keyframes lightbox-content-out-ZyLTc7 {
+    to {
+      opacity: var(--moduix-lightbox-content-ending-opacity, var(--moduix-popup-motion-ending-opacity, 0));
+      translate: var(--moduix-lightbox-content-ending-translate-x, var(--moduix-popup-motion-ending-translate-x, 0))
+        var(--moduix-lightbox-content-ending-translate-y, var(--moduix-popup-motion-ending-translate-y, 0));
+      scale: var(--moduix-lightbox-content-ending-scale, var(--moduix-popup-motion-ending-scale, .82));
+    }
+  }
+}
+

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

@@ -1,2 +1,2 @@
-import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails, useLightbox as useDialog, useLightboxContext as useDialogContext } from "./Lightbox.js";
-export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog as useLightbox, useDialogContext as useLightboxContext };
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useLightbox, useLightboxContext, } from './Lightbox.js';
+export type { LightboxBindProps, LightboxImageSelectDetails } from './Lightbox.js';

package/dist/components/lightbox/index.js

@@ -0,0 +1 @@
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useLightbox, useLightboxContext } from "./Lightbox.js";

package/dist/components/list/List.d.ts

@@ -1,24 +1,21 @@
-import { HTMLArkProps } from "@ark-ui/react/factory";
-
-//#region src/components/list/List.d.ts
+import type { HTMLArkProps } from '@ark-ui/react/factory';
 type ListMarker = 'disc' | 'decimal' | 'none';
 type ListGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type ListSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ListTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
 type ListBaseProps = {
-  marker?: ListMarker;
-  gap?: ListGap;
-  size?: ListSize;
-  tone?: ListTone;
+    marker?: ListMarker;
+    gap?: ListGap;
+    size?: ListSize;
+    tone?: ListTone;
 };
 type ListRootProps = (HTMLArkProps<'ul'> & ListBaseProps & {
-  as?: 'ul';
+    as?: 'ul';
 }) | (HTMLArkProps<'ol'> & ListBaseProps & {
-  as: 'ol';
+    as: 'ol';
 });
 declare const List: import("react").ForwardRefExoticComponent<ListRootProps & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>> & {
-  Root: import("react").ForwardRefExoticComponent<ListRootProps & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
-  Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+    Root: import("react").ForwardRefExoticComponent<ListRootProps & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
 };
-//#endregion
-export { List };
+export { List };

package/dist/components/list/List.js

@@ -1,48 +1,46 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import List_module_default from "./List.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/list/List.tsx
-const ListRoot = forwardRef(function ListRoot({ as, asChild, className, gap = "sm", marker, role, size = "md", tone = "default", ...props }, ref) {
-	const markerValue = marker ?? "auto";
-	const rootProps = {
-		asChild,
-		role: role ?? (markerValue === "none" ? "list" : void 0),
-		...props,
-		"data-scope": "list",
-		"data-part": "root",
-		"data-slot": "list-root",
-		"data-gap": gap,
-		"data-marker": markerValue,
-		"data-size": size,
-		"data-tone": tone,
-		className: clsx(List_module_default.root, normalizeClassName(className))
-	};
-	if (as === "ol") return /* @__PURE__ */ jsx(ark.ol, {
-		ref,
-		...rootProps
-	});
-	return /* @__PURE__ */ jsx(ark.ul, {
-		ref,
-		...rootProps
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import List_module from "./List.module.js";
+const List_ListRoot = /*#__PURE__*/ forwardRef(function({ as, asChild, className, gap = 'sm', marker, role, size = 'md', tone = 'default', ...props }, ref) {
+    const markerValue = marker ?? 'auto';
+    const rootProps = {
+        asChild,
+        role: role ?? ('none' === markerValue ? 'list' : void 0),
+        ...props,
+        'data-scope': 'list',
+        'data-part': 'root',
+        'data-slot': 'list-root',
+        'data-gap': gap,
+        'data-marker': markerValue,
+        'data-size': size,
+        'data-tone': tone,
+        className: clsx(List_module.root, normalizeClassName(className))
+    };
+    if ('ol' === as) return /*#__PURE__*/ jsx(ark.ol, {
+        ref: ref,
+        ...rootProps
+    });
+    return /*#__PURE__*/ jsx(ark.ul, {
+        ref: ref,
+        ...rootProps
+    });
 });
-const ListItem = forwardRef(function ListItem({ asChild, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(ark.li, {
-		ref,
-		asChild,
-		...props,
-		"data-scope": "list",
-		"data-part": "item",
-		"data-slot": "list-item",
-		className: normalizeClassName(className)
-	});
+const List_ListItem = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.li, {
+        ref: ref,
+        asChild: asChild,
+        ...props,
+        "data-scope": "list",
+        "data-part": "item",
+        "data-slot": "list-item",
+        className: normalizeClassName(className)
+    });
 });
-const List = Object.assign(ListRoot, {
-	Root: ListRoot,
-	Item: ListItem
+const List = Object.assign(List_ListRoot, {
+    Root: List_ListRoot,
+    Item: List_ListItem
 });
-//#endregion
 export { List };

package/dist/components/list/List.module.js

@@ -1,5 +1,5 @@
-import './List.css';
-//#region src/components/list/List.module.css
-var List_module_default = { "root": "dG8Cea_root" };
-//#endregion
-export { List_module_default as default };
+import "./List_module.css";
+const List_module = {
+    root: "root-PNnfB8"
+};
+export default List_module;

package/dist/components/list/List_module.css

@@ -0,0 +1,119 @@
+@layer moduix.components {
+  .root-PNnfB8[data-scope="list"][data-part="root"] {
+    --_list-color: var(--moduix-list-color, var(--moduix-list-default-color, var(--moduix-color-foreground)));
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-md, var(--moduix-text-md)));
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-sm, var(--moduix-spacing-2)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-md, var(--moduix-line-height-text-md)));
+    box-sizing: border-box;
+    color: var(--_list-color);
+    font-family: var(--moduix-list-font-family, inherit);
+    font-size: var(--_list-font-size);
+    font-weight: var(--moduix-list-font-weight, var(--moduix-weight-regular));
+    line-height: var(--_list-line-height);
+    letter-spacing: var(--moduix-list-letter-spacing, 0);
+    overflow-wrap: break-word;
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="xs"] {
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-xs, var(--moduix-spacing-1)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="sm"] {
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-sm, var(--moduix-spacing-2)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="md"] {
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-md, var(--moduix-spacing-3)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="lg"] {
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-lg, var(--moduix-spacing-4)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="xl"] {
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-xl, var(--moduix-spacing-5)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-gap="2xl"] {
+    --_list-gap: var(--moduix-list-gap, var(--moduix-list-gap-2xl, var(--moduix-spacing-6)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"] > li + li {
+    margin-block-start: var(--_list-gap);
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"] > li::marker {
+    color: var(--moduix-list-marker-color, currentColor);
+    font-weight: var(--moduix-list-marker-font-weight, inherit);
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-marker="none"] {
+    padding-inline-start: 0;
+    list-style: none;
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"]:is(ul, ol)[data-marker="auto"], .root-PNnfB8[data-scope="list"][data-part="root"][data-marker="disc"], .root-PNnfB8[data-scope="list"][data-part="root"][data-marker="decimal"] {
+    padding-inline-start: var(--moduix-list-padding-x, var(--moduix-spacing-5));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"]:is(ul)[data-marker="auto"], .root-PNnfB8[data-scope="list"][data-part="root"][data-marker="disc"] {
+    list-style-type: disc;
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"]:is(ol)[data-marker="auto"] {
+    list-style-type: revert;
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"]:is(ul)[data-marker="decimal"], .root-PNnfB8[data-scope="list"][data-part="root"]:is(ol)[data-marker="decimal"] {
+    list-style-type: decimal;
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-size="xs"] {
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-xs, var(--moduix-text-xs)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-xs, var(--moduix-line-height-text-xs)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-size="sm"] {
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-sm, var(--moduix-text-sm)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-sm, var(--moduix-line-height-text-sm)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-size="md"] {
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-md, var(--moduix-text-md)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-md, var(--moduix-line-height-text-md)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-size="lg"] {
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-lg, var(--moduix-text-lg)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-lg, var(--moduix-line-height-text-lg)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-size="xl"] {
+    --_list-font-size: var(--moduix-list-font-size, var(--moduix-list-font-size-xl, var(--moduix-text-xl)));
+    --_list-line-height: var(--moduix-list-line-height, var(--moduix-list-line-height-xl, var(--moduix-line-height-text-xl)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-tone="default"] {
+    --_list-color: var(--moduix-list-color, var(--moduix-list-default-color, var(--moduix-color-foreground)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-tone="muted"] {
+    --_list-color: var(--moduix-list-color, var(--moduix-list-muted-color, var(--moduix-color-muted-foreground)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-tone="subtle"] {
+    --_list-color: var(--moduix-list-color, var(--moduix-list-subtle-color, var(--moduix-color-secondary-foreground)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-tone="primary"] {
+    --_list-color: var(--moduix-list-color, var(--moduix-list-primary-color, var(--moduix-color-primary)));
+  }
+
+  .root-PNnfB8[data-scope="list"][data-part="root"][data-tone="destructive"] {
+    --_list-color: var(--moduix-list-color, var(--moduix-list-destructive-color, var(--moduix-color-destructive)));
+  }
+}
+

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

@@ -1,2 +1 @@
-import { List } from "./List.js";
-export { List };
+export * from './List.js';

package/dist/components/list/index.js

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

package/dist/components/listbox/Listbox.d.ts

@@ -1,47 +1,31 @@
-import { ComponentProps } from "react";
-import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
-
-//#region src/components/listbox/Listbox.d.ts
-declare function ListboxFilter({
-  className,
-  children,
-  ...props
-}: ComponentProps<'div'>): import("react").JSX.Element;
-declare function ListboxItemTextContent({
-  className,
-  ...props
-}: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ListboxItemTextIcon({
-  className,
-  ...props
-}: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ListboxItemTextLabel({
-  className,
-  ...props
-}: ComponentProps<'span'>): import("react").JSX.Element;
-declare const Listbox$1: Listbox.RootComponent & {
-  Root: Listbox.RootComponent;
-  RootProvider: Listbox.RootProviderComponent;
-  Label: import("react").ForwardRefExoticComponent<Omit<Listbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Input: import("react").ForwardRefExoticComponent<Omit<Listbox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-  Filter: typeof ListboxFilter;
-  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Listbox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Empty: import("react").ForwardRefExoticComponent<Omit<Listbox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemGroup: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Item: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemText: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ValueText: import("react").ForwardRefExoticComponent<Omit<Listbox.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Context: <T extends unknown>(props: Listbox.ContextProps<T>) => import("react").ReactNode;
-  ItemContext: (props: Listbox.ItemContextProps) => import("react").ReactNode;
-  ItemTextContent: typeof ListboxItemTextContent;
-  ItemTextIcon: typeof ListboxItemTextIcon;
-  ItemTextLabel: typeof ListboxItemTextLabel;
-  useListbox: <T extends unknown>(props: import("@ark-ui/react/listbox").UseListboxProps<T>) => import("@ark-ui/react/listbox").UseListboxReturn<T>;
-  useListboxContext: () => import("@ark-ui/react/listbox").UseListboxContext<any>;
-  useListboxItemContext: () => import("@ark-ui/react/listbox").UseListboxItemContext;
+import { Listbox as ListboxPrimitive, useListbox, useListboxContext, useListboxItemContext } from '@ark-ui/react/listbox';
+import type { ComponentProps } from 'react';
+declare function ListboxFilter({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function ListboxItemTextContent({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ListboxItemTextIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ListboxItemTextLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare const Listbox: ListboxPrimitive.RootComponent & {
+    Root: ListboxPrimitive.RootComponent;
+    RootProvider: ListboxPrimitive.RootProviderComponent;
+    Label: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Filter: typeof ListboxFilter;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ValueText: import("react").ForwardRefExoticComponent<Omit<ListboxPrimitive.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Context: <T extends unknown>(props: ListboxPrimitive.ContextProps<T>) => import("react").ReactNode;
+    ItemContext: (props: ListboxPrimitive.ItemContextProps) => import("react").ReactNode;
+    ItemTextContent: typeof ListboxItemTextContent;
+    ItemTextIcon: typeof ListboxItemTextIcon;
+    ItemTextLabel: typeof ListboxItemTextLabel;
+    useListbox: <T extends unknown>(props: import("@ark-ui/react/listbox").UseListboxProps<T>) => import("@ark-ui/react/listbox").UseListboxReturn<T>;
+    useListboxContext: () => import("@ark-ui/react/listbox").UseListboxContext<any>;
+    useListboxItemContext: () => import("@ark-ui/react/listbox").UseListboxItemContext;
 };
-//#endregion
-export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };
+export { Listbox, useListbox, useListboxContext, useListboxItemContext };