@monimesl/dot-cli 0.1.0-alpha.4 → 0.1.0-alpha.40

package/dist/templates/showcase/pages/components/carousel/state.ts

@@ -0,0 +1,77 @@
+export interface Artist {
+  id: string;
+  name: string;
+  text: string;
+  // A release whose cover shows the artist, by its id in Apple's catalog.
+  release: number;
+  photo: string;
+}
+
+export interface Chapter {
+  title: string;
+  text: string;
+}
+
+export default {
+  // Gen Z, the new school.
+  artists: [
+    {
+      id: 'drizilik',
+      name: 'Drizilik',
+      text: 'Kriofusion rapped in Krio. "Lemonade" is from his album Wait and See.',
+      release: 1788321371,
+      photo: '',
+    },
+    {
+      id: 'the-therapist',
+      name: 'The Therapist',
+      text: 'Had a big following online before his first single, "Nack", in 2022.',
+      release: 1612124616,
+      photo: '',
+    },
+    {
+      id: 'boii',
+      name: 'Boii',
+      text: 'One of the most-streamed Sierra Leonean women of 2024. Her first EP, Money or Honey, came in 2025.',
+      release: 1776449163,
+      photo: '',
+    },
+    {
+      id: 'apreel',
+      name: 'ApreeL',
+      text: '"O\'way", and "Control", a Krio love song.',
+      release: 1831185667,
+      photo: '',
+    },
+    {
+      id: 'donii-major',
+      name: 'Donii Major',
+      text: 'R&B from Freetown, from "Hannah" in 2021 to "Shadow" in 2026.',
+      release: 6770467984,
+      photo: '',
+    },
+  ] as Artist[],
+  chapters: [
+    {
+      title: 'Palm-wine and gumbe',
+      text: 'Ebenezer Calendar & His Maringa Band made Creole palm-wine and gumbe popular, and S. E. Rogie sang palm-wine in four languages.',
+    },
+    {
+      title: 'Milo jazz',
+      text: 'Dr. Oloh led Milo Jazz, a street-band sound grown out of gumbe.',
+    },
+    {
+      title: 'Afropop',
+      text: 'Bunny Mack\'s "Let Me Love You" was a disco hit in 1981, and Emmerson\'s Borbor Bele sang against corruption in 2004.',
+    },
+    {
+      title: 'Salone hip hop',
+      text: 'Rapped mostly in Krio, it rose after the civil war with Daddy Saj, K-Man, LAJ, Kao Denero and Star Zee.',
+    },
+    {
+      title: 'Gen Z',
+      text: 'Drizilik, Boii and ApreeL sing in Krio over Afrobeats, and new stars break through online.',
+    },
+  ] as Chapter[],
+  chapter: 0,
+};

package/dist/templates/showcase/pages/components/carousel/view.dml

@@ -0,0 +1,42 @@
+<View>
+  <Text variant="title">Carousel</Text>
+  <Text>A Carousel shows one slide at a time. Swipe, or tap a dot.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">autoplay, loop and effect</Text>
+    <Text variant="caption" tone="muted">Gen Z artists. The slides move on their own every 3 seconds, start over at the end, and pause when you touch them. effect="scale" shrinks the slides beside the one in view.</Text>
+    <Carousel autoplay loop interval="3000" gap="medium" effect="scale" indicator="dots">
+      <For each="{{ artists }}" item="artist" key="id">
+        <View variant="card" align="center" gap="medium">
+          <If condition="{{ artist.photo }}">
+            <Image src="{{ artist.photo }}" alt="{{ artist.name }}" aspect="1:1" />
+          </If>
+          <Else>
+            <Skeleton shape="box" height="240" />
+          </Else>
+          <Text weight="bold">{{ artist.name }}</Text>
+          <Text tone="muted" align="center">{{ artist.text }}</Text>
+        </View>
+      </For>
+    </Carousel>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">index and onChange</Text>
+    <Text variant="caption" tone="muted">How Salone music grew, from palm-wine to Gen Z. The page sets the slide with index, and onChange tells it when you swipe. The buttons move the slides, so indicator="none" hides the dots.</Text>
+    <Carousel index="{{ chapter }}" indicator="none" effect="slide" gap="small" padding="small" onChange="showChapter">
+      <For each="{{ chapters }}" item="card" key="title">
+        <View variant="card" align="center" gap="medium">
+          <Image src="statics/logo.png" alt="" width="48" height="48" />
+          <Text weight="bold">{{ card.title }}</Text>
+          <Text tone="muted" align="center">{{ card.text }}</Text>
+        </View>
+      </For>
+    </Carousel>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="back" disabled="{{ chapter === 0 }}">Back</Button>
+      <Button onClick="next" disabled="{{ chapter === chapters.length - 1 }}">Next</Button>
+    </View>
+    <Text>Chapter {{ chapter + 1 }} of {{ chapters.length }}</Text>
+  </View>
+</View>

