feat(tasty): improved inset, outline, and textOverflow styles (#963)

Author: tenphi

.changeset/babel-plugin-config-alignment.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Aligned babel plugin configuration interface with runtime `TastyConfig`. The `TastyZeroConfig` now supports `plugins` and `parserCacheSize` options, and uses the shared `configure()` function internally.

.changeset/chunk-reorganization.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Reorganized internal style chunk definitions. Display-related styles (`display`, `hide`, `textOverflow`, `overflow`, `whiteSpace`, `scrollbar`) are now in a DISPLAY chunk. Layout styles (`flow`, `gap`, grid/flex properties) are in a separate LAYOUT chunk.

.changeset/dimension-min-max-props.md

@@ -0,0 +1,13 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Consolidated style handlers to reduce redundant handler registrations:
+
+- `widthStyle` now handles `minWidth`, `maxWidth` directly
+- `heightStyle` now handles `minHeight`, `maxHeight` directly
+- `presetStyle` now handles all typography props (`fontSize`, `lineHeight`, `fontWeight`, `letterSpacing`, `textTransform`, `fontStyle`, `fontFamily`, `font`) with or without `preset` defined
+
+Font props support number values: `fontSize={14}` → `font-size: 14px`, `fontWeight={700}` → `font-weight: 700`.
+
+The `font` prop has special handling: `font="monospace"` → `var(--monospace-font)`, `font={true}` → `var(--font)`, `font="CustomFont"` → `CustomFont, var(--font)`. The `fontFamily` prop is a direct value without fallback.

.changeset/improved-inset-styles.md

@@ -0,0 +1,10 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Refactored `inset` style handler with smart output strategy:
+
+- When using the `inset` prop or `insetBlock`/`insetInline` props: outputs `inset` CSS shorthand for efficiency
+- When using individual `top`, `right`, `bottom`, `left` props: outputs individual CSS properties to allow proper CSS cascade with modifiers
+
+This fix resolves an issue where conditional modifiers on individual direction props (e.g., `top: { '': 0, 'side=bottom': 'initial' }`) would incorrectly override all four directions instead of just the specified one.

.changeset/outline-offset-syntax.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+**Breaking:** Changed `outline` style syntax to use slash separator for offset: `outline: '2px solid #red / 4px'` instead of the previous space-separated format. Also added `outlineOffset` as a direct style prop.

.changeset/parser-slash-separator.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Added slash separator support in style parser. Style values can now use `/` surrounded by whitespace to define parts (e.g., `'ellipsis / 3'`, `'2px solid #red / 4px'`). Each part is available via `groups[n].parts` array for style handlers.

.changeset/text-overflow-style.md

@@ -0,0 +1,12 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+**Breaking:** Enhanced `textOverflow` style handler with automatic setup for text truncation. Previously, `textOverflow: 'ellipsis'` only set `text-overflow: ellipsis` (which doesn't work without `overflow: hidden`). Now it automatically adds `overflow: hidden` and `white-space: nowrap` for single-line ellipsis, making it actually functional.
+
+New features:
+- `textOverflow: 'ellipsis'` - single-line truncation with ellipsis (now works correctly)
+- `textOverflow: 'ellipsis / 3'` - multi-line truncation (3 lines) with `-webkit-line-clamp`
+- `textOverflow: 'clip'` - single-line clip with `overflow: hidden`
+
+The `displayStyle` handler now manages `display`, `hide`, `textOverflow`, `overflow`, and `whiteSpace` together. User-provided `overflow` and `whiteSpace` values take precedence over auto-generated ones from `textOverflow`.

.size-limit.cjs

@@ -27,13 +27,13 @@ module.exports = [
     path: './dist/es/index.js',
     webpack: true,
     import: '{ Button }',
-    limit: '55kB',
+    limit: '56kB',
   },
   {
     name: 'Tree shaking (just an Icon)',
     path: './dist/es/index.js',
     webpack: true,
     import: '{ AiIcon }',
-    limit: '32kB',
+    limit: '33kB',
   },
 ];

src/stories/Tasty.docs.mdx

@@ -769,6 +769,19 @@ radius: '1r top',                 // Top corners only (top-left, top-right)
 // Directional modifiers: top, right, bottom, left
 ```
 
+#### `outline` - Focus/Highlight Outline
+Enhanced outline syntax with slash separator for offset:
+```jsx
+outline: true,                    // Default: '1ow solid var(--outline-color)'
+outline: '2px solid #purple',     // Custom width, style, color
+outline: '2px solid #red / 4px',  // With offset (slash separator)
+outline: '2px / 4px',             // Width with offset (simpler form)
+outlineOffset: '4px',             // Offset as separate prop
+
+// Priority: slash syntax in outline takes precedence over outlineOffset prop
+// Available styles: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
+```
+
 ### Typography Properties
 
 #### `preset` - Typography Presets
@@ -787,6 +800,20 @@ preset: 'h2 strong',              // Bold heading 2
 // Captions: c1, c2, tag
 ```
 
+#### `textOverflow` - Text Truncation
+Automatic setup for text truncation with ellipsis or multi-line clamping:
+```jsx
+textOverflow: 'ellipsis',         // Single-line truncation with ellipsis
+textOverflow: 'ellipsis / 3',     // Multi-line clamping (3 lines)
+textOverflow: 'clip',             // Single-line truncation without ellipsis
+textOverflow: 'clip / 2',         // Multi-line clip (2 lines)
+textOverflow: true,               // Reset to initial
+
+// Single-line: auto-adds overflow: hidden, white-space: nowrap
+// Multi-line: auto-adds display: -webkit-box, -webkit-line-clamp
+// User-provided overflow/whiteSpace take precedence
+```
+
 #### `align`, `justify`, & `place` - Alignment
 Unified alignment control for flex and grid:
 ```jsx

src/stories/playground/Playground.stories.tsx

@@ -103,7 +103,7 @@ function PlaygroundComponent() {
 
   const toolbar = (
     <>
-      <Text preset="t3" fontWeight={600} color="#dark-02">
+      <Text preset="h6" color="#dark-02">
         Tasty Playground
       </Text>
       {isModified && (