@soft-stech/bootsman-ui-shadcn 2.0.4 → 2.0.6

package/dist/theme.css

@@ -0,0 +1,274 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  /* --container-padding: 2rem; */
+  /* --container-screen-2xl: 1400px; */
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar: var(--side-bar);
+  --color-tabs-sidebar: var(--tabs-sidebar);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --shadow-card: 0px 4px 8px 0px var(--card-shadow);
+  --shadow-tab: 0px 2px 4px 0px var(--tab-shadow), 0px 4px 4px 0px var(--tab-shadow);
+  --shadow-top: 0px -2px 4px 0px var(--tab-shadow);
+  --shadow-level1:
+    0px 16px 16px 0px var(--tab-shadow), 0px 8px 16px 0px var(--tab-shadow),
+    0px 8px 8px 0px var(--tab-shadow);
+  --shadow-level2:
+    0px 32px 16px 0px var(--tab-shadow), 0px 16px 16px 0px var(--tab-shadow),
+    0px 16px 16px 0px var(--tab-shadow);
+  --shadow-level3:
+    0px 56px 24px 0px var(--tab-shadow), 0px 32px 24px 0px var(--tab-shadow),
+    0px 32px 24px 0px var(--tab-shadow);
+  --shadow-tab-sidebar: inset -8px 0px 16px 0px var(--tabs-sidebar-shadow);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
+
+  --bg-image-logo: url('/src/assets/logo-full.png');
+  --bg-image-logo-dark: url('/src/assets/logo-full-dark.png');
+
+  --color-tooltip: var(--tooltip);
+  --color-tooltip-link: var(--tooltip-link);
+
+  --color-snow: var(--snow);
+  --color-light-violet: var(--light-violet);
+  --color-dark-violet: var(--dark-violet);
+  --color-spring-green: var(--spring-green);
+  --color-code-green: var(--code-green);
+  --color-vivid-tangerine: var(--vivid-tangerine);
+  --color-sulphur: var(--sulphur);
+  --color-mustard: var(--mustard);
+  --color-homeworld: var(--homeworld);
+  --color-app-rancher: var(--primary);
+  --color-app-partner: rgb(254, 164, 36);
+  --color-app-color1: rgb(225, 45, 74);
+  --color-app-color2: rgb(212, 66, 148);
+  --color-app-color3: rgb(0, 169, 217);
+  --color-app-color4: rgb(244, 136, 68);
+  --color-app-color5: rgb(0, 147, 128);
+  --color-app-color6: rgb(136, 81, 165);
+  --color-app-color7: rgb(45, 47, 149);
+  --color-app-color8: rgb(255, 235, 0);
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(242 24% 21%);
+
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(225 5% 47%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+  --card-shadow: hsl(241, 92%, 71%, 0.16);
+  --tab-shadow: hsl(228, 51%, 11%, 0.08);
+
+  --side-bar: hsl(0 0% 100%);
+  --tabs-sidebar: hsl(210 40% 96.1%);
+  --tabs-sidebar-shadow: hsl(0, 0%, 100%, 0);
+
+  --border: hsl(241 92% 71%);
+  --input: hsl(225 11% 84%);
+
+  --primary: hsl(241 92% 71%);
+  --primary-hover: hsl(241 76% 62%);
+  --primary-active: hsl(241 54% 54%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(241 76% 62%);
+
+  --accent: hsl(241 92% 71%);
+  --accent-foreground: hsl(241 76% 62%);
+
+  --destructive: hsl(328, 68%, 63%, 0.08);
+  --destructive-foreground: hsl(328 68% 63%);
+
+  --success: hsl(181, 34%, 39%, 0.08);
+  --success-foreground: hsl(181 34% 39%);
+
+  --warning: hsl(48, 79%, 45%, 0.08);
+  --warning-foreground: hsl(48 79% 45%);
+
+  --info: hsl(198, 85%, 45%, 0.08);
+  --info-foreground: hsl(198 85% 45%);
+
+  --ring: hsl(241 92% 71%);
+
+  --radius: 0.5rem;
+
+  --tooltip: hsl(225 5% 47%);
+  --tooltip-link: hsl(241 100% 88%);
+
+  --snow: hsl(220 18% 97%);
+  --spring-green: hsl(154 85% 45%);
+  --code-green: hsl(181 34% 39%);
+  --sulphur: hsl(48 79% 45%);
+  --mustard: hsl(48 100% 33%);
+  --homeworld: hsl(198 85% 45%);
+  --light-violet: hsl(241 100% 88%);
+  --dark-violet: hsl(241 92% 71%);
+  --vivid-tangerine: hsl(14 100% 77%);
+}
+
+.dark {
+  --background: hsl(242 24% 21%);
+  --foreground: hsl(0 0% 100%);
+
+  --muted: hsl(217.2 32.6% 17.5%);
+  --muted-foreground: hsl(0, 0%, 100%, 0.32);
+
+  --popover: hsl(222.2 84% 4.9%);
+  --popover-foreground: hsl(210 40% 98%);
+
+  --card: hsl(242 24% 21%);
+  --card-foreground: hsl(210 40% 98%);
+  --card-shadow: hsl(241, 92%, 71%, 0.4);
+  --tab-shadow: hsl(228, 51%, 11%, 0.08);
+
+  --side-bar: hsl(243.2 24.1% 15.5%);
+  --tabs-sidebar: hsl(243.2 24.1% 15.5%);
+  --tabs-sidebar-shadow: hsl(0, 0%, 0%, 0.08);
+
+  --border: hsl(241 92% 71%);
+  --input: hsl(0, 0%, 100%, 0.32);
+
+  --primary: hsl(241 92% 71%);
+  --primary-hover: hsl(241 76% 62%);
+  --primary-active: hsl(241 54% 54%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(217.2 32.6% 17.5%);
+  --secondary-foreground: hsl(210 40% 98%);
+
+  --accent: hsl(241 92% 71%);
+  --accent-foreground: hsl(240 100% 77%);
+
+  --destructive: hsl(328, 68%, 63%, 0.16);
+  --destructive-foreground: hsl(328 68% 63%);
+
+  --success: hsl(154, 84%, 45%, 0.16);
+  --success-foreground: hsl(181 35% 49%);
+
+  --snow: hsl(241 92% 71%);
+  --spring-green: hsl(154 85% 45%);
+  --code-green: hsl(181 35% 49%);
+  --sulphur: hsl(48 79% 45%);
+  --mustard: hsl(48 100% 33%);
+  --homeworld: hsl(198 85% 45%);
+  --light-violet: hsl(241 100% 88%);
+  --dark-violet: hsl(241 92% 71%);
+  --vivid-tangerine: hsl(14 100% 77%);
+}
+
+/* components styles moved here */
+@layer utilities {
+  /* BuiColorPicker */
+  [data-color-picker-background] {
+    background-image:
+      linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+  }
+
+  [data-color-picker-track] {
+    background-image: linear-gradient(
+      0deg,
+      red 0,
+      #f0f 17%,
+      #00f 33%,
+      #0ff 50%,
+      #0f0 67%,
+      #ff0 83%,
+      red
+    );
+  }
+}

package/dist/{utils-DIEJYj9K.js → utils-GPBEsc0o.js}

@@ -3084,7 +3084,7 @@ const gt = (e, o) => {
     },
     () => [
       j("div", { class: "whitespace-normal break-normal" }, [o]),
-      j(r, { class: "ml-1 h-4 w-4 text-muted-foreground shrink-0" })
+      j(r, { class: "ml-1 h-4 w-4 text-muted-foreground shrink-0 hover:text-primary" })
     ]
   );
 };