package/dist/templates/showcase/pages/components/feedback/controller.ts

@@ -0,0 +1,32 @@
+import state, { paymentSteps } from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Feedback' } },
+  mutations: {
+    advance: (state) => ({ progress: Math.min(100, state.progress + 20) }),
+    restart: () => ({ progress: 0 }),
+    toggleBusy: (state) => ({ busy: !state.busy }),
+    toggleLoaded: (state) => ({ loaded: !state.loaded }),
+    // A toast lasts its default time unless the button gives one, in milliseconds.
+    showToast: (
+      _state,
+      event: DataEvent<{ message: string; tone: string; duration?: string }>,
+    ) => ({
+      toast: event.data.message,
+      toastTone: event.data.tone,
+      toastDuration: event.data.duration ? Number(event.data.duration) : undefined,
+    }),
+    clearToast: () => ({ toast: '' }),
+    hideTip: () => ({ tipShown: false }),
+    advancePayment: (state) => {
+      const paymentStage = state.paymentStage + 1;
+      return { paymentStage, payment: paymentSteps(paymentStage) };
+    },
+    failPayment: (state) => ({
+      paymentFailed: true,
+      payment: paymentSteps(state.paymentStage, true),
+    }),
+    restartPayment: () => ({ paymentStage: 0, paymentFailed: false, payment: paymentSteps(0) }),
+  },
+});

package/dist/templates/showcase/pages/components/feedback/state.ts

@@ -0,0 +1,41 @@
+export type StepStatus = 'done' | 'current' | 'upcoming' | 'failed';
+
+export interface PaymentStep {
+  title: string;
+  text: string;
+  status: StepStatus;
+}
+
+// Sending Le 500 to Fatmata Conteh in Bo.
+const PAYMENT = [
+  { title: 'Paid', text: 'Le 500 from your wallet' },
+  { title: 'Sent', text: 'On its way to Bo' },
+  { title: 'Received', text: 'By Fatmata Conteh' },
+];
+
+// The payment's steps when `stage` of them are done. The next one is under way, or failed.
+export function paymentSteps(stage: number, failed = false): PaymentStep[] {
+  return PAYMENT.map((step, index) => {
+    let status: StepStatus = 'upcoming';
+    if (index < stage) {
+      status = 'done';
+    } else if (index === stage) {
+      status = failed ? 'failed' : 'current';
+    }
+    return { ...step, status };
+  });
+}
+
+export default {
+  progress: 40,
+  busy: false,
+  loaded: false,
+  toast: '',
+  toastTone: 'default',
+  toastDuration: undefined as number | undefined,
+  tipShown: true,
+  // How many steps are done, and whether the next one failed, which ends the payment.
+  paymentStage: 0,
+  paymentFailed: false,
+  payment: paymentSteps(0),
+};

package/dist/templates/showcase/pages/components/feedback/view.dml

