@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/tasty/styles/predefined.js

@@ -0,0 +1,242 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { isDevEnv } from "../utils/is-dev-env.js";
+import { alignStyle } from "./align.js";
+import { borderStyle } from "./border.js";
+import { createStyle } from "./createStyle.js";
+import { colorStyle } from "./color.js";
+import { displayStyle } from "./display.js";
+import { fadeStyle } from "./fade.js";
+import { fillStyle, svgFillStyle } from "./fill.js";
+import { flowStyle } from "./flow.js";
+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 { scrollbarStyle } from "./scrollbar.js";
+import { shadowStyle } from "./shadow.js";
+import { styledScrollbarStyle } from "./styledScrollbar.js";
+import { transitionStyle } from "./transition.js";
+import { widthStyle } from "./width.js";
+
+//#region src/tasty/styles/predefined.ts
+const devMode = isDevEnv();
+const columnsConverter = (val) => {
+	if (typeof val === "number") return "minmax(1px, 1fr) ".repeat(val).trim();
+};
+const rowsConverter = (val) => {
+	if (typeof val === "number") return "auto ".repeat(val).trim();
+};
+const STYLE_HANDLER_MAP = {};
+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)) initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];
+}
+/**
+* Reset STYLE_HANDLER_MAP to the initial built-in state.
+* Called by resetConfig() to restore handlers after tests.
+*/
+function resetHandlers() {
+	if (!initialHandlerMapSnapshot) return;
+	for (const key of Object.keys(STYLE_HANDLER_MAP)) delete STYLE_HANDLER_MAP[key];
+	for (const key of Object.keys(initialHandlerMapSnapshot)) STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];
+}
+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)) names.forEach((name) => {
+		if (!STYLE_HANDLER_MAP[name]) STYLE_HANDLER_MAP[name] = [];
+		STYLE_HANDLER_MAP[name].push(handlerWithLookup);
+	});
+}
+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);
+}
+function predefine() {
+	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("/");
+	});
+	[
+		displayStyle,
+		transitionStyle,
+		fillStyle,
+		svgFillStyle,
+		widthStyle,
+		marginStyle,
+		gapStyle,
+		flowStyle,
+		colorStyle,
+		heightStyle,
+		radiusStyle,
+		borderStyle,
+		shadowStyle,
+		paddingStyle,
+		alignStyle,
+		justifyStyle,
+		presetStyle,
+		outlineStyle,
+		styledScrollbarStyle,
+		scrollbarStyle,
+		fadeStyle,
+		insetStyle
+	].forEach((handler) => defineCustomStyle(handler));
+	captureInitialHandlerState();
+	return {
+		STYLE_HANDLER_MAP,
+		defineCustomStyle,
+		defineStyleAlias
+	};
+}
+/**
+* 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
+*/
+function normalizeHandlerDefinition(keyName, definition) {
+	let handler;
+	let lookupStyles;
+	if (typeof definition === "function") {
+		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") lookupStyles = [first];
+		else if (Array.isArray(first)) 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].`);
+	validateHandler(keyName, handler, 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.`);
+}
+/**
+* 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.
+*/
+function registerHandler(handler) {
+	const lookupStyles = handler.__lookupStyles;
+	if (!lookupStyles || lookupStyles.length === 0) {
+		if (devMode) console.warn("[Tasty] Cannot register handler without __lookupStyles property.");
+		return;
+	}
+	const handlersToRemove = /* @__PURE__ */ new Set();
+	for (const styleName of lookupStyles) {
+		const existing = STYLE_HANDLER_MAP[styleName];
+		if (existing) for (const existingHandler of existing) handlersToRemove.add(existingHandler);
+	}
+	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;
+			}
+		}
+	}
+	for (const styleName of lookupStyles) {
+		const existing = STYLE_HANDLER_MAP[styleName];
+		if (existing) existing.push(handler);
+		else STYLE_HANDLER_MAP[styleName] = [handler];
+	}
+}
+/**
+* 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 });
+*     },
+*   },
+* });
+* ```
+*/
+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),
+	scrollbar: wrapHandler(scrollbarStyle),
+	shadow: wrapHandler(shadowStyle),
+	styledScrollbar: wrapHandler(styledScrollbarStyle),
+	transition: wrapHandler(transitionStyle),
+	width: wrapHandler(widthStyle)
+};
+
+//#endregion
+export { normalizeHandlerDefinition, predefine, registerHandler, resetHandlers, styleHandlers };
+//# sourceMappingURL=predefined.js.map

