@purestack/ts-components 1.1.0

package/src/standard/logo/logo.ts

@@ -0,0 +1,192 @@
+import {
+  type LogoConfig,
+  type TsSsgContext,
+  tryResolveTsSsgContext,
+} from '@purestack/ts-common'
+import {
+  getSemanticToneClass,
+  normalizeThemeVariableReference,
+} from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  flatten,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+
+type ReactiveLogoOptions = {
+  [K in keyof LogoConfig]?: RefOrValue<LogoConfig[K]>
+}
+
+export interface SiteLogo extends ReactiveLogoOptions {
+  config?: RefOrValue<Partial<LogoConfig>>
+  options?: ComputedRef<LogoConfig>
+  classes?: ComputedRef<string>
+  logoStyle?: ComputedRef<Record<string, string>>
+  resolvedHref?: ComputedRef<string | undefined>
+  resolvedImage?: ComputedRef<string | undefined>
+  resolvedDarkImage?: ComputedRef<string | undefined>
+  accessibleName?: ComputedRef<string>
+  initials?: ComputedRef<string>
+}
+
+const logoTemplate = html`<a class="site-logo" :class="classes" :style="logoStyle"
+  :href="resolvedHref" :role="resolvedHref ? undefined : 'img'" :aria-label="accessibleName">
+  <span class="site-logo__mark" r-if="options.layout !== 'wordmark'" aria-hidden="true">
+    <slot name="mark">
+      <span class="site-logo__images" r-if="resolvedImage">
+        <img class="site-logo__image" :class="{ 'site-logo__image--light': resolvedDarkImage }" :src="resolvedImage" alt="" decoding="async"/>
+        <img class="site-logo__image site-logo__image--dark" r-if="resolvedDarkImage" :src="resolvedDarkImage" alt="" decoding="async"/>
+      </span>
+      <Icon r-else-if="options.icon" :name="options.icon"/>
+      <span class="site-logo__monogram" r-else>{{ initials }}</span>
+    </slot>
+  </span>
+  <span class="site-logo__copy" r-if="options.layout !== 'mark'" aria-hidden="true">
+    <span class="site-logo__name"><span class="site-logo__brand">{{ options.brand }}</span><span class="site-logo__suffix" r-if="options.suffix">{{ options.suffix }}</span></span>
+    <span class="site-logo__subtitle" r-if="options.subtitle">{{ options.subtitle }}</span>
+  </span>
+</a>`
+
+const logoProps = [
+  'brand',
+  'subtitle',
+  'suffix',
+  'href',
+  'ariaLabel',
+  'icon',
+  'imageSrc',
+  'imageSrcDark',
+  'monogram',
+  'layout',
+  'size',
+  'appearance',
+  'markStyle',
+  'wordmarkStyle',
+  'shape',
+  'tone',
+  'brandColor',
+  'accentColor',
+  'markBackground',
+  'markColor',
+  'brandSize',
+  'subtitleSize',
+  'markSize',
+  'gap',
+] as const satisfies readonly (keyof LogoConfig)[]
+
+function resolveSiteLogo(props: SiteLogo, context?: TsSsgContext): SiteLogo {
+  const options = computed<LogoConfig>(() => {
+    const config = flatten(unref(props.config) ?? {}) as Partial<LogoConfig>
+    const read = <K extends keyof LogoConfig>(
+      key: K,
+    ): LogoConfig[K] | undefined => {
+      const value = unref(props[key]) as LogoConfig[K] | undefined
+      return value === undefined ? config[key] : value
+    }
+    return {
+      brand: read('brand') ?? '',
+      subtitle: read('subtitle'),
+      suffix: read('suffix'),
+      href: read('href'),
+      ariaLabel: read('ariaLabel'),
+      icon: read('icon'),
+      imageSrc: read('imageSrc'),
+      imageSrcDark: read('imageSrcDark'),
+      monogram: read('monogram'),
+      layout: read('layout') ?? 'horizontal',
+      size: read('size') ?? 'md',
+      appearance: read('appearance') ?? 'plain',
+      markStyle: read('markStyle') ?? 'plain',
+      wordmarkStyle: read('wordmarkStyle') ?? 'plain',
+      shape: read('shape') ?? 'rounded',
+      tone: read('tone') ?? 'accent',
+      brandColor: read('brandColor'),
+      accentColor: read('accentColor'),
+      markBackground: read('markBackground'),
+      markColor: read('markColor'),
+      brandSize: read('brandSize'),
+      subtitleSize: read('subtitleSize'),
+      markSize: read('markSize'),
+      gap: read('gap'),
+    }
+  })
+  const resolveUrl = (value: string | undefined) =>
+    value ? (context?.resolvePublicHref(value) ?? value) : undefined
+  return {
+    options,
+    classes: computed(() => {
+      const logo = options()
+      return [
+        `site-logo--${logo.layout}`,
+        `site-logo--${logo.size}`,
+        `site-logo--${logo.appearance}`,
+        `site-logo--mark-${logo.markStyle}`,
+        `site-logo--wordmark-${logo.wordmarkStyle}`,
+        `site-logo--${logo.shape}`,
+        getSemanticToneClass(logo.tone),
+      ].join(' ')
+    }),
+    logoStyle: computed(() => {
+      const logo = options()
+      const style: Record<string, string> = {}
+      const colors = {
+        '--ps-logo-brand-color': logo.brandColor,
+        '--ps-logo-accent-color': logo.accentColor,
+        '--ps-logo-mark-background': logo.markBackground,
+        '--ps-logo-mark-color': logo.markColor,
+      }
+      for (const [key, value] of Object.entries(colors)) {
+        if (value?.trim())
+          style[key] = normalizeThemeVariableReference(value.trim())
+      }
+      const lengths = {
+        '--ps-logo-brand-size': logo.brandSize,
+        '--ps-logo-subtitle-size': logo.subtitleSize,
+        '--ps-logo-mark-size': logo.markSize,
+        '--ps-logo-gap': logo.gap,
+      }
+      for (const [key, value] of Object.entries(lengths)) {
+        if (value?.trim()) style[key] = value.trim()
+      }
+      return style
+    }),
+    resolvedHref: computed(() => {
+      const href = options().href
+      return href === null || href === '' ? undefined : resolveUrl(href ?? '/')
+    }),
+    resolvedImage: computed(() => resolveUrl(options().imageSrc)),
+    resolvedDarkImage: computed(() => resolveUrl(options().imageSrcDark)),
+    accessibleName: computed(
+      () =>
+        options().ariaLabel?.trim() ||
+        options().brand.trim() ||
+        options().monogram?.trim() ||
+        'Home',
+    ),
+    initials: computed(() => {
+      const logo = options()
+      if (logo.monogram) return logo.monogram
+      return logo.brand
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((word) => Array.from(word)[0] ?? '')
+        .join('')
+        .toLocaleUpperCase()
+    }),
+  }
+}
+
+export function defineLogoComponents() {
+  return {
+    siteLogo: defineComponent<SiteLogo>(logoTemplate, {
+      props: ['config', ...logoProps],
+      context: (head) =>
+        resolveSiteLogo(head.props, tryResolveTsSsgContext(head)),
+    }),
+  }
+}

