@kbach/react 0.6.12 → 0.6.14

package/README.md

@@ -362,6 +362,18 @@ Nested groups need names, or the inner element reacts to whichever `.group` is n
 <div className="text-[18px]" />
 ```
 
+### Arbitrary properties (web only)
+
+For the rare CSS property with no named utility, write `[property:value]` directly — no utility prefix:
+
+```jsx
+<div className="[mask-type:luminance]" />
+<div className="[-webkit-line-clamp:3]" />
+<div className="[--my-var:10px]" />       {/* CSS custom property */}
+```
+
+Underscores become spaces, same as any other arbitrary value: `[background:url(/a.png)_no-repeat]`. Only the first `:` splits the property from the value, so a value that itself contains a colon (a URL's `http://`) still comes through intact.
+
 ## Color system
 
 12-shade scale — 1 lightest, 12 darkest. Use as `bg-blue-6`, `text-gray-10`, `border-red-4/50`.
@@ -406,6 +418,15 @@ module.exports = {
       sans:        'Inter, sans-serif',
       'sans-bold': 'Inter_700Bold, sans-serif',
     },
+    // Custom @keyframes (web only) — reference by name from `animation`,
+    // then use that name as animate-{name}. Declaration values are plain
+    // CSS strings, same idea as a style object but for a keyframe step.
+    keyframes: {
+      wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' } },
+    },
+    animation: {
+      wiggle: 'wiggle 1s ease-in-out infinite',
+    },
   },
 
   plugins: [
@@ -422,6 +443,12 @@ module.exports = {
 
 Setting `fontFamily.sans` to anything other than `'System'` auto-injects `body { font-family: … }`.
 
+```jsx
+<div className="animate-wiggle" />
+{/* Override duration/timing/repeat inline, keeps the same wiggle @keyframes: */}
+<div className="animate-[wiggle_2s_ease-in-out]" />
+```
+
 Color aliases:
 
 ```js

package/dist/{chunk-GTDMKS7C.mjs → chunk-7DHBNCL5.mjs}

@@ -23,7 +23,7 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-WYOKBFSK.mjs";
+} from "./chunk-HCRWLOJE.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/{chunk-WYOKBFSK.mjs → chunk-HCRWLOJE.mjs}

@@ -540,7 +540,13 @@ var defaultTheme = {
     xl: 1280,
     // desktop
     "2xl": 1536
-  }
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
 
 // src/core/platform.ts
@@ -1240,6 +1246,44 @@ var BORDER_SIDE_PROPS = {
   "border-b": ["borderBottomWidth", "borderBottomColor"],
   "border-l": ["borderLeftWidth", "borderLeftColor"]
 };
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1803,6 +1847,28 @@ var RESOLVERS = {
     const presets = { none: "none" };
     return value in presets ? { content: presets[value] } : null;
   },
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1996,30 +2062,12 @@ var RESOLVERS = {
   // Each variant injects a @keyframes rule once via the __keyframe marker.
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
-    const defs = {
-      none: { animation: "none" },
-      spin: {
-        animation: "kb-spin 1s linear infinite",
-        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-      },
-      ping: {
-        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-      },
-      pulse: {
-        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-      },
-      bounce: {
-        animation: "kb-bounce 1s infinite",
-        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-      }
-    };
-    const def = defs[value];
-    return def ? def : null;
+  animate: ({ value, isArbitrary }, theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {

package/dist/index.d.mts

@@ -90,6 +90,23 @@ interface ThemeConfig {
     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;
 }
 /**

package/dist/index.d.ts

@@ -90,6 +90,23 @@ interface ThemeConfig {
     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;
 }
 /**

package/dist/index.js

@@ -625,7 +625,13 @@ var defaultTheme = {
     xl: 1280,
     // desktop
     "2xl": 1536
-  }
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
 
 // src/core/reset.ts
@@ -1401,6 +1407,44 @@ var BORDER_SIDE_PROPS = {
   "border-b": ["borderBottomWidth", "borderBottomColor"],
   "border-l": ["borderLeftWidth", "borderLeftColor"]
 };
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1964,6 +2008,28 @@ var RESOLVERS = {
     const presets = { none: "none" };
     return value in presets ? { content: presets[value] } : null;
   },
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2157,30 +2223,12 @@ var RESOLVERS = {
   // Each variant injects a @keyframes rule once via the __keyframe marker.
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }) => {
+  animate: ({ value, isArbitrary }, theme) => {
     if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
-    const defs = {
-      none: { animation: "none" },
-      spin: {
-        animation: "kb-spin 1s linear infinite",
-        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-      },
-      ping: {
-        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-      },
-      pulse: {
-        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-      },
-      bounce: {
-        animation: "kb-bounce 1s infinite",
-        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-      }
-    };
-    const def = defs[value];
-    return def ? def : null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {

package/dist/index.mjs

@@ -39,7 +39,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-WYOKBFSK.mjs";
+} from "./chunk-HCRWLOJE.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -580,7 +580,13 @@ var defaultTheme = {
     xl: 1280,
     // desktop
     "2xl": 1536
-  }
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
 
 // src/core/reset.ts
@@ -1359,6 +1365,44 @@ var BORDER_SIDE_PROPS = {
   "border-b": ["borderBottomWidth", "borderBottomColor"],
   "border-l": ["borderLeftWidth", "borderLeftColor"]
 };
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1922,6 +1966,28 @@ var RESOLVERS = {
     const presets = { none: "none" };
     return value in presets ? { content: presets[value] } : null;
   },
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2115,30 +2181,12 @@ var RESOLVERS = {
   // Each variant injects a @keyframes rule once via the __keyframe marker.
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
-    const defs = {
-      none: { animation: "none" },
-      spin: {
-        animation: "kb-spin 1s linear infinite",
-        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-      },
-      ping: {
-        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-      },
-      pulse: {
-        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-      },
-      bounce: {
-        animation: "kb-bounce 1s infinite",
-        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-      }
-    };
-    const def = defs[value];
-    return def ? def : null;
+  animate: ({ value, isArbitrary }, theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-GTDMKS7C.mjs";
-import "./chunk-WYOKBFSK.mjs";
+} from "./chunk-7DHBNCL5.mjs";
+import "./chunk-HCRWLOJE.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -581,7 +581,13 @@ var defaultTheme = {
     xl: 1280,
     // desktop
     "2xl": 1536
-  }
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
 
 // src/core/reset.ts
@@ -1360,6 +1366,44 @@ var BORDER_SIDE_PROPS = {
   "border-b": ["borderBottomWidth", "borderBottomColor"],
   "border-l": ["borderLeftWidth", "borderLeftColor"]
 };
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1923,6 +1967,28 @@ var RESOLVERS = {
     const presets = { none: "none" };
     return value in presets ? { content: presets[value] } : null;
   },
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -2116,30 +2182,12 @@ var RESOLVERS = {
   // Each variant injects a @keyframes rule once via the __keyframe marker.
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
-    const defs = {
-      none: { animation: "none" },
-      spin: {
-        animation: "kb-spin 1s linear infinite",
-        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-      },
-      ping: {
-        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-      },
-      pulse: {
-        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-      },
-      bounce: {
-        animation: "kb-bounce 1s infinite",
-        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-      }
-    };
-    const def = defs[value];
-    return def ? def : null;
+  animate: ({ value, isArbitrary }, theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-GTDMKS7C.mjs";
+} from "./chunk-7DHBNCL5.mjs";
 import {
   registerWebElement
-} from "./chunk-WYOKBFSK.mjs";
+} from "./chunk-HCRWLOJE.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.d.mts

@@ -65,6 +65,23 @@ interface ThemeConfig {
     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;
 }
 /**

package/dist/vite-plugin.d.ts

@@ -65,6 +65,23 @@ interface ThemeConfig {
     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;
 }
 /**

package/dist/vite-plugin.js

@@ -640,7 +640,13 @@ var defaultTheme = {
     xl: 1280,
     // desktop
     "2xl": 1536
-  }
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
 
 // src/core/utilities.ts
@@ -1174,6 +1180,44 @@ var BORDER_SIDE_PROPS = {
   "border-b": ["borderBottomWidth", "borderBottomColor"],
   "border-l": ["borderLeftWidth", "borderLeftColor"]
 };
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1737,6 +1781,28 @@ var RESOLVERS = {
     const presets = { none: "none" };
     return value in presets ? { content: presets[value] } : null;
   },
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1930,30 +1996,12 @@ var RESOLVERS = {
   // Each variant injects a @keyframes rule once via the __keyframe marker.
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
-    const defs = {
-      none: { animation: "none" },
-      spin: {
-        animation: "kb-spin 1s linear infinite",
-        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-      },
-      ping: {
-        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-      },
-      pulse: {
-        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-      },
-      bounce: {
-        animation: "kb-bounce 1s infinite",
-        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-      }
-    };
-    const def = defs[value];
-    return def ? def : null;
+  animate: ({ value, isArbitrary }, theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {
@@ -3445,9 +3493,21 @@ function kbach(userConfigOrOptions) {
     },
     // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
     // so styles come solely from the static stylesheet — no duplicate injection.
+    //
+    // Anchored to the START of a source line (^\s*, with the m flag) rather than a
+    // bare \bimport\b anywhere in the file — disableRuntimeCSS() sets a globalThis
+    // flag with no way to re-enable it, so a false match here doesn't just misfire
+    // once, it silently kills ALL runtime CSS injection for the rest of that page's
+    // JS lifetime, including on completely unrelated components. A real import
+    // statement is always the first token on its line (give or take whitespace);
+    // this same text appearing as part of a STRING — e.g. a docs site's own code
+    // sample literally showing `import "./kbach.css";` as example text, which is
+    // exactly what happened here — is never positioned that way, since something
+    // always precedes it syntactically (a quote, JSX braces, an array bracket, …).
     transform(code, id) {
       if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
-      if (!/\bimport\b[^;]*['"].*kbach\.css['"]/i.test(code)) return;
+      if (!/^\s*import\b[^;]*['"][^'"]*kbach\.css['"]/im.test(code)) return;
+      warn(`disableRuntimeCSS() auto-triggered by an import in ${id.replace(/\\/g, "/")}`);
       return {
         code: `import { disableRuntimeCSS } from '@kbach/react';
 disableRuntimeCSS();

package/dist/vite-plugin.mjs

@@ -606,7 +606,13 @@ var defaultTheme = {
     xl: 1280,
     // desktop
     "2xl": 1536
-  }
+  },
+  // Empty by default — the 4 built-in presets (spin/ping/pulse/bounce) are handled
+  // directly in the `animate` resolver, not through this theme table. This exists so
+  // user-defined ones (kbach.config.js theme.extend.keyframes/animation) merge in
+  // alongside them without needing to redeclare the built-ins.
+  keyframes: {},
+  animation: {}
 };
 
 // src/core/utilities.ts
