tailwind-styled-v4 5.0.0 → 5.0.2

package/dist/vue.d.mts

@@ -0,0 +1,89 @@
+import { DefineComponent, Component } from 'vue';
+
+/**
+ * tailwind-styled-v4 — Vue Adapter
+ *
+ * Pola seperti `createComponent` di React tapi untuk Vue 3 Composition API.
+ * Mendukung: base, variants, defaultVariants, compoundVariants.
+ *
+ * @example
+ * import { tw } from '@tailwind-styled/vue'
+ *
+ * const Button = tw('button', {
+ *   base: 'px-4 py-2 rounded font-medium',
+ *   variants: {
+ *     intent: {
+ *       primary: 'bg-blue-500 text-white hover:bg-blue-600',
+ *       danger: 'bg-red-500 text-white hover:bg-red-600',
+ *     },
+ *     size: { sm: 'h-8 text-sm', md: 'h-10 text-base', lg: 'h-12 text-lg' },
+ *   },
+ *   defaultVariants: { intent: 'primary', size: 'md' },
+ * })
+ *
+ * // In template:
+ * // <Button intent="danger" size="lg">Delete</Button>
+ */
+
+interface VueComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: any;
+    }>;
+    defaultVariants?: Record<string, string>;
+}
+type HtmlTagName = "div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "strong" | "em" | "a" | "button" | "input" | "textarea" | "select" | "form" | "label" | "ul" | "ol" | "li" | "table" | "tr" | "th" | "td" | "thead" | "tbody" | "img" | "figure" | "figcaption" | "blockquote" | "code" | "pre" | "hr" | "br" | "dialog" | "details" | "summary";
+/**
+ * Buat Vue component dengan Tailwind class yang terstruktur.
+ *
+ * @param tag - HTML tag atau Vue component
+ * @param config - Konfigurasi base, variants, defaultVariants
+ */
+declare function tw<Tag extends HtmlTagName>(tag: Tag, config?: VueComponentConfig): DefineComponent<any>;
+/**
+ * Class variant function — returns a class string resolver.
+ * Framework-agnostic, bisa dipakai di mana saja.
+ *
+ * @example
+ * const buttonCv = cv({
+ *   base: 'px-4 py-2 rounded',
+ *   variants: { size: { sm: 'h-8', lg: 'h-12' } },
+ *   defaultVariants: { size: 'sm' },
+ * })
+ *
+ * buttonCv({ size: 'lg' }) // 'px-4 py-2 rounded h-12'
+ */
+declare function cv(config: VueComponentConfig): (props?: Record<string, any>) => string;
+/**
+ * Extend komponen Vue yang sudah ada dengan class tambahan.
+ *
+ * @example
+ * const PrimaryButton = extend(Button, 'bg-blue-500 text-white')
+ */
+declare function extend(component: Component, extraClasses: string): DefineComponent<any>;
+/**
+ * Vue plugin — daftarkan `tw` sebagai global composable.
+ *
+ * @example
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { TailwindStyledPlugin } from '@tailwind-styled/vue'
+ * import App from './App.vue'
+ *
+ * createApp(App).use(TailwindStyledPlugin).mount('#app')
+ */
+declare const TailwindStyledPlugin: {
+    install(app: any): void;
+};
+declare const _default: {
+    tw: typeof tw;
+    cv: typeof cv;
+    extend: typeof extend;
+    TailwindStyledPlugin: {
+        install(app: any): void;
+    };
+};
+
+export { type HtmlTagName, TailwindStyledPlugin, type VueComponentConfig, cv, _default as default, extend, tw };

package/dist/vue.d.ts

