tailwind-styled-v4 5.0.0 → 5.0.2

package/dist/storybookAddon.mjs

@@ -0,0 +1,88 @@
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
+// packages/storybook-addon/src/index.ts
+function enumerateVariantProps(matrix) {
+  const keys = Object.keys(matrix);
+  if (keys.length === 0) return [{}];
+  const result = [];
+  function walk(index, current) {
+    if (index >= keys.length) {
+      result.push({ ...current });
+      return;
+    }
+    const key = keys[index];
+    for (const value of matrix[key] ?? []) {
+      current[key] = value;
+      walk(index + 1, current);
+    }
+  }
+  walk(0, {});
+  return result;
+}
+function generateArgTypes(config) {
+  if (!config.variants) return {};
+  const argTypes = {};
+  for (const [variantKey, variantValues] of Object.entries(config.variants)) {
+    const options = Object.keys(variantValues);
+    const defaultValue = config.defaultVariants?.[variantKey];
+    argTypes[variantKey] = {
+      control: { type: "select" },
+      options,
+      defaultValue,
+      description: `Variant: **${variantKey}**`,
+      table: {
+        type: { summary: options.join(" | ") },
+        defaultValue: defaultValue ? { summary: defaultValue } : void 0,
+        category: "Variants"
+      }
+    };
+  }
+  return argTypes;
+}
+function generateDefaultArgs(config) {
+  return { ...config.defaultVariants ?? void 0 };
+}
+function withTailwindStyled(StoryFn, context) {
+  const wrapperClass = context.parameters?.tailwindStyled?.wrapperClass ?? "";
+  const padding = context.parameters?.tailwindStyled?.padding ?? "p-8";
+  if (typeof document !== "undefined") {
+    const wrapper = document.createElement("div");
+    wrapper.className = [padding, wrapperClass].filter(Boolean).join(" ");
+    return wrapper;
+  }
+  return StoryFn();
+}
+function createVariantStoryArgs(config) {
+  if (!config.variants) return { combinations: [{}], matrix: {} };
+  const matrix = {};
+  for (const [key, values] of Object.entries(config.variants)) {
+    matrix[key] = Object.keys(values);
+  }
+  return {
+    combinations: enumerateVariantProps(matrix),
+    matrix
+  };
+}
+function getVariantClass(config, props) {
+  const classes = [];
+  if (config.base) classes.push(config.base);
+  if (config.variants) {
+    for (const [key, values] of Object.entries(config.variants)) {
+      const val = props[key] ?? config.defaultVariants?.[key];
+      if (val && values[val]) classes.push(values[val]);
+    }
+  }
+  if (config.compoundVariants) {
+    for (const compound of config.compoundVariants) {
+      const { class: cls, ...conditions } = compound;
+      if (Object.entries(conditions).every(([k, v]) => props[k] === v)) {
+        classes.push(cls);
+      }
+    }
+  }
+  return classes.join(" ");
+}
+
+export { createVariantStoryArgs, enumerateVariantProps, generateArgTypes, generateDefaultArgs, getVariantClass, withTailwindStyled };
+//# sourceMappingURL=storybookAddon.mjs.map
+//# sourceMappingURL=storybookAddon.mjs.map

