@purestack/ts-components 1.1.0

package/src/standard/signIn/signInStyle.ts

@@ -0,0 +1,70 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerSignInStyles() {
+  themes.forEach((theme, palette) => {
+    registerSignInDisclosureStyles(theme)
+    registerSignInAuthStateStyles(theme)
+    registerSignInPanelPlacementStyles(theme)
+    registerSignInAvatarStyles(theme, palette)
+  })
+}
+
+function registerSignInDisclosureStyles(theme: ThemeMode) {
+  styleBuilder.select('.sign-in', theme).display('inline-block').lineHeight('0')
+}
+
+function registerSignInAuthStateStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.sign-in__signed-out-view, .sign-in__signed-in-view', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .width('100%')
+    .height('100%')
+
+  styleBuilder
+    .select(
+      '.sign-in__signed-in-view, :scope.signed-in .sign-in__signed-out-view',
+      theme,
+    )
+    .display('none')
+
+  styleBuilder
+    .select(':scope.signed-in .sign-in__signed-in-view', theme)
+    .display('inline-flex')
+
+  styleBuilder
+    .select(
+      '.sign-in__signed-in-action, :scope.signed-in .sign-in__signed-out-action',
+      theme,
+    )
+    .display('none')
+
+  styleBuilder
+    .select(':scope.signed-in .sign-in__signed-in-action', theme)
+    .display('inline-flex')
+}
+
+function registerSignInPanelPlacementStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.sign-in__panel', theme)
+    .position('absolute')
+    .display('block')
+    .top('100%')
+    .right('0')
+    .zIndex(60)
+    .minWidth('11.25rem')
+}
+
+function registerSignInAvatarStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.sign-in__avatar', theme)
+    .display('block')
+    .objectFit('cover')
+    .borderRadius(palette.radii.pill)
+}

package/src/standard/tabs/tabs.ts

