@kbach/ui 0.1.0-beta.7 → 1.0.0-beta.1

package/dist/jsx-runtime.mjs

@@ -1,17 +0,0 @@
-'use client';
-import {
-  Fragment,
-  _invalidateDefaultFontCache,
-  jsx,
-  jsxs
-} from "./chunk-UVXTWGHQ.mjs";
-import {
-  registerWebElement
-} from "./chunk-LY753XBX.mjs";
-export {
-  Fragment,
-  _invalidateDefaultFontCache,
-  jsx,
-  jsxs,
-  registerWebElement
-};

package/dist/native.js

@@ -1,78 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/native/index.ts
-var native_exports = {};
-__export(native_exports, {
-  createKbachConfig: () => createKbachConfig,
-  withKbach: () => withKbach,
-  withKbachBabel: () => withKbachBabel
-});
-module.exports = __toCommonJS(native_exports);
-
-// src/native/setup.ts
-function warn(message) {
-  const proc = process;
-  const useColor = !!proc.stdout?.isTTY && !proc.env.NO_COLOR;
-  const paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
-  console.warn(`${paint("1", paint("35", "[kbach]"))} ${paint("33", message)}`);
-}
-function withKbach(metroConfig, _options = {}) {
-  return metroConfig;
-}
-function withKbachBabel(babelConfig, options = {}) {
-  const {
-    configFile = "kbach.config.js",
-    attributes = ["kb", "className"],
-    debug = false
-  } = options;
-  const presets = (babelConfig.presets ?? []).map((preset) => {
-    const [name, presetOpts = {}] = Array.isArray(preset) ? preset : [preset, {}];
-    if (typeof name === "string" && (name.includes("babel-preset-expo") || name.includes("preset-react"))) {
-      const opts = presetOpts;
-      if (opts.jsxRuntime === "classic") {
-        warn(`Forcing jsxRuntime "automatic" on ${name} (was "classic") \u2014 required for Kbach`);
-      }
-      return [name, { ...opts, jsxRuntime: "automatic" }];
-    }
-    return preset;
-  });
-  return {
-    ...babelConfig,
-    presets: [...presets, ["@kbach/ui/babel", { configFile, attributes, debug }]]
-  };
-}
-function createKbachConfig(options = {}) {
-  return {
-    presets: [
-      "babel-preset-expo",
-      ["@kbach/ui/babel", {
-        configFile: options.configFile ?? "kbach.config.js",
-        attributes: options.attributes ?? ["kb", "className"],
-        debug: options.debug ?? false
-      }]
-    ]
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createKbachConfig,
-  withKbach,
-  withKbachBabel
-});

package/dist/native.mjs

