@hina-ui/vue 1.0.0

package/src/lib/tw-merge.ts

@@ -0,0 +1,25 @@
+export type HnClassGroupIds = 'hn-anim' | 'hn-transition' | 'hn-press' | 'hn-scroll'
+
+export const TW_MERGE_CONFIG = {
+  extend: {
+    theme: {
+      text: ['md'],
+      ease: ['enter', 'enter-strong', 'exit', 'move', 'press'],
+    },
+    classGroups: {
+      'hn-anim': [
+        'hn-anim-fade',
+        'hn-anim-pop',
+        'hn-anim-modal',
+        'hn-anim-sheet-top',
+        'hn-anim-sheet-bottom',
+        'hn-anim-sheet-left',
+        'hn-anim-sheet-right',
+        'hn-anim-collapse',
+      ],
+      'hn-transition': ['hn-transition', 'hn-transition-base'],
+      'hn-press': ['hn-press-lg', 'hn-press-none'],
+      'hn-scroll': ['hn-scroll-area'],
+    },
+  },
+}

package/src/locale/en-US.ts

@@ -0,0 +1,152 @@
+import type { UiMessages } from './types'
+
+export const enUS: UiMessages = {
+  tag: 'en-US',
+  common: {
+    close: 'Close',
+    copy: 'Copy',
+    copied: 'Copied',
+    clear: 'Clear',
+    loading: 'Loading',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+  },
+  banner: {
+    prev: 'Previous notice',
+    next: 'Next notice',
+  },
+  pagination: {
+    navLabel: 'Pagination',
+    prev: 'Previous page',
+    next: 'Next page',
+    first: 'First page',
+    last: 'Last page',
+    pageLabel: n => `Page ${n}`,
+    totalLabel: n => `${n} items`,
+  },
+  table: {
+    empty: 'No data',
+    loading: 'Loading',
+    sortAsc: 'Sort ascending',
+    sortDesc: 'Sort descending',
+    sortNone: 'Clear sorting',
+    selectRow: 'Select row',
+    selectAll: 'Select all',
+  },
+  select: {
+    placeholder: 'Select',
+    empty: 'No matches',
+    optionCountLabel: n => `${n} options available`,
+  },
+  upload: {
+    choose: 'Choose file',
+    dropHint: 'Drop files here, or click to browse',
+    tooLargeLabel: readableSize => `File exceeds the ${readableSize} limit`,
+    remove: 'Remove',
+    removeFile: name => `Remove ${name}`,
+  },
+  time: {
+    justNow: 'Just now',
+    unknown: 'Unknown time',
+  },
+  scroll: {
+    regionLabel: 'Scrollable region',
+  },
+  toast: {
+    regionLabel: 'Notifications',
+  },
+  spoiler: {
+    revealLabel: 'Spoiler, click to reveal',
+    hideLabel: 'Hide spoiler',
+  },
+  codeblock: {
+    copy: 'Copy code',
+  },
+  splitter: {
+    handleLabel: 'Resize panel',
+  },
+  sidebar: {
+    navLabel: 'Sidebar navigation',
+    toggleLabel: 'Toggle sidebar',
+  },
+  anchor: {
+    navLabel: 'On this page',
+  },
+  breadcrumb: {
+    navLabel: 'Breadcrumb',
+  },
+  lightbox: {
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    resetZoom: 'Reset zoom',
+    rotate: 'Rotate',
+    download: 'Download',
+    loadingLarge: 'Loading HD',
+  },
+  chip: {
+    remove: 'Remove',
+  },
+  numberInput: {
+    increase: 'Increase',
+    decrease: 'Decrease',
+  },
+  passwordInput: {
+    show: 'Show password',
+    hide: 'Hide password',
+  },
+  combobox: {
+    placeholder: 'Type or choose',
+    toggle: 'Show options',
+  },
+  slider: {
+    minimum: 'Minimum',
+    maximum: 'Maximum',
+  },
+  pinInput: {
+    cellLabel: (index, total) => `Digit ${index} of ${total}`,
+  },
+  dateField: {
+    year: 'Year',
+    month: 'Month',
+    day: 'Day',
+    hour: 'Hour',
+    minute: 'Minute',
+    second: 'Second',
+    dayPeriod: 'AM or PM',
+  },
+  dateRangeField: {
+    start: 'start date',
+    end: 'end date',
+    separator: '–',
+  },
+  datePicker: {
+    open: 'Open calendar',
+  },
+  dateTimePicker: {
+    time: 'Time',
+  },
+  rating: {
+    star: value => `${value} ${value === 1 ? 'star' : 'stars'}`,
+    label: (value, max) => `${value} out of ${max} stars`,
+  },
+  form: {
+    required: 'Required',
+  },
+  command: {
+    label: 'Command palette',
+    placeholder: 'Search',
+    empty: 'No matches',
+  },
+  calendar: {
+    label: 'Calendar',
+    prev: 'Previous month',
+    next: 'Next month',
+    prevYear: 'Previous year',
+    nextYear: 'Next year',
+    prevYears: 'Previous twelve years',
+    nextYears: 'Next twelve years',
+    pickMonth: 'Choose a month',
+    pickYear: 'Choose a year',
+    weekStartsOn: 0,
+  },
+}