@@ -0,0 +1,89 @@
+import { DefineComponent, Component } from 'vue';
+
+/**
+ * tailwind-styled-v4 — Vue Adapter
+ *
+ * Pola seperti `createComponent` di React tapi untuk Vue 3 Composition API.
+ * Mendukung: base, variants, defaultVariants, compoundVariants.
+ *
+ * @example
+ * import { tw } from '@tailwind-styled/vue'
+ *
+ * const Button = tw('button', {
+ *   base: 'px-4 py-2 rounded font-medium',
+ *   variants: {
+ *     intent: {
+ *       primary: 'bg-blue-500 text-white hover:bg-blue-600',
+ *       danger: 'bg-red-500 text-white hover:bg-red-600',
+ *     },
+ *     size: { sm: 'h-8 text-sm', md: 'h-10 text-base', lg: 'h-12 text-lg' },
+ *   },
+ *   defaultVariants: { intent: 'primary', size: 'md' },
+ * })
+ *
+ * // In template:
+ * // <Button intent="danger" size="lg">Delete</Button>
+ */
+
+interface VueComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: any;
+    }>;
+    defaultVariants?: Record<string, string>;
+}
+type HtmlTagName = "div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "strong" | "em" | "a" | "button" | "input" | "textarea" | "select" | "form" | "label" | "ul" | "ol" | "li" | "table" | "tr" | "th" | "td" | "thead" | "tbody" | "img" | "figure" | "figcaption" | "blockquote" | "code" | "pre" | "hr" | "br" | "dialog" | "details" | "summary";
+/**
+ * Buat Vue component dengan Tailwind class yang terstruktur.
+ *
+ * @param tag - HTML tag atau Vue component
+ * @param config - Konfigurasi base, variants, defaultVariants
+ */
+declare function tw<Tag extends HtmlTagName>(tag: Tag, config?: VueComponentConfig): DefineComponent<any>;
+/**
+ * Class variant function — returns a class string resolver.
+ * Framework-agnostic, bisa dipakai di mana saja.
+ *
+ * @example
+ * const buttonCv = cv({
+ *   base: 'px-4 py-2 rounded',
+ *   variants: { size: { sm: 'h-8', lg: 'h-12' } },
+ *   defaultVariants: { size: 'sm' },
+ * })
+ *
+ * buttonCv({ size: 'lg' }) // 'px-4 py-2 rounded h-12'
+ */
+declare function cv(config: VueComponentConfig): (props?: Record<string, any>) => string;
+/**
+ * Extend komponen Vue yang sudah ada dengan class tambahan.
+ *
+ * @example
+ * const PrimaryButton = extend(Button, 'bg-blue-500 text-white')
+ */
+declare function extend(component: Component, extraClasses: string): DefineComponent<any>;
+/**
+ * Vue plugin — daftarkan `tw` sebagai global composable.
+ *
+ * @example
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { TailwindStyledPlugin } from '@tailwind-styled/vue'
+ * import App from './App.vue'
+ *
+ * createApp(App).use(TailwindStyledPlugin).mount('#app')
+ */
+declare const TailwindStyledPlugin: {
+    install(app: any): void;
+};
+declare const _default: {
+    tw: typeof tw;
+    cv: typeof cv;
+    extend: typeof extend;
+    TailwindStyledPlugin: {
+        install(app: any): void;
+    };
+};
+
+export { type HtmlTagName, TailwindStyledPlugin, type VueComponentConfig, cv, _default as default, extend, tw };

