@purestack/ts-components 1.1.0

package/src/standard/grid/grid.ts

@@ -0,0 +1,177 @@
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+
+export type GridAlignItems = 'stretch' | 'start' | 'center' | 'end'
+export type GridJustifyItems = 'stretch' | 'start' | 'center' | 'end'
+
+export interface Grid {
+  container?: RefOrValue<string>
+  columns?: RefOrValue<number | string>
+  columnsSm?: RefOrValue<number | string>
+  columnsMd?: RefOrValue<number | string>
+  columnsLg?: RefOrValue<number | string>
+  columnsXl?: RefOrValue<number | string>
+  alignItems?: RefOrValue<GridAlignItems>
+  justifyItems?: RefOrValue<GridJustifyItems>
+  dense?: RefOrValue<boolean | string>
+  classes?: ComputedRef<string>
+  gridStyle?: ComputedRef<Record<string, string>>
+}
+
+const gridTemplate = html`<div :is="container ?? 'div'" class="grid" :class="classes" :style="gridStyle">
+  <slot></slot>
+</div>`
+
+function defineGridComponent() {
+  return defineComponent<Grid>(gridTemplate, {
+    props: [
+      'container',
+      'columns',
+      'columnsSm',
+      'columnsMd',
+      'columnsLg',
+      'columnsXl',
+      'alignItems',
+      'justifyItems',
+      'dense',
+    ],
+    context: (head) => resolveGrid(head.props),
+  })
+}
+
+export function defineGridComponents() {
+  return {
+    grid: defineGridComponent(),
+  }
+}
+
+function resolveGrid(props: Grid): Grid {
+  const classes = computed(() => {
+    return [
+      resolveAlignClass(props.alignItems),
+      resolveJustifyClass(props.justifyItems),
+      resolveDenseClass(props.dense),
+    ]
+      .filter(Boolean)
+      .join(' ')
+  })
+  const gridStyle = computed(() => {
+    const resolvedColumns = resolveResponsiveGridTemplateColumns(props)
+
+    return {
+      '--grid-template-columns': resolvedColumns.base,
+      '--grid-template-columns-sm': resolvedColumns.sm,
+      '--grid-template-columns-md': resolvedColumns.md,
+      '--grid-template-columns-lg': resolvedColumns.lg,
+      '--grid-template-columns-xl': resolvedColumns.xl,
+    } as Record<string, string>
+  })
+
+  return {
+    ...props,
+    classes,
+    gridStyle,
+  }
+}
+
+type ResolvedGridTemplateColumns = {
+  base: string
+  sm: string
+  md: string
+  lg: string
+  xl: string
+}
+
+function resolveResponsiveGridTemplateColumns(
+  props: Grid,
+): ResolvedGridTemplateColumns {
+  const base =
+    resolveGridTemplateColumnsValue(props.columns) ?? toRepeatTemplate(1)
+  const sm = resolveGridTemplateColumnsValue(props.columnsSm) ?? base
+  const md = resolveGridTemplateColumnsValue(props.columnsMd) ?? sm
+  const lg = resolveGridTemplateColumnsValue(props.columnsLg) ?? md
+  const xl = resolveGridTemplateColumnsValue(props.columnsXl) ?? lg
+
+  return { base, sm, md, lg, xl }
+}
+
+function resolveGridTemplateColumnsValue(
+  value?: RefOrValue<number | string>,
+): string | undefined {
+  const resolvedValue = unref(value)
+
+  if (typeof resolvedValue === 'number' && Number.isInteger(resolvedValue)) {
+    return toRepeatTemplate(clampColumns(resolvedValue))
+  }
+
+  if (typeof resolvedValue !== 'string') return undefined
+
+  const normalized = resolvedValue.trim()
+  if (!normalized) return undefined
+
+  const columnCount = tryParseColumnCount(normalized)
+  if (columnCount !== undefined) return toRepeatTemplate(columnCount)
+
+  return normalized
+}
+
+function tryParseColumnCount(value: string): number | undefined {
+  if (!/^\d+$/.test(value)) return undefined
+
+  const parsed = Number.parseInt(value, 10)
+  if (!Number.isInteger(parsed)) return undefined
+
+  return clampColumns(parsed)
+}
+
+function toRepeatTemplate(columns: number) {
+  return `repeat(${columns}, minmax(0, 1fr))`
+}
+
+function clampColumns(value: number) {
+  if (value < 1) return 1
+  if (value > 12) return 12
+  return value
+}
+
+function resolveAlignClass(value?: RefOrValue<GridAlignItems>) {
+  if (!value) return ''
+  const normalized = unref(value).toLowerCase()
+  if (
+    normalized === 'stretch' ||
+    normalized === 'start' ||
+    normalized === 'center' ||
+    normalized === 'end'
+  ) {
+    return `align-${normalized}`
+  }
+  return ''
+}
+
+function resolveJustifyClass(value?: RefOrValue<GridJustifyItems>) {
+  if (!value) return ''
+  const normalized = unref(value).toLowerCase()
+  if (
+    normalized === 'stretch' ||
+    normalized === 'start' ||
+    normalized === 'center' ||
+    normalized === 'end'
+  ) {
+    return `justify-items-${normalized}`
+  }
+  return ''
+}
+
+function resolveDenseClass(value?: RefOrValue<boolean | string>) {
+  if (!value) return ''
+  const normalized = unref(value)
+  if (normalized === true || normalized === 'true') return 'grid-dense'
+
+  return ''
+}

