@purestack/ts-components 1.1.0

package/src/standard/badge/badge.ts

@@ -0,0 +1,41 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+} from 'regor'
+import {
+  type ComponentVariant,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export interface Badge {
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  classes?: ComputedRef<string>
+}
+
+const badgeTemplate = html`<span class="badge" :class="classes"><slot></slot></span>`
+
+function defineBadgeComponent() {
+  return defineComponent<Badge>(badgeTemplate, {
+    props: ['tone', 'variant'],
+    context: (head) => ({
+      ...head.props,
+      classes: computed(() =>
+        resolveComponentClasses(head.props, {
+          defaultVariant: 'surface',
+          defaultVariantMode: 'stateless',
+        }),
+      ),
+    }),
+  })
+}
+
+export function defineBadgeComponents() {
+  return {
+    badge: defineBadgeComponent(),
+  }
+}

package/src/standard/badge/badgeStyle.ts

@@ -0,0 +1,21 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerBadgeStyles() {
+  themes.forEach((theme, palette) => {
+    registerBadgeBaseStyles(theme, palette)
+  })
+}
+
+function registerBadgeBaseStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.badge', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .padding('0.12em 0.75em')
+    .apply(palette.applyFont(palette.font.size.xxs, palette.font.weight.w700))
+}

package/src/standard/barChart/barChart.ts

