@purestack/ts-components 1.1.0

package/src/standard/pricing/pricing.ts

@@ -0,0 +1,146 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import { defineComponent, html, type RefOrValue } from 'regor'
+import type {
+  ComponentVariant,
+  ComponentVariantMode,
+} from '../componentVariant'
+
+export interface PricingTable {
+  eyebrow?: RefOrValue<string>
+  title?: RefOrValue<string>
+  subtitle?: RefOrValue<string>
+  footnote?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  columns?: RefOrValue<number | string>
+  columnsLg?: RefOrValue<number | string>
+  columnsXl?: RefOrValue<number | string>
+}
+
+export interface PricingPlan {
+  title?: RefOrValue<string>
+  summary?: RefOrValue<string>
+  price?: RefOrValue<string>
+  period?: RefOrValue<string>
+  badge?: RefOrValue<string>
+  note?: RefOrValue<string>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  icon?: RefOrValue<string>
+  ctaLabel?: RefOrValue<string>
+  ctaLink?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+}
+
+export interface PricingFeature {
+  icon?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+}
+
+const pricingTableTemplate = html`<Panel :tone="tone" :variant="variant || 'none'" :variantMode="variantMode">
+  <Flex direction="column" align="start">
+    <SectionHeader
+      r-if="eyebrow || title || subtitle || footnote"
+      :eyebrow="eyebrow"
+      :title="title"
+      :subtitle="subtitle"
+      :footnote="footnote"
+      titleTag="h2"/>
+    <Grid
+      :columns="columns || 1"
+      :columnsLg="columnsLg || 2"
+      :columnsXl="columnsXl || 4"
+      alignItems="stretch"
+      justifyItems="center"
+    >
+      <slot></slot>
+    </Grid>
+  </Flex>
+</Panel>`
+
+const pricingPlanTemplate = html`<Panel :tone="tone" :variant="variant || 'surface'" :variantMode="variantMode">
+  <Flex direction="column" align="start">
+    <Flex justify="between" align="center" r-if="icon || badge">
+      <IconFrame
+        r-if="icon"
+        :name="icon"
+        :tone="tone"
+        variant="surface"
+        size="lg"/>
+      <Badge r-if="badge" :tone="tone">{{ badge }}</Badge>
+    </Flex>
+    <SectionHeader :title="title" :subtitle="summary" titleTag="h3"/>
+    <Flex align="baseline" r-if="price">
+      <strong class="fs-h2">{{ price }}</strong>
+      <span r-if="period">{{ period }}</span>
+    </Flex>
+    <BtnLink :href="ctaLink" :tone="tone" r-if="ctaLabel && ctaLink">
+      {{ ctaLabel }}
+    </BtnLink>
+    <Flex container="ul" direction="column" align="start" class="m-0 p-0">
+      <slot></slot>
+    </Flex>
+    <small r-if="note">{{ note }}</small>
+  </Flex>
+</Panel>`
+
+const pricingFeatureTemplate = html`<Flex container="li" align="start">
+  <IconFrame
+    :name="icon || 'iconoir:check'"
+    :tone="tone"
+    :variant="variant || 'surface'"
+    size="sm"/>
+  <slot></slot>
+</Flex>`
+
+function definePricingTableComponent() {
+  return defineComponent<PricingTable>(pricingTableTemplate, {
+    props: [
+      'eyebrow',
+      'title',
+      'subtitle',
+      'footnote',
+      'tone',
+      'variant',
+      'variantMode',
+      'columns',
+      'columnsLg',
+      'columnsXl',
+    ],
+  })
+}
+
+function definePricingPlanComponent() {
+  return defineComponent<PricingPlan>(pricingPlanTemplate, {
+    props: [
+      'title',
+      'summary',
+      'price',
+      'period',
+      'badge',
+      'note',
+      'variant',
+      'variantMode',
+      'icon',
+      'ctaLabel',
+      'ctaLink',
+      'tone',
+    ],
+  })
+}
+
+function definePricingFeatureComponent() {
+  return defineComponent<PricingFeature>(pricingFeatureTemplate, {
+    props: ['icon', 'tone', 'variant'],
+  })
+}
+
+export function definePricingComponents() {
+  return {
+    pricingTable: definePricingTableComponent(),
+    pricingPlan: definePricingPlanComponent(),
+    pricingFeature: definePricingFeatureComponent(),
+  }
+}

