@cube-dev/ui-kit 0.113.1 → 0.115.0

package/es/tasty/styles/outline.js

@@ -1,75 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { filterMods, parseStyle } from '../utils/styles.js';
-const BORDER_STYLES = [
-    'none',
-    'hidden',
-    'dotted',
-    'dashed',
-    'solid',
-    'double',
-    'groove',
-    'ridge',
-    'inset',
-    'outset',
-];
-/**
- * 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
- *
- * @return CSS properties for outline and optionally outline-offset
- */
-export function outlineStyle({ outline, outlineOffset }) {
-    const result = {};
-    // Handle outline (0 is valid - means no outline)
-    if (outline != null && outline !== false) {
-        let outlineValue = outline;
-        if (outline === true)
-            outlineValue = '1ow';
-        if (outline === 0)
-            outlineValue = '0';
-        const processed = parseStyle(String(outlineValue));
-        const group = processed.groups[0];
-        if (group) {
-            const { parts } = group;
-            const outlinePart = parts[0] ?? { values: [], mods: [], colors: [] };
-            const offsetPart = parts[1];
-            const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);
-            const value = outlinePart.values[0] || 'var(--outline-width)';
-            const type = typeMods[0] || 'solid';
-            const outlineColor = outlinePart.colors[0] || 'var(--outline-color)';
-            result['outline'] = [value, type, outlineColor].join(' ');
-            // Check for offset in second part (after /) - takes precedence
-            if (offsetPart?.values[0]) {
-                result['outline-offset'] = offsetPart.values[0];
-            }
-        }
-    }
-    // Handle outlineOffset prop (only if not already set by slash syntax)
-    if (outlineOffset != null && !result['outline-offset']) {
-        const offsetValue = typeof outlineOffset === 'number' ? `${outlineOffset}px` : outlineOffset;
-        const processed = parseStyle(offsetValue);
-        result['outline-offset'] = processed.groups[0]?.values[0] || offsetValue;
-    }
-    // Return undefined if no styles to apply
-    if (Object.keys(result).length === 0) {
-        return;
-    }
-    return result;
-}
-outlineStyle.__lookupStyles = ['outline', 'outlineOffset'];
-
-        

package/es/tasty/styles/padding.js

@@ -1,130 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles.js';
-/**
- * Parse a padding value and return the first processed value
- */
-function parsePaddingValue(value) {
-    if (typeof value === 'number')
-        return `${value}px`;
-    if (!value)
-        return null;
-    if (value === true)
-        value = '1x';
-    const { values } = parseStyle(value).groups[0] ?? { values: [] };
-    return values[0] || 'var(--gap)';
-}
-/**
- * Parse padding value with optional directions (like "1x top" or "2x left right")
- */
-function parseDirectionalPadding(value) {
-    if (typeof value === 'number') {
-        return { values: [`${value}px`], directions: [] };
-    }
-    if (!value)
-        return { values: [], directions: [] };
-    if (value === true)
-        value = '1x';
-    const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
-    return {
-        values: values.length ? values : ['var(--gap)'],
-        directions: filterMods(mods, DIRECTIONS),
-    };
-}
-export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft, }) {
-    // If no padding is defined, return empty object
-    if (padding == null &&
-        paddingBlock == null &&
-        paddingInline == null &&
-        paddingTop == null &&
-        paddingRight == null &&
-        paddingBottom == null &&
-        paddingLeft == null) {
-        return {};
-    }
-    // Initialize all directions to 0
-    let [top, right, bottom, left] = ['0', '0', '0', '0'];
-    // Priority 1 (lowest): padding
-    if (padding != null) {
-        const { values, directions } = parseDirectionalPadding(padding);
-        if (values.length) {
-            if (directions.length === 0) {
-                top = values[0];
-                right = values[1] || values[0];
-                bottom = values[2] || values[0];
-                left = values[3] || values[1] || values[0];
-            }
-            else {
-                // Assign values to directions in the order they appear
-                // e.g., 'right 1x top 2x' → right: 1x, top: 2x
-                directions.forEach((dir, i) => {
-                    const val = values[i] ?? values[0];
-                    if (dir === 'top')
-                        top = val;
-                    else if (dir === 'right')
-                        right = val;
-                    else if (dir === 'bottom')
-                        bottom = val;
-                    else if (dir === 'left')
-                        left = val;
-                });
-            }
-        }
-    }
-    // Priority 2 (medium): paddingBlock/paddingInline
-    if (paddingBlock != null) {
-        const val = parsePaddingValue(paddingBlock);
-        if (val)
-            top = bottom = val;
-    }
-    if (paddingInline != null) {
-        const val = parsePaddingValue(paddingInline);
-        if (val)
-            left = right = val;
-    }
-    // Priority 3 (highest): individual directions
-    if (paddingTop != null) {
-        const val = parsePaddingValue(paddingTop);
-        if (val)
-            top = val;
-    }
-    if (paddingRight != null) {
-        const val = parsePaddingValue(paddingRight);
-        if (val)
-            right = val;
-    }
-    if (paddingBottom != null) {
-        const val = parsePaddingValue(paddingBottom);
-        if (val)
-            bottom = val;
-    }
-    if (paddingLeft != null) {
-        const val = parsePaddingValue(paddingLeft);
-        if (val)
-            left = val;
-    }
-    // Optimize output: 1 value if all same, 2 values if top==bottom && left==right
-    if (top === right && right === bottom && bottom === left) {
-        return { padding: top };
-    }
-    if (top === bottom && left === right) {
-        return { padding: `${top} ${left}` };
-    }
-    return { padding: `${top} ${right} ${bottom} ${left}` };
-}
-paddingStyle.__lookupStyles = [
-    'padding',
-    'paddingTop',
-    'paddingRight',
-    'paddingBottom',
-    'paddingLeft',
-    'paddingBlock',
-    'paddingInline',
-];
-
-        

