@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.14 → 1.0.16

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.14",
+  "version": "1.0.16",
   "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/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/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/dialog-header.vue

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

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