package/dist/vue.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var tailwindMerge = require('tailwind-merge');
+
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
+function resolveVariants(variants, props, defaults = {}) {
+  const classes = [];
+  for (const key in variants) {
+    const val = props[key] ?? defaults[key];
+    if (val !== void 0 && variants[key][String(val)]) {
+      classes.push(variants[key][String(val)]);
+    }
+  }
+  return classes.join(" ");
+}
+function resolveCompound(compounds, props) {
+  return compounds.filter((c) => {
+    const { class: _cls, ...conditions } = c;
+    return Object.entries(conditions).every(([k, v]) => props[k] === v);
+  }).map((c) => c.class).join(" ");
+}
+function tw(tag, config = {}) {
+  const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+  const variantKeys = new Set(Object.keys(variants));
+  const propsDefinition = {};
+  for (const key of variantKeys) {
+    propsDefinition[key] = { type: null, default: void 0 };
+  }
+  propsDefinition["class"] = { type: null, default: void 0 };
+  return vue.defineComponent({
+    name: `TwStyled${String(tag).charAt(0).toUpperCase() + String(tag).slice(1)}`,
+    inheritAttrs: false,
+    props: propsDefinition,
+    setup(props, { attrs, slots }) {
+      const className = vue.computed(() => {
+        const variantClasses = resolveVariants(variants, props, defaultVariants);
+        const compoundClasses = resolveCompound(compoundVariants, { ...defaultVariants, ...props });
+        return tailwindMerge.twMerge(
+          base,
+          variantClasses,
+          compoundClasses,
+          props["class"],
+          attrs.class
+        );
+      });
+      return () => {
+        const filteredAttrs = {};
+        for (const key in attrs) {
+          if (!variantKeys.has(key)) {
+            filteredAttrs[key] = attrs[key];
+          }
+        }
+        return vue.h(tag, { ...filteredAttrs, class: className.value }, slots.default?.());
+      };
+    }
+  });
+}
+function cv(config) {
+  return (props = {}) => {
+    const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+    const merged = { ...defaultVariants, ...props };
+    const variantClasses = resolveVariants(variants, merged, defaultVariants);
+    const compoundClasses = resolveCompound(compoundVariants, merged);
+    return tailwindMerge.twMerge(base, variantClasses, compoundClasses, props.class);
+  };
+}
+function extend(component, extraClasses) {
+  return vue.defineComponent({
+    name: `Extended${component.name ?? "Component"}`,
+    inheritAttrs: false,
+    props: { class: { type: null, default: void 0 } },
+    setup(props, { attrs, slots }) {
+      return () => vue.h(
+        component,
+        {
+          ...attrs,
+          class: tailwindMerge.twMerge(extraClasses, props["class"], attrs.class)
+        },
+        slots.default?.()
+      );
+    }
+  });
+}
+var TailwindStyledPlugin = {
+  install(app) {
+    app.config.globalProperties.$tw = tw;
+    app.config.globalProperties.$cv = cv;
+    app.provide("tw", tw);
+    app.provide("cv", cv);
+  }
+};
+var src_default = { tw, cv, extend, TailwindStyledPlugin };
+
+exports.TailwindStyledPlugin = TailwindStyledPlugin;
+exports.cv = cv;
+exports.default = src_default;
+exports.extend = extend;
+exports.tw = tw;
+//# sourceMappingURL=vue.js.map
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/vue/src/index.ts"],"names":["defineComponent","computed","twMerge","h"],"mappings":"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","file":"vue.js","sourcesContent":["/**\n * tailwind-styled-v4 — Vue Adapter\n *\n * Pola seperti `createComponent` di React tapi untuk Vue 3 Composition API.\n * Mendukung: base, variants, defaultVariants, compoundVariants.\n *\n * @example\n * import { tw } from '@tailwind-styled/vue'\n *\n * const Button = tw('button', {\n *   base: 'px-4 py-2 rounded font-medium',\n *   variants: {\n *     intent: {\n *       primary: 'bg-blue-500 text-white hover:bg-blue-600',\n *       danger: 'bg-red-500 text-white hover:bg-red-600',\n *     },\n *     size: { sm: 'h-8 text-sm', md: 'h-10 text-base', lg: 'h-12 text-lg' },\n *   },\n *   defaultVariants: { intent: 'primary', size: 'md' },\n * })\n *\n * // In template:\n * // <Button intent=\"danger\" size=\"lg\">Delete</Button>\n */\n\nimport { computed, defineComponent, h, type Component, type DefineComponent } from \"vue\"\nimport { twMerge } from \"tailwind-merge\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface VueComponentConfig {\n  base?: string\n  variants?: Record<string, Record<string, string>>\n  compoundVariants?: Array<{ class: string; [key: string]: any }>\n  defaultVariants?: Record<string, string>\n}\n\nexport type HtmlTagName =\n  | \"div\"\n  | \"section\"\n  | \"article\"\n  | \"aside\"\n  | \"header\"\n  | \"footer\"\n  | \"main\"\n  | \"nav\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"p\"\n  | \"span\"\n  | \"strong\"\n  | \"em\"\n  | \"a\"\n  | \"button\"\n  | \"input\"\n  | \"textarea\"\n  | \"select\"\n  | \"form\"\n  | \"label\"\n  | \"ul\"\n  | \"ol\"\n  | \"li\"\n  | \"table\"\n  | \"tr\"\n  | \"th\"\n  | \"td\"\n  | \"thead\"\n  | \"tbody\"\n  | \"img\"\n  | \"figure\"\n  | \"figcaption\"\n  | \"blockquote\"\n  | \"code\"\n  | \"pre\"\n  | \"hr\"\n  | \"br\"\n  | \"dialog\"\n  | \"details\"\n  | \"summary\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Variant resolver (sama dengan React adapter)\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction resolveVariants(\n  variants: Record<string, Record<string, string>>,\n  props: Record<string, any>,\n  defaults: Record<string, string> = {}\n): string {\n  const classes: string[] = []\n  for (const key in variants) {\n    const val = props[key] ?? defaults[key]\n    if (val !== undefined && variants[key][String(val)]) {\n      classes.push(variants[key][String(val)])\n    }\n  }\n  return classes.join(\" \")\n}\n\nfunction resolveCompound(\n  compounds: Array<{ class: string; [key: string]: any }>,\n  props: Record<string, any>\n): string {\n  return compounds\n    .filter((c) => {\n      const { class: _cls, ...conditions } = c\n      return Object.entries(conditions).every(([k, v]) => props[k] === v)\n    })\n    .map((c) => c.class)\n    .join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core factory\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Buat Vue component dengan Tailwind class yang terstruktur.\n *\n * @param tag - HTML tag atau Vue component\n * @param config - Konfigurasi base, variants, defaultVariants\n */\nexport function tw<Tag extends HtmlTagName>(\n  tag: Tag,\n  config: VueComponentConfig = {}\n): DefineComponent<any> {\n  const { base = \"\", variants = {}, compoundVariants = [], defaultVariants = {} } = config\n\n  const variantKeys = new Set(Object.keys(variants))\n\n  // Props definition untuk Vue — semua variant key jadi optional prop\n  const propsDefinition: Record<string, { type: null; default: undefined }> = {}\n  for (const key of variantKeys) {\n    propsDefinition[key] = { type: null, default: undefined }\n  }\n  propsDefinition[\"class\"] = { type: null, default: undefined }\n\n  return defineComponent({\n    name: `TwStyled${String(tag).charAt(0).toUpperCase() + String(tag).slice(1)}`,\n    inheritAttrs: false,\n    props: propsDefinition,\n    setup(props, { attrs, slots }) {\n      const className = computed(() => {\n        const variantClasses = resolveVariants(variants, props, defaultVariants)\n        const compoundClasses = resolveCompound(compoundVariants, { ...defaultVariants, ...props })\n        return twMerge(\n          base,\n          variantClasses,\n          compoundClasses,\n          props[\"class\"] as string,\n          attrs.class as string\n        )\n      })\n\n      return () => {\n        // Filter out variant props — jangan diteruskan ke HTML element\n        const filteredAttrs: Record<string, any> = {}\n        for (const key in attrs) {\n          if (!variantKeys.has(key)) {\n            filteredAttrs[key] = attrs[key]\n          }\n        }\n\n        return h(tag as string, { ...filteredAttrs, class: className.value }, slots.default?.())\n      }\n    },\n  })\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cv() — class variant helper (framework-agnostic, sama dengan React)\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Class variant function — returns a class string resolver.\n * Framework-agnostic, bisa dipakai di mana saja.\n *\n * @example\n * const buttonCv = cv({\n *   base: 'px-4 py-2 rounded',\n *   variants: { size: { sm: 'h-8', lg: 'h-12' } },\n *   defaultVariants: { size: 'sm' },\n * })\n *\n * buttonCv({ size: 'lg' }) // 'px-4 py-2 rounded h-12'\n */\nexport function cv(config: VueComponentConfig) {\n  return (props: Record<string, any> = {}) => {\n    const { base = \"\", variants = {}, compoundVariants = [], defaultVariants = {} } = config\n    const merged = { ...defaultVariants, ...props }\n    const variantClasses = resolveVariants(variants, merged, defaultVariants)\n    const compoundClasses = resolveCompound(compoundVariants, merged)\n    return twMerge(base, variantClasses, compoundClasses, props.class)\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Extend — tambahkan class ke komponen yang sudah ada\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Extend komponen Vue yang sudah ada dengan class tambahan.\n *\n * @example\n * const PrimaryButton = extend(Button, 'bg-blue-500 text-white')\n */\nexport function extend(component: Component, extraClasses: string): DefineComponent<any> {\n  return defineComponent({\n    name: `Extended${(component as any).name ?? \"Component\"}`,\n    inheritAttrs: false,\n    props: { class: { type: null, default: undefined } },\n    setup(props, { attrs, slots }) {\n      return () =>\n        h(\n          component,\n          {\n            ...attrs,\n            class: twMerge(extraClasses, props[\"class\"] as string, attrs.class as string),\n          },\n          slots.default?.()\n        )\n    },\n  })\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Plugin Vue\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Vue plugin — daftarkan `tw` sebagai global composable.\n *\n * @example\n * // main.ts\n * import { createApp } from 'vue'\n * import { TailwindStyledPlugin } from '@tailwind-styled/vue'\n * import App from './App.vue'\n *\n * createApp(App).use(TailwindStyledPlugin).mount('#app')\n */\nexport const TailwindStyledPlugin = {\n  install(app: any) {\n    app.config.globalProperties.$tw = tw\n    app.config.globalProperties.$cv = cv\n    app.provide(\"tw\", tw)\n    app.provide(\"cv\", cv)\n  },\n}\n\nexport default { tw, cv, extend, TailwindStyledPlugin }\n"]}