package/dist/tasty/styles/predefined.js.map

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

package/dist/tasty/styles/preset.d.ts

@@ -0,0 +1,48 @@
+
+import { Styles } from "./types.js";
+
+//#region src/tasty/styles/preset.d.ts
+interface PresetStyleProps {
+  preset?: string | boolean;
+  fontSize?: string | number;
+  lineHeight?: string | number;
+  textTransform?: string;
+  letterSpacing?: string | number;
+  fontWeight?: string | number;
+  fontStyle?: string | boolean;
+  fontFamily?: string;
+  /** Alias for fontFamily with special handling for 'monospace' and boolean */
+  font?: string | boolean;
+}
+/**
+ * Handles typography preset and individual font properties.
+ *
+ * When `preset` is defined, it sets up CSS custom properties for typography.
+ * Individual font props can be used with or without `preset`:
+ * - With `preset`: overrides the preset value for that property
+ * - Without `preset`: outputs the CSS directly
+ *
+ * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+ * fontWeight accepts numbers directly (e.g., 400, 700).
+ *
+ * font vs fontFamily:
+ * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+ * - `fontFamily` is a direct value without special handling
+ */
+declare function presetStyle({
+  preset,
+  fontSize,
+  lineHeight,
+  textTransform,
+  letterSpacing,
+  fontWeight,
+  fontStyle,
+  fontFamily,
+  font
+}: PresetStyleProps): Styles | undefined;
+declare namespace presetStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { presetStyle };
+//# sourceMappingURL=preset.d.ts.map

package/dist/tasty/styles/preset.js