package/src/locale/index.ts

@@ -0,0 +1,67 @@
+import {
+  computed,
+  inject,
+  provide,
+  toValue,
+  type ComputedRef,
+  type InjectionKey,
+  type MaybeRefOrGetter,
+} from 'vue'
+import type { PartialUiMessages, UiMessages } from './types'
+import { zhCN } from './zh-CN'
+
+const UI_LOCALE_KEY = Symbol('hn-ui-locale') as InjectionKey<ComputedRef<UiMessages>>
+
+const fallbackLocale = computed(() => zhCN)
+
+function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
+  return {
+    tag: patch.tag ?? base.tag,
+    common: { ...base.common, ...patch.common },
+    banner: { ...base.banner, ...patch.banner },
+    pagination: { ...base.pagination, ...patch.pagination },
+    table: { ...base.table, ...patch.table },
+    select: { ...base.select, ...patch.select },
+    upload: { ...base.upload, ...patch.upload },
+    time: { ...base.time, ...patch.time },
+    scroll: { ...base.scroll, ...patch.scroll },
+    toast: { ...base.toast, ...patch.toast },
+    spoiler: { ...base.spoiler, ...patch.spoiler },
+    codeblock: { ...base.codeblock, ...patch.codeblock },
+    splitter: { ...base.splitter, ...patch.splitter },
+    sidebar: { ...base.sidebar, ...patch.sidebar },
+    anchor: { ...base.anchor, ...patch.anchor },
+    breadcrumb: { ...base.breadcrumb, ...patch.breadcrumb },
+    lightbox: { ...base.lightbox, ...patch.lightbox },
+    chip: { ...base.chip, ...patch.chip },
+    numberInput: { ...base.numberInput, ...patch.numberInput },
+    passwordInput: { ...base.passwordInput, ...patch.passwordInput },
+    combobox: { ...base.combobox, ...patch.combobox },
+    slider: { ...base.slider, ...patch.slider },
+    pinInput: { ...base.pinInput, ...patch.pinInput },
+    dateField: { ...base.dateField, ...patch.dateField },
+    dateRangeField: { ...base.dateRangeField, ...patch.dateRangeField },
+    calendar: { ...base.calendar, ...patch.calendar },
+    datePicker: { ...base.datePicker, ...patch.datePicker },
+    dateTimePicker: { ...base.dateTimePicker, ...patch.dateTimePicker },
+    rating: { ...base.rating, ...patch.rating },
+    form: { ...base.form, ...patch.form },
+    command: { ...base.command, ...patch.command },
+  }
+}
+
+export function provideUiLocale(
+  messages: MaybeRefOrGetter<PartialUiMessages>,
+): ComputedRef<UiMessages> {
+  const resolved = computed(() => merge(zhCN, toValue(messages)))
+  provide(UI_LOCALE_KEY, resolved)
+  return resolved
+}
+
+export function useUiLocale(): ComputedRef<UiMessages> {
+  return inject(UI_LOCALE_KEY, fallbackLocale)
+}
+
+export { zhCN } from './zh-CN'
+export { enUS } from './en-US'
+export type { UiMessages, PartialUiMessages } from './types'

package/src/locale/types.ts