package/src/standard/searchBox/searchBox.ts

@@ -0,0 +1,54 @@
+import type { TsSsgContext } from '@purestack/ts-common'
+
+import { resolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import { defineComponent, html, type RefOrValue } from 'regor'
+import type { ComponentVariant } from '../componentVariant'
+
+export interface SearchBox {
+  placeholder?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+}
+
+const searchBoxTemplate = html`<div class="site-search" data-pagefind-search>
+  <FormInputField
+    icon="tabler:search"
+    :tone="tone"
+    :variant="variant"
+    type="search"
+    name="q"
+    :placeholder="placeholder"
+    autocomplete="off"
+    spellcheck="false"
+    data-pagefind-input
+    aria-label="Search site content"/>
+  <div
+    class="site-search__results doc-content"
+    data-pagefind-results
+    hidden
+  ></div>
+</div>`
+
+function defineSearchBoxComponent() {
+  return defineComponent<SearchBox>(searchBoxTemplate, {
+    props: ['tone', 'variant', 'placeholder'],
+    context: (head) => ({
+      tone: head.props.tone,
+      variant: head.props.variant,
+      placeholder: resolveSearchPlaceholder(resolveTsSsgContext(head)),
+    }),
+  })
+}
+
+export function defineSearchComponents() {
+  return { searchBox: defineSearchBoxComponent() }
+}
+
+function resolveSearchPlaceholder(context: TsSsgContext): string {
+  const title = context?.site?.siteTitle
+  if (typeof title !== 'string') return 'Search'
+  const trimmed = title.trim()
+  if (trimmed.length === 0) return 'Search'
+  return `Search ${trimmed}`
+}

package/src/standard/searchBox/searchBoxStyle.ts

@@ -0,0 +1,180 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import {
+  BREAKPOINTS,
+  getBreakpoint,
+  mediaAbove,
+  styleBuilder,
+  type ThemeMode,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerSearchBoxStyles() {
+  themes.forEach((theme, palette) => {
+    registerSearchBoxShellStyles(theme)
+    registerSearchBoxResultStyles(theme, palette)
+  })
+}
+
+export function registerSearchBoxShellStyles(theme: ThemeMode) {
+  registerSearchBoxShellContainerStyles(theme)
+  registerSearchBoxShellAccessibilityStyles(theme)
+}
+
+function registerSearchBoxShellContainerStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.site-search', theme)
+    .position('relative')
+    .maxWidth('100%')
+
+  styleBuilder.select('.site-search__field', theme).display('block')
+}
+
+function registerSearchBoxShellAccessibilityStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.site-search__sr-only', theme)
+    .position('absolute')
+    .width('1px')
+    .height('1px')
+    .padding('0')
+    .margin('-1px')
+    .overflow('hidden')
+    .clip('rect(0, 0, 0, 0)')
+    .whiteSpace('nowrap')
+    .border('0')
+}
+
+export function registerSearchBoxResultStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  registerSearchBoxResultContainerStyles(theme, palette)
+  registerSearchBoxResultTopBarOverlayStyles(theme)
+  registerSearchBoxResultListStyles(theme, palette)
+  registerSearchBoxResultContentStyles(theme, palette)
+}
+
+function registerSearchBoxResultContainerStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.site-search__results', theme)
+    .position('absolute')
+    .top('calc(100% + 0.5rem)')
+    .right('0')
+    .width('min(35rem, calc(100vw - 2rem))')
+    .maxHeight('26.25rem')
+    .overflow('auto')
+    .padding('0.5rem')
+    .borderRadius(palette.radii.lg)
+    .border(`1px solid ${palette.current.border.default}`)
+    .background(palette.current.surface.rest.background)
+    .boxShadow(palette.effect.strongShadow)
+    .zIndex('60')
+}
+
+function registerSearchBoxResultTopBarOverlayStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.topbar .site-search__results', theme)
+    .media(mediaAbove(BREAKPOINTS.sm))
+    .position('fixed')
+    .top('4.75rem')
+    .left('50%')
+    .right('auto')
+    .transform('translateX(-50%)')
+    .width(`min(${getBreakpoint(BREAKPOINTS.sm)}, calc(100vw - 2rem))`)
+    .zIndex('120')
+}
+
+function registerSearchBoxResultListStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.site-search__results ul.site-search__list', theme)
+    .listStyle('none')
+    .margin('0')
+    .padding('0')
+    .display('grid')
+    .gap('0.5em')
+
+  styleBuilder
+    .select('.site-search__results .site-search__item', theme)
+    .margin('0')
+    .padding('0')
+
+  styleBuilder
+    .select('.site-search__results .site-search__link', theme)
+    .display('grid')
+    .gap('0.375rem')
+    .padding('0.75rem 0.875rem')
+    .borderRadius(palette.radii.md)
+    .border(`1px solid ${palette.current.border.subtle}`)
+    .background(palette.current.surface.rest.background)
+    .textDecoration('none')
+    .color(palette.current.text.default)
+    .transition(
+      'border-color 160ms ease, background-color 160ms ease, transform 160ms ease',
+    )
+
+  styleBuilder
+    .select('.site-search__results .site-search__link:hover', theme)
+    .background(palette.current.surfaceAlt.rest.background)
+    .borderColor(palette.current.border.default)
+
+  styleBuilder
+    .select('.site-search__results .site-search__link:focus-visible', theme)
+    .outline(`2px solid ${palette.current.border.focus}`)
+}
+
+function registerSearchBoxResultContentStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.site-search__results .site-search__title', theme)
+    .display('block')
+    .apply(palette.applyFont(palette.font.size.body, palette.font.weight.w700))
+    .color(palette.current.text.default)
+    .wordBreak('break-word')
+
+  styleBuilder
+    .select('.site-search__results .site-search__excerpt', theme)
+    .display('block')
+    .margin('0')
+    .apply(palette.applyFont(palette.font.size.sm))
+    .color(palette.current.text.subtle)
+    .wordBreak('break-word')
+    .display('-webkit-box')
+    .lineClamp('3')
+    .webkitBoxOrient('vertical')
+    .overflow('hidden')
+
+  styleBuilder
+    .select('.site-search__results mark.site-search__highlight', theme)
+    .padding('0 0.1875rem')
+    .borderRadius('0.3125rem')
+    .background(palette.current.button.hover.background)
+    .color(palette.current.button.hover.text)
+
+  styleBuilder
+    .select('.site-search__results .site-search__message', theme)
+    .margin('0')
+    .padding('0.625rem 0.75rem')
+    .borderRadius(palette.radii.md)
+    .border(`1px dashed ${palette.current.border.default}`)
+    .background(palette.current.surface.rest.background)
+    .color(palette.current.text.subtle)
+
+  styleBuilder
+    .select('.site-search__results .site-search__message--error', theme)
+    .border(`1px solid ${palette.semanticTone.danger.surface.rest.border}`)
+    .background(palette.semanticTone.danger.surface.rest.background)
+    .color(palette.semanticTone.danger.surface.rest.text)
+
+  styleBuilder
+    .select('.site-search__results .site-search__message--empty', theme)
+    .border(`1px solid ${palette.semanticTone.warning.surface.rest.border}`)
+    .background(palette.semanticTone.warning.surface.rest.background)
+    .color(palette.semanticTone.warning.surface.rest.text)
+}

