tailwind-styled-v4 4.0.0 → 5.0.0

package/dist/plugins.d.cts

@@ -1,231 +0,0 @@
-/**
- * tailwind-styled-v4 — Official Plugins
- *
- * 3 plugin resmi sebagai reference implementasi ecosystem.
- * Bisa dipakai langsung atau dijadikan template buat community plugins.
- *
- * Usage:
- *   import { pluginAnimation, pluginTokens, pluginTypography } from "tailwind-styled-v4/plugins"
- *
- *   withTailwindStyled({
- *     plugins: [
- *       pluginAnimation(),
- *       pluginTokens({ primary: "#3b82f6", secondary: "#6366f1" }),
- *       pluginTypography(),
- *     ]
- *   })(nextConfig)
- *
- * Atau standalone:
- *   import { use } from "tailwind-styled-v4/plugin"
- *   use(pluginAnimation())
- */
-
-interface AnimationPluginOptions {
-    /** Prefix untuk generated animation classes. Default: "tw-anim" */
-    prefix?: string;
-    /** Tambahkan reduced-motion safe variants. Default: true */
-    reducedMotion?: boolean;
-}
-/**
- * Official animation plugin.
- *
- * Adds:
- *   - `enter` variant → apply on mount animation
- *   - `exit` variant → apply on unmount animation
- *   - `motion-safe:` → only animate if prefers-reduced-motion: no-preference
- *   - Preset utility classes: `animate-fade-in`, `animate-slide-up`, etc.
- *
- * @example
- * use(pluginAnimation())
- *
- * const Card = tw.div`p-4 animate-fade-in`
- * const Modal = tw.div`animate-scale-in fixed inset-0`
- */
-declare function pluginAnimation(opts?: AnimationPluginOptions): TwPlugin;
-interface TokensPluginOptions {
-    /** Color tokens */
-    colors?: Record<string, string>;
-    /** Spacing tokens (mapped to --spacing-*) */
-    spacing?: Record<string, string>;
-    /** Typography tokens */
-    fonts?: Record<string, string>;
-    /** Border radius tokens */
-    radii?: Record<string, string>;
-    /** Shadow tokens */
-    shadows?: Record<string, string>;
-    /** Custom tokens (any group) */
-    custom?: Record<string, Record<string, string>>;
-    /** Generate utility classes. Default: true */
-    generateUtilities?: boolean;
-}
-/**
- * Official design token plugin.
- *
- * Generates CSS variables from your token map + optional utility classes.
- *
- * @example
- * use(pluginTokens({
- *   colors: {
- *     primary:   "#3b82f6",
- *     secondary: "#6366f1",
- *     danger:    "#ef4444",
- *   },
- *   fonts: {
- *     sans: "InterVariable, system-ui, sans-serif",
- *   },
- * }))
- *
- * // Then use in components:
- * const Button = tw.button`bg-primary text-white hover:bg-primary-hover`
- * // → bg-[var(--color-primary)] etc.
- */
-declare function pluginTokens(opts?: TokensPluginOptions): TwPlugin;
-interface TypographyPluginOptions {
-    /** Default prose text color. Default: "inherit" */
-    color?: string;
-    /** Default prose font family. Default: "inherit" */
-    fontFamily?: string;
-    /** Max width for prose container. Default: "65ch" */
-    maxWidth?: string;
-}
-/**
- * Official typography plugin.
- *
- * Adds `prose` utility class for rich text content (like @tailwindcss/typography).
- * Zero external dependency.
- *
- * @example
- * use(pluginTypography())
- *
- * const Article = tw.article`prose prose-invert max-w-3xl mx-auto`
- */
-declare function pluginTypography(opts?: TypographyPluginOptions): TwPlugin;
-
-/**
- * tailwind-styled-v4 — Plugin System
- *
- * Fondasi ecosystem library. Plugin bisa extend compiler pipeline
- * di berbagai tahap: variant, utility, token, transform, CSS.
- *
- * Usage:
- *   import { createTw } from "tailwind-styled-v4/plugin"
- *   const tw = createTw({
- *     plugins: [
- *       presetAnimation(),
- *       presetTokens({ primary: "#3b82f6" }),
- *     ]
- *   })
- *
- * Buat plugin sendiri:
- *   const myPlugin: TwPlugin = {
- *     name: "my-plugin",
- *     setup(ctx) {
- *       ctx.addVariant("print", sel => `@media print { ${sel} }`)
- *       ctx.addUtility("glow", { "box-shadow": "0 0 20px currentColor" })
- *       ctx.addToken("brand", "#ff4d6d")
- *     }
- *   }
- */
-type VariantResolver = (selector: string) => string;
-interface UtilityDefinition {
-    [property: string]: string;
-}
-type TransformFn = (node: any, ctx: TwContext) => any;
-type CssHook = (css: string) => string;
-interface TwContext {
-    /** Add a new variant (e.g. "group-hover", "print", "rtl") */
-    addVariant(name: string, resolver: VariantResolver): void;
-    /** Add a new utility class */
-    addUtility(name: string, styles: UtilityDefinition): void;
-    /** Add a design token (becomes CSS custom property) */
-    addToken(name: string, value: string): void;
-    /** Add a compiler AST transform hook */
-    addTransform(fn: TransformFn): void;
-    /** Hook into CSS generation phase */
-    onGenerateCSS(hook: CssHook): void;
-    /** Hook into build end */
-    onBuildEnd(hook: () => void | Promise<void>): void;
-    /** Read current plugin config */
-    readonly config: Record<string, any>;
-}
-interface TwPlugin {
-    name: string;
-    setup(ctx: TwContext): void;
-}
-interface PluginRegistry {
-    variants: Map<string, VariantResolver>;
-    utilities: Map<string, UtilityDefinition>;
-    tokens: Map<string, string>;
-    transforms: TransformFn[];
-    cssHooks: CssHook[];
-    buildHooks: Array<() => void | Promise<void>>;
-    plugins: Set<string>;
-}
-declare function getGlobalRegistry(): PluginRegistry;
-declare function resetGlobalRegistry(): void;
-/**
- * Register a plugin globally.
- *
- * @example
- * import { use } from "tailwind-styled-v4/plugin"
- * import { presetAnimation } from "tw-plugin-animation"
- *
- * use(presetAnimation())
- */
-declare function use(plugin: TwPlugin, config?: Record<string, any>): void;
-interface CreateTwOptions {
-    plugins?: TwPlugin[];
-    config?: Record<string, any>;
-}
-/**
- * Create a scoped tw instance with its own plugin registry.
- * Useful for libraries or sub-applications that need isolation.
- *
- * @example
- * const { tw, registry } = createTw({
- *   plugins: [presetAnimation(), presetTokens()]
- * })
- */
-declare function createTw(opts?: CreateTwOptions): {
-    registry: PluginRegistry;
-    use: (plugin: TwPlugin) => void;
-};
-/**
- * Generate :root CSS variables from registered tokens.
- */
-declare function generateTokenCss(registry: PluginRegistry): string;
-/**
- * Generate CSS for registered utilities.
- */
-declare function generateUtilityCss(registry: PluginRegistry): string;
-/**
- * Apply all CSS hooks to a CSS string.
- */
-declare function applyCssHooks(css: string, registry: PluginRegistry): string;
-/**
- * Run all build end hooks.
- */
-declare function runBuildHooks(registry: PluginRegistry): Promise<void>;
-/**
- * preset: common group variants
- *
- * Adds: group-hover, group-focus, peer-checked, rtl, ltr, print
- */
-declare function presetVariants(): TwPlugin;
-/**
- * preset: scrollbar utilities
- */
-declare function presetScrollbar(): TwPlugin;
-/**
- * preset: design tokens from a color palette
- *
- * @example
- * use(presetTokens({
- *   primary: "#3b82f6",
- *   secondary: "#6366f1",
- *   accent: "#f59e0b",
- * }))
- */
-declare function presetTokens(tokens: Record<string, string>): TwPlugin;
-
-export { type AnimationPluginOptions, type CreateTwOptions, type CssHook, type PluginRegistry, type TokensPluginOptions, type TransformFn, type TwContext, type TwPlugin, type TypographyPluginOptions, type UtilityDefinition, type VariantResolver, applyCssHooks, createTw, generateTokenCss, generateUtilityCss, getGlobalRegistry, pluginAnimation, pluginTokens, pluginTypography, presetScrollbar, presetTokens, presetVariants, resetGlobalRegistry, runBuildHooks, use };

