@kbach/react 0.6.11 → 0.6.13

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-Z5SUFJ53.mjs → chunk-7DHBNCL5.mjs}

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

package/dist/{chunk-OWJUMH2V.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 }) => {
@@ -1793,6 +1837,38 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    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;
@@ -1986,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 }) => {
@@ -1954,6 +1998,38 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    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;
@@ -2147,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-OWJUMH2V.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 }) => {
@@ -1912,6 +1956,38 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    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;
@@ -2105,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-Z5SUFJ53.mjs";
-import "./chunk-OWJUMH2V.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 }) => {
@@ -1913,6 +1957,38 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    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;
@@ -2106,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-Z5SUFJ53.mjs";
+} from "./chunk-7DHBNCL5.mjs";
 import {
   registerWebElement
-} from "./chunk-OWJUMH2V.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 }) => {
@@ -1727,6 +1771,38 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    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;
@@ -1920,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 }) => {
@@ -3232,7 +3290,7 @@ function pushTemplateLiteralBody(body, into) {
   while ((im = interpolationRe.exec(body)) !== null) {
     pushClassLikeStrings(im[0], into);
   }
-  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
 }
 function pushClassLikeStrings(text, into) {
   const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
@@ -3245,9 +3303,9 @@ function pushClassLikeStrings(text, into) {
 }
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
-  const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
+  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
   let m;
-  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
   const jsxExprRe = /(?:className|kb)=\{/g;
   while ((m = jsxExprRe.exec(code)) !== null) {
     let depth = 1;

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 }) => {
@@ -1693,6 +1737,38 @@ var RESOLVERS = {
     };
     return offsets[value] ? { textUnderlineOffset: offsets[value] } : null;
   },
+  // ── Content (web-only — for before:/after: pseudo-elements, which don't exist on native) ──
+  // Arbitrary value carries its own quotes from the bracket syntax (content-['*'] parses to
+  // the literal string 'you can see it' quotes included), so it passes straight through as a
+  // valid `content: '*'` CSS value with no extra wrapping needed.
+  content: ({ value, isArbitrary }) => {
+    if (!getEffectiveIsWeb()) return null;
+    if (isArbitrary) return { content: value };
+    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;
@@ -1886,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 }) => {
@@ -3198,7 +3256,7 @@ function pushTemplateLiteralBody(body, into) {
   while ((im = interpolationRe.exec(body)) !== null) {
     pushClassLikeStrings(im[0], into);
   }
-  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, " "), into);
+  pushTokens(body.replace(/\$\{(?:[^{}]|\{[^{}]*\})*\}/g, () => "$"), into);
 }
 function pushClassLikeStrings(text, into) {
   const quotedStringRe = /(["'`])((?:(?!\1).)*)\1/g;
@@ -3211,9 +3269,9 @@ function pushClassLikeStrings(text, into) {
 }
 function extractClassStrings(code) {
   const found = /* @__PURE__ */ new Set();
-  const simpleRe = /(?:className|kb)=["']([^"']+)["']/g;
+  const simpleRe = /(?:className|kb)=(["'])((?:(?!\1).)*)\1/g;
   let m;
-  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[1], found);
+  while ((m = simpleRe.exec(code)) !== null) pushTokens(m[2], found);
   const jsxExprRe = /(?:className|kb)=\{/g;
   while ((m = jsxExprRe.exec(code)) !== null) {
     let depth = 1;

package/package.json

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