@hina-ui/vue 1.7.12 → 1.7.13

package/dist/shared/primitives/tags-input/index.ts

@@ -0,0 +1,113 @@
+import { arrowNavigation } from '../arrow-navigation'
+import { isEqual } from '../value'
+
+export type AcceptableInputValue = string | number | bigint | Record<string, any>
+export type TagsInputDirection = 'ltr' | 'rtl'
+
+export function tagsInputDisplayValue(value: AcceptableInputValue) {
+  return value.toString()
+}
+
+export type TagsInputAddResult<T> =
+  { added: true; value: T[]; payload: T } | { added: false; payload: T; duplicate: boolean }
+
+export function addTagsInputValue<T extends AcceptableInputValue>(
+  model: T[] | null | undefined,
+  text: string,
+  options: {
+    duplicate: boolean
+    max: number
+    defaultValue: T[]
+    convertValue?: (value: string) => T
+  },
+): TagsInputAddResult<T> {
+  const array = Array.isArray(model) ? [...model] : []
+  const modelIsObject = array.length > 0 && typeof array[0] === 'object'
+  const defaultIsObject = array.length > 0 && typeof options.defaultValue[0] === 'object'
+  if ((modelIsObject || defaultIsObject) && typeof options.convertValue !== 'function')
+    throw new Error('You must provide a `convertValue` function when using objects as values.')
+  const payload = options.convertValue ? options.convertValue(text) : (text as T)
+  if (array.length >= options.max && !!options.max)
+    return { added: false, payload, duplicate: false }
+  if (options.duplicate || !array.includes(payload))
+    return { added: true, value: [...array, payload], payload }
+  return { added: false, payload, duplicate: true }
+}
+
+export function removeTagsInputValue<T>(model: T[], index: number) {
+  return model.filter((_, i) => i !== index)
+}
+
+export function tagsInputValueIndex<T>(model: T[], value: unknown) {
+  return model.findIndex(item => isEqual(item, value))
+}
+
+export interface TagsInputKeydownResult {
+  select?: { element: HTMLElement | undefined }
+  remove?: HTMLElement
+  preventDefault: boolean
+}
+
+export function tagsInputKeydown(
+  event: KeyboardEvent,
+  state: {
+    caretAtStart: boolean
+    items: HTMLElement[]
+    selected: HTMLElement | undefined
+    dir: TagsInputDirection
+  },
+): TagsInputKeydownResult | undefined {
+  const { items, selected, caretAtStart, dir } = state
+  if (!items.length) return
+  const lastTag = items.at(-1)
+  switch (event.key) {
+    case 'Delete':
+    case 'Backspace': {
+      if (!caretAtStart) return
+      if (selected) {
+        const index = items.findIndex(item => item === selected)
+        return {
+          remove: selected,
+          select: { element: selected === lastTag ? items.at(index - 1) : items.at(index + 1) },
+          preventDefault: true,
+        }
+      }
+      if (event.key === 'Backspace') return { select: { element: lastTag }, preventDefault: true }
+      return
+    }
+    case 'Home':
+    case 'End':
+    case 'ArrowRight':
+    case 'ArrowLeft': {
+      const isArrowRight =
+        (event.key === 'ArrowRight' && dir === 'ltr') ||
+        (event.key === 'ArrowLeft' && dir === 'rtl')
+      if (!caretAtStart) return
+      if (!isArrowRight && !selected) return { select: { element: lastTag }, preventDefault: true }
+      if (isArrowRight && lastTag && selected === lastTag)
+        return { select: { element: undefined }, preventDefault: true }
+      if (selected) {
+        const element = arrowNavigation(event, selected, undefined, {
+          itemsArray: items,
+          loop: false,
+          dir,
+        })
+        return { select: element ? { element } : undefined, preventDefault: true }
+      }
+      return
+    }
+    case 'ArrowUp':
+    case 'ArrowDown':
+      return selected ? { preventDefault: true } : undefined
+    default:
+      return { select: { element: undefined }, preventDefault: false }
+  }
+}
+
+export function matchesTagsInputDelimiter(delimiter: string | RegExp, data: string) {
+  return delimiter === data || (delimiter instanceof RegExp && delimiter.test(data))
+}
+
+export function splitTagsInputPaste(value: string, delimiter: string | RegExp) {
+  return delimiter ? value.split(delimiter) : [value]
+}