package/src/standard/grid/gridStyle.ts

@@ -0,0 +1,56 @@
+import {
+  BREAKPOINTS,
+  mediaMin,
+  styleBuilder,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerGridStyles() {
+  themes.forEach((theme, _palette) => {
+    styleBuilder
+      .select('.grid', theme)
+      .display('grid')
+      .minWidth('0')
+      .gap('0.75rem')
+      .gridTemplateColumns('var(--grid-template-columns)')
+
+    styleBuilder.select('.grid > *', theme).minWidth('0')
+
+    styleBuilder.select('.align-stretch', theme).alignItems('stretch')
+    styleBuilder.select('.align-start', theme).alignItems('start')
+    styleBuilder.select('.align-center', theme).alignItems('center')
+    styleBuilder.select('.align-end', theme).alignItems('end')
+
+    styleBuilder.select('.justify-items-stretch', theme).justifyItems('stretch')
+    styleBuilder.select('.justify-items-start', theme).justifyItems('start')
+    styleBuilder.select('.justify-items-center', theme).justifyItems('center')
+    styleBuilder.select('.justify-items-end', theme).justifyItems('end')
+
+    styleBuilder.select('.justify-self-stretch', theme).justifySelf('stretch')
+    styleBuilder.select('.justify-self-start', theme).justifySelf('start')
+    styleBuilder.select('.justify-self-center', theme).justifySelf('center')
+    styleBuilder.select('.justify-self-end', theme).justifySelf('end')
+
+    styleBuilder.select('.grid-dense', theme).gridAutoFlow('row dense')
+
+    styleBuilder
+      .select('.grid', theme)
+      .media(mediaMin(BREAKPOINTS.sm))
+      .gridTemplateColumns('var(--grid-template-columns-sm)')
+
+    styleBuilder
+      .select('.grid', theme)
+      .media(mediaMin(BREAKPOINTS.md))
+      .gridTemplateColumns('var(--grid-template-columns-md)')
+
+    styleBuilder
+      .select('.grid', theme)
+      .media(mediaMin(BREAKPOINTS.lg))
+      .gridTemplateColumns('var(--grid-template-columns-lg)')
+
+    styleBuilder
+      .select('.grid', theme)
+      .media(mediaMin(BREAKPOINTS.xl))
+      .gridTemplateColumns('var(--grid-template-columns-xl)')
+  })
+}

package/src/standard/icon/icon.ts

@@ -0,0 +1,96 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export type GetSvgIcon = (name: string) => string
+export type IconFrameSize = 'sm' | 'md' | 'lg'
+
+export interface Icon {
+  name?: RefOrValue<string>
+  svg?: ComputedRef<string>
+}
+
+export interface IconFrame {
+  name?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  size?: RefOrValue<IconFrameSize>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  classes?: ComputedRef<string>
+  hasIcon?: ComputedRef<boolean>
+}
+
+const DEFAULT_ICON_FRAME_VARIANT: ComponentVariant = 'solid'
+const DEFAULT_ICON_FRAME_VARIANT_MODE: ComponentVariantMode = 'stateless'
+
+const iconTemplate = html`<span class="icon" r-if="svg" r-html="svg"></span>`
+
+const iconFrameTemplate = html`<span class="icon-frame" :class="classes" r-if="hasIcon">
+  <Icon :name="name"/>
+</span>`
+
+function defineIconComponent(getSvgIcon: GetSvgIcon) {
+  return defineComponent<Icon>(iconTemplate, {
+    props: ['name'],
+    context: (head) => resolveIcon(head.props, getSvgIcon),
+  })
+}
+
+function defineIconFrameComponent() {
+  return defineComponent<IconFrame>(iconFrameTemplate, {
+    props: ['name', 'tone', 'size', 'variant', 'variantMode'],
+    context: (head) => resolveIconFrame(head.props),
+  })
+}
+
+export function defineIconComponents(getSvgIcon: GetSvgIcon) {
+  return {
+    icon: defineIconComponent(getSvgIcon),
+    iconFrame: defineIconFrameComponent(),
+  }
+}
+
+function resolveIcon(props: Icon, getSvgIcon: GetSvgIcon): Icon {
+  const svg = computed(() => {
+    const name = unref(props.name)
+    return name ? getSvgIcon(name) : ''
+  })
+
+  return {
+    ...props,
+    svg,
+  }
+}
+
+function resolveIconFrame(props: IconFrame): IconFrame {
+  return {
+    ...props,
+    hasIcon: computed(() => Boolean(unref(props.name))),
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: DEFAULT_ICON_FRAME_VARIANT,
+        defaultVariantMode: DEFAULT_ICON_FRAME_VARIANT_MODE,
+        classes: [resolveIconFrameSizeClass(props.size)],
+      }),
+    ),
+  }
+}
+
+function resolveIconFrameSizeClass(size?: RefOrValue<IconFrameSize>) {
+  const resolvedSize = unref(size)
+  if (resolvedSize === 'sm' || resolvedSize === 'lg') {
+    return `icon-frame--${resolvedSize}`
+  }
+  return ''
+}