@@ -0,0 +1,116 @@
+<View>
+  <Text variant="title">Feedback</Text>
+  <Text>Show that something is loading, how far it has gone, and how it ended.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Spinner</Text>
+    <Text variant="caption" tone="muted">While something loads, in three sizes.</Text>
+    <View variant="card" direction="row" gap="large" align="center">
+      <Spinner size="small" />
+      <Spinner />
+      <Spinner size="large" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Skeleton</Text>
+    <Text variant="caption" tone="muted">Shows the shape of what is loading: lines of text, a circle or a box.</Text>
+    <View variant="card">
+      <If condition="{{ loaded }}">
+        <View direction="row" align="center" gap="large">
+          <Image src="statics/logo.png" alt="Logo" width="40" height="40" shape="circle" />
+          <View gap="none">
+            <Text weight="medium">Salone Sounds Radio</Text>
+            <Text variant="caption" tone="muted">The loaded content, in place of the skeleton</Text>
+          </View>
+        </View>
+        <Image src="statics/logo.png" alt="Banner" width="320" height="80" fit="contain" />
+      </If>
+      <Else>
+        <View direction="row" align="center" gap="large">
+          <Skeleton shape="circle" />
+          <Skeleton shape="text" lines="2" />
+        </View>
+        <Skeleton shape="box" height="80" />
+      </Else>
+      <Switch label="Loaded" checked="{{ loaded }}" onChange="toggleLoaded" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Toast</Text>
+    <Text variant="caption" tone="muted">A short message over the page that goes on its own. The offline one stays for 6 seconds.</Text>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" data-message="Added to your library" data-tone="success" onClick="showToast">Add a song</Button>
+      <Button variant="secondary" data-message="You're offline. Only downloads will play." data-tone="warning" data-duration="6000" onClick="showToast">Go offline</Button>
+      <Button variant="secondary" data-message="A new song from Boii" data-tone="info" onClick="showToast">New song</Button>
+      <Button variant="secondary" data-message="That song can't play here" data-tone="danger" onClick="showToast">Fail</Button>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">ProgressBar</Text>
+    <Text variant="caption" tone="muted">How far something has gone, from 0 to 100, such as an album download.</Text>
+    <View variant="card">
+      <ProgressBar value="{{ progress }}" />
+      <Text>{{ progress }}% downloaded</Text>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="advance" disabled="{{ progress >= 100 }}">Advance</Button>
+        <Button variant="secondary" onClick="restart" disabled="{{ progress === 0 }}">Restart</Button>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">A busy Button</Text>
+    <Text variant="caption" tone="muted">loading shows a spinner, and the button ignores taps.</Text>
+    <View variant="card">
+      <Button loading="{{ busy }}">{{ busy ? 'Paying…' : 'Pay Le 300 for two tickets' }}</Button>
+      <Switch label="Busy" checked="{{ busy }}" onChange="toggleBusy" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Notice</Text>
+    <Text variant="caption" tone="muted">A message that stays in the page, in a tone. With onClose it shows a close button, and the page hides it.</Text>
+    <If condition="{{ tipShown }}">
+      <Notice tone="info" title="Tip" onClose="hideTip">Hold a song to add it to a playlist.</Notice>
+    </If>
+    <Notice title="Heads up">Doors open at 7 pm, and the music starts at 8.</Notice>
+    <Notice tone="info" title="New">Tickets for gospel night in Kenema are on sale.</Notice>
+    <Notice tone="success" title="Booked">Two tickets for Salone Sounds Live.</Notice>
+    <Notice tone="warning" title="Almost sold out">Twelve VIP tickets are left.</Notice>
+    <Notice tone="danger" title="Payment failed">The bank didn't answer. Try again.</Notice>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Steps</Text>
+    <Text variant="caption" tone="muted">What happened and what comes next, such as a payment's progress. Each Step is done, current, upcoming or failed.</Text>
+    <View variant="card">
+      <Steps>
+        <For each="{{ payment }}" item="step" key="title">
+          <Step title="{{ step.title }}" text="{{ step.text }}" status="{{ step.status }}" />
+        </For>
+      </Steps>
+      <View direction="row" gap="small">
+        <Button variant="secondary" onClick="advancePayment" disabled="{{ paymentFailed || paymentStage === payment.length }}">Next step</Button>
+        <Button variant="secondary" onClick="failPayment" disabled="{{ paymentFailed || paymentStage === payment.length }}">Fail it</Button>
+        <Button variant="secondary" onClick="restartPayment" disabled="{{ paymentStage === 0 }}">Start over</Button>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Badge</Text>
+    <Text variant="caption" tone="muted">A short status.</Text>
+    <View direction="row" wrap gap="small">
+      <Badge>Demo</Badge>
+      <Badge tone="info">New release</Badge>
+      <Badge tone="success">Booked</Badge>
+      <Badge tone="warning">Few left</Badge>
+      <Badge tone="danger">Sold out</Badge>
+    </View>
+  </View>
+
+  <Toast message="{{ toast }}" tone="{{ toastTone }}" duration="{{ toastDuration }}" onHide="clearToast" />
+</View>