package/src/standard/logo/logoStyle.ts

@@ -0,0 +1,164 @@
+import { styleBuilder, themes } from '@purestack/ts-style'
+
+export function registerLogoStyles() {
+  themes.forEach((theme, palette) => {
+    const neutral = palette.semanticTone.neutral
+    const accent = `var(--ps-logo-accent-color, ${palette.current.text.default})`
+    const brand = `var(--ps-logo-brand-color, ${neutral.text.default})`
+    styleBuilder.select('.site-logo', theme).css({
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 'var(--ps-logo-gap, 0.375rem)',
+      width: 'fit-content',
+      maxWidth: '100%',
+      minWidth: '0',
+      verticalAlign: 'middle',
+      textDecoration: 'none',
+      color: brand,
+      lineHeight: '1',
+      borderRadius: palette.radii.md,
+      '--ps-logo-size-brand': 'clamp(1.25rem, 3vw, 1.5rem)',
+      '--ps-logo-size-mark': 'clamp(1.625rem, 4vw, 2rem)',
+      '--ps-logo-size-subtitle': '0.65rem',
+    })
+    styleBuilder.select('.site-logo--sm', theme).css({
+      '--ps-logo-size-brand': '1.25rem',
+      '--ps-logo-size-mark': '1.625rem',
+      '--ps-logo-size-subtitle': '0.6rem',
+    })
+    styleBuilder.select('.site-logo--lg', theme).css({
+      '--ps-logo-size-brand': '2rem',
+      '--ps-logo-size-mark': '2.75rem',
+      '--ps-logo-size-subtitle': '0.75rem',
+    })
+    styleBuilder.select('.site-logo--xl', theme).css({
+      '--ps-logo-size-brand': '3rem',
+      '--ps-logo-size-mark': '4rem',
+      '--ps-logo-size-subtitle': '0.875rem',
+    })
+    styleBuilder.select('.site-logo--badge, .site-logo--outline', theme).css({
+      padding: '0.75rem 1rem',
+      border: `1px solid ${neutral.border.subtle}`,
+    })
+    styleBuilder
+      .select('.site-logo--badge', theme)
+      .css({ background: neutral.surfaceAlt.rest.background })
+    styleBuilder.select('.site-logo--stacked', theme).css({
+      flexDirection: 'column',
+      textAlign: 'center',
+      gap: 'var(--ps-logo-gap, 0.5rem)',
+    })
+    styleBuilder
+      .select('.site-logo--stacked .site-logo__copy', theme)
+      .alignItems('center')
+    styleBuilder.select('.site-logo__mark', theme).css({
+      display: 'inline-grid',
+      placeItems: 'center',
+      flexShrink: '0',
+      width: 'var(--ps-logo-mark-size, var(--ps-logo-size-mark))',
+      height: 'var(--ps-logo-mark-size, var(--ps-logo-size-mark))',
+      borderRadius: palette.radii.md,
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      color: `var(--ps-logo-mark-color, ${accent})`,
+      background: 'var(--ps-logo-mark-background, transparent)',
+    })
+    styleBuilder
+      .select(
+        '.site-logo .site-logo__mark > .icon, .site-logo__mark > svg',
+        theme,
+      )
+      .css({ width: '100%', height: '100%' })
+    styleBuilder.select('.site-logo--mark-soft .site-logo__mark', theme).css({
+      padding: '0.2em',
+      background: `var(--ps-logo-mark-background, ${palette.current.surface.rest.background})`,
+    })
+    styleBuilder.select('.site-logo--mark-solid .site-logo__mark', theme).css({
+      padding: '0.2em',
+      background: `var(--ps-logo-mark-background, ${palette.current.button.rest.background})`,
+      color: `var(--ps-logo-mark-color, ${palette.current.button.rest.text})`,
+    })
+    styleBuilder
+      .select('.site-logo--mark-outline .site-logo__mark', theme)
+      .css({ padding: '0.2em', border: `1px solid ${accent}` })
+    styleBuilder
+      .select('.site-logo--square .site-logo__mark', theme)
+      .borderRadius('0')
+    styleBuilder
+      .select('.site-logo--circle .site-logo__mark', theme)
+      .borderRadius('50%')
+    styleBuilder.select('.site-logo__images, .site-logo__image', theme).css({
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain',
+    })
+    styleBuilder
+      .select('.site-logo__image--dark', theme)
+      .display(theme === 'dark' ? 'block' : 'none')
+    styleBuilder
+      .select('.site-logo__image--light', theme)
+      .display(theme === 'dark' ? 'none' : 'block')
+    styleBuilder.select('.site-logo__monogram', theme).css({
+      fontSize:
+        'calc(var(--ps-logo-mark-size, var(--ps-logo-size-mark)) * 0.45)',
+      fontWeight: '750',
+      letterSpacing: '-0.04em',
+    })
+    styleBuilder.select('.site-logo__copy', theme).css({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      minWidth: '0',
+      gap: '0.35rem',
+    })
+    styleBuilder.select('.site-logo__name', theme).css({
+      fontSize: 'var(--ps-logo-brand-size, var(--ps-logo-size-brand))',
+      fontWeight: '700',
+      letterSpacing: '-0.045em',
+      lineHeight: '1.05',
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      color: brand,
+    })
+    styleBuilder.select('.site-logo__brand', theme).color(brand)
+    styleBuilder.select('.site-logo__suffix', theme).color(accent)
+    styleBuilder
+      .select('.site-logo--wordmark-accent .site-logo__brand', theme)
+      .color(accent)
+    styleBuilder
+      .select('.site-logo--wordmark-gradient .site-logo__brand', theme)
+      .css({
+        backgroundImage: `linear-gradient(115deg, ${brand}, ${accent})`,
+        backgroundClip: 'text',
+        '-webkit-background-clip': 'text',
+        color: 'transparent',
+      })
+    styleBuilder.select('.site-logo__subtitle', theme).css({
+      fontSize: 'var(--ps-logo-subtitle-size, var(--ps-logo-size-subtitle))',
+      color: neutral.text.subtle,
+      lineHeight: '1.4',
+      letterSpacing: '0.06em',
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    })
+    styleBuilder
+      .select('.site-logo[href]', theme)
+      .css({ cursor: 'pointer', transition: 'opacity 160ms ease' })
+    styleBuilder
+      .select('.site-logo[href]:hover', theme)
+      .css({ textDecoration: 'none', opacity: '0.85' })
+    styleBuilder.select('.site-logo[href]:focus-visible', theme).css({
+      outline: `2px solid ${palette.current.border.focus}`,
+      outlineOffset: '5px',
+    })
+    styleBuilder
+      .select('.site-logo--wordmark-gradient .site-logo__brand', theme)
+      .media('(forced-colors: active)')
+      .css({ backgroundImage: 'none', color: 'LinkText' })
+  })
+}

