refactor(config): break ui.config.ts into separate files (#930)

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

@@ -0,0 +1,19 @@
+export default {
+  wrapper: 'relative',
+  ol: 'flex items-center gap-x-1.5',
+  li: 'flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm',
+  base: 'flex items-center gap-x-1.5 group font-semibold',
+  icon: {
+    base: 'flex-shrink-0 w-4 h-4',
+    active: '',
+    inactive: ''
+  },
+  divider: {
+    base: 'flex-shrink-0 w-5 h-5'
+  },
+  active: 'text-primary-500 dark:text-primary-400',
+  inactive: ' hover:text-gray-700 dark:hover:text-gray-200',
+  default: {
+    divider: 'i-heroicons-chevron-right-20-solid'
+  }
+}

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

@@ -0,0 +1,67 @@
+export default {
+  wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
+  container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
+  input: {
+    wrapper: 'relative flex items-center',
+    base: 'w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none',
+    padding: 'px-4',
+    height: 'h-12',
+    size: 'sm:text-sm',
+    icon: {
+      base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
+      size: 'h-4 w-4',
+      padding: 'ps-10'
+    },
+    closeButton: 'absolute end-4'
+  },
+  emptyState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    queryLabel: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
+  },
+  group: {
+    wrapper: 'p-2',
+    label: 'px-2 my-2 text-xs font-semibold text-gray-900 dark:text-white',
+    container: 'text-sm text-gray-700 dark:text-gray-200',
+    command: {
+      base: 'flex justify-between select-none items-center rounded-md px-2 py-1.5 gap-2 relative',
+      active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
+      inactive: '',
+      label: 'flex items-center gap-1.5 min-w-0',
+      prefix: 'text-gray-400 dark:text-gray-500',
+      suffix: 'text-gray-400 dark:text-gray-500',
+      container: 'flex items-center gap-2 min-w-0',
+      icon: {
+        base: 'flex-shrink-0 w-4 h-4',
+        active: 'text-gray-900 dark:text-white',
+        inactive: 'text-gray-400 dark:text-gray-500'
+      },
+      selectedIcon: {
+        base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
+      },
+      avatar: {
+        base: 'flex-shrink-0',
+        size: '3xs' as const
+      },
+      chip: {
+        base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
+      },
+      disabled: 'opacity-50',
+      shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5'
+    },
+    active: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
+    inactive: 'flex-shrink-0 text-gray-500 dark:text-gray-400'
+  },
+  default: {
+    icon: 'i-heroicons-magnifying-glass-20-solid',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid',
+    emptyState: {
+      icon: 'i-heroicons-magnifying-glass-20-solid',
+      label: 'We couldn\'t find any items.',
+      queryLabel: 'We couldn\'t find any items with that term. Please try again.'
+    },
+    closeButton: null,
+    selectedIcon: 'i-heroicons-check-20-solid'
+  }
+}

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

@@ -0,0 +1,34 @@
+export default {
+  wrapper: 'flex items-center -space-x-px',
+  base: '',
+  rounded: 'first:rounded-s-md last:rounded-e-md',
+  default: {
+    size: 'sm',
+    activeButton: {
+      color: 'primary'
+    },
+    inactiveButton: {
+      color: 'white'
+    },
+    firstButton: {
+      color: 'white',
+      class: 'rtl:[&_span:first-child]:rotate-180',
+      icon: 'i-heroicons-chevron-double-left-20-solid'
+    },
+    lastButton: {
+      color: 'white',
+      class: 'rtl:[&_span:last-child]:rotate-180',
+      icon: 'i-heroicons-chevron-double-right-20-solid'
+    },
+    prevButton: {
+      color: 'white',
+      class: 'rtl:[&_span:first-child]:rotate-180',
+      icon: 'i-heroicons-chevron-left-20-solid'
+    },
+    nextButton: {
+      color: 'white',
+      class: 'rtl:[&_span:last-child]:rotate-180',
+      icon: 'i-heroicons-chevron-right-20-solid'
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+export default {
+  wrapper: 'relative space-y-2',
+  container: 'relative w-full',
+  base: 'focus:outline-none',
+  list: {
+    base: 'relative',
+    background: 'bg-gray-100 dark:bg-gray-800',
+    rounded: 'rounded-lg',
+    shadow: '',
+    padding: 'p-1',
+    height: 'h-10',
+    width: 'w-full',
+    marker: {
+      wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
+      base: 'w-full h-full',
+      background: 'bg-white dark:bg-gray-900',
+      rounded: 'rounded-md',
+      shadow: 'shadow-sm'
+    },
+    tab: {
+      base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out',
+      background: '',
+      active: 'text-gray-900 dark:text-white',
+      inactive: 'text-gray-500 dark:text-gray-400',
+      height: 'h-8',
+      padding: 'px-3',
+      size: 'text-sm',
+      font: 'font-medium',
+      rounded: 'rounded-md',
+      shadow: ''
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+export default {
+  wrapper: 'relative',
+  base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
+  ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+  padding: 'px-3 py-1.5',
+  width: 'w-full',
+  rounded: 'rounded-md',
+  font: 'font-medium',
+  size: 'text-sm',
+  active: 'text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800',
+  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
+  label: 'truncate relative',
+  icon: {
+    base: 'flex-shrink-0 w-4 h-4',
+    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: '3xs'
+  },
+  badge: {
+    base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
+    active: 'bg-white dark:bg-gray-900',
+    inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
+  }
+}