@@ -0,0 +1,154 @@
+export interface UiMessages {
+  tag: string
+  common: {
+    close: string
+    copy: string
+    copied: string
+    clear: string
+    loading: string
+    confirm: string
+    cancel: string
+  }
+  banner: {
+    prev: string
+    next: string
+  }
+  pagination: {
+    navLabel: string
+    prev: string
+    next: string
+    first: string
+    last: string
+    pageLabel: (n: number) => string
+    totalLabel: (n: number) => string
+  }
+  table: {
+    empty: string
+    loading: string
+    sortAsc: string
+    sortDesc: string
+    sortNone: string
+    selectRow: string
+    selectAll: string
+  }
+  select: {
+    placeholder: string
+    empty: string
+    optionCountLabel: (n: number) => string
+  }
+  upload: {
+    choose: string
+    dropHint: string
+    tooLargeLabel: (readableSize: string) => string
+    remove: string
+    removeFile: (name: string) => string
+  }
+  time: {
+    justNow: string
+    unknown: string
+  }
+  scroll: {
+    regionLabel: string
+  }
+  toast: {
+    regionLabel: string
+  }
+  spoiler: {
+    revealLabel: string
+    hideLabel: string
+  }
+  codeblock: {
+    copy: string
+  }
+  splitter: {
+    handleLabel: string
+  }
+  sidebar: {
+    navLabel: string
+    toggleLabel: string
+  }
+  anchor: {
+    navLabel: string
+  }
+  breadcrumb: {
+    navLabel: string
+  }
+  lightbox: {
+    zoomIn: string
+    zoomOut: string
+    resetZoom: string
+    rotate: string
+    download: string
+    loadingLarge: string
+  }
+  chip: {
+    remove: string
+  }
+  numberInput: {
+    increase: string
+    decrease: string
+  }
+  passwordInput: {
+    show: string
+    hide: string
+  }
+  combobox: {
+    placeholder: string
+    toggle: string
+  }
+  slider: {
+    minimum: string
+    maximum: string
+  }
+  pinInput: {
+    cellLabel: (index: number, total: number) => string
+  }
+  dateField: {
+    year: string
+    month: string
+    day: string
+    hour: string
+    minute: string
+    second: string
+    dayPeriod: string
+  }
+  dateRangeField: {
+    start: string
+    end: string
+    separator: string
+  }
+  datePicker: {
+    open: string
+  }
+  dateTimePicker: {
+    time: string
+  }
+  rating: {
+    star: (value: number) => string
+    label: (value: number, max: number) => string
+  }
+  form: {
+    required: string
+  }
+  command: {
+    label: string
+    placeholder: string
+    empty: string
+  }
+  calendar: {
+    label: string
+    prev: string
+    next: string
+    prevYear: string
+    nextYear: string
+    prevYears: string
+    nextYears: string
+    pickMonth: string
+    pickYear: string
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  }
+}
+
+export type PartialUiMessages = {
+  [K in keyof UiMessages]?: UiMessages[K] extends object ? Partial<UiMessages[K]> : UiMessages[K]
+}

package/src/locale/zh-CN.ts

@@ -0,0 +1,152 @@
+import type { UiMessages } from './types'
+
+export const zhCN: UiMessages = {
+  tag: 'zh-CN',
+  common: {
+    close: '关闭',
+    copy: '复制',
+    copied: '已复制',
+    clear: '清除',
+    loading: '加载中',
+    confirm: '确定',
+    cancel: '取消',
+  },
+  banner: {
+    prev: '上一条',
+    next: '下一条',
+  },
+  pagination: {
+    navLabel: '翻页',
+    prev: '上一页',
+    next: '下一页',
+    first: '首页',
+    last: '末页',
+    pageLabel: n => `第 ${n} 页`,
+    totalLabel: n => `共 ${n} 条`,
+  },
+  table: {
+    empty: '暂无数据',
+    loading: '加载中',
+    sortAsc: '升序排列',
+    sortDesc: '降序排列',
+    sortNone: '取消排序',
+    selectRow: '选择此行',
+    selectAll: '全选',
+  },
+  select: {
+    placeholder: '请选择',
+    empty: '无匹配项',
+    optionCountLabel: n => `${n} 个选项可用`,
+  },
+  upload: {
+    choose: '选择文件',
+    dropHint: '拖拽文件到此处，或点击选择',
+    tooLargeLabel: readableSize => `文件超出 ${readableSize} 上限`,
+    remove: '移除',
+    removeFile: name => `移除 ${name}`,
+  },
+  time: {
+    justNow: '刚刚',
+    unknown: '未知时间',
+  },
+  scroll: {
+    regionLabel: '可滚动区域',
+  },
+  toast: {
+    regionLabel: '通知',
+  },
+  spoiler: {
+    revealLabel: '剧透内容，点击显示',
+    hideLabel: '隐藏剧透',
+  },
+  codeblock: {
+    copy: '复制代码',
+  },
+  splitter: {
+    handleLabel: '调整面板大小',
+  },
+  sidebar: {
+    navLabel: '侧边导航',
+    toggleLabel: '切换侧栏',
+  },
+  anchor: {
+    navLabel: '本页目录',
+  },
+  breadcrumb: {
+    navLabel: '面包屑',
+  },
+  lightbox: {
+    zoomIn: '放大',
+    zoomOut: '缩小',
+    resetZoom: '恢复原始大小',
+    rotate: '旋转',
+    download: '下载',
+    loadingLarge: '正在加载原图',
+  },
+  chip: {
+    remove: '移除',
+  },
+  numberInput: {
+    increase: '增加',
+    decrease: '减少',
+  },
+  passwordInput: {
+    show: '显示密码',
+    hide: '隐藏密码',
+  },
+  combobox: {
+    placeholder: '输入或选择',
+    toggle: '展开选项',
+  },
+  slider: {
+    minimum: '最小值',
+    maximum: '最大值',
+  },
+  pinInput: {
+    cellLabel: (index, total) => `第 ${index} 位，共 ${total} 位`,
+  },
+  dateField: {
+    year: '年',
+    month: '月',
+    day: '日',
+    hour: '时',
+    minute: '分',
+    second: '秒',
+    dayPeriod: '上午或下午',
+  },
+  dateRangeField: {
+    start: '开始日期',
+    end: '结束日期',
+    separator: '至',
+  },
+  datePicker: {
+    open: '打开日历',
+  },
+  dateTimePicker: {
+    time: '时间',
+  },
+  rating: {
+    star: value => `${value} 星`,
+    label: (value, max) => `${value} 星，满分 ${max} 星`,
+  },
+  form: {
+    required: '必填',
+  },
+  command: {
+    label: '命令面板',
+    placeholder: '搜索',
+    empty: '无匹配项',
+  },
+  calendar: {
+    label: '日历',
+    prev: '上个月',
+    next: '下个月',
+    prevYear: '上一年',
+    nextYear: '下一年',
+    prevYears: '前十二年',
+    nextYears: '后十二年',
+    pickMonth: '选择月份',
+    pickYear: '选择年份',
+    weekStartsOn: 1,
+  },
+}