@@ -1,49 +0,0 @@
-// src/native/setup.ts
-function warn(message) {
-  const proc = process;
-  const useColor = !!proc.stdout?.isTTY && !proc.env.NO_COLOR;
-  const paint = (code, s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
-  console.warn(`${paint("1", paint("35", "[kbach]"))} ${paint("33", message)}`);
-}
-function withKbach(metroConfig, _options = {}) {
-  return metroConfig;
-}
-function withKbachBabel(babelConfig, options = {}) {
-  const {
-    configFile = "kbach.config.js",
-    attributes = ["kb", "className"],
-    debug = false
-  } = options;
-  const presets = (babelConfig.presets ?? []).map((preset) => {
-    const [name, presetOpts = {}] = Array.isArray(preset) ? preset : [preset, {}];
-    if (typeof name === "string" && (name.includes("babel-preset-expo") || name.includes("preset-react"))) {
-      const opts = presetOpts;
-      if (opts.jsxRuntime === "classic") {
-        warn(`Forcing jsxRuntime "automatic" on ${name} (was "classic") \u2014 required for Kbach`);
-      }
-      return [name, { ...opts, jsxRuntime: "automatic" }];
-    }
-    return preset;
-  });
-  return {
-    ...babelConfig,
-    presets: [...presets, ["@kbach/ui/babel", { configFile, attributes, debug }]]
-  };
-}
-function createKbachConfig(options = {}) {
-  return {
-    presets: [
-      "babel-preset-expo",
-      ["@kbach/ui/babel", {
-        configFile: options.configFile ?? "kbach.config.js",
-        attributes: options.attributes ?? ["kb", "className"],
-        debug: options.debug ?? false
-      }]
-    ]
-  };
-}
-export {
-  createKbachConfig,
-  withKbach,
-  withKbachBabel
-};

package/dist/vite-plugin.d.mts

@@ -1,174 +0,0 @@
-import { Plugin } from 'vite';
-
-/**
- * Unified modifier registry — single source of truth for ALL modifier behavior.
- *
- * Adding a new modifier requires editing ONLY this file:
- *   1. Add an entry to BUILTIN_MODIFIERS with its CSS and JS behavior.
- *   2. Done — parser, resolver, CSS generator, and JSX runtime all derive
- *      their behavior from this data automatically.
- *
- * Plugin authors can register custom modifiers via registerModifier().
- */
-interface ModifierDef {
-    /**
-     * Cascade priority for CSS rule ORDER — NOT specificity. Two rules that
-     * differ only by modifier (e.g. `.hover\:bg-blue-6:hover` and
-     * `.focus\:bg-red-6:focus`) have equal CSS specificity, so when both
-     * conditions are true at once (hovering AND focused), the winner is
-     * whichever rule appears LATER in the stylesheet — CSS's normal same-
-     * specificity tiebreak. Without a fixed priority, "later" would depend on
-     * encounter order (whichever class the app happens to render/scan first),
-     * making the winner effectively random and inconsistent across reloads/
-     * builds. `order` fixes that: rules are emitted/injected sorted by this
-     * value (ascending — higher wins ties), regardless of source order, so
-     * e.g. `disabled:` always beats `hover:` on the same element no matter
-     * which one was written first in the className or rendered first in the
-     * app. Omit for the default (0). See getModifierOrder() below.
-     */
-    order?: number;
-    /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
-    pseudo?: string;
-    /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
-    ancestorSelector?: string;
-    /** Directionality attribute selector prefix INCLUDING trailing space (e.g. '[dir="rtl"] ') */
-    dirSelector?: string;
-    /** @media query body WITHOUT the '@media ' prefix (e.g. 'print', '(orientation: landscape)') */
-    mediaQuery?: string;
-    /** Dark/light mode scheme — triggers the configured darkMode strategy in CSS output */
-    darkScheme?: 'dark' | 'light';
-    /** True for responsive modifiers — wraps in @media (min-width: theme.screens[name]) */
-    isResponsive?: boolean;
-    /**
-     * Forces !important on all declarations in the generated CSS rule.
-     * Applied automatically for structural / ancestor / media modifiers that must
-     * win over base inline styles.
-     */
-    forcesImportant?: boolean;
-    /**
-     * How the JSX runtime routes this modifier:
-     *   'interactive'  — managed by InteractiveWrapper (hover, focus, pressed, …)
-     *   'mode'         — managed by DarkWrapper (dark, light, not-dark, …)
-     *   'responsive'   — managed by DarkWrapper (sm, md, lg, xl, 2xl)
-     *   'css-only'     — CSS injection only; matchModifier always returns false
-     */
-    jsBehavior: 'interactive' | 'mode' | 'responsive' | 'css-only';
-    /**
-     * Evaluates whether this modifier's condition is met at runtime.
-     * Omit for 'css-only' modifiers — they never apply as inline styles.
-     */
-    jsMatch?: (isDark: boolean, state: Record<string, boolean | undefined>, breakpoints: Set<string>) => boolean;
-}
-
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
-}
-/**
- * A color value is either a plain string (hex/rgb/alias-to-another-color-name)
- * or a mode-aware pair — resolved to `light` or `dark` per the active theme
- * mode wherever it's actually used (className resolution, useColors()).
- */
-type ColorValue = string | {
-    light: string;
-    dark: string;
-};
-type ColorShades = Record<string, ColorValue>;
-type ThemeColors = Record<string, ColorValue | ColorShades>;
-type ThemeSpacing = Record<string, number | string>;
-interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    fontSize: Record<string, number | string>;
-    fontFamily: Record<string, string | string[]>;
-    fontWeight: Record<string, string | number>;
-    borderRadius: Record<string, number | string>;
-    borderWidth: Record<string, number>;
-    opacity: Record<string, number>;
-    lineHeight: Record<string, number | string>;
-    letterSpacing: Record<string, number | string>;
-    zIndex: Record<string, number | string>;
-    flex: Record<string, number | string>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    /**
-     * Custom @keyframes, web only. Each key is a keyframe name, its value maps
-     * percentage/from/to selectors to a plain CSS declaration object (camelCase
-     * properties, same shape as an inline style object):
-     *   keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' } } }
-     * Referenced from `animation` below, or directly via animate-[wiggle_1s_ease-in-out].
-     */
-    keyframes: Record<string, Record<string, StyleValue>>;
-    /**
-     * Named animation shorthands built on `keyframes` above, referenced via
-     * animate-{name} (e.g. animate-wiggle):
-     *   animation: { wiggle: 'wiggle 1s ease-in-out infinite' }
-     * The first word must match a `keyframes` key so its @keyframes rule can be
-     * injected alongside the animation — a name with no matching keyframes entry
-     * still sets the `animation` CSS property, it just won't animate anything.
-     */
-    animation: Record<string, string>;
-    [key: string]: unknown;
-}
-/**
- * 'class'     — toggles .dark class on <html>
- * 'media'     — uses prefers-color-scheme media query
- * 'attribute' — uses data-theme="dark" attribute on <html>
- */
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    /**
-     * Register a custom variant.
-     *
-     * Pass a CSS selector string for simple cases — it is automatically
-     * converted into a ModifierDef that generates correct CSS rules:
-     *   addVariant('hocus', ':hover, :focus')  // pseudo
-     *   addVariant('supports-grid', '@media (display: grid)')  // media
-     *   addVariant('dark-green', '.dark-green')  // ancestor selector
-     *
-     * Pass a full ModifierDef object for advanced control (e.g. JS-trackable
-     * interactive variants with custom jsMatch logic).
-     */
-    addVariant(name: string, selectorOrDef: string | ModifierDef): void;
-    theme(path: string, defaultValue?: unknown): unknown;
-    e(className: string): string;
-}
-interface FrameworkConfig {
-    darkMode?: DarkMode;
-    theme?: Partial<ThemeConfig>;
-    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
-    extend?: {
-        theme?: Partial<ThemeConfig>;
-    } & Partial<ThemeConfig>;
-    plugins?: Array<(api: PluginAPI) => void>;
-    content?: string[];
-}
-
-declare function formatKbachCSS(tokenCSS: Map<string, string>, theme: ThemeConfig, responsiveRe: RegExp): string;
-declare function extractClassStrings(code: string): string[];
-interface KbachPluginOptions {
-    framework?: FrameworkConfig;
-    /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
-    include?: string[];
-    /**
-     * Class names to always include in the generated kbach.css, even if no
-     * scan finds them literally in your source. Static extraction only ever
-     * sees complete class strings as they appear in your files — it can't
-     * evaluate `` `bg-${color}-${shade}` `` or similar runtime-built strings,
-     * because the actual value doesn't exist until the component renders (see
-     * useStyles()'s own docblock for the same limitation from the other
-     * direction). Same purpose as Tailwind's `safelist` config: list the
-     * complete class names explicitly, e.g. generated from the same
-     * color/shade arrays your component already loops over —
-     *
-     * ```js
-     * const families = ['red', 'blue', 'green'];
-     * const shades = [1, 2, 3];
-     * safelist: families.flatMap((f) => shades.map((s) => `bg-${f}-${s}`))
-     * ```
-     */
-    safelist?: string[];
-}
-declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
-
-export { type KbachPluginOptions, extractClassStrings, formatKbachCSS, kbach };