@@ -0,0 +1,193 @@
+import { tryResolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  isRef,
+  type RefOrValue,
+  ref,
+  unref,
+} from 'regor'
+import { createAutoId } from '../autoId'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+const defaultGroup = 'tabs-default'
+const DEFAULT_TABS_VARIANT_MODE: ComponentVariantMode = 'stateless'
+const resolveTabGroup = createAutoId(defaultGroup)
+const resolveTabId = createAutoId('tab')
+
+export class Tabs {
+  group: string = defaultGroup
+  ariaLabel?: RefOrValue<string>
+  selectedTab?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  tabVariant?: RefOrValue<ComponentVariant>
+  classes?: ComputedRef<string>
+}
+
+export interface TabPane {
+  id?: string
+  label?: RefOrValue<string>
+  icon?: RefOrValue<string>
+  disabled?: RefOrValue<boolean>
+  group?: string
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  tabVariant?: RefOrValue<ComponentVariant>
+  classes?: ComputedRef<string>
+  tabClasses?: ComputedRef<string>
+}
+
+const tabsTemplate = html`<section class="tabs" :class="classes">
+  <slot name="header"></slot>
+  <div class="tabs__list" role="tablist" :aria-label="ariaLabel || 'Tabs'">
+    <slot></slot>
+  </div>
+</section>`
+
+const tabPaneTemplate = html`<div class="tabs__item">
+  <input
+    class="tabs__control"
+    type="radio"
+    :name="group"
+    :id="id"
+    :value="id"
+    r-model="selectedTab"
+    :disabled="disabled"/>
+  <label
+    class="tabs__tab"
+    :class="tabClasses"
+    role="tab"
+    :id="id+'-label'"
+    :for="id"
+    :aria-controls="id+'-panel'"
+    :aria-selected="selectedTab === id"
+    :aria-disabled="disabled"
+  >
+    <Icon class="tabs__tab-icon" :name="icon"/>
+    <span class="tabs__tab-label">{{ label || id }}</span>
+  </label>
+  <section
+    class="tabs__panel"
+    :class="classes"
+    role="tabpanel"
+    :id="id+'-panel'"
+    :aria-labelledby="id+'-label'"
+  >
+    <div class="tabs__panel-body" :class="class">
+      <slot></slot>
+    </div>
+  </section>
+</div>`
+
+function defineTabsComponent() {
+  return defineComponent<Tabs>(tabsTemplate, {
+    props: [
+      'ariaLabel',
+      'group',
+      'selectedTab',
+      'tone',
+      'variant',
+      'variantMode',
+      'tabVariant',
+    ],
+    context: (head) => {
+      markTabsRuntimeEmbed(head)
+      return resolveTabs(head.props)
+    },
+  })
+}
+
+function defineTabPaneComponent() {
+  return defineComponent<TabPane>(tabPaneTemplate, {
+    props: [
+      'id',
+      'label',
+      'icon',
+      'disabled',
+      'group',
+      'tone',
+      'variant',
+      'variantMode',
+      'tabVariant',
+    ],
+    context: (head) => resolveTabPane(head),
+  })
+}
+
+export function defineTabsComponents() {
+  return {
+    tabs: defineTabsComponent(),
+    tabPane: defineTabPaneComponent(),
+  }
+}
+
+function resolveTabs(props: Tabs): Tabs {
+  const group = resolveTabGroup(unref(props.group))
+  const tabs = new Tabs()
+  const selectedTab = ensureSelectedTabIsRef(props.selectedTab)
+  return Object.assign(tabs, {
+    ...props,
+    group,
+    selectedTab,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: 'surface',
+        defaultVariantMode: DEFAULT_TABS_VARIANT_MODE,
+      }),
+    ),
+  })
+}
+
+function ensureSelectedTabIsRef(selectedTab?: RefOrValue<string>) {
+  return isRef(selectedTab) ? selectedTab : ref(selectedTab)
+}
+
+function resolveTabPane(head: ComponentHead<TabPane>): TabPane {
+  const fromParent = head.findContext(Tabs)
+  const group = head.props.group || fromParent?.group || defaultGroup
+  const id = resolveTabId(unref(head.props.id))
+  const tone = head.props.tone || fromParent?.tone
+  const variantMode = head.props.variantMode || fromParent?.variantMode
+  const tabVariant = head.props.tabVariant || fromParent?.tabVariant
+  return {
+    ...head.props,
+    id,
+    group,
+    tone,
+    variantMode,
+    tabVariant,
+    classes: computed(() =>
+      resolveComponentClasses(
+        { tone, variant: head.props.variant, variantMode },
+        {
+          defaultVariant: 'none',
+          defaultVariantMode: DEFAULT_TABS_VARIANT_MODE,
+        },
+      ),
+    ),
+    tabClasses: computed(() =>
+      resolveComponentClasses(
+        { tone, variant: tabVariant },
+        {
+          defaultVariant: 'underline',
+          classes: [unref(head.props.disabled) ? 'tabs__tab--disabled' : ''],
+        },
+      ),
+    ),
+  }
+}
+
+function markTabsRuntimeEmbed(head: ComponentHead<Tabs>) {
+  tryResolveTsSsgContext(head)?.recordRuntimeEmbed('tabs', 'head')
+}

package/src/standard/tabs/tabsStyle.ts

