feat(HorizontalNavigation): new component (#1279)

src/runtime/ui.config/index.ts

@@ -38,6 +38,7 @@ export { default as divider } from './layout/divider'
 
 // Navigation
 export { default as verticalNavigation } from './navigation/verticalNavigation'
+export { default as horizontalNavigation } from './navigation/horizontalNavigation'
 export { default as commandPalette } from './navigation/commandPalette'
 export { default as pagination } from './navigation/pagination'
 export { default as tabs } from './navigation/tabs'

src/runtime/ui.config/navigation/horizontalNavigation.ts

@@ -0,0 +1,25 @@
+export default {
+  wrapper: 'relative w-full flex items-center justify-between',
+  container: 'flex items-center',
+  base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
+  before: 'before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
+  after: 'after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2',
+  active: 'text-gray-900 dark:text-white after:bg-primary-500 dark:after:bg-primary-400 after:rounded-full',
+  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
+  label: 'truncate relative',
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5',
+    active: 'text-gray-700 dark:text-gray-200',
+    inactive: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
+  },
+  avatar: {
+    base: 'flex-shrink-0',
+    size: '2xs' as const
+  },
+  badge: {
+    base: 'flex-shrink-0 ml-auto relative rounded',
+    color: 'gray' as const,
+    variant: 'solid' as const,
+    size: 'xs' as const
+  }
+}