package/dist/plugins.d.ts

@@ -1,231 +0,0 @@
-/**
- * tailwind-styled-v4 — Official Plugins
- *
- * 3 plugin resmi sebagai reference implementasi ecosystem.
- * Bisa dipakai langsung atau dijadikan template buat community plugins.
- *
- * Usage:
- *   import { pluginAnimation, pluginTokens, pluginTypography } from "tailwind-styled-v4/plugins"
- *
- *   withTailwindStyled({
- *     plugins: [
- *       pluginAnimation(),
- *       pluginTokens({ primary: "#3b82f6", secondary: "#6366f1" }),
- *       pluginTypography(),
- *     ]
- *   })(nextConfig)
- *
- * Atau standalone:
- *   import { use } from "tailwind-styled-v4/plugin"
- *   use(pluginAnimation())
- */
-
-interface AnimationPluginOptions {
-    /** Prefix untuk generated animation classes. Default: "tw-anim" */
-    prefix?: string;
-    /** Tambahkan reduced-motion safe variants. Default: true */
-    reducedMotion?: boolean;
-}
-/**
- * Official animation plugin.
- *
- * Adds:
- *   - `enter` variant → apply on mount animation
- *   - `exit` variant → apply on unmount animation
- *   - `motion-safe:` → only animate if prefers-reduced-motion: no-preference
- *   - Preset utility classes: `animate-fade-in`, `animate-slide-up`, etc.
- *
- * @example
- * use(pluginAnimation())
- *
- * const Card = tw.div`p-4 animate-fade-in`
- * const Modal = tw.div`animate-scale-in fixed inset-0`
- */
-declare function pluginAnimation(opts?: AnimationPluginOptions): TwPlugin;
-interface TokensPluginOptions {
-    /** Color tokens */
-    colors?: Record<string, string>;
-    /** Spacing tokens (mapped to --spacing-*) */
-    spacing?: Record<string, string>;
-    /** Typography tokens */
-    fonts?: Record<string, string>;
-    /** Border radius tokens */
-    radii?: Record<string, string>;
-    /** Shadow tokens */
-    shadows?: Record<string, string>;
-    /** Custom tokens (any group) */
-    custom?: Record<string, Record<string, string>>;
-    /** Generate utility classes. Default: true */
-    generateUtilities?: boolean;
-}
-/**
- * Official design token plugin.
- *
- * Generates CSS variables from your token map + optional utility classes.
- *
- * @example
- * use(pluginTokens({
- *   colors: {
- *     primary:   "#3b82f6",
- *     secondary: "#6366f1",
- *     danger:    "#ef4444",
- *   },
- *   fonts: {
- *     sans: "InterVariable, system-ui, sans-serif",
- *   },
- * }))
- *
- * // Then use in components:
- * const Button = tw.button`bg-primary text-white hover:bg-primary-hover`
- * // → bg-[var(--color-primary)] etc.
- */
-declare function pluginTokens(opts?: TokensPluginOptions): TwPlugin;
-interface TypographyPluginOptions {
-    /** Default prose text color. Default: "inherit" */
-    color?: string;
-    /** Default prose font family. Default: "inherit" */
-    fontFamily?: string;
-    /** Max width for prose container. Default: "65ch" */
-    maxWidth?: string;
-}
-/**
- * Official typography plugin.
- *
- * Adds `prose` utility class for rich text content (like @tailwindcss/typography).
- * Zero external dependency.
- *
- * @example
- * use(pluginTypography())
- *
- * const Article = tw.article`prose prose-invert max-w-3xl mx-auto`
- */
-declare function pluginTypography(opts?: TypographyPluginOptions): TwPlugin;
-
-/**
- * tailwind-styled-v4 — Plugin System
- *
- * Fondasi ecosystem library. Plugin bisa extend compiler pipeline
- * di berbagai tahap: variant, utility, token, transform, CSS.
- *
- * Usage:
- *   import { createTw } from "tailwind-styled-v4/plugin"
- *   const tw = createTw({
- *     plugins: [
- *       presetAnimation(),
- *       presetTokens({ primary: "#3b82f6" }),
- *     ]
- *   })
- *
- * Buat plugin sendiri:
- *   const myPlugin: TwPlugin = {
- *     name: "my-plugin",
- *     setup(ctx) {
- *       ctx.addVariant("print", sel => `@media print { ${sel} }`)
- *       ctx.addUtility("glow", { "box-shadow": "0 0 20px currentColor" })
- *       ctx.addToken("brand", "#ff4d6d")
- *     }
- *   }
- */
-type VariantResolver = (selector: string) => string;
-interface UtilityDefinition {
-    [property: string]: string;
-}
-type TransformFn = (node: any, ctx: TwContext) => any;
-type CssHook = (css: string) => string;
-interface TwContext {
-    /** Add a new variant (e.g. "group-hover", "print", "rtl") */
-    addVariant(name: string, resolver: VariantResolver): void;
-    /** Add a new utility class */
-    addUtility(name: string, styles: UtilityDefinition): void;
-    /** Add a design token (becomes CSS custom property) */
-    addToken(name: string, value: string): void;
-    /** Add a compiler AST transform hook */
-    addTransform(fn: TransformFn): void;
-    /** Hook into CSS generation phase */
-    onGenerateCSS(hook: CssHook): void;
-    /** Hook into build end */
-    onBuildEnd(hook: () => void | Promise<void>): void;
-    /** Read current plugin config */
-    readonly config: Record<string, any>;
-}
-interface TwPlugin {
-    name: string;
-    setup(ctx: TwContext): void;
-}
-interface PluginRegistry {
-    variants: Map<string, VariantResolver>;
-    utilities: Map<string, UtilityDefinition>;
-    tokens: Map<string, string>;
-    transforms: TransformFn[];
-    cssHooks: CssHook[];
-    buildHooks: Array<() => void | Promise<void>>;
-    plugins: Set<string>;
-}
-declare function getGlobalRegistry(): PluginRegistry;
-declare function resetGlobalRegistry(): void;
-/**
- * Register a plugin globally.
- *
- * @example
- * import { use } from "tailwind-styled-v4/plugin"
- * import { presetAnimation } from "tw-plugin-animation"
- *
- * use(presetAnimation())
- */
-declare function use(plugin: TwPlugin, config?: Record<string, any>): void;
-interface CreateTwOptions {
-    plugins?: TwPlugin[];
-    config?: Record<string, any>;
-}
-/**
- * Create a scoped tw instance with its own plugin registry.
- * Useful for libraries or sub-applications that need isolation.
- *
- * @example
- * const { tw, registry } = createTw({
- *   plugins: [presetAnimation(), presetTokens()]
- * })
- */
-declare function createTw(opts?: CreateTwOptions): {
-    registry: PluginRegistry;
-    use: (plugin: TwPlugin) => void;
-};
-/**
- * Generate :root CSS variables from registered tokens.
- */
-declare function generateTokenCss(registry: PluginRegistry): string;
-/**
- * Generate CSS for registered utilities.
- */
-declare function generateUtilityCss(registry: PluginRegistry): string;
-/**
- * Apply all CSS hooks to a CSS string.
- */
-declare function applyCssHooks(css: string, registry: PluginRegistry): string;
-/**
- * Run all build end hooks.
- */
-declare function runBuildHooks(registry: PluginRegistry): Promise<void>;
-/**
- * preset: common group variants
- *
- * Adds: group-hover, group-focus, peer-checked, rtl, ltr, print
- */
-declare function presetVariants(): TwPlugin;
-/**
- * preset: scrollbar utilities
- */
-declare function presetScrollbar(): TwPlugin;
-/**
- * preset: design tokens from a color palette
- *
- * @example
- * use(presetTokens({
- *   primary: "#3b82f6",
- *   secondary: "#6366f1",
- *   accent: "#f59e0b",
- * }))
- */
-declare function presetTokens(tokens: Record<string, string>): TwPlugin;
-
-export { type AnimationPluginOptions, type CreateTwOptions, type CssHook, type PluginRegistry, type TokensPluginOptions, type TransformFn, type TwContext, type TwPlugin, type TypographyPluginOptions, type UtilityDefinition, type VariantResolver, applyCssHooks, createTw, generateTokenCss, generateUtilityCss, getGlobalRegistry, pluginAnimation, pluginTokens, pluginTypography, presetScrollbar, presetTokens, presetVariants, resetGlobalRegistry, runBuildHooks, use };