package/dist/storybookAddon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/storybook-addon/src/index.ts"],"names":[],"mappings":"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","file":"storybookAddon.mjs","sourcesContent":["/**\n * tailwind-styled-v4 — Storybook Addon\n *\n * Integrasi Storybook untuk komponen tw().\n * Fitur:\n *   - withTailwindStyled decorator: inject className ke story\n *   - generateArgTypes: auto-generate controls dari ComponentConfig\n *   - enumerateVariantProps: buat semua kombinasi variant untuk testing\n *\n * @example\n * // .storybook/preview.ts\n * import { withTailwindStyled } from '@tailwind-styled/storybook-addon'\n * export const decorators = [withTailwindStyled]\n *\n * // Button.stories.ts\n * import { generateArgTypes } from '@tailwind-styled/storybook-addon'\n * import { buttonConfig } from './Button'\n *\n * export default {\n *   title: 'Components/Button',\n *   component: Button,\n *   argTypes: generateArgTypes(buttonConfig),\n * }\n */\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type VariantMatrix = Record<string, Array<string | number | boolean>>\n\nexport interface ComponentConfig {\n  base?: string\n  variants?: Record<string, Record<string, string>>\n  defaultVariants?: Record<string, string>\n  compoundVariants?: Array<{ class: string; [key: string]: any }>\n}\n\n// ─── Variant enumeration (core utility) ──────────────────────────────────────\n\n/**\n * Enumerate semua kombinasi variant dari matrix.\n *\n * @example\n * enumerateVariantProps({ size: ['sm','lg'], intent: ['primary','danger'] })\n * // → [{ size:'sm', intent:'primary' }, { size:'sm', intent:'danger' }, ...]\n */\nexport function enumerateVariantProps(\n  matrix: VariantMatrix\n): Array<Record<string, string | number | boolean>> {\n  const keys = Object.keys(matrix)\n  if (keys.length === 0) return [{}]\n\n  const result: Array<Record<string, string | number | boolean>> = []\n\n  function walk(index: number, current: Record<string, string | number | boolean>) {\n    if (index >= keys.length) {\n      result.push({ ...current })\n      return\n    }\n    const key = keys[index]!\n    for (const value of matrix[key] ?? []) {\n      current[key] = value\n      walk(index + 1, current)\n    }\n  }\n\n  walk(0, {})\n  return result\n}\n\n// ─── Storybook argTypes generator ─────────────────────────────────────────────\n\n/**\n * Generate Storybook argTypes dari ComponentConfig.\n * Otomatis membuat kontrol dropdown untuk setiap variant.\n *\n * @example\n * export default {\n *   title: 'Components/Button',\n *   argTypes: generateArgTypes({\n *     variants: {\n *       intent: { primary: '...', danger: '...' },\n *       size: { sm: '...', md: '...', lg: '...' },\n *     },\n *     defaultVariants: { intent: 'primary', size: 'md' },\n *   })\n * }\n */\nexport function generateArgTypes(config: ComponentConfig): Record<string, unknown> {\n  if (!config.variants) return {}\n\n  const argTypes: Record<string, unknown> = {}\n\n  for (const [variantKey, variantValues] of Object.entries(config.variants)) {\n    const options = Object.keys(variantValues)\n    const defaultValue = config.defaultVariants?.[variantKey]\n\n    argTypes[variantKey] = {\n      control: { type: \"select\" },\n      options,\n      defaultValue,\n      description: `Variant: **${variantKey}**`,\n      table: {\n        type: { summary: options.join(\" | \") },\n        defaultValue: defaultValue ? { summary: defaultValue } : undefined,\n        category: \"Variants\",\n      },\n    }\n  }\n\n  return argTypes\n}\n\n/**\n * Generate default args dari ComponentConfig.\n *\n * @example\n * export default {\n *   args: generateDefaultArgs(buttonConfig),\n * }\n */\nexport function generateDefaultArgs(config: ComponentConfig): Record<string, string> {\n  return { ...(config.defaultVariants ?? undefined) }\n}\n\n// ─── Storybook decorator ───────────────────────────────────────────────────────\n\n/**\n * Storybook decorator yang inject className dari args ke story.\n * Compatible dengan Storybook 7+ (CSF3).\n *\n * @example\n * // .storybook/preview.ts\n * import { withTailwindStyled } from '@tailwind-styled/storybook-addon'\n * export const decorators = [withTailwindStyled]\n */\nexport function withTailwindStyled(\n  StoryFn: () => unknown,\n  context: {\n    args?: Record<string, unknown>\n    parameters?: { tailwindStyled?: { wrapperClass?: string; padding?: string } }\n  }\n): unknown {\n  const wrapperClass = context.parameters?.tailwindStyled?.wrapperClass ?? \"\"\n  const padding = context.parameters?.tailwindStyled?.padding ?? \"p-8\"\n\n  // Wrap story dalam div dengan class dari parameters\n  // Ini memungkinkan dark mode testing, custom backgrounds, dll\n  if (typeof document !== \"undefined\") {\n    const wrapper = document.createElement(\"div\")\n    wrapper.className = [padding, wrapperClass].filter(Boolean).join(\" \")\n    return wrapper\n  }\n\n  return StoryFn()\n}\n\n// ─── Story template helpers ────────────────────────────────────────────────────\n\n/**\n * Buat \"All Variants\" story yang menampilkan semua kombinasi variant.\n * Berguna untuk visual regression testing.\n *\n * @example\n * export const AllVariants = createAllVariantsStory(Button, buttonConfig)\n */\nexport function createVariantStoryArgs(config: ComponentConfig): {\n  combinations: Array<Record<string, string | number | boolean>>\n  matrix: VariantMatrix\n} {\n  if (!config.variants) return { combinations: [{}], matrix: {} }\n\n  const matrix: VariantMatrix = {}\n  for (const [key, values] of Object.entries(config.variants)) {\n    matrix[key] = Object.keys(values)\n  }\n\n  return {\n    combinations: enumerateVariantProps(matrix),\n    matrix,\n  }\n}\n\n/**\n * Extract class string untuk variant props dari config.\n * Berguna untuk manual class lookup di stories.\n *\n * @example\n * const cls = getVariantClass(buttonConfig, { intent: 'primary', size: 'lg' })\n * // → 'bg-blue-500 text-white h-12 text-lg'\n */\nexport function getVariantClass(config: ComponentConfig, props: Record<string, string>): string {\n  const classes: string[] = []\n\n  if (config.base) classes.push(config.base)\n\n  if (config.variants) {\n    for (const [key, values] of Object.entries(config.variants)) {\n      const val = props[key] ?? config.defaultVariants?.[key]\n      if (val && values[val]) classes.push(values[val])\n    }\n  }\n\n  if (config.compoundVariants) {\n    for (const compound of config.compoundVariants) {\n      const { class: cls, ...conditions } = compound\n      if (Object.entries(conditions).every(([k, v]) => props[k] === v)) {\n        classes.push(cls)\n      }\n    }\n  }\n\n  return classes.join(\" \")\n}\n"]}

