@hina-ui/vue 1.7.5 → 1.7.7

package/src/components/button/Button.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
   import { computed, useSlots } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useAccessibleName } from '../../lib/a11y'
   import { button, buttonIconBox, type ButtonVariants } from './button.variants'
   import IconSlot from './IconSlot.vue'
   import Ripple from '../ripple/Ripple.vue'
   import Spinner from '../spinner/Spinner.vue'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnButton' })
 

package/src/components/calendar/utils/format.ts

@@ -1,23 +1 @@
-import { getLocalTimeZone, type DateValue } from '@internationalized/date'
-
-const local = (date: DateValue) => date.toDate(getLocalTimeZone())
-
-export function formatMonthHeading(tag: string, date: DateValue) {
-  return new Intl.DateTimeFormat(tag, { year: 'numeric', month: 'long' }).format(local(date))
-}
-
-export function formatYearHeading(tag: string, date: DateValue) {
-  return new Intl.DateTimeFormat(tag, { year: 'numeric' }).format(local(date))
-}
-
-export function formatMonthName(tag: string, date: DateValue) {
-  return new Intl.DateTimeFormat(tag, { month: 'short' }).format(local(date))
-}
-
-export function formatDigits(tag: string, value: number) {
-  return new Intl.NumberFormat(tag, { useGrouping: false }).format(value)
-}
-
-export function formatYearsHeading(tag: string, cells: DateValue[]) {
-  return `${formatDigits(tag, cells[0]!.year)} – ${formatDigits(tag, cells.at(-1)!.year)}`
-}
+export * from '../../../../../shared/src/lib/calendar/format'

package/src/components/card/Card.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { card } from './card.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnCard' })
 

package/src/components/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check, Minus } from '@lucide/vue'
-  import { CheckboxRoot } from 'reka-ui'
+  import { CheckboxRoot } from '../../primitives/checkbox'
   import { useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { CheckboxGroupRoot } from 'reka-ui'
+  import { CheckboxGroupRoot } from '../../primitives/checkbox'
   import { cn } from '../../lib/cn'
   import { shieldFormField, useFieldControl } from '../form-field/context'
   import Checkbox from '../checkbox/Checkbox.vue'

package/src/components/chip/Chip.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import { computed, useSlots } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
@@ -9,6 +8,8 @@
   import IconSlot from './IconSlot.vue'
   import { useChipRoot } from './composables/useChipRoot'
   import { chip, chipRemove, type ChipVariants } from './chip.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnChip' })
 

