@hina-ui/vue 1.7.2 → 1.7.3

package/src/components/toolbar/ToolbarLink.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import ToolbarControl from './ToolbarControl.vue'
+  import { useToolbar } from './context'
+  import type { ToolbarControlProps } from './types'
+
+  defineOptions({ name: 'HnToolbarLink', inheritAttrs: false })
+  const props = withDefaults(
+    defineProps<
+      ToolbarControlProps & {
+        href?: string
+        target?: string
+        rel?: string
+      }
+    >(),
+    { as: 'a', tooltip: true, ripple: true },
+  )
+  const toolbar = useToolbar()
+  const disabled = computed(() => toolbar.disabled.value || props.disabled || props.loading)
+
+  function activate(event: KeyboardEvent) {
+    if (!disabled.value) (event.currentTarget as HTMLElement).click()
+  }
+</script>
+
+<template>
+  <RekaToolbarButton as-child :as="props.as" :disabled="disabled">
+    <ToolbarControl
+      v-bind="{ ...$attrs, ...props }"
+      :disabled="disabled"
+      :size="props.size ?? toolbar.size.value"
+      @keydown.space.prevent="activate"
+    >
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+    </ToolbarControl>
+  </RekaToolbarButton>
+</template>

package/src/components/toolbar/ToolbarSeparator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { Separator } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useToolbar } from './context'
+  import { toolbarSeparator } from './toolbar.variants'
+
+  defineOptions({ name: 'HnToolbarSeparator' })
+  const props = withDefaults(defineProps<{ decorative?: boolean; class?: string }>(), {
+    decorative: true,
+  })
+  const toolbar = useToolbar()
+</script>
+
+<template>
+  <Separator
+    :orientation="toolbar.orientation.value === 'horizontal' ? 'vertical' : 'horizontal'"
+    :decorative="props.decorative"
+    :class="cn(toolbarSeparator({ orientation: toolbar.orientation.value }), props.class)"
+  />
+</template>

package/src/components/toolbar/ToolbarToggleGroup.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts" generic="T extends string | string[] = string | string[]">
+  import { computed } from 'vue'
+  import { ToolbarToggleGroup as RekaToolbarToggleGroup, type AcceptableValue } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useToolbar, provideToolbarGroup } from './context'
+  import { toolbarGroup } from './toolbar.variants'
+
+  defineOptions({ name: 'HnToolbarToggleGroup' })
+  const props = withDefaults(
+    defineProps<{
+      type?: 'single' | 'multiple'
+      defaultValue?: T
+      label?: string
+      disabled?: boolean
+      class?: string
+    }>(),
+    { type: 'single' },
+  )
+  const model = defineModel<T>()
+  const toolbar = useToolbar()
+  const disabled = computed(() => toolbar.disabled.value || !!props.disabled)
+  provideToolbarGroup(disabled)
+
+  function update(value: AcceptableValue | AcceptableValue[]) {
+    model.value = value as T
+  }
+</script>
+
+<template>
+  <RekaToolbarToggleGroup
+    :model-value="model"
+    :default-value="props.defaultValue"
+    :type="props.type"
+    :disabled="disabled"
+    :orientation="toolbar.orientation.value"
+    :aria-label="props.label"
+    :class="cn(toolbarGroup({ orientation: toolbar.orientation.value }), props.class)"
+    @update:model-value="update"
+  >
+    <slot />
+  </RekaToolbarToggleGroup>
+</template>

package/src/components/toolbar/ToolbarToggleItem.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ToolbarToggleItem as RekaToolbarToggleItem } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import ToolbarControl from './ToolbarControl.vue'
+  import { useToolbar, useToolbarGroup } from './context'
+  import type { ToolbarControlProps } from './types'
+
+  defineOptions({ name: 'HnToolbarToggleItem', inheritAttrs: false })
+  const props = withDefaults(defineProps<ToolbarControlProps & { value: string }>(), {
+    tooltip: true,
+    ripple: true,
+  })
+  const toolbar = useToolbar()
+  const groupDisabled = useToolbarGroup()
+  const disabled = computed(
+    () => toolbar.disabled.value || groupDisabled?.value || props.disabled || props.loading,
+  )
+</script>
+
+<template>
+  <RekaToolbarToggleItem as-child :value="props.value" :disabled="disabled">
+    <ToolbarControl
+      v-bind="{ ...$attrs, ...props }"
+      :disabled="disabled"
+      :size="props.size ?? toolbar.size.value"
+      :class="cn('aria-pressed:text-accent-text', props.class)"
+    >
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+    </ToolbarControl>
+  </RekaToolbarToggleItem>
+</template>

