@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/internal/InputGroup.ts

@@ -4,7 +4,7 @@ import { variants, vars } from '../../zyzz.config.js'
 
 export type Value = { control: RefObject<HTMLInputElement | null>; invalid: boolean }
 
-/** Shared by Input parts and AmountInput so Control and Clear reach the same element. */
+/** Shared by TextInput parts and AmountInput so Control and Clear reach the same element. */
 export const Context = createContext<Value | undefined>(undefined)
 
 /**
@@ -66,7 +66,7 @@ const nudge = keyframes(
     '60%': { transform: 'translateX(-3px) !custom' },
     '80%': { transform: 'translateX(2px) !custom' },
   },
-  { id: 'tds/web/input/nudge' },
+  { id: 'tds/web/text-input/nudge' },
 )
 
 // The OtpField pop shape, scaled down because a full-width field grows far more than a slot.
@@ -75,40 +75,48 @@ const pop = keyframes(
     '0%, 100%': { transform: 'scale(1) !custom' },
     '45%': { transform: 'scale(1.02) !custom' },
   },
-  { id: 'tds/web/input/pop' },
+  { id: 'tds/web/text-input/pop' },
 )
 
 export namespace styles {
   /**
-   * The text field surface of `Input.Group` and `Select.Trigger`. Its `size` scale matches
-   * `Field.styles.field` and the `Button` heights: 32, 40 and 56px.
+   * The 48px text field surface of `TextInput.Group`, `Select.Trigger` and `AmountInput.Root`. It
+   * matches `Field.styles.field`: `default` fills the field and `outlined` draws a 1px line instead.
    */
   export const group = variants(
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
+        backgroundColor: 'container.regular',
+        borderRadius: 'xs',
         borderStyle: 'none',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        columnGap: '8',
         display: 'flex',
+        height: '48',
+        // Forced colors paint transparent outlines, so this outline is the focus ring only there.
         outlineColor: 'transparent !custom',
         outlineOffset: '2',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
+        paddingBlock: '0',
+        paddingInline: '16',
         position: 'relative',
         transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
+        typography: 'body.b2',
         selectors: {
-          // The invalid ring fades in on an inset border, so focus changes only the outline color.
+          // The focus border is inset, so focus never moves the content.
           '&::before': {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2',
+            borderWidth: 'regular',
             boxSizing: 'border-box',
             content: '"" !custom',
+            cornerShape: 'inherit !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
@@ -116,36 +124,35 @@ export namespace styles {
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
-          '&:is(button)': {
-            cursor: 'pointer',
-            paddingBlock: '0',
-            textAlign: 'start',
-            width: '100% !custom',
+          // The success state ends the field with a check, drawn from the `CheckCircle` icon.
+          '&:is([data-success], [data-success] *)::after': {
+            backgroundColor: 'content.primary',
+            content: '"" !custom',
+            flexShrink: '0 !custom',
+            height: '16',
+            mask: 'url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M9.61328 6.0166C9.78817 5.80309 10.1037 5.77154 10.3174 5.94629C10.5306 6.12107 10.562 6.43583 10.3877 6.64941L7.3877 10.3164C7.2983 10.4257 7.16637 10.4919 7.02539 10.499C6.8843 10.5061 6.74637 10.4534 6.64648 10.3535L5.31348 9.01953C5.11845 8.82425 5.11829 8.50768 5.31348 8.3125C5.50869 8.11767 5.82534 8.11759 6.02051 8.3125L6.96191 9.25488L9.61328 6.0166Z%27/%3E%3Cpath fill-rule=%27evenodd%27 d=%27M8 1.33301C11.6817 1.33318 14.666 4.31919 14.666 8.00098C14.6656 11.6824 11.6815 14.6668 8 14.667C4.31837 14.667 1.33345 11.6825 1.33301 8.00098C1.33301 4.31908 4.3181 1.33301 8 1.33301ZM8 2.33398C4.87039 2.33398 2.33301 4.87137 2.33301 8.00098C2.33345 11.1302 4.87066 13.667 8 13.667C11.1292 13.6668 13.6656 11.1301 13.666 8.00098C13.666 4.87147 11.1294 2.33416 8 2.33398Z%27/%3E%3C/svg%3E") center / contain no-repeat !custom',
+            width: '16',
           },
+          '&:is(button)': { cursor: 'pointer', textAlign: 'start', width: '100% !custom' },
           '&:is(button):active:not(:disabled, [data-disabled])': {
             scale: 'press',
             transitionDuration: '100',
           },
-          '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
-            backgroundColor: 'grayAlpha.200',
+          // `:where` keeps hover and focus fills below the invalid and disabled fills.
+          '&:where(:hover:not(:disabled, [data-disabled], :has(input:disabled)))': {
+            backgroundColor: 'container.strong',
           },
-          '&:disabled, &[data-disabled], &:has(input:disabled)': {
-            cursor: 'default',
-            opacity: 'disabled',
+          '&:where(:focus-visible, :has(input:focus-visible))': {
+            backgroundColor: 'background.elevated',
           },
-          '&:focus-visible, &:has(input:focus-visible)': { outlineColor: 'blue.700' },
-          // Success and invalid draw one ring: inset at rest, and the outline instead while focused.
-          '&[data-success], [data-success] &': { backgroundColor: 'green.200' },
-          '&:is([data-success], [data-success] *):hover:not(:disabled, [data-disabled], :has(input:disabled))':
-            { backgroundColor: 'green.300' },
-          '&[data-success]::before, [data-success] &::before': { borderColor: 'green.700' },
-          '&[data-success]:is(:focus-visible, :has(input:focus-visible)), [data-success] &:is(:focus-visible, :has(input:focus-visible))':
-            { outlineColor: 'green.700' },
-          '&[data-invalid]::before, [data-invalid] &::before': { borderColor: 'red.800' },
-          '&[data-invalid]:is(:focus-visible, :has(input:focus-visible)), [data-invalid] &:is(:focus-visible, :has(input:focus-visible))':
-            { outlineColor: 'red.800' },
           '&:is(:focus-visible, :has(input:focus-visible))::before': {
-            borderColor: 'transparent !custom',
+            borderColor: 'border.focus',
+          },
+          '&[data-invalid], [data-invalid] &': { backgroundColor: 'container.negative' },
+          '&:disabled, &[data-disabled], &:has(input:disabled)': {
+            backgroundColor: 'container.subtle',
+            color: 'content.subtle',
+            cursor: 'default',
           },
           '&[data-entered="invalid"]': {
             animation: `${nudge} 360ms ${vars.ease.snappy} !custom`,
@@ -153,28 +160,7 @@ export namespace styles {
           '&[data-entered="success"]': {
             animation: `${pop} 320ms ${vars.ease.overshoot} !custom`,
           },
-          // Card sizes: medium is the default card. Small and large scale the padding and radius.
-          '&[data-variant="card"][data-size="small"]': {
-            borderRadius: '8',
-            paddingBlock: '12',
-            paddingInline: '12',
-          },
-          '&[data-variant="card"][data-size="large"]': {
-            borderRadius: '16',
-            paddingBlock: '24',
-            paddingInline: '24',
-          },
-          '[data-variant="stacked"] > &': { gridArea: '1 / 1' },
-          // A 32px field has no room for the floating label, so a small stacked field takes the medium size.
-          '[data-variant="stacked"] > &[data-size="small"]': {
-            borderRadius: '12',
-            columnGap: '8',
-            height: '40',
-            paddingInline: '16',
-            typography: 'copy.14',
-          },
         },
-        // Forced colors paint transparent outlines, so the ring exists only while focused there.
         '@media (forced-colors: active)': {
           outlineStyle: 'none !custom',
           selectors: {
@@ -189,64 +175,21 @@ export namespace styles {
           },
         },
       },
-      defaultVariants: { size: 'medium', variant: 'default' },
+      defaultVariants: { variant: 'default' },
       variants: {
-        size: {
-          large: {
-            borderRadius: '16',
-            columnGap: '12',
-            height: '56',
-            paddingInline: '20',
-            typography: 'copy.16',
-          },
-          medium: {
-            borderRadius: '12',
-            columnGap: '8',
-            height: '40',
-            paddingInline: '16',
-            typography: 'copy.14',
-          },
-          small: {
-            borderRadius: '8',
-            columnGap: '6',
-            height: '32',
-            paddingInline: '12',
-            typography: 'copy.13',
-          },
-        },
-        // Declared after `size` so card overrides its height, padding and radius.
         variant: {
-          card: {
-            backgroundColor: 'background.surface',
-            borderColor: 'grayAlpha.200',
-            borderRadius: '12',
-            borderStyle: 'solid',
-            borderWidth: '1',
-            height: 'auto !custom',
-            minHeight: '56',
-            paddingBlock: '16',
-            paddingInline: '16',
-            selectors: {
-              '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
-                backgroundColor: 'background.surface',
-                borderColor: 'grayAlpha.400',
-              },
-            },
-          },
           default: {},
-          // Fills only on hover, for a picker inside a row. As a button, it sizes to its content.
-          text: {
+          // A 1px line and no fill. Focus darkens the line, and an invalid value fills it red.
+          outlined: {
             backgroundColor: 'transparent !custom',
             selectors: {
-              '&:is(button)': { width: 'auto !custom' },
-              '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
-                backgroundColor: 'grayAlpha.100',
-              },
+              '&::before': { borderColor: 'line.primary' },
+              '&:is([data-invalid], [data-invalid] *)::before': { borderColor: 'border.negative' },
             },
           },
         },
       },
     },
-    { id: 'tds/web/input/group' },
+    { id: 'tds/web/text-input/group' },
   )
 }

package/src/web/components/internal/Listbox.ts

@@ -3,10 +3,10 @@ import { style, variants } from '../../zyzz.config.js'
 export namespace styles {
   export const empty = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       paddingBlock: '12',
       paddingInline: '16',
-      typography: 'copy.14',
+      typography: 'body.b2',
       selectors: { '&:empty': { display: 'none' } },
     },
     { id: 'tds/web/listbox/empty' },
@@ -19,10 +19,10 @@ export namespace styles {
 
   export const groupLabel = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       paddingBlock: '8',
       paddingInline: '16',
-      typography: 'label.12',
+      typography: 'body.b3',
     },
     { id: 'tds/web/listbox/group-label' },
   )
@@ -54,10 +54,10 @@ export namespace styles {
   export const item = style(
     {
       alignItems: 'center',
-      // Concentric with the popup: its 16px radius minus its 6px padding.
-      borderRadius: '10',
+      // One radius step below the popup, as the design rounds options: its `sm` less its 4px padding.
+      borderRadius: 'xs',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       columnGap: '12',
       cursor: 'pointer',
       display: 'flex',
@@ -68,11 +68,11 @@ export namespace styles {
       transitionDuration: '120',
       transitionProperty: 'background-color, opacity !custom',
       transitionTimingFunction: 'snappy',
-      typography: 'label.14.strong',
+      typography: 'body.b2Strong',
       userSelect: 'none',
       selectors: {
         '&[data-disabled]': { cursor: 'default', opacity: 'disabled', pointerEvents: 'none' },
-        '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
+        '&[data-highlighted]': { backgroundColor: 'container.regular' },
       },
     },
     { id: 'tds/web/listbox/item' },
@@ -86,23 +86,23 @@ export namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'background.raised',
-        borderRadius: '16',
-        boxShadow: 'popover',
+        backgroundColor: 'background.elevated',
+        borderRadius: 'sm',
+        boxShadow: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         maxHeight: 'min(var(--available-height), 20rem) !custom',
         minWidth: 'var(--anchor-width) !custom',
         opacity: '1 !custom',
         outline: 'none !custom',
         overflowY: 'auto',
         overscrollBehavior: 'contain !custom',
-        padding: '6',
+        padding: '4',
         transformOrigin: 'var(--transform-origin) !custom',
         transitionDuration: '240',
         transitionProperty: 'opacity, scale !custom',
         transitionTimingFunction: 'spring',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
           '&[data-ending-style]': {
             opacity: '0 !custom',
@@ -128,7 +128,7 @@ export namespace styles {
         // Options follow the shared control scale: 32, 40 and 56px.
         size: {
           large: {
-            selectors: { '& [role="option"]': { minHeight: '56', typography: 'label.16.strong' } },
+            selectors: { '& [role="option"]': { minHeight: '56', typography: 'body.b1Strong' } },
           },
           medium: {},
           small: {
@@ -136,7 +136,7 @@ export namespace styles {
               '& [role="option"]': {
                 minHeight: '32',
                 paddingBlock: '4',
-                typography: 'label.13.strong',
+                typography: 'body.b3Strong',
               },
             },
           },
@@ -155,7 +155,7 @@ export namespace styles {
 
   export const separator = style(
     {
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'container.strong',
       height: '1',
       marginBlock: '8',
       marginInline: '16',
@@ -165,11 +165,11 @@ export namespace styles {
 
   export const suffix = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       flexShrink: '0 !custom',
       fontVariantNumeric: 'tabular-nums !custom',
       marginInlineStart: 'auto !custom',
-      typography: 'copy.13',
+      typography: 'body.b3',
     },
     { id: 'tds/web/listbox/suffix' },
   )

package/src/web/components/internal/RowDisabled.ts

@@ -0,0 +1,9 @@
+/**
+ * Marks controls inside a disabled static `ListGroup.Row`, whose `fieldset` disables native controls
+ * only, so a `span` control such as `Switch` disables itself.
+ * @module
+ */
+import { createContext } from 'react'
+
+/** Whether the component sits inside a disabled static `ListGroup.Row`. */
+export const Context = createContext(false)

package/src/web/components/internal/RowsSize.ts

@@ -1,10 +1,8 @@
 /**
- * Row size that `Rows.Root` passes to the rows and controls inside it.
+ * Marks controls inside a `ListGroup.Root`, whose 36px rows fit a small control.
  * @module
  */
 import { createContext } from 'react'
 
-export type Size = 'large' | 'medium' | 'small'
-
-/** Size of the enclosing `Rows.Root`, absent outside one. */
-export const Context = createContext<Size | undefined>(undefined)
+/** Whether the component sits inside a `ListGroup.Root`. */
+export const Context = createContext(false)

package/src/web/components/internal/TabBar.ts

@@ -0,0 +1,52 @@
+/**
+ * Holds the `SidebarMenu.Item` entries that `AppShell` repeats in its bottom bar below 768px. The
+ * store lives outside React state, so an item that registers on every render updates the bar
+ * without rendering the shell again.
+ * @module
+ */
+import type { useRender } from '@base-ui/react/use-render'
+import { createContext, type ReactNode } from 'react'
+
+/** The props of a `SidebarMenu.Item` that the bottom bar repeats, without its sidebar styles. */
+export type Entry = {
+  active: boolean
+  attributes: Readonly<Record<string, unknown>>
+  children: ReactNode
+  render: useRender.ComponentProps<'a'>['render']
+  variant: Variant
+}
+
+/** `tab` renders an icon in the tab bar, and `action` the floating action button beside it. */
+export type Variant = 'action' | 'tab'
+
+export type Store = ReturnType<typeof create>
+
+export const Context = createContext<Store | undefined>(undefined)
+
+/** Creates the store of one `AppShell.Root`. Entries keep the order in which they first register. */
+export function create() {
+  const entries = new Map<string, Entry>()
+  const listeners = new Set<() => void>()
+  let snapshot: readonly (readonly [string, Entry])[] = []
+
+  const notify = () => {
+    snapshot = [...entries]
+    for (const listener of listeners) listener()
+  }
+
+  return {
+    delete(id: string) {
+      if (!entries.delete(id)) return
+      notify()
+    },
+    set(id: string, entry: Entry) {
+      entries.set(id, entry)
+      notify()
+    },
+    snapshot: () => snapshot,
+    subscribe(listener: () => void) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}

package/src/web/components/internal/Text.ts

@@ -0,0 +1,39 @@
+/**
+ * Wraps each run of adjacent string and number children in one span, so a rule can hide a label
+ * as an element while the label still reads as one run, such as `Inbox ({count})`.
+ * @module
+ */
+import { Children, createElement, type HTMLAttributes, type ReactNode } from 'react'
+
+/** Returns `children` with each run of adjacent text wrapped in a span with `props`. */
+export function wrap(children: ReactNode, props: HTMLAttributes<HTMLSpanElement> = {}) {
+  const result: ReactNode[] = []
+  let run: (number | string)[] = []
+
+  // A run of only whitespace, such as the space between two elements on one JSX line, renders no
+  // flex item in a flex row, so it passes through unwrapped and adds no gap.
+  const flush = () => {
+    if (run.length === 0) return
+    if (run.every((part) => typeof part === 'string' && part.trim() === '')) {
+      result.push(...run)
+      run = []
+      return
+    }
+
+    result.push(createElement('span', { ...props, key: result.length }, ...run))
+    run = []
+  }
+
+  for (const child of Children.toArray(children)) {
+    if (typeof child === 'string' || typeof child === 'number') {
+      run.push(child)
+      continue
+    }
+
+    flush()
+    result.push(child)
+  }
+
+  flush()
+  return result
+}

package/src/web/components/visuals/Passkey.svg

@@ -0,0 +1,21 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="464" height="208" viewBox="0 0 464 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Fingerprint rings" clip-path="url(#clip0_0_5)">
+<g id="Group">
+<path id="Vector" d="M171 208V164C171 159.757 172.686 155.687 175.686 152.686C178.687 149.686 182.757 148 187 148C191.243 148 195.313 149.686 198.314 152.686C201.314 155.687 203 159.757 203 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="30 6"/>
+<path id="Vector_2" d="M155 208V164C155 155.513 158.371 147.374 164.373 141.373C170.374 135.371 178.513 132 187 132C195.487 132 203.626 135.371 209.627 141.373C215.629 147.374 219 155.513 219 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="52 8 14 8"/>
+<path id="Vector_3" d="M123 208V164C123 147.026 129.743 130.747 141.745 118.745C153.747 106.743 170.026 100 187 100C203.974 100 220.252 106.743 232.255 118.745C244.257 130.747 251 147.026 251 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="90 10 40 10"/>
+<path id="Vector_4" d="M107 208V164C107 142.783 115.429 122.434 130.431 107.431C145.434 92.4285 165.783 84 187 84C208.217 84 228.566 92.4285 243.569 107.431C258.571 122.434 267 142.783 267 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="60 12 120 8"/>
+<path id="Vector_5" d="M91 208V164C91 138.539 101.114 114.121 119.118 96.1178C137.121 78.1143 161.539 68 187 68C212.461 68 236.879 78.1143 254.882 96.1178C272.886 114.121 283 138.539 283 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="140 10 50 10"/>
+<path id="Vector_6" d="M75 208V164C75 134.296 86.8 105.808 107.804 84.804C128.808 63.8 157.296 52 187 52C216.704 52 245.192 63.8 266.196 84.804C287.2 105.808 299 134.296 299 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="80 14 160 10"/>
+<path id="Vector_7" d="M59 208V164C59 130.052 72.4857 97.495 96.4903 73.4903C120.495 49.4857 153.052 36 187 36C220.948 36 253.505 49.4857 277.51 73.4903C301.514 97.495 315 130.052 315 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="200 12 60 12"/>
+<path id="Vector_8" d="M43 208V164C43 125.809 58.1714 89.1819 85.1766 62.1766C112.182 35.1714 148.809 20 187 20C225.191 20 261.818 35.1714 288.823 62.1766C315.829 89.1819 331 125.809 331 164V208" stroke="black" stroke-opacity="0.14" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="120 16 220 12"/>
+</g>
+<path id="Highlight ring" d="M139 208V164C139 151.27 144.057 139.061 153.059 130.059C162.061 121.057 174.27 116 187 116C199.73 116 211.939 121.057 220.941 130.059C229.943 139.061 235 151.27 235 164V208" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
+<path id="Vector_9" d="M187 169C189.761 169 192 166.761 192 164C192 161.239 189.761 159 187 159C184.239 159 182 161.239 182 164C182 166.761 184.239 169 187 169Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_0_5">
+<rect width="464" height="208" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/index.ts

@@ -1,15 +1,20 @@
 export { Accordion } from './components/Accordion.js'
+export { AgentLogo } from './components/AgentLogo.js'
+export { Alert } from './components/Alert.js'
 export { AlertDialog } from './components/AlertDialog.js'
 export { Amount } from './components/Amount.js'
 export { AmountInput } from './components/AmountInput.js'
 export { AppShell } from './components/AppShell.js'
+export { AssetChip } from './components/AssetChip.js'
 export { Autocomplete } from './components/Autocomplete.js'
 export { Avatar } from './components/Avatar.js'
+export { Badge } from './components/Badge.js'
 export { Banner } from './components/Banner.js'
+export { BarChart } from './components/BarChart.js'
 export { Breadcrumbs } from './components/Breadcrumbs.js'
 export { Button } from './components/Button.js'
+export { ButtonGroup } from './components/ButtonGroup.js'
 export { Calendar } from './components/Calendar.js'
-export { Callout } from './components/Callout.js'
 export { Checkbox } from './components/Checkbox.js'
 export { CheckboxGroup } from './components/CheckboxGroup.js'
 export { Choicebox } from './components/Choicebox.js'
@@ -27,14 +32,15 @@ export { formatHex, Hex } from './components/Hex.js'
 export { Frame } from './components/Frame.js'
 export { Gauge } from './components/Gauge.js'
 export { Grid } from './components/Grid.js'
-export { IconChip } from './components/IconChip.js'
+export { IconTile } from './components/IconTile.js'
 export { Identicon } from './components/Identicon.js'
 export { Inline } from './components/Inline.js'
-export { Input } from './components/Input.js'
 export { Inset } from './components/Inset.js'
 export { Kbd } from './components/Kbd.js'
+export { ListGroup } from './components/ListGroup.js'
 export { LoadingDots } from './components/LoadingDots.js'
 export { Menu } from './components/Menu.js'
+export { NetworkLogo } from './components/NetworkLogo.js'
 export { NumberField } from './components/NumberField.js'
 export { OtpField } from './components/OtpField.js'
 export { Pagination } from './components/Pagination.js'
@@ -42,7 +48,6 @@ export { Popover } from './components/Popover.js'
 export { Progress } from './components/Progress.js'
 export { Qr } from './components/Qr.js'
 export { RadioGroup } from './components/RadioGroup.js'
-export { Rows } from './components/Rows.js'
 export { SecretValue } from './components/SecretValue.js'
 export { Select } from './components/Select.js'
 export { Separator } from './components/Separator.js'
@@ -51,17 +56,24 @@ export { Skeleton } from './components/Skeleton.js'
 export { Slider } from './components/Slider.js'
 export { Snippet } from './components/Snippet.js'
 export { Spinner } from './components/Spinner.js'
+export { SplitBar } from './components/SplitBar.js'
 export { SplitButton } from './components/SplitButton.js'
 export { Stack } from './components/Stack.js'
+export { StatusChip } from './components/StatusChip.js'
+export { StatusRow } from './components/StatusRow.js'
 export { Stepper } from './components/Stepper.js'
 export { style, variants, vars } from './zyzz.config.js'
-export { variables } from './vars.js'
 export { Surface } from './components/Surface.js'
 export { Switch } from './components/Switch.js'
 export { Table } from './components/Table.js'
 export { Tabs } from './components/Tabs.js'
-export { Tag } from './components/Tag.js'
+export { TempoLogo } from './components/TempoLogo.js'
 export { Textarea } from './components/Textarea.js'
+export { TextInput } from './components/TextInput.js'
 export { Toast } from './components/Toast.js'
 export { Token } from './components/Token.js'
+export { TokenLogo } from './components/TokenLogo.js'
 export { Tooltip } from './components/Tooltip.js'
+export { variables } from './vars.js'
+export { VerificationCode } from './components/VerificationCode.js'
+export { Visual } from './components/Visual.js'

package/src/web/logos/Base.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1280)">
+<path d="M4 6.27467C4 5.49467 4 5.10533 4.14667 4.80667C4.288 4.52 4.52 4.28667 4.808 4.14667C5.10667 4 5.496 4 6.27467 4H25.7253C26.5053 4 26.8933 4 27.1933 4.14667C27.48 4.28667 27.712 4.52 27.852 4.80667C28 5.10667 28 5.496 28 6.27467V25.7253C28 26.5053 28 26.8933 27.8533 27.1933C27.712 27.48 27.48 27.712 27.1933 27.852C26.8933 28 26.504 28 25.7253 28H6.27467C5.49467 28 5.10667 28 4.80667 27.8533C4.51999 27.7125 4.28828 27.4803 4.148 27.1933C4 26.8933 4 26.504 4 25.7253V6.27467Z" fill="#0000FF"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1280">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/Ethereum.svg

@@ -0,0 +1,16 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1292)">
+<rect width="32" height="32" fill="#627EEA"/>
+<path d="M16.498 4V12.87L23.995 16.22L16.498 4Z" fill="white" fill-opacity="0.602"/>
+<path d="M16.498 4L9 16.22L16.498 12.87V4Z" fill="white"/>
+<path d="M16.498 21.968V27.995L24 17.616L16.498 21.968Z" fill="white" fill-opacity="0.602"/>
+<path d="M16.498 27.995V21.967L9 17.616L16.498 27.995Z" fill="white"/>
+<path d="M16.498 20.5731L23.995 16.2201L16.498 12.8721V20.5731Z" fill="white" fill-opacity="0.2"/>
+<path d="M9 16.2201L16.498 20.5731V12.8721L9 16.2201Z" fill="white" fill-opacity="0.602"/>
+</g>
+<defs>
+<clipPath id="clip0_201_1292">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/web/logos/HyperEVM.svg

@@ -0,0 +1,27 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_201_1310)">
+<g clip-path="url(#clip1_201_1310)">
+<rect width="32" height="32" fill="#072723"/>
+<g clip-path="url(#clip2_201_1310)">
+<mask id="mask0_201_1310" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<path d="M0 0H32V32H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_201_1310)">
+<path d="M32 0H0V32H32V0Z" fill="#072723"/>
+<path d="M26.6667 15.9227C26.6831 17.6668 26.3191 19.3936 25.6 20.9827C24.5707 23.276 22.1067 25.152 19.8547 23.156C18.0187 21.5293 17.6787 18.2253 14.928 17.7427C11.2894 17.2987 11.2014 21.548 8.82404 22.028C6.17471 22.5707 5.29604 18.0813 5.33471 16.044C5.37471 14.0053 5.91204 11.14 8.21471 11.14C10.864 11.14 11.0427 15.1813 14.4067 14.9627C17.7374 14.7333 17.796 10.5293 19.972 8.72934C21.8494 7.17468 24.0587 8.31468 25.164 10.1867C26.1894 11.9173 26.64 13.9493 26.6627 15.9227H26.6667Z" fill="#50D2C1"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_201_1310">
+<path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_201_1310">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+<clipPath id="clip2_201_1310">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>