@@ -0,0 +1,126 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { parseStyle } from "../utils/styles.js";
+
+//#region src/tasty/styles/preset.ts
+/**
+* Convert a value to CSS, handling numbers as pixels for numeric properties
+*/
+function toCSS(value, isNumeric) {
+	if (value == null) return null;
+	if (typeof value === "number") return isNumeric ? `${value}px` : String(value);
+	return parseStyle(String(value)).groups[0]?.values[0] || String(value);
+}
+function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
+	styles[`--${styleName}`] = (() => {
+		if (presetName === "inherit") return "inherit";
+		const defaultValue = `var(--default-${styleName}, ${styleName === "font-family" ? "var(--font, NonexistentFontName)" : "inherit"})`;
+		const fontSuffix = styleName === "font-family" ? ", var(--font, sans-serif)" : "";
+		if (presetName === "default") return `${defaultValue}${fontSuffix}`;
+		else return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;
+	})();
+	if (!isPropOnly) styles[styleName] = styles[`--${styleName}`];
+}
+/**
+* Resolve font/fontFamily value to CSS font-family string.
+*
+* - `font="monospace"` → var(--monospace-font)
+* - `font={true}` → var(--font)
+* - `font="CustomFont"` → CustomFont, var(--font)
+* - `fontFamily="Arial"` → Arial (direct, no fallback)
+*/
+function resolveFontFamily(font, fontFamily) {
+	if (fontFamily) return {
+		value: fontFamily,
+		setVar: false
+	};
+	if (font == null || font === false) return null;
+	if (font === "monospace") return {
+		value: "var(--monospace-font)",
+		setVar: true
+	};
+	if (font === true) return {
+		value: "var(--font)",
+		setVar: true
+	};
+	return {
+		value: `${font}, var(--font)`,
+		setVar: true
+	};
+}
+/**
+* Handles typography preset and individual font properties.
+*
+* When `preset` is defined, it sets up CSS custom properties for typography.
+* Individual font props can be used with or without `preset`:
+* - With `preset`: overrides the preset value for that property
+* - Without `preset`: outputs the CSS directly
+*
+* Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+* fontWeight accepts numbers directly (e.g., 400, 700).
+*
+* font vs fontFamily:
+* - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+* - `fontFamily` is a direct value without special handling
+*/
+function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, fontFamily, font }) {
+	const styles = {};
+	if (preset != null && preset !== false) {
+		let { mods } = parseStyle(preset === true ? "" : String(preset)).groups[0] ?? { mods: [] };
+		const isStrong = mods.includes("strong");
+		const isItalic = mods.includes("italic");
+		const isIcon = mods.includes("icon");
+		const isTight = mods.includes("tight");
+		mods = mods.filter((mod) => mod !== "strong" && mod !== "bold" && mod !== "italic" && mod !== "icon" && mod !== "tight");
+		const name = mods[0] || "inherit";
+		if (fontSize == null) setCSSValue(styles, "font-size", name);
+		if (lineHeight == null) setCSSValue(styles, "line-height", name);
+		if (letterSpacing == null) setCSSValue(styles, "letter-spacing", name);
+		if (fontWeight == null) setCSSValue(styles, "font-weight", name);
+		if (fontStyle == null) setCSSValue(styles, "font-style", name);
+		if (textTransform == null) setCSSValue(styles, "text-transform", name);
+		if (fontFamily == null && font == null) setCSSValue(styles, "font-family", name);
+		setCSSValue(styles, "bold-font-weight", name, true);
+		setCSSValue(styles, "icon-size", name, true);
+		if (isStrong) styles["font-weight"] = "var(--bold-font-weight)";
+		if (isItalic) styles["font-style"] = "italic";
+		if (isIcon) {
+			styles["font-size"] = "var(--icon-size)";
+			styles["line-height"] = "var(--icon-size)";
+		}
+		if (isTight) styles["line-height"] = "var(--font-size)";
+	}
+	const fontSizeVal = toCSS(fontSize, true);
+	if (fontSizeVal) styles["font-size"] = fontSizeVal;
+	const lineHeightVal = toCSS(lineHeight, true);
+	if (lineHeightVal) styles["line-height"] = lineHeightVal;
+	const letterSpacingVal = toCSS(letterSpacing, true);
+	if (letterSpacingVal) styles["letter-spacing"] = letterSpacingVal;
+	const fontWeightVal = toCSS(fontWeight, false);
+	if (fontWeightVal) styles["font-weight"] = fontWeightVal;
+	if (fontStyle != null) if (fontStyle === true) styles["font-style"] = "italic";
+	else if (fontStyle !== "inherit") styles["font-style"] = fontStyle ? "italic" : "normal";
+	else styles["font-style"] = "inherit";
+	if (textTransform) styles["text-transform"] = textTransform;
+	const fontResult = resolveFontFamily(font, fontFamily);
+	if (fontResult) {
+		styles["font-family"] = fontResult.value;
+		if (fontResult.setVar) styles["--font-family"] = fontResult.value;
+	}
+	if (Object.keys(styles).length === 0) return;
+	return styles;
+}
+presetStyle.__lookupStyles = [
+	"preset",
+	"fontSize",
+	"lineHeight",
+	"letterSpacing",
+	"textTransform",
+	"fontWeight",
+	"fontStyle",
+	"fontFamily",
+	"font"
+];
+
+//#endregion
+export { presetStyle };
+//# sourceMappingURL=preset.js.map

