@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.15 → 1.0.17

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.15",
+  "version": "1.0.17",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/shadcn/dialog/DialogContent.vue

@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border shadow-lg duration-200 sm:max-w-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 sm:max-w-lg',
           props.class,
         )"
     >

package/src/shadcn/select/SelectContent.vue

@@ -9,7 +9,7 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from "reka-ui"
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 import { SelectScrollDownButton, SelectScrollUpButton } from "."
 
 defineOptions({
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="select-content"
       v-bind="{ ...forwarded, ...$attrs }"
       :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        '!bg-neutral-800 !text-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg shadow-md',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,

package/src/shadcn/select/SelectItem.vue

@@ -10,7 +10,7 @@ import {
   SelectItemText,
   useForwardProps,
 } from "reka-ui"
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
 
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        '!text-white hover:!bg-neutral-700 focus:!bg-neutral-700 data-[state=checked]:!bg-neutral-700 aria-selected:!bg-neutral-700 [&_svg:not([class*=\'text-\'])]:!text-white relative flex w-full cursor-pointer items-center gap-2 rounded-md py-2 pr-8 pl-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
         props.class,
       )
     "

package/src/shadcn/select/SelectTrigger.vue

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import { ChevronDown } from "lucide-vue-next"
 import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const props = withDefaults(
   defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-size="size"
     v-bind="forwardedProps"
     :class="cn(
-      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      '!border-neutral-600 data-[placeholder]:!text-gray-400 [&_svg:not([class*=\'text-\'])]:!text-gray-400 focus-visible:!border-blue-500 focus-visible:!ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:!bg-neutral-600 flex w-full items-center justify-between gap-2 rounded-lg !border !bg-neutral-700 px-4 py-2.5 text-sm !text-white transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >

package/src/ui/PopoverContent.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { PropType } from 'vue';
 import { cn } from './utils';
 import { PopoverContent, PopoverPortal } from 'reka-ui';
 
 const props = defineProps({
   class: String,
-  align: { type: String, default: 'center' },
+  align: { type: String as PropType<'start' | 'center' | 'end'>, default: 'center' },
   sideOffset: { type: Number, default: 4 },
 });
 </script>
@@ -16,7 +17,7 @@ const props = defineProps({
       :align="props.align"
       :side-offset="props.sideOffset"
       :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border border-border p-4 shadow-md outline-hidden',
         props.class,
       )"
       v-bind="$attrs"

package/src/ui/SelectContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectContent } from '@/shadcn/select';
+import { SelectContent } from '../shadcn/select';
 import { cn } from './utils';
 const props = defineProps({
   class: String,
@@ -11,7 +11,7 @@ const props = defineProps({
   <SelectContent
     data-slot="select-content"
     :class="cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+      'bg-gray-800 text-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-700 shadow-md p-1',
       props.position === 'popper' &&
         'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
       props.class,

package/src/ui/SelectItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectItem } from '@/shadcn/select';
+import { SelectItem } from '../shadcn/select';
 import { Check } from 'lucide-vue-next';
 import { cn } from './utils';
 const props = defineProps({
@@ -15,7 +15,7 @@ const props = defineProps({
     :value="props.value"
     data-slot="select-item"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+      'text-white hover:bg-gray-700 focus:bg-gray-700 [&_svg:not([class*=\'text-\'])]:text-gray-400 relative flex w-full cursor-pointer items-center gap-2 rounded-md py-2 pr-8 pl-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
       props.class,
     )"
     v-bind="$attrs"

package/src/ui/SelectTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from './utils';
-import { SelectTrigger } from '@/shadcn/select';
+import { SelectTrigger } from '../shadcn/select';
 import { ChevronDown } from 'lucide-vue-next';
 defineProps({
   class: String,
@@ -12,7 +12,7 @@ defineProps({
     data-slot="select-trigger"
     :data-size="size"
     :class="cn(
-      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-select-hover flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:min-h-9 data-[size=sm]:min-h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden [&_[data-slot=select-value]_div]:flex [&_[data-slot=select-value]_div]:items-center [&_[data-slot=select-value]_div]:gap-2 [&_[data-slot=select-value]_.text-xs]:hidden [&_[data-slot=select-value]_svg]:shrink-0',
+      'border-gray-700 data-[placeholder]:text-gray-400 [&_svg:not([class*=\'text-\'])]:text-gray-400 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-gray-750 flex w-full items-center justify-between gap-2 rounded-lg border bg-gray-800 px-4 py-2.5 text-sm text-white transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:min-h-9 data-[size=sm]:min-h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden [&_[data-slot=select-value]_div]:flex [&_[data-slot=select-value]_div]:items-center [&_[data-slot=select-value]_div]:gap-2 [&_[data-slot=select-value]_.text-xs]:hidden [&_[data-slot=select-value]_svg]:shrink-0',
       $props.class,
     )"
     v-bind="$attrs"

package/src/ui/badge.vue

@@ -28,7 +28,7 @@ const variantClasses: Record<string, string> = {
   default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
   secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90',
   destructive: 'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-  outline: 'text-foreground hover:bg-accent hover:text-accent-foreground',
+  outline: 'border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
   'soft-primary': 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900',
   'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800',
   'soft-success': 'border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:hover:bg-green-900',

package/src/ui/button.vue

@@ -53,7 +53,7 @@ const variantClass = computed(() => {
     case 'secondary':
       return 'bg-secondary text-secondary-foreground hover:bg-secondary/80';
     case 'ghost':
-      return 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50';
+      return 'hover:bg-accent hover:text-accent-foreground';
     case 'link':
       return 'text-primary underline-offset-4 hover:underline';
     default:

package/src/ui/card.vue

@@ -49,13 +49,13 @@ const customPaddingValue = computed(() => {
   <div v-if="props.variant === 'corner-cut'" class="relative">
     <!-- Border container -->
     <div
-      :class="cn('absolute inset-0 bg-border rounded')"
+      :class="cn('absolute inset-0 bg-border/60 rounded')"
       :style="{ clipPath: clipPathValue }"
     />
     <!-- Content container -->
     <div
       data-slot="card"
-      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded', customPaddingValue, $attrs.class)"
+      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded shadow-sm', customPaddingValue, $attrs.class as any)"
       :style="{ clipPath: clipPathValue, margin: '1px' }"
       v-bind="$attrs"
     >
@@ -65,7 +65,7 @@ const customPaddingValue = computed(() => {
   <div
     v-else
     data-slot="card"
-    :class="cn('bg-card text-card-foreground flex flex-col gap-3 rounded-md border', $attrs.class)"
+    :class="cn('bg-gray-900 text-card-foreground flex flex-col gap-3 relative rounded-xl border border-gray-800 shadow-sm', $attrs.class as any)"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/checkbox.vue

@@ -1,11 +1,9 @@
-
-
 <template>
   <div v-if="label" class="space-y-2">
     <div class="flex items-center space-x-2">
       <span class="relative flex items-center">
         <input
-          id="with-label"
+          :id="computedId"
           data-slot="checkbox"
           type="checkbox"
           :checked="modelValue"
@@ -19,7 +17,7 @@
           <CheckIcon class="h-3.5 w-3.5" />
         </span>
       </span>
-      <Label htmlFor="with-label">{{ label }}</Label>
+      <Label :for="computedId">{{ label }}</Label>
     </div>
     <p v-if="validationState === 'success' && validationText" class="text-sm text-green-600 flex items-center gap-1">
       <CheckIcon class="h-4 w-4" />
@@ -76,9 +74,9 @@ const props = defineProps({
 const computedId = computed(() => props.id || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
 
 const checkboxClass = computed(() => [
-  'peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-  props.validationState === 'error' ? 'border-red-500 data-[state=checked]:bg-red-500' : '',
-  props.validationState === 'success' ? 'border-green-500 data-[state=checked]:bg-green-500' : '',
+  'peer appearance-none border bg-input-background dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+  props.validationState === 'error' ? 'border-red-500 checked:bg-red-500 checked:border-red-500' : '',
+  props.validationState === 'success' ? 'border-green-500 checked:bg-green-500 checked:border-green-500' : '',
   props.class,
 ]);
 </script>

package/src/ui/dialog-body.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-body"
-    :class="['p-4 space-y-4', $attrs.class]"
+    :class="['px-6 py-5 space-y-6 [&>*+*]:border-t [&>*+*]:border-border [&>*+*]:pt-5', $attrs.class]"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/dialog-content.vue

@@ -1,6 +1,6 @@
 <template>
   <DialogContent data-slot="dialog-content" :class="[
-    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 sm:max-w-lg',
+    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-100 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border border-border shadow-lg duration-200 sm:max-w-lg',
     dialogSizeVariants[size],
     $attrs.class
   ]" v-bind="$attrs">

package/src/ui/dialog-footer.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-footer"
-    :class="['flex flex-col-reverse gap-2 sm:flex-row sm:justify-end border-t p-2', $attrs.class]"
+    :class="['flex flex-col-reverse gap-2 sm:flex-row sm:justify-end border-t border-border px-6 py-4', $attrs.class]"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/dropdown-menu-content.vue

@@ -1,8 +1,7 @@
 
 <script setup lang="ts">
-import { DropdownMenuContent, DropdownMenuPortal } from '@/shadcn/dropdown-menu';
+import { DropdownMenuContent, DropdownMenuPortal } from '../shadcn/dropdown-menu';
 import { cn } from './utils';
-import { computed } from 'vue';
 const props = defineProps({
   class: { type: String, default: '' },
   sideOffset: { type: Number, default: 4 },
@@ -15,7 +14,7 @@ const props = defineProps({
       data-slot="dropdown-menu-content"
       :sideOffset="props.sideOffset"
       v-bind="$attrs"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--reka-dropdown-menu-content-available-height] min-w-[8rem] origin-[--reka-dropdown-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--reka-dropdown-menu-content-available-height] min-w-[8rem] origin-[--reka-dropdown-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-md border border-border p-1 shadow-md', props.class)"
     >
       <slot />
     </DropdownMenuContent>

package/src/ui/dropdown-menu-sub-content.vue

@@ -2,7 +2,7 @@
 // Minimal stub for DropdownMenuSubContent
 </script>
 <template>
-  <div class="absolute left-full top-0 mt-0 ml-2 min-w-[8rem] bg-popover border rounded-md shadow-md z-50" data-slot="dropdown-menu-sub-content">
+  <div class="absolute left-full top-0 mt-0 ml-2 min-w-[8rem] bg-popover border border-border rounded-md shadow-md z-50" data-slot="dropdown-menu-sub-content">
     <slot />
   </div>
 </template>

package/src/ui/table-footer.vue

@@ -12,5 +12,5 @@ const props = defineProps({
     default: '',
   },
 });
-const footerClass = cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class);
+const footerClass = cn('bg-muted/50 border-t border-border font-medium [&>tr]:last:border-b-0', props.class);
 </script>

package/src/ui/table-row.vue

@@ -12,5 +12,5 @@ const props = defineProps({
     default: '',
   },
 });
-const rowClass = cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class);
+const rowClass = cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors', props.class);
 </script>

package/src/ui/table.vue

@@ -1,11 +1,11 @@
 <template>
-  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+  <div data-slot="table-container" class="relative w-full overflow-x-auto rounded-md border border-border">
     <table data-slot="table" :class="tableClass">
       <!-- Table caption slot -->
       <slot name="caption" />
 
       <!-- Auto-wrap first TableRow in thead, rest in tbody -->
-      <thead v-if="rows.length" data-slot="table-head" class="[&_tr]:border-b">
+      <thead v-if="rows.length" data-slot="table-head" class="[&_tr]:border-b [&_tr]:border-border">
         <component :is="rows[0]" />
       </thead>
       <tbody v-if="rows.length > 1" data-slot="table-body" class="[&_tr:last-child]:border-0">
@@ -40,7 +40,7 @@ const rows = computed(() => {
   const vnodes = slots.default ? slots.default() : [];
   // Vue SFC: TableRow is a functional component, so check type.name or type.__name
   return vnodes.filter(v => {
-    const type = v.type;
+    const type = v.type as any;
     return type && (type.name === 'TableRow' || type.__name === 'TableRow');
   });
 });

package/src/ui/textarea.vue

@@ -8,7 +8,7 @@
       :id="id"
       data-slot="textarea"
       :class="cn(
-        'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         validationState === 'error' && 'border-red-500 focus:border-red-500 focus:ring-red-500',
         validationState === 'success' && 'border-green-500 focus:border-green-500 focus:ring-green-500',
         $attrs.class
@@ -32,7 +32,7 @@
     v-else
     data-slot="textarea"
     :class="cn(
-      'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
       $attrs.class
     )"
     v-bind="$attrs"