@cube-dev/ui-kit 0.176.0 → 0.177.0

package/dist/utils/react/useQaProps.js

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

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.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.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.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,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
+import { isDevEnvOrTest } from "./is-dev-env.js";
+
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",
@@ -15,10 +17,11 @@ function propDeprecationWarning(name, props, propList) {
 	});
 }
 function warn(...args) {
-	console.warn(`${PREFIX}:`, ...args);
+	if (isDevEnvOrTest()) console.warn(`${PREFIX}:`, ...args);
 }
 function deprecationWarning(condition, { property, name, betterAlternative, reason }) {
 	if (condition) return;
+	if (!isDevEnvOrTest()) return;
 	console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);
 	warn(`"${property}" is deprecated, consider better alternative: ${typeof betterAlternative === "function" ? betterAlternative() : betterAlternative}`);
 	reason && warn(`Reason: ${typeof reason === "function" ? reason() : reason}`);

package/dist/utils/warnings.js.map

@@ -1 +1 @@
-{"version":3,"file":"warnings.js","names":[],"sources":["../../src/utils/warnings.ts"],"sourcesContent":["const SUGGESTED_PROP_MAP = {\n  disabled: 'isDisabled',\n  loading: 'isLoading',\n  selected: 'isSelected',\n};\n\nconst PREFIX = 'CubeUIKit';\nconst devMode = process.env.NODE_ENV !== 'production';\n\nexport function propDeprecationWarning(name, props, propList) {\n  propList.forEach((prop) => {\n    if (prop in props) {\n      const suggestion = SUGGESTED_PROP_MAP[prop];\n\n      warn(\n        `\"${prop}\" property of \"${name}\" component is deprecated.${\n          suggestion ? ` Use \"${suggestion}\" property instead.` : ''\n        }`,\n      );\n    }\n  });\n}\n\nexport function warn(...args) {\n  if (devMode) {\n    console.warn(`${PREFIX}:`, ...args);\n  }\n}\n\nexport function deprecationWarning(\n  condition: any,\n  {\n    property,\n    name,\n    betterAlternative,\n    reason,\n  }: {\n    property: string;\n    name: string;\n    betterAlternative: (() => string) | string;\n    reason?: (() => string) | string;\n  },\n) {\n  if (condition) return;\n\n  if (!devMode) return;\n\n  // we can make deprecations even better if we add the md syntax in the console.\n  // anyway, everything down below will be stripped in the production build\n  console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);\n  warn(\n    `\"${property}\" is deprecated, consider better alternative: ${\n      typeof betterAlternative === 'function'\n        ? (betterAlternative as () => string)()\n        : betterAlternative\n    }`,\n  );\n  reason &&\n    warn(\n      `Reason: ${\n        typeof reason === 'function' ? (reason as () => string)() : reason\n      }`,\n    );\n  console.groupEnd();\n}\n"],"mappings":";;AAAA,MAAM,qBAAqB;CACzB,UAAU;CACV,SAAS;CACT,UAAU;CACX;AAED,MAAM,SAAS;AAGf,SAAgB,uBAAuB,MAAM,OAAO,UAAU;AAC5D,UAAS,SAAS,SAAS;AACzB,MAAI,QAAQ,OAAO;GACjB,MAAM,aAAa,mBAAmB;AAEtC,QACE,IAAI,KAAK,iBAAiB,KAAK,4BAC7B,aAAa,SAAS,WAAW,uBAAuB,KAE3D;;GAEH;;AAGJ,SAAgB,KAAK,GAAG,MAAM;AAE1B,SAAQ,KAAK,GAAG,OAAO,IAAI,GAAG,KAAK;;AAIvC,SAAgB,mBACd,WACA,EACE,UACA,MACA,mBACA,UAOF;AACA,KAAI,UAAW;AAMf,SAAQ,MAAM,MAAM,OAAO,mBAAmB,OAAO;AACrD,MACE,IAAI,SAAS,gDACX,OAAO,sBAAsB,aACxB,mBAAoC,GACrC,oBAEP;AACD,WACE,KACE,WACE,OAAO,WAAW,aAAc,QAAyB,GAAG,SAE/D;AACH,SAAQ,UAAU"}
+{"version":3,"file":"warnings.js","names":[],"sources":["../../src/utils/warnings.ts"],"sourcesContent":["import { isDevEnvOrTest } from './is-dev-env';\n\nconst SUGGESTED_PROP_MAP = {\n  disabled: 'isDisabled',\n  loading: 'isLoading',\n  selected: 'isSelected',\n};\n\nconst PREFIX = 'CubeUIKit';\n\nexport function propDeprecationWarning(name, props, propList) {\n  propList.forEach((prop) => {\n    if (prop in props) {\n      const suggestion = SUGGESTED_PROP_MAP[prop];\n\n      warn(\n        `\"${prop}\" property of \"${name}\" component is deprecated.${\n          suggestion ? ` Use \"${suggestion}\" property instead.` : ''\n        }`,\n      );\n    }\n  });\n}\n\nexport function warn(...args) {\n  if (isDevEnvOrTest()) {\n    console.warn(`${PREFIX}:`, ...args);\n  }\n}\n\nexport function deprecationWarning(\n  condition: any,\n  {\n    property,\n    name,\n    betterAlternative,\n    reason,\n  }: {\n    property: string;\n    name: string;\n    betterAlternative: (() => string) | string;\n    reason?: (() => string) | string;\n  },\n) {\n  if (condition) return;\n\n  if (!isDevEnvOrTest()) return;\n\n  // we can make deprecations even better if we add the md syntax in the console.\n  // anyway, everything down below will be stripped in the production build\n  console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);\n  warn(\n    `\"${property}\" is deprecated, consider better alternative: ${\n      typeof betterAlternative === 'function'\n        ? (betterAlternative as () => string)()\n        : betterAlternative\n    }`,\n  );\n  reason &&\n    warn(\n      `Reason: ${\n        typeof reason === 'function' ? (reason as () => string)() : reason\n      }`,\n    );\n  console.groupEnd();\n}\n"],"mappings":";;;;AAEA,MAAM,qBAAqB;CACzB,UAAU;CACV,SAAS;CACT,UAAU;CACX;AAED,MAAM,SAAS;AAEf,SAAgB,uBAAuB,MAAM,OAAO,UAAU;AAC5D,UAAS,SAAS,SAAS;AACzB,MAAI,QAAQ,OAAO;GACjB,MAAM,aAAa,mBAAmB;AAEtC,QACE,IAAI,KAAK,iBAAiB,KAAK,4BAC7B,aAAa,SAAS,WAAW,uBAAuB,KAE3D;;GAEH;;AAGJ,SAAgB,KAAK,GAAG,MAAM;AAC5B,KAAI,gBAAgB,CAClB,SAAQ,KAAK,GAAG,OAAO,IAAI,GAAG,KAAK;;AAIvC,SAAgB,mBACd,WACA,EACE,UACA,MACA,mBACA,UAOF;AACA,KAAI,UAAW;AAEf,KAAI,CAAC,gBAAgB,CAAE;AAIvB,SAAQ,MAAM,MAAM,OAAO,mBAAmB,OAAO;AACrD,MACE,IAAI,SAAS,gDACX,OAAO,sBAAsB,aACxB,mBAAoC,GACrC,oBAEP;AACD,WACE,KACE,WACE,OAAO,WAAW,aAAc,QAAyB,GAAG,SAE/D;AACH,SAAQ,UAAU"}

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.176.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.176.0";
+const VERSION = "0.177.0";
 const TASTY_VERSION = "3.7.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Usage.md