package/dist/templates/showcase/pages/components/forms/controller.ts

@@ -0,0 +1,72 @@
+import { errorMessage } from '@monimesl/dot-runtime';
+
+import type { TicketType } from './state';
+import state, { SHOWS, TICKETS } from './state';
+
+// 2 tickets of a Le 1,200 type -> "Le 2,400"
+function total(tickets: number, ticket: TicketType): string {
+  const leones = tickets * TICKETS[ticket].price;
+  return `Le ${leones.toLocaleString('en-US')}`;
+}
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Forms' } },
+  mutations: {
+    setShow: (_state, event: ValueEvent) => ({
+      show: event.detail.value,
+      showName: SHOWS[event.detail.value] ?? 'Not chosen yet',
+    }),
+    setName: (_state, event: ValueEvent) => ({ name: event.detail.value }),
+    setEmail: (_state, event: ValueEvent) => ({ email: event.detail.value }),
+    setPhone: (_state, event: ValueEvent) => ({ phone: event.detail.value }),
+    setTickets: (state, event: ValueEvent<number>) => ({
+      tickets: event.detail.value,
+      total: total(event.detail.value, state.ticket),
+    }),
+    setShoutOut: (_state, event: ValueEvent) => ({ shoutOut: event.detail.value }),
+    setPromo: (_state, event: ValueEvent) => ({ promo: event.detail.value }),
+    setChairs: (_state, event: ValueEvent<number>) => ({ chairs: event.detail.value }),
+    setTip: (_state, event: ValueEvent<number>) => ({ tip: event.detail.value }),
+    setTicket: (state, event: ValueEvent<TicketType>) => ({
+      ticket: event.detail.value,
+      ticketName: TICKETS[event.detail.value].name,
+      total: total(state.tickets, event.detail.value),
+    }),
+    setETickets: (_state, event: CheckedEvent) => ({ eTickets: event.detail.checked }),
+    setAgreed: (_state, event: CheckedEvent) => ({ agreed: event.detail.checked }),
+  },
+  actions: {
+    async send(state) {
+      const count = state.tickets;
+      const errors = {
+        show: state.show ? '' : 'Choose a show',
+        phone: state.phone.length < 8 ? 'Enter a phone number, such as 76 123456' : '',
+        shoutOut: state.shoutOut.includes('http')
+          ? 'Links are not read out. Write words only.'
+          : '',
+      };
+      this.setState({ errors, sent: '', failure: '' });
+      if (Object.values(errors).some(Boolean)) {
+        return;
+      }
+      this.setState({ sending: true });
+      try {
+        const { show, name, email, phone, shoutOut, ticket, eTickets } = state;
+        await this.dash.network.http.request({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { show, name, email, phone, tickets: count, shoutOut, ticket, eTickets },
+        });
+        this.setState({
+          sent: `${count} ${count === 1 ? 'ticket' : 'tickets'}, sent to +232 ${phone}`,
+        });
+      } catch (error) {
+        this.setState({ failure: errorMessage(error) });
+      } finally {
+        // However the request ends, the button stops spinning and takes taps again.
+        this.setState({ sending: false });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/components/forms/state.ts

@@ -0,0 +1,37 @@
+export type TicketType = 'regular' | 'vip' | 'table';
+
+// The made-up shows on sale, and the price of each ticket, in leones.
+export const SHOWS: Record<string, string> = {
+  freetown: 'Salone Sounds Live · Freetown',
+  bo: 'Palm-wine evening · Bo',
+  kenema: 'Gospel night · Kenema',
+};
+
+export const TICKETS: Record<TicketType, { name: string; price: number }> = {
+  regular: { name: 'Regular', price: 150 },
+  vip: { name: 'VIP, near the stage', price: 400 },
+  table: { name: 'Table for four', price: 1200 },
+};
+
+export default {
+  show: '',
+  // The order, as the summary shows it.
+  showName: 'Not chosen yet',
+  ticketName: TICKETS.regular.name,
+  total: `Le ${2 * TICKETS.regular.price}`,
+  name: '',
+  email: '',
+  phone: '',
+  tickets: 2,
+  promo: '',
+  chairs: 2,
+  tip: 20,
+  shoutOut: '',
+  ticket: 'regular' as TicketType,
+  eTickets: true,
+  agreed: false,
+  errors: { show: '', phone: '', shoutOut: '' },
+  sending: false,
+  sent: '',
+  failure: '',
+};

package/dist/templates/showcase/pages/components/forms/view.dml

@@ -0,0 +1,97 @@
+<View>
+  <Text variant="title">Forms</Text>
+  <Text>Buy tickets for a show. Each field sends onChange as you use it, and the page keeps its value in state. The page checks the form when you send it.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">Select</Text>
+    <View variant="card">
+      <Select label="Show" placeholder="Choose a show" hint="Every show has the same prices" value="{{ show }}" error="{{ errors.show }}" disabled="{{ sending }}" onChange="setShow">
+        <Option value="freetown" label="Salone Sounds Live · Freetown" />
+        <Option value="bo" label="Palm-wine evening · Bo" />
+        <Option value="kenema" label="Gospel night · Kenema" />
+      </Select>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Input</Text>
+    <Text variant="caption" tone="muted">type sets the keyboard: text, email, phone, number or password. prefix and suffix sit inside the field. error shows under it.</Text>
+    <View variant="card">
+      <Input label="Name" placeholder="Mariama Kamara" value="{{ name }}" maxLength="40" onChange="setName" />
+      <Input label="Email" type="email" placeholder="mariama@example.com" hint="{{ eTickets ? 'For the e-tickets' : 'Turn on e-tickets below to use it' }}" value="{{ email }}" disabled="{{ !eTickets }}" onChange="setEmail" />
+      <Input label="Phone" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" error="{{ errors.phone }}" onChange="setPhone" />
+      <Input label="Promo code" type="password" placeholder="Hidden as you type" value="{{ promo }}" onChange="setPromo" onSubmit="send" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Stepper</Text>
+    <Text variant="caption" tone="muted">A count changed one at a time. min and max keep it in range, so there's nothing to check.</Text>
+    <View variant="card">
+      <Stepper label="Tickets" min="1" max="10" hint="At most 10 for each person" value="{{ tickets }}" onChange="setTickets" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">RadioGroup and Radio</Text>
+    <Text variant="caption" tone="muted">One choice from a few. A Radio, or the whole group, can be disabled.</Text>
+    <View variant="card">
+      <RadioGroup label="Ticket" value="{{ ticket }}" disabled="{{ sending }}" onChange="setTicket">
+        <Radio value="regular" label="Regular · Le 150" />
+        <Radio value="vip" label="VIP, near the stage · Le 400" />
+        <Radio value="table" label="Table for four · Le 1,200" />
+        <Radio value="backstage" label="Backstage · sold out" disabled />
+      </RadioGroup>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">TextArea</Text>
+    <View variant="card">
+      <TextArea label="Shout-out" placeholder="A message for the band, read out on the night" rows="3" maxLength="140" hint="{{ ticket === 'regular' ? 'Shout-outs come with VIP and table tickets' : shoutOut.length + ' of 140' }}" value="{{ shoutOut }}" error="{{ errors.shoutOut }}" disabled="{{ ticket === 'regular' }}" onChange="setShoutOut" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Slider</Text>
+    <Text variant="caption" tone="muted">A number between min and max, in steps. showValue shows it beside the label.</Text>
+    <View variant="card">
+      <Slider label="Chairs near the stage" min="0" max="10" showValue value="{{ chairs }}" disabled="{{ ticket === 'regular' }}" hint="{{ ticket === 'regular' ? 'Chairs come with VIP and table tickets' : '' }}" onChange="setChairs" />
+      <Slider label="Tip for the band, in leones" min="0" max="100" step="10" showValue value="{{ tip }}" onChange="setTip" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Switch and Checkbox</Text>
+    <View variant="card">
+      <Switch label="Email me the e-tickets" checked="{{ eTickets }}" onChange="setETickets" />
+      <Switch label="Text me on the night" disabled />
+      <Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
+      <Checkbox label="I'm over 18" checked disabled />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Your order</Text>
+    <View variant="card" gap="none">
+      <DetailRow label="Show" value="{{ showName }}" />
+      <DetailRow label="Ticket" value="{{ ticketName }}" />
+      <DetailRow label="How many" value="{{ tickets }}" />
+      <Divider />
+      <DetailRow label="Total" value="{{ total }}" weight="bold" paddingTop="medium" />
+      <DetailRow label="Paid" value="{{ sent ? 'Yes' : 'Not yet' }}" tone="{{ sent ? 'success' : 'warning' }}" />
+    </View>
+  </View>
+
+  <If condition="{{ sent }}">
+    <Notice tone="success" title="Booked">{{ sent }}</Notice>
+  </If>
+  <If condition="{{ failure }}">
+    <Notice tone="danger" title="Not booked">{{ failure }}</Notice>
+  </If>
+
+  <Text variant="caption" tone="muted">A Footer keeps its buttons at the bottom of the screen.</Text>
+  <Footer>
+    <Button onClick="send" loading="{{ sending }}" disabled="{{ !agreed }}">Buy tickets</Button>
+  </Footer>
+</View>

package/dist/templates/showcase/pages/components/icons/controller.ts

@@ -0,0 +1,15 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  configs: { navigationBar: { title: 'Icons' } },
+  mutations: {
+    clearToast: () => ({ toast: '' }),
+  },
+  actions: {
+    async copyName(_state, event: DataEvent<{ name: string }>) {
+      await this.dash.system.copyText(event.data.name);
+      this.setState({ toast: `Copied "${event.data.name}"` });
+    },
+  },
+});

package/dist/templates/showcase/pages/components/icons/state.ts

@@ -0,0 +1,75 @@
+export default {
+  // Every icon name, as Icon's name, and ListItem's, Chip's, GridItem's and EmptyState's icon take.
+  names: [
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'bank',
+    'bell',
+    'bolt',
+    'calendar',
+    'card',
+    'cart',
+    'cash',
+    'check',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'clock',
+    'close',
+    'copy',
+    'download',
+    'edit',
+    'error',
+    'external-link',
+    'eye',
+    'eye-off',
+    'file',
+    'gift',
+    'globe',
+    'grid',
+    'headphones',
+    'heart',
+    'help',
+    'history',
+    'home',
+    'image',
+    'info',
+    'link',
+    'list',
+    'location',
+    'lock',
+    'logout',
+    'mail',
+    'microphone',
+    'minus',
+    'mobile',
+    'more',
+    'music',
+    'phone',
+    'playlist',
+    'plus',
+    'qr-code',
+    'receipt',
+    'refresh',
+    'search',
+    'send',
+    'settings',
+    'share',
+    'star',
+    'success',
+    'ticket',
+    'trash',
+    'upload',
+    'user',
+    'users',
+    'video',
+    'wallet',
+    'warning',
+    'water',
+    'wifi',
+  ],
+  toast: '',
+};

package/dist/templates/showcase/pages/components/icons/view.dml

@@ -0,0 +1,36 @@
+<View>
+  <Text variant="title">Icons</Text>
+  <Text>Icon shows a small picture by its name. Lists, chips, grids and empty states take the same names.</Text>
+
+  <View gap="small">
+    <Text variant="subtitle">size and tone</Text>
+    <View variant="card" direction="row" wrap gap="large" align="center">
+      <Icon name="music" size="small" />
+      <Icon name="music" size="medium" />
+      <Icon name="music" size="large" />
+      <Icon name="info" tone="info" />
+      <Icon name="success" tone="success" />
+      <Icon name="warning" tone="warning" />
+      <Icon name="error" tone="danger" />
+      <Icon name="star" tone="muted" />
+      <Icon name="heart" tone="default" />
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">Every name</Text>
+    <Text variant="caption" tone="muted">Tap one to copy its name.</Text>
+    <View variant="card">
+      <Grid columns="3" gap="medium">
+        <For each="{{ names }}" item="name" key="*this">
+          <View align="center" gap="small" padding="small" data-name="{{ name }}" onTap="copyName">
+            <Icon name="{{ name }}" />
+            <Text variant="caption" tone="muted" align="center">{{ name }}</Text>
+          </View>
+        </For>
+      </Grid>
+    </View>
+  </View>
+
+  <Toast message="{{ toast }}" tone="success" onHide="clearToast" />
+</View>