@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.10 → 1.0.12

package/package.json

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

package/src/index.ts

@@ -6,6 +6,8 @@ import './globals.css'
 export * from './shadcn/breadcrumb';
 export * from './shadcn/accordion';
 export * from './shadcn/spinner';
+export * from './shadcn/tooltip';
+export * from './shadcn/command';
 
 export * from './ui/tree';
 export { default as InputOTP } from './ui/InputOTP.vue';
@@ -18,6 +20,7 @@ export { default as SelectContent } from './ui/SelectContent.vue';
 export { default as SelectSeparator } from './ui/SelectSeparator.vue';
 export { default as SelectTrigger } from './ui/SelectTrigger.vue';
 export { default as SelectValue } from './ui/SelectValue.vue';
+export { default as SelectItem } from './ui/SelectItem.vue';
 export { default as SheetContent } from './ui/SheetContent.vue';
 export { default as SheetDescription } from './ui/SheetDescription.vue';
 export { default as SheetHeader } from './ui/SheetHeader.vue';
@@ -171,8 +174,3 @@ export { default as Tabs } from './ui/tabs.vue';
 export { default as Textarea } from './ui/textarea.vue';
 export { default as ThreatGauge } from './ui/threat-gauge.vue';
 export { default as Toggle } from './ui/toggle.vue';
-export { default as TooltipContent } from './ui/tooltip-content.vue';
-export { default as TooltipProvider } from './ui/tooltip-provider.vue';
-export { default as TooltipRoot } from './ui/tooltip-root.vue';
-export { default as TooltipTrigger } from './ui/tooltip-trigger.vue';
-export { default as Tooltip } from './ui/tooltip.vue';

package/src/shadcn/tooltip/TooltipContent.vue

@@ -4,13 +4,95 @@ import type { HTMLAttributes } from "vue"
 import { reactiveOmit } from "@vueuse/core"
 import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
 import { cn } from "@/lib/utils"
+import { cva } from "class-variance-authority"
+
+const tooltipVariants = cva(
+  "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary text-secondary-foreground",
+        outline:
+          "bg-popover text-popover-foreground border border-border shadow-md",
+        // Soft semantic variants using design system colors
+        "soft-success":
+          "bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800",
+        "soft-warning":
+          "bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800",
+        "soft-danger":
+          "bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800",
+        "soft-info":
+          "bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800",
+        // Additional soft variants
+        "soft-primary":
+          "bg-cyan-50 text-cyan-700 border border-cyan-200 dark:bg-cyan-950 dark:text-cyan-300 dark:border-cyan-800",
+        "soft-purple":
+          "bg-purple-50 text-purple-700 border border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800",
+        "soft-pink":
+          "bg-pink-50 text-pink-700 border border-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:border-pink-800",
+        "soft-indigo":
+          "bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950 dark:text-indigo-300 dark:border-indigo-800",
+        "soft-orange":
+          "bg-orange-50 text-orange-700 border border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800",
+        "soft-teal":
+          "bg-teal-50 text-teal-700 border border-teal-200 dark:bg-teal-950 dark:text-teal-300 dark:border-teal-800",
+        "soft-neutral":
+          "bg-stone-50 text-stone-700 border border-stone-200 dark:bg-stone-900 dark:text-stone-300 dark:border-stone-700",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const tooltipArrowVariants = cva(
+  "z-50 size-2.5 translate-y-[calc(-50%_-_1px)] rotate-45 rounded-[2px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary fill-primary",
+        secondary: "bg-secondary fill-secondary",
+        outline: "bg-popover fill-popover border border-border",
+        // Soft semantic variants - arrows match background with borders
+        "soft-success":
+          "bg-green-50 fill-green-50 border border-green-200 dark:bg-green-950 dark:fill-green-950 dark:border-green-800",
+        "soft-warning":
+          "bg-yellow-50 fill-yellow-50 border border-yellow-200 dark:bg-yellow-950 dark:fill-yellow-950 dark:border-yellow-800",
+        "soft-danger":
+          "bg-red-50 fill-red-50 border border-red-200 dark:bg-red-950 dark:fill-red-950 dark:border-red-800",
+        "soft-info":
+          "bg-blue-50 fill-blue-50 border border-blue-200 dark:bg-blue-950 dark:fill-blue-950 dark:border-blue-800",
+        "soft-primary":
+          "bg-cyan-50 fill-cyan-50 border border-cyan-200 dark:bg-cyan-950 dark:fill-cyan-950 dark:border-cyan-800",
+        "soft-purple":
+          "bg-purple-50 fill-purple-50 border border-purple-200 dark:bg-purple-950 dark:fill-purple-950 dark:border-purple-800",
+        "soft-pink":
+          "bg-pink-50 fill-pink-50 border border-pink-200 dark:bg-pink-950 dark:fill-pink-950 dark:border-pink-800",
+        "soft-indigo":
+          "bg-indigo-50 fill-indigo-50 border border-indigo-200 dark:bg-indigo-950 dark:fill-indigo-950 dark:border-indigo-800",
+        "soft-orange":
+          "bg-orange-50 fill-orange-50 border border-orange-200 dark:bg-orange-950 dark:fill-orange-950 dark:border-orange-800",
+        "soft-teal":
+          "bg-teal-50 fill-teal-50 border border-teal-200 dark:bg-teal-950 dark:fill-teal-950 dark:border-teal-800",
+        "soft-neutral":
+          "bg-stone-50 fill-stone-50 border border-stone-200 dark:bg-stone-900 dark:fill-stone-900 dark:border-stone-700",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"], variant?: "default" | "secondary" | "outline" | "soft-success" | "soft-warning" | "soft-danger" | "soft-info" | "soft-primary" | "soft-purple" | "soft-pink" | "soft-indigo" | "soft-orange" | "soft-teal" | "soft-neutral" }>(), {
   sideOffset: 4,
+  variant: "default"
 })
 
 const emits = defineEmits<TooltipContentEmits>()