package/dist/svelte.d.mts

@@ -0,0 +1,114 @@
+/**
+ * tailwind-styled-v4 — Svelte Adapter
+ *
+ * Svelte 4+ adapter menggunakan action dan store pattern.
+ * Kompatibel dengan Svelte 5 runes mode.
+ *
+ * Dua pola yang didukung:
+ * 1. `tw()` — buat class string resolver untuk dipakai di template
+ * 2. `createSvelteComponent()` — buat Svelte component via Svelte API
+ *
+ * @example
+ * <!-- Pola 1: tw() sebagai class resolver -->
+ * <script>
+ *   import { cv } from '@tailwind-styled/svelte'
+ *
+ *   const buttonClass = cv({
+ *     base: 'px-4 py-2 rounded font-medium',
+ *     variants: {
+ *       intent: { primary: 'bg-blue-500 text-white', danger: 'bg-red-500 text-white' },
+ *       size: { sm: 'h-8 text-sm', lg: 'h-12 text-lg' },
+ *     },
+ *     defaultVariants: { intent: 'primary', size: 'sm' },
+ *   })
+ *
+ *   export let intent = 'primary'
+ *   export let size = 'sm'
+ * </script>
+ *
+ * <button class={buttonClass({ intent, size })}>
+ *   <slot />
+ * </button>
+ */
+interface SvelteComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: any;
+    }>;
+    defaultVariants?: Record<string, string>;
+}
+/**
+ * Class variant resolver — pola utama untuk Svelte.
+ * Returns fungsi yang menerima props dan mengembalikan class string.
+ *
+ * Gunakan ini di `<script>` block, lalu panggil di template.
+ *
+ * @example
+ * const button = cv({
+ *   base: 'px-4 py-2 rounded',
+ *   variants: { size: { sm: 'h-8', lg: 'h-12' } },
+ * })
+ *
+ * // Di template: class={button({ size: 'lg' })}
+ */
+declare function cv(config: SvelteComponentConfig): (props?: Record<string, any>) => string;
+/**
+ * Simple class merger — berguna untuk merge class dinamis.
+ *
+ * @example
+ * import { tw } from '@tailwind-styled/svelte'
+ *
+ * // Merge class string
+ * const cls = tw('px-4 py-2', isActive && 'bg-blue-500', className)
+ */
+declare function tw(...classes: Array<string | boolean | null | undefined>): string;
+/**
+ * Svelte action untuk menerapkan class dinamis.
+ *
+ * @example
+ * <script>
+ *   import { styled } from '@tailwind-styled/svelte'
+ *   const buttonConfig = { base: 'px-4 py-2', variants: { size: { sm: 'h-8', lg: 'h-12' } } }
+ * </script>
+ *
+ * <button use:styled={{ config: buttonConfig, props: { size: 'lg' } }}>
+ *   Click me
+ * </button>
+ */
+declare function styled(node: HTMLElement, { config, props }: {
+    config: SvelteComponentConfig;
+    props?: Record<string, any>;
+}): {
+    update: ({ config: cfg, props: p, }: {
+        config: SvelteComponentConfig;
+        props?: Record<string, any>;
+    }) => void;
+    destroy(): void;
+};
+/**
+ * Svelte 5 runes-compatible variant factory.
+ * Mengembalikan reactive class string menggunakan $derived pattern.
+ *
+ * @example
+ * // Dalam Svelte 5 component:
+ * const { className, variantProps } = createVariants({
+ *   base: 'px-4 py-2',
+ *   variants: { size: { sm: 'h-8', lg: 'h-12' } },
+ * }, () => ({ size: currentSize }))
+ *
+ * // className adalah fungsi yang return class string terkini
+ */
+declare function createVariants(config: SvelteComponentConfig, getProps: () => Record<string, any>): {
+    className: () => string;
+    config: SvelteComponentConfig;
+};
+declare const _default: {
+    cv: typeof cv;
+    tw: typeof tw;
+    styled: typeof styled;
+    createVariants: typeof createVariants;
+};
+
+export { type SvelteComponentConfig, createVariants, cv, _default as default, styled, tw };

package/dist/svelte.d.ts