package/dist/vite-plugin.d.ts

@@ -1,174 +0,0 @@
-import { Plugin } from 'vite';
-
-/**
- * Unified modifier registry — single source of truth for ALL modifier behavior.
- *
- * Adding a new modifier requires editing ONLY this file:
- *   1. Add an entry to BUILTIN_MODIFIERS with its CSS and JS behavior.
- *   2. Done — parser, resolver, CSS generator, and JSX runtime all derive
- *      their behavior from this data automatically.
- *
- * Plugin authors can register custom modifiers via registerModifier().
- */
-interface ModifierDef {
-    /**
-     * Cascade priority for CSS rule ORDER — NOT specificity. Two rules that
-     * differ only by modifier (e.g. `.hover\:bg-blue-6:hover` and
-     * `.focus\:bg-red-6:focus`) have equal CSS specificity, so when both
-     * conditions are true at once (hovering AND focused), the winner is
-     * whichever rule appears LATER in the stylesheet — CSS's normal same-
-     * specificity tiebreak. Without a fixed priority, "later" would depend on
-     * encounter order (whichever class the app happens to render/scan first),
-     * making the winner effectively random and inconsistent across reloads/
-     * builds. `order` fixes that: rules are emitted/injected sorted by this
-     * value (ascending — higher wins ties), regardless of source order, so
-     * e.g. `disabled:` always beats `hover:` on the same element no matter
-     * which one was written first in the className or rendered first in the
-     * app. Omit for the default (0). See getModifierOrder() below.
-     */
-    order?: number;
-    /** CSS pseudo-class or pseudo-element appended to the selector (e.g. ':hover', '::before') */
-    pseudo?: string;
-    /** Ancestor selector prefix INCLUDING trailing space (e.g. '.group:hover ', '.peer:focus ~ ') */
-    ancestorSelector?: string;
-    /** Directionality attribute selector prefix INCLUDING trailing space (e.g. '[dir="rtl"] ') */
-    dirSelector?: string;
-    /** @media query body WITHOUT the '@media ' prefix (e.g. 'print', '(orientation: landscape)') */
-    mediaQuery?: string;
-    /** Dark/light mode scheme — triggers the configured darkMode strategy in CSS output */
-    darkScheme?: 'dark' | 'light';
-    /** True for responsive modifiers — wraps in @media (min-width: theme.screens[name]) */
-    isResponsive?: boolean;
-    /**
-     * Forces !important on all declarations in the generated CSS rule.
-     * Applied automatically for structural / ancestor / media modifiers that must
-     * win over base inline styles.
-     */
-    forcesImportant?: boolean;
-    /**
-     * How the JSX runtime routes this modifier:
-     *   'interactive'  — managed by InteractiveWrapper (hover, focus, pressed, …)
-     *   'mode'         — managed by DarkWrapper (dark, light, not-dark, …)
-     *   'responsive'   — managed by DarkWrapper (sm, md, lg, xl, 2xl)
-     *   'css-only'     — CSS injection only; matchModifier always returns false
-     */
-    jsBehavior: 'interactive' | 'mode' | 'responsive' | 'css-only';
-    /**
-     * Evaluates whether this modifier's condition is met at runtime.
-     * Omit for 'css-only' modifiers — they never apply as inline styles.
-     */
-    jsMatch?: (isDark: boolean, state: Record<string, boolean | undefined>, breakpoints: Set<string>) => boolean;
-}
-
-interface StyleValue {
-    [key: string]: string | number | undefined | null | StyleValue | StyleValue[];
-}
-/**
- * A color value is either a plain string (hex/rgb/alias-to-another-color-name)
- * or a mode-aware pair — resolved to `light` or `dark` per the active theme
- * mode wherever it's actually used (className resolution, useColors()).
- */
-type ColorValue = string | {
-    light: string;
-    dark: string;
-};
-type ColorShades = Record<string, ColorValue>;
-type ThemeColors = Record<string, ColorValue | ColorShades>;
-type ThemeSpacing = Record<string, number | string>;
-interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: ThemeSpacing;
-    fontSize: Record<string, number | string>;
-    fontFamily: Record<string, string | string[]>;
-    fontWeight: Record<string, string | number>;
-    borderRadius: Record<string, number | string>;
-    borderWidth: Record<string, number>;
-    opacity: Record<string, number>;
-    lineHeight: Record<string, number | string>;
-    letterSpacing: Record<string, number | string>;
-    zIndex: Record<string, number | string>;
-    flex: Record<string, number | string>;
-    shadow: Record<string, StyleValue>;
-    screens: Record<string, string | number>;
-    /**
-     * Custom @keyframes, web only. Each key is a keyframe name, its value maps
-     * percentage/from/to selectors to a plain CSS declaration object (camelCase
-     * properties, same shape as an inline style object):
-     *   keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' } } }
-     * Referenced from `animation` below, or directly via animate-[wiggle_1s_ease-in-out].
-     */
-    keyframes: Record<string, Record<string, StyleValue>>;
-    /**
-     * Named animation shorthands built on `keyframes` above, referenced via
-     * animate-{name} (e.g. animate-wiggle):
-     *   animation: { wiggle: 'wiggle 1s ease-in-out infinite' }
-     * The first word must match a `keyframes` key so its @keyframes rule can be
-     * injected alongside the animation — a name with no matching keyframes entry
-     * still sets the `animation` CSS property, it just won't animate anything.
-     */
-    animation: Record<string, string>;
-    [key: string]: unknown;
-}
-/**
- * 'class'     — toggles .dark class on <html>
- * 'media'     — uses prefers-color-scheme media query
- * 'attribute' — uses data-theme="dark" attribute on <html>
- */
-type DarkMode = 'attribute' | 'class' | 'media';
-interface PluginAPI {
-    addUtility(name: string, styles: StyleValue): void;
-    /**
-     * Register a custom variant.
-     *
-     * Pass a CSS selector string for simple cases — it is automatically
-     * converted into a ModifierDef that generates correct CSS rules:
-     *   addVariant('hocus', ':hover, :focus')  // pseudo
-     *   addVariant('supports-grid', '@media (display: grid)')  // media
-     *   addVariant('dark-green', '.dark-green')  // ancestor selector
-     *
-     * Pass a full ModifierDef object for advanced control (e.g. JS-trackable
-     * interactive variants with custom jsMatch logic).
-     */
-    addVariant(name: string, selectorOrDef: string | ModifierDef): void;
-    theme(path: string, defaultValue?: unknown): unknown;
-    e(className: string): string;
-}
-interface FrameworkConfig {
-    darkMode?: DarkMode;
-    theme?: Partial<ThemeConfig>;
-    /** Additive theme extension — accepts either `extend.theme.X` or `extend.X` directly. */
-    extend?: {
-        theme?: Partial<ThemeConfig>;
-    } & Partial<ThemeConfig>;
-    plugins?: Array<(api: PluginAPI) => void>;
-    content?: string[];
-}
-
-declare function formatKbachCSS(tokenCSS: Map<string, string>, theme: ThemeConfig, responsiveRe: RegExp): string;
-declare function extractClassStrings(code: string): string[];
-interface KbachPluginOptions {
-    framework?: FrameworkConfig;
-    /** Directories to scan for class strings (relative to Vite root). Defaults to common source dirs. */
-    include?: string[];
-    /**
-     * Class names to always include in the generated kbach.css, even if no
-     * scan finds them literally in your source. Static extraction only ever
-     * sees complete class strings as they appear in your files — it can't
-     * evaluate `` `bg-${color}-${shade}` `` or similar runtime-built strings,
-     * because the actual value doesn't exist until the component renders (see
-     * useStyles()'s own docblock for the same limitation from the other
-     * direction). Same purpose as Tailwind's `safelist` config: list the
-     * complete class names explicitly, e.g. generated from the same
-     * color/shade arrays your component already loops over —
-     *
-     * ```js
-     * const families = ['red', 'blue', 'green'];
-     * const shades = [1, 2, 3];
-     * safelist: families.flatMap((f) => shades.map((s) => `bg-${f}-${s}`))
-     * ```
-     */
-    safelist?: string[];
-}
-declare function kbach(userConfigOrOptions?: FrameworkConfig | KbachPluginOptions): Plugin;
-
-export { type KbachPluginOptions, extractClassStrings, formatKbachCSS, kbach };