package/src/components/toolbar/context.ts

@@ -0,0 +1,29 @@
+import { inject, provide, type InjectionKey, type Ref } from 'vue'
+import type { ToolbarOrientation, ToolbarSize } from './types'
+
+interface ToolbarContext {
+  orientation: Readonly<Ref<ToolbarOrientation>>
+  size: Readonly<Ref<ToolbarSize>>
+  disabled: Readonly<Ref<boolean>>
+}
+
+const toolbarKey: InjectionKey<ToolbarContext> = Symbol('hn-toolbar')
+const groupKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('hn-toolbar-group')
+
+export function provideToolbar(context: ToolbarContext) {
+  provide(toolbarKey, context)
+}
+
+export function useToolbar() {
+  const context = inject(toolbarKey)
+  if (!context) throw new Error('[Hina UI] Toolbar controls must be inside Toolbar.')
+  return context
+}
+
+export function provideToolbarGroup(disabled: Readonly<Ref<boolean>>) {
+  provide(groupKey, disabled)
+}
+
+export function useToolbarGroup() {
+  return inject(groupKey, null)
+}

package/src/components/toolbar/toolbar.variants.ts

@@ -0,0 +1,37 @@
+import { tv } from '../../lib/tv'
+
+export const toolbar = tv({
+  base: 'inline-flex max-w-full gap-(--hn-control-gap) rounded-lg',
+  variants: {
+    orientation: {
+      horizontal: 'flex-row flex-wrap items-center',
+      vertical: 'flex-col items-stretch',
+    },
+    variant: {
+      primary: 'border-line bg-surface border p-1',
+      secondary: 'bg-inset p-1',
+      bare: '',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal', variant: 'primary' },
+})
+
+export const toolbarGroup = tv({
+  base: 'inline-flex gap-(--hn-control-gap)',
+  variants: {
+    orientation: {
+      horizontal: 'flex-wrap items-center',
+      vertical: 'flex-col items-stretch',
+    },
+  },
+})
+
+export const toolbarSeparator = tv({
+  base: 'bg-line shrink-0 self-stretch',
+  variants: {
+    orientation: {
+      horizontal: 'mx-1 my-1 w-px',
+      vertical: 'mx-1 my-1 h-px',
+    },
+  },
+})

package/src/components/toolbar/types.ts

@@ -0,0 +1,30 @@
+import type { PrimitiveProps } from 'reka-ui'
+import type { ButtonVariants } from '../button/button.variants'
+
+export type ToolbarOrientation = 'horizontal' | 'vertical'
+export type ToolbarSize = 'sm' | 'md' | 'lg'
+export type ToolbarVariant = 'primary' | 'secondary' | 'bare'
+
+export interface ToolbarProps {
+  label?: string
+  orientation?: ToolbarOrientation
+  dir?: 'ltr' | 'rtl'
+  loop?: boolean
+  disabled?: boolean
+  size?: ToolbarSize
+  variant?: ToolbarVariant
+  class?: string
+}
+
+export interface ToolbarControlProps extends PrimitiveProps {
+  label?: string
+  tooltip?: boolean
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  variant?: ButtonVariants['variant']
+  tone?: ButtonVariants['tone']
+  size?: ToolbarSize
+  disabled?: boolean
+  loading?: boolean
+  ripple?: boolean
+  class?: string
+}

package/src/index.ts

@@ -78,6 +78,29 @@ export type { SliderVariants } from './components/slider/slider.variants'
 export { default as RangeSlider } from './components/range-slider/RangeSlider.vue'
 export { default as Toggle } from './components/toggle/Toggle.vue'
 export type { ToggleVariants } from './components/toggle/toggle.variants'
+export { default as Toolbar } from './components/toolbar/Toolbar.vue'
+export { default as NavigationMenu } from './components/navigation-menu/NavigationMenu.vue'
+export { default as NavigationMenuItem } from './components/navigation-menu/NavigationMenuItem.vue'
+export { default as NavigationMenuTrigger } from './components/navigation-menu/NavigationMenuTrigger.vue'
+export { default as NavigationMenuLink } from './components/navigation-menu/NavigationMenuLink.vue'
+export { default as NavigationMenuContent } from './components/navigation-menu/NavigationMenuContent.vue'
+export type {
+  NavigationMenuProps,
+  NavigationMenuSize,
+  NavigationMenuOrientation,
+} from './components/navigation-menu/types'
+export { default as ToolbarButton } from './components/toolbar/ToolbarButton.vue'
+export { default as ToolbarLink } from './components/toolbar/ToolbarLink.vue'
+export { default as ToolbarToggleGroup } from './components/toolbar/ToolbarToggleGroup.vue'
+export { default as ToolbarToggleItem } from './components/toolbar/ToolbarToggleItem.vue'
+export { default as ToolbarSeparator } from './components/toolbar/ToolbarSeparator.vue'
+export type {
+  ToolbarProps,
+  ToolbarControlProps,
+  ToolbarOrientation,
+  ToolbarSize,
+  ToolbarVariant,
+} from './components/toolbar/types'
 export { default as TagsInput } from './components/tags-input/TagsInput.vue'
 export { default as MultiCombobox } from './components/multi-combobox/MultiCombobox.vue'
 export { default as Calendar } from './components/calendar/Calendar.vue'
@@ -290,3 +313,25 @@ export type {
   DataTableProps,
   DataTableSlots,
 } from './components/data-table/types'
+
+export { default as Timeline } from './components/timeline/Timeline.vue'
+export type {
+  TimelineItem,
+  TimelineSlotProps,
+  TimelineAlign,
+  TimelineOrientation,
+  TimelineSize,
+  TimelineTone,
+} from './components/timeline/types'
+
+export { default as Stepper } from './components/stepper/Stepper.vue'
+export type {
+  StepperItem,
+  StepperState,
+  StepperSize,
+  StepperOrientation,
+  StepperProps,
+  StepperSlotProps,
+  StepperNavigation,
+  StepperBeforeChange,
+} from './components/stepper/types'

package/src/locale/en-US.ts

@@ -2,6 +2,12 @@ import type { UiMessages } from './types'
 
 export const enUS: UiMessages = {
   tag: 'en-US',
+  stepper: {
+    label: 'Steps',
+    progress: (step, total) => `Step ${step} of ${total}`,
+    completed: 'Completed',
+    error: 'This step has an error',
+  },
   common: {
     close: 'Close',
     copy: 'Copy',
@@ -156,6 +162,7 @@ export const enUS: UiMessages = {
   rating: {
     star: value => `${value} ${value === 1 ? 'star' : 'stars'}`,
     label: (value, max) => `${value} out of ${max} stars`,
+    score: (value, max) => `${value} out of ${max} points`,
   },
   form: {
     required: 'Required',

package/src/locale/index.ts

@@ -18,6 +18,7 @@ function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
   return {
     tag: patch.tag ?? base.tag,
     common: { ...base.common, ...patch.common },
+    stepper: { ...base.stepper, ...patch.stepper },
     banner: { ...base.banner, ...patch.banner },
     pagination: { ...base.pagination, ...patch.pagination },
     table: { ...base.table, ...patch.table },

package/src/locale/types.ts

@@ -1,5 +1,11 @@
 export interface UiMessages {
   tag: string
+  stepper: {
+    label: string
+    progress: (step: number, total: number) => string
+    completed: string
+    error: string
+  }
   common: {
     close: string
     copy: string
@@ -155,6 +161,7 @@ export interface UiMessages {
   rating: {
     star: (value: number) => string
     label: (value: number, max: number) => string
+    score: (value: number, max: number) => string
   }
   form: {
     required: string

package/src/locale/zh-CN.ts

@@ -2,6 +2,12 @@ import type { UiMessages } from './types'
 
 export const zhCN: UiMessages = {
   tag: 'zh-CN',
+  stepper: {
+    label: '步骤',
+    progress: (step, total) => `第 ${step} 步，共 ${total} 步`,
+    completed: '已完成',
+    error: '该步骤存在错误',
+  },
   common: {
     close: '关闭',
     copy: '复制',
@@ -156,6 +162,7 @@ export const zhCN: UiMessages = {
   rating: {
     star: value => `${value} 星`,
     label: (value, max) => `${value} 星，满分 ${max} 星`,
+    score: (value, max) => `${value} 分，满分 ${max} 分`,
   },
   form: {
     required: '必填',

package/src/styles/interaction.css

@@ -227,6 +227,7 @@
 @utility hn-ripple-surface {
   position: absolute;
   inset: 0;
+  direction: ltr;
   border-radius: inherit;
   pointer-events: none;
 

package/src/styles/motion.css

@@ -147,6 +147,72 @@
   }
 }
 
+@utility hn-navigation-viewport {
+  box-sizing: content-box;
+  visibility: hidden;
+  transition:
+    width var(--hn-duration-base) var(--hn-ease-move),
+    height var(--hn-duration-base) var(--hn-ease-move),
+    left var(--hn-duration-base) var(--hn-ease-move),
+    top var(--hn-duration-base) var(--hn-ease-move);
+
+  &[style*='--reka-navigation-menu-viewport-width'] {
+    @apply hn-anim-pop;
+
+    visibility: visible;
+  }
+}
+
+@keyframes hn-navigation-in {
+  from {
+    opacity: 0;
+    transform: translate(var(--hn-navigation-x, 0), var(--hn-navigation-y, 0));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes hn-navigation-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translate(var(--hn-navigation-x, 0), var(--hn-navigation-y, 0));
+  }
+}
+
+@utility hn-anim-navigation-content {
+  --hn-navigation-x: var(--hn-navigation-travel, 0px);
+
+  &[data-orientation='vertical'] {
+    --hn-navigation-x: 0px;
+    --hn-navigation-y: var(--hn-navigation-travel, 0px);
+  }
+
+  &[data-orientation='vertical']:dir(rtl) {
+    --hn-navigation-y: calc(var(--hn-navigation-travel, 0px) * -1);
+  }
+
+  &[data-motion='from-start'],
+  &[data-motion='to-start'] {
+    --hn-navigation-travel: calc(var(--hn-travel-md) * -1);
+  }
+  &[data-motion='from-end'],
+  &[data-motion='to-end'] {
+    --hn-navigation-travel: var(--hn-travel-md);
+  }
+  &[data-motion^='from-'] {
+    animation: hn-navigation-in var(--hn-duration-base) var(--hn-ease-enter);
+  }
+  &[data-motion^='to-'] {
+    animation: hn-navigation-out var(--hn-duration-exit) var(--hn-ease-exit);
+  }
+}
+
 @utility hn-scrim {
   position: fixed;
   inset: 0;

package/src/styles/stepper.css

@@ -0,0 +1,41 @@
+@layer components {
+  .hn-stepper-list[data-orientation='horizontal'] {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+
+    > .hn-stepper-item {
+      position: relative;
+
+      > button {
+        padding-inline: var(--hn-inline-gap);
+      }
+
+      > .hn-stepper-separator {
+        position: absolute;
+        pointer-events: none;
+        inset-block-start: calc(var(--hn-stepper-indicator) / 2 + --spacing(1));
+        inset-inline-start: calc(50% + var(--hn-stepper-indicator) / 2 + var(--hn-control-gap));
+        inline-size: calc(100% - var(--hn-stepper-indicator) - var(--hn-control-gap) * 2);
+        block-size: 1px;
+      }
+    }
+  }
+
+  .hn-stepper-list[data-orientation='vertical'] {
+    > .hn-stepper-item {
+      display: grid;
+      grid-template-columns: calc(var(--hn-stepper-indicator) + --spacing(2)) minmax(0, 1fr);
+
+      > button {
+        grid-column: 1 / -1;
+      }
+
+      > .hn-stepper-separator {
+        justify-self: center;
+        inline-size: 1px;
+        min-block-size: var(--hn-stack-gap);
+        margin-block: var(--hn-control-gap);
+      }
+    }
+  }
+}

package/src/styles/timeline.css

@@ -0,0 +1,144 @@
+@layer components {
+  .hn-timeline {
+    --hn-timeline-gap: calc(var(--hn-stack-gap) * 1.5);
+  }
+
+  .hn-timeline-item {
+    display: grid;
+  }
+
+  .hn-timeline-marker {
+    min-inline-size: 1lh;
+    min-block-size: 1lh;
+  }
+
+  .hn-timeline-separator {
+    display: flex;
+    align-items: center;
+    gap: var(--hn-control-gap);
+  }
+
+  .hn-timeline-connector {
+    flex: 1;
+  }
+
+  .hn-timeline[data-orientation='vertical'] {
+    grid-template-columns: 0 auto minmax(0, 1fr);
+
+    &[data-align='end'] {
+      grid-template-columns: minmax(0, 1fr) auto 0;
+    }
+
+    &[data-opposite],
+    &[data-align='alternate'] {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    }
+
+    > .hn-timeline-item {
+      grid-column: 1 / -1;
+      grid-template-columns: subgrid;
+
+      > .hn-timeline-separator {
+        grid-area: 1 / 2;
+        flex-direction: column;
+        padding-block-end: var(--hn-control-gap);
+
+        > .hn-timeline-connector {
+          inline-size: 1px;
+        }
+      }
+
+      > .hn-timeline-content,
+      > .hn-timeline-opposite {
+        padding-block-end: var(--hn-timeline-gap);
+      }
+
+      > .hn-timeline-content {
+        grid-area: 1 / 3;
+        padding-inline-start: var(--hn-inline-gap);
+      }
+
+      > .hn-timeline-opposite {
+        grid-area: 1 / 1;
+        padding-inline-end: var(--hn-inline-gap);
+        text-align: end;
+      }
+
+      &[data-side='end'] {
+        > .hn-timeline-content {
+          grid-column: 1;
+          padding-inline: 0 var(--hn-inline-gap);
+          text-align: end;
+        }
+
+        > .hn-timeline-opposite {
+          grid-column: 3;
+          padding-inline: var(--hn-inline-gap) 0;
+          text-align: start;
+        }
+      }
+
+      &:last-child > .hn-timeline-content,
+      &:last-child > .hn-timeline-opposite,
+      &:last-child > .hn-timeline-separator {
+        padding-block-end: 0;
+      }
+    }
+  }
+
+  .hn-timeline[data-orientation='horizontal'] {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto auto;
+
+    > .hn-timeline-item {
+      grid-row: 1 / -1;
+      grid-template-rows: subgrid;
+
+      > .hn-timeline-separator {
+        grid-row: 2;
+        padding-inline-end: var(--hn-control-gap);
+
+        > .hn-timeline-connector {
+          block-size: 1px;
+        }
+      }
+
+      > .hn-timeline-content,
+      > .hn-timeline-opposite {
+        padding-inline-end: var(--hn-inline-gap);
+      }
+
+      > .hn-timeline-content {
+        grid-row: 3;
+        padding-block-start: var(--hn-inline-gap);
+      }
+
+      > .hn-timeline-opposite {
+        grid-row: 1;
+        padding-block-end: var(--hn-inline-gap);
+        align-self: end;
+      }
+
+      &[data-side='end'] {
+        > .hn-timeline-content {
+          grid-row: 1;
+          padding-block: 0 var(--hn-inline-gap);
+          align-self: end;
+        }
+
+        > .hn-timeline-opposite {
+          grid-row: 3;
+          padding-block: var(--hn-inline-gap) 0;
+          align-self: start;
+        }
+      }
+
+      &:last-child > .hn-timeline-content,
+      &:last-child > .hn-timeline-opposite,
+      &:last-child > .hn-timeline-separator {
+        padding-inline-end: 0;
+      }
+    }
+  }
+}

package/src/styles/tokens.css

@@ -9,6 +9,8 @@
 @import './spoiler.css';
 @import './scroll.css';
 @import './data-table.css';
+@import './timeline.css';
+@import './stepper.css';
 @import './base.css';
 
 @source '../components/**/*.vue';