@purestack/ts-components 1.1.0

package/src/standard/btn/btnStyle.ts

@@ -0,0 +1,59 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import { styleBuilder, type ThemeMode, themes } from '@purestack/ts-style'
+
+export function registerButtonStyles() {
+  themes.forEach((theme, palette) => {
+    registerButtonBaseStyles(theme, palette)
+    registerButtonSizeStyles(theme, palette)
+  })
+}
+
+function registerButtonBaseStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.btn', theme)
+    .display('inline-flex')
+    .background('transparent')
+    .verticalAlign('middle')
+    .alignItems('center')
+    .justifyContent('center')
+    .gap('0.25em')
+    .border('none')
+    .borderColor('transparent')
+    .cursor('pointer')
+    .textDecoration('none')
+    .whiteSpace('nowrap')
+    .transition(
+      'background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease',
+    )
+    .webkitTapHighlightColor('transparent')
+    .padding('0.5em 0.75em')
+    .apply(palette.applyFont(palette.font.size.body, palette.font.weight.w500))
+    .userSelect('none')
+
+  styleBuilder
+    .select('.btn:disabled', theme)
+    .cursor('not-allowed')
+    .transform('none')
+    .boxShadow('none')
+
+  styleBuilder
+    .select('.btn__label', theme)
+    .display('inline-flex')
+    .alignItems('center')
+
+  styleBuilder.select('.btn__icon', theme).width('1.1em').height('1.1em')
+}
+
+function registerButtonSizeStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.btn--sm', theme)
+    .apply(palette.applyFont(palette.font.size.xs, palette.font.weight.w500))
+
+  /*- The default size (md) is defined in the .btn for simplicity. */
+
+  styleBuilder
+    .select('.btn--lg', theme)
+    .apply(palette.applyFont(palette.font.size.h2, palette.font.weight.w500))
+  styleBuilder.select('.btn--icon-only', theme).padding('0.25em')
+  styleBuilder.select('.btn--icon-only .btn__label', theme).display('none')
+}

package/src/standard/btnGroup/btnGroup.ts