package/src/standard/sectionHeader/sectionHeader.ts

@@ -0,0 +1,99 @@
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+
+export interface SectionHeader {
+  eyebrow?: RefOrValue<string>
+  title?: RefOrValue<string>
+  subtitle?: RefOrValue<string>
+  footnote?: RefOrValue<string>
+  titleTag?: RefOrValue<string>
+  titleId?: RefOrValue<string>
+  eyebrowClass?: RefOrValue<string>
+  titleClass?: RefOrValue<string>
+  subtitleClass?: RefOrValue<string>
+  footnoteClass?: RefOrValue<string>
+  resolvedTitleTag?: ComputedRef<string>
+}
+
+const sectionHeaderTemplate = html`<div class="section-header">
+  <div class="text-eyebrow" :class="eyebrowClass" r-if="eyebrow">
+    {{ eyebrow }}
+  </div>
+  <div
+    :is="resolvedTitleTag"
+    :id="titleId"
+    class="text-title"
+    :class="titleClass"
+    r-if="title"
+  >
+    {{ title }}
+  </div>
+  <p class="text-tagline" :class="subtitleClass" r-if="subtitle">
+    {{ subtitle }}
+  </p>
+  <p class="prose-meta" :class="footnoteClass" r-if="footnote">
+    {{ footnote }}
+  </p>
+  <slot></slot>
+</div>`
+
+function defineSectionHeaderComponent() {
+  return defineComponent<SectionHeader>(sectionHeaderTemplate, {
+    props: [
+      'eyebrow',
+      'title',
+      'subtitle',
+      'footnote',
+      'titleTag',
+      'titleId',
+      'eyebrowClass',
+      'titleClass',
+      'subtitleClass',
+      'footnoteClass',
+    ],
+    context: (head) => resolveSectionHeader(head.props),
+  })
+}
+
+export function defineSectionHeaderComponents() {
+  return {
+    sectionHeader: defineSectionHeaderComponent(),
+  }
+}
+
+function resolveSectionHeader(props: SectionHeader): SectionHeader {
+  return {
+    ...props,
+    resolvedTitleTag: computed(() => resolveTitleTag(unref(props.titleTag))),
+  }
+}
+
+function resolveTitleTag(value: unknown): string {
+  const normalized = resolveString(value).toLowerCase()
+  if (
+    normalized === 'h1' ||
+    normalized === 'h2' ||
+    normalized === 'h3' ||
+    normalized === 'h4' ||
+    normalized === 'h5' ||
+    normalized === 'h6' ||
+    normalized === 'p' ||
+    normalized === 'div' ||
+    normalized === 'span'
+  ) {
+    return normalized
+  }
+  return 'h2'
+}
+
+function resolveString(value: unknown) {
+  return typeof value === 'string' && value.trim().length > 0
+    ? value.trim()
+    : ''
+}

