@moduix/react 2.2.0 → 2.2.4

package/dist/components/lightbox/{Lightbox.css → Lightbox_module.css}

@@ -1,34 +1,35 @@
 @layer moduix.components {
-  .BCq4HG_trigger {
+  .trigger-CDcAJQ {
     cursor: zoom-in;
+  }
 
-    &:focus-visible {
-      outline: var(--moduix-lightbox-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+  .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));
-    }
+    outline-offset: var(--moduix-lightbox-trigger-focus-ring-offset, var(--moduix-focus-ring-offset));
   }
 
-  .BCq4HG_backdrop {
+  .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;
+  }
 
-    &[data-state="open"] {
-      animation: BCq4HG_lightbox-backdrop-in
+  .backdrop-nZRWDl[data-state="open"] {
+    animation: lightbox-backdrop-in-y5UjxI
         var(--moduix-lightbox-backdrop-transition, var(--moduix-transition-default));
-    }
+  }
 
-    &[data-state="closed"] {
-      animation: BCq4HG_lightbox-backdrop-out
+  .backdrop-nZRWDl[data-state="closed"] {
+    animation: lightbox-backdrop-out-LsC2c8
         var(--moduix-lightbox-backdrop-transition, var(--moduix-transition-default));
-    }
   }
 
-  .BCq4HG_positioner {
+  .positioner-T47Xit {
     box-sizing: border-box;
     z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
     overscroll-behavior: contain;
@@ -37,35 +38,36 @@
     display: grid;
     position: fixed;
     inset: 0;
-    overflow: hidden;
+    overflow: auto;
   }
 
-  .BCq4HG_content {
+  .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-spacing-8)));
+      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-spacing-8)));
+      calc(100dvh - var(--moduix-lightbox-positioner-padding, var(--moduix-spacing-4)) * 2));
     background: none;
     border: 0;
     outline: 0;
     display: grid;
     position: relative;
+  }
 
-    &[data-state="open"] {
-      animation: BCq4HG_lightbox-content-in
+  .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));
-    }
+  }
 
-    &[data-state="closed"] {
-      animation: BCq4HG_lightbox-content-out
+  .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));
-    }
   }
 
-  .BCq4HG_title {
+  .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));
@@ -73,24 +75,24 @@
     margin: 0;
   }
 
-  .BCq4HG_description {
+  .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;
   }
 
-  .BCq4HG_header {
+  .header-Lx40fF {
     gap: var(--moduix-lightbox-header-gap, var(--moduix-spacing-1));
     display: grid;
   }
 
-  .BCq4HG_body {
+  .body-M8rV1J {
     gap: var(--moduix-lightbox-body-gap, var(--moduix-spacing-3));
     display: grid;
   }
 
-  .BCq4HG_footer {
+  .footer-ZmOqXP {
     align-items: center;
     justify-content: var(--moduix-lightbox-footer-justify, flex-end);
     gap: var(--moduix-lightbox-footer-gap, var(--moduix-spacing-2));
@@ -100,94 +102,97 @@
     display: flex;
   }
 
-  .BCq4HG_image {
+  .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;
+  }
 
-    &[data-close-on-click] {
-      cursor: zoom-out;
-    }
+  .image-P32jHl[data-close-on-click] {
+    cursor: zoom-out;
   }
 
-  .BCq4HG_gallery {
+  .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;
+  }
 
-    & [data-slot="carousel-control"] {
-      align-items: center;
-    }
+  .gallery-d_JY9F [data-slot="carousel-control"] {
+    align-items: center;
+  }
 
-    & [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),
+  .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%));
-    }
+    background: var(--moduix-lightbox-gallery-track-bg, color-mix(in oklab, black 88%, var(--moduix-color-background) 12%));
+  }
 
-    & [data-slot="carousel-item"] {
-      place-items: center;
-      height: 100%;
-      display: grid;
-
-      & img, & video {
-        object-fit: contain;
-        border-radius: var(--moduix-lightbox-media-radius, var(--moduix-radius-md));
-        user-select: none;
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
+  .gallery-d_JY9F [data-slot="carousel-item"] {
+    place-items: center;
+    height: 100%;
+    display: grid;
+  }
 
-    & [data-slot="carousel-indicator-group"] {
-      flex-wrap: wrap;
-      width: fit-content;
-      max-width: 100%;
-      margin-inline: auto;
-    }
+  .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;
+  }
 
-    & [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),
+  .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;
-
-      &:hover {
-        opacity: var(--moduix-lightbox-gallery-thumbnail-opacity-hover, .9);
-      }
-
-      &[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(var(--moduix-border-width-sm) * -1)));
-        background: none;
-      }
-
-      & img {
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
+    background: none;
+    overflow: hidden;
   }
 
-  .BCq4HG_closeIcon {
+  .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));
@@ -205,29 +210,31 @@
     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));
+  }
 
-    &[data-state="open"] {
-      opacity: 1;
-      pointer-events: auto;
-      visibility: visible;
-    }
+  .closeIcon-Xv0OVe[data-state="open"] {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
   }
 
-  @keyframes BCq4HG_lightbox-backdrop-in {
+  @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 BCq4HG_lightbox-backdrop-out {
+  @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 BCq4HG_lightbox-content-in {
+  @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))
@@ -236,7 +243,7 @@
     }
   }
 
-  @keyframes BCq4HG_lightbox-content-out {
+  @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))
@@ -245,3 +252,4 @@
     }
   }
 }
+

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";