@cube-dev/ui-kit 0.154.0 → 0.155.0

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

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

package/dist/utils/react/chain.js

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

package/dist/utils/react/forwardRefWithGenerics.js

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

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

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

package/dist/utils/react/mapProps.js

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

package/dist/utils/react/mergeProps.d.ts

@@ -1,5 +1,5 @@
 
-import { Props } from "@tenphi/tasty";
+import { Props } from "../../props.js";
 
 //#region src/utils/react/mergeProps.d.ts
 type Merge<T> = T extends [infer F, ...infer R] ? F extends undefined ? Merge<R> : F & Merge<R> : T extends [infer L] ? L : unknown;

package/dist/utils/react/mergeProps.js

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

package/dist/utils/react/mergeProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergeProps.js","names":[],"sources":["../../../src/utils/react/mergeProps.tsx"],"sourcesContent":["import { mergeStyles, Props } from '@tenphi/tasty';\nimport clsx from 'clsx';\n\nimport { chain } from './chain';\nimport { mergeIds } from './useId';\n\ntype Merge<T> = T extends [infer F, ...infer R]\n  ? F extends undefined\n    ? Merge<R>\n    : F & Merge<R>\n  : T extends [infer L]\n    ? L\n    : unknown;\n\n/**\n * Merges multiple props objects together. Event handlers are chained,\n * classNames are combined, and ids are deduplicated - different ids\n * will trigger a side-effect and re-render components hooked up with `useId`.\n * For all other props, the last prop object overrides all previous ones.\n * @param args - Multiple sets of props to merge together.\n */\nexport function mergeProps<T extends (Props | undefined)[], K = Merge<T>>(\n  ...args: T\n): K {\n  let result: any = {};\n\n  for (let props of args) {\n    for (let key in result) {\n      // Chain events\n      if (\n        /^on[A-Z]/.test(key) &&\n        typeof result[key] === 'function' &&\n        props &&\n        typeof props[key] === 'function'\n      ) {\n        result[key] = chain(result[key], props[key]);\n\n        // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check\n      } else if (\n        key === 'className' &&\n        typeof result.className === 'string' &&\n        props &&\n        typeof props.className === 'string'\n      ) {\n        result[key] = clsx(result.className, props.className);\n      } else if (\n        (key === 'styles' || key.endsWith('Styles')) &&\n        typeof result.styles === 'object' &&\n        props &&\n        typeof props.styles === 'object'\n      ) {\n        result[key] = mergeStyles(result[key], props[key]);\n      } else if (key === 'mods' && result.mods && props?.mods) {\n        result.mods = { ...result.mods, ...props?.mods };\n      } else if (key === 'id' && result.id && props?.id) {\n        result.id = mergeIds(result.id, props?.id);\n        // Override others\n      } else {\n        result[key] =\n          props && props[key] !== undefined ? props[key] : result[key];\n      }\n    }\n\n    // Add props from b that are not in a\n    for (let key in props) {\n      if (result[key] === undefined) {\n        result[key] = props[key];\n      }\n    }\n  }\n\n  return result as K;\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBA,SAAgB,WACd,GAAG,MACA;CACH,IAAI,SAAc,EAAE;AAEpB,MAAK,IAAI,SAAS,MAAM;AACtB,OAAK,IAAI,OAAO,OAEd,KACE,WAAW,KAAK,IAAI,IACpB,OAAO,OAAO,SAAS,cACvB,SACA,OAAO,MAAM,SAAS,WAEtB,QAAO,OAAO,MAAM,OAAO,MAAM,MAAM,KAAK;WAI5C,QAAQ,eACR,OAAO,OAAO,cAAc,YAC5B,SACA,OAAO,MAAM,cAAc,SAE3B,QAAO,OAAO,KAAK,OAAO,WAAW,MAAM,UAAU;YAEpD,QAAQ,YAAY,IAAI,SAAS,SAAS,KAC3C,OAAO,OAAO,WAAW,YACzB,SACA,OAAO,MAAM,WAAW,SAExB,QAAO,OAAO,YAAY,OAAO,MAAM,MAAM,KAAK;WACzC,QAAQ,UAAU,OAAO,QAAQ,OAAO,KACjD,QAAO,OAAO;GAAE,GAAG,OAAO;GAAM,GAAG,OAAO;GAAM;WACvC,QAAQ,QAAQ,OAAO,MAAM,OAAO,GAC7C,QAAO,KAAK,SAAS,OAAO,IAAI,OAAO,GAAG;MAG1C,QAAO,OACL,SAAS,MAAM,SAAS,SAAY,MAAM,OAAO,OAAO;AAK9D,OAAK,IAAI,OAAO,MACd,KAAI,OAAO,SAAS,OAClB,QAAO,OAAO,MAAM;;AAK1B,QAAO"}
+{"version":3,"file":"mergeProps.js","names":[],"sources":["../../../src/utils/react/mergeProps.tsx"],"sourcesContent":["import { mergeStyles } from '@tenphi/tasty';\nimport clsx from 'clsx';\n\nimport { chain } from './chain';\nimport { mergeIds } from './useId';\n\nimport type { Props } from '../../props';\n\ntype Merge<T> = T extends [infer F, ...infer R]\n  ? F extends undefined\n    ? Merge<R>\n    : F & Merge<R>\n  : T extends [infer L]\n    ? L\n    : unknown;\n\n/**\n * Merges multiple props objects together. Event handlers are chained,\n * classNames are combined, and ids are deduplicated - different ids\n * will trigger a side-effect and re-render components hooked up with `useId`.\n * For all other props, the last prop object overrides all previous ones.\n * @param args - Multiple sets of props to merge together.\n */\nexport function mergeProps<T extends (Props | undefined)[], K = Merge<T>>(\n  ...args: T\n): K {\n  let result: any = {};\n\n  for (let props of args) {\n    for (let key in result) {\n      // Chain events\n      if (\n        /^on[A-Z]/.test(key) &&\n        typeof result[key] === 'function' &&\n        props &&\n        typeof props[key] === 'function'\n      ) {\n        result[key] = chain(result[key], props[key]);\n\n        // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check\n      } else if (\n        key === 'className' &&\n        typeof result.className === 'string' &&\n        props &&\n        typeof props.className === 'string'\n      ) {\n        result[key] = clsx(result.className, props.className);\n      } else if (\n        (key === 'styles' || key.endsWith('Styles')) &&\n        typeof result.styles === 'object' &&\n        props &&\n        typeof props.styles === 'object'\n      ) {\n        result[key] = mergeStyles(result[key], props[key]);\n      } else if (key === 'mods' && result.mods && props?.mods) {\n        result.mods = { ...result.mods, ...props?.mods };\n      } else if (key === 'id' && result.id && props?.id) {\n        result.id = mergeIds(result.id, props?.id);\n        // Override others\n      } else {\n        result[key] =\n          props && props[key] !== undefined ? props[key] : result[key];\n      }\n    }\n\n    // Add props from b that are not in a\n    for (let key in props) {\n      if (result[key] === undefined) {\n        result[key] = props[key];\n      }\n    }\n  }\n\n  return result as K;\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,SAAgB,WACd,GAAG,MACA;CACH,IAAI,SAAc,EAAE;AAEpB,MAAK,IAAI,SAAS,MAAM;AACtB,OAAK,IAAI,OAAO,OAEd,KACE,WAAW,KAAK,IAAI,IACpB,OAAO,OAAO,SAAS,cACvB,SACA,OAAO,MAAM,SAAS,WAEtB,QAAO,OAAO,MAAM,OAAO,MAAM,MAAM,KAAK;WAI5C,QAAQ,eACR,OAAO,OAAO,cAAc,YAC5B,SACA,OAAO,MAAM,cAAc,SAE3B,QAAO,OAAO,KAAK,OAAO,WAAW,MAAM,UAAU;YAEpD,QAAQ,YAAY,IAAI,SAAS,SAAS,KAC3C,OAAO,OAAO,WAAW,YACzB,SACA,OAAO,MAAM,WAAW,SAExB,QAAO,OAAO,YAAY,OAAO,MAAM,MAAM,KAAK;WACzC,QAAQ,UAAU,OAAO,QAAQ,OAAO,KACjD,QAAO,OAAO;GAAE,GAAG,OAAO;GAAM,GAAG,OAAO;GAAM;WACvC,QAAQ,QAAQ,OAAO,MAAM,OAAO,GAC7C,QAAO,KAAK,SAAS,OAAO,IAAI,OAAO,GAAG;MAG1C,QAAO,OACL,SAAS,MAAM,SAAS,SAAY,MAAM,OAAO,OAAO;AAK9D,OAAK,IAAI,OAAO,MACd,KAAI,OAAO,SAAS,OAClB,QAAO,OAAO,MAAM;;AAK1B,QAAO"}

package/dist/utils/react/nullableValue.d.ts

@@ -1,5 +1,5 @@
 
-import { Props } from "@tenphi/tasty";
+import { Props } from "../../props.js";
 
 //#region src/utils/react/nullableValue.d.ts
 type WithNullableValue<T extends Props> = Omit<T, 'value' | 'defaultValue'> & {

package/dist/utils/react/nullableValue.js

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

package/dist/utils/react/nullableValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"nullableValue.js","names":[],"sources":["../../../src/utils/react/nullableValue.ts"],"sourcesContent":["import { Props } from '@tenphi/tasty';\n\nexport function castNullableStringValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'string', (v) =>\n    String(v),\n  );\n}\n\nexport function castNullableNumberValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'number', (v) =>\n    Number(v),\n  );\n}\n\nexport function castNullableArrayValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'object', (v) =>\n    Array.isArray(v) ? v : [],\n  );\n}\n\nexport function castNullableIsSelected<T>(props: T): T {\n  return castNullableField(\n    props,\n    ['isSelected', 'defaultSelected'],\n    'boolean',\n    (v) => !!v,\n  );\n}\n\nexport function castNullableSelectedKey<T>(props: T): T {\n  return castNullableField(props, ['selectedKey', 'defaultSelectedKey']);\n}\n\nexport function castNullableField<T>(\n  props: T,\n  keys: string[],\n  type?: string,\n  cast?: (k: any) => any,\n): T {\n  props = { ...props };\n\n  keys.forEach((key) => {\n    if (props[key] === null) {\n      props[key] = undefined;\n    }\n\n    if (type && cast && props[key] != null && typeof props[key] != type) {\n      props[key] = cast(props[key]);\n\n      console.warn(\n        'Wrong value type in',\n        props,\n        'in keys',\n        JSON.stringify(keys),\n      );\n    }\n  });\n\n  return props;\n}\n\nexport type WithNullableValue<T extends Props> = Omit<\n  T,\n  'value' | 'defaultValue'\n> & {\n  value?: T['value'] | any;\n  defaultValue?: T['defaultValue'] | any;\n};\n\nexport type WithNullableSelected<T extends Props> = Omit<\n  T,\n  'isSelected' | 'defaultSelected'\n> & {\n  isSelected?: T['isSelected'] | any;\n  defaultSelected?: T['defaultSelected'] | any;\n};\n\nexport type WithNullableSelectedKey<T extends Props> = Omit<\n  T,\n  'selectedKey' | 'defaultSelectedKey'\n> & {\n  selectedKey?: T['selectedKey'] | any;\n  defaultSelectedKey?: T['defaultSelectedKey'] | any;\n};\n"],"mappings":";;AAEA,SAAgB,wBAA2B,OAAa;AACtD,QAAO,kBAAkB,OAAO,CAAC,SAAS,eAAe,EAAE,WAAW,MACpE,OAAO,EAAE,CACV;;AAGH,SAAgB,wBAA2B,OAAa;AACtD,QAAO,kBAAkB,OAAO,CAAC,SAAS,eAAe,EAAE,WAAW,MACpE,OAAO,EAAE,CACV;;AAGH,SAAgB,uBAA0B,OAAa;AACrD,QAAO,kBAAkB,OAAO,CAAC,SAAS,eAAe,EAAE,WAAW,MACpE,MAAM,QAAQ,EAAE,GAAG,IAAI,EAAE,CAC1B;;AAGH,SAAgB,uBAA0B,OAAa;AACrD,QAAO,kBACL,OACA,CAAC,cAAc,kBAAkB,EACjC,YACC,MAAM,CAAC,CAAC,EACV;;AAOH,SAAgB,kBACd,OACA,MACA,MACA,MACG;AACH,SAAQ,EAAE,GAAG,OAAO;AAEpB,MAAK,SAAS,QAAQ;AACpB,MAAI,MAAM,SAAS,KACjB,OAAM,OAAO;AAGf,MAAI,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,MAAM;AACnE,SAAM,OAAO,KAAK,MAAM,KAAK;AAE7B,WAAQ,KACN,uBACA,OACA,WACA,KAAK,UAAU,KAAK,CACrB;;GAEH;AAEF,QAAO"}
+{"version":3,"file":"nullableValue.js","names":[],"sources":["../../../src/utils/react/nullableValue.ts"],"sourcesContent":["import type { Props } from '../../props';\n\nexport function castNullableStringValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'string', (v) =>\n    String(v),\n  );\n}\n\nexport function castNullableNumberValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'number', (v) =>\n    Number(v),\n  );\n}\n\nexport function castNullableArrayValue<T>(props: T): T {\n  return castNullableField(props, ['value', 'defaultValue'], 'object', (v) =>\n    Array.isArray(v) ? v : [],\n  );\n}\n\nexport function castNullableIsSelected<T>(props: T): T {\n  return castNullableField(\n    props,\n    ['isSelected', 'defaultSelected'],\n    'boolean',\n    (v) => !!v,\n  );\n}\n\nexport function castNullableSelectedKey<T>(props: T): T {\n  return castNullableField(props, ['selectedKey', 'defaultSelectedKey']);\n}\n\nexport function castNullableField<T>(\n  props: T,\n  keys: string[],\n  type?: string,\n  cast?: (k: any) => any,\n): T {\n  props = { ...props };\n\n  keys.forEach((key) => {\n    if (props[key] === null) {\n      props[key] = undefined;\n    }\n\n    if (type && cast && props[key] != null && typeof props[key] != type) {\n      props[key] = cast(props[key]);\n\n      console.warn(\n        'Wrong value type in',\n        props,\n        'in keys',\n        JSON.stringify(keys),\n      );\n    }\n  });\n\n  return props;\n}\n\nexport type WithNullableValue<T extends Props> = Omit<\n  T,\n  'value' | 'defaultValue'\n> & {\n  value?: T['value'] | any;\n  defaultValue?: T['defaultValue'] | any;\n};\n\nexport type WithNullableSelected<T extends Props> = Omit<\n  T,\n  'isSelected' | 'defaultSelected'\n> & {\n  isSelected?: T['isSelected'] | any;\n  defaultSelected?: T['defaultSelected'] | any;\n};\n\nexport type WithNullableSelectedKey<T extends Props> = Omit<\n  T,\n  'selectedKey' | 'defaultSelectedKey'\n> & {\n  selectedKey?: T['selectedKey'] | any;\n  defaultSelectedKey?: T['defaultSelectedKey'] | any;\n};\n"],"mappings":";;AAEA,SAAgB,wBAA2B,OAAa;AACtD,QAAO,kBAAkB,OAAO,CAAC,SAAS,eAAe,EAAE,WAAW,MACpE,OAAO,EAAE,CACV;;AAGH,SAAgB,wBAA2B,OAAa;AACtD,QAAO,kBAAkB,OAAO,CAAC,SAAS,eAAe,EAAE,WAAW,MACpE,OAAO,EAAE,CACV;;AAGH,SAAgB,uBAA0B,OAAa;AACrD,QAAO,kBAAkB,OAAO,CAAC,SAAS,eAAe,EAAE,WAAW,MACpE,MAAM,QAAQ,EAAE,GAAG,IAAI,EAAE,CAC1B;;AAGH,SAAgB,uBAA0B,OAAa;AACrD,QAAO,kBACL,OACA,CAAC,cAAc,kBAAkB,EACjC,YACC,MAAM,CAAC,CAAC,EACV;;AAOH,SAAgB,kBACd,OACA,MACA,MACA,MACG;AACH,SAAQ,EAAE,GAAG,OAAO;AAEpB,MAAK,SAAS,QAAQ;AACpB,MAAI,MAAM,SAAS,KACjB,OAAM,OAAO;AAGf,MAAI,QAAQ,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,MAAM;AACnE,SAAM,OAAO,KAAK,MAAM,KAAK;AAE7B,WAAQ,KACN,uBACA,OACA,WACA,KAAK,UAAU,KAAK,CACrB;;GAEH;AAEF,QAAO"}

package/dist/utils/react/resolveIcon.js

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

package/dist/utils/react/sharedStore.js

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

package/dist/utils/react/useCombinedRefs.js

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

package/dist/utils/react/useControlledFocusVisible.js

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

package/dist/utils/react/useEventBus.js

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

package/dist/utils/react/useId.js

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

package/dist/utils/react/useIsDarwin.js

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

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

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

package/dist/utils/react/useLocalStorage.js

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

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

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

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

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

package/dist/utils/styles.js

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

package/dist/utils/tree.js

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

package/dist/utils/warnings.js

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

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.154.0";
-const TASTY_VERSION = "2.11.2";
+const VERSION = "0.155.0";
+const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/Theming.md

@@ -21,16 +21,16 @@ value so this stays true.
 
 ## What is tunable
 
-| Option | Scope | Default |
-| --- | --- | --- |
-| `hue` | **Accent** hue in degrees — the brand. Drives the `accent-*` family, `primary` / `purple` / `special`, and the brand-tinted `focus`, loading faces and disabled chip. | `280.3` |
-| `baseHue` | **Base** hue in degrees — the neutral chrome: `surface` and its ladder, the `surface-text*` ramp, `border`, `placeholder`. | inherits `hue` |
-| `saturation` | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none. | `80` |
-| `themes.<status>.hue` | Hue for `success` / `danger` / `warning` / `note`. | `156.9` / `23.1` / `84.3` / `302.3` |
-| `themes.<status>.saturation` | Saturation for that status theme. | inherits `saturation` |
-| `themes.code.saturation` | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`. | `80` |
-| `pastel` | Global. Relaxes the sRGB-safe chroma limit. | `false` |
-| `contrastLevel` | Global. `'auto'`, or a manual `0`–`100` level. | `'auto'` |
+| Option                       | Scope                                                                                                                                                                 | Default                             |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `hue`                        | **Accent** hue in degrees — the brand. Drives the `accent-*` family, `primary` / `purple` / `special`, and the brand-tinted `focus`, loading faces and disabled chip. | `280.3`                             |
+| `baseHue`                    | **Base** hue in degrees — the neutral chrome: `surface` and its ladder, the `surface-text*` ramp, `border`, `placeholder`.                                            | inherits `hue`                      |
+| `saturation`                 | Seed saturation (0–100) for the `default` theme, and the fallback for every theme that sets none.                                                                     | `80`                                |
+| `themes.<status>.hue`        | Hue for `success` / `danger` / `warning` / `note`.                                                                                                                    | `156.9` / `23.1` / `84.3` / `302.3` |
+| `themes.<status>.saturation` | Saturation for that status theme.                                                                                                                                     | inherits `saturation`               |
+| `themes.code.saturation`     | Saturation for the `code-*` syntax family. Hues are fixed, and this does **not** inherit `saturation`.                                                                | `80`                                |
+| `pastel`                     | Global. Relaxes the sRGB-safe chroma limit. Every theme except `code`.                                                                                                | `false`                             |
+| `contrastLevel`              | Global. `'auto'`, or a manual `0`–`100` level.                                                                                                                        | `'auto'`                            |
 
 ### The setter replaces
 
@@ -81,15 +81,15 @@ setPaletteConfig({ hue: 235, baseHue: 60 });
 ```
 
 Only the `default` theme is affected. A colored theme's tinted `surface`
-deliberately follows *its own* hue, because a danger banner should read as red.
+deliberately follows _its own_ hue, because a danger banner should read as red.
 
 ### One saturation scale per theme
 
-Saturation is *not* split, deliberately: `saturation` is the theme's **seed**, and
+Saturation is _not_ split, deliberately: `saturation` is the theme's **seed**, and
 every color's own `saturation` is a 0–1 factor of it. `surface` sits at `0.12`,
 `border` at `0.175`, the text ramp at `0.2`, the accent family at ~`1.0`.
 
-So the palette has one saturation *scale*, and everything on it keeps its
+So the palette has one saturation _scale_, and everything on it keeps its
 proportions: turning `saturation` down mutes the brand fills and the neutral tint
 together, in the ratios the palette was designed around. That is the point — the
 relationship between a subtle surface tint and a saturated accent is part of the
@@ -101,13 +101,17 @@ Syntax colors are their own theme with their own seed, so neither the brand hue
 the palette saturation reaches them. Hues are absolute literals — a brand re-seeded
 toward green would otherwise collide `code-string` with `code-number` (156°) — and
 the saturation is fixed at `80` rather than inheriting, so muting the app cannot
-wash out a code block. Tune it on its own:
+wash out a code block. `pastel` skips them for the same reason: it lowers the chroma
+ceiling far enough to take `code-keyword` from ~0.19 to ~0.07, collapsing the spread
+that keeps the syntax hues apart.
+
+So `themes.code.saturation` is the only thing that moves them. Tune it on its own:
 
 ```ts
 setPaletteConfig({ themes: { code: { saturation: 60 } } });
 ```
 
-They are still *adaptive*: each one is anchored to the real `surface` with an
+They are still _adaptive_: each one is anchored to the real `surface` with an
 `['AA','AAA']` floor, so they re-solve for light, dark and high contrast. Only hue
 and saturation are pinned.
 
@@ -147,7 +151,7 @@ const pinned = getPaletteConfigInput().baseHue !== undefined;
 
 Pinning a field to the value it already inherited resolves to the same colors but
 still counts as a change, so a UI reading the sparse config re-renders. Re-applying
-an *already pinned* value is a true no-op and costs nothing.
+an _already pinned_ value is a true no-op and costs nothing.
 
 ## Palette playground
 
@@ -194,8 +198,8 @@ result into a single region: pick **Light / Dark**, then either a contrast **mod
 variant while the page around it stays as it is.
 
 There is no `Auto` for scheme or contrast mode, on purpose. `Auto` means "follow
-the OS" — a *preference*, and a flat token value cannot express one. A preview
-renders one concrete variant, so it has to name which. The contrast *level* keeps
+the OS" — a _preference_, and a flat token value cannot express one. A preview
+renders one concrete variant, so it has to name which. The contrast _level_ keeps
 its `Auto`, because there the choice is between the two-tier model and a hand-set
 number rather than between following and not following the system.
 
@@ -229,11 +233,11 @@ The reason this needs its own API: the document palette emits **state maps**
 time — that is what `@dark` means. Collapsing the palette to a chosen scheme
 removes the conditionality, so several themes can coexist.
 
-| Option | Meaning |
-| --- | --- |
+| Option                      | Meaning                                                                                       |
+| --------------------------- | --------------------------------------------------------------------------------------------- |
 | every `PaletteConfig` field | merged over the **current** config, so `{ scheme: 'dark' }` previews the active theme in dark |
-| `scheme` | `'light'` (default) or `'dark'` |
-| `highContrast` | resolve that scheme's high-contrast variant. Default `false` |
+| `scheme`                    | `'light'` (default) or `'dark'`                                                               |
+| `highContrast`              | resolve that scheme's high-contrast variant. Default `false`                                  |
 
 Nothing is applied globally — the live palette and the stored config are
 untouched, so previews are safe to render anywhere.
@@ -261,7 +265,7 @@ Notes:
   reproduces the normal tier and `100` the high-contrast tier exactly, in both
   schemes. Because a manual level leaves no separate high-contrast tier,
   `highContrast: true` correctly returns the same colors as the normal variant.
-  Note that tokens carrying a contrast *floor* (most text) can sit still over part
+  Note that tokens carrying a contrast _floor_ (most text) can sit still over part
   of the ramp — the floor is solved, not approximated, so the value only moves once
   the interpolated target does. Tokens positioned by a plain tone pair, like
   `#border`, step at every level.
@@ -315,7 +319,7 @@ Because the setter replaces, the prop describes the **whole** palette: drop a
 field from the object and that customization goes away on the next render, which
 is what you want from a declarative prop.
 
-Removing the prop entirely is the one thing that does *not* reset the palette —
+Removing the prop entirely is the one thing that does _not_ reset the palette —
 `<Root>` with no `palette` leaves whatever is configured alone, so that the common
 case cannot clobber a host's imperative `setPaletteConfig()` call. Pass
 `palette={{}}` if you do want the default.
@@ -333,11 +337,11 @@ and not per request:
 
 ## Caveats
 
-**`pastel: true` is a redesign, not a filter.** It changes every resolved color.
-The per-color saturation factors in this palette were tuned for the non-pastel
-space — pastel equalizes chroma across hues, so a pastel palette on the shipped
-seeds resolves more saturated than you may expect. Re-tune the seeds alongside
-it.
+**`pastel: true` is a redesign, not a filter.** It changes every resolved color
+outside the `code-*` family. The per-color saturation factors in this palette were
+tuned for the non-pastel space — pastel equalizes chroma across hues, so a pastel
+palette on the shipped seeds resolves more saturated than you may expect. Re-tune
+the seeds alongside it.
 
 **Re-seeding costs about 10 ms.** Rebuilding the eight themes and re-solving
 ~156 tokens across four scheme variants is not free, though it is inside a frame.
@@ -366,7 +370,7 @@ it.
 **Some things are not tunable at all.** Tasty locks its configuration on the
 first style injection, so the `@dark` / `@hc` state definitions and the
 `colorSpace` (both set in `Root`) are fixed for the lifetime of the page. Only
-token *values* stay mutable — which is all re-seeding needs.
+token _values_ stay mutable — which is all re-seeding needs.
 
 ## See also
 

package/docs/components/content/Text.md

@@ -14,14 +14,13 @@ A flexible text component for inline or block text. Renders as `<span>` by defau
 - **`monospace`** `boolean` — Use monospace font
 - **`ellipsis`** `boolean` — Truncate overflow with ellipsis (sets `display: block`, `nowrap`, `overflow: hidden`)
 - **`nowrap`** `boolean` — Prevent text wrapping
-- **`block`** `boolean` — Display as block element
 - **`italic`** `string` — Font style (maps to `fontStyle`)
 - **`weight`** `string | number` — Font weight (maps to `fontWeight`)
 - **`transform`** `string` — Text transform (maps to `textTransform`)
 
 ### Style Defaults
 
-- `display` — `inline` (switches to `block` when `ellipsis` or `block`)
+- `display` — `inline` (switches to `block` when `ellipsis`). Pass `display="block"` to override.
 - `margin` — `0`
 - `padding` — `0`
 

package/docs/tasty/README.md

@@ -20,13 +20,15 @@ Tasty is a styling engine for design systems that turns component state into det
 - **React components**: [React API](react-api.md)
 - **Zero-runtime / build-time extraction**: [Zero Runtime (tastyStatic)](tasty-static.md)
 - **Runtime `tasty()` with server collection and hydration**: [Server-Side Rendering](ssr.md)
+- **Upgrading from v2**: [Migration Guide (v2 → v3)](migration-v3.md)
 
 ## By Task
 
 - **Learn the style language**: [Style DSL](dsl.md)
 - **Brief an AI agent (or yourself) on writing correct styles**: [Style Rules for AI Agents](ai-agents.md)
 - **Look up a property handler**: [Style Properties](styles.md)
-- **Define tokens, units, recipes, keyframes, or properties globally**: [Configuration](configuration.md)
+- **Define tokens, units, recipes, keyframes, properties, functions, or polyfills globally**: [Configuration](configuration.md)
+- **Extend Tasty with a plugin, custom handler, or custom prop**: [Plugins & Extension Points](plugins.md)
 - **Debug generated CSS or cache behavior**: [Debug Utilities](debug.md)
 - **Understand how selector generation works internally**: [Style rendering pipeline](pipeline.md)
 - **Understand runtime injection internals**: [Style Injector](injector.md)

package/docs/tasty/ai-agents.md

@@ -1,6 +1,6 @@
 # Tasty Style Rules for AI Agents
 
-A compact ruleset for **writing correct `@tenphi/tasty` styles**. It is not an API tour — every rule here is machine-checked by [`@tenphi/eslint-plugin-tasty`](https://www.npmjs.com/package/@tenphi/eslint-plugin-tasty), so following it means clean lint output. For explanations and the complete API, see [Style DSL](dsl.md), [Style Properties](styles.md), [React API](react-api.md).
+A compact ruleset for **writing correct `@tenphi/tasty` styles**. It is not an API tour — most rules here are machine-checked by [`@tenphi/eslint-plugin-tasty`](https://www.npmjs.com/package/@tenphi/eslint-plugin-tasty), so following it generally means clean lint output. The plugin ships separately and can lag a new DSL rule, so treat this page as the source of truth and the plugin as the enforcement that catches most of it. For explanations and the complete API, see [Style DSL](dsl.md), [Style Properties](styles.md), [React API](react-api.md).
 
 Notation: ❌ wrong → ✅ correct.
 
@@ -64,7 +64,8 @@ The last row goes the other way — longhands over the shorthand — because `fl
 | `#clear` / `#current` | `transparent` / `currentcolor` |
 | `$name` | custom property → `var(--name)` |
 | `(#a, #b)` | fallback chain |
-| `$$name` / `##name` | the property *name* — only inside `transition` |
+| `$$name` / `##name` | the custom property *name* (not its value) — inside `transition` |
+| `$$name(…)` | call a CSS `@function` declared via `@function`, `useFunction`, or config |
 
 - ❌ `#f5f5f5`, `rgb(0 0 0)`, `oklch(…)`, `okhsl(…)`, `red` → ✅ `#surface` (add the token to the config if it doesn't exist).
 - ❌ `var(--gap)` → ✅ `$gap` · ❌ `$accent-color` → ✅ `#accent` · ❌ `transparent` → ✅ `#clear` · ❌ `currentColor` → ✅ `#current`.
@@ -82,7 +83,7 @@ Prefer units over raw pixels: `8px` → `1x` … `64px` → `8x`; `radius: '6px'
 
 ### `true`
 
-`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `fill`, `color`, `preset`, `font`, `scrollbar`, `hide`. Anywhere else it is an error.
+`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `fill`, `color`, `fade`, `preset`, `font`, `scrollbar`, `hide`. Anywhere else it is an error.
 
 ### `!important`
 
@@ -90,7 +91,7 @@ Never use it. Tasty owns specificity through doubled selectors and state orderin
 
 ### Modifiers
 
-A value is `[values…] [modifiers…]`, and several groups can be comma-separated (later groups override earlier ones). Only the modifiers a property knows are valid:
+A value is `[values…] [modifiers…]`, and several groups can be comma-separated (later groups override earlier ones). A group that names **direction** modifiers takes a **single** value, applied to every direction it names — per-side values come from comma groups. A group naming no direction keeps plain CSS shorthand order (1–4 values). (`inset` + `dock` is the one exception: a second value insets the spanned sides.) Only the modifiers a property knows are valid:
 
 | Property | Modifiers |
 |----------|-----------|
@@ -111,6 +112,8 @@ Directional modifiers beat placeholder zeros:
 - ❌ `padding: '0 0 2x 0'` → ✅ `padding: '2x bottom'`
 - ❌ `padding: '1x 1x 2x 1x'` → ✅ `padding: '1x, 2x bottom'`
 - ❌ `border: '0 0 1bw 0'` — four tokens parse as *one* border value, so this renders no border at all → ✅ `border: '1bw bottom'`
+- ❌ `padding: '2x 4x top right'` — a directional group takes one value, so `4x` is dropped → ✅ `padding: '2x top, 4x right'`
+- ❌ `fade: '3x 1x top bottom'` → ✅ `fade: '3x top, 1x bottom'`
 
 Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, `tabSize`, `paddingInline`, `paddingBlock`. `fill` and `color` take a color (plus `none` / `transparent`); `caretColor` and `accentColor` take a color only.
 
@@ -184,11 +187,21 @@ styles: { Title: { preset: 'h3' }, Icon: { $: '>@:last-child', color: '#accent'
 | Key | Shape |
 |-----|-------|
 | `@keyframes` | `{ name: { '0%': styles, … } }` |
-| `@properties` | `{ '$name': { syntax, inherits, initialValue } }` |
-| `@fontFace` | `{ 'Family Name': descriptors \| descriptors[] }` |
-| `@counterStyle` | `{ name: descriptors }` |
+| `@property` | `{ '$name': { syntax, inherits, initialValue } }` |
+| `@font-face` | `{ 'Family Name': descriptors \| descriptors[] }` |
+| `@counter-style` | `{ name: descriptors }` |
+| `@function` | `{ '$$name': { args, returns?, result, '$local'? } }` |
 | `recipe` | a **string** of configured recipe names: `'card elevated'`, `'reset input / autofill'`, `'none / disabled'` |
 
+At-rule keys match the real CSS at-rule names, so they are kebab-case, not camelCase. Inside `@function`, the callable is `$$name` but its parameters and local variables are `$name`:
+
+```jsx
+styles: {
+  '@function': { $$negative: { args: ['$value'], result: '(-1 * $value)' } },
+  marginTop: '$$negative(2x)',
+}
+```
+
 ## 7. `tastyStatic()`
 
 The selector must be a string literal and valid CSS. Values must be static — strings, numbers, booleans, `null`, or objects/arrays of those. No variables, template literals, function calls, or spreads.
@@ -203,4 +216,5 @@ The selector must be a string literal and valid CSS. Values must be static — s
 - Modifiers valid for the property; directional shorthand instead of placeholder zeros.
 - Every state map starts with `''` (or `_`), is flat, and lives inside a property value.
 - `@own()` only inside sub-elements; sub-element keys are capitalized and hold objects.
+- At-rule keys are kebab-case (`@property`, `@font-face`, `@counter-style`, `@function`); `@function` names use `$$`, their args and locals use `$`.
 - Values are static; dynamic behavior comes from `mods` / `tokens` / `styleProps`.