@cube-dev/ui-kit 0.99.3 → 0.100.0

package/types/tasty/injector/index.d.ts

@@ -58,6 +58,62 @@ export declare function keyframes(steps: import('./types').KeyframesSteps, nameO
     root?: Document | ShadowRoot;
     name?: string;
 }): import('./types').KeyframesResult;
+export interface PropertyOptions {
+    /**
+     * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
+     */
+    syntax?: string;
+    /**
+     * Whether the property inherits from parent elements
+     * @default true
+     */
+    inherits?: boolean;
+    /**
+     * Initial value for the property
+     */
+    initialValue?: string | number;
+    /**
+     * Shadow root or document to inject into
+     */
+    root?: Document | ShadowRoot;
+}
+/**
+ * Define a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * Re-registering the same property name is a no-op.
+ *
+ * @param name - The custom property name (must start with --)
+ * @param options - Property configuration
+ *
+ * @example
+ * ```ts
+ * // Define a color property that can be animated
+ * property('--my-color', {
+ *   syntax: '<color>',
+ *   initialValue: 'red',
+ * });
+ *
+ * // Define an angle property
+ * property('--rotation', {
+ *   syntax: '<angle>',
+ *   inherits: false,
+ *   initialValue: '0deg',
+ * });
+ * ```
+ */
+export declare function property(name: string, options?: PropertyOptions): void;
+/**
+ * Check if a CSS @property has already been defined
+ *
+ * @param name - The custom property name to check
+ * @param options - Options including root
+ */
+export declare function isPropertyDefined(name: string, options?: {
+    root?: Document | ShadowRoot;
+}): boolean;
 /**
  * Get CSS text from all sheets (for SSR)
  */
@@ -93,6 +149,6 @@ export declare function destroy(root?: Document | ShadowRoot): void;
  * Create a new isolated injector instance
  */
 export declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, } from './types';
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, PropertyDefinition, } from './types';
 export { StyleInjector } from './injector';
 export { SheetManager } from './sheet-manager';

package/types/tasty/injector/injector.d.ts

@@ -3,7 +3,7 @@
  * Eliminates CSS string parsing for better performance
  */
 import { StyleResult } from '../pipeline';
-import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, RawCSSResult, StyleInjectorConfig } from './types';
+import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from './types';
 export declare class StyleInjector {
     private sheetManager;
     private config;
@@ -82,19 +82,31 @@ export declare class StyleInjector {
         root?: Document | ShadowRoot;
     }): void;
     /**
-     * Define a CSS @property custom property
+     * Define a CSS @property custom property.
+     *
+     * Accepts tasty token syntax for the property name:
+     * - `$name` → defines `--name`
+     * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
+     * - `--name` → defines `--name` (legacy format)
+     *
      * Example:
      * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
+     *
      * Note: No caching or dispose — this defines a global property.
+     *
+     * If the same property is registered with different options, a warning is emitted
+     * but the original definition is preserved (CSS @property cannot be redefined).
      */
