@purestack/ts-components 1.1.0

package/src/standard/expandablePanel/expandablePanel.ts

@@ -0,0 +1,106 @@
+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 ExpandablePanel {
+  title?: RefOrValue<string>
+  description?: RefOrValue<string>
+  meta?: RefOrValue<string>
+  badge?: RefOrValue<string>
+  icon?: RefOrValue<string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  summaryVariant?: RefOrValue<ComponentVariant>
+  open?: RefOrValue<boolean>
+  classes?: ComputedRef<string>
+  summaryClasses?: ComputedRef<string>
+}
+
+const expandablePanelTemplate = html`<details class="expandable-panel gap-0" :class="classes" :open="open">
+  <Flex
+    container="summary"
+    align="center"
+    class="expandable-panel__summary cursor-pointer p-4"
+    :class="summaryClasses"
+  >
+    <slot name="summary">
+      <IconFrame
+        :name="icon"
+        r-if="icon"
+        :variant="summaryVariant"
+        variantMode="stateless"/>
+      <Flex align="center" wrap="true" class="flex-1 gap-2">
+        <span class="fw-700 min-w-0 lh-0" r-if="title">{{ title }}</span>
+        <Badge :tone="tone" r-if="badge">{{ badge }}</Badge>
+        <span class="fs-sm w-full lh-0" r-if="description">
+          {{ description }}
+        </span>
+      </Flex>
+      <Flex align="center" justify="center" class="flex-none">
+        <span class="fw-600" r-if="meta"> {{ meta }} </span>
+        <IconFrame
+          class="expandable-panel__chevron rounded-pill"
+          name="iconoir:nav-arrow-down"
+          :variant="summaryVariant"
+          variantMode="stateless"/>
+      </Flex>
+    </slot>
+  </Flex>
+  <div class="expandable-panel__body p-4 bt-0"><slot></slot></div>
+</details>`
+
+function defineExpandablePanelComponent() {
+  return defineComponent<ExpandablePanel>(expandablePanelTemplate, {
+    props: [
+      'title',
+      'description',
+      'meta',
+      'badge',
+      'icon',
+      'tone',
+      'variant',
+      'summaryVariant',
+      'open',
+    ],
+    context: (head) => resolveExpandablePanel(head.props),
+  })
+}
+
+export function defineExpandablePanelComponents() {
+  return {
+    expandablePanel: defineExpandablePanelComponent(),
+  }
+}
+
+function resolveExpandablePanel(props: ExpandablePanel): ExpandablePanel {
+  return {
+    ...props,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: 'surface',
+        defaultVariantMode: 'stateless',
+      }),
+    ),
+    summaryClasses: computed(() =>
+      resolveComponentClasses(
+        {
+          tone: props.tone,
+          variant: props.summaryVariant,
+        },
+        {
+          defaultVariant: 'surface',
+          defaultVariantMode: 'stateful',
+        },
+      ),
+    ),
+  }
+}

package/src/standard/expandablePanel/expandablePanelStyle.ts

@@ -0,0 +1,56 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerExpandablePanelStyles() {
+  themes.forEach((theme, palette) => {
+    registerExpandablePanelShellStyles(theme, palette)
+    registerExpandablePanelSummaryStyles(theme, palette)
+  })
+}
+
+function registerExpandablePanelShellStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.expandable-panel', theme)
+    .boxShadow(palette.effect.panelShadow)
+    .padding('0')
+    .overflow('hidden')
+    .transition(
+      'border-color 180ms ease, box-shadow 180ms ease, background 180ms ease',
+    )
+
+  styleBuilder
+    .select('.expandable-panel[open]', theme)
+    .boxShadow(palette.effect.panelShadowStrong)
+}
+
+function registerExpandablePanelSummaryStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.expandable-panel[open] .expandable-panel__summary', theme)
+    .borderBottomLeftRadius('0 !important')
+    .borderBottomRightRadius('0 !important')
+
+  styleBuilder
+    .select('.expandable-panel__summary:focus-visible', theme)
+    .outline(`2px solid ${palette.current.border.focus}`)
+    .outlineOffset('-2px')
+
+  styleBuilder
+    .select('.expandable-panel__chevron', theme)
+    .transition(
+      'transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease',
+    )
+
+  styleBuilder
+    .select('.expandable-panel[open] .expandable-panel__chevron', theme)
+    .transform('rotate(180deg)')
+}