@@ -0,0 +1,208 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+import type { BtnIconPosition, BtnSize } from '../btn/btn'
+import {
+  type ComponentVariant,
+  type ComponentVariantMode,
+  resolveComponentClasses,
+} from '../componentVariant'
+
+export type BtnGroupAlign = 'start' | 'center' | 'end'
+export type BtnGroupDropDownAlign = 'start' | 'end'
+
+export interface BtnGroup {
+  align?: RefOrValue<BtnGroupAlign>
+  wrap?: RefOrValue<boolean>
+  classes?: ComputedRef<string>
+}
+
+export interface BtnGroupDropDown {
+  label?: RefOrValue<string>
+  icon?: RefOrValue<string>
+  iconPosition?: RefOrValue<BtnIconPosition>
+  iconOnly?: RefOrValue<boolean>
+  ariaLabel?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  size?: RefOrValue<BtnSize>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  menuTone?: RefOrValue<SemanticTone>
+  menuVariant?: RefOrValue<ComponentVariant>
+  menuVariantMode?: RefOrValue<ComponentVariantMode>
+  align?: RefOrValue<BtnGroupDropDownAlign>
+  classes?: ComputedRef<string>
+  triggerClasses?: ComputedRef<string>
+  menuClasses?: ComputedRef<string>
+  resolvedAlign?: ComputedRef<BtnGroupDropDownAlign>
+  resolvedLabel?: ComputedRef<string>
+  resolvedIcon?: ComputedRef<string>
+  resolvedAriaLabel?: ComputedRef<string | undefined>
+  showStartIcon?: ComputedRef<boolean>
+  showEndIcon?: ComputedRef<boolean>
+}
+
+const DEFAULT_BUTTON_VARIANT: ComponentVariant = 'solid'
+const DEFAULT_DROPDOWN_LABEL = 'More'
+const DEFAULT_DROPDOWN_ICON = 'lucide:chevron-down'
+
+const btnGroupTemplate = html`<div class="btn-group" :class="classes">
+  <slot></slot>
+</div>`
+
+const btnGroupDropDownTemplate = html`<details
+  class="btn-group__dropdown"
+  :class="classes"
+  :data-menu-align="resolvedAlign"
+  data-menu-runtime
+>
+  <summary
+    class="btn btn-group__toggle"
+    :class="triggerClasses"
+    :aria-label="resolvedAriaLabel"
+  >
+    <Icon class="btn__icon" :name="resolvedIcon" r-if="showStartIcon"/>
+    <span class="btn__label" r-if="!iconOnly">{{ resolvedLabel }}</span>
+    <Icon class="btn__icon" :name="resolvedIcon" r-if="showEndIcon"/>
+  </summary>
+  <div class="btn-group__menu" :class="menuClasses" data-menu-panel>
+    <slot></slot>
+  </div>
+</details>`
+
+function defineBtnGroupComponent() {
+  return defineComponent<BtnGroup>(btnGroupTemplate, {
+    props: ['align', 'wrap'],
+    context: (head) => resolveBtnGroup(head.props),
+  })
+}
+
+function defineBtnGroupDropDownComponent() {
+  return defineComponent<BtnGroupDropDown>(btnGroupDropDownTemplate, {
+    props: [
+      'label',
+      'icon',
+      'iconPosition',
+      'iconOnly',
+      'ariaLabel',
+      'tone',
+      'size',
+      'variant',
+      'variantMode',
+      'menuTone',
+      'menuVariant',
+      'menuVariantMode',
+      'align',
+    ],
+    context: (head) => resolveBtnGroupDropDown(head.props),
+  })
+}
+
+export function defineBtnGroupComponents() {
+  return {
+    btnGroup: defineBtnGroupComponent(),
+    btnGroupDropDown: defineBtnGroupDropDownComponent(),
+  }
+}
+
+function resolveBtnGroup(props: BtnGroup): BtnGroup {
+  return {
+    ...props,
+    classes: computed(() =>
+      [
+        resolveBtnGroupAlignClass(props),
+        unref(props.wrap) ? 'btn-group--wrap' : '',
+      ]
+        .filter(Boolean)
+        .join(' '),
+    ),
+  }
+}
+
+function resolveBtnGroupDropDown(props: BtnGroupDropDown): BtnGroupDropDown {
+  return {
+    ...props,
+    classes: computed(() => resolveDropDownClasses(props)),
+    triggerClasses: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: DEFAULT_BUTTON_VARIANT,
+        classes: resolveButtonStateClasses(props),
+      }),
+    ),
+    menuClasses: computed(() =>
+      resolveComponentClasses(
+        {
+          tone: props.menuTone,
+          variant: props.menuVariant,
+          variantMode: props.menuVariantMode,
+        },
+        {
+          defaultVariant: 'surfaceAlt',
+          defaultVariantMode: 'stateless',
+        },
+      ),
+    ),
+    resolvedAlign: computed(() => resolveDropDownAlign(props)),
+    resolvedLabel: computed(() => unref(props.label) || DEFAULT_DROPDOWN_LABEL),
+    resolvedIcon: computed(() => unref(props.icon) || DEFAULT_DROPDOWN_ICON),
+    resolvedAriaLabel: computed(() => resolveDropDownAriaLabel(props)),
+    showStartIcon: computed(() => resolveShowStartIcon(props)),
+    showEndIcon: computed(() => resolveShowEndIcon(props)),
+  }
+}
+
+function resolveBtnGroupAlignClass(props: BtnGroup) {
+  const align = unref(props.align)
+  return align ? `btn-group--${align}` : ''
+}
+
+function resolveDropDownClasses(props: BtnGroupDropDown) {
+  return `btn-group__dropdown--${resolveDropDownAlign(props)}`
+}
+
+function resolveDropDownAlign(props: BtnGroupDropDown): BtnGroupDropDownAlign {
+  return unref(props.align) || 'end'
+}
+
+function resolveButtonStateClasses(props: BtnGroupDropDown) {
+  const size = unref(props.size)
+  const hasIcon = !!resolveIconName(props)
+  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 === 'start'
+        ? 'btn--icon-start'
+        : 'btn--icon-end',
+  )
+  return classes
+}
+
+function resolveShowStartIcon(props: BtnGroupDropDown) {
+  return !!resolveIconName(props) && unref(props.iconPosition) === 'start'
+}
+
+function resolveShowEndIcon(props: BtnGroupDropDown) {
+  return !!resolveIconName(props) && unref(props.iconPosition) !== 'start'
+}
+
+function resolveIconName(props: BtnGroupDropDown) {
+  return unref(props.icon) || DEFAULT_DROPDOWN_ICON
+}
+
+function resolveDropDownAriaLabel(props: BtnGroupDropDown) {
+  const ariaLabel = unref(props.ariaLabel)
+  if (ariaLabel) return ariaLabel
+  return unref(props.iconOnly)
+    ? unref(props.label) || 'More actions'
+    : undefined
+}