@@ -0,0 +1,114 @@
+/**
+ * tailwind-styled-v4 — Svelte Adapter
+ *
+ * Svelte 4+ adapter menggunakan action dan store pattern.
+ * Kompatibel dengan Svelte 5 runes mode.
+ *
+ * Dua pola yang didukung:
+ * 1. `tw()` — buat class string resolver untuk dipakai di template
+ * 2. `createSvelteComponent()` — buat Svelte component via Svelte API
+ *
+ * @example
+ * <!-- Pola 1: tw() sebagai class resolver -->
+ * <script>
+ *   import { cv } from '@tailwind-styled/svelte'
+ *
+ *   const buttonClass = cv({
+ *     base: 'px-4 py-2 rounded font-medium',
+ *     variants: {
+ *       intent: { primary: 'bg-blue-500 text-white', danger: 'bg-red-500 text-white' },
+ *       size: { sm: 'h-8 text-sm', lg: 'h-12 text-lg' },
+ *     },
+ *     defaultVariants: { intent: 'primary', size: 'sm' },
+ *   })
+ *
+ *   export let intent = 'primary'
+ *   export let size = 'sm'
+ * </script>
+ *
+ * <button class={buttonClass({ intent, size })}>
+ *   <slot />
+ * </button>
+ */
+interface SvelteComponentConfig {
+    base?: string;
+    variants?: Record<string, Record<string, string>>;
+    compoundVariants?: Array<{
+        class: string;
+        [key: string]: any;
+    }>;
+    defaultVariants?: Record<string, string>;
+}
+/**
+ * Class variant resolver — pola utama untuk Svelte.
+ * Returns fungsi yang menerima props dan mengembalikan class string.
+ *
+ * Gunakan ini di `<script>` block, lalu panggil di template.
+ *
+ * @example
+ * const button = cv({
+ *   base: 'px-4 py-2 rounded',
+ *   variants: { size: { sm: 'h-8', lg: 'h-12' } },
+ * })
+ *
+ * // Di template: class={button({ size: 'lg' })}
+ */
+declare function cv(config: SvelteComponentConfig): (props?: Record<string, any>) => string;
+/**
+ * Simple class merger — berguna untuk merge class dinamis.
+ *
+ * @example
+ * import { tw } from '@tailwind-styled/svelte'
+ *
+ * // Merge class string
+ * const cls = tw('px-4 py-2', isActive && 'bg-blue-500', className)
+ */
+declare function tw(...classes: Array<string | boolean | null | undefined>): string;
+/**
+ * Svelte action untuk menerapkan class dinamis.
+ *
+ * @example
+ * <script>
+ *   import { styled } from '@tailwind-styled/svelte'
+ *   const buttonConfig = { base: 'px-4 py-2', variants: { size: { sm: 'h-8', lg: 'h-12' } } }
+ * </script>
+ *
+ * <button use:styled={{ config: buttonConfig, props: { size: 'lg' } }}>
+ *   Click me
+ * </button>
+ */
+declare function styled(node: HTMLElement, { config, props }: {
+    config: SvelteComponentConfig;
+    props?: Record<string, any>;
+}): {
+    update: ({ config: cfg, props: p, }: {
+        config: SvelteComponentConfig;
+        props?: Record<string, any>;
+    }) => void;
+    destroy(): void;
+};
+/**
+ * Svelte 5 runes-compatible variant factory.
+ * Mengembalikan reactive class string menggunakan $derived pattern.
+ *
+ * @example
+ * // Dalam Svelte 5 component:
+ * const { className, variantProps } = createVariants({
+ *   base: 'px-4 py-2',
+ *   variants: { size: { sm: 'h-8', lg: 'h-12' } },
+ * }, () => ({ size: currentSize }))
+ *
+ * // className adalah fungsi yang return class string terkini
+ */
+declare function createVariants(config: SvelteComponentConfig, getProps: () => Record<string, any>): {
+    className: () => string;
+    config: SvelteComponentConfig;
+};
+declare const _default: {
+    cv: typeof cv;
+    tw: typeof tw;
+    styled: typeof styled;
+    createVariants: typeof createVariants;
+};
+
+export { type SvelteComponentConfig, createVariants, cv, _default as default, styled, tw };

package/dist/svelte.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 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 tw(...classes) {
+  return tailwindMerge.twMerge(...classes.filter(Boolean));
+}
+function styled(node, { config, props = {} }) {
+  function update({
+    config: cfg,
+    props: p = {}
+  }) {
+    const classes = cv(cfg)(p);
+    node.className = classes;
+  }
+  update({ config, props });
+  return {
+    update,
+    destroy() {
+    }
+  };
+}
+function createVariants(config, getProps) {
+  const resolver = cv(config);
+  return {
+    className: () => resolver(getProps()),
+    config
+  };
+}
+var src_default = { cv, tw, styled, createVariants };
+
+exports.createVariants = createVariants;
+exports.cv = cv;
+exports.default = src_default;
+exports.styled = styled;
+exports.tw = tw;
+//# sourceMappingURL=svelte.js.map
+//# sourceMappingURL=svelte.js.map