@@ -0,0 +1,338 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  type RefOrValue,
+  svg,
+  unref,
+} from 'regor'
+import {
+  type CartesianChartDomain,
+  type ResolvedCartesianChartGridLine,
+  resolveCartesianChartDomain,
+  resolveCartesianChartGridLines,
+  valueToCartesianChartY,
+} from '../chart/cartesianChart'
+import {
+  CARTESIAN_CHART_PLOT_WIDTH,
+  CARTESIAN_CHART_PLOT_X,
+  DEFAULT_CARTESIAN_CHART_HEIGHT,
+  DEFAULT_CARTESIAN_CHART_WIDTH,
+  DEFAULT_CHART_COLORS,
+  DEFAULT_CHART_EMPTY_LABEL,
+} from '../chart/chartDefaults'
+import {
+  formatChartValue,
+  readChartNumber,
+  resolveChartSize,
+  resolveChartText,
+} from '../chart/chartUtils'
+import type {
+  ComponentVariant,
+  ComponentVariantMode,
+} from '../componentVariant'
+import { resolveComponentClasses } from '../componentVariant'
+
+export interface BarChartItem {
+  label?: RefOrValue<string>
+  value?: RefOrValue<number | string>
+  color?: RefOrValue<string>
+}
+
+export interface ResolvedBarChartItem {
+  label: string
+  value: number
+  formattedValue: string
+  color: string
+  x: number
+  y: number
+  width: number
+  height: number
+  valueLabelX: number
+  valueLabelY: number
+  valueLabelBaseline: string
+  labelX: number
+  labelY: number
+  roundedTop: number
+}
+
+export interface ResolvedBarChartGridLine
+  extends ResolvedCartesianChartGridLine {}
+
+export interface BarChart {
+  items?: RefOrValue<Array<RefOrValue<BarChartItem>>>
+  title?: RefOrValue<string>
+  description?: RefOrValue<string>
+  ariaLabel?: RefOrValue<string>
+  emptyLabel?: RefOrValue<string>
+  valueSuffix?: RefOrValue<string>
+  width?: RefOrValue<number | string>
+  height?: RefOrValue<number | string>
+  minValue?: RefOrValue<number | string>
+  maxValue?: RefOrValue<number | string>
+  animated?: RefOrValue<boolean | string>
+  showValues?: RefOrValue<boolean | string>
+  showLabels?: RefOrValue<boolean | string>
+  showAxis?: RefOrValue<boolean | string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  classes?: ComputedRef<string>
+  resolvedWidth?: ComputedRef<string | number>
+  resolvedHeight?: ComputedRef<string | number | undefined>
+  resolvedAriaLabel?: ComputedRef<string>
+  resolvedEmptyLabel?: ComputedRef<string>
+  chartItems?: ComputedRef<ResolvedBarChartItem[]>
+  gridLines?: ComputedRef<ResolvedBarChartGridLine[]>
+  hasItems?: ComputedRef<boolean>
+  zeroLineY?: ComputedRef<number>
+}
+
+const VALUE_LABEL_OFFSET = 2.4
+const CATEGORY_LABEL_Y = 60
+const BAR_WIDTH_SHARE = 0.64
+const MIN_VISIBLE_BAR_HEIGHT = 0.35
+
+const barChartTemplate = svg`<svg
+  class="bar-chart"
+  :class="classes"
+  viewBox="-6 0 106 64"
+  :width="resolvedWidth"
+  :height="resolvedHeight"
+  role="img"
+  :aria-label="resolvedAriaLabel"
+>
+  <title r-if="title">{{ title }}</title>
+  <desc r-if="description">{{ description }}</desc>
+  <g class="bar-chart__grid" r-if="hasItems && showAxis">
+    <g r-for="line in gridLines" class="bar-chart__grid-line">
+      <line x1="8" x2="94" :y1="line.y" :y2="line.y"/>
+      <text x="5.4" :y="line.y">{{ line.formattedValue }}</text>
+    </g>
+  </g>
+  <line
+    r-if="hasItems && showAxis"
+    class="bar-chart__zero-line"
+    x1="8"
+    x2="94"
+    :y1="zeroLineY"
+    :y2="zeroLineY"/>
+  <g class="bar-chart__plot" r-if="hasItems">
+    <rect
+      r-for="item in chartItems"
+      class="bar-chart__bar"
+      :x="item.x"
+      :y="item.y"
+      :width="item.width"
+      :height="item.height"
+      :rx="item.roundedTop"
+      :ry="item.roundedTop"
+      :fill="item.color"
+      :aria-label="item.label + ': ' + item.formattedValue"
+    >
+      <title>{{ item.label + ': ' + item.formattedValue }}</title>
+      <animate
+        r-if="animated"
+        attributeName="height"
+        from="0"
+        :to="item.height"
+        dur="1720ms"
+        calcMode="spline"
+        keyTimes="0;1"
+        keySplines="0.16 1 0.3 1"
+        fill="freeze"/>
+      <animate
+        r-if="animated"
+        attributeName="y"
+        :from="zeroLineY"
+        :to="item.y"
+        dur="1720ms"
+        calcMode="spline"
+        keyTimes="0;1"
+        keySplines="0.16 1 0.3 1"
+        fill="freeze"/>
+    </rect>
+  </g>
+  <g class="bar-chart__values" r-if="hasItems && showValues">
+    <text
+      r-for="item in chartItems"
+      class="bar-chart__value"
+      :x="item.valueLabelX"
+      :y="item.valueLabelY"
+      text-anchor="middle"
+      :dominant-baseline="item.valueLabelBaseline"
+    >
+      {{ item.formattedValue }}
+    </text>
+  </g>
+  <g class="bar-chart__labels" r-if="hasItems && showLabels">
+    <text
+      r-for="item in chartItems"
+      class="bar-chart__label"
+      :x="item.labelX"
+      :y="item.labelY"
+      text-anchor="middle"
+    >
+      {{ item.label }}
+    </text>
+  </g>
+  <text
+    r-if="!hasItems"
+    class="bar-chart__empty"
+    x="50"
+    y="30"
+    text-anchor="middle"
+  >
+    {{ resolvedEmptyLabel }}
+  </text>
+</svg>`
+
+function defineBarChartComponent() {
+  return defineComponent<BarChart>(barChartTemplate, {
+    props: [
+      'items',
+      'title',
+      'description',
+      'ariaLabel',
+      'emptyLabel',
+      'valueSuffix',
+      'width',
+      'height',
+      'minValue',
+      'maxValue',
+      'animated',
+      'showValues',
+      'showLabels',
+      'showAxis',
+      'tone',
+      'variant',
+      'variantMode',
+    ],
+    context: (head) => resolveBarChart(head.props),
+  })
+}
+
+export function defineBarChartComponents() {
+  return {
+    barChart: defineBarChartComponent(),
+  }
+}
+
+function resolveBarChart(props: BarChart): BarChart {
+  const domain = computed(() => resolveDomain(props))
+
+  return {
+    animated: true,
+    showValues: true,
+    showLabels: true,
+    showAxis: true,
+    ...props,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: 'none',
+        defaultVariantMode: 'stateless',
+      }),
+    ),
+    resolvedWidth: computed(() =>
+      resolveChartSize(props.width, DEFAULT_CARTESIAN_CHART_WIDTH),
+    ),
+    resolvedHeight: computed(() =>
+      resolveChartSize(props.height, DEFAULT_CARTESIAN_CHART_HEIGHT),
+    ),
+    resolvedAriaLabel: computed(() => resolveAriaLabel(props)),
+    resolvedEmptyLabel: computed(
+      () => resolveChartText(props.emptyLabel) || DEFAULT_CHART_EMPTY_LABEL,
+    ),
+    chartItems: computed(() => resolveChartItems(props, domain())),
+    gridLines: computed(() =>
+      resolveCartesianChartGridLines(domain(), props.valueSuffix),
+    ),
+    hasItems: computed(() => resolveItems(props.items).length > 0),
+    zeroLineY: computed(() => valueToCartesianChartY(0, domain())),
+  }
+}
+
+function resolveChartItems(
+  props: BarChart,
+  domain: CartesianChartDomain,
+): ResolvedBarChartItem[] {
+  const items = resolveItems(props.items)
+  if (!items.length) return []
+
+  const laneWidth = CARTESIAN_CHART_PLOT_WIDTH / items.length
+  const barWidth = Math.max(1, laneWidth * BAR_WIDTH_SHARE)
+  const valueSuffix = resolveChartText(props.valueSuffix)
+  const zeroY = valueToCartesianChartY(0, domain)
+
+  return items.map((item, index) => {
+    const valueY = valueToCartesianChartY(item.value, domain)
+    const rawHeight = Math.abs(zeroY - valueY)
+    const height =
+      item.value === 0 ? 0 : Math.max(rawHeight, MIN_VISIBLE_BAR_HEIGHT)
+    const isNegative = item.value < 0
+    const x =
+      CARTESIAN_CHART_PLOT_X + laneWidth * index + (laneWidth - barWidth) / 2
+    const y = isNegative
+      ? zeroY
+      : Math.min(valueY, zeroY) - (height - rawHeight)
+    const valueLabelY = isNegative
+      ? y + height + VALUE_LABEL_OFFSET
+      : Math.max(2, y - VALUE_LABEL_OFFSET)
+
+    return {
+      label: item.label,
+      value: item.value,
+      formattedValue: formatChartValue(item.value, valueSuffix),
+      color:
+        item.color || DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length],
+      x,
+      y,
+      width: barWidth,
+      height,
+      valueLabelX: x + barWidth / 2,
+      valueLabelY,
+      valueLabelBaseline: isNegative ? 'hanging' : 'auto',
+      labelX: x + barWidth / 2,
+      labelY: CATEGORY_LABEL_Y,
+      roundedTop: Math.min(1.4, barWidth / 2, height / 2),
+    }
+  })
+}
+
+interface ResolvedBarChartSourceItem {
+  label: string
+  value: number
+  color: string
+}
+
+function resolveItems(items: BarChart['items']): ResolvedBarChartSourceItem[] {
+  return (unref(items) || [])
+    .map((itemInput, index) => {
+      const item = unref(itemInput)
+      const value = readChartNumber(item?.value, Number.NaN)
+      return {
+        label: resolveChartText(item?.label) || `Item ${index + 1}`,
+        value,
+        color: resolveChartText(item?.color),
+      }
+    })
+    .filter((item) => Number.isFinite(item.value))
+}
+
+function resolveDomain(props: BarChart): CartesianChartDomain {
+  const values = resolveItems(props.items).map((item) => item.value)
+  return resolveCartesianChartDomain({
+    values,
+    minValue: props.minValue,
+    maxValue: props.maxValue,
+  })
+}
+
+function resolveAriaLabel(props: BarChart) {
+  return (
+    resolveChartText(props.ariaLabel) ||
+    resolveChartText(props.title) ||
+    'Bar chart'
+  )
+}