package/src/standard/btnGroup/btnGroupStyle.ts

@@ -0,0 +1,85 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import { styleBuilder, type ThemeMode, themes } from '@purestack/ts-style'
+
+export function registerBtnGroupStyles() {
+  themes.forEach((theme, palette) => {
+    registerBtnGroupLayoutStyles(theme)
+    registerBtnGroupDropDownStyles(theme, palette)
+  })
+}
+
+function registerBtnGroupLayoutStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.btn-group', theme)
+    .display('inline-flex')
+    .alignItems('center')
+    .justifyContent('flex-start')
+    .gap('0.375rem')
+    .verticalAlign('middle')
+
+  styleBuilder.select('.btn-group--center', theme).justifyContent('center')
+  styleBuilder.select('.btn-group--end', theme).justifyContent('flex-end')
+  styleBuilder.select('.btn-group--wrap', theme).flexWrap('wrap')
+}
+
+function registerBtnGroupDropDownStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.btn-group__dropdown', theme)
+    .position('relative')
+    .display('inline-flex')
+    .lineHeight('normal')
+
+  styleBuilder.select('.btn-group__toggle', theme).listStyle('none')
+  styleBuilder.select('.btn-group__toggle::marker', theme).content('""')
+  styleBuilder
+    .select('.btn-group__toggle::-webkit-details-marker', theme)
+    .display('none')
+
+  styleBuilder
+    .select('.btn-group__dropdown[open] > .btn-group__toggle', theme)
+    .boxShadow(`0 0 0 3px ${palette.current.border.focus}`)
+
+  styleBuilder
+    .select('.btn-group__menu', theme)
+    .position('absolute')
+    .display('none')
+    .top('calc(100% + 0.375rem)')
+    .right('0')
+    .zIndex(70)
+    .width('max-content')
+    .minWidth('max(11rem, 100%)')
+    .maxWidth('calc(100vw - 2rem)')
+    .padding('0.375rem')
+    .gap('0.25rem')
+    .boxShadow(palette.effect.strongShadow)
+
+  styleBuilder
+    .select('.btn-group__dropdown--start > .btn-group__menu', theme)
+    .left('0')
+    .right('auto')
+
+  styleBuilder
+    .select('.btn-group__dropdown[open] > .btn-group__menu', theme)
+    .display('grid')
+
+  styleBuilder
+    .select('.btn-group__menu > .btn', theme)
+    .width('100%')
+    .justifyContent('flex-start')
+    .textAlign('left')
+    .whiteSpace('normal')
+
+  styleBuilder
+    .select('.btn-group__menu > .btn .btn__label', theme)
+    .minWidth('0')
+    .whiteSpace('normal')
+    .overflowWrap('anywhere')
+
+  styleBuilder
+    .select('.btn-group__menu > *', theme)
+    .maxWidth('100%')
+    .minWidth('0')
+}

