@hina-ui/vue 1.7.12 → 1.7.14

package/dist/shared/primitives/tree/index.ts

@@ -0,0 +1,248 @@
+import { handleAndDispatchCustomEvent } from '../dismissable-layer'
+import { findValuesBetween, type ListboxSelectionBehavior } from '../listbox'
+import type { FocusIntent } from '../roving-focus'
+
+export type TreeValue = Record<string, any>
+
+export interface FlattenedItem<T> {
+  _id: string
+  index: number
+  value: T
+  level: number
+  hasChildren: boolean
+  parentItem?: T
+  bind: {
+    value: T
+    level: number
+    'aria-setsize': number
+    'aria-posinset': number
+  }
+}
+
+export interface TreeAccessors<T> {
+  getKey: (value: T) => string
+  getChildren: (value: T) => T[] | undefined
+}
+
+export const TREE_SELECT = 'tree.select'
+export const TREE_TOGGLE = 'tree.toggle'
+
+export const TREE_KEY_TO_INTENT: Record<string, FocusIntent> = {
+  ArrowLeft: 'prev',
+  ArrowUp: 'prev',
+  ArrowRight: 'next',
+  ArrowDown: 'next',
+  PageUp: 'first',
+  Home: 'first',
+  PageDown: 'last',
+  End: 'last',
+}
+
+export function defaultTreeChildren<T extends TreeValue>(value: T) {
+  return value.children as T[] | undefined
+}
+
+export function flatten<U, T extends { children?: any[] }>(items: T[]): U[] {
+  return items.reduce((acc: any[], item: T) => {
+    acc.push(item)
+    if (item.children) acc.push(...flatten(item.children))
+    return acc
+  }, [])
+}
+
+export function flattenTree<T>(
+  items: T[],
+  accessors: TreeAccessors<T>,
+  expanded: string[],
+  level = 1,
+  parentItem?: T,
+): FlattenedItem<T>[] {
+  return items.reduce((acc: FlattenedItem<T>[], item: T, index: number) => {
+    const key = accessors.getKey(item)
+    const children = accessors.getChildren(item)
+    acc.push({
+      _id: key,
+      value: item,
+      index,
+      level,
+      parentItem,
+      hasChildren: !!children,
+      bind: {
+        value: item,
+        level,
+        'aria-setsize': items.length,
+        'aria-posinset': index + 1,
+      },
+    })
+    if (children && expanded.includes(key))
+      acc.push(...flattenTree(children, accessors, expanded, level + 1, item))
+    return acc
+  }, [])
+}
+
+export function treeSelectedKeys<T>(
+  model: unknown,
+  multiple: boolean,
+  getKey: (value: T) => string,
+) {
+  if (multiple && Array.isArray(model)) return model.map(item => getKey(item as T))
+  return [getKey((model ?? {}) as T)]
+}
+
+export interface TreeSelectionOptions<T> extends TreeAccessors<T> {
+  multiple: boolean
+  selectionBehavior: ListboxSelectionBehavior
+  propagateSelect: boolean
+  bubbleSelect: boolean
+  flattened: FlattenedItem<T>[]
+}
+
+function bubbleSelection<T>(
+  item: FlattenedItem<T>,
+  model: T[],
+  options: TreeSelectionOptions<T>,
+): T[] {
+  const { getKey, getChildren, flattened } = options
+  if (item.parentItem == null || !options.multiple) return model
+  const parentItem = flattened.find(
+    entry => item.parentItem != null && getKey(entry.value) === getKey(item.parentItem),
+  )
+  if (parentItem == null) return model
+  const all = getChildren(parentItem.value)?.every(child =>
+    model.find(value => getKey(value) === getKey(child)),
+  )
+  const next = all
+    ? [...model, parentItem.value]
+    : model.filter(value => getKey(value) !== getKey(parentItem.value))
+  return bubbleSelection(parentItem, next, options)
+}
+
+export function nextTreeSelection<T>(
+  model: unknown,
+  value: T,
+  options: TreeSelectionOptions<T>,
+): { value: unknown; anchor: boolean } {
+  const { getKey, getChildren, multiple, selectionBehavior } = options
+  const condition = (base: unknown) => getKey((base ?? {}) as T) === getKey(value)
+  const exist = multiple && Array.isArray(model) ? model.findIndex(condition) !== -1 : undefined
+  let next: unknown
+  let anchor = false
+  if (multiple && Array.isArray(model)) {
+    if (selectionBehavior === 'replace') {
+      next = [value]
+      anchor = true
+    } else {
+      const index = model.findIndex(item => condition(item))
+      next = index !== -1 ? model.filter((_, i) => i !== index) : [...model, value]
+    }
+  } else if (selectionBehavior === 'replace') next = { ...value }
+  else if (!Array.isArray(model) && condition(model)) next = undefined
+  else next = { ...value }
+
+  if (options.bubbleSelect && multiple && Array.isArray(next)) {
+    const item = options.flattened.find(entry => getKey(entry.value) === getKey(value))
+    if (item != null) next = bubbleSelection(item, next as T[], options)
+  }
+
+  if (options.propagateSelect && multiple && Array.isArray(next)) {
+    const children = flatten<T, any>((getChildren(value) ?? []) as any[])
+    next = exist
+      ? (next as T[]).filter(
+          item => !children.some(child => getKey((item ?? {}) as T) === getKey(child)),
+        )
+      : [...(next as T[]), ...children]
+  }
+
+  return { value: next, anchor }
+}
+
+export function treeRangeValues(
+  intent: FocusIntent | undefined,
+  current: Element | null,
+  entries: { ref: HTMLElement; value?: unknown }[],
+  options: unknown[],
+  state: { firstValue: unknown; multiple: boolean; model: unknown },
+): unknown[] | null | undefined {
+  if (!state.firstValue || !state.multiple || !Array.isArray(state.model)) return
+  const lastValue = entries
+    .filter(item => item.ref.dataset.disabled !== '')
+    .find(item => item.ref === current)?.value
+  if (!lastValue) return
+  switch (intent) {
+    case 'prev':
+    case 'next':
+      return findValuesBetween(options, state.firstValue, lastValue)
+    case 'first':
+      return findValuesBetween(options, state.firstValue, options[0])
+    case 'last':
+      return findValuesBetween(options, state.firstValue, options.at(-1))
+  }
+  return null
+}
+
+export function toggleTreeExpanded(expanded: string[], key: string) {
+  return expanded.includes(key) ? expanded.filter(item => item !== key) : [...expanded, key]
+}
+
+export function treeIndeterminate<T>(input: {
+  value: T
+  model: unknown
+  isSelected: boolean
+  hasChildren: boolean
+  bubbleSelect: boolean
+  propagateSelect: boolean
+  getKey: (value: T) => string
+  getChildren: (value: T) => T[] | undefined
+}) {
+  const { model, getKey } = input
+  if (!input.hasChildren || !Array.isArray(model)) return undefined
+  const found = (child: T) => model.find(item => getKey(item as T) === getKey(child))
+  if (input.bubbleSelect) {
+    const children = flatten<T, any>((input.getChildren(input.value) || []) as any[])
+    return children.some(found) && !children.every(found)
+  }
+  if (input.propagateSelect && input.isSelected) {
+    const children = flatten<T, any>((input.getChildren(input.value) || []) as any[])
+    return !children.every(found)
+  }
+  return undefined
+}
+
+function indent(element: HTMLElement) {
+  return Number(element.getAttribute('data-indent'))
+}
+
+export function treeChildTarget(collection: HTMLElement[], current: Element | null, level: number) {
+  const index = collection.indexOf(current as HTMLElement)
+  return collection.slice(index).find(element => indent(element) === level + 1)
+}
+
+export function treeParentTarget(
+  collection: HTMLElement[],
+  current: Element | null,
+  level: number,
+) {
+  const index = collection.indexOf(current as HTMLElement)
+  return collection
+    .slice(0, index)
+    .reverse()
+    .find(element => indent(element) === level - 1)
+}
+
+export interface TreeItemEventDetail<T> {
+  originalEvent: Event
+  value?: T
+  isExpanded: boolean
+  isSelected: boolean
+}
+
+export type TreeItemSelectEvent<T> = CustomEvent<TreeItemEventDetail<T>>
+export type TreeItemToggleEvent<T> = CustomEvent<TreeItemEventDetail<T>>
+
+export function dispatchTreeItemEvent<T>(
+  name: typeof TREE_SELECT | typeof TREE_TOGGLE,
+  handler: (event: CustomEvent<TreeItemEventDetail<T>>) => void,
+  detail: TreeItemEventDetail<T>,
+) {
+  handleAndDispatchCustomEvent<CustomEvent<TreeItemEventDetail<T>>>(name, handler, detail)
+}

