List

import { List, ListItem } from '@systhemaui/next'

export default function Demo() {
  return (
    <List type="bullet">
      <ListItem>Tokens exported from Figma as DTCG JSON</ListItem>
      <ListItem>CSS variables and Tailwind utilities generated on sync</ListItem>
      <ListItem>Typed React and Next.js components that read them</ListItem>
    </List>
  )
}

import { List, ListItem, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="grid w-full gap-8 sm:grid-cols-3">
      <div>
        <Paragraph type="label">bullet</Paragraph>
        <List type="bullet">
          <ListItem>Header</ListItem>
          <ListItem>Hero</ListItem>
          <ListItem>Footer</ListItem>
        </List>
      </div>
      <div>
        <Paragraph type="label">number</Paragraph>
        <List type="number">
          <ListItem>Install</ListItem>
          <ListItem>Configure</ListItem>
          <ListItem>Sync</ListItem>
        </List>
      </div>
      <div>
        <Paragraph type="label">check</Paragraph>
        <List type="check">
          <ListItem checked>Tokens</ListItem>
          <ListItem checked>Components</ListItem>
          <ListItem checked={false}>Content</ListItem>
        </List>
      </div>
    </div>
  )
}

import { List, ListItem } from '@systhemaui/next'

export default function Demo() {
  return (
    <List type="check">
      <ListItem checked checkedLabel="Inbegriffen">
        Unbegrenzte Seiten
      </ListItem>
      <ListItem checked checkedLabel="Inbegriffen">
        Eigene Domain
      </ListItem>
      <ListItem checked={false} uncheckedLabel="Nicht inbegriffen">
        Mehrsprachige Inhalte
      </ListItem>
    </List>
  )
}

import { List, ListItem } from '@systhemaui/next'

export default function Demo() {
  return (
    <List type="number">
      <ListItem>Install the packages</ListItem>
      <ListItem>
        <List type="bullet">
          <ListItem nested>@systhemaui/core</ListItem>
          <ListItem nested>@systhemaui/next</ListItem>
        </List>
      </ListItem>
      <ListItem>Run the first sync</ListItem>
      <ListItem>Start the dev server</ListItem>
    </List>
  )
}

import {
  CustomList,
  CustomListContent,
  CustomListItem,
  CustomListItemMarker,
} from '@systhemaui/next'

const features = [
  { marker: '⚡', text: 'Fluid spacing that scales with the viewport' },
  { marker: '🎨', text: 'Two color systems, switchable per section' },
  { marker: '🧩', text: 'Payload blocks that render the same components' },
]

export default function Demo() {
  return (
    <CustomList>
      {features.map((feature) => (
        <CustomListItem key={feature.text}>
          <CustomListItemMarker aria-hidden="true">{feature.marker}</CustomListItemMarker>
          <CustomListContent>{feature.text}</CustomListContent>
        </CustomListItem>
      ))}
    </CustomList>
  )
}

import {
  CustomList,
  CustomListContent,
  CustomListItem,
  CustomListItemMarker,
} from '@systhemaui/next'

export default function Demo() {
  return (
    <CustomList>
      {['Free updates for a year', 'Priority support', 'Unlimited projects'].map((text) => (
        <CustomListItem key={text}>
          <CustomListItemMarker>
            <svg
              width="1em"
              height="1em"
              viewBox="0 -960 960 960"
              fill="currentColor"
              aria-hidden="true"
              focusable="false"
            >
              <path d="m233-120 65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Z" />
            </svg>
          </CustomListItemMarker>
          <CustomListContent>{text}</CustomListContent>
        </CustomListItem>
      ))}
    </CustomList>
  )
}