package/src/standard/barChart/barChartStyle.ts

@@ -0,0 +1,81 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+const BAR_CHART_VALUE_FONT_SIZE = '0.15625rem'
+const BAR_CHART_LABEL_FONT_SIZE = '0.1375rem'
+const BAR_CHART_AXIS_FONT_SIZE = '0.11875rem'
+const BAR_CHART_EMPTY_FONT_SIZE = '0.1625rem'
+
+export function registerBarChartStyles() {
+  themes.forEach((theme, palette) => {
+    registerBarChartBaseStyles(theme)
+    registerBarChartPaintStyles(theme, palette)
+  })
+}
+
+function registerBarChartBaseStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.bar-chart__bar', theme)
+    .transition('opacity 180ms ease, filter 180ms ease, transform 180ms ease')
+    .transformOrigin('center bottom')
+
+  styleBuilder
+    .select('.bar-chart__plot:hover .bar-chart__bar', theme)
+    .opacity('0.72')
+
+  styleBuilder
+    .select('.bar-chart__plot:hover .bar-chart__bar:hover', theme)
+    .opacity('1')
+    .filter('brightness(1.08)')
+
+  styleBuilder
+    .select(
+      '.bar-chart__label, .bar-chart__value, .bar-chart__empty, .bar-chart__grid-line text',
+      theme,
+    )
+    .pointerEvents('none')
+    .letterSpacing('normal')
+}
+
+function registerBarChartPaintStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.bar-chart__grid-line line', theme)
+    .stroke(palette.current.surfaceAlt.rest.border)
+    .strokeWidth('0.22')
+
+  styleBuilder
+    .select('.bar-chart__zero-line', theme)
+    .stroke(palette.current.border.subtle)
+    .strokeWidth('0.36')
+
+  styleBuilder
+    .select('.bar-chart__value', theme)
+    .fill(palette.current.text.default)
+    .fontSize(BAR_CHART_VALUE_FONT_SIZE)
+    .fontWeight(palette.font.weight.w700)
+
+  styleBuilder
+    .select('.bar-chart__label', theme)
+    .fill(palette.current.text.subtle)
+    .fontSize(BAR_CHART_LABEL_FONT_SIZE)
+    .fontWeight(palette.font.weight.w700)
+
+  styleBuilder
+    .select('.bar-chart__grid-line text', theme)
+    .fill(palette.current.text.subtle)
+    .fontSize(BAR_CHART_AXIS_FONT_SIZE)
+    .fontWeight(palette.font.weight.w500)
+    .set('dominant-baseline', 'middle')
+    .set('text-anchor', 'end')
+
+  styleBuilder
+    .select('.bar-chart__empty', theme)
+    .fill(palette.current.text.subtle)
+    .fontSize(BAR_CHART_EMPTY_FONT_SIZE)
+    .fontWeight(palette.font.weight.w700)
+    .set('dominant-baseline', 'middle')
+}