package/dist/vue.mjs

@@ -0,0 +1,96 @@
+import { defineComponent, computed, h } from 'vue';
+import { twMerge } from 'tailwind-merge';
+
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
+function resolveVariants(variants, props, defaults = {}) {
+  const classes = [];
+  for (const key in variants) {
+    const val = props[key] ?? defaults[key];
+    if (val !== void 0 && variants[key][String(val)]) {
+      classes.push(variants[key][String(val)]);
+    }
+  }
+  return classes.join(" ");
+}
+function resolveCompound(compounds, props) {
+  return compounds.filter((c) => {
+    const { class: _cls, ...conditions } = c;
+    return Object.entries(conditions).every(([k, v]) => props[k] === v);
+  }).map((c) => c.class).join(" ");
+}
+function tw(tag, config = {}) {
+  const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+  const variantKeys = new Set(Object.keys(variants));
+  const propsDefinition = {};
+  for (const key of variantKeys) {
+    propsDefinition[key] = { type: null, default: void 0 };
+  }
+  propsDefinition["class"] = { type: null, default: void 0 };
+  return defineComponent({
+    name: `TwStyled${String(tag).charAt(0).toUpperCase() + String(tag).slice(1)}`,
+    inheritAttrs: false,
+    props: propsDefinition,
+    setup(props, { attrs, slots }) {
+      const className = computed(() => {
+        const variantClasses = resolveVariants(variants, props, defaultVariants);
+        const compoundClasses = resolveCompound(compoundVariants, { ...defaultVariants, ...props });
+        return twMerge(
+          base,
+          variantClasses,
+          compoundClasses,
+          props["class"],
+          attrs.class
+        );
+      });
+      return () => {
+        const filteredAttrs = {};
+        for (const key in attrs) {
+          if (!variantKeys.has(key)) {
+            filteredAttrs[key] = attrs[key];
+          }
+        }
+        return h(tag, { ...filteredAttrs, class: className.value }, slots.default?.());
+      };
+    }
+  });
+}
+function cv(config) {
+  return (props = {}) => {
+    const { base = "", variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+    const merged = { ...defaultVariants, ...props };
+    const variantClasses = resolveVariants(variants, merged, defaultVariants);
+    const compoundClasses = resolveCompound(compoundVariants, merged);
+    return twMerge(base, variantClasses, compoundClasses, props.class);
+  };
+}
+function extend(component, extraClasses) {
+  return defineComponent({
+    name: `Extended${component.name ?? "Component"}`,
+    inheritAttrs: false,
+    props: { class: { type: null, default: void 0 } },
+    setup(props, { attrs, slots }) {
+      return () => h(
+        component,
+        {
+          ...attrs,
+          class: twMerge(extraClasses, props["class"], attrs.class)
+        },
+        slots.default?.()
+      );
+    }
+  });
+}
+var TailwindStyledPlugin = {
+  install(app) {
+    app.config.globalProperties.$tw = tw;
+    app.config.globalProperties.$cv = cv;
+    app.provide("tw", tw);
+    app.provide("cv", cv);
+  }
+};
+var src_default = { tw, cv, extend, TailwindStyledPlugin };
+
+export { TailwindStyledPlugin, cv, src_default as default, extend, tw };
+//# sourceMappingURL=vue.mjs.map
+//# sourceMappingURL=vue.mjs.map

package/dist/vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/vue/src/index.ts"],"names":[],"mappings":"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","file":"vue.mjs","sourcesContent":["/**\n * tailwind-styled-v4 — Vue Adapter\n *\n * Pola seperti `createComponent` di React tapi untuk Vue 3 Composition API.\n * Mendukung: base, variants, defaultVariants, compoundVariants.\n *\n * @example\n * import { tw } from '@tailwind-styled/vue'\n *\n * const Button = tw('button', {\n *   base: 'px-4 py-2 rounded font-medium',\n *   variants: {\n *     intent: {\n *       primary: 'bg-blue-500 text-white hover:bg-blue-600',\n *       danger: 'bg-red-500 text-white hover:bg-red-600',\n *     },\n *     size: { sm: 'h-8 text-sm', md: 'h-10 text-base', lg: 'h-12 text-lg' },\n *   },\n *   defaultVariants: { intent: 'primary', size: 'md' },\n * })\n *\n * // In template:\n * // <Button intent=\"danger\" size=\"lg\">Delete</Button>\n */\n\nimport { computed, defineComponent, h, type Component, type DefineComponent } from \"vue\"\nimport { twMerge } from \"tailwind-merge\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface VueComponentConfig {\n  base?: string\n  variants?: Record<string, Record<string, string>>\n  compoundVariants?: Array<{ class: string; [key: string]: any }>\n  defaultVariants?: Record<string, string>\n}\n\nexport type HtmlTagName =\n  | \"div\"\n  | \"section\"\n  | \"article\"\n  | \"aside\"\n  | \"header\"\n  | \"footer\"\n  | \"main\"\n  | \"nav\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"p\"\n  | \"span\"\n  | \"strong\"\n  | \"em\"\n  | \"a\"\n  | \"button\"\n  | \"input\"\n  | \"textarea\"\n  | \"select\"\n  | \"form\"\n  | \"label\"\n  | \"ul\"\n  | \"ol\"\n  | \"li\"\n  | \"table\"\n  | \"tr\"\n  | \"th\"\n  | \"td\"\n  | \"thead\"\n  | \"tbody\"\n  | \"img\"\n  | \"figure\"\n  | \"figcaption\"\n  | \"blockquote\"\n  | \"code\"\n  | \"pre\"\n  | \"hr\"\n  | \"br\"\n  | \"dialog\"\n  | \"details\"\n  | \"summary\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Variant resolver (sama dengan React adapter)\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction resolveVariants(\n  variants: Record<string, Record<string, string>>,\n  props: Record<string, any>,\n  defaults: Record<string, string> = {}\n): string {\n  const classes: string[] = []\n  for (const key in variants) {\n    const val = props[key] ?? defaults[key]\n    if (val !== undefined && variants[key][String(val)]) {\n      classes.push(variants[key][String(val)])\n    }\n  }\n  return classes.join(\" \")\n}\n\nfunction resolveCompound(\n  compounds: Array<{ class: string; [key: string]: any }>,\n  props: Record<string, any>\n): string {\n  return compounds\n    .filter((c) => {\n      const { class: _cls, ...conditions } = c\n      return Object.entries(conditions).every(([k, v]) => props[k] === v)\n    })\n    .map((c) => c.class)\n    .join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core factory\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Buat Vue component dengan Tailwind class yang terstruktur.\n *\n * @param tag - HTML tag atau Vue component\n * @param config - Konfigurasi base, variants, defaultVariants\n */\nexport function tw<Tag extends HtmlTagName>(\n  tag: Tag,\n  config: VueComponentConfig = {}\n): DefineComponent<any> {\n  const { base = \"\", variants = {}, compoundVariants = [], defaultVariants = {} } = config\n\n  const variantKeys = new Set(Object.keys(variants))\n\n  // Props definition untuk Vue — semua variant key jadi optional prop\n  const propsDefinition: Record<string, { type: null; default: undefined }> = {}\n  for (const key of variantKeys) {\n    propsDefinition[key] = { type: null, default: undefined }\n  }\n  propsDefinition[\"class\"] = { type: null, default: undefined }\n\n  return defineComponent({\n    name: `TwStyled${String(tag).charAt(0).toUpperCase() + String(tag).slice(1)}`,\n    inheritAttrs: false,\n    props: propsDefinition,\n    setup(props, { attrs, slots }) {\n      const className = computed(() => {\n        const variantClasses = resolveVariants(variants, props, defaultVariants)\n        const compoundClasses = resolveCompound(compoundVariants, { ...defaultVariants, ...props })\n        return twMerge(\n          base,\n          variantClasses,\n          compoundClasses,\n          props[\"class\"] as string,\n          attrs.class as string\n        )\n      })\n\n      return () => {\n        // Filter out variant props — jangan diteruskan ke HTML element\n        const filteredAttrs: Record<string, any> = {}\n        for (const key in attrs) {\n          if (!variantKeys.has(key)) {\n            filteredAttrs[key] = attrs[key]\n          }\n        }\n\n        return h(tag as string, { ...filteredAttrs, class: className.value }, slots.default?.())\n      }\n    },\n  })\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cv() — class variant helper (framework-agnostic, sama dengan React)\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Class variant function — returns a class string resolver.\n * Framework-agnostic, bisa dipakai di mana saja.\n *\n * @example\n * const buttonCv = cv({\n *   base: 'px-4 py-2 rounded',\n *   variants: { size: { sm: 'h-8', lg: 'h-12' } },\n *   defaultVariants: { size: 'sm' },\n * })\n *\n * buttonCv({ size: 'lg' }) // 'px-4 py-2 rounded h-12'\n */\nexport function cv(config: VueComponentConfig) {\n  return (props: Record<string, any> = {}) => {\n    const { base = \"\", variants = {}, compoundVariants = [], defaultVariants = {} } = config\n    const merged = { ...defaultVariants, ...props }\n    const variantClasses = resolveVariants(variants, merged, defaultVariants)\n    const compoundClasses = resolveCompound(compoundVariants, merged)\n    return twMerge(base, variantClasses, compoundClasses, props.class)\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Extend — tambahkan class ke komponen yang sudah ada\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Extend komponen Vue yang sudah ada dengan class tambahan.\n *\n * @example\n * const PrimaryButton = extend(Button, 'bg-blue-500 text-white')\n */\nexport function extend(component: Component, extraClasses: string): DefineComponent<any> {\n  return defineComponent({\n    name: `Extended${(component as any).name ?? \"Component\"}`,\n    inheritAttrs: false,\n    props: { class: { type: null, default: undefined } },\n    setup(props, { attrs, slots }) {\n      return () =>\n        h(\n          component,\n          {\n            ...attrs,\n            class: twMerge(extraClasses, props[\"class\"] as string, attrs.class as string),\n          },\n          slots.default?.()\n        )\n    },\n  })\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Plugin Vue\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Vue plugin — daftarkan `tw` sebagai global composable.\n *\n * @example\n * // main.ts\n * import { createApp } from 'vue'\n * import { TailwindStyledPlugin } from '@tailwind-styled/vue'\n * import App from './App.vue'\n *\n * createApp(App).use(TailwindStyledPlugin).mount('#app')\n */\nexport const TailwindStyledPlugin = {\n  install(app: any) {\n    app.config.globalProperties.$tw = tw\n    app.config.globalProperties.$cv = cv\n    app.provide(\"tw\", tw)\n    app.provide(\"cv\", cv)\n  },\n}\n\nexport default { tw, cv, extend, TailwindStyledPlugin }\n"]}