package/es/tasty/styles/place.js

@@ -1,20 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-export function placeStyle({ place }) {
-    if (typeof place !== 'string')
-        return;
-    if (!place)
-        return;
-    return {
-        'place-items': place,
-        'place-content': place,
-    };
-}
-placeStyle.__lookupStyles = ['place'];
-
-        

package/es/tasty/styles/predefined.js

@@ -1,368 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { isDevEnv } from '../utils/is-dev-env.js';
-import { alignStyle } from './align.js';
-import { borderStyle } from './border.js';
-import { colorStyle } from './color.js';
-import { createStyle } from './createStyle.js';
-import { displayStyle } from './display.js';
-import { fadeStyle } from './fade.js';
-import { fillStyle, svgFillStyle } from './fill.js';
-import { flowStyle } from './flow.js';
-// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed
-// Both font and fontStyle props are now handled by presetStyle
-import { gapStyle } from './gap.js';
-import { heightStyle } from './height.js';
-import { insetStyle } from './inset.js';
-import { justifyStyle } from './justify.js';
-import { marginStyle } from './margin.js';
-import { outlineStyle } from './outline.js';
-import { paddingStyle } from './padding.js';
-import { presetStyle } from './preset.js';
-import { radiusStyle } from './radius.js';
-import { resetStyle } from './reset.js';
-import { scrollbarStyle } from './scrollbar.js';
-import { shadowStyle } from './shadow.js';
-import { styledScrollbarStyle } from './styledScrollbar.js';
-import { transitionStyle } from './transition.js';
-import { widthStyle } from './width.js';
-const devMode = isDevEnv();
-const numberConverter = (val) => {
-    if (typeof val === 'number') {
-        return `${val}px`;
-    }
-    return val;
-};
-const columnsConverter = (val) => {
-    if (typeof val === 'number') {
-        return 'minmax(1px, 1fr) '.repeat(val).trim();
-    }
-    return;
-};
-const rowsConverter = (val) => {
-    if (typeof val === 'number') {
-        return 'auto '.repeat(val).trim();
-    }
-    return;
-};
-export const STYLE_HANDLER_MAP = {};
-// Store initial handler state for reset functionality
-let initialHandlerMapSnapshot = null;
-/**
- * Capture a snapshot of the current STYLE_HANDLER_MAP.
- * Called after predefine() to preserve built-in handler state.
- */
-function captureInitialHandlerState() {
-    initialHandlerMapSnapshot = {};
-    for (const key of Object.keys(STYLE_HANDLER_MAP)) {
-        // Shallow copy the array - handlers themselves are immutable
-        initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];
-    }
-}
-/**
- * Reset STYLE_HANDLER_MAP to the initial built-in state.
- * Called by resetConfig() to restore handlers after tests.
- */
-export function resetHandlers() {
-    if (!initialHandlerMapSnapshot) {
-        // predefine() hasn't been called yet, nothing to reset
-        return;
-    }
-    // Clear current map
-    for (const key of Object.keys(STYLE_HANDLER_MAP)) {
-        delete STYLE_HANDLER_MAP[key];
-    }
-    // Restore initial state
-    for (const key of Object.keys(initialHandlerMapSnapshot)) {
-        STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];
-    }
-}
-export function defineCustomStyle(names, handler) {
-    let handlerWithLookup;
-    if (typeof names === 'function') {
-        handlerWithLookup = names;
-        names = handlerWithLookup.__lookupStyles;
-    }
-    else if (handler) {
-        handlerWithLookup = Object.assign(handler, { __lookupStyles: names });
-    }
-    else {
-        console.warn('CubeUIKit: incorrect custom style definition: ', names);
-        return;
-    }
-    if (Array.isArray(names)) {
-        // just to pass type checking
-        names.forEach((name) => {
-            if (!STYLE_HANDLER_MAP[name]) {
-                STYLE_HANDLER_MAP[name] = [];
-            }
-            STYLE_HANDLER_MAP[name].push(handlerWithLookup);
-        });
-    }
-}
-export function defineStyleAlias(styleName, cssStyleName, converter) {
-    const styleHandler = createStyle(styleName, cssStyleName, converter);
-    if (!STYLE_HANDLER_MAP[styleName]) {
-        STYLE_HANDLER_MAP[styleName] = [];
-    }
-    STYLE_HANDLER_MAP[styleName].push(styleHandler);
-}
-export function predefine() {
-    // Style aliases
-    defineStyleAlias('gridAreas', 'grid-template-areas');
-    defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);
-    defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);
-    defineStyleAlias('gridTemplate', 'grid-template', (val) => {
-        if (typeof val !== 'string')
-            return;
-        return val
-            .split('/')
-            .map((s, i) => (i ? columnsConverter : rowsConverter)(s))
-            .join('/');
-    });
-    // Note: outlineOffset is now handled by outlineStyle
-    [
-        displayStyle,
-        transitionStyle,
-        resetStyle,
-        fillStyle,
-        svgFillStyle,
-        widthStyle,
-        marginStyle,
-        gapStyle,
-        flowStyle,
-        colorStyle,
-        heightStyle,
-        radiusStyle,
-        borderStyle,
-        shadowStyle,
-        paddingStyle,
-        alignStyle,
-        justifyStyle,
-        presetStyle,
-        outlineStyle,
-        // DEPRECATED: `styledScrollbar` is deprecated, use `scrollbar` instead
-        styledScrollbarStyle,
-        scrollbarStyle,
-        fadeStyle,
-        insetStyle,
-    ]
-        // @ts-ignore
-        .forEach((handler) => defineCustomStyle(handler));
-    // Capture initial state after all built-in handlers are registered
-    captureInitialHandlerState();
-    return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };
-}
-// ============================================================================
-// Handler Registration API (for configure())
-// ============================================================================
-/**
- * Normalize a handler definition to a StyleHandler with __lookupStyles.
- * - Function only: lookup styles inferred from key name
- * - [string, fn]: single lookup style
- * - [string[], fn]: multiple lookup styles
- */
-export function normalizeHandlerDefinition(keyName, definition) {
-    let handler;
-    let lookupStyles;
-    if (typeof definition === 'function') {
-        // Function only - lookup styles inferred from key name
-        handler = definition;
-        lookupStyles = [keyName];
-    }
-    else if (Array.isArray(definition)) {
-        const [first, fn] = definition;
-        if (typeof fn !== 'function') {
-            throw new Error(`[Tasty] Invalid handler definition for "${keyName}". ` +
-                'Tuple must have a function as the second element: [string, function] or [string[], function].');
-        }
-        handler = fn;
-        if (typeof first === 'string') {
-            // [string, fn] - single lookup style
-            lookupStyles = [first];
-        }
-        else if (Array.isArray(first)) {
-            // [string[], fn] - multiple lookup styles
-            lookupStyles = first;
-        }
-        else {
-            throw new Error(`[Tasty] Invalid handler definition for "${keyName}". ` +
-                'First element must be a string or string array.');
-        }
-    }
-    else {
-        throw new Error(`[Tasty] Invalid handler definition for "${keyName}". ` +
-            'Expected function, [string, function], or [string[], function].');
-    }
-    // Validate handler in dev mode
-    validateHandler(keyName, handler, lookupStyles);
-    // Wrap the handler to avoid mutation issues when the same function
-    // is reused for multiple handler definitions. Each registration
-    // gets its own function identity with its own __lookupStyles.
-    const wrappedHandler = ((props) => handler(props));
-    wrappedHandler.__lookupStyles = lookupStyles;
-    return wrappedHandler;
-}
-/**
- * Validate a handler definition in development mode.
- */
-function validateHandler(name, handler, lookupStyles) {
-    if (!devMode)
-        return;
-    if (typeof handler !== 'function') {
-        console.warn(`[Tasty] Handler "${name}" is not a function. ` +
-            'Handlers must be functions that return CSSMap, CSSMap[], or void.');
-    }
-    if (!lookupStyles ||
-        !Array.isArray(lookupStyles) ||
-        lookupStyles.length === 0) {
-        console.warn(`[Tasty] Handler "${name}" has invalid lookupStyles. ` +
-            'Expected non-empty array of style names.');
-    }
-}
-/**
- * Validate a handler result in development mode.
- * Call this after invoking a handler to check the return value.
- */
-export function validateHandlerResult(name, result) {
-    if (!devMode)
-        return;
-    if (result === undefined || result === null)
-        return; // void is valid
-    // Check for empty string (migration from old pattern)
-    if (result === '') {
-        console.warn(`[Tasty] Handler "${name}" returned empty string. ` +
-            'Return void/undefined instead for no output.');
-        return;
-    }
-    // Check result is object (CSSMap or CSSMap[])
-    if (typeof result !== 'object') {
-        console.warn(`[Tasty] Handler "${name}" returned invalid type: ${typeof result}. ` +
-            'Expected CSSMap, CSSMap[], or void.');
-    }
-}
-/**
- * Register a custom handler, replacing any existing handlers for the same lookup styles.
- * This is called by configure() to process user-defined handlers.
- *
- * When registering a handler for style X, any existing handler that processes X
- * is removed from ALL its lookup styles to prevent double-processing.
- * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler
- * is registered for just ['gap'], gapStyle is removed from display and flow too.
- */
-export function registerHandler(handler) {
-    const lookupStyles = handler.__lookupStyles;
-    if (!lookupStyles || lookupStyles.length === 0) {
-        if (devMode) {
-            console.warn('[Tasty] Cannot register handler without __lookupStyles property.');
-        }
-        return;
-    }
-    // Find and remove existing handlers that would conflict
-    // A handler conflicts if it handles any of the same styles as the new handler
-    const handlersToRemove = new Set();
-    for (const styleName of lookupStyles) {
-        const existing = STYLE_HANDLER_MAP[styleName];
-        if (existing) {
-            for (const existingHandler of existing) {
-                handlersToRemove.add(existingHandler);
-            }
-        }
-    }
-    // Remove conflicting handlers from ALL their lookup styles
-    for (const oldHandler of handlersToRemove) {
-        const oldLookupStyles = oldHandler.__lookupStyles;
-        if (oldLookupStyles) {
-            for (const oldStyleName of oldLookupStyles) {
-                const handlers = STYLE_HANDLER_MAP[oldStyleName];
-                if (handlers) {
-                    const filtered = handlers.filter((h) => h !== oldHandler);
-                    if (filtered.length === 0) {
-                        delete STYLE_HANDLER_MAP[oldStyleName];
-                    }
-                    else {
-                        STYLE_HANDLER_MAP[oldStyleName] = filtered;
-                    }
-                }
-            }
-        }
-    }
-    // Register the new handler under its lookup styles
-    for (const styleName of lookupStyles) {
-        const existing = STYLE_HANDLER_MAP[styleName];
-        if (existing) {
-            existing.push(handler);
-        }
-        else {
-            STYLE_HANDLER_MAP[styleName] = [handler];
-        }
-    }
-}
-// ============================================================================
-// Wrapped Style Handlers Export
-// ============================================================================
-/**
- * Create a wrapped handler that can be safely called by users.
- * The wrapper preserves __lookupStyles for proper registration.
- */
-function wrapHandler(handler) {
-    const fn = handler;
-    const wrapped = ((props) => fn(props));
-    wrapped.__lookupStyles = handler.__lookupStyles;
-    return wrapped;
-}
-/**
- * Exported object containing wrapped predefined style handlers.
- * Users can import and call these to extend or delegate to built-in behavior.
- *
- * Internal handlers use *Style suffix for searchability.
- * External API uses short names for convenience.
- *
- * @example
- * ```ts
- * import { styleHandlers, configure } from '@cube-dev/ui-kit';
- *
- * configure({
- *   handlers: {
- *     fill: ({ fill }) => {
- *       if (fill?.startsWith('gradient:')) {
- *         return { background: fill.slice(9) };
- *       }
- *       return styleHandlers.fill({ fill });
- *     },
- *   },
- * });
- * ```
- */
-export const styleHandlers = {
-    align: wrapHandler(alignStyle),
-    border: wrapHandler(borderStyle),
-    color: wrapHandler(colorStyle),
-    display: wrapHandler(displayStyle),
-    fade: wrapHandler(fadeStyle),
-    fill: wrapHandler(fillStyle),
-    svgFill: wrapHandler(svgFillStyle),
-    flow: wrapHandler(flowStyle),
-    gap: wrapHandler(gapStyle),
-    height: wrapHandler(heightStyle),
-    inset: wrapHandler(insetStyle),
-    justify: wrapHandler(justifyStyle),
-    margin: wrapHandler(marginStyle),
-    outline: wrapHandler(outlineStyle),
-    padding: wrapHandler(paddingStyle),
-    preset: wrapHandler(presetStyle),
-    radius: wrapHandler(radiusStyle),
-    reset: wrapHandler(resetStyle),
-    scrollbar: wrapHandler(scrollbarStyle),
-    shadow: wrapHandler(shadowStyle),
-    styledScrollbar: wrapHandler(styledScrollbarStyle),
-    transition: wrapHandler(transitionStyle),
-    width: wrapHandler(widthStyle),
-};
-
-