@cube-dev/ui-kit 0.0.0-canary-60792f3 → 0.0.0-canary-12fc65f

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-60792f3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-12fc65f | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-60792f3";
+const VERSION = "0.0.0-canary-12fc65f";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/tasty/styles.md

@@ -104,6 +104,8 @@ Element padding with directional modifiers and multi-group support. Use **comma-
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`) instead of the `padding` shorthand. Useful when children need to selectively inherit individual directions.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
@@ -112,6 +114,7 @@ Element padding with directional modifiers and multi-group support. Use **comma-
 | `"1x left right"` | Left and right `1x`, top/bottom `0` |
 | `"1x, 2x top"` | All sides `1x`, then top overridden to `2x` |
 | `"1x, 2x top bottom"` | Left/right `1x`, top/bottom `2x` |
+| `"2x longhand"` | All sides `2x`, output as 4 individual `padding-*` properties |
 | `true` | All sides `1x` |
 | Number | Converted to `px` |
 
@@ -129,6 +132,8 @@ Element margin. Same syntax, modifiers, and multi-group support as `padding`.
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`margin-top`, etc.) instead of the `margin` shorthand.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
@@ -190,12 +195,15 @@ Positioning offsets with directional modifiers and multi-group support. Same dir
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS properties (`top`, `right`, `bottom`, `left`) instead of the `inset` shorthand.
+
 | Value | Effect |
 |-------|--------|
 | `"0"` | All sides `0` |
 | `"2x top"` | Top `2x`, right/bottom/left `auto` |
 | `"1x left right"` | Left and right `1x`, top/bottom `auto` |
 | `"0, 2x top"` | All sides `0`, then top overridden to `2x` |
+| `"0 longhand"` | All sides `0`, output as individual `top`/`right`/`bottom`/`left` |
 | `true` | All sides `0` |
 
 Later comma-separated groups override earlier groups for conflicting directions.
@@ -281,12 +289,15 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS properties (`border-top`, `border-right`, `border-bottom`, `border-left`) instead of the `border` shorthand. Useful when children need to selectively inherit individual sides.
+
 | Value | Effect |
 |-------|--------|
 | `true` | Default border (`1bw solid #border`) on all sides |
 | `"2bw dashed #purple"` | All sides: 2bw dashed purple |
 | `"2bw top"` | Top only: 2bw solid `#border`, others: 0 |
 | `"dotted #danger left right"` | Left/right: 1bw dotted `#danger`, others: 0 |
+| `"1bw longhand"` | All sides: 1bw solid `#border`, output as 4 individual `border-*` properties |
 | `"1bw #red, 2bw #blue top"` | All sides: 1bw solid `#red`, top overridden to 2bw solid `#blue` |
 | `"1bw, dashed top bottom, #purple left right"` | Base: 1bw solid `#border`, top/bottom: 1bw dashed `#border`, left/right: 1bw solid `#purple` |
 
@@ -306,9 +317,12 @@ Border radius with shape presets and directional modifiers.
 | `"ellipse"` | Circular (`50%`) |
 | `"leaf"` | Asymmetric: sharp, round, sharp, round |
 | `"backleaf"` | Asymmetric: round, sharp, round, sharp |
+| `"inherit"` | Inherit border-radius from parent |
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left` — rounds only the specified corners.
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`) instead of the `border-radius` shorthand. Useful when children need to selectively inherit individual corners via `radius: 'inherit left'`.
+
 | Value | Effect |
 |-------|--------|
 | `"2r"` | All corners `2r` |
@@ -317,6 +331,9 @@ Border radius with shape presets and directional modifiers.
 | `"1r top"` | Top-left and top-right `1r`, bottom-left and bottom-right `0` |
 | `"leaf"` | Alternating sharp/round corners (top-left `0`, top-right `1r`, bottom-right `0`, bottom-left `1r`) |
 | `"backleaf"` | Inverse leaf (top-left `1r`, top-right `0`, bottom-right `1r`, bottom-left `0`) |
+| `"1r longhand"` | All corners `1r`, output as 4 individual `border-*-radius` properties |
+| `"inherit"` | All corners inherit from parent (`border-radius: inherit`) |
+| `"inherit right"` | Right corners inherit from parent (uses longhand properties) |
 
 ### `outline`
 

package/docs/tasty/tasty-static.md

