@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.16 → 1.0.18

package/package.json

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

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-input !bg-input-background hover:!bg-select-hover focus-visible:!border-ring focus-visible:!ring-ring/50 data-[placeholder]:!text-gray-400 [&_svg:not([class*=\'text-\'])]:!text-gray-400 focus-visible:!ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center justify-between gap-2 rounded-lg !border 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',
+      'justify-between border-input bg-input-background hover:bg-select-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] data-[placeholder]:text-gray-400 [&_svg:not([class*=\'text-\'])]:text-gray-400 focus-visible:ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center gap-2 border 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/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/dialog-header.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-header"
-    :class="['flex flex-col gap-2 text-center px-6 py-5 sm:text-left border-b border-border', $attrs.class]"
+    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b', $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/select-multiple.vue

@@ -19,7 +19,7 @@
             </template>
             <template v-else-if="modelValue.length <= maxDisplay">
               <Badge
-                v-for="(val, idx) in modelValue"
+                v-for="val in modelValue"
                 :key="val"
                 variant="soft-neutral"
                 class="text-xs shrink-0"
@@ -47,19 +47,23 @@
           <div class="max-h-[200px] overflow-y-auto">
             <div
               v-for="option in options"
-              :key="option.id"
+              :key="option.value"
               :class="[
                 'relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-2 text-sm outline-hidden select-none transition-colors',
-                option.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent hover:text-accent-foreground'
+                option.disabled
+                  ? 'opacity-50 cursor-not-allowed'
+                  : 'hover:bg-accent hover:text-accent-foreground'
               ]"
-              @click="!option.disabled && handleValueChange(option.id, !modelValue.includes(option.id))"
+              @click="!option.disabled && handleValueChange(option.value, !isSelected(option.value))"
             >
               <Checkbox
-                :model-value="modelValue.includes(option.id)"
+                :model-value="isSelected(option.value)"
                 :disabled="option.disabled"
                 class="pointer-events-none"
               />
-              <span class="flex-1 font-medium leading-none">{{ option.label }}</span>
+              <span class="flex-1 font-medium leading-none">
+                {{ option.label }}
+              </span>
             </div>
           </div>
         </div>
@@ -69,14 +73,14 @@
 </template>
 
 <script setup>
-import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue';
-import Popover from './popover.vue';
-import PopoverTrigger from './PopoverTrigger.vue';
-import PopoverContent from './PopoverContent.vue';
-import Button from './button.vue';
-import Badge from './badge.vue';
-import Checkbox from './checkbox.vue';
-import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down';
+import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue'
+import Popover from './popover.vue'
+import PopoverTrigger from './PopoverTrigger.vue'
+import PopoverContent from './PopoverContent.vue'
+import Button from './button.vue'
+import Badge from './badge.vue'
+import Checkbox from './checkbox.vue'
+import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down'
 
 const props = defineProps({
   modelValue: {
@@ -87,49 +91,45 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  placeholder: {
-    type: String,
-    default: 'Select options...',
-  },
-  title: {
-    type: String,
-    default: 'Select Options',
-  },
+  placeholder: String,
+  title: String,
   maxDisplay: {
     type: Number,
     default: 2,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  disabled: Boolean,
   size: {
     type: String,
     default: 'default',
   },
-  class: {
-    type: String,
-    default: '',
-  },
-});
+  class: String,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const $attrs = useAttrs()
+const isOpen = ref(false)
+
+const customClass = computed(() => props.class || $attrs.class || '')
 
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
-const isOpen = ref(false);
-const customClass = computed(() => props.class || $attrs.class || '');
+function isSelected(value) {
+  return Array.isArray(props.modelValue) && props.modelValue.includes(value)
+}
 
-function getLabel(val) {
-  const found = props.options.find((o) => o.id === val);
-  return found ? found.label : val;
+function getLabel(value) {
+  const found = props.options.find(o => o.value === value)
+  return found ? found.label : value
 }
 
-function handleValueChange(optionId, checked) {
-  let newValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
-  if (checked) {
-    newValue.push(optionId);
-  } else {
-    newValue = newValue.filter((v) => v !== optionId);
+function handleValueChange(value, checked) {
+  const current = Array.isArray(props.modelValue) ? props.modelValue : []
+  let next = [...current]
+
+  if (checked && !next.includes(value)) {
+    next.push(value)
+  } else if (!checked) {
+    next = next.filter(v => v !== value)
   }
-  emit('update:modelValue', newValue);
+
+  emit('update:modelValue', next)
 }
-</script>
+</script>

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 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"