List

import { List, ListItem } from "moduix";export function ListDemo() {  return (    <List className={styles.list}>      {items.map((item) => (        <ListItem key={item}>{item}</ListItem>      ))}    </List>  );}

.list {  width: min(32rem, calc(100vw - var(--spacing-8)));}

const items = [  "Use native list semantics.",  "Keep spacing and typography on the design system scale.",  "Customize markers with CSS variables.",];

import { List, ListItem } from "moduix";export function OrderedListDemo() {  return (    <List as="ol" className={styles.list}>      {items.map((item) => (        <ListItem key={item}>{item}</ListItem>      ))}    </List>  );}

.list {  width: min(32rem, calc(100vw - var(--spacing-8)));}

const items = [  "Install the package.",  "Import the library stylesheet.",  "Use components in your app.",];

import { List, ListItem } from "moduix";export function MarkerlessListDemo() {  return (    <List marker="none" className={styles.list}>      {items.map((item) => (        <ListItem key={item}>{item}</ListItem>      ))}    </List>  );}

.list {  width: min(32rem, calc(100vw - var(--spacing-8)));}

const items = [  "Markerless item",  "Another markerless item",  "Useful for compact metadata groups",];

import { List } from "moduix";export function NativeItemsListDemo() {  return (    <List marker="bullet" className={styles.customBullet}>      {items.map((item) => (        <li key={item}>{item}</li>      ))}    </List>  );}

.customBullet {  width: min(32rem, calc(100vw - var(--spacing-8)));  --list-marker-color: var(--color-chart-2);  --list-marker-size: 0.5rem;  --list-marker-gap: var(--spacing-4);  --list-marker-offset-y: 0.5em;}

const items = [  "Use native li elements when a wrapper component is unnecessary.",  "The root still controls spacing, marker style, size, and tone.",  "Reach for ListItem when you want the stable item slot.",];

import { List, ListItem } from "moduix";export function ListSizesDemo() {  return (    <div className={styles.stack}>      {items.map((item) => (        <List key={item.size} size={item.size}>          <ListItem>{item.label}</ListItem>        </List>      ))}    </div>  );}

.stack {  width: min(32rem, calc(100vw - var(--spacing-8)));  display: flex;  flex-direction: column;  gap: var(--spacing-6);}

const items = [  { size: "xl", label: "Extra-large list item" },  { size: "md", label: "Medium list item" },  { size: "xs", label: "Extra-small list item" },] as const;

import { List, ListItem } from "moduix";export function ListGapsDemo() {  return (    <div className={styles.stack}>      {groups.map((group) => (        <List key={group.gap} gap={group.gap}>          {group.items.map((item) => (            <ListItem key={item}>{item}</ListItem>          ))}        </List>      ))}    </div>  );}

.stack {  width: min(32rem, calc(100vw - var(--spacing-8)));  display: flex;  flex-direction: column;  gap: var(--spacing-6);}

const groups = [  { gap: "xs", items: ["Extra-small gap", "Second item"] },  { gap: "lg", items: ["Large gap", "Second item"] },] as const;

import { List, ListItem } from "moduix";export function ListTonesDemo() {  return (    <div className={styles.toneGrid}>      {items.map((item) => (        <List key={item.tone} tone={item.tone}>          <ListItem>{item.label}</ListItem>        </List>      ))}    </div>  );}

.toneGrid {  width: min(32rem, calc(100vw - var(--spacing-8)));  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: var(--spacing-4) var(--spacing-6);}

const items = [  { tone: "default", label: "Default list tone" },  { tone: "muted", label: "Muted list tone" },  { tone: "subtle", label: "Subtle list tone" },  { tone: "primary", label: "Primary list tone" },  { tone: "destructive", label: "Destructive list tone" },] as const;

import { List, ListItem } from "moduix";export function CustomStylesListDemo() {  return (    <List marker="bullet" className={styles.customBullet}>      {items.map((item) => (        <ListItem key={item} classNames={{ marker: styles.glowMarker }}>          {item}        </ListItem>      ))}    </List>  );}

.customBullet {  width: min(32rem, calc(100vw - var(--spacing-8)));  --list-marker-color: var(--color-chart-2);  --list-marker-size: 0.5rem;  --list-marker-gap: var(--spacing-4);  --list-marker-offset-y: 0.5em;}.glowMarker {  box-shadow:    0 0 0 0.25rem color-mix(in oklab, var(--list-marker-color), transparent 78%),    0 0.125rem 0.375rem color-mix(in oklab, var(--list-marker-color), transparent 68%);}

const items = [  "Bullet size is independent from text size.",  "Bullet color and gap are controlled by CSS variables.",  "Text color remains unchanged.",];