package/dist/tasty/styles/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","names":[],"sources":["../../../src/tasty/styles/preset.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nimport { Styles } from './types';\n\n/**\n * Convert a value to CSS, handling numbers as pixels for numeric properties\n */\nfunction toCSS(\n  value: string | number | undefined,\n  isNumeric: boolean,\n): string | null {\n  if (value == null) return null;\n  if (typeof value === 'number') {\n    return isNumeric ? `${value}px` : String(value);\n  }\n  // Parse through style parser to handle custom units like 1x, 2r, etc.\n  const processed = parseStyle(String(value));\n  return processed.groups[0]?.values[0] || String(value);\n}\n\nfunction setCSSValue(\n  styles: Styles,\n  styleName: string,\n  presetName: string,\n  isPropOnly = false,\n) {\n  styles[`--${styleName}`] = (() => {\n    if (presetName === 'inherit') {\n      return 'inherit';\n    }\n\n    const defaultValue = `var(--default-${styleName}, ${\n      styleName === 'font-family'\n        ? 'var(--font, NonexistentFontName)'\n        : 'inherit'\n    })`;\n    const fontSuffix =\n      styleName === 'font-family' ? ', var(--font, sans-serif)' : '';\n\n    if (presetName === 'default') {\n      return `${defaultValue}${fontSuffix}`;\n    } else {\n      return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;\n    }\n  })();\n\n  if (!isPropOnly) {\n    styles[styleName] = styles[`--${styleName}`];\n  }\n}\n\ninterface PresetStyleProps {\n  preset?: string | boolean;\n  fontSize?: string | number;\n  lineHeight?: string | number;\n  textTransform?: string;\n  letterSpacing?: string | number;\n  fontWeight?: string | number;\n  fontStyle?: string | boolean;\n  fontFamily?: string;\n  /** Alias for fontFamily with special handling for 'monospace' and boolean */\n  font?: string | boolean;\n}\n\n/**\n * Resolve font/fontFamily value to CSS font-family string.\n *\n * - `font=\"monospace\"` → var(--monospace-font)\n * - `font={true}` → var(--font)\n * - `font=\"CustomFont\"` → CustomFont, var(--font)\n * - `fontFamily=\"Arial\"` → Arial (direct, no fallback)\n */\nfunction resolveFontFamily(\n  font: string | boolean | undefined,\n  fontFamily: string | undefined,\n): { value: string; setVar: boolean } | null {\n  // fontFamily takes precedence as a direct value\n  if (fontFamily) {\n    return { value: fontFamily, setVar: false };\n  }\n\n  if (font == null || font === false) {\n    return null;\n  }\n\n  if (font === 'monospace') {\n    return { value: 'var(--monospace-font)', setVar: true };\n  }\n\n  if (font === true) {\n    return { value: 'var(--font)', setVar: true };\n  }\n\n  return { value: `${font}, var(--font)`, setVar: true };\n}\n\n/**\n * Handles typography preset and individual font properties.\n *\n * When `preset` is defined, it sets up CSS custom properties for typography.\n * Individual font props can be used with or without `preset`:\n * - With `preset`: overrides the preset value for that property\n * - Without `preset`: outputs the CSS directly\n *\n * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.\n * fontWeight accepts numbers directly (e.g., 400, 700).\n *\n * font vs fontFamily:\n * - `font` is the recommended prop with special handling (monospace, boolean, fallback)\n * - `fontFamily` is a direct value without special handling\n */\nexport function presetStyle({\n  preset,\n  fontSize,\n  lineHeight,\n  textTransform,\n  letterSpacing,\n  fontWeight,\n  fontStyle,\n  fontFamily,\n  font,\n}: PresetStyleProps) {\n  const styles: Styles = {};\n  const hasPreset = preset != null && preset !== false;\n\n  // Handle preset if defined\n  if (hasPreset) {\n    let presetValue = preset === true ? '' : String(preset);\n\n    const processed = parseStyle(presetValue);\n    let { mods } = processed.groups[0] ?? ({ mods: [] } as any);\n\n    const isStrong = mods.includes('strong');\n    const isItalic = mods.includes('italic');\n    const isIcon = mods.includes('icon');\n    const isTight = mods.includes('tight');\n\n    mods = mods.filter(\n      (mod) =>\n        mod !== 'strong' &&\n        mod !== 'bold' &&\n        mod !== 'italic' &&\n        mod !== 'icon' &&\n        mod !== 'tight',\n    );\n\n    const name = mods[0] || 'inherit';\n\n    // Set preset values for properties not explicitly overridden\n    if (fontSize == null) {\n      setCSSValue(styles, 'font-size', name);\n    }\n    if (lineHeight == null) {\n      setCSSValue(styles, 'line-height', name);\n    }\n    if (letterSpacing == null) {\n      setCSSValue(styles, 'letter-spacing', name);\n    }\n    if (fontWeight == null) {\n      setCSSValue(styles, 'font-weight', name);\n    }\n    if (fontStyle == null) {\n      setCSSValue(styles, 'font-style', name);\n    }\n    if (textTransform == null) {\n      setCSSValue(styles, 'text-transform', name);\n    }\n    if (fontFamily == null && font == null) {\n      setCSSValue(styles, 'font-family', name);\n    }\n\n    setCSSValue(styles, 'bold-font-weight', name, true);\n    setCSSValue(styles, 'icon-size', name, true);\n\n    if (isStrong) {\n      styles['font-weight'] = 'var(--bold-font-weight)';\n    }\n    if (isItalic) {\n      styles['font-style'] = 'italic';\n    }\n    if (isIcon) {\n      styles['font-size'] = 'var(--icon-size)';\n      styles['line-height'] = 'var(--icon-size)';\n    }\n    if (isTight) {\n      styles['line-height'] = 'var(--font-size)';\n    }\n  }\n\n  // Handle individual font properties (work with or without preset)\n  const fontSizeVal = toCSS(fontSize, true);\n  if (fontSizeVal) {\n    styles['font-size'] = fontSizeVal;\n  }\n\n  const lineHeightVal = toCSS(lineHeight, true);\n  if (lineHeightVal) {\n    styles['line-height'] = lineHeightVal;\n  }\n\n  const letterSpacingVal = toCSS(letterSpacing, true);\n  if (letterSpacingVal) {\n    styles['letter-spacing'] = letterSpacingVal;\n  }\n\n  // fontWeight: numbers should NOT get 'px' suffix\n  const fontWeightVal = toCSS(fontWeight, false);\n  if (fontWeightVal) {\n    styles['font-weight'] = fontWeightVal;\n  }\n\n  // fontStyle: handle boolean (true → italic) and string values\n  if (fontStyle != null) {\n    if (fontStyle === true) {\n      styles['font-style'] = 'italic';\n    } else if (fontStyle !== 'inherit') {\n      styles['font-style'] = fontStyle ? 'italic' : 'normal';\n    } else {\n      styles['font-style'] = 'inherit';\n    }\n  }\n\n  if (textTransform) {\n    styles['text-transform'] = textTransform;\n  }\n\n  // Handle font/fontFamily (font has special handling, fontFamily is direct)\n  const fontResult = resolveFontFamily(font, fontFamily);\n  if (fontResult) {\n    styles['font-family'] = fontResult.value;\n    if (fontResult.setVar) {\n      styles['--font-family'] = fontResult.value;\n    }\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(styles).length === 0) {\n    return;\n  }\n\n  return styles;\n}\n\npresetStyle.__lookupStyles = [\n  'preset',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n  'fontFamily',\n  'font',\n];\n"],"mappings":"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"}

package/dist/tasty/styles/radius.d.ts

@@ -0,0 +1,15 @@
+
+//#region src/tasty/styles/radius.d.ts
+declare function radiusStyle({
+  radius
+}: {
+  radius: any;
+}): {
+  'border-radius': string;
+} | undefined;
+declare namespace radiusStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { radiusStyle };
+//# sourceMappingURL=radius.d.ts.map

package/dist/tasty/styles/radius.js

@@ -0,0 +1,52 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { DIRECTIONS, parseStyle } from "../utils/styles.js";
+
+//#region src/tasty/styles/radius.ts
+const PROP = "var(--radius)";
+const SHARP = "var(--sharp-radius)";
+function radiusStyle({ radius }) {
+	if (typeof radius === "number") radius = `${radius}px`;
+	if (!radius) return;
+	if (radius === true) radius = "1r";
+	let { mods, values } = parseStyle(radius).groups[0] ?? {
+		mods: [],
+		values: []
+	};
+	if (mods.includes("round")) values = ["9999rem"];
+	else if (mods.includes("ellipse")) values = ["50%"];
+	else if (!values.length) values = [PROP];
+	if (mods.includes("leaf")) values = [
+		values[1] || SHARP,
+		values[0] || PROP,
+		values[1] || SHARP,
+		values[0] || PROP
+	];
+	else if (mods.includes("backleaf")) values = [
+		values[0] || PROP,
+		values[1] || SHARP,
+		values[0] || PROP,
+		values[1] || SHARP
+	];
+	else if (mods.length) {
+		const arr = [
+			"0",
+			"0",
+			"0",
+			"0"
+		];
+		let flag = false;
+		DIRECTIONS.forEach((dir, i) => {
+			if (!mods.includes(dir)) return;
+			flag = true;
+			arr[i] = values[0] || PROP;
+			arr[(i + 1) % 4] = values[0] || PROP;
+		});
+		if (flag) values = arr;
+	}
+	return { "border-radius": values.join(" ") };
+}
+radiusStyle.__lookupStyles = ["radius"];
+
+//#endregion
+export { radiusStyle };
+//# sourceMappingURL=radius.js.map

package/dist/tasty/styles/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.js","names":[],"sources":["../../../src/tasty/styles/radius.ts"],"sourcesContent":["import { DIRECTIONS, parseStyle } from '../utils/styles';\n\nconst PROP = 'var(--radius)';\nconst SHARP = 'var(--sharp-radius)';\n\nexport function radiusStyle({ radius }) {\n  if (typeof radius === 'number') {\n    radius = `${radius}px`;\n  }\n\n  if (!radius) return;\n\n  if (radius === true) radius = '1r';\n\n  const processed = parseStyle(radius);\n  let { mods, values } =\n    processed.groups[0] ?? ({ mods: [], values: [] } as any);\n\n  if (mods.includes('round')) {\n    values = ['9999rem'];\n  } else if (mods.includes('ellipse')) {\n    values = ['50%'];\n  } else if (!values.length) {\n    values = [PROP];\n  }\n\n  if (mods.includes('leaf')) {\n    values = [\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n    ];\n  } else if (mods.includes('backleaf')) {\n    values = [\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n    ];\n  } else if (mods.length) {\n    const arr = ['0', '0', '0', '0'];\n\n    let flag = false;\n\n    DIRECTIONS.forEach((dir, i) => {\n      if (!mods.includes(dir)) return;\n\n      flag = true;\n\n      arr[i] = values[0] || PROP;\n      arr[(i + 1) % 4] = values[0] || PROP;\n    });\n\n    if (flag) {\n      values = arr;\n    }\n  }\n\n  return {\n    'border-radius': values.join(' '),\n  };\n}\n\nradiusStyle.__lookupStyles = ['radius'];\n"],"mappings":";;;;AAEA,MAAM,OAAO;AACb,MAAM,QAAQ;AAEd,SAAgB,YAAY,EAAE,UAAU;AACtC,KAAI,OAAO,WAAW,SACpB,UAAS,GAAG,OAAO;AAGrB,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;CAG9B,IAAI,EAAE,MAAM,WADM,WAAW,OAAO,CAExB,OAAO,MAAO;EAAE,MAAM,EAAE;EAAE,QAAQ,EAAE;EAAE;AAElD,KAAI,KAAK,SAAS,QAAQ,CACxB,UAAS,CAAC,UAAU;UACX,KAAK,SAAS,UAAU,CACjC,UAAS,CAAC,MAAM;UACP,CAAC,OAAO,OACjB,UAAS,CAAC,KAAK;AAGjB,KAAI,KAAK,SAAS,OAAO,CACvB,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,SAAS,WAAW,CAClC,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,QAAQ;EACtB,MAAM,MAAM;GAAC;GAAK;GAAK;GAAK;GAAI;EAEhC,IAAI,OAAO;AAEX,aAAW,SAAS,KAAK,MAAM;AAC7B,OAAI,CAAC,KAAK,SAAS,IAAI,CAAE;AAEzB,UAAO;AAEP,OAAI,KAAK,OAAO,MAAM;AACtB,QAAK,IAAI,KAAK,KAAK,OAAO,MAAM;IAChC;AAEF,MAAI,KACF,UAAS;;AAIb,QAAO,EACL,iBAAiB,OAAO,KAAK,IAAI,EAClC;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/tasty/styles/scrollbar.d.ts

@@ -0,0 +1,22 @@
+
+//#region src/tasty/styles/scrollbar.d.ts
+interface ScrollbarStyleProps {
+  scrollbar?: string | boolean | number;
+  overflow?: string;
+}
+/**
+ * Creates cross-browser compatible scrollbar styles
+ *
+ * Supports both Firefox (scrollbar-width, scrollbar-color) and
+ * WebKit/Chromium browsers (::-webkit-scrollbar)
+ */
+declare function scrollbarStyle({
+  scrollbar,
+  overflow
+}: ScrollbarStyleProps): {} | undefined;
+declare namespace scrollbarStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { scrollbarStyle };
+//# sourceMappingURL=scrollbar.d.ts.map