@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.9 → 1.0.11

package/env.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/package.json

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

package/src/index.ts

@@ -6,8 +6,10 @@ import './globals.css'
 export * from './shadcn/breadcrumb';
 export * from './shadcn/accordion';
 export * from './shadcn/spinner';
-export * from './shadcn/tree';
+export * from './shadcn/tooltip';
+export * from './shadcn/command';
 
+export * from './ui/tree';
 export { default as InputOTP } from './ui/InputOTP.vue';
 export { default as InputOTPGroup } from './ui/InputOTPGroup.vue';
 export { default as InputOTPSeparator } from './ui/InputOTPSeparator.vue';
@@ -171,8 +173,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/tree/index.ts

@@ -0,0 +1 @@
+export { default as Tree } from './tree.vue';

package/src/ui/tree/tree-node.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = defineProps<{
+  node: any
+  level: number
+  expandedIds: Array<string | number>
+}>()
+
+const emit = defineEmits<{
+  (e: "toggle", id: string | number): void
+  (e: "nodeClick", node: any): void
+}>()
+
+const isExpanded = computed(() => props.expandedIds.includes(props.node.id))
+
+const handleClick = () => {
+  emit("toggle", props.node.id)
+  emit("nodeClick", props.node)
+}
+</script>
+
+<template>
+  <li>
+    <button
+      type="button"
+      class="flex w-full items-center gap-1 px-2 py-1 text-xs text-slate-200 hover:bg-slate-800/80 rounded-md transition-colors"
+      :style="{ paddingLeft: `${8 + level * 12}px` }"
+      @click="handleClick"
+    >
+      <span
+        v-if="node.children?.length"
+        class="inline-flex w-3 justify-center text-muted-foreground transition-transform duration-200"
+        :class="isExpanded ? 'rotate-90' : 'rotate-0'"
+      >
+        ▶
+      </span>
+
+      <span class="truncate">{{ node.title }}</span>
+    </button>
+
+    <ul
+      v-if="isExpanded && node.children?.length"
+      class="ml-4 mt-0.5 space-y-0.5 pl-2"
+    >
+      <TreeNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :level="level + 1"
+        :expanded-ids="expandedIds"
+        @toggle="emit('toggle', $event)"
+        @nodeClick="emit('nodeClick', $event)"
+      />
+    </ul>
+  </li>
+</template>

package/src/ui/tree/tree.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import TreeNode from "./tree-node.vue"
+
+export interface TreeItem {
+  id: string | number
+  title: string
+  icon?: any
+  children?: TreeItem[]
+}
+
+const props = defineProps<{
+  items: TreeItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: "nodeClick", node: TreeItem): void
+}>()
+
+const expandedIds = ref<Array<string | number>>([])
+
+const toggleNode = (id: string | number) => {
+  const list = expandedIds.value.slice()
+  const idx = list.indexOf(id)
+  if (idx >= 0) list.splice(idx, 1)
+  else list.push(id)
+  expandedIds.value = list
+}
+</script>
+
+<template>
+  <ul class="space-y-0.5">
+    <TreeNode
+      v-for="node in items"
+      :key="node.id"
+      :node="node"
+      :level="0"
+      :expanded-ids="expandedIds"
+      @toggle="toggleNode"
+      @nodeClick="emit('nodeClick', $event)"
+    />
+  </ul>
+</template>