package/dist/{x-CDyOFgEX.js → x-DoN9MfYp.js}

@@ -1,4 +1,4 @@
-import { h as e } from "./utils-DIEJYj9K.js";
+import { h as e } from "./utils-GPBEsc0o.js";
 /**
  * @license lucide-vue-next v0.544.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "type": "module",
   "files": [
     "dist",
@@ -68,6 +68,7 @@
     "typescript-eslint": "^8.44.0",
     "vite": "^7.1.2",
     "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.3",
     "vitest": "^3.2.4",
     "vue-tsc": "^3.0.5"
   },

package/src/components/checkbox/BuiCheckbox.vue

@@ -17,7 +17,8 @@ const checkboxClasses = cva([
   /* border */ 'border border-foreground/24 data-[state=checked]:border-primary hover:data-[state=checked]:border-primary-hover data-[state=indeterminate]:border-primary hover:data-[state=indeterminate]:border-primary-hover',
   /* background */ 'hover:bg-foreground/4 data-[state=checked]:bg-primary hover:data-[state=checked]:bg-primary-hover data-[state=indeterminate]:bg-primary hover:data-[state=indeterminate]:bg-primary-hover',
   /* focus */ 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-  /* text */ 'text-primary-foreground'
+  /* text */ 'text-primary-foreground',
+  /* dark */ 'dark:border-primary dark:data-[state=unchecked]:bg-primary/16 dark:hover:data-[state=unchecked]:bg-primary/32'
 ])
 const classes = cn(checkboxClasses(), attrs.class as string)
 