package/src/standard/chart/cartesianChart.ts

@@ -0,0 +1,99 @@
+import type { RefOrValue } from 'regor'
+import {
+  CARTESIAN_CHART_PLOT_HEIGHT,
+  CARTESIAN_CHART_PLOT_WIDTH,
+  CARTESIAN_CHART_PLOT_X,
+  CARTESIAN_CHART_PLOT_Y,
+  DEFAULT_CARTESIAN_GRID_LINE_COUNT,
+} from './chartDefaults'
+import {
+  formatChartValue,
+  readChartNumber,
+  resolveChartText,
+} from './chartUtils'
+
+export interface CartesianChartDomain {
+  min: number
+  max: number
+}
+
+export interface ResolvedCartesianChartGridLine {
+  value: number
+  formattedValue: string
+  y: number
+}
+
+export interface ResolveCartesianChartDomainOptions {
+  values: number[]
+  minValue?: RefOrValue<number | string>
+  maxValue?: RefOrValue<number | string>
+}
+
+export function resolveCartesianChartDomain({
+  values,
+  minValue,
+  maxValue,
+}: ResolveCartesianChartDomainOptions): CartesianChartDomain {
+  const fallbackMax = values.length ? Math.max(...values) : 1
+  const fallbackMin = values.length ? Math.min(...values) : 0
+  let min = Math.min(
+    readChartNumber(minValue, Math.min(0, fallbackMin)),
+    fallbackMin,
+    0,
+  )
+  let max = Math.max(
+    readChartNumber(maxValue, Math.max(0, fallbackMax)),
+    fallbackMax,
+    0,
+  )
+
+  if (min === max) {
+    if (min === 0) max = 1
+    else if (min > 0) min = 0
+    else max = 0
+  }
+
+  if (min > max) [min, max] = [max, min]
+
+  return { min, max }
+}
+
+export function resolveCartesianChartGridLines(
+  domain: CartesianChartDomain,
+  valueSuffix?: RefOrValue<string>,
+): ResolvedCartesianChartGridLine[] {
+  const suffix = resolveChartText(valueSuffix)
+  const step =
+    (domain.max - domain.min) / (DEFAULT_CARTESIAN_GRID_LINE_COUNT - 1)
+
+  return Array.from(
+    { length: DEFAULT_CARTESIAN_GRID_LINE_COUNT },
+    (_, index) => {
+      const value = domain.max - step * index
+      return {
+        value,
+        formattedValue: formatChartValue(value, suffix),
+        y: valueToCartesianChartY(value, domain),
+      }
+    },
+  )
+}
+
+export function valueToCartesianChartY(
+  value: number,
+  domain: CartesianChartDomain,
+) {
+  const range = domain.max - domain.min
+  if (range <= 0) return CARTESIAN_CHART_PLOT_Y + CARTESIAN_CHART_PLOT_HEIGHT
+  const ratio = (domain.max - value) / range
+  return CARTESIAN_CHART_PLOT_Y + ratio * CARTESIAN_CHART_PLOT_HEIGHT
+}
+
+export function pointIndexToCartesianChartX(index: number, count: number) {
+  if (count <= 1) {
+    return CARTESIAN_CHART_PLOT_X + CARTESIAN_CHART_PLOT_WIDTH / 2
+  }
+  return (
+    CARTESIAN_CHART_PLOT_X + (index / (count - 1)) * CARTESIAN_CHART_PLOT_WIDTH
+  )
+}

package/src/standard/chart/chartDefaults.ts

