@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/toggle.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from './utils';
+import Label from './label.vue';
+import { Toggle } from '@/shadcn/toggle';
+
+const props = defineProps({
+  modelValue: Boolean,
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (v: string) => ['default', 'outline'].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (v: string) => ['default', 'sm', 'lg'].includes(v),
+  },
+  label: String,
+  id: String,
+  disabled: Boolean,
+  ariaLabel: String,
+  class: String,
+})
+
+const emit = defineEmits(['update:modelValue']);
+const attrs = useAttrs();
+const pressed = useVModel(props, 'modelValue', emit);
+
+const baseClass =
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap';
+
+const variantClasses = {
+  default: 'bg-transparent',
+  outline: 'border bg-border bg-transparent hover:bg-accent hover:text-accent-foreground',
+};
+const sizeClasses = {
+  default: 'h-9 px-2 min-w-9',
+  sm: 'h-8 px-1.5 min-w-8',
+  lg: 'h-10 px-2.5 min-w-10',
+};
+
+const toggleClass = computed(() =>
+  cn(
+    baseClass,
+    variantClasses[props.variant],
+    sizeClasses[props.size],
+    props.class,
+  ),
+);
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+      <Toggle
+        :id="id"
+        data-slot="toggle"
+        :class="toggleClass"
+        :aria-label="ariaLabel"
+        :disabled="disabled"
+        v-bind="attrs"
+        v-model="pressed"
+      >
+        <slot />
+      </Toggle>
+    <Label v-if="label" :for="id">{{ label }}</Label>
+  </div>
+</template>

package/src/ui/tooltip-content.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { defineProps, useSlots } from 'vue';
+import { cn } from './utils';
+import { TooltipContent } from '@/shadcn/tooltip';
+
+const props = defineProps({
+  sideOffset: { type: Number, default: 0 },
+  variant: { type: String, default: 'default' },
+  class: { type: String, default: '' },
+});
+const slots = useSlots();
+
+const tooltipVariants = {
+  default: 'bg-primary text-primary-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  outline: 'bg-popover text-popover-foreground border border-border shadow-md',
+  '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',
+  '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',
+};
+const tooltipArrowVariants = {
+  default: 'bg-primary fill-primary',
+  secondary: 'bg-secondary fill-secondary',
+  outline: 'bg-popover fill-popover border border-border',
+  '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',
+};
+</script>
+<template>
+  <TooltipContent data-slot="tooltip-content" :side-offset="props.sideOffset"
+    :class="cn(tooltipVariants[props.variant] || tooltipVariants.default, props.class, 'p-3 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')"
+    v-bind="props">
+    <slot />
+  </TooltipContent>
+</template>

package/src/ui/tooltip-provider.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useAttrs, defineProps } from 'vue';
+import { TooltipProvider } from '@/shadcn/tooltip';
+const props = defineProps({
+  delayDuration: { type: Number, default: 0 },
+});
+const attrs = useAttrs();
+</script>
+<template>
+  <TooltipProvider :delay-duration="props.delayDuration" v-bind="attrs">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/ui/tooltip-root.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+const attrs = useAttrs();
+</script>
+<template>
+  <div data-slot="tooltip" v-bind="attrs">
+    <slot />
+  </div>
+</template>

package/src/ui/tooltip-trigger.vue

@@ -0,0 +1,13 @@
+
+<script setup lang="ts">
+import TooltipTrigger from "@/shadcn/tooltip/TooltipTrigger.vue";
+import { defineProps } from "vue";
+const props = defineProps<{ asChild?: boolean }>();
+</script>
+
+<template>
+  <slot v-if="props.asChild" />
+  <TooltipTrigger v-else data-slot="tooltip-trigger" v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/ui/tooltip.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { defineProps, useSlots } from 'vue';
+import TooltipProvider from './tooltip-provider.vue';
+import { Tooltip } from '@/shadcn/tooltip';
+import { cn } from './utils';
+
+const props = defineProps({
+  sideOffset: { type: Number, default: 0 },
+  variant: { type: String, default: 'default' },
+  class: { type: String, default: '' },
+  delayDuration: { type: Number, default: 0 },
+});
+const slots = useSlots();
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="props.delayDuration">
+    <Tooltip data-slot="tooltip" v-bind="props">
+        <slot />
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/src/ui/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+// vite.config.ts
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from "path"
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: "perisai-ui",
+      fileName: (format) => `perisai-ui.${format}.js`,
+    },
+    rollupOptions: {
+      external: [
+        "vue",
+        "reka-ui",
+        "shadcn-vue",
+	"lucide-vue-next",
+	"vaul-vue",
+	"clsx",
+	"tailwind-merge",
+	"input-otp",
+	"class-variance-authority"	// keep dynamic async imports unbundled
+      ],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+})
+