-    property(name: string, options?: {
-        syntax?: string;
-        inherits?: boolean;
-        initialValue?: string | number;
+    property(name: string, options?: PropertyDefinition & {
         root?: Document | ShadowRoot;
     }): void;
     /**
-     * Check whether a given @property name was already injected by this injector
+     * Check whether a given @property name was already injected by this injector.
+     *
+     * Accepts tasty token syntax:
+     * - `$name` → checks `--name`
+     * - `#name` → checks `--name-color`
+     * - `--name` → checks `--name` (legacy format)
      */
     isPropertyDefined(name: string, options?: {
         root?: Document | ShadowRoot;

package/types/tasty/injector/types.d.ts

@@ -88,8 +88,8 @@ export interface RootRegistry {
     keyframesNameToContent: Map<string, string>;
     /** Counter for generating keyframes names like k0, k1, k2... */
     keyframesCounter: number;
-    /** Set of injected @property names for tracking */
-    injectedProperties: Set<string>;
+    /** Map of injected @property names to their normalized declarations for tracking */
+    injectedProperties: Map<string, string>;
     /** Global rules tracking for index adjustment */
     globalRules: Map<string, RuleInfo>;
 }
@@ -112,6 +112,18 @@ export interface KeyframesCacheEntry {
     refCount: number;
     info: KeyframesInfo;
 }
+/**
+ * Definition for a CSS @property at-rule.
+ * Used to define custom property syntax, inheritance, and initial value.
+ */
+export interface PropertyDefinition {
+    /** CSS syntax string (e.g., '<color>', '<angle>', '<number>') */
+    syntax?: string;
+    /** Whether the property inherits (default: true) */
+    inherits?: boolean;
+    /** Initial value for the property */
+    initialValue?: string | number;
+}
 export interface RawCSSInfo {
     /** Unique identifier for this raw CSS block */
     id: string;

package/types/tasty/parser/const.d.ts

@@ -3,3 +3,4 @@ export declare const COLOR_FUNCS: Set<string>;
 export declare const RE_UNIT_NUM: RegExp;
 export declare const RE_NUMBER: RegExp;
 export declare const RE_HEX: RegExp;
+export declare const RE_RAW_UNIT: RegExp;

package/types/tasty/parser/parser.d.ts

@@ -7,6 +7,12 @@ export declare class StyleParser {
     setFuncs(funcs: Required<ParserOptions>['funcs']): void;
     setUnits(units: Required<ParserOptions>['units']): void;
     updateOptions(patch: Partial<ParserOptions>): void;
+    /**
+     * Clear the parser cache.
+     * Call this when external state that affects parsing results has changed
+     * (e.g., predefined tokens).
+     */
+    clearCache(): void;
     /**
      * Get the current units configuration.
      */

package/types/tasty/parser/tokenizer.d.ts

@@ -1,2 +1,2 @@
-export type TokenCallback = (token: string, isComma: boolean, precedingChar: string | null) => void;
+export type TokenCallback = (token: string, isComma: boolean, isSlash: boolean, precedingChar: string | null) => void;
 export declare function scan(src: string, cb: TokenCallback): void;

package/types/tasty/parser/types.d.ts

@@ -3,13 +3,37 @@ export declare enum Bucket {
     Value = 1,
     Mod = 2
 }
+/**
+ * A part within a group, representing a slash-separated segment.
+ * For example, in `'2px solid #red / 4px'`, there are two parts:
+ * - Part 0: `2px solid #red`
+ * - Part 1: `4px`
+ */
+export interface StyleDetailsPart {
+    mods: string[];
+    values: string[];
+    colors: string[];
+    all: string[];
+    output: string;
+}
+/**
+ * A group of style details, representing a comma-separated segment.
+ * Contains aggregated values from all parts for backward compatibility,
+ * plus the structured `parts` array for handlers that need slash separation.
+ */
 export interface StyleDetails {
     input: string;
     output: string;
+    /** Aggregated mods from all parts (backward compatible) */
     mods: string[];
+    /** Aggregated values from all parts (backward compatible) */
     values: string[];
+    /** Aggregated colors from all parts (backward compatible) */
     colors: string[];
+    /** Aggregated all tokens from all parts (backward compatible) */
     all: string[];
+    /** Slash-separated parts within this group */
+    parts: StyleDetailsPart[];
 }
 export interface ProcessedStyle {
     output: string;
@@ -21,5 +45,11 @@ export interface ParserOptions {
     units?: Record<string, string | UnitHandler>;
     cacheSize?: number;
 }
+export declare const makeEmptyPart: () => StyleDetailsPart;
 export declare const makeEmptyDetails: () => StyleDetails;
-export declare const finalizeGroup: (d: StyleDetails) => StyleDetails;
+export declare const finalizePart: (p: StyleDetailsPart) => StyleDetailsPart;
+/**
+ * Aggregate parts into a StyleDetails group.
+ * Combines all parts' arrays into group-level arrays for backward compatibility.
+ */
+export declare const finalizeGroup: (d: StyleDetails, parts: StyleDetailsPart[]) => StyleDetails;

package/types/tasty/plugins/types.d.ts

@@ -1,6 +1,7 @@
 import type { StyleDetails, UnitHandler } from '../parser/types';
+import type { StyleHandlerDefinition } from '../utils/styles';
 /**
- * A tasty plugin that extends the style system with custom functions, units, or states.
+ * A tasty plugin that extends the style system with custom functions, units, states, or handlers.
  */
 export interface TastyPlugin {
     /** Unique name for the plugin (used for debugging and conflict detection) */
@@ -11,6 +12,24 @@ export interface TastyPlugin {
     units?: Record<string, string | UnitHandler>;
     /** Custom state aliases (e.g., `'@mobile': '@media(w < 768px)'`) */
     states?: Record<string, string>;
+    /**
+     * Custom style handlers that transform style properties into CSS declarations.
+     * Handlers replace built-in handlers for the same style name.
+     * @example
+     * ```ts
+     * handlers: {
+     *   // Simple handler - lookup style inferred from key
+     *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
+     *   // Multi-property handler
+     *   spacing: [['gap', 'padding'], ({ gap, padding }) => ({ ... })],
+     * }
+     * ```
+     */
+    handlers?: Record<string, StyleHandlerDefinition>;
+    /** Predefined tokens replaced during style parsing (`$name` or `#name`) */
+    tokens?: {
+        [key: `$${string}` | `#${string}`]: string | number;
+    };
 }
 /**
  * A factory function that creates a TastyPlugin.

package/types/tasty/properties/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Properties Utilities
+ *
+ * Utilities for extracting and processing CSS @property definitions in styles.
+ * Unlike keyframes, properties are permanent once registered and don't need cleanup.
+ *
+ * Property names use tasty token syntax:
+ * - `$name` for regular properties → `--name`
+ * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>')
+ */
+import { PropertyDefinition } from '../injector/types';
+import { Styles } from '../styles/types';
+/**
+ * Validate a CSS custom property name (the part after --).
+ * Returns true if the name is valid for use as a CSS custom property.
+ */
+export declare function isValidPropertyName(name: string): boolean;
+/**
+ * Result of parsing a property token.
+ */
+export interface ParsedPropertyToken {
+    /** The CSS custom property name (e.g., '--my-prop') */
+    cssName: string;
+    /** Whether this is a color property */
+    isColor: boolean;
+    /** Whether the token was valid */
+    isValid: boolean;
+    /** Error message if invalid */
+    error?: string;
+}
+/**
+ * Check if styles object has local @properties definition.
+ * Fast path: single property lookup.
+ */
+export declare function hasLocalProperties(styles: Styles): boolean;
+/**
+ * Extract local @properties from styles object.
+ * Returns null if no local properties (fast path).
+ */
+export declare function extractLocalProperties(styles: Styles): Record<string, PropertyDefinition> | null;
+/**
+ * Parse a property token name and return the CSS property name and whether it's a color.
+ * Supports tasty token syntax and validates the property name.
+ *
+ * Token formats:
+ * - `$name` → { cssName: '--name', isColor: false }
+ * - `#name` → { cssName: '--name-color', isColor: true }
+ * - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
+ * - `name` → { cssName: '--name', isColor: false } (legacy)
+ *
+ * @param token - The property token to parse
+ * @returns Parsed result with cssName, isColor, isValid, and optional error
+ */
+export declare function parsePropertyToken(token: string): ParsedPropertyToken;
+/**
+ * Normalize a property name to the CSS custom property format.
+ *
+ * @deprecated Use parsePropertyToken instead for proper token handling
+ */
+export declare function normalizePropertyName(name: string): string;
+/**
+ * Normalize a property definition to a consistent string representation.
+ * Used for comparing definitions to detect changes/conflicts.
+ *
+ * Keys are sorted alphabetically to ensure consistent comparison:
+ * { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
+ */
+export declare function normalizePropertyDefinition(def: PropertyDefinition): string;
+/**
+ * Result of getEffectiveDefinition.
+ */
+export interface EffectiveDefinitionResult {
+    /** The CSS custom property name */
+    cssName: string;
+    /** The effective property definition */
+    definition: PropertyDefinition;
+    /** Whether the token was valid */
+    isValid: boolean;
+    /** Error message if invalid */
+    error?: string;
+}
+/**
+ * Get the effective property definition for a token.
+ * For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
+ *
+ * @param token - Property token ($name, #name, --name, or plain name)
+ * @param userDefinition - User-provided definition options
+ * @returns Effective definition with cssName, definition, isValid, and optional error
+ */
+export declare function getEffectiveDefinition(token: string, userDefinition: PropertyDefinition): EffectiveDefinitionResult;

package/types/tasty/styles/border.d.ts

@@ -1,11 +1,19 @@
 /**
+ * Border style handler with multi-group support.
  *
- * @param border
- * @return {{border: string}|*}
+ * Single group (backward compatible):
+ * - `border="1bw solid #red"` - all sides
+ * - `border="1bw solid #red top left"` - only top and left
+ *
+ * Multi-group (new):
+ * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
+ * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
+ *
+ * Later groups override earlier groups for conflicting directions.
  */
 export declare function borderStyle({ border }: {
     border: any;
-}): {} | undefined;
+}): Record<string, string> | undefined;
 export declare namespace borderStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/boxShadow.combinator.d.ts

@@ -1,6 +1,6 @@
-export declare function boxShadowCombinator(styles: any): "" | {
+export declare function boxShadowCombinator(styles: any): {
     'box-shadow': string;
-};
+} | undefined;
 export declare namespace boxShadowCombinator {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/color.d.ts

@@ -1,8 +1,8 @@
 export declare function colorStyle({ color }: {
     color: any;
-}): "" | {
+}): {
     color: any;
-};
+} | undefined;
 export declare namespace colorStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/dimension.d.ts

@@ -1 +1,16 @@
-export declare function dimensionStyle(name: any): (val: any) => "" | Record<string, string | string[]>;
+interface DimensionProps {
+    value?: string | number | boolean;
+    min?: string | number | boolean;
+    max?: string | number | boolean;
+}
+/**
+ * Creates a dimension style handler for width or height.
+ *
+ * Supports:
+ * - Main dimension prop (width/height) with syntax for min/max
+ * - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
+ *
+ * Priority: Individual min/max props override values from main prop syntax
+ */
+export declare function dimensionStyle(name: 'width' | 'height'): ({ value, min, max }: DimensionProps) => Record<string, string | string[]> | undefined;
+export {};

package/types/tasty/styles/display.d.ts

@@ -1,9 +1,27 @@
-export declare function displayStyle({ display, hide }: {
-    display: any;
-    hide: any;
-}): {
-    display: any;
-};
+interface DisplayStyleProps {
+    display?: string;
+    hide?: boolean;
+    textOverflow?: string | boolean;
+    overflow?: string;
+    whiteSpace?: string;
+}
+/**
+ * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
+ *
+ * textOverflow syntax:
+ * - `textOverflow="ellipsis"` - single-line truncation with ellipsis
+ * - `textOverflow="ellipsis / 3"` - multi-line clamping (3 lines) with ellipsis
+ * - `textOverflow="clip"` - single-line truncation with clip (no ellipsis)
+ * - `textOverflow="clip / 2"` - multi-line clip (2 lines)
+ * - `textOverflow={true}` or `textOverflow="initial"` - reset to initial
+ *
+ * Priority:
+ * 1. `hide` takes precedence (display: none)
+ * 2. Multi-line `textOverflow` forces display: -webkit-box
+ * 3. Single-line `textOverflow` forces white-space: nowrap and overflow: hidden
+ */
+export declare function displayStyle({ display, hide, textOverflow, overflow, whiteSpace, }: DisplayStyleProps): Record<string, string | number> | undefined;
 export declare namespace displayStyle {
     var __lookupStyles: string[];
 }
+export {};

package/types/tasty/styles/fade.d.ts

@@ -1,9 +1,9 @@
 export declare function fadeStyle({ fade }: {
     fade: any;
-}): "" | {
-    mask: any;
+}): {
+    mask: string;
     'mask-composite': string;
-};
+} | undefined;
 export declare namespace fadeStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/fill.d.ts

@@ -1,16 +1,26 @@
-export declare function fillStyle({ fill }: {
+export declare function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background, }: {
     fill: any;
-}): "" | {
-    'background-color': any;
-};
+    backgroundColor: any;
+    image: any;
+    backgroundImage: any;
+    backgroundPosition: any;
+    backgroundSize: any;
+    backgroundRepeat: any;
+    backgroundAttachment: any;
+    backgroundOrigin: any;
+    backgroundClip: any;
+    background: any;
+}): Record<string, string> | {
+    background: any;
+} | undefined;
 export declare namespace fillStyle {
     var __lookupStyles: string[];
 }
 export declare function svgFillStyle({ svgFill }: {
     svgFill: any;
-}): "" | {
+}): {
     fill: any;
-};
+} | undefined;
 export declare namespace svgFillStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/height.d.ts