@@ -0,0 +1,231 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerTabsStyles() {
+  themes.forEach((theme, palette) => {
+    registerTabsShellStyles(theme, palette)
+    registerTabsControlStyles(theme, palette)
+    registerTabsPanelStyles(theme)
+    registerTabsResponsiveStyles(theme)
+  })
+}
+
+function registerTabsShellStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.tabs', theme)
+    .display('grid')
+    .gap('0.6em')
+    .alignContent('start')
+    .padding('1em')
+    .boxShadow(palette.effect.softShadow)
+
+  styleBuilder
+    .select('.tabs__list', theme)
+    .display('grid')
+    .gridTemplateColumns('repeat(auto-fit, minmax(7.5rem, 1fr))')
+    .gap('0.6em 0.4em')
+    .alignItems('stretch')
+    .alignContent('start')
+    .minWidth('0')
+
+  styleBuilder.select('.tabs__item', theme).display('contents')
+
+  styleBuilder
+    .select('.tabs__tabs-row', theme)
+    .display('none')
+    .alignItems('center')
+    .gap('0.5em')
+    .minWidth('0')
+
+  styleBuilder
+    .select('.tabs__tab-buttons', theme)
+    .display('flex')
+    .alignItems('center')
+    .gap('0.5em')
+    .minWidth('0')
+    .flex('1')
+    .overflow('hidden')
+
+  styleBuilder
+    .select('.tabs__overflow', theme)
+    .display('none')
+    .position('relative')
+    .flexShrink('0')
+
+  styleBuilder.select('.tabs__overflow--visible', theme).display('inline-flex')
+
+  styleBuilder
+    .select('.tabs__overflow-toggle', theme)
+    .width('2.3em')
+    .height('2.3em')
+    .padding('0')
+
+  styleBuilder
+    .select('.tabs__overflow-menu', theme)
+    .display('none')
+    .position('absolute')
+    .right('0')
+    .top('calc(100% + 0.375rem)')
+    .zIndex(20)
+    .minWidth('100%')
+    .width('max-content')
+    .maxWidth('min(92vw, 28.75rem)')
+    .padding('0.375rem')
+    .borderRadius(palette.radii.md)
+    .border('1px solid transparent')
+    .boxShadow(palette.effect.softShadow)
+
+  styleBuilder
+    .select('.tabs__overflow--open .tabs__overflow-menu', theme)
+    .display('grid')
+    .gap('0.25rem')
+
+  styleBuilder
+    .select('.tabs__overflow-option', theme)
+    .width('100%')
+    .padding('0.4em 0.6em')
+    .textAlign('left')
+    .whiteSpace('nowrap')
+    .apply(palette.applyFont(palette.font.size.xxs, palette.font.weight.w600))
+
+  styleBuilder.select('.tabs__overflow-option:hover', theme)
+
+  styleBuilder
+    .select('.tabs__select-wrap', theme)
+    .display('none')
+    .margin('0.125rem 0 0.25rem')
+
+  styleBuilder
+    .select('.tabs__select', theme)
+    .display('block')
+    .width('100%')
+    .minHeight('2.625rem')
+    .padding('0.625rem 2.5rem 0.625rem 0.75rem')
+    .borderRadius(palette.radii.md)
+    .border('1px solid transparent')
+    .apply(palette.applyFont(palette.font.size.xs, palette.font.weight.w600))
+    .appearance('none')
+    .webkitAppearance('none')
+    .mozAppearance('none')
+}
+
+function registerTabsControlStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.tabs__control', theme)
+    .position('absolute')
+    .width('1px')
+    .height('1px')
+    .opacity('0')
+    .pointerEvents('none')
+
+  styleBuilder
+    .select('.tabs__tab, .tabs__tab-buttons > .btn', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .padding('0.5em 0.75em')
+    .apply(palette.applyFont(palette.font.size.xxs, palette.font.weight.w700))
+    .gap('0.5em')
+    .overflow('hidden')
+    .textAlign('center')
+    .cursor('pointer')
+    .transition(
+      'background 160ms ease, color 160ms ease, border-color 160ms ease',
+    )
+
+  styleBuilder.select('.tabs__tab', theme).gridRow('1')
+
+  styleBuilder
+    .select('.tabs__tab-buttons > .btn', theme)
+    .flexShrink('0')
+    .whiteSpace('nowrap')
+
+  styleBuilder.select('.tabs__tab-buttons > .btn:hover', theme)
+
+  styleBuilder.select('.tabs__tab-buttons > .btn.active', theme)
+
+  styleBuilder
+    .select('.tabs__tab-icon', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .width('1.7em')
+    .height('1.7em')
+    .flexShrink('0')
+
+  styleBuilder
+    .select('.tabs__tab-icon svg', theme)
+    .display('block')
+    .width('100%')
+    .height('100%')
+
+  styleBuilder.select('.tabs__tab-label', theme).display('inline-block')
+  styleBuilder
+    .select('.tabs__tab-label', theme)
+    .overflow('hidden')
+    .textOverflow('ellipsis')
+    .whiteSpace('nowrap')
+    .maxWidth('100%')
+
+  styleBuilder
+    .select('.tabs__control:disabled + .tabs__tab, .tabs__tab--disabled', theme)
+    .opacity('0.45')
+    .cursor('not-allowed')
+
+  styleBuilder
+    .select('.tabs__tab-buttons > .btn:disabled', theme)
+    .opacity('0.45')
+    .cursor('not-allowed')
+
+  styleBuilder
+    .select('.tabs__control:focus-visible + .tabs__tab', theme)
+    .outline('2px solid currentColor')
+    .outlineOffset('2px')
+
+  styleBuilder
+    .select('.tabs__tab-buttons > .btn[hidden]', theme)
+    .display('none')
+}
+
+function registerTabsPanelStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.tabs__panel', theme)
+    .gridRow('2')
+    .gridColumn('1 / -1')
+    .display('none')
+    .minWidth('0')
+    .padding('0')
+
+  styleBuilder
+    .select('.tabs__control:checked + .tabs__tab + .tabs__panel', theme)
+    .display('block')
+
+  styleBuilder
+    .select(
+      '.tabs__list:not(:has(.tabs__control:checked)) .tabs__item:first-child .tabs__panel',
+      theme,
+    )
+    .display('block')
+
+  styleBuilder.select('.tabs__panel-body', theme)
+}
+
+function registerTabsResponsiveStyles(theme: ThemeMode) {
+  styleBuilder.select('.tabs--enhanced .tabs__tabs-row', theme).display('flex')
+
+  styleBuilder
+    .select('.tabs--compact .tabs__select-wrap', theme)
+    .display('block')
+
+  styleBuilder.select('.tabs--enhanced .tabs__tab', theme).display('none')
+
+  styleBuilder.select('.tabs--compact .tabs__tabs-row', theme).display('none')
+
+  styleBuilder
+    .select('.tabs--compact .tabs__list', theme)
+    .gridTemplateColumns('1fr')
+}