package/src/standard/flex/flex.ts

@@ -0,0 +1,269 @@
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  html,
+  type RefOrValue,
+  unref,
+} from 'regor'
+
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+export type FlexAlign = 'stretch' | 'start' | 'center' | 'end' | 'baseline'
+export type FlexJustify =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'stretch'
+  | 'between'
+  | 'around'
+  | 'evenly'
+export type FlexWrap = boolean | 'wrap' | 'nowrap' | 'reverse' | 'true'
+
+export interface Flex {
+  container?: RefOrValue<string>
+  direction?: RefOrValue<FlexDirection>
+  directionSm?: RefOrValue<FlexDirection>
+  directionMd?: RefOrValue<FlexDirection>
+  directionLg?: RefOrValue<FlexDirection>
+  directionXl?: RefOrValue<FlexDirection>
+  align?: RefOrValue<FlexAlign>
+  alignSm?: RefOrValue<FlexAlign>
+  alignMd?: RefOrValue<FlexAlign>
+  alignLg?: RefOrValue<FlexAlign>
+  alignXl?: RefOrValue<FlexAlign>
+  justify?: RefOrValue<FlexJustify>
+  justifySm?: RefOrValue<FlexJustify>
+  justifyMd?: RefOrValue<FlexJustify>
+  justifyLg?: RefOrValue<FlexJustify>
+  justifyXl?: RefOrValue<FlexJustify>
+  wrap?: RefOrValue<FlexWrap>
+  wrapSm?: RefOrValue<FlexWrap>
+  wrapMd?: RefOrValue<FlexWrap>
+  wrapLg?: RefOrValue<FlexWrap>
+  wrapXl?: RefOrValue<FlexWrap>
+  inline?: RefOrValue<boolean | string>
+  classes?: ComputedRef<string>
+}
+
+const flexTemplate = html`<div :is="container ?? 'div'" class="flex" :class="classes">
+  <slot></slot>
+</div>`
+
+function defineFlexComponent() {
+  return defineComponent<Flex>(flexTemplate, {
+    props: [
+      'container',
+      'direction',
+      'directionSm',
+      'directionMd',
+      'directionLg',
+      'directionXl',
+      'align',
+      'alignSm',
+      'alignMd',
+      'alignLg',
+      'alignXl',
+      'justify',
+      'justifySm',
+      'justifyMd',
+      'justifyLg',
+      'justifyXl',
+      'wrap',
+      'wrapSm',
+      'wrapMd',
+      'wrapLg',
+      'wrapXl',
+      'inline',
+    ],
+    context: (head) => resolveFlex(head.props),
+  })
+}
+
+export function defineFlexComponents() {
+  return {
+    flex: defineFlexComponent(),
+  }
+}
+
+function resolveFlex(props: Flex): Flex {
+  const classes = computed(() => {
+    return [
+      resolveDirectionClass(props.direction),
+      resolveResponsiveDirectionClass('sm', props.directionSm),
+      resolveResponsiveDirectionClass('md', props.directionMd),
+      resolveResponsiveDirectionClass('lg', props.directionLg),
+      resolveResponsiveDirectionClass('xl', props.directionXl),
+      resolveAlignClass(props.align),
+      resolveResponsiveAlignClass('sm', props.alignSm),
+      resolveResponsiveAlignClass('md', props.alignMd),
+      resolveResponsiveAlignClass('lg', props.alignLg),
+      resolveResponsiveAlignClass('xl', props.alignXl),
+      resolveJustifyClass(props.justify),
+      resolveResponsiveJustifyClass('sm', props.justifySm),
+      resolveResponsiveJustifyClass('md', props.justifyMd),
+      resolveResponsiveJustifyClass('lg', props.justifyLg),
+      resolveResponsiveJustifyClass('xl', props.justifyXl),
+      resolveWrapClass(props.wrap),
+      resolveResponsiveWrapClass('sm', props.wrapSm),
+      resolveResponsiveWrapClass('md', props.wrapMd),
+      resolveResponsiveWrapClass('lg', props.wrapLg),
+      resolveResponsiveWrapClass('xl', props.wrapXl),
+      resolveInlineClass(props.inline),
+    ]
+      .filter(Boolean)
+      .join(' ')
+  })
+
+  return {
+    ...props,
+    classes,
+  }
+}
+
+function resolveDirectionClass(value?: RefOrValue<FlexDirection>) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === 'column') return 'flex-column'
+  if (normalized === 'column-reverse') return 'flex-column-reverse'
+  if (normalized === 'row-reverse') return 'flex-row-reverse'
+  if (normalized === 'row') return ''
+
+  return ''
+}
+
+function resolveResponsiveDirectionClass(
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl',
+  value?: RefOrValue<FlexDirection>,
+) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === 'column') return `flex-direction-${breakpoint}-column`
+  if (normalized === 'column-reverse') {
+    return `flex-direction-${breakpoint}-column-reverse`
+  }
+  if (normalized === 'row') return `flex-direction-${breakpoint}-row`
+  if (normalized === 'row-reverse') {
+    return `flex-direction-${breakpoint}-row-reverse`
+  }
+
+  return ''
+}
+
+function resolveAlignClass(value?: RefOrValue<FlexAlign>) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === 'start') return 'align-flex-start'
+  if (normalized === 'end') return 'align-flex-end'
+
+  if (
+    normalized === 'stretch' ||
+    normalized === 'center' ||
+    normalized === 'baseline'
+  ) {
+    return `align-${normalized}`
+  }
+
+  return ''
+}
+
+function resolveResponsiveAlignClass(
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl',
+  value?: RefOrValue<FlexAlign>,
+) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === 'start') return `align-${breakpoint}-flex-start`
+  if (normalized === 'end') return `align-${breakpoint}-flex-end`
+
+  if (
+    normalized === 'stretch' ||
+    normalized === 'center' ||
+    normalized === 'baseline'
+  ) {
+    return `align-${breakpoint}-${normalized}`
+  }
+
+  return ''
+}
+
+function resolveJustifyClass(value?: RefOrValue<FlexJustify>) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (
+    normalized === 'start' ||
+    normalized === 'center' ||
+    normalized === 'end' ||
+    normalized === 'stretch' ||
+    normalized === 'between' ||
+    normalized === 'around' ||
+    normalized === 'evenly'
+  ) {
+    return `justify-${normalized}`
+  }
+
+  return ''
+}
+
+function resolveResponsiveJustifyClass(
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl',
+  value?: RefOrValue<FlexJustify>,
+) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (
+    normalized === 'start' ||
+    normalized === 'center' ||
+    normalized === 'end' ||
+    normalized === 'stretch' ||
+    normalized === 'between' ||
+    normalized === 'around' ||
+    normalized === 'evenly'
+  ) {
+    return `justify-${breakpoint}-${normalized}`
+  }
+
+  return ''
+}
+
+function resolveWrapClass(value?: RefOrValue<FlexWrap>) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === true || normalized === 'true' || normalized === 'wrap') {
+    return 'flex-wrap'
+  }
+  if (normalized === 'reverse') return 'flex-wrap-reverse'
+
+  return ''
+}
+
+function resolveResponsiveWrapClass(
+  breakpoint: 'sm' | 'md' | 'lg' | 'xl',
+  value?: RefOrValue<FlexWrap>,
+) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === true || normalized === 'true' || normalized === 'wrap') {
+    return `flex-wrap-${breakpoint}`
+  }
+  if (normalized === 'nowrap') return `flex-nowrap-${breakpoint}`
+  if (normalized === 'reverse') return `flex-wrap-${breakpoint}-reverse`
+
+  return ''
+}
+
+function resolveInlineClass(value?: RefOrValue<boolean | string>) {
+  if (!value) return ''
+
+  const normalized = unref(value)
+  if (normalized === true || normalized === 'true') return 'flex-inline'
+
+  return ''
+}