@@ -1140,6 +1146,44 @@ var BORDER_SIDE_PROPS = {
   "border-b": ["borderBottomWidth", "borderBottomColor"],
   "border-l": ["borderLeftWidth", "borderLeftColor"]
 };
+function keyframeDeclToCSS(decl) {
+  return Object.entries(decl).map(([prop, val]) => `${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${val}`).join("; ");
+}
+function buildKeyframeCSS(name, steps) {
+  const body = Object.entries(steps).map(([selector, decl]) => `${selector} { ${keyframeDeclToCSS(decl)} }`).join(" ");
+  return `@keyframes ${name} { ${body} }`;
+}
+var BUILTIN_ANIMATIONS = {
+  none: { animation: "none" },
+  spin: {
+    animation: "kb-spin 1s linear infinite",
+    __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
+  },
+  ping: {
+    animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
+  },
+  pulse: {
+    animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
+  },
+  bounce: {
+    animation: "kb-bounce 1s infinite",
+    __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
+  }
+};
+function buildAnimationValue(animation, keyframes) {
+  const words = animation.trim().split(/\s+/);
+  const name = words[0];
+  if (!name) return { animation };
+  const builtin = BUILTIN_ANIMATIONS[name];
+  if (builtin?.__keyframe) {
+    const kbName = builtin.animation.split(/\s+/, 1)[0];
+    return { animation: [kbName, ...words.slice(1)].join(" "), __keyframe: builtin.__keyframe };
+  }
+  const steps = keyframes?.[name];
+  return steps ? { animation, __keyframe: buildKeyframeCSS(name, steps) } : { animation };
+}
 var RESOLVERS = {
   // ── Background ─────────────────────────────────────────────────────────────
   bg: ({ value, isArbitrary }, { colors }) => {
@@ -1703,6 +1747,28 @@ var RESOLVERS = {
     const presets = { none: "none" };
     return value in presets ? { content: presets[value] } : null;
   },
+  // ── Arbitrary CSS property (web-only): [property:value] with no utility prefix ──
+  // e.g. [mask-type:luminance], [--my-var:10px]. parser.ts already isolates this case
+  // as utility: '' — it's ALSO how a stray, prefix-less negative bracket ("-[10px]",
+  // presumably a typo) parses, which is why this only fires when the arbitrary value
+  // itself contains a "property:value" pair; anything else (no colon) still resolves
+  // to null exactly as before this resolver existed, rather than guessing a property.
+  //
+  // Only the FIRST colon splits property from value — the value itself may contain
+  // more colons (a URL's "http://…") and must stay intact: [background:url(http://x/a.png)].
+  // camelToKebab() in resolver.ts is a no-op on an already-kebab-case (or "--"-prefixed
+  // custom property) key, so it can be used as the style object key as-written with no
+  // extra case conversion — it only needs to look like a plausible CSS property name.
+  "": ({ value, isArbitrary, negative }) => {
+    if (!getEffectiveIsWeb() || !isArbitrary || !value) return null;
+    if (negative) return null;
+    const colonIdx = value.indexOf(":");
+    if (colonIdx <= 0) return null;
+    const prop = value.slice(0, colonIdx).trim();
+    const cssValue = value.slice(colonIdx + 1).trim();
+    if (!cssValue || !/^(--[\w-]+|[a-zA-Z-]+)$/.test(prop)) return null;
+    return { [prop]: cssValue };
+  },
   // ── Outline extended (web-only) ───────────────────────────────────────────
   outline: ({ value, isArbitrary }, { colors }) => {
     if (!getEffectiveIsWeb()) return null;
@@ -1896,30 +1962,12 @@ var RESOLVERS = {
   // Each variant injects a @keyframes rule once via the __keyframe marker.
   // resolver.ts detects __keyframe, injects the rule, then strips the marker
   // so it never reaches element inline styles.
-  animate: ({ value, isArbitrary }) => {
-    if (!getEffectiveIsWeb()) return null;
-    if (isArbitrary) return { animation: value.replace(/_/g, " ") };
-    const defs = {
-      none: { animation: "none" },
-      spin: {
-        animation: "kb-spin 1s linear infinite",
-        __keyframe: "@keyframes kb-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }"
-      },
-      ping: {
-        animation: "kb-ping 1s cubic-bezier(0,0,0.2,1) infinite",
-        __keyframe: "@keyframes kb-ping { 75%, 100% { transform: scale(2); opacity: 0 } }"
-      },
-      pulse: {
-        animation: "kb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
-        __keyframe: "@keyframes kb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }"
-      },
-      bounce: {
-        animation: "kb-bounce 1s infinite",
-        __keyframe: "@keyframes kb-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1) } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1) } }"
-      }
-    };
-    const def = defs[value];
-    return def ? def : null;
+  animate: ({ value, isArbitrary }, theme) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return buildAnimationValue(value.replace(/_/g, " "), theme.keyframes);
+    if (value in BUILTIN_ANIMATIONS) return BUILTIN_ANIMATIONS[value];
+    const custom = theme.animation?.[value];
+    return custom ? buildAnimationValue(custom, theme.keyframes) : null;
   },
   // ── Line-clamp (web-only) ─────────────────────────────────────────────────
   "line-clamp": ({ value }) => {
@@ -3411,9 +3459,21 @@ function kbach(userConfigOrOptions) {
     },
     // When any JS/TS file imports kbach.css, prepend a disableRuntimeCSS() call
     // so styles come solely from the static stylesheet — no duplicate injection.
+    //
+    // Anchored to the START of a source line (^\s*, with the m flag) rather than a
+    // bare \bimport\b anywhere in the file — disableRuntimeCSS() sets a globalThis
+    // flag with no way to re-enable it, so a false match here doesn't just misfire
+    // once, it silently kills ALL runtime CSS injection for the rest of that page's
+    // JS lifetime, including on completely unrelated components. A real import
+    // statement is always the first token on its line (give or take whitespace);
+    // this same text appearing as part of a STRING — e.g. a docs site's own code
+    // sample literally showing `import "./kbach.css";` as example text, which is
+    // exactly what happened here — is never positioned that way, since something
+    // always precedes it syntactically (a quote, JSX braces, an array bracket, …).
     transform(code, id) {
       if (!/\.(tsx?|jsx?|mjs?)$/.test(id)) return;
-      if (!/\bimport\b[^;]*['"].*kbach\.css['"]/i.test(code)) return;
+      if (!/^\s*import\b[^;]*['"][^'"]*kbach\.css['"]/im.test(code)) return;
+      warn(`disableRuntimeCSS() auto-triggered by an import in ${id.replace(/\\/g, "/")}`);
       return {
         code: `import { disableRuntimeCSS } from '@kbach/react';
 disableRuntimeCSS();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",