package/dist/shared/primitives/toast/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from Radix UI:
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,106 @@
+import { getTabbableCandidates } from '../focus-scope'
+
+export const TOAST_SWIPE_START = 'toast.swipeStart'
+export const TOAST_SWIPE_MOVE = 'toast.swipeMove'
+export const TOAST_SWIPE_CANCEL = 'toast.swipeCancel'
+export const TOAST_SWIPE_END = 'toast.swipeEnd'
+export const VIEWPORT_PAUSE = 'toast.viewportPause'
+export const VIEWPORT_RESUME = 'toast.viewportResume'
+
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right'
+
+export interface SwipeDetail {
+  originalEvent: PointerEvent
+  delta: { x: number; y: number }
+}
+
+export type SwipeEvent = CustomEvent<SwipeDetail> & { currentTarget: HTMLElement }
+
+export function dispatchSwipeEvent(
+  name: string,
+  target: EventTarget,
+  handler: ((event: SwipeEvent) => void) | undefined,
+  detail: SwipeDetail,
+) {
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail })
+  if (handler) target.addEventListener(name, handler as unknown as EventListener, { once: true })
+  target.dispatchEvent(event)
+}
+
+export function isDeltaInDirection(
+  delta: { x: number; y: number },
+  direction: SwipeDirection,
+  threshold = 0,
+) {
+  const deltaX = Math.abs(delta.x)
+  const deltaY = Math.abs(delta.y)
+  const isDeltaX = deltaX > deltaY
+  if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold
+  return !isDeltaX && deltaY > threshold
+}
+
+export function swipeDelta(
+  start: { x: number; y: number },
+  point: { clientX: number; clientY: number },
+  direction: SwipeDirection,
+) {
+  const x = point.clientX - start.x
+  const y = point.clientY - start.y
+  const isHorizontalSwipe = ['left', 'right'].includes(direction)
+  const clamp = ['left', 'up'].includes(direction) ? Math.min : Math.max
+  return {
+    x,
+    y,
+    delta: { x: isHorizontalSwipe ? clamp(0, x) : 0, y: !isHorizontalSwipe ? clamp(0, y) : 0 },
+  }
+}
+
+export function swipeStartBuffer(pointerType: string) {
+  return pointerType === 'touch' ? 10 : 2
+}
+
+function isHTMLElement(node: Node): node is HTMLElement {
+  return node.nodeType === node.ELEMENT_NODE
+}
+
+export function getAnnounceTextContent(container: HTMLElement, prefix: 'reka' | 'radix') {
+  const textContent: string[] = []
+  const childNodes = Array.from(container.childNodes)
+  childNodes.forEach(node => {
+    if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent)
+    if (isHTMLElement(node)) {
+      const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'
+      const isExcluded = node.dataset[`${prefix}ToastAnnounceExclude`] === ''
+      if (!isHidden) {
+        if (isExcluded) {
+          const altText = node.dataset[`${prefix}ToastAnnounceAlt`]
+          if (altText) textContent.push(altText)
+        } else textContent.push(...getAnnounceTextContent(node, prefix))
+      }
+    }
+  })
+  return textContent
+}
+
+export function hotkeyMessage(hotkey: string[]) {
+  return hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '')
+}
+
+export function viewportLabel(label: string | ((hotkey: string) => string), hotkey: string) {
+  return typeof label === 'string' ? label.replace('{hotkey}', hotkey) : label(hotkey)
+}
+
+export function sortTabbableCandidates(
+  toasts: HTMLElement[],
+  tabbingDirection: 'forwards' | 'backwards',
+) {
+  const tabbableCandidates = toasts.map(toastNode => {
+    const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)]
+    return tabbingDirection === 'forwards'
+      ? toastTabbableCandidates
+      : toastTabbableCandidates.reverse()
+  })
+  return (
+    tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates
+  ).flat()
+}

package/dist/shared/primitives/tree/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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/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,29 @@
+@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);
+  }
+}
+
+@utility hn-tour-mask {
+  transition: clip-path var(--hn-duration-base) var(--hn-ease-move);
+
+  &[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-exit) var(--hn-ease-exit);
+  }
+}

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,29 @@
+import { tv } from '../lib/tv'
+
+export const tourMask = tv({ base: 'hn-scrim hn-tour-mask' })
+
+export const tourBlocker = tv({ base: 'fixed z-(--hn-z-overlay)' })
+
+export const tourCard = tv({
+  base: 'relative z-(--hn-z-overlay) 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 z-(--hn-z-overlay) grid place-items-center p-4 [&>*]:pointer-events-auto',
+})
+
+export const tourBeacon = tv({
+  base: 'hn-focus-ring fixed z-(--hn-z-overlay) 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' })