package/src/standard/themeToggle/themeToggle.ts

@@ -0,0 +1,33 @@
+import { defineComponent, html } from 'regor'
+
+export interface ThemeToggle {}
+
+/**
+ * One icon button that flips between the light and dark themes. The theme
+ * stylesheets decide which glyph shows, so the markup carries no state; the
+ * theme runtime binds every [data-theme-toggle] and keeps aria-pressed in sync.
+ */
+const themeToggleTemplate = html`<button
+  class="theme-toggle"
+  type="button"
+  aria-label="Dark theme"
+  aria-pressed="false"
+  data-theme-toggle
+>
+  <Icon
+    class="theme-toggle__glyph theme-toggle__glyph--light"
+    name="lucide:sun"
+    aria-hidden="true"/>
+  <Icon
+    class="theme-toggle__glyph theme-toggle__glyph--dark"
+    name="lucide:moon"
+    aria-hidden="true"/>
+</button>`
+
+function defineThemeToggleComponent() {
+  return defineComponent<ThemeToggle>(themeToggleTemplate)
+}
+
+export function defineThemeToggleComponents() {
+  return { themeToggle: defineThemeToggleComponent() }
+}

package/src/standard/themeToggle/themeToggleStyle.ts

@@ -0,0 +1,88 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+const GLYPH_MOTION =
+  'transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease'
+
+export function registerThemeToggleStyles() {
+  themes.forEach((theme, palette) => {
+    registerThemeToggleButtonStyles(theme, palette)
+    registerThemeToggleGlyphStyles(theme)
+  })
+}
+
+function registerThemeToggleButtonStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.theme-toggle', theme)
+    .display('inline-grid')
+    .placeItems('center')
+    .flexShrink('0')
+    .width('2.625rem')
+    .height('2.625rem')
+    .padding('0')
+    .borderRadius(palette.radii.pill)
+    .border('1px solid transparent')
+    .background('transparent')
+    .color(palette.current.text.subtle)
+    .cursor('pointer')
+    .transition('background 160ms ease, color 160ms ease')
+
+  styleBuilder
+    .select('.theme-toggle:hover', theme)
+    .background(palette.current.surface.hover.background)
+    .borderColor(palette.current.surface.hover.border)
+    .color(palette.current.text.default)
+
+  styleBuilder
+    .select('.theme-toggle:active', theme)
+    .background(palette.current.surface.active.background)
+
+  styleBuilder
+    .select('.theme-toggle:focus-visible', theme)
+    .outline(`2px solid ${palette.current.border.focus}`)
+    .outlineOffset('2px')
+}
+
+/**
+ * Both glyphs share one grid cell. The theme in use shows its own glyph and
+ * tucks the other away rotated, so a switch reads as one turning motion.
+ */
+function registerThemeToggleGlyphStyles(theme: ThemeMode) {
+  const shown = theme === 'dark' ? 'dark' : 'light'
+  const hidden = theme === 'dark' ? 'light' : 'dark'
+  const hiddenTurn = theme === 'dark' ? '90deg' : '-90deg'
+
+  styleBuilder
+    .select('.theme-toggle .theme-toggle__glyph', theme)
+    .gridArea('1 / 1')
+    .width('1.25rem')
+    .height('1.25rem')
+
+  styleBuilder
+    .select(`.theme-toggle .theme-toggle__glyph--${shown}`, theme)
+    .opacity(1)
+    .transform('rotate(0deg) scale(1)')
+
+  styleBuilder
+    .select(`.theme-toggle .theme-toggle__glyph--${hidden}`, theme)
+    .opacity(0)
+    .transform(`rotate(${hiddenTurn}) scale(0.5)`)
+
+  // Animate only once the runtime has settled the first theme, so a page
+  // never loads with the glyphs mid-turn.
+  styleBuilder
+    .select(':scope[data-theme-ready] .theme-toggle__glyph', theme)
+    .transition(GLYPH_MOTION)
+
+  styleBuilder
+    .select(':scope[data-theme-ready] .theme-toggle__glyph', theme)
+    .media('prefers-reduced-motion: reduce')
+    .transition('none')
+}

