@moduix/solid 1.0.0

package/dist/components/lightbox/Lightbox_module.css

@@ -0,0 +1,259 @@
+@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: 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));
+    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: 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));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .backdrop-nZRWDl[data-state], .content-N4c6Zm[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+}
+

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

@@ -0,0 +1,2 @@
+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/lightbox/index.jsx

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

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

@@ -0,0 +1,36 @@
+import type { HTMLArkProps } from '@ark-ui/solid/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;
+};
+type ListDataProps = {
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+};
+type ListRootProps = (HTMLArkProps<'ul'> & ListBaseProps & ListDataProps & {
+    as?: 'ul';
+    'data-gap'?: string;
+    'data-marker'?: string;
+    'data-size'?: string;
+    'data-tone'?: string;
+}) | (HTMLArkProps<'ol'> & ListBaseProps & ListDataProps & {
+    as: 'ol';
+    'data-gap'?: string;
+    'data-marker'?: string;
+    'data-size'?: string;
+    'data-tone'?: string;
+});
+declare function ListRoot(props: ListRootProps): import("solid-js").JSX.Element;
+declare function ListItem(props: HTMLArkProps<'li'> & ListDataProps): import("solid-js").JSX.Element;
+declare const List: typeof ListRoot & {
+    Root: typeof ListRoot;
+    Item: typeof ListItem;
+};
+export { List };

package/dist/components/list/List.js

@@ -0,0 +1,136 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { Show, splitProps } from "solid-js";
+import List_module from "./List.module.js";
+function ListRoot(props) {
+    return createComponent(Show, {
+        get when () {
+            return 'ol' === props.as;
+        },
+        get fallback () {
+            return createComponent(UnorderedListRoot, props);
+        },
+        get children () {
+            return createComponent(OrderedListRoot, props);
+        }
+    });
+}
+function OrderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    return createComponent(ark.ol, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get role () {
+            return local.role ?? ('none' === local.marker ? 'list' : void 0);
+        },
+        "data-scope": "list",
+        "data-part": "root",
+        "data-slot": "list-root",
+        get ["data-gap"] () {
+            return local.gap ?? 'sm';
+        },
+        get ["data-marker"] () {
+            return local.marker ?? 'auto';
+        },
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
+        get ["class"] () {
+            return clsx(List_module.root, local.class);
+        }
+    }));
+}
+function UnorderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    return createComponent(ark.ul, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get role () {
+            return local.role ?? ('none' === local.marker ? 'list' : void 0);
+        },
+        "data-scope": "list",
+        "data-part": "root",
+        "data-slot": "list-root",
+        get ["data-gap"] () {
+            return local.gap ?? 'sm';
+        },
+        get ["data-marker"] () {
+            return local.marker ?? 'auto';
+        },
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-tone"] () {
+            return local.tone ?? 'default';
+        },
+        get ["class"] () {
+            return clsx(List_module.root, local.class);
+        }
+    }));
+}
+function ListItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return createComponent(ark.li, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "list",
+        "data-part": "item",
+        "data-slot": "list-item",
+        get ["class"] () {
+            return local.class;
+        }
+    }));
+}
+const List = Object.assign(ListRoot, {
+    Root: ListRoot,
+    Item: ListItem
+});
+export { List };

package/dist/components/list/List.jsx

@@ -0,0 +1,64 @@
+import { ark } from "@ark-ui/solid/factory";
+import { clsx } from "clsx";
+import { Show, splitProps } from "solid-js";
+import List_module from "./List.module.jsx";
+function ListRoot(props) {
+    return <Show when={'ol' === props.as} fallback={<UnorderedListRoot {...props}/>}>
+      <OrderedListRoot {...props}/>
+    </Show>;
+}
+function OrderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    return <ark.ol asChild={local.asChild} {...others} role={local.role ?? ('none' === local.marker ? 'list' : void 0)} data-scope="list" data-part="root" data-slot="list-root" data-gap={local.gap ?? 'sm'} data-marker={local.marker ?? 'auto'} data-size={local.size ?? 'md'} data-tone={local.tone ?? 'default'} class={clsx(List_module.root, local.class)}/>;
+}
+function UnorderedListRoot(props) {
+    const [local, others] = splitProps(props, [
+        'as',
+        'asChild',
+        'class',
+        'gap',
+        'marker',
+        'role',
+        'size',
+        'tone',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-gap',
+        'data-marker',
+        'data-size',
+        'data-tone'
+    ]);
+    return <ark.ul asChild={local.asChild} {...others} role={local.role ?? ('none' === local.marker ? 'list' : void 0)} data-scope="list" data-part="root" data-slot="list-root" data-gap={local.gap ?? 'sm'} data-marker={local.marker ?? 'auto'} data-size={local.size ?? 'md'} data-tone={local.tone ?? 'default'} class={clsx(List_module.root, local.class)}/>;
+}
+function ListItem(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-scope',
+        'data-part',
+        'data-slot'
+    ]);
+    return <ark.li asChild={local.asChild} {...others} data-scope="list" data-part="item" data-slot="list-item" class={local.class}/>;
+}
+const List = Object.assign(ListRoot, {
+    Root: ListRoot,
+    Item: ListItem
+});
+export { List };

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

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

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

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

package/dist/components/list/List_module.css

@@ -0,0 +1,118 @@
+@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;
+    gap: var(--_list-gap);
+    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;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+    display: flex;
+  }
+
+  .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::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

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

package/dist/components/list/index.js

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

package/dist/components/list/index.jsx

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