@@ -0,0 +1,25 @@
+import { getThemePaletteVar } from '@purestack/ts-style'
+
+export const DEFAULT_CHART_SIZE = '100%'
+export const DEFAULT_CARTESIAN_CHART_WIDTH = '100%'
+export const DEFAULT_CARTESIAN_CHART_HEIGHT = undefined
+export const DEFAULT_CHART_EMPTY_LABEL = 'No data'
+export const DEFAULT_CARTESIAN_GRID_LINE_COUNT = 5
+
+export const CARTESIAN_CHART_VIEWBOX_HEIGHT = 58
+export const CARTESIAN_CHART_PLOT_X = 8
+export const CARTESIAN_CHART_PLOT_Y = 6
+export const CARTESIAN_CHART_PLOT_WIDTH = 86
+export const CARTESIAN_CHART_PLOT_HEIGHT = 43
+export const CARTESIAN_CHART_LABEL_Y = 53.5
+
+export const DEFAULT_CHART_COLORS = [
+  getThemePaletteVar('semanticTone.accent.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.feature.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.success.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.info.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.warning.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.secondary.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.danger.button.hover.bgcolor'),
+  getThemePaletteVar('semanticTone.custom.button.hover.bgcolor'),
+]

package/src/standard/chart/chartUtils.ts

@@ -0,0 +1,84 @@
+import { clamp } from '@purestack/ts-util'
+import { type RefOrValue, unref } from 'regor'
+
+export interface FormatChartNumberOptions {
+  precision?: number
+}
+
+export function readChartNumber(
+  value: RefOrValue<number | string> | undefined,
+  fallback: number,
+) {
+  const resolved = unref(value)
+  const number =
+    typeof resolved === 'number'
+      ? resolved
+      : Number.parseFloat(String(resolved))
+  return Number.isFinite(number) ? number : fallback
+}
+
+export function clampChartNumber(
+  value: RefOrValue<number | string> | undefined,
+  fallback: number,
+  min: number,
+  max: number,
+) {
+  return clamp(readChartNumber(value, fallback), min, max)
+}
+
+export function resolveChartText(value?: RefOrValue<string>) {
+  const resolved = unref(value)
+  return typeof resolved === 'string' ? resolved.trim() : ''
+}
+
+export function resolveChartSize(
+  size: RefOrValue<number | string> | undefined,
+  fallback: number | string | undefined,
+) {
+  const resolved = unref(size)
+  if (typeof resolved === 'number' && Number.isFinite(resolved)) {
+    return Math.max(1, resolved)
+  }
+  if (typeof resolved !== 'string') return fallback
+  const trimmed = resolved.trim()
+  return trimmed || fallback
+}
+
+export function resolveChartCssSize(size?: RefOrValue<number | string>) {
+  const resolved = unref(size)
+  if (typeof resolved === 'number' && Number.isFinite(resolved)) {
+    return `${resolved}px`
+  }
+  if (typeof resolved !== 'string') return ''
+  const trimmed = resolved.trim()
+  return isNumericChartString(trimmed) ? `${trimmed}px` : trimmed
+}
+
+export function formatChartValue(
+  value: number,
+  suffix: string,
+  options: FormatChartNumberOptions = {},
+) {
+  const formatted = Number.isInteger(value)
+    ? String(value)
+    : formatChartNumber(value, options)
+  return suffix ? `${formatted}${suffix}` : formatted
+}
+
+export function formatChartPoint(
+  point: { x: number; y: number },
+  options: FormatChartNumberOptions = {},
+) {
+  return `${formatChartNumber(point.x, options)} ${formatChartNumber(point.y, options)}`
+}
+
+export function formatChartNumber(
+  value: number,
+  { precision = 2 }: FormatChartNumberOptions = {},
+) {
+  return Number.parseFloat(value.toFixed(precision)).toString()
+}
+
+function isNumericChartString(value: string) {
+  return /^-?\d+(?:\.\d+)?$/.test(value)
+}