package/dist/svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/svelte/src/index.ts"],"names":["twMerge"],"mappings":";;;;;;;;AAkDA,SAAS,eAAA,CACP,QAAA,EACA,KAAA,EACA,QAAA,GAAmC,EAAC,EAC5B;AACR,EAAA,MAAM,UAAoB,EAAC;AAC3B,EAAA,KAAA,MAAW,OAAO,QAAA,EAAU;AAC1B,IAAA,MAAM,GAAA,GAAM,KAAA,CAAM,GAAG,CAAA,IAAK,SAAS,GAAG,CAAA;AACtC,IAAA,IAAI,GAAA,KAAQ,UAAa,QAAA,CAAS,GAAG,IAAI,MAAA,CAAO,GAAG,CAAC,CAAA,EAAG;AACrD,MAAA,OAAA,CAAQ,KAAK,QAAA,CAAS,GAAG,EAAE,MAAA,CAAO,GAAG,CAAC,CAAC,CAAA;AAAA,IACzC;AAAA,EACF;AACA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;AAEA,SAAS,eAAA,CACP,WACA,KAAA,EACQ;AACR,EAAA,OAAO,SAAA,CACJ,MAAA,CAAO,CAAC,CAAA,KAAM;AACb,IAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,GAAG,YAAW,GAAI,CAAA;AACvC,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,UAAU,CAAA,CAAE,KAAA,CAAM,CAAC,CAAC,CAAA,EAAG,CAAC,CAAA,KAAM,KAAA,CAAM,CAAC,MAAM,CAAC,CAAA;AAAA,EACpE,CAAC,EACA,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,KAAK,CAAA,CAClB,IAAA,CAAK,GAAG,CAAA;AACb;AAoBO,SAAS,GAAG,MAAA,EAA+B;AAChD,EAAA,OAAO,CAAC,KAAA,GAA6B,EAAC,KAAM;AAC1C,IAAA,MAAM,EAAE,IAAA,GAAO,EAAA,EAAI,QAAA,GAAW,EAAC,EAAG,gBAAA,GAAmB,EAAC,EAAG,eAAA,GAAkB,EAAC,EAAE,GAAI,MAAA;AAElF,IAAA,MAAM,MAAA,GAAS,EAAE,GAAG,eAAA,EAAiB,GAAG,KAAA,EAAM;AAC9C,IAAA,MAAM,cAAA,GAAiB,eAAA,CAAgB,QAAA,EAAU,MAAA,EAAQ,eAAe,CAAA;AACxE,IAAA,MAAM,eAAA,GAAkB,eAAA,CAAgB,gBAAA,EAAkB,MAAM,CAAA;AAEhE,IAAA,OAAOA,qBAAA,CAAQ,IAAA,EAAM,cAAA,EAAgB,eAAA,EAAiB,MAAM,KAAK,CAAA;AAAA,EACnE,CAAA;AACF;AAeO,SAAS,MAAM,OAAA,EAA6D;AACjF,EAAA,OAAOA,qBAAA,CAAQ,GAAI,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAc,CAAA;AACzD;AAmBO,SAAS,OACd,IAAA,EACA,EAAE,QAAQ,KAAA,GAAQ,IAAG,EACrB;AAGA,EAAA,SAAS,MAAA,CAAO;AAAA,IACd,MAAA,EAAQ,GAAA;AAAA,IACR,KAAA,EAAO,IAAI;AAAC,GACd,EAGG;AACD,IAAA,MAAM,OAAA,GAAU,EAAA,CAAG,GAAG,CAAA,CAAE,CAAC,CAAA;AAEzB,IAAA,IAAA,CAAK,SAAA,GAAY,OAAA;AAAA,EACnB;AAGA,EAAA,MAAA,CAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,CAAA;AAExB,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,OAAA,GAAU;AAAA,IAEV;AAAA,GACF;AACF;AAmBO,SAAS,cAAA,CAAe,QAA+B,QAAA,EAAqC;AACjG,EAAA,MAAM,QAAA,GAAW,GAAG,MAAM,CAAA;AAE1B,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,MAAM,QAAA,CAAS,QAAA,EAAU,CAAA;AAAA,IACpC;AAAA,GACF;AACF;AAEA,IAAO,WAAA,GAAQ,EAAE,EAAA,EAAI,EAAA,EAAI,QAAQ,cAAA","file":"svelte.js","sourcesContent":["/**\n * tailwind-styled-v4 — Svelte Adapter\n *\n * Svelte 4+ adapter menggunakan action dan store pattern.\n * Kompatibel dengan Svelte 5 runes mode.\n *\n * Dua pola yang didukung:\n * 1. `tw()` — buat class string resolver untuk dipakai di template\n * 2. `createSvelteComponent()` — buat Svelte component via Svelte API\n *\n * @example\n * <!-- Pola 1: tw() sebagai class resolver -->\n * <script>\n *   import { cv } from '@tailwind-styled/svelte'\n *\n *   const buttonClass = cv({\n *     base: 'px-4 py-2 rounded font-medium',\n *     variants: {\n *       intent: { primary: 'bg-blue-500 text-white', danger: 'bg-red-500 text-white' },\n *       size: { sm: 'h-8 text-sm', lg: 'h-12 text-lg' },\n *     },\n *     defaultVariants: { intent: 'primary', size: 'sm' },\n *   })\n *\n *   export let intent = 'primary'\n *   export let size = 'sm'\n * </script>\n *\n * <button class={buttonClass({ intent, size })}>\n *   <slot />\n * </button>\n */\n\nimport { twMerge } from \"tailwind-merge\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SvelteComponentConfig {\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\n// ─────────────────────────────────────────────────────────────────────────────\n// Variant resolvers (framework-agnostic core)\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// cv() — Class Variant (utama untuk Svelte)\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Class variant resolver — pola utama untuk Svelte.\n * Returns fungsi yang menerima props dan mengembalikan class string.\n *\n * Gunakan ini di `<script>` block, lalu panggil di template.\n *\n * @example\n * const button = cv({\n *   base: 'px-4 py-2 rounded',\n *   variants: { size: { sm: 'h-8', lg: 'h-12' } },\n * })\n *\n * // Di template: class={button({ size: 'lg' })}\n */\nexport function cv(config: SvelteComponentConfig) {\n  return (props: Record<string, any> = {}) => {\n    const { base = \"\", variants = {}, compoundVariants = [], defaultVariants = {} } = config\n\n    const merged = { ...defaultVariants, ...props }\n    const variantClasses = resolveVariants(variants, merged, defaultVariants)\n    const compoundClasses = resolveCompound(compoundVariants, merged)\n\n    return twMerge(base, variantClasses, compoundClasses, props.class)\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// tw() — Simple class merger dengan template literal support\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Simple class merger — berguna untuk merge class dinamis.\n *\n * @example\n * import { tw } from '@tailwind-styled/svelte'\n *\n * // Merge class string\n * const cls = tw('px-4 py-2', isActive && 'bg-blue-500', className)\n */\nexport function tw(...classes: Array<string | boolean | null | undefined>): string {\n  return twMerge(...(classes.filter(Boolean) as string[]))\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Svelte action — use:styled\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Svelte action untuk menerapkan class dinamis.\n *\n * @example\n * <script>\n *   import { styled } from '@tailwind-styled/svelte'\n *   const buttonConfig = { base: 'px-4 py-2', variants: { size: { sm: 'h-8', lg: 'h-12' } } }\n * </script>\n *\n * <button use:styled={{ config: buttonConfig, props: { size: 'lg' } }}>\n *   Click me\n * </button>\n */\nexport function styled(\n  node: HTMLElement,\n  { config, props = {} }: { config: SvelteComponentConfig; props?: Record<string, any> }\n) {\n  const _resolver = cv(config)\n\n  function update({\n    config: cfg,\n    props: p = {},\n  }: {\n    config: SvelteComponentConfig\n    props?: Record<string, any>\n  }) {\n    const classes = cv(cfg)(p)\n    // Hapus class lama yang dikelola action, tambah yang baru\n    node.className = classes\n  }\n\n  // Apply initial classes\n  update({ config, props })\n\n  return {\n    update,\n    destroy() {\n      // Cleanup tidak diperlukan\n    },\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createVariants() — Svelte 5 runes compatible\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Svelte 5 runes-compatible variant factory.\n * Mengembalikan reactive class string menggunakan $derived pattern.\n *\n * @example\n * // Dalam Svelte 5 component:\n * const { className, variantProps } = createVariants({\n *   base: 'px-4 py-2',\n *   variants: { size: { sm: 'h-8', lg: 'h-12' } },\n * }, () => ({ size: currentSize }))\n *\n * // className adalah fungsi yang return class string terkini\n */\nexport function createVariants(config: SvelteComponentConfig, getProps: () => Record<string, any>) {\n  const resolver = cv(config)\n\n  return {\n    className: () => resolver(getProps()),\n    config,\n  }\n}\n\nexport default { cv, tw, styled, createVariants }\n"]}

