@prestack/thread-ui 0.1.10 → 0.1.12

package/dist/ui/elements/select.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { does } from './select.works.ts'
-
-
-export interface SelectProps {
-  readonly labelKey: MessageKey
-  readonly options: readonly Row[]
-  readonly value?: string
-  readonly onValue?: (said: string) => void
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Select: Element<'Select', SelectProps> = element(
-  'Select',
-  (props: SelectProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <label className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
-        <span>{surface.text(props.labelKey)}</span>
-        {props.value === undefined ? null : <select disabled={surface.marked('disabled')} value={props.value ?? ''} onChange={(event) => does(props).chose(event.target.value)}>
-          <Each rows={props.options} by={props.value}>
-            {(each0, at) => (
-              <option value={String(each0.value)}>{surface.text(String(each0.labelKey))}</option>
-            )}
-          </Each>
-        </select>}
-      </label>
-    )
-  },
-  'e-select',
-  {"input":"thread-input"},
-)

package/dist/ui/elements/select.works.ts

@@ -1,5 +0,0 @@
-import type { SelectProps } from './select.tsx'
-
-export function does(props: SelectProps): { readonly chose: (value: string) => void } {
-  return { chose: (value: string) => props.onValue?.(value) }
-}

package/dist/ui/elements/separator.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface SeparatorProps {
-  readonly labelKey?: MessageKey
-  readonly orientation?: string
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Separator: Element<'Separator', SeparatorProps> = element(
-  'Separator',
-  (props: SeparatorProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role="separator" aria-orientation={props.orientation === 'vertical' ? 'vertical' : 'horizontal'}>
-        {props.labelKey === undefined ? null : <span>{surface.text(props.labelKey)}</span>}
-      </div>
-    )
-  },
-  'e-separator',
-  {"rule":"thread-rule"},
-)

package/dist/ui/elements/skeleton.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface SkeletonProps {
-  readonly lines?: number
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Skeleton: Element<'Skeleton', SkeletonProps> = element(
-  'Skeleton',
-  (props: SkeletonProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} aria-hidden="true">
-        {Array.from({ length: Math.max(1, props.lines ?? 1) }, (_, at) => (
-            <span></span>
-        ))}
-      </span>
-    )
-  },
-  'e-skeleton',
-  {"skeletonBlock":"thread-skeleton-block"},
-)

package/dist/ui/elements/slider.tsx

@@ -1,34 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { does } from './slider.works.ts'
-
-
-export interface SliderProps {
-  readonly labelKey: MessageKey
-  readonly value?: number
-  readonly min?: number
-  readonly max?: number
-  readonly step?: number
-  readonly onValue?: (said: number) => void
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Slider: Element<'Slider', SliderProps> = element(
-  'Slider',
-  (props: SliderProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <input className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} type="range" disabled={surface.marked('disabled')} value={props.value ?? 0} onChange={(event) => does(props).moved(Number(event.target.value))} min={props.min} max={props.max} step={props.step ?? 1} aria-label={surface.text(props.labelKey)} />
-    )
-  },
-  'e-slider',
-  {"input":"thread-input"},
-)

package/dist/ui/elements/slider.works.ts

@@ -1,5 +0,0 @@
-import type { SliderProps } from './slider.tsx'
-
-export function does(props: SliderProps): { readonly moved: (to: number) => void } {
-  return { moved: (to: number) => props.onValue?.(to) }
-}

package/dist/ui/elements/sparkline.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { drawing, uses } from './sparkline.works.ts'
-
-
-export interface SparklineProps {
-  readonly rows: readonly Row[]
-  readonly value: string
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Sparkline: Element<'Sparkline', SparklineProps> = element(
-  'Sparkline',
-  (props: SparklineProps, className) => {
-    const kept = uses(props)
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(kept.holds ?? []),
-    ],
-    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
-    return (
-      <svg className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} aria-hidden="true">
-        <polyline {...drawing(props, kept)}></polyline>
-      </svg>
-    )
-  },
-  'e-sparkline',
-  {"card":"thread-card"},
-)

package/dist/ui/elements/sparkline.works.ts

@@ -1,32 +0,0 @@
-import { num, polyline, useRamp } from '../charts.tsx'
-import type { Row } from '../charts.tsx'
-import type { SparklineProps } from './sparkline.tsx'
-
-const WIDE = 100
-const TALL = 24
-
-export function uses(props: SparklineProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-  readonly ramp: readonly string[]
-} {
-  const ramp = useRamp(1)
-  return {
-    ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}),
-    on: { viewBox: `0 0 ${String(WIDE)} ${String(TALL)}` },
-    ramp,
-  }
-}
-
-export function drawing(
-  props: SparklineProps,
-  kept: { readonly ramp: readonly string[] },
-): Readonly<Record<string, string | number>> {
-  return {
-    points: polyline(props.rows.map((one: Row) => num(one, props.value)), WIDE, TALL),
-    fill: 'none',
-    stroke: kept.ramp[0] ?? 'currentColor',
-    strokeWidth: 2,
-  }
-}