@@ -1,6 +1,10 @@
-export declare function heightStyle({ height }: {
-    height: any;
-}): "" | Record<string, string | string[]>;
+interface HeightStyleProps {
+    height?: string | number | boolean;
+    minHeight?: string | number | boolean;
+    maxHeight?: string | number | boolean;
+}
+export declare function heightStyle({ height, minHeight, maxHeight, }: HeightStyleProps): Record<string, string | string[]> | undefined;
 export declare namespace heightStyle {
     var __lookupStyles: string[];
 }
+export {};

package/types/tasty/styles/index.d.ts

@@ -1,5 +1,7 @@
+import { styleHandlers } from './predefined';
 declare const STYLE_HANDLER_MAP: {
     [x: string]: import("..").StyleHandler[];
 }, defineCustomStyle: typeof import("./predefined").defineCustomStyle, defineStyleAlias: typeof import("./predefined").defineStyleAlias;
-export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
+export { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias, styleHandlers, };
 export * from './createStyle';
+export { normalizeHandlerDefinition, registerHandler, resetHandlers, validateHandlerResult, } from './predefined';

package/types/tasty/styles/inset.d.ts

@@ -1,6 +1,38 @@
-export declare function insetStyle({ inset }: {
-    inset: any;
-}): any;
+/**
+ * Inset style handler.
+ *
+ * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
+ * when only individual direction props are specified. This allows CSS cascade to work
+ * correctly when modifiers override only some directions.
+ *
+ * Example problem with using `inset` shorthand everywhere:
+ *   styles: {
+ *     top: { '': 0, 'side=bottom': 'initial' },
+ *     right: { '': 0, 'side=left': 'initial' },
+ *     bottom: { '': 0, 'side=top': 'initial' },
+ *     left: { '': 0, 'side=right': 'initial' },
+ *   }
+ *
+ * If we output `inset` for both cases:
+ *   - Default: inset: 0 0 0 0
+ *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions
+ *
+ * With individual properties:
+ *   - Default: top: 0; right: 0; bottom: 0; left: 0
+ *   - side=bottom: top: initial  ← CORRECT! Only overrides top
+ *
+ * The `inset` shorthand is only used when the base `inset` prop is specified
+ * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).
+ */
+export declare function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left, }: {
+    inset?: string | number | boolean;
+    insetBlock?: string | number | boolean;
+    insetInline?: string | number | boolean;
+    top?: string | number | boolean;
+    right?: string | number | boolean;
+    bottom?: string | number | boolean;
+    left?: string | number | boolean;
+}): Record<string, string>;
 export declare namespace insetStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/styles/list.d.ts