package/src/standard/modal/modal.ts

@@ -0,0 +1,171 @@
+import { tryResolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComponentHead,
+  type ComputedRef,
+  computed,
+  defineComponent,
+  type Emits,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+import { defineModalStoreComponent } from './modalStore'
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ModalSlideFrom = 'none' | 'top' | 'right' | 'bottom' | 'left'
+
+const DEFAULT_MODAL_VARIANT_MODE: ComponentVariantMode = 'stateless'
+
+export interface Modal {
+  id?: string
+  title?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  size?: RefOrValue<ModalSize>
+  fade?: RefOrValue<boolean>
+  slideFrom?: RefOrValue<ModalSlideFrom>
+  showClose?: RefOrValue<boolean>
+  titleId?: string
+  rootClass?: ComputedRef<string>
+  classes?: ComputedRef<string>
+  emits?: Emits<'close' | 'cancel'>
+}
+
+export interface ModalTrigger {
+  target?: string
+  label?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+}
+
+const modalTemplate = html`<dialog
+  class="modal"
+  :class="rootClass"
+  :id="id"
+  :data-modal-id="id"
+  data-modal-root
+  role="dialog"
+  aria-modal="true"
+  :aria-labelledby="titleId"
+>
+  <slot name="content">
+    <article class="modal__panel" role="document" tabindex="-1">
+      <div class="modal__surface" :class="classes">
+        <header class="modal__header">
+          <slot name="header">
+            <h2 class="modal__title tone-text" :id="titleId" r-if="title">
+              {{ title }}
+            </h2>
+          </slot>
+          <Btn
+            r-if="showClose"
+            :variant="variant"
+            size="sm"
+            data-modal-close
+            aria-label="Close dialog"
+          >
+            <span aria-hidden="true">X</span>
+          </Btn>
+        </header>
+        <div class="modal__body">
+          <slot name="body">
+            <slot></slot>
+          </slot>
+        </div>
+        <footer class="modal__footer"><slot name="footer"></slot></footer>
+      </div>
+    </article>
+  </slot>
+</dialog>`
+
+const modalTriggerTemplate = html`<Btn
+  :tone="tone"
+  :variant="variant"
+  :data-modal-target="target"
+  data-modal-trigger
+>
+  {{ label }}
+</Btn>`
+
+function defineModalComponent() {
+  return defineComponent<Modal>(modalTemplate, {
+    props: [
+      'id',
+      'title',
+      'tone',
+      'variant',
+      'variantMode',
+      'size',
+      'fade',
+      'slideFrom',
+      'showClose',
+    ],
+    context: (head) => {
+      markModalRuntimeEmbed(head)
+      return resolveModal(head.props)
+    },
+  })
+}
+
+function defineModalTriggerComponent() {
+  return defineComponent<ModalTrigger>(modalTriggerTemplate, {
+    props: ['target', 'label', 'tone', 'variant'],
+    context: (head) => resolveModalTrigger(head.props),
+  })
+}
+
+export function defineModalComponents() {
+  return {
+    modal: defineModalComponent(),
+    modalTrigger: defineModalTriggerComponent(),
+    ...defineModalStoreComponent(),
+  }
+}
+
+function resolveModal(props: Modal): Modal {
+  return {
+    ...props,
+    titleId: `${unref(props.id)}-title`,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: 'surface',
+        defaultVariantMode: DEFAULT_MODAL_VARIANT_MODE,
+      }),
+    ),
+    rootClass: computed(() => resolveModalRootClass(props)),
+  }
+}
+
+function resolveModalTrigger(props: ModalTrigger): ModalTrigger {
+  return {
+    target: props.target,
+    label: props.label,
+    tone: props.tone,
+    variant: props.variant,
+  }
+}
+
+function resolveModalRootClass(props: Modal) {
+  const size = unref(props.size) || 'md'
+  const slideFrom = unref(props.slideFrom) || 'none'
+  const fade = unref(props.fade) ?? true
+  return [
+    `modal--size-${size}`,
+    fade ? 'modal--fade' : '',
+    slideFrom !== 'none' ? `modal--slide-${slideFrom}` : '',
+    fade || slideFrom !== 'none' ? 'modal--animated' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+}
+
+function markModalRuntimeEmbed(head: ComponentHead<Modal>) {
+  tryResolveTsSsgContext(head)?.recordRuntimeEmbed('modal', 'head')
+}

package/src/standard/modal/modalStore.ts

@@ -0,0 +1,154 @@
+import { Base } from '@purestack/ts-util'
+import { defineComponent, html, type RefOrValue, ref, sref, unref } from 'regor'
+
+import type { Btn } from '../btn/btn'
+import type { Modal } from './modal'
+
+let nextModalId = 1
+let modalStoreSingleton: ModalStore | undefined
+
+export interface ModalActionContract extends Btn {
+  id?: string
+  label?: RefOrValue<string>
+  closeOnClick?: RefOrValue<boolean>
+  onClick?: (modal: ModalItem, store: ModalStore) => void | Promise<void>
+}
+
+export interface ModalContract extends Modal {
+  body?: RefOrValue<string>
+  note?: RefOrValue<string>
+  actions?: ModalActionContract[]
+}
+
+class ModalAction extends Base<ModalActionContract>() {
+  override readonly id: string
+  readonly running = ref(false)
+  constructor(opts: ModalActionContract) {
+    super(opts)
+    this.id = opts.id ?? `action-${nextModalId++}`
+  }
+}
+class ModalItem extends Base<ModalContract>() {
+  override readonly id: string
+  constructor(opts: ModalContract) {
+    super(opts)
+    this.id = opts.id || `modal-store-${nextModalId}`
+    nextModalId += 1
+    Object.assign(this, opts)
+    this.actions = opts.actions?.map?.((x) => new ModalAction(x))
+  }
+}
+
+export class ModalStore {
+  readonly modals = sref<ModalItem[]>([])
+
+  openModal = (options: ModalContract) => {
+    const modal = this.createModal(options)
+    const id = modal.id
+
+    setTimeout(() => {
+      window.tsSsgModal?.refresh()
+      window.tsSsgModal?.open(id)
+    }, 1)
+    return modal
+  }
+
+  closeModal = (id: string) => {
+    window.tsSsgModal?.close(id)
+  }
+
+  private findModal = (id: string) => {
+    return this.modals().find((modal) => modal.id === id)
+  }
+
+  runAction = (modal: ModalItem, action: ModalAction) => {
+    void this.runActionAsync(modal, action)
+  }
+
+  removeModal = (id: string) => {
+    this.modals(this.modals().filter((modal) => modal.id !== id))
+  }
+
+  private createModal(options: ModalContract) {
+    if (options.id && this.findModal(options.id)) {
+      this.closeModal(options.id)
+    }
+
+    const created = new ModalItem(options)
+    this.modals([...this.modals(), created])
+    return created
+  }
+
+  private async runActionAsync(modal: ModalItem, action: ModalAction) {
+    modal = unref(modal)
+    if (action.running()) return
+
+    action.running(true)
+    try {
+      await action.onClick?.(modal, this)
+      if ((unref(action.closeOnClick) ?? true) === true) {
+        this.closeModal(modal.id)
+      }
+    } catch (err) {
+      console.warn(err)
+    } finally {
+      action.running(false)
+    }
+  }
+}
+
+function ensureModalStore() {
+  if (!modalStoreSingleton) {
+    modalStoreSingleton = new ModalStore()
+  }
+  return modalStoreSingleton
+}
+
+export function useModalStore() {
+  if (!modalStoreSingleton) {
+    throw new Error(
+      'ModalStore is not mounted. Render <ModalStore> once first.',
+    )
+  }
+  return modalStoreSingleton
+}
+
+const modalStoreTemplate = html`<template r-for="modal in modals">
+  <Modal
+    :id="modal.id"
+    :title="modal.title"
+    :tone="modal.tone"
+    :variant="modal.variant"
+    :variantMode="modal.variantMode"
+    :size="modal.size"
+    :fade="modal.fade"
+    :slideFrom="modal.slideFrom"
+    :showClose="modal.showClose"
+    @close="removeModal(modal.id)"
+  >
+    <p class="modal-store__body" r-if="modal.body">{{ modal.body }}</p>
+    <p class="modal-store__note" r-if="modal.note">{{ modal.note }}</p>
+    <template name="footer">
+      <Flex r-if="modal.actions.length > 0">
+        <Btn
+          r-for="action in modal.actions"
+          :tone="action.tone"
+          :variant="action.variant"
+          :icon="action.icon"
+          :disabled="action.disabled"
+          @click="runAction(modal, action)"
+        >
+          {{ action.label }}
+        </Btn>
+      </Flex>
+    </template>
+  </Modal>
+</template>`
+
+export function defineModalStoreComponent() {
+  return {
+    modalStore: defineComponent<ModalStore>(modalStoreTemplate, {
+      context: () => ensureModalStore(),
+    }),
+  }
+}