package/dist/ui/elements/spinner.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface SpinnerProps {
-  readonly labelKey: MessageKey
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Spinner: Element<'Spinner', SpinnerProps> = element(
-  'Spinner',
-  (props: SpinnerProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      'spinner' as const,
-    ], })
-    return (
-      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} aria-label={surface.text(props.labelKey)}>
-        {null}
-      </span>
-    )
-  },
-  'e-spinner',
-  {"spinnerTurning":"thread-spinner-turning"},
-)

package/dist/ui/elements/stack.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface StackProps {
-  readonly children: ReactNode
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Stack: Element<'Stack', StackProps> = element(
-  'Stack',
-  (props: StackProps, className) => {
-    const surface = useSurface({ className,
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
-        {props.children}
-      </div>
-    )
-  },
-  'e-stack',
-  {},
-)

package/dist/ui/elements/stat.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { shown } from './stat.works.ts'
-
-
-export interface StatProps {
-  readonly labelKey: MessageKey
-  readonly value?: unknown
-  readonly compare?: number
-  readonly format?: string
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Stat: Element<'Stat', StatProps> = element(
-  'Stat',
-  (props: StatProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <figure className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
-        <span>{shown(props, surface).figure}</span>
-        <figcaption>{surface.text(props.labelKey)}</figcaption>
-        <span>{shown(props, surface).delta}</span>
-      </figure>
-    )
-  },
-  'e-stat',
-  {"statTile":"thread-stat-tile"},
-)

package/dist/ui/elements/stat.works.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { formatValue } from '../validators.ts'
-import type { StatProps } from './stat.tsx'
-
-export function shown(props: StatProps, _surface: unknown): Readonly<Record<string, ReactNode>> {
-  const current = typeof props.value === 'number' ? props.value : Number(props.value ?? 0)
-  const against = props.compare
-  const moved = against === undefined || against === 0 ? null : (current - against) / Math.abs(against)
-  return {
-    figure: formatValue(props.format ?? 'number', props.value),
-    delta: moved === null ? null : formatValue('percent', Math.round(moved * 1000) / 10),
-  }
-}

package/dist/ui/elements/surface.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { uses } from './surface.works.ts'
-
-
-export interface SurfaceProps {
-  readonly children: ReactNode
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Surface: Element<'Surface', SurfaceProps> = element(
-  'Surface',
-  (props: SurfaceProps, className) => {
-    const kept = uses(props)
-    const surface = useSurface({ className,
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(kept.holds ?? []),
-    ],
-    animates: true,
-    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
-        {props.children}
-      </div>
-    )
-  },
-  'e-surface',
-  {"card":"thread-card"},
-)

package/dist/ui/elements/surface.works.ts

@@ -1,9 +0,0 @@
-import { useVisibility } from '../wrappers.tsx'
-
-export function uses(_props: unknown): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on: { readonly ref: (node: HTMLElement | null) => void }
-} {
-  return { on: { ref: useVisibility(true) } }
-}

package/dist/ui/elements/table.tsx

@@ -1,62 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { shown, heading, uses } from './table.works.ts'
-
-
-export interface TableProps {
-  readonly rows: readonly Row[]
-  readonly columns: readonly Row[]
-  readonly by: string
-  readonly titleKey?: MessageKey
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Table: Element<'Table', TableProps> = element(
-  'Table',
-  (props: TableProps, className) => {
-    const kept = uses(props)
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(kept.holds ?? []),
-    ],
-    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
-    return (
-      <table className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
-        <thead>
-          <tr>
-            <Each rows={props.columns} by={'field'}>
-              {(each0, at) => (
-                <th {...heading(props, kept, each0, at)}>{shown(props, each0, surface, kept).heading}</th>
-              )}
-            </Each>
-          </tr>
-        </thead>
-        <tbody>
-          <Each rows={props.rows} by={props.by}>
-            {(each0, at) => (
-              <tr>
-                <Each rows={props.columns} by={'field'}>
-                  {(each1, at) => (
-                    <td>{shown(props, each0, each1, surface, kept).cell}</td>
-                  )}
-                </Each>
-              </tr>
-            )}
-          </Each>
-        </tbody>
-      </table>
-    )
-  },
-  'e-table',
-  {"card":"thread-card"},
-)

package/dist/ui/elements/table.works.ts

@@ -1,30 +0,0 @@
-import { formatValue } from '../validators.ts'
-import type { ReactNode } from 'react'
-
-import type { Row } from '../charts.tsx'
-import type { Surface } from '../door.ts'
-import type { TableProps } from './table.tsx'
-
-export function uses(props: TableProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-} {
-  return props.rows.length === 0 ? { holds: ['empty'] } : {}
-}
-
-export function shown(
-  _props: TableProps,
-  ...rest: readonly [Row, Surface, unknown] | readonly [Row, Row, Surface, unknown]
-): Readonly<Record<string, ReactNode>> {
-  if (rest.length === 3) {
-    const [column, surface] = rest
-    return { heading: surface.text(String(column['labelKey'])) }
-  }
-  const [row, column] = rest
-  return { cell: formatValue(String(column['format'] ?? 'text'), row[String(column['field'])]) }
-}
-
-export function heading(_props: TableProps, _kept: unknown, _column: Row, _at: number): Readonly<Record<string, string>> {
-  return { scope: 'col' }
-}

package/dist/ui/elements/tabs.tsx

@@ -1,47 +0,0 @@
-'use client'
-
-import { roleClass } from '../fonts.ts'
-import type { TabItem } from '../disclosure.tsx'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { shown, strip, tab, panel, opened, uses } from './tabs.works.ts'
-
-
-export interface TabsProps {
-  readonly items: readonly TabItem[]
-  readonly initial?: string
-  readonly onChange?: (said: string) => void
-  readonly orientation?: string
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Tabs: Element<'Tabs', TabsProps> = element(
-  'Tabs',
-  (props: TabsProps, className) => {
-    const kept = uses(props)
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(kept.holds ?? []),
-    ],
-    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
-    return (
-      <div {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
-        <div className={`e-tabs-strip ${surface.className ?? ''}`} {...strip(props, kept)}>
-          <Each rows={props.items} by={'id'}>
-            {(each0, at) => (
-              <button className="e-tabs-tab" {...tab(props, kept, each0, at)}>{shown(props, each0, surface, kept).label}</button>
-            )}
-          </Each>
-        </div>
-        {!opened(props, kept) ? null : <div {...panel(props, kept)}>{shown(props, surface, kept).inside}</div>}
-      </div>
-    )
-  },
-  'e-tabs',
-  {"tabBar":"thread-tab-bar"},
-)

package/dist/ui/elements/tabs.works.ts

@@ -1,84 +0,0 @@
-import { useId, useRef, useState } from 'react'
-
-import { ITEM_ATTR, useRovingFocus } from '../roving-focus.ts'
-import type { ReactNode, RefObject } from 'react'
-
-import type { Row } from '../charts.tsx'
-import type { Surface } from '../door.ts'
-import type { TabsProps } from './tabs.tsx'
-
-type Kept = {
-  readonly list: RefObject<HTMLDivElement | null>
-  readonly base: string
-  readonly open: string | undefined
-  readonly choose: (id: string) => void
-}
-
-export function uses(props: TabsProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-  readonly list: RefObject<HTMLDivElement | null>
-  readonly base: string
-  readonly open: string | undefined
-  readonly choose: (id: string) => void
-} {
-  const list = useRef<HTMLDivElement>(null)
-  const base = useId()
-  const first = props.items.find((one) => one.disabled !== true)?.id
-  const [active, setActive] = useState<string | undefined>(props.initial ?? first)
-  useRovingFocus(list, { orientation: props.orientation === 'vertical' ? 'vertical' : 'horizontal' })
-
-  const open = props.items.find((one) => one.id === active) ?? props.items.find((one) => one.disabled !== true)
-  return {
-    list,
-    base,
-    open: open?.id,
-    choose: (id: string): void => {
-      setActive(id)
-      props.onChange?.(id)
-    },
-  }
-}
-
-export function strip(props: TabsProps, kept: Kept): Readonly<Record<string, unknown>> {
-  return { ref: kept.list, role: 'tablist', 'aria-orientation': props.orientation === 'vertical' ? 'vertical' : 'horizontal' }
-}
-
-export function tab(_props: TabsProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
-  const id = String(row['id'])
-  return {
-    ...{ [ITEM_ATTR]: '' },
-    type: 'button',
-    role: 'tab',
-    id: `${kept.base}-tab-${id}`,
-    'aria-controls': `${kept.base}-panel-${id}`,
-    'aria-selected': id === kept.open,
-    disabled: row['disabled'] === true,
-    onClick: (): void => kept.choose(id),
-  }
-}
-
-export function opened(_props: TabsProps, kept: Kept): boolean {
-  return kept.open !== undefined
-}
-
-export function panel(_props: TabsProps, kept: Kept): Readonly<Record<string, unknown>> {
-  return {
-    role: 'tabpanel',
-    id: `${kept.base}-panel-${String(kept.open)}`,
-    'aria-labelledby': `${kept.base}-tab-${String(kept.open)}`,
-  }
-}
-
-export function shown(
-  props: TabsProps,
-  ...rest: readonly [Surface, Kept] | readonly [Row, Surface, Kept]
-): Readonly<Record<string, ReactNode>> {
-  if (rest.length === 3) {
-    const [row, surface] = rest
-    return { label: surface.text(String(row['labelKey'])) }
-  }
-  const [, kept] = rest
-  return { inside: props.items.find((one) => one.id === kept.open)?.content ?? null }
-}

package/dist/ui/elements/text.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass, type FontRoleId } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface TextProps {
-  readonly k: MessageKey
-  readonly with?: Readonly<Record<string, unknown>>
-  readonly is?: FontRoleId
-  readonly announce?: 'alert' | 'status'
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Text: Element<'Text', TextProps> = element(
-  'Text',
-  (props: TextProps, className) => {
-    const surface = useSurface({ className: roleClass(props.is, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role={props.announce}>
-        {surface.text(props.k, props.with)}
-      </span>
-    )
-  },
-  'e-text',
-  {},
-)