package/src/standard/icon/iconStyle.ts

@@ -0,0 +1,50 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import { styleBuilder, themes } from '@purestack/ts-style'
+
+export function registerIconStyles() {
+  themes.forEach((theme, palette) => {
+    registerIconBaseStyles(theme, palette)
+  })
+}
+
+function registerIconBaseStyles(theme: string, palette: ThemePalette) {
+  styleBuilder
+    .select('.icon', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .width('1.7em')
+    .height('1.7em')
+    .lineHeight('0')
+    .verticalAlign('middle')
+    .flexShrink('0')
+    .alignSelf('center')
+
+  styleBuilder
+    .select('.icon svg', theme)
+    .display('block')
+    .width('100%')
+    .height('100%')
+
+  styleBuilder
+    .select('.icon-frame', theme)
+    .padding('0.25em')
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('center')
+    .lineHeight('0')
+    .flexShrink('0')
+    .borderRadius(palette.radii.md)
+
+  styleBuilder
+    .select('.icon-frame--sm', theme)
+    .borderRadius(palette.radii.sm)
+    .padding('0.5em')
+    .fontSize('0.6em')
+
+  styleBuilder
+    .select('.icon-frame--lg', theme)
+    .borderRadius('0.75rem')
+    .padding('0.5em')
+    .fontSize('1.5em')
+}

package/src/standard/landing/codeShowcase.ts

@@ -0,0 +1,54 @@
+import { defineComponent, html } from 'regor'
+import type { CodeShowcase } from './landingTypes'
+
+export function defineCodeShowcaseComponent() {
+  const codeShowcaseTemplate = html`<Panel :tone="tone" :variant="variant || 'surface'">
+    <Flex direction="column">
+      <Flex align="start" justify="between" wrap="true">
+        <SectionHeader
+          :eyebrow="eyebrow"
+          :title="title"
+          :subtitle="summary"
+          titleTag="h3"
+          titleClass="fs-h4 mb-1"
+          subtitleClass="mb-0"/>
+        <Badge r-if="language" :tone="tone">{{ language }}</Badge>
+      </Flex>
+      <Panel
+        variant="outline"
+        tone="neutral"
+        class="box-shadow-none"
+        bodyClass="overflow-x-auto"
+      >
+        <slot></slot>
+      </Panel>
+      <Panel
+        r-if="resultTitle || resultMeta"
+        :tone="tone"
+        variant="outline"
+        class="box-shadow-none"
+      >
+        <Flex align="center" justify="between" wrap="true" class="mb-2">
+          <strong r-if="resultTitle">{{ resultTitle }}</strong>
+          <Badge r-if="resultMeta" :tone="tone">{{ resultMeta }}</Badge>
+        </Flex>
+        <slot name="result"></slot>
+      </Panel>
+    </Flex>
+  </Panel>`
+
+  return {
+    codeShowcase: defineComponent<CodeShowcase>(codeShowcaseTemplate, {
+      props: [
+        'eyebrow',
+        'title',
+        'summary',
+        'language',
+        'resultTitle',
+        'resultMeta',
+        'tone',
+        'variant',
+      ],
+    }),
+  }
+}

package/src/standard/landing/comparisonColumn.ts

@@ -0,0 +1,30 @@
+import { defineComponent, html } from 'regor'
+import type { ComparisonColumn } from './landingTypes'
+
+export function defineComparisonColumnComponent() {
+  const comparisonColumnTemplate = html`<Panel :tone="tone" :variant="variant || 'surface'">
+    <Flex direction="column" align="start">
+      <Flex align="center" justify="between" class="w-full" r-if="icon || badge">
+        <IconFrame
+          r-if="icon"
+          :name="icon"
+          :tone="tone"
+          :variant="variant"
+          size="lg"/>
+        <Badge r-if="badge" :tone="tone">{{ badge }}</Badge>
+      </Flex>
+      <h3 class="fs-h4 fw-700 my-0" r-if="title">{{ title }}</h3>
+      <p class="text-tagline mb-0" r-if="summary">{{ summary }}</p>
+      <slot></slot>
+    </Flex>
+  </Panel>`
+
+  return {
+    comparisonColumn: defineComponent<ComparisonColumn>(
+      comparisonColumnTemplate,
+      {
+        props: ['title', 'summary', 'badge', 'icon', 'tone', 'variant'],
+      },
+    ),
+  }
+}

package/src/standard/landing/comparisonFeature.ts

@@ -0,0 +1,22 @@
+import { defineComponent, html } from 'regor'
+import type { ComparisonFeature } from './landingTypes'
+
+export function defineComparisonFeatureComponent() {
+  const comparisonFeatureTemplate = html`<Flex container="li" align="start">
+    <IconFrame
+      :name="icon || 'lucide:check'"
+      :tone="tone"
+      variant="surface"
+      size="sm"/>
+    <slot></slot>
+  </Flex>`
+
+  return {
+    comparisonFeature: defineComponent<ComparisonFeature>(
+      comparisonFeatureTemplate,
+      {
+        props: ['icon', 'tone'],
+      },
+    ),
+  }
+}

package/src/standard/landing/comparisonTable.ts

@@ -0,0 +1,38 @@
+import { defineComponent, html } from 'regor'
+import type { ComparisonTable } from './landingTypes'
+
+export function defineComparisonTableComponent() {
+  const comparisonTableTemplate = html`<Panel :tone="tone" :variant="variant || 'surface'" class="mb-6">
+    <Flex direction="column" align="start" class="w-full">
+      <SectionHeader
+        r-if="eyebrow || title || subtitle"
+        :eyebrow="eyebrow"
+        :title="title"
+        :subtitle="subtitle"
+        titleTag="h2"
+        subtitleClass="mb-0"/>
+      <Grid
+        :columns="columns || 1"
+        :columnsLg="columnsLg || 3"
+        alignItems="stretch"
+        class="w-full"
+      >
+        <slot></slot>
+      </Grid>
+    </Flex>
+  </Panel>`
+
+  return {
+    comparisonTable: defineComponent<ComparisonTable>(comparisonTableTemplate, {
+      props: [
+        'eyebrow',
+        'title',
+        'subtitle',
+        'tone',
+        'variant',
+        'columns',
+        'columnsLg',
+      ],
+    }),
+  }
+}

package/src/standard/landing/ctaSection.ts

@@ -0,0 +1,59 @@
+import { defineComponent, html } from 'regor'
+import type { CtaSection } from './landingTypes'
+
+export function defineCtaSectionComponent() {
+  const ctaSectionTemplate = html`<Panel :tone="tone" :variant="variant || 'surface'">
+    <Grid columns="1" columnsLg="minmax(0, 1fr) auto" alignItems="center">
+      <SectionHeader
+        :eyebrow="eyebrow"
+        :title="title"
+        :subtitle="subtitle"
+        titleTag="h2"
+        titleClass="fs-h2 mb-2"
+        subtitleClass="mb-0"/>
+      <Flex align="center" justify="end" wrap="true">
+        <BtnLink
+          r-if="primaryLabel && primaryHref"
+          :href="primaryHref"
+          :icon="primaryIcon"
+          iconPosition="end"
+          :tone="tone || 'accent'"
+          size="lg"
+        >
+          {{ primaryLabel }}
+        </BtnLink>
+        <BtnLink
+          r-if="secondaryLabel && secondaryHref"
+          :href="secondaryHref"
+          :icon="secondaryIcon"
+          :tone="tone || 'ghost'"
+          variant="outline"
+          size="lg"
+        >
+          {{ secondaryLabel }}
+        </BtnLink>
+        <slot name="actions"></slot>
+      </Flex>
+      <p class="prose-meta mb-0" r-if="meta">{{ meta }}</p>
+    </Grid>
+  </Panel>`
+
+  return {
+    ctaSection: defineComponent<CtaSection>(ctaSectionTemplate, {
+      props: [
+        'eyebrow',
+        'title',
+        'subtitle',
+        'primaryLabel',
+        'primaryHref',
+        'primaryIcon',
+        'secondaryLabel',
+        'secondaryHref',
+        'secondaryIcon',
+        'meta',
+        'tone',
+        'variant',
+      ],
+    }),
+  }
+}

package/src/standard/landing/featureCard.ts

@@ -0,0 +1,41 @@
+import { defineComponent, html } from 'regor'
+import type { FeatureCard } from './landingTypes'
+
+export function defineFeatureCardComponent() {
+  const featureCardTemplate = html`<Panel :tone="tone" :variant="variant || 'surface'">
+    <Flex direction="column" align="start" justify="center">
+      <Flex align="center" justify="center" class="w-full" r-if="icon || badge">
+        <IconFrame
+          r-if="icon"
+          :name="icon"
+          :tone="tone"
+          :variant="variant"
+          size="lg"/>
+        <Badge r-if="badge" :tone="tone">{{ badge }}</Badge>
+      </Flex>
+      <Flex direction="column" align="center" class="text-justify">
+        <p class="text-eyebrow" r-if="eyebrow">{{ eyebrow }}</p>
+        <h3 class="fs-h4 fw-700 my-0" r-if="title">{{ title }}</h3>
+        <p class="text-tagline mb-0" r-if="summary">{{ summary }}</p>
+        <slot></slot>
+      </Flex>
+      <Flex wrap="true" class="mt-auto">
+        <slot name="actions"></slot>
+      </Flex>
+    </Flex>
+  </Panel>`
+
+  return {
+    featureCard: defineComponent<FeatureCard>(featureCardTemplate, {
+      props: [
+        'eyebrow',
+        'title',
+        'summary',
+        'badge',
+        'icon',
+        'tone',
+        'variant',
+      ],
+    }),
+  }
+}

package/src/standard/landing/landing.ts

@@ -0,0 +1,52 @@
+export type {
+  CodeShowcase,
+  ComparisonColumn,
+  ComparisonFeature,
+  ComparisonTable,
+  CtaSection,
+  FeatureCard,
+  LandingBand,
+  LandingBandEdge,
+  LandingBandImageFit,
+  LandingSection,
+  LandingTitleTag,
+  MetricItem,
+  MetricStrip,
+} from './landingTypes'
+
+import { defineCodeShowcaseComponent } from './codeShowcase'
+import { defineComparisonColumnComponent } from './comparisonColumn'
+import { defineComparisonFeatureComponent } from './comparisonFeature'
+import { defineComparisonTableComponent } from './comparisonTable'
+import { defineCtaSectionComponent } from './ctaSection'
+import { defineFeatureCardComponent } from './featureCard'
+import { defineLandingBandComponent } from './landingBand'
+import { defineLandingSectionComponent } from './landingSection'
+import { defineMetricItemComponent } from './metricItem'
+import { defineMetricStripComponent } from './metricStrip'
+
+export { defineCodeShowcaseComponent } from './codeShowcase'
+export { defineComparisonColumnComponent } from './comparisonColumn'
+export { defineComparisonFeatureComponent } from './comparisonFeature'
+export { defineComparisonTableComponent } from './comparisonTable'
+export { defineCtaSectionComponent } from './ctaSection'
+export { defineFeatureCardComponent } from './featureCard'
+export { defineLandingBandComponent } from './landingBand'
+export { defineLandingSectionComponent } from './landingSection'
+export { defineMetricItemComponent } from './metricItem'
+export { defineMetricStripComponent } from './metricStrip'
+
+export function defineLandingComponents() {
+  return {
+    ...defineLandingBandComponent(),
+    ...defineLandingSectionComponent(),
+    ...defineFeatureCardComponent(),
+    ...defineMetricStripComponent(),
+    ...defineMetricItemComponent(),
+    ...defineCodeShowcaseComponent(),
+    ...defineComparisonTableComponent(),
+    ...defineComparisonColumnComponent(),
+    ...defineComparisonFeatureComponent(),
+    ...defineCtaSectionComponent(),
+  }
+}