@@ -157,6 +157,7 @@ module.exports = {
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `output` | `string` | `'tasty.css'` | Path for generated CSS file |
+| `mode` | `'file' \| 'inject'` | `'file'` | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS (see [Inject Mode](#inject-mode)) |
 | `configFile` | `string` | — | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack. |
 | `config` | `TastyZeroConfig \| () => TastyZeroConfig` | `{}` | Inline config object or factory function. Takes precedence over `configFile`. |
 | `configDeps` | `string[]` | `[]` | Absolute file paths that affect config (for cache invalidation) |
@@ -224,6 +225,7 @@ export default withTastyZero({
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `output` | `string` | `'public/tasty.css'` | Output path for CSS relative to project root |
+| `mode` | `'file' \| 'inject'` | `'file'` | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS |
 | `enabled` | `boolean` | `true` | Enable/disable the plugin |
 | `configFile` | `string` | — | Path to a TS/JS module that default-exports `TastyZeroConfig`. Recommended for Turbopack compatibility. |
 | `config` | `TastyZeroConfig` | — | Inline config object. For static configs that don't change during dev. |
@@ -333,6 +335,91 @@ export const Button = () => <button className={button}>Click</button>;
 
 ---
 
+## Inject Mode
+
+By default the Babel plugin writes CSS to a file (`mode: 'file'`). **Inject mode** (`mode: 'inject'`) embeds CSS inline in your JavaScript and injects it at runtime via a tiny injector. No CSS file is produced.
+
+This is ideal for **reusable components**, **extensions**, and **libraries** where consumers shouldn't need to manage an external CSS file.
+
+### How It Works
+
+1. The Babel plugin extracts CSS at build time (same pipeline as file mode).
+2. Instead of writing to a `.css` file, the CSS is embedded as string literals in the JS output.
+3. The `@tenphi/tasty/static` import is rewritten to `@tenphi/tasty/static/inject`.
+4. Each `tastyStatic` call becomes a self-contained expression that injects its CSS and evaluates to a `StaticStyle` object.
+
+### Configuration
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['@tenphi/tasty/babel-plugin', {
+      mode: 'inject',
+      config: {
+        states: { '@mobile': '@media(w < 768px)' },
+      },
+    }]
+  ]
+};
+```
+
+With Next.js:
+
+```typescript
+// next.config.ts
+import { withTastyZero } from '@tenphi/tasty/next';
+
+export default withTastyZero({
+  mode: 'inject',
+  configFile: './app/tasty-zero.config.ts',
+})({
+  reactStrictMode: true,
+});
+```
+
+When `mode` is `'inject'`, the `output` and `injectImport` options are ignored.
+
+### Build Transformation (inject mode)
+
+**Before:**
+
+```tsx
+import { tastyStatic } from '@tenphi/tasty/static';
+
+const button = tastyStatic({
+  padding: '2x 4x',
+  fill: '#purple',
+});
+
+tastyStatic('.heading', { preset: 'h1' });
+```
+
+**After:**
+
+```tsx
+import { injectCSS as _$i } from '@tenphi/tasty/static/inject';
+
+const button = (_$i("ts3f2a1b ts8c4d2e", ".ts3f2a1b.ts3f2a1b{padding:16px 32px}\n.ts8c4d2e.ts8c4d2e{background:#9370db}"), {
+  className: 'ts3f2a1b ts8c4d2e',
+  styles: { padding: '2x 4x', fill: '#purple' },
+  toString() { return this.className; }
+});
+
+_$i(".heading", ".heading{font-size:2.5rem;font-weight:700;line-height:1.2}");
+```
+
+### Dev Mode / HMR
+
+Class names are content-hashed (`ts` + MD5). When styles change, a new hash produces a new `_$i` call that injects fresh CSS. The injector deduplicates by id, so unchanged styles are skipped. Old CSS stays in the DOM but is harmless since no elements reference those class names.
+
+### Limitations (inject mode)
+
+- **Client-side only** — Styles are injected via the DOM, so they are not available during SSR. For server-rendered apps, use `mode: 'file'` or the runtime `tasty()`.
+- **Larger JS bundle** — CSS is embedded in JavaScript, increasing bundle size. Best suited for components and extensions, not full-app styling.
+
+---
+
 ## Style Extension
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-60792f3",
+  "version": "0.0.0-canary-12fc65f",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -74,7 +74,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/tasty": "1.1.0",
+    "@tenphi/tasty": "1.2.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",