package/src/motion.ts

@@ -0,0 +1,41 @@
+export type Bezier = readonly [number, number, number, number]
+
+export const EASE = {
+  enter: [0, 0, 0.2, 1],
+  enterStrong: [0.05, 0.7, 0.1, 1],
+  exit: [0.4, 0, 1, 1],
+  move: [0.4, 0, 0.2, 1],
+  press: [0.3, 1.2, 0.6, 1],
+} as const satisfies Record<string, Bezier>
+
+export const DURATION = {
+  fast: 0.2,
+  base: 0.3,
+  slow: 0.45,
+  exit: 0.2,
+} as const
+
+export const TRAVEL = {
+  sm: 4,
+  md: 10,
+} as const
+
+export const STAGGER = 0.024
+
+export const cssEase = (bezier: Bezier) => `cubic-bezier(${bezier.join(',')})`
+
+export const TRANSITION = {
+  fast: { duration: DURATION.fast, ease: EASE.move },
+  base: { duration: DURATION.base, ease: EASE.move },
+  enter: { duration: DURATION.base, ease: EASE.enter },
+  enterStrong: { duration: DURATION.slow, ease: EASE.enterStrong },
+  exit: { duration: DURATION.exit, ease: EASE.exit },
+  press: { duration: DURATION.fast, ease: EASE.press },
+  layout: { duration: DURATION.base, ease: EASE.move },
+} as const
+
+export type TransitionName = keyof typeof TRANSITION
+
+export function prefersReducedMotion(): boolean {
+  return typeof window !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
+}

package/src/singletons.ts

@@ -0,0 +1,3 @@
+export const REQUIRED_SINGLETONS = ['vue', 'reka-ui', '@hina-ui/vue'] as const
+
+export type RequiredSingleton = (typeof REQUIRED_SINGLETONS)[number]

package/src/styles/base.css

@@ -0,0 +1,22 @@
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--hn-bg-canvas);
+    color: var(--hn-fg-default);
+    font-family: var(--hn-font-sans);
+    font-size: var(--hn-text-base);
+    line-height: var(--hn-leading-base);
+  }
+
+  table,
+  [data-tabular] {
+    font-variant-numeric: tabular-nums;
+  }
+}

package/src/styles/density.css

@@ -0,0 +1,32 @@
+:root,
+[data-density='comfortable'] {
+  --hn-control-h-sm: 1.75rem;
+  --hn-control-h-md: 2.25rem;
+  --hn-control-h-lg: 2.75rem;
+  --hn-control-px-sm: 0.625rem;
+  --hn-control-px-md: 1rem;
+  --hn-control-px-lg: 1.25rem;
+  --hn-control-gap: 0.375rem;
+  --hn-field-gap: 0.5rem;
+  --hn-stack-gap: 1rem;
+  --hn-inline-gap: 0.75rem;
+  --hn-panel-p: 1.25rem;
+  --hn-row-h: 2.75rem;
+  --hn-row-px: 0.875rem;
+}
+
+[data-density='compact'] {
+  --hn-control-h-sm: 1.5rem;
+  --hn-control-h-md: 1.875rem;
+  --hn-control-h-lg: 2.25rem;
+  --hn-control-px-sm: 0.375rem;
+  --hn-control-px-md: 0.5rem;
+  --hn-control-px-lg: 0.75rem;
+  --hn-control-gap: 0.25rem;
+  --hn-field-gap: 0.375rem;
+  --hn-stack-gap: 0.75rem;
+  --hn-inline-gap: 0.5rem;
+  --hn-panel-p: 0.875rem;
+  --hn-row-h: 2.125rem;
+  --hn-row-px: 0.625rem;
+}