package/dist/shared/styles/semantic.css

@@ -88,6 +88,7 @@
   --hn-bg-subtle: #141414;
   --hn-bg-inset: var(--color-neutral-800);
   --hn-bg-scrim: rgb(0 0 0 / 0.6);
+  --hn-bg-veil: color-mix(in srgb, var(--hn-surface) 70%, transparent);
 
   --hn-fg-default: var(--color-neutral-150);
   --hn-fg-max: var(--color-neutral-0);

package/dist/shared/styles/tokens.css

@@ -11,6 +11,7 @@
 @import './data-table.css';
 @import './timeline.css';
 @import './stepper.css';
+@import './tour.css';
 @import './float-button.css';
 @import './line-clamp.css';
 @import './pin-input.css';

package/dist/shared/styles/tour.css

@@ -0,0 +1,134 @@
+@keyframes hn-tour-hole-in {
+  from {
+    clip-path: var(--hn-tour-hole-origin);
+  }
+}
+
+@keyframes hn-tour-hole-out {
+  from {
+    clip-path: var(--hn-tour-hole);
+  }
+  to {
+    clip-path: var(--hn-tour-hole-origin);
+  }
+}
+
+@keyframes hn-tour-ripple {
+  from {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(0.2);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes hn-tour-press {
+  from {
+    opacity: 0.15;
+    transform: translate(-50%, -50%) scale(0.4);
+  }
+  to {
+    opacity: 0.45;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes hn-tour-key-press {
+  50% {
+    scale: 0.92;
+  }
+}
+
+@utility hn-tour-mask {
+  &[data-hn-tour-mask] {
+    z-index: calc(var(--hn-z-overlay) + 1);
+  }
+
+  &[data-mask='dim'] {
+    backdrop-filter: none;
+  }
+
+  &[data-state='open'][data-hn-tour-hole='shown'] {
+    animation:
+      hn-fade-in var(--hn-duration-base) var(--hn-ease-enter),
+      hn-tour-hole-in var(--hn-duration-base) var(--hn-ease-enter);
+  }
+  &[data-state='open'][data-hn-tour-hole='hidden'] {
+    animation:
+      hn-fade-in var(--hn-duration-base) var(--hn-ease-enter),
+      hn-tour-hole-out var(--hn-duration-base) var(--hn-ease-move);
+  }
+}
+
+@utility hn-tour-pointer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: calc(var(--hn-z-overlay) + 2);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--hn-duration-fast) var(--hn-ease-move);
+
+  &[data-state='shown'] {
+    opacity: 1;
+  }
+
+  & [data-hn-tour-pointer-glyph] {
+    transition: scale var(--hn-duration-fast) var(--hn-ease-press);
+  }
+  &[data-kind='mouse'] [data-hn-tour-pointer-glyph] {
+    transform-origin: 4px 2px;
+  }
+  &[data-pressed] [data-hn-tour-pointer-glyph] {
+    scale: 0.85;
+  }
+
+  & [data-hn-tour-ripple],
+  & [data-hn-tour-pointer-ring] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+  & [data-hn-tour-ripple] {
+    border: 2px solid var(--hn-accent);
+    animation: hn-tour-ripple var(--hn-duration-slow) var(--hn-ease-enter) forwards;
+  }
+  & [data-hn-tour-pointer-ring] {
+    background-color: var(--hn-accent);
+    opacity: 0;
+    transform: translate(-50%, -50%);
+  }
+  &[data-pressed='long'] [data-hn-tour-pointer-ring] {
+    animation: hn-tour-press var(--hn-tour-press, 800ms) linear forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    & [data-hn-tour-ripple],
+    &[data-pressed='long'] [data-hn-tour-pointer-ring] {
+      animation: none;
+    }
+  }
+}
+
+@utility hn-tour-key {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: calc(var(--hn-z-overlay) + 2);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--hn-duration-fast) var(--hn-ease-move);
+
+  &[data-state='shown'] {
+    opacity: 1;
+  }
+  &[data-state='shown'] > * {
+    animation: hn-tour-key-press var(--hn-duration-base) var(--hn-ease-press);
+  }
+}

package/dist/shared/variants/image.ts

@@ -17,6 +17,9 @@ export const image = tv({
     lazy: {
       true: 'transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none',
     },
+    placeholder: {
+      true: '',
+    },
     fit: {
       cover: 'object-cover',
       contain: 'object-contain',
@@ -25,6 +28,31 @@ export const image = tv({
       'scale-down': 'object-scale-down',
     },
   },
+  compoundVariants: [
+    {
+      lazy: true,
+      placeholder: true,
+      class: 'duration-(--hn-duration-slow) ease-move',
+    },
+  ],
+  defaultVariants: { fit: 'cover' },
+})
+
+export const imageFrame = tv({
+  base: 'relative isolate block size-full',
+})
+
+export const imagePlaceholder = tv({
+  base: 'bg-center bg-no-repeat',
+  variants: {
+    fit: {
+      cover: 'bg-cover',
+      contain: 'bg-contain',
+      fill: 'bg-size-[100%_100%]',
+      none: 'bg-cover',
+      'scale-down': 'bg-contain',
+    },
+  },
   defaultVariants: { fit: 'cover' },
 })
 

package/dist/shared/variants/nav-link.ts

@@ -2,7 +2,7 @@ import { tv, type VariantProps } from '../lib/tv'
 
 export const navLink = tv({
   base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex cursor-pointer items-center',
+    'hn-interactive hn-state-layer hn-press-none relative isolate flex min-w-0 cursor-pointer items-center',
     'data-disabled:pointer-events-none data-disabled:opacity-50',
     'h-9 gap-[var(--hn-control-gap)] rounded-md ps-2.5 pe-2 text-sm select-none',
     '[&_svg]:size-4 [&_svg]:shrink-0',
@@ -17,5 +17,9 @@ export const navLink = tv({
 })
 
 export const navLinkLabel = tv({
-  base: 'hn-sidebar-label shrink-0 whitespace-nowrap',
+  base: 'hn-sidebar-label min-w-0 truncate',
+})
+
+export const navLinkTrailing = tv({
+  base: 'hn-sidebar-label ms-auto flex shrink-0 items-center',
 })

package/dist/shared/variants/tour.ts

@@ -0,0 +1,47 @@
+import { tv } from '../lib/tv'
+
+const layer = 'z-[calc(var(--hn-z-overlay)+1)]'
+
+export const tourMask = tv({ base: 'hn-scrim hn-tour-mask' })
+
+export const tourBlocker = tv({ base: `fixed ${layer}` })
+
+export const tourCard = tv({
+  base: `relative ${layer} flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 overflow-visible p-4 shadow-lg outline-none`,
+})
+
+export const tourCentered = tv({
+  base: `pointer-events-none fixed inset-0 ${layer} grid place-items-center p-4 [&>*]:pointer-events-auto`,
+})
+
+export const tourBeacon = tv({
+  base: `hn-focus-ring fixed ${layer} size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full`,
+})
+
+export const tourBeaconPulse = tv({
+  base: 'hn-ping bg-accent pointer-events-none absolute inset-0 rounded-full',
+})
+
+export const tourBeaconDot = tv({
+  base: 'bg-accent ring-surface pointer-events-none relative block size-full rounded-full ring-2',
+})
+
+export const tourHeader = tv({ base: 'flex items-start gap-2' })
+
+export const tourFooter = tv({ base: 'flex items-center gap-2' })
+
+export const tourPointer = tv({ base: 'hn-tour-pointer' })
+
+export const tourPointerArrow = tv({
+  base: 'fill-fg stroke-surface absolute top-0 size-6 -translate-x-1 -translate-y-0.5 drop-shadow-md',
+})
+
+export const tourPointerTouch = tv({
+  base: 'bg-fg/30 ring-surface absolute top-0 block size-9 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md ring-2',
+})
+
+export const tourKey = tv({ base: 'hn-tour-key' })
+
+export const tourKeyCap = tv({
+  base: 'border-line bg-surface text-fg block min-w-8 -translate-x-1/2 rounded-md border px-2 py-1 text-center text-sm font-medium whitespace-nowrap shadow-md',
+})

package/dist/types/shared/src/lib/thumbhash.d.ts

@@ -0,0 +1,2 @@
+export declare function thumbhashToDataUrl(hash: string): string | null;
+//# sourceMappingURL=thumbhash.d.ts.map

package/dist/types/shared/src/lib/thumbhash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbhash.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/lib/thumbhash.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAS9D"}

package/dist/types/shared/src/lib/tour-engine.d.ts

@@ -0,0 +1,47 @@
+import { type Bezier } from '../motion';
+import { type TourPoint, type TourPointerKind, type TourRect, type TourStepBase, type TourTarget } from './tour';
+export type TourStatus = 'idle' | 'waiting' | 'ready' | 'missing';
+export interface TourEngineState {
+    status: TourStatus;
+    settled: boolean;
+    hole: TourRect | null;
+    targetRect: TourRect | null;
+    radius: number;
+    elements: HTMLElement[];
+    playing: boolean;
+    viewport: {
+        width: number;
+        height: number;
+    };
+}
+export interface TourEngineOptions {
+    pointer: () => HTMLElement | null | undefined;
+    keyBadge: () => HTMLElement | null | undefined;
+    pointerKind: () => TourPointerKind;
+    cardGap?: () => number;
+}
+export declare const TOUR_SPRING: {
+    stiffness: number;
+    damping: number;
+};
+export declare function stepSpring(position: TourRect, velocity: TourRect, goal: TourRect, seconds: number, { stiffness, damping }?: {
+    stiffness: number;
+    damping: number;
+}): boolean;
+export declare function bezierEasing([x1, y1, x2, y2]: Bezier): (progress: number) => number;
+export declare function isAbortError(error: unknown): boolean;
+export declare function tourSleep(ms: number, signal: AbortSignal): Promise<void>;
+export declare function tween(duration: number, onFrame: (progress: number) => void, signal: AbortSignal, easing?: (progress: number) => number): Promise<void>;
+export declare function tourPointerPoint(target: TourTarget | TourPoint): TourPoint | null;
+export declare function createTourEngine(options: TourEngineOptions): {
+    subscribe(listener: () => void): () => void;
+    getState: () => TourEngineState;
+    pointerKind: () => TourPointerKind;
+    enter(next: TourStepBase, number: number): Promise<"empty" | "ready" | "missing" | "stale">;
+    play: () => void;
+    replay(): void;
+    leave(): void;
+    close(): void;
+};
+export type TourEngine = ReturnType<typeof createTourEngine>;
+//# sourceMappingURL=tour-engine.d.ts.map

package/dist/types/shared/src/lib/tour-engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour-engine.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/lib/tour-engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EASL,KAAK,SAAS,EAEd,KAAK,eAAe,EACpB,KAAK,QAAQ,EAGb,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,QAAQ,CAAA;AAEf,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AAEjE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAA;IACrB,UAAU,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAA;IAC7C,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAA;IAC9C,WAAW,EAAE,MAAM,eAAe,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,MAAM,CAAA;CACvB;AAaD,eAAO,MAAM,WAAW;;;CAAkC,CAAA;AAK1D,wBAAgB,UAAU,CACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,MAAM,EACf,EAAE,SAAS,EAAE,OAAO,EAAE;;;CAAc,WAgBrC;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,IAK3C,UAAU,MAAM,YAYzB;AAeD,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,WAE1C;AAMD,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,iBAcxD;AAED,wBAAgB,KAAK,CACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,EACnC,MAAM,EAAE,WAAW,EACnB,MAAM,GAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAiB,iBA0BhD;AA6DD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAMjF;AAsHD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB;wBAySnC,MAAM,IAAI;;uBAnmBb,eAAe;gBA2mBpB,YAAY,UAAU,MAAM;;;;;EA+D3C;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA"}