package/src/standard/btn/btn.ts

@@ -0,0 +1,191 @@
+import { type TsSsgContext, tryResolveTsSsgContext } from '@purestack/ts-common'
+import type { SemanticTone } from '@purestack/ts-style'
+import { urlNormalizer } from '@purestack/ts-util'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  type Emits,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import {
+  type ComponentVariant,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export type BtnSize = 'sm' | 'md' | 'lg'
+export type BtnType = 'button' | 'submit' | 'reset'
+export type BtnIconPosition = 'start' | 'end'
+
+export interface BtnBase {
+  tone?: RefOrValue<SemanticTone>
+  size?: RefOrValue<BtnSize>
+  variant?: RefOrValue<ComponentVariant>
+  icon?: RefOrValue<string>
+  iconPosition?: RefOrValue<BtnIconPosition>
+  iconOnly?: RefOrValue<boolean>
+  ariaLabel?: RefOrValue<string>
+  classes?: ComputedRef<string>
+  showStartIcon?: ComputedRef<boolean>
+  showEndIcon?: ComputedRef<boolean>
+  emits?: Emits<'click'>
+}
+
+export interface Btn extends BtnBase {
+  type?: RefOrValue<BtnType>
+  disabled?: RefOrValue<boolean>
+  buttonType?: RefOrValue<BtnType>
+}
+
+export interface BtnLink extends BtnBase {
+  href?: RefOrValue<string>
+  target?: RefOrValue<string>
+  rel?: RefOrValue<string>
+  resolvedHref?: ComputedRef<string>
+  resolvedRel?: ComputedRef<string>
+}
+
+const DEFAULT_BUTTON_VARIANT: ComponentVariant = 'solid'
+
+const buttonTemplate = html`<button
+  class="btn"
+  :class="classes"
+  :type="buttonType"
+  :disabled="disabled"
+  :aria-label="ariaLabel"
+>
+  <Icon class="btn__icon" :name="icon" r-if="showStartIcon"/>
+  <span class="btn__label" r-if="!iconOnly"><slot></slot></span>
+  <Icon class="btn__icon" :name="icon" r-if="showEndIcon"/>
+</button>`
+
+const buttonLinkTemplate = html`<a
+  class="btn"
+  :class="classes"
+  :href="resolvedHref"
+  :target="target"
+  :rel="resolvedRel"
+  :aria-label="ariaLabel"
+>
+  <Icon class="btn__icon" :name="icon" r-if="showStartIcon"/>
+  <span class="btn__label" r-if="!iconOnly"><slot></slot></span>
+  <Icon class="btn__icon" :name="icon" r-if="showEndIcon"/>
+</a>`
+
+function defineButtonComponent() {
+  return defineComponent<Btn>(buttonTemplate, {
+    props: [
+      'tone',
+      'size',
+      'variant',
+      'type',
+      'icon',
+      'iconPosition',
+      'iconOnly',
+      'ariaLabel',
+      'disabled',
+    ],
+    context: (head) => resolveBtn(head.props),
+  })
+}
+
+function defineButtonLinkComponent() {
+  return defineComponent<BtnLink>(buttonLinkTemplate, {
+    props: [
+      'href',
+      'target',
+      'rel',
+      'tone',
+      'size',
+      'variant',
+      'icon',
+      'iconPosition',
+      'iconOnly',
+      'ariaLabel',
+    ],
+    context: (head) => resolveBtnLink(head.props, tryResolveTsSsgContext(head)),
+  })
+}
+
+export function defineButtonComponents() {
+  return {
+    btn: defineButtonComponent(),
+    btnLink: defineButtonLinkComponent(),
+  }
+}
+
+function resolveBtn(props: Btn): Btn {
+  return {
+    ...props,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: DEFAULT_BUTTON_VARIANT,
+        classes: resolveButtonStateClasses(props),
+      }),
+    ),
+    buttonType: computed(() => unref(props.type) || 'button'),
+    showStartIcon: computed(() => resolveShowStartIcon(props)),
+    showEndIcon: computed(() => resolveShowEndIcon(props)),
+  }
+}
+
+function resolveBtnLink(
+  props: BtnLink,
+  context: TsSsgContext | undefined,
+): BtnLink {
+  return {
+    ...props,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: DEFAULT_BUTTON_VARIANT,
+        classes: resolveButtonStateClasses(props),
+      }),
+    ),
+    resolvedHref: computed(() => resolveButtonHref(props, context)),
+    resolvedRel: computed(() => resolveButtonRel(props)),
+    showStartIcon: computed(() => resolveShowStartIcon(props)),
+    showEndIcon: computed(() => resolveShowEndIcon(props)),
+  }
+}
+
+function resolveButtonStateClasses(props: BtnBase) {
+  const size = unref(props.size)
+  const hasIcon = !!unref(props.icon)
+  const iconPosition = unref(props.iconPosition)
+  const iconOnly = unref(props.iconOnly)
+  const classes = [size ? `btn--${size}` : '']
+  if (!hasIcon) return classes
+  classes.push(
+    iconOnly
+      ? 'btn--icon-only'
+      : iconPosition === 'end'
+        ? 'btn--icon-end'
+        : 'btn--icon-start',
+  )
+  return classes
+}
+
+function resolveShowStartIcon(props: BtnBase) {
+  const hasIcon = !!unref(props.icon)
+  return hasIcon && unref(props.iconPosition) !== 'end'
+}
+
+function resolveShowEndIcon(props: BtnBase) {
+  const hasIcon = !!unref(props.icon)
+  return hasIcon && unref(props.iconPosition) === 'end'
+}
+
+function resolveButtonHref(props: BtnLink, context: TsSsgContext | undefined) {
+  const normalized = urlNormalizer.normalizeHref(unref(props.href))
+  return normalized
+    ? (context?.resolvePublicHref(normalized) ?? normalized)
+    : undefined
+}
+
+function resolveButtonRel(props: BtnLink) {
+  const rel = unref(props.rel)
+  if (rel) return rel
+  return unref(props.target) === '_blank' ? 'noopener noreferrer' : undefined
+}