package/dist/svelte.mjs

@@ -0,0 +1,59 @@
+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 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 tw(...classes) {
+  return twMerge(...classes.filter(Boolean));
+}
+function styled(node, { config, props = {} }) {
+  function update({
+    config: cfg,
+    props: p = {}
+  }) {
+    const classes = cv(cfg)(p);
+    node.className = classes;
+  }
+  update({ config, props });
+  return {
+    update,
+    destroy() {
+    }
+  };
+}
+function createVariants(config, getProps) {
+  const resolver = cv(config);
+  return {
+    className: () => resolver(getProps()),
+    config
+  };
+}
+var src_default = { cv, tw, styled, createVariants };
+
+export { createVariants, cv, src_default as default, styled, tw };
+//# sourceMappingURL=svelte.mjs.map
+//# sourceMappingURL=svelte.mjs.map

package/dist/svelte.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/svelte/src/index.ts"],"names":[],"mappings":";;;;AAkDA,SAAS,eAAA,CACP,QAAA,EACA,KAAA,EACA,QAAA,GAAmC,EAAC,EAC5B;AACR,EAAA,MAAM,UAAoB,EAAC;AAC3B,EAAA,KAAA,MAAW,OAAO,QAAA,EAAU;AAC1B,IAAA,MAAM,GAAA,GAAM,KAAA,CAAM,GAAG,CAAA,IAAK,SAAS,GAAG,CAAA;AACtC,IAAA,IAAI,GAAA,KAAQ,UAAa,QAAA,CAAS,GAAG,IAAI,MAAA,CAAO,GAAG,CAAC,CAAA,EAAG;AACrD,MAAA,OAAA,CAAQ,KAAK,QAAA,CAAS,GAAG,EAAE,MAAA,CAAO,GAAG,CAAC,CAAC,CAAA;AAAA,IACzC;AAAA,EACF;AACA,EAAA,OAAO,OAAA,CAAQ,KAAK,GAAG,CAAA;AACzB;AAEA,SAAS,eAAA,CACP,WACA,KAAA,EACQ;AACR,EAAA,OAAO,SAAA,CACJ,MAAA,CAAO,CAAC,CAAA,KAAM;AACb,IAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,GAAG,YAAW,GAAI,CAAA;AACvC,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,UAAU,CAAA,CAAE,KAAA,CAAM,CAAC,CAAC,CAAA,EAAG,CAAC,CAAA,KAAM,KAAA,CAAM,CAAC,MAAM,CAAC,CAAA;AAAA,EACpE,CAAC,EACA,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,KAAK,CAAA,CAClB,IAAA,CAAK,GAAG,CAAA;AACb;AAoBO,SAAS,GAAG,MAAA,EAA+B;AAChD,EAAA,OAAO,CAAC,KAAA,GAA6B,EAAC,KAAM;AAC1C,IAAA,MAAM,EAAE,IAAA,GAAO,EAAA,EAAI,QAAA,GAAW,EAAC,EAAG,gBAAA,GAAmB,EAAC,EAAG,eAAA,GAAkB,EAAC,EAAE,GAAI,MAAA;AAElF,IAAA,MAAM,MAAA,GAAS,EAAE,GAAG,eAAA,EAAiB,GAAG,KAAA,EAAM;AAC9C,IAAA,MAAM,cAAA,GAAiB,eAAA,CAAgB,QAAA,EAAU,MAAA,EAAQ,eAAe,CAAA;AACxE,IAAA,MAAM,eAAA,GAAkB,eAAA,CAAgB,gBAAA,EAAkB,MAAM,CAAA;AAEhE,IAAA,OAAO,OAAA,CAAQ,IAAA,EAAM,cAAA,EAAgB,eAAA,EAAiB,MAAM,KAAK,CAAA;AAAA,EACnE,CAAA;AACF;AAeO,SAAS,MAAM,OAAA,EAA6D;AACjF,EAAA,OAAO,OAAA,CAAQ,GAAI,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAc,CAAA;AACzD;AAmBO,SAAS,OACd,IAAA,EACA,EAAE,QAAQ,KAAA,GAAQ,IAAG,EACrB;AAGA,EAAA,SAAS,MAAA,CAAO;AAAA,IACd,MAAA,EAAQ,GAAA;AAAA,IACR,KAAA,EAAO,IAAI;AAAC,GACd,EAGG;AACD,IAAA,MAAM,OAAA,GAAU,EAAA,CAAG,GAAG,CAAA,CAAE,CAAC,CAAA;AAEzB,IAAA,IAAA,CAAK,SAAA,GAAY,OAAA;AAAA,EACnB;AAGA,EAAA,MAAA,CAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,CAAA;AAExB,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,OAAA,GAAU;AAAA,IAEV;AAAA,GACF;AACF;AAmBO,SAAS,cAAA,CAAe,QAA+B,QAAA,EAAqC;AACjG,EAAA,MAAM,QAAA,GAAW,GAAG,MAAM,CAAA;AAE1B,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,MAAM,QAAA,CAAS,QAAA,EAAU,CAAA;AAAA,IACpC;AAAA,GACF;AACF;AAEA,IAAO,WAAA,GAAQ,EAAE,EAAA,EAAI,EAAA,EAAI,QAAQ,cAAA","file":"svelte.mjs","sourcesContent":["/**\n * tailwind-styled-v4 — Svelte Adapter\n *\n * Svelte 4+ adapter menggunakan action dan store pattern.\n * Kompatibel dengan Svelte 5 runes mode.\n *\n * Dua pola yang didukung:\n * 1. `tw()` — buat class string resolver untuk dipakai di template\n * 2. `createSvelteComponent()` — buat Svelte component via Svelte API\n *\n * @example\n * <!-- Pola 1: tw() sebagai class resolver -->\n * <script>\n *   import { cv } from '@tailwind-styled/svelte'\n *\n *   const buttonClass = cv({\n *     base: 'px-4 py-2 rounded font-medium',\n *     variants: {\n *       intent: { primary: 'bg-blue-500 text-white', danger: 'bg-red-500 text-white' },\n *       size: { sm: 'h-8 text-sm', lg: 'h-12 text-lg' },\n *     },\n *     defaultVariants: { intent: 'primary', size: 'sm' },\n *   })\n *\n *   export let intent = 'primary'\n *   export let size = 'sm'\n * </script>\n *\n * <button class={buttonClass({ intent, size })}>\n *   <slot />\n * </button>\n */\n\nimport { twMerge } from \"tailwind-merge\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SvelteComponentConfig {\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\n// ─────────────────────────────────────────────────────────────────────────────\n// Variant resolvers (framework-agnostic core)\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// cv() — Class Variant (utama untuk Svelte)\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Class variant resolver — pola utama untuk Svelte.\n * Returns fungsi yang menerima props dan mengembalikan class string.\n *\n * Gunakan ini di `<script>` block, lalu panggil di template.\n *\n * @example\n * const button = cv({\n *   base: 'px-4 py-2 rounded',\n *   variants: { size: { sm: 'h-8', lg: 'h-12' } },\n * })\n *\n * // Di template: class={button({ size: 'lg' })}\n */\nexport function cv(config: SvelteComponentConfig) {\n  return (props: Record<string, any> = {}) => {\n    const { base = \"\", variants = {}, compoundVariants = [], defaultVariants = {} } = config\n\n    const merged = { ...defaultVariants, ...props }\n    const variantClasses = resolveVariants(variants, merged, defaultVariants)\n    const compoundClasses = resolveCompound(compoundVariants, merged)\n\n    return twMerge(base, variantClasses, compoundClasses, props.class)\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// tw() — Simple class merger dengan template literal support\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Simple class merger — berguna untuk merge class dinamis.\n *\n * @example\n * import { tw } from '@tailwind-styled/svelte'\n *\n * // Merge class string\n * const cls = tw('px-4 py-2', isActive && 'bg-blue-500', className)\n */\nexport function tw(...classes: Array<string | boolean | null | undefined>): string {\n  return twMerge(...(classes.filter(Boolean) as string[]))\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Svelte action — use:styled\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Svelte action untuk menerapkan class dinamis.\n *\n * @example\n * <script>\n *   import { styled } from '@tailwind-styled/svelte'\n *   const buttonConfig = { base: 'px-4 py-2', variants: { size: { sm: 'h-8', lg: 'h-12' } } }\n * </script>\n *\n * <button use:styled={{ config: buttonConfig, props: { size: 'lg' } }}>\n *   Click me\n * </button>\n */\nexport function styled(\n  node: HTMLElement,\n  { config, props = {} }: { config: SvelteComponentConfig; props?: Record<string, any> }\n) {\n  const _resolver = cv(config)\n\n  function update({\n    config: cfg,\n    props: p = {},\n  }: {\n    config: SvelteComponentConfig\n    props?: Record<string, any>\n  }) {\n    const classes = cv(cfg)(p)\n    // Hapus class lama yang dikelola action, tambah yang baru\n    node.className = classes\n  }\n\n  // Apply initial classes\n  update({ config, props })\n\n  return {\n    update,\n    destroy() {\n      // Cleanup tidak diperlukan\n    },\n  }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createVariants() — Svelte 5 runes compatible\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Svelte 5 runes-compatible variant factory.\n * Mengembalikan reactive class string menggunakan $derived pattern.\n *\n * @example\n * // Dalam Svelte 5 component:\n * const { className, variantProps } = createVariants({\n *   base: 'px-4 py-2',\n *   variants: { size: { sm: 'h-8', lg: 'h-12' } },\n * }, () => ({ size: currentSize }))\n *\n * // className adalah fungsi yang return class string terkini\n */\nexport function createVariants(config: SvelteComponentConfig, getProps: () => Record<string, any>) {\n  const resolver = cv(config)\n\n  return {\n    className: () => resolver(getProps()),\n    config,\n  }\n}\n\nexport default { cv, tw, styled, createVariants }\n"]}