package/src/components/color-picker/BuiColorPicker.vue

@@ -156,11 +156,7 @@ watchThrottled(
 )
 </script>
 <template>
-  <Primitive
-    :as="as"
-    class="data-disabled:opacity-75"
-    :data-disabled="disabled ? true : undefined"
-  >
+  <Primitive :as="as" class="data-disabled:opacity-75" :data-disabled="disabled ? true : undefined">
     <div class="flex gap-4">
       <div ref="selectorRef" :class="colorPickerSelectorVariants({ size })" :style="selectorStyle">
         <div class="relative h-full w-full rounded-md" data-color-picker-background>
@@ -168,7 +164,7 @@ watchThrottled(
             ref="selectorThumbRef"
             :class="
               cn(
-                'absolute size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full ring-2 ring-background data-disabled:cursor-not-allowed',
+                'ring-background absolute size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full ring-2 data-disabled:cursor-not-allowed',
                 ui?.selectorClass
               )
             "
@@ -182,7 +178,7 @@ watchThrottled(
           ref="trackThumbRef"
           :class="
             cn(
-              'absolute size-4 -translate-x-[4px] -translate-y-1/2 transform cursor-pointer rounded-full ring-2 ring-background data-disabled:cursor-not-allowed rtl:translate-x-[4px]',
+              'ring-background absolute size-4 -translate-x-[4px] -translate-y-1/2 transform cursor-pointer rounded-full ring-2 data-disabled:cursor-not-allowed rtl:translate-x-[4px]',
               ui?.trackClass
             )
           "
@@ -193,23 +189,3 @@ watchThrottled(
     </div>
   </Primitive>
 </template>
-
-<style scoped>
-[data-color-picker-background] {
-  background-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
-    linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-[data-color-picker-track] {
-  background-image: linear-gradient(
-    0deg,
-    red 0,
-    #f0f 17%,
-    #00f 33%,
-    #0ff 50%,
-    #0f0 67%,
-    #ff0 83%,
-    red
-  );
-}
-</style>

package/src/components/input/BuiInput.vue

@@ -53,6 +53,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
     :readonly="readonlyContext || props.readonly"
     :disabled="props.disabled"
     :placeholder="props.placeholder"
+    :type="props.type || 'text'"
     @focus="handleFocus"
     @blur="handleBlur"
     @keydown="handleKeyDown"

package/src/components/input/index.ts

@@ -10,7 +10,7 @@ export const inputVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-input',
+        default: 'border-input hover:border-primary focus-visible:border-primary',
         destructive: 'border-destructive-foreground',
         success: 'border-success-foreground'
       }

package/src/components/select/BuiSelectTrigger.vue

@@ -17,8 +17,9 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-muted-foreground [&>span]:min-w-0 [&>span]:truncate',
+        'border-input bg-background ring-offset-background focus:ring-ring data-placeholder:text-muted-foreground flex h-8 w-full items-center justify-between rounded-md border px-2 py-1 text-sm whitespace-nowrap focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:truncate',
         props.invalid && 'border-destructive-foreground',
+        !props.invalid && 'hover:border-primary focus:border-primary',
         props.class
       )
     ]"

package/src/components/table/BuiDataTable.vue

@@ -393,13 +393,13 @@ watch(
             :style="{ height: `${height.toFixed(1)}px` }"
           >
             <div
-              class="border-border/16 bg-foreground/4 flex h-full items-center border-b border-l px-1"
+              class="border-border/16 bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16 flex h-full items-center border-b border-l px-1"
             >
               <BuiButton
                 variant="ghost"
-                class="text-foreground flex h-8 w-8 items-center justify-center"
+                class="text-foreground/50 hover:text-primary flex h-8 w-8 items-center justify-center hover:bg-transparent"
               >
-                <Settings2Icon class="h-4 w-4 shrink-0 opacity-50" />
+                <Settings2Icon class="h-4 w-4 shrink-0" />
               </BuiButton>
             </div>
           </div>

package/src/components/table/BuiTableHead.vue

@@ -12,9 +12,11 @@ const props = defineProps<{
   <th
     :class="
       cn(
-        'text-foreground relative h-10 text-left align-middle [&:has([role=checkbox])]:pr-0',
+        'text-foreground relative h-14 text-left align-middle [&:has([role=checkbox])]:pr-0',
         props.class,
-        props.freezeHeader ? 'bg-background p-0' : 'bg-foreground/4 p-0'
+        props.freezeHeader
+          ? 'bg-background p-0'
+          : 'bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16 p-0'
       )
     "
   >
@@ -23,7 +25,7 @@ const props = defineProps<{
         <div
           class="border-border/16! flex h-full items-center border-b!"
           :class="{
-            'bg-foreground/4': props.freezeHeader,
+            'bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16': props.freezeHeader,
             'header-cell_wrapper': !props.freezeHeader
           }"
         >
@@ -41,7 +43,7 @@ const props = defineProps<{
       v-else
       class="border-border/16! flex h-full items-center border-b!"
       :class="{
-        'bg-foreground/4': props.freezeHeader,
+        'bg-foreground/4 hover:bg-foreground/8 dark:hover:bg-accent/16': props.freezeHeader,
         'header-cell_wrapper': !props.freezeHeader
       }"
     >

package/src/components/table/BuiTableRow.vue

@@ -3,6 +3,7 @@ import { BuiContextMenu, BuiContextMenuTrigger } from '@/components/context-menu
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{ class?: string }>()
+const emits = defineEmits(['mouseenter', 'mouseleave'])
 </script>
 
 <template>
@@ -11,11 +12,13 @@ const props = defineProps<{ class?: string }>()
       <tr
         :class="
           cn(
-            'border-border/8 data-[row-state=selected]:bg-accent/4 border-b transition-colors',
+            'border-border/8 data-[row-state=selected]:bg-accent/8 border-b transition-colors',
             props.class
           )
         "
         :data-row-state="$attrs['data-row-state']"
+        @mouseenter="emits('mouseenter')"
+        @mouseleave="emits('mouseleave')"
       >
         <slot />
       </tr>
@@ -26,11 +29,13 @@ const props = defineProps<{ class?: string }>()
     v-else
     :class="
       cn(
-        'border-border/8 data-[row-state=selected]:bg-accent/4 border-b transition-colors',
+        'border-border/8 data-[row-state=selected]:bg-accent/8 border-b transition-colors',
         props.class
       )
     "
     :data-row-state="$attrs['data-row-state']"
+    @mouseenter="emits('mouseenter')"
+    @mouseleave="emits('mouseleave')"
   >
     <slot />
   </tr>

package/src/components/table/BuiTableRowSubrow.vue

@@ -2,7 +2,8 @@
 import { BuiTableCell, BuiTableRow } from '@/components/table'
 import { FlexRender, type ColumnDef, type Row } from '@tanstack/vue-table'
 import { getPinningStyle } from './'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   row: Row<TData>
@@ -16,13 +17,19 @@ const isEmptyRow = computed(() => {
   // @ts-expect-error name с таким значением это наше внутреннее соглашение. См. Боцман Дашборд, таблицу Projects/Namespaces
   return props.row.original.name?.includes(FAKE_ROW)
 })
+
+const isHovered = ref<boolean>(false)
 </script>
 
 <template>
   <BuiTableRow
     v-if="!isEmptyRow"
     :data-row-state="row.getIsSelected() ? 'selected' : undefined"
-    :class="props.renderSubComponent?.(row) ? 'border-b-0' : ''"
+    :class="
+      cn(props.renderSubComponent?.(row) ? 'border-b-0' : '', isHovered ? 'bg-accent/4!' : '')
+    "
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
   >
     <BuiTableCell
       v-for="cell in row.getVisibleCells()"
@@ -39,6 +46,9 @@ const isEmptyRow = computed(() => {
   <BuiTableRow
     v-if="props.renderSubComponent?.(row)"
     :data-row-state="row.getIsSelected() ? 'selected' : undefined"
+    :class="cn(isHovered ? 'bg-accent/4!' : '')"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
   >
     <BuiTableCell :colspan="columns.length" class="pt-0">
       <component :is="props.renderSubComponent?.(row)?.()"></component>

package/src/components/tabs/index.ts

@@ -8,7 +8,7 @@ import { cva } from 'class-variance-authority'
 export const tabsListVariants = cva('inline-flex items-center justify-center rounded-md p-1', {
   variants: {
     variant: {
-      default: 'bg-muted text-muted-foreground p-0',
+      default: 'bg-foreground/4 dark:bg-white/4 text-muted-foreground p-0',
       ghost: 'bg-background bg-text-foreground',
       vertical:
         'w-70 shrink-0 bg-tabs-sidebar text-muted-foreground p-0 flex flex-col justify-start rounded-none shadow-tab-sidebar-shadow'
@@ -20,16 +20,16 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
 })
 
 export const tabsTriggerVariants = cva(
-  'inline-flex items-center justify-center px-3 py-1 text-sm font-semibold ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
+  'inline-flex items-center justify-center text-sm font-semibold ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
   {
     variants: {
       variant: {
         default:
-          'whitespace-nowrap rounded-sm text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:bg-background my-1 first:ml-1 last:mr-1 data-[state=active]:shadow-tab-shadow',
+          'h-10 px-5 py-2.5 whitespace-nowrap rounded-sm text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:bg-background data-[state=active]:shadow-tab data-[state=active]:border data-[state=active]:border-primary/16 dark:data-[state=active]:border-white/16 border border-transparent',
         ghost:
-          'whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 data-[state=active]:[&_div]:border-b-2 data-[state=active]:[&_div]:border-primary',
+          'px-3 py-1 whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 data-[state=active]:[&_div]:border-b-2 data-[state=active]:[&_div]:border-primary hover:text-foreground',
         vertical:
-          'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6'
+          'px-3 py-1 border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6! hover:bg-primary/16'
       }
     },
     defaultVariants: {

package/src/lib/utils.ts

@@ -42,7 +42,7 @@ export const tableColumnSortCommon = (
     },
     () => [
       h('div', { class: 'whitespace-normal break-normal' }, [name]),
-      h(icon, { class: 'ml-1 h-4 w-4 text-muted-foreground shrink-0' })
+      h(icon, { class: 'ml-1 h-4 w-4 text-muted-foreground shrink-0 hover:text-primary' })
     ]
   )
 }

package/src/stories/BuiSelect.stories.ts

@@ -1,23 +1,22 @@
 import {
   BuiSelect,
   BuiSelectContent,
+  BuiSelectGroup,
   BuiSelectItem,
   BuiSelectItemText,
   BuiSelectLabel,
-  BuiSelectGroup,
   BuiSelectTrigger,
   BuiSelectValue
 } from '@/components/select'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { toTypedSchema } from '@vee-validate/zod'
 import { BringToFrontIcon } from 'lucide-vue-next'
 import z from 'zod'
 
 import {
   BuiForm,
+  BuiFormControl,
   BuiFormField,
   BuiFormItem,
-  BuiFormControl,
   BuiFormMessage
 } from '@/components/form'
 import type { AcceptableValue, SelectRootProps } from 'reka-ui'
@@ -134,7 +133,7 @@ export const WithValidation: Story = {
       const validationRules = z.object({
         favoriteFruit: z.enum(['banana'])
       })
-      const validationSchema = toTypedSchema(validationRules)
+      const validationSchema = validationRules
       const initialValues = {
         favoriteFruit: 'apple'
       }

package/src/stories/components/BuiDataTableStory.vue

@@ -216,29 +216,37 @@ function groupName(group: string | number) {
         }"
       >
         <template #caption="{ table }">
-          <div class="flex justify-between">
-            <BuiButton variant="outline">Download YAML</BuiButton>
-            <BuiButton variant="outline" @click="updateRows"> Delete row </BuiButton>
-            <BuiButton variant="outline" @click="deleteRow"> Update rows </BuiButton>
+          <div class="flex h-fit items-center justify-between">
+            <div class="flex h-full flex-row items-center gap-3">
+              <BuiButton variant="outline" class="h-10 px-5 py-2">Download YAML</BuiButton>
+              <BuiButton variant="outline" class="h-10 px-5 py-2" @click="updateRows">
+                Delete row
+              </BuiButton>
+              <BuiButton variant="outline" class="h-10 px-5 py-2" @click="deleteRow">
+                Update rows
+              </BuiButton>
+            </div>
 
-            <BuiTabs v-model="groupBy">
-              <BuiTabsList class="grid w-full grid-cols-3" variant="default">
-                <BuiTabsTrigger value="none" variant="default" class="px-2 py-[5px]">
-                  <AlignJustifyIcon :size="14" />
-                </BuiTabsTrigger>
-                <BuiTabsTrigger value="status" variant="default" class="px-2 py-[5px]">
-                  <FolderIcon :size="14" />
-                </BuiTabsTrigger>
-                <BuiTabsTrigger value="priority" variant="default" class="px-2 py-[5px]">
-                  <ArrowUpNarrowWideIcon :size="14" />
-                </BuiTabsTrigger>
-              </BuiTabsList>
-            </BuiTabs>
+            <div class="flex h-full flex-row items-center gap-3">
+              <BuiTabs v-model="groupBy">
+                <BuiTabsList class="grid w-full grid-cols-3" variant="default">
+                  <BuiTabsTrigger value="none" variant="default">
+                    <AlignJustifyIcon :size="16" />
+                  </BuiTabsTrigger>
+                  <BuiTabsTrigger value="status" variant="default">
+                    <FolderIcon :size="16" />
+                  </BuiTabsTrigger>
+                  <BuiTabsTrigger value="priority" variant="default">
+                    <ArrowUpNarrowWideIcon :size="16" />
+                  </BuiTabsTrigger>
+                </BuiTabsList>
+              </BuiTabs>
 
-            <span>
-              {{ table.getFilteredSelectedRowModel().rows?.length }} of
-              {{ table.getFilteredRowModel().rows?.length }} row(s) selected
-            </span>
+              <span>
+                {{ table.getFilteredSelectedRowModel().rows?.length }} of
+                {{ table.getFilteredRowModel().rows?.length }} row(s) selected
+              </span>
+            </div>
           </div>
         </template>
         <template #nodata>No data</template>