@@ -3,10 +3,10 @@ export declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn
 export declare const BLOCK_INNER_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
 export declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
 export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
-export declare const COLOR_STYLES: readonly ["color", "fill", "fade"];
+export declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
 export declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 export declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
 export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
 export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
-export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];

package/types/tasty/styles/outline.d.ts

@@ -1,17 +1,23 @@
+interface OutlineStyleProps {
+    outline?: string | boolean | number;
+    outlineOffset?: string | number;
+}
 /**
+ * Generates CSS for outline property with optional offset.
+ *
+ * Syntax:
+ * - `outline="2px solid #red"` - outline only
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+ * - `outline="2px / 4px"` - width with offset (simpler form)
+ * - `outline={true}` - default 1ow solid outline
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+ *
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
  *
- * @param outline
- * @return {{outline: string}|*}
+ * @return CSS properties for outline and optionally outline-offset
  */
-export declare function outlineStyle({ outline }: {
-    outline: any;
-}): {
-    outline: string;
-    'outline-offset': string;
-} | {
-    outline: string;
-    'outline-offset'?: undefined;
-} | undefined;
+export declare function outlineStyle({ outline, outlineOffset }: OutlineStyleProps): Record<string, string> | undefined;
 export declare namespace outlineStyle {
     var __lookupStyles: string[];
 }
+export {};