@@ -24,11 +106,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <TooltipContent
       data-slot="tooltip-content"
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+      :class="cn(
+        'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit rounded-md px-3 py-1.5 text-xs text-balance',
+        tooltipVariants({ variant: props.variant }),
+        props.class,
+        'p-3'
+      )"
     >
       <slot />
 
-      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      <TooltipArrow
+        :class="cn(
+          'bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]',
+          tooltipArrowVariants({ variant: props.variant })
+        )"
+      />
     </TooltipContent>
   </TooltipPortal>
 </template>

package/src/ui/slider.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  customClass: {
+    type: [String, Array, Object],
+    default: '',
+  }
 });
 
 const $attrs = useAttrs();

package/src/ui/switch.vue

@@ -1,33 +1,50 @@
-<template>
-  <Switch>
-    <slot />
-  </Switch>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, useAttrs } from 'vue';
-import { cn } from './utils';
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+import { defineProps, defineEmits, useAttrs, computed } from 'vue'
+import { cn } from './utils'
 
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
+  modelValue: Boolean,
+  disabled: Boolean,
+  class: String,
+})
+
+const emit = defineEmits(['update:modelValue'])
 
-function toggle() {
-  if (!props.disabled) {
-    emit('update:modelValue', !props.modelValue);
-  }
-}
+const attrs = useAttrs()
+
+const rootAttrs = computed(() => {
+  const { checked, modelValue, disabled, ...rest } = attrs
+  return rest
+})
 </script>
 
-<style scoped>
-/* All styles handled by Tailwind classes */
-</style>
+<template>
+  <SwitchRoot
+    v-bind="rootAttrs"
+    :checked="modelValue"
+    :disabled="disabled"
+    @update:checked="v => emit('update:modelValue', v)"
+    :class="cn(
+      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors',
+      'bg-muted data-[state=checked]:bg-primary',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      props.class
+    )"
+  >
+    <SwitchThumb
+      class="
+        pointer-events-none
+        block
+        h-5 w-5
+        rounded-full
+        bg-background
+        shadow-lg
+        transition-transform
+        translate-x-1
+        data-[state=checked]:translate-x-5
+      "
+    />
+  </SwitchRoot>
+</template>