@@ -342,6 +342,24 @@ resolvePresetValues('s3'); // { fontFamily: 'ui-monospace, …', fontSize: '14px
 
 `useTokenValue()`, `useTokenValues()` and `usePresetValues()` are the same three readers as hooks, re-resolved whenever the palette is re-seeded or the scheme / contrast tier flips. The object `useTokenValues()` returns keeps its identity while the values do, so it is safe as a dependency of the theme object built from it.
 
+### Colors a Legacy Parser Will Accept
+
+Every color token computes to `oklch(...)`, and a large class of consumers validates colors against "HEX, `rgb()`, or `hsl()`" and **silently drops** anything else — Stripe's Appearance API falls back to its own light theme, `d3-color` (so Vega) throws, mapbox-gl rejects even an `#rrggbbaa` tail. Nothing warns, and a round trip through the DOM does not help: Chrome serializes `oklch` back as `oklch`. So `resolveTokenValue()` hands back a value that is correct and unusable at the same time, and `toLegacyColor()` is the step between them.
+
+```ts
+import { resolveTokenValue, toLegacyColor } from '@cube-dev/ui-kit';
+
+toLegacyColor(resolveTokenValue('#purple')); // '#6b53e4'
+toLegacyColor('oklch(0.55 0.21 285 / 0.4)'); // 'rgba(107, 83, 228, 0.4)'
+toLegacyColor('oklch(0.55 0.21 285 / 0.4)', { alpha: 'hex' }); // '#6b53e466'
+```
+
+An opaque color is always `#rrggbb`, which everything accepts. Only the translucent case has a choice, and `alpha` picks it, because the acceptable form differs per consumer: `'rgba'` (the default) is the widest — Stripe, mapbox-gl and CSS all take it — while `'hex'` gives the shorter `#rrggbbaa` that Vega and plain CSS prefer and mapbox-gl drops.
+
+It takes `null` so it composes with `resolveTokenValue()` directly, and reads every notation the kit emits or accepts: `oklch()`, `okhsl()`, `okhst()`, `rgb()`, `hsl()`, hex (3/4/6/8 digits) and `transparent`, in either the slash or the legacy comma alpha syntax, including the components a hand-rolled regex misses — a negative hue, any angle unit, scientific notation, a `none` component. A chroma outside the sRGB gamut is clipped to the gamut boundary rather than allowed to overflow a channel.
+
+A value it cannot read returns `fallback ?? null` rather than the input, which is the whole point: `color-mix()`, relative syntax (`oklch(from …)`) and a bare `var()` reference only have a value inside a CSS engine, and handing one back unchanged is exactly what makes the consumer drop the color and revert to its own theme.
+
 These resolve token _values_. For the ambient _conditions_ themselves — which scheme and contrast tier the document is in — see [Reading the scheme from JS](#reading-the-scheme-from-js).
 
 So these helpers do not inspect the value. They read `$tokens-applied`, a marker the token block declares alongside the tokens, which answers the question that matters — _are the kit's tokens in effect on this element?_ Off that surface every read returns `null` (or `fallback`) and warns once in development; on it, the computed value is taken as the truth.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.176.0",
+  "version": "0.177.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

package/dist/components/portal/PortalProvider.d.ts

@@ -1,2 +0,0 @@
-
-import { RefObject } from "react";