package/src/standard/toast/toastHost.ts

@@ -0,0 +1,42 @@
+import { defineComponent, html, type SRef } from 'regor'
+import type { ToastItem, ToastStore } from './toastStore'
+
+export interface ToastHost {
+  items: SRef<ToastItem[]>
+  dismiss: ToastStore['dismiss']
+}
+
+export const toastHostTemplate = html`<Flex
+  direction="column"
+  align="center"
+  r-if="items.length > 0"
+  style="position: fixed; top: 1rem; left: 50%; z-index: 1200; max-width: calc(100vw - 2rem); transform: translateX(-50%); pointer-events: none;"
+>
+  <Panel
+    class="py-0"
+    r-for="toast in items"
+    :tone="toast.tone"
+    variant="surface"
+    style="max-width: calc(100vw - 2rem); pointer-events: auto;"
+  >
+    <Flex align="center" justify="between" wrap="true">
+      <span>{{ toast.message }}</span>
+      <Btn
+        size="sm"
+        variant="subtleBtn"
+        icon="iconoir:xmark"
+        @click="dismiss(toast.id)"
+      >
+        Dismiss
+      </Btn>
+    </Flex>
+  </Panel>
+</Flex>`
+
+export function defineToastComponents() {
+  return {
+    toastHost: defineComponent<ToastHost>(toastHostTemplate, {
+      props: ['items', 'dismiss'],
+    }),
+  }
+}

package/src/standard/toast/toastStore.ts

@@ -0,0 +1,50 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import { sref } from 'regor'
+
+export interface ToastItem {
+  id: string
+  message: string
+  tone: SemanticTone
+}
+
+const TOAST_TIMEOUT_MS: Partial<Record<SemanticTone, number>> = {
+  info: 5000,
+  success: 5000,
+  warning: 10000,
+}
+
+export class ToastStore {
+  readonly items = sref<ToastItem[]>([])
+  private nextId = 0
+  private readonly timers = new Map<string, ReturnType<typeof setTimeout>>()
+
+  notify = (text: string, tone: SemanticTone = 'info') => {
+    if (!text) return
+    const toast: ToastItem = {
+      id: `toast-${++this.nextId}`,
+      message: text,
+      tone,
+    }
+    this.items([...this.items(), toast])
+    const timeout = TOAST_TIMEOUT_MS[tone]
+    if (timeout) {
+      this.timers.set(
+        toast.id,
+        setTimeout(() => this.dismiss(toast.id), timeout),
+      )
+    }
+  }
+
+  dismiss = (id: string) => {
+    const timer = this.timers.get(id)
+    if (timer) clearTimeout(timer)
+    this.timers.delete(id)
+    this.items(this.items().filter((toast) => toast.id !== id))
+  }
+
+  clear = () => {
+    for (const timer of this.timers.values()) clearTimeout(timer)
+    this.timers.clear()
+    this.items([])
+  }
+}