add

packages/shadcn-vue/mono.config.js

@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+
+export const buttonClass = cva(
+  'flex px-2 py-2',
+  {
+    variants: {
+      primary: 'bg-blue-200',
+      secondary: 'bg-red-400'
+    }
+  }
+)

packages/shadcn-vue/package.json

@@ -1,15 +1,17 @@
 {
   "name": "radix-vue",
   "version": "0.0.1",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/radix-vue.umd.js",
   "module": "./dist/radix-vue.es.js",
   "exports": {
-	".": {
+    ".": {
-		"import": "./dist/radix-vue.es.js",
+      "import": "./dist/radix-vue.es.js",
-		"require": "./dist/radix-vue.umd.js"
+      "require": "./dist/radix-vue.umd.js"
-	},
+    },
-	"./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css"
   },
   "type": "module",
   "scripts": {
@@ -21,6 +23,8 @@
     "@headlessui-float/vue": "^0.11.2",
     "@headlessui/vue": "^1.7.14",
     "@morev/vue-transitions": "^2.3.6",
+    "class-variance-authority": "^0.6.1",
+    "radix-vue": "^0.1.6",
     "vue": "^3.2.47"
   },
   "devDependencies": {
@@ -28,6 +32,7 @@
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",

packages/shadcn-vue/src/App.vue

@@ -45,6 +45,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./components/ui/Popover
 import { Separator } from "./components/ui/Separator";
 import { Tooltip, TooltipTrigger } from "./components/ui/Tooltip";
 import { RadioGroup, RadioGroupItem } from "./components/ui/RadioGroup";
+import AccordionDemo2 from "./components/uiv2/AccordionDemo.vue"
 
 const alertDialogIsOpen = ref(false);
 const dialogIsOpen = ref(false);
@@ -131,7 +132,7 @@ const components = [
           </button>
         </nav>
       </div>
-      <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
         <InternalCard title="Accordion">
           <div class="w-full max-w-[400px]">
             <Accordion>
@@ -163,6 +164,9 @@ const components = [
             </Accordion>
           </div>
         </InternalCard>
+        <InternalCard title="Accordionv22">
+          <AccordionDemo2 />
+        </InternalCard>
         <InternalCard title="Alert">
           <div class="max-w-[400px]">
             <Alert>

packages/shadcn-vue/src/components/uiv2/Accordion.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from "radix-vue";
+import { Icon } from "@iconify/vue";
+import { AccordionClass, type AccordionClassProps } from "./cva"
+
+interface AccordionProps {
+  variant: AccordionClassProps["variant"];
+  data: {
+    value: string,
+    title: string,
+    content: string,
+  }[],
+  defaultValue: string,
+  type: string,
+  collapsible: boolean,
+}
+
+withDefaults(defineProps<AccordionProps>(),{
+  variant: 'default',
+  type: 'single',
+  collapsible: true,
+});
+</script>
+
+<template>
+  <AccordionRoot
+    :class="AccordionClass({ variant, component: 'root' })"
+    :default-value="defaultValue"
+    :type="type"
+    :collapsible="collapsible"
+  >
+    <template v-for="item in data" :key="item.value">
+      <AccordionItem
+        :class="AccordionClass({ variant, component: 'item' })"
+        :value="item.value"
+      >
+        <AccordionHeader :class="AccordionClass({ variant, component: 'header' })">
+          <AccordionTrigger :class="AccordionClass({ variant, component: 'trigger' })"
+            ><span>{{ item.title }}</span>
+            <Icon
+              icon="radix-icons:chevron-down"
+              class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+              aria-hidden
+            />
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionContent :class="AccordionClass({ variant, component: 'content' })">
+          <div class="px-5 py-4">{{ item.content }}</div>
+        </AccordionContent>
+      </AccordionItem>
+    </template>
+  </AccordionRoot>
+</template>

packages/shadcn-vue/src/components/uiv2/AccordionDemo.vue

@@ -0,0 +1,27 @@
+<script setup>
+import Accordion from "./Accordion.vue"
+
+const defaultValue = 'item-1'
+
+const accordionItems = [
+  {
+    value: "item-1",
+    title: "Is it accessible?",
+    content: "Yes. It adheres to the WAI-ARIA design pattern."
+  },
+  {
+    value: "item-2",
+    title: "Is it unstyled?",
+    content: "Yes. It's unstyled by default, giving you freedom over the look and feel."
+  },
+  {
+    value: "item-3",
+    title: "Can it be animated?",
+    content: "Yes! You can use the transition prop to configure the animation."
+  }
+]
+</script>
+
+<template>
+  <Accordion :data="accordionItems" :default-value="defaultValue"/>
+</template>

packages/shadcn-vue/src/components/uiv2/cva.ts

@@ -0,0 +1,30 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const AccordionClass = cva("", {
+	variants: {
+		variant: {
+			default: "",
+		},
+		component: {
+			root: "",
+			item: "",
+			header: "",
+			trigger: "",
+			content: "",
+      contentWrapper: "",
+		},
+	},
+	compoundVariants: [
+		{ variant: "default", component: "root", class: "w-[300px]" },
+		{ variant: "default", component: "item", class: "border-b w-full" },
+    { variant: "default", component: "trigger", class: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180" },
+    { variant: "default", component: "content", class: "overflow-hidden text-sm data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up" },
+    { variant: "default", component: "contentWrapper", class: "overflow-hidden text-sm" },
+    { variant: "default", component: "header", class: "flex" },
+	],
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type AccordionClassProps = VariantProps<typeof AccordionClass>;

packages/shadcn-vue/tsconfig.json

@@ -19,7 +19,11 @@
     "strict": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@uiv2/*": ["./src/components/uiv2"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/index.js"],
   "references": [{ "path": "./tsconfig.node.json" }]

pnpm-lock.yaml

@@ -17,6 +17,12 @@ importers:
       '@morev/vue-transitions':
         specifier: ^2.3.6
         version: 2.3.6(vue@3.2.47)
+      class-variance-authority:
+        specifier: ^0.6.1
+        version: 0.6.1
+      radix-vue:
+        specifier: ^0.1.6
+        version: 0.1.6(vue@3.2.47)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -33,6 +39,9 @@ importers:
       postcss:
         specifier: ^8.4.24
         version: 8.4.24
+      tailwind-merge:
+        specifier: ^1.14.0
+        version: 1.14.0
       tailwindcss:
         specifier: ^3.3.2
         version: 3.3.2
@@ -479,6 +488,16 @@ packages:
       vue-demi: 0.13.11(vue@3.2.47)
     dev: false
 
+  /@floating-ui/vue@1.0.1(vue@3.2.47):
+    resolution: {integrity: sha512-HZmmNWaztKYKOQxXvMzJYCYtfgG07cL/bPQvZ92AFG3Ktw71bvvLKXsZDAyIxGpqRo9WiTPsYknnSuLV2H/riA==}
+    dependencies:
+      '@floating-ui/dom': 1.4.3
+      vue-demi: 0.13.11(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@headlessui-float/vue@0.11.2(vue@3.2.47):
     resolution: {integrity: sha512-9yWN6LHeaXZKyU9y/rj6SmujCzkRxxf4bhg7nRs2RSwfSRI9E+JPvM/Tl7AA2lFQAJegWTRcElt3dSJ0Nkth0Q==}
     peerDependencies:
@@ -976,6 +995,17 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /class-variance-authority@0.6.1:
+    resolution: {integrity: sha512-eurOEGc7YVx3majOrOb099PNKgO3KnKSApOprXI4BTq6bcfbqbQXPN2u+rPPmIJ2di23bMwhk0SxCCthBmszEQ==}
+    dependencies:
+      clsx: 1.2.1
+    dev: false
+
+  /clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1669,6 +1699,16 @@ packages:
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  /radix-vue@0.1.6(vue@3.2.47):
+    resolution: {integrity: sha512-peTAHm7yabsa6L1p3cwcEGc0acPZY6jjDF+fqgsYF/LFt7EKOmZly1TXQkPL0wVex3JHBSrt5tmfWf7ufIVUvQ==}
+    dependencies:
+      '@floating-ui/dom': 1.4.3
+      '@floating-ui/vue': 1.0.1(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /rc9@2.1.1:
     resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
     dependencies:
@@ -1806,6 +1846,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+    dev: true
+
   /tailwindcss@3.3.2:
     resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
     engines: {node: '>=14.0.0'}