package/src/components/chip/composables/useChipRoot.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
+import type { PrimitiveProps } from '../../../primitives/primitive'
 
 export function useChipRoot(props: PrimitiveProps & { selectable?: boolean; disabled?: boolean }) {
   const tag = computed(() => props.as ?? (props.selectable ? 'button' : 'span'))

package/src/components/code-block/highlighter.ts

@@ -1,98 +1 @@
-import type { HighlighterCore, ThemedToken } from 'shiki/core'
-
-const langLoaders: Record<string, () => Promise<{ default: unknown }>> = {
-  typescript: () => import('shiki/langs/typescript.mjs'),
-  tsx: () => import('shiki/langs/tsx.mjs'),
-  javascript: () => import('shiki/langs/javascript.mjs'),
-  jsx: () => import('shiki/langs/jsx.mjs'),
-  vue: () => import('shiki/langs/vue.mjs'),
-  html: () => import('shiki/langs/html.mjs'),
-  css: () => import('shiki/langs/css.mjs'),
-  json: () => import('shiki/langs/json.mjs'),
-  bash: () => import('shiki/langs/bash.mjs'),
-  markdown: () => import('shiki/langs/markdown.mjs'),
-  yaml: () => import('shiki/langs/yaml.mjs'),
-  sql: () => import('shiki/langs/sql.mjs'),
-  prisma: () => import('shiki/langs/prisma.mjs'),
-  diff: () => import('shiki/langs/diff.mjs'),
-}
-
-const langAliases: Record<string, string> = {
-  ts: 'typescript',
-  js: 'javascript',
-  sh: 'bash',
-  shell: 'bash',
-  zsh: 'bash',
-  md: 'markdown',
-  yml: 'yaml',
-}
-
-let core: Promise<HighlighterCore> | undefined
-const loadedLangs = new Set<string>()
-
-function getCore() {
-  core ??= (async () => {
-    const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, light, dark] =
-      await Promise.all([
-        import('shiki/core'),
-        import('shiki/engine/javascript'),
-        import('shiki/themes/vitesse-light.mjs'),
-        import('shiki/themes/vitesse-dark.mjs'),
-      ])
-    return createHighlighterCore({
-      themes: [light.default, dark.default],
-      langs: [],
-      engine: createJavaScriptRegexEngine({ forgiving: true }),
-    })
-  })()
-  return core
-}
-
-function escape(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
-function inlineStyle(style: ThemedToken['htmlStyle']): string {
-  if (!style) return ''
-  if (typeof style === 'string') return style
-  return Object.entries(style)
-    .map(([key, value]) => `${key}:${value}`)
-    .join(';')
-}
-
-export function tokensToHtml(lines: ThemedToken[][]): string {
-  return lines
-    .map(line =>
-      line
-        .map(
-          token =>
-            `<span style="${escape(inlineStyle(token.htmlStyle))}">${escape(token.content)}</span>`,
-        )
-        .join(''),
-    )
-    .join('\n')
-}
-
-export async function tokenize(code: string, lang: string): Promise<ThemedToken[][] | null> {
-  const resolved = langAliases[lang] ?? lang
-  const load = langLoaders[resolved]
-  if (!load) return null
-
-  const highlighter = await getCore()
-  if (!loadedLangs.has(resolved)) {
-    await highlighter.loadLanguage(
-      (await load()).default as Parameters<HighlighterCore['loadLanguage']>[0],
-    )
-    loadedLangs.add(resolved)
-  }
-
-  return highlighter.codeToTokens(code, {
-    lang: resolved,
-    themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
-    defaultColor: false,
-  }).tokens
-}
+export * from '../../../../shared/src/lib/highlighter'

package/src/components/collapsible/Collapsible.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { CollapsibleRoot, useForwardPropsEmits, type CollapsibleRootEmits } from 'reka-ui'
+  import { CollapsibleRoot, type CollapsibleRootEmits } from '../../primitives/collapsible'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnCollapsible' })

package/src/components/collapsible/CollapsibleContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { CollapsibleContent as RekaCollapsibleContent } from 'reka-ui'
+  import { CollapsibleContent as RekaCollapsibleContent } from '../../primitives/collapsible'
   import { cn } from '../../lib/cn'
   import { rekaCollapsibleStyle } from '../../lib/reka/styles'
   import { useCollapseGap } from '../../lib/collapse'

package/src/components/collapsible/CollapsibleTrigger.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-  import { CollapsibleTrigger as RekaCollapsibleTrigger } from 'reka-ui'
+  import {
+    CollapsibleTrigger as RekaCollapsibleTrigger,
+    injectCollapsibleRootContext,
+  } from '../../primitives/collapsible'
+  import { useId } from '../../primitives/utils/useId'
   import { cn } from '../../lib/cn'
   import Button from '../button/Button.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
 
   defineOptions({ name: 'HnCollapsibleTrigger' })
 
+  const root = injectCollapsibleRootContext()
+  root.contentId ||= useId(undefined, 'reka-collapsible-content')
+
   const props = withDefaults(
     defineProps<{
       asChild?: boolean

package/src/components/command-palette/utils/hotkey.ts

@@ -1,27 +1 @@
-export interface Hotkey {
-  key: string
-  mod: boolean
-  shift: boolean
-  alt: boolean
-}
-
-export function parseHotkey(spec: string): Hotkey {
-  const parts = spec
-    .toLowerCase()
-    .split('+')
-    .map(part => part.trim())
-    .filter(Boolean)
-  const modifiers = parts.slice(0, -1)
-  return {
-    key: parts.at(-1) ?? '',
-    mod: modifiers.includes('mod'),
-    shift: modifiers.includes('shift'),
-    alt: modifiers.includes('alt'),
-  }
-}
-
-export function matchesHotkey(event: KeyboardEvent, hotkey: Hotkey): boolean {
-  if (event.key.toLowerCase() !== hotkey.key) return false
-  const mod = event.metaKey || event.ctrlKey
-  return mod === hotkey.mod && event.shiftKey === hotkey.shift && event.altKey === hotkey.alt
-}
+export * from '../../../../../shared/src/lib/command-palette/hotkey'

package/src/components/command-palette/utils/match.ts

@@ -1,76 +1,6 @@
-import { isCommandGroup, type CommandItem, type CommandItems } from '../types'
+import type { CommandItem } from '../types'
+import type * as Shared from '../../../../../shared/src/lib/command-palette/match'
 
-export interface CommandMatch {
-  item: CommandItem
-  start: number
-  end: number
-}
-
-export interface CommandSection {
-  key: string
-  label?: string
-  matches: CommandMatch[]
-}
-
-interface Scored extends CommandMatch {
-  score: number
-}
-
-interface ScoredSection extends CommandSection {
-  best: number
-}
-
-function score(item: CommandItem, query: string): Scored | null {
-  if (!query) return { item, start: -1, end: -1, score: 0 }
-  const label = item.label.toLowerCase()
-  const at = label.indexOf(query)
-  if (at === 0) return { item, start: 0, end: query.length, score: label === query ? 4 : 3 }
-  if (at > 0) return { item, start: at, end: at + query.length, score: 2 }
-  const keywords = item.keywords?.map(keyword => keyword.toLowerCase()) ?? []
-  if (keywords.includes(query)) return { item, start: -1, end: -1, score: 1.5 }
-  if (keywords.some(keyword => keyword.includes(query)))
-    return { item, start: -1, end: -1, score: 1 }
-  if (item.description?.toLowerCase().includes(query)) {
-    return { item, start: -1, end: -1, score: 0.5 }
-  }
-  return null
-}
-
-function rank(items: CommandItem[], query: string): Scored[] {
-  return items
-    .map(item => score(item, query))
-    .filter((match): match is Scored => match !== null)
-    .sort((a, b) => b.score - a.score)
-}
-
-export function filterCommands(items: CommandItems, query: string): CommandSection[] {
-  const q = query.trim().toLowerCase()
-  const sections: ScoredSection[] = []
-  let loose: CommandItem[] = []
-  const push = (label: string | undefined, entries: CommandItem[]) => {
-    const ranked = rank(entries, q)
-    if (ranked.length === 0) return
-    sections.push({
-      key: String(sections.length),
-      label,
-      best: ranked[0]!.score,
-      matches: ranked.map(({ item, start, end }) => ({ item, start, end })),
-    })
-  }
-  const flush = () => {
-    if (loose.length === 0) return
-    push(undefined, loose)
-    loose = []
-  }
-  for (const entry of items) {
-    if (!isCommandGroup(entry)) {
-      loose.push(entry)
-      continue
-    }
-    flush()
-    push(entry.label, entry.items)
-  }
-  flush()
-  if (q) sections.sort((a, b) => b.best - a.best)
-  return sections.map(({ key, label, matches }) => ({ key, label, matches }))
-}
+export { filterCommands } from '../../../../../shared/src/lib/command-palette/match'
+export type CommandMatch = Shared.CommandMatch<CommandItem>
+export type CommandSection = Shared.CommandSection<CommandItem>

package/src/components/data-list/composables/useDataList.ts

@@ -1,6 +1,7 @@
 import { computed, watch, type Ref } from 'vue'
 import { paginationInteger } from '../../pagination/composables/usePagination'
 import { cn } from '../../../lib/cn'
+import { dataListText } from '../../../../../shared/src/lib/data-list'
 import { dataListItem } from '../data-list.variants'
 import type {
   DataListKey,
@@ -21,10 +22,7 @@ export function useDataList<T>(
 ) {
   const layout = computed(() => layoutModel?.value ?? props.layout ?? 'list')
   function text(item: T, index: number, field: DataListTextField<T> | undefined) {
-    const value = typeof field === 'function' ? field(item, index) : field ? item[field] : undefined
-    return value !== '' && (typeof value === 'string' || typeof value === 'number')
-      ? value
-      : undefined
+    return dataListText(item, index, field)
   }
   const pageSize = computed(() => paginationInteger(sizeModel.value, 10, 1))
   const total = computed(() =>

package/src/components/data-list/utils/scroll.ts

@@ -1,26 +1 @@
-import type { VirtualListScrollOptions } from '../../virtual-list/types'
-
-export function scrollDataListItem(
-  element: HTMLElement,
-  viewport: HTMLElement | undefined,
-  { align = 'auto', behavior }: VirtualListScrollOptions,
-) {
-  if (!viewport) {
-    element.scrollIntoView({ block: align === 'auto' ? 'nearest' : align, behavior })
-    return
-  }
-  const rect = element.getBoundingClientRect()
-  const start =
-    rect.top - viewport.getBoundingClientRect().top - viewport.clientTop + viewport.scrollTop
-  const end = start + rect.height - viewport.clientHeight
-  const nearest = Math.min(Math.max(viewport.scrollTop, Math.min(start, end)), Math.max(start, end))
-  const offset =
-    align === 'start'
-      ? start
-      : align === 'end'
-        ? end
-        : align === 'center'
-          ? (start + end) / 2
-          : nearest
-  viewport.scrollTo({ top: offset, behavior })
-}
+export * from '../../../../../shared/src/lib/data-list'

package/src/components/data-table/column-sizing-styles.ts

@@ -1,40 +1 @@
-import type { CSSProperties } from 'vue'
-import { allocateWidths, columnBounds } from './column-sizing'
-import type { DataTableColumn } from './types'
-
-export function columnSizingStyles<T extends object>(
-  columns: DataTableColumn<T>[],
-  overrides: Record<string, number>,
-  controls: number,
-): CSSProperties {
-  const initial = allocateWidths(columns, overrides, 0)
-  const total = Object.values(initial).reduce((sum, width) => sum + width, controls)
-  const flexible = columns.filter(
-    column =>
-      !column.pin &&
-      overrides[column.key] === undefined &&
-      initial[column.key]! < columnBounds(column).max,
-  )
-  const capacities = flexible
-    .map(column => columnBounds(column).max - initial[column.key]!)
-    .sort((a, b) => a - b)
-  let consumed = 0
-  const shares = capacities.map((capacity, index) => {
-    const share = `calc((100cqi - ${total + consumed}px) / ${capacities.length - index})`
-    consumed += capacity
-    return share
-  })
-  const keys = new Set(flexible.map(column => column.key))
-  return {
-    width: shares.length ? `clamp(${total}px, 100%, ${total + consumed}px)` : `${total}px`,
-    '--hn-table-column-grow': shares.length ? `max(0px, ${shares.join(', ')})` : '0px',
-    ...Object.fromEntries(
-      columns.map((column, index) => [
-        `--hn-table-column-${index}`,
-        keys.has(column.key)
-          ? `min(${columnBounds(column).max}px, calc(${initial[column.key]}px + var(--hn-table-column-grow)))`
-          : `${initial[column.key]}px`,
-      ]),
-    ),
-  }
-}
+export * from '../../../../shared/src/lib/data-table/column-sizing-styles'

package/src/components/data-table/column-sizing.ts

@@ -1,101 +1 @@
-import type { DataTableColumn } from './types'
-
-export function pixelWidth(value: number | string | undefined, fallback: number) {
-  return typeof value === 'number' && Number.isFinite(value)
-    ? value
-    : typeof value === 'string' && /^\d+(\.\d+)?px$/.test(value)
-      ? parseFloat(value)
-      : fallback
-}
-
-export function columnBounds<T extends object>(column: DataTableColumn<T>) {
-  const min = Math.max(0, pixelWidth(column.minWidth, 48))
-  return { min, max: Math.max(min, pixelWidth(column.maxWidth, 1600)) }
-}
-
-export function clampWidth<T extends object>(column: DataTableColumn<T>, width: number) {
-  const { min, max } = columnBounds(column)
-  return Math.max(min, Math.min(max, width))
-}
-
-export function allocateWidths<T extends object>(
-  columns: DataTableColumn<T>[],
-  overrides: Record<string, number>,
-  available: number,
-) {
-  const widths = Object.fromEntries(
-    columns.map(column => [
-      column.key,
-      clampWidth(column, pixelWidth(overrides[column.key] ?? column.width, 160)),
-    ]),
-  )
-  let remaining = available - Object.values(widths).reduce((sum, width) => sum + width, 0)
-  let flexible = columns.filter(column => !column.pin && overrides[column.key] === undefined)
-  while (remaining > 0.01 && flexible.length) {
-    const share = remaining / flexible.length
-    for (const column of flexible) {
-      const extra = Math.min(share, columnBounds(column).max - widths[column.key]!)
-      widths[column.key]! += extra
-      remaining -= extra
-    }
-    flexible = flexible.filter(column => widths[column.key]! < columnBounds(column).max - 0.01)
-  }
-  return widths
-}
-
-export function resizeBoundary<T extends object>(
-  columns: DataTableColumn<T>[],
-  column: DataTableColumn<T>,
-  mode: 'fit' | 'expand',
-) {
-  const index = columns.findIndex(item => item.key === column.key)
-  if (index < 0 || column.resizable === false) return
-  const side = column.pin === 'end' ? 'start' : 'end'
-  const neighbor = columns[index + (side === 'start' ? -1 : 1)]
-  if (mode === 'fit' && side === 'end' && neighbor?.pin === 'end') return
-  if (mode === 'fit' && (!neighbor || neighbor.resizable === false)) return
-  return { side, neighbor: mode === 'fit' ? neighbor : undefined } as const
-}
-
-export function resizeBounds<T extends object>(
-  column: DataTableColumn<T>,
-  neighbor: DataTableColumn<T> | undefined,
-  widths: Record<string, number>,
-  minimumTotalWidth = 0,
-  maximumWidth = Infinity,
-) {
-  const bounds = columnBounds(column)
-  bounds.max = Math.min(bounds.max, maximumWidth)
-  if (!neighbor) {
-    const otherWidth = Object.entries(widths).reduce(
-      (sum, [key, width]) => sum + (key === column.key ? 0 : width),
-      0,
-    )
-    return {
-      min: Math.max(bounds.min, Math.min(widths[column.key]!, minimumTotalWidth - otherWidth)),
-      max: bounds.max,
-    }
-  }
-  const other = columnBounds(neighbor)
-  const total = widths[column.key]! + widths[neighbor.key]!
-  return {
-    min: Math.max(bounds.min, total - other.max),
-    max: Math.min(bounds.max, total - other.min),
-  }
-}
-
-export function resizeWidths<T extends object>(
-  column: DataTableColumn<T>,
-  neighbor: DataTableColumn<T> | undefined,
-  widths: Record<string, number>,
-  value: number,
-  minimumTotalWidth = 0,
-  maximumWidth = Infinity,
-) {
-  const { min, max } = resizeBounds(column, neighbor, widths, minimumTotalWidth, maximumWidth)
-  const width = Math.max(min, Math.min(max, value))
-  return {
-    [column.key]: width,
-    ...(neighbor ? { [neighbor.key]: widths[neighbor.key]! + widths[column.key]! - width } : {}),
-  }
-}
+export * from '../../../../shared/src/lib/data-table/column-sizing'