package/src/standard/signIn/signIn.ts

@@ -0,0 +1,167 @@
+import { tryResolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import type {
+  ComponentVariant,
+  ComponentVariantMode,
+} from '../componentVariant'
+
+export interface SignIn {
+  avatarSrc?: RefOrValue<string>
+  avatarAlt?: RefOrValue<string>
+  icon?: RefOrValue<string>
+  accountIcon?: RefOrValue<string>
+  label?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  authEnabled?: boolean
+  signUpEnabled?: boolean
+  resolvedIcon?: ComputedRef<string>
+  resolvedAccountIcon?: ComputedRef<string>
+  resolvedLabel?: ComputedRef<string>
+  resolvedAvatarAlt?: ComputedRef<string>
+}
+
+const DEFAULT_SIGN_IN_ICON = 'lucide:log-in'
+const DEFAULT_ACCOUNT_ICON = 'tabler:user-filled'
+const DEFAULT_SIGN_IN_LABEL = 'Account'
+
+const signInTemplate = html`<details
+  r-if="authEnabled"
+  class="sign-in position-relative"
+  data-menu-runtime
+  data-menu-align="end"
+>
+  <summary
+    class="sign-in__trigger topbar__icon rounded-pill cursor-pointer overflow-hidden"
+    aria-label="Account menu"
+  >
+    <span
+      class="sign-in__signed-out-view tone-fill-surface-hover tone-fill-surface-active tone-border-surface-hover tone-border-surface-active"
+      aria-hidden="true"
+    >
+      <Icon :name="resolvedIcon"/>
+    </span>
+    <span
+      class="sign-in__signed-in-view tone-fill-surface-hover tone-fill-surface-active tone-border-surface-hover tone-border-surface-active"
+      aria-hidden="true"
+    >
+      <slot name="avatar">
+        <img
+          r-if="avatarSrc"
+          class="sign-in__avatar w-full h-full rounded-pill"
+          :src="avatarSrc"
+          :alt="resolvedAvatarAlt"/>
+        <Icon r-else :name="resolvedAccountIcon"/>
+      </slot>
+    </span>
+    <span class="hidden">{{ resolvedLabel }}</span>
+  </summary>
+  <Panel
+    class="sign-in__panel p-1 mt-1"
+    :tone="tone"
+    :variant="variant || 'surfaceAlt'"
+    :variantMode="variantMode"
+    data-menu-panel
+  >
+    <slot>
+      <Flex
+        container="nav"
+        direction="column"
+        align="stretch"
+        class="gap-1"
+        aria-label="Account"
+      >
+        <BtnLink
+          class="sign-in__signed-out-action justify-start w-full text-start"
+          href="/signin/"
+          :tone="tone"
+          variant="subtleBtn"
+          icon="lucide:log-in"
+        >
+          Sign in
+        </BtnLink>
+        <BtnLink
+          r-if="signUpEnabled"
+          class="sign-in__signed-out-action justify-start w-full text-start"
+          href="/signup/"
+          :tone="tone"
+          variant="subtleBtn"
+          icon="lucide:user-plus"
+        >
+          Sign up
+        </BtnLink>
+        <BtnLink
+          class="sign-in__signed-in-action justify-start w-full text-start"
+          href="/account/"
+          :tone="tone"
+          variant="subtleBtn"
+          icon="lucide:user-round"
+        >
+          Account
+        </BtnLink>
+        <BtnLink
+          class="sign-in__signed-in-action justify-start w-full text-start"
+          href="/account/settings/"
+          :tone="tone"
+          variant="subtleBtn"
+          icon="lucide:settings"
+        >
+          Settings
+        </BtnLink>
+        <BtnLink
+          class="sign-in__signed-in-action justify-start w-full text-start"
+          href="/signout/"
+          :tone="tone"
+          variant="subtleBtn"
+          icon="lucide:log-out"
+        >
+          Sign out
+        </BtnLink>
+      </Flex>
+    </slot>
+  </Panel>
+</details>`
+
+function defineSignInComponent() {
+  return defineComponent<SignIn>(signInTemplate, {
+    props: [
+      'avatarSrc',
+      'avatarAlt',
+      'icon',
+      'accountIcon',
+      'label',
+      'tone',
+      'variant',
+      'variantMode',
+    ],
+    context: (head) => resolveSignIn(head.props, head),
+  })
+}
+
+export function defineSignInComponents() {
+  return { signIn: defineSignInComponent() }
+}
+
+function resolveSignIn(props: SignIn, head: unknown): SignIn {
+  const auth = tryResolveTsSsgContext(head)?.site?.auth
+  return {
+    ...props,
+    authEnabled: auth?.enabled === true,
+    signUpEnabled: auth?.signUp === true,
+    resolvedIcon: computed(() => unref(props.icon) || DEFAULT_SIGN_IN_ICON),
+    resolvedAccountIcon: computed(
+      () => unref(props.accountIcon) || DEFAULT_ACCOUNT_ICON,
+    ),
+    resolvedLabel: computed(() => unref(props.label) || DEFAULT_SIGN_IN_LABEL),
+    resolvedAvatarAlt: computed(() => unref(props.avatarAlt) || ''),
+  }
+}