@cube-dev/ui-kit 0.182.0 → 0.184.0

package/dist/components/status/Spin/InternalSpinner.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { Cube } from "./Cube.js";
 import { SpinsContainer } from "./SpinsContainer.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,15 +12,29 @@ const SpinsBox = tasty({ styles: {
 	blockSize: "100%"
 } });
 const InternalSpinner = memo(function InternalSpinner(props) {
+	const $ = c(4);
 	const { size } = props;
-	return /* @__PURE__ */ jsx(SpinsContainer, {
-		ownSize: CUBE_SIZE_MAP[size],
-		children: /* @__PURE__ */ jsxs(SpinsBox, { children: [
+	const t0 = CUBE_SIZE_MAP[size];
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(SpinsBox, { children: [
 			/* @__PURE__ */ jsx(Cube, { $position: "top" }),
 			/* @__PURE__ */ jsx(Cube, { $position: "right" }),
 			/* @__PURE__ */ jsx(Cube, { $position: "bottom" })
-		] })
-	}, size);
+		] });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== size || $[2] !== t0) {
+		t2 = /* @__PURE__ */ jsx(SpinsContainer, {
+			ownSize: t0,
+			children: t1
+		}, size);
+		$[1] = size;
+		$[2] = t0;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
 });
 const CUBE_SIZE_MAP = {
 	small: 24,

package/dist/components/status/Spin/InternalSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalSpinner.js","names":[],"sources":["../../../../src/components/status/Spin/InternalSpinner.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { Cube } from './Cube';\nimport { SpinsContainer } from './SpinsContainer';\nimport { InternalSpinnerProps, SpinSize } from './types';\n\nconst SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });\n\nexport const InternalSpinner = memo(function InternalSpinner(\n  props: InternalSpinnerProps,\n) {\n  const { size } = props;\n\n  return (\n    // Even though using size as a key resets the animation, it helps safari to resize the cubes.\n    <SpinsContainer key={size} ownSize={CUBE_SIZE_MAP[size]}>\n      <SpinsBox>\n        <Cube $position=\"top\" />\n        <Cube $position=\"right\" />\n        <Cube $position=\"bottom\" />\n      </SpinsBox>\n    </SpinsContainer>\n  );\n});\n\nconst CUBE_SIZE_MAP: Record<SpinSize, number> = {\n  small: 24,\n  default: 32,\n  large: 48,\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,WAAW,MAAM,EAAE,QAAQ;CAAE,UAAU;CAAY,WAAW;CAAQ,EAAE,CAAC;AAE/E,MAAa,kBAAkB,KAAK,SAAS,gBAC3C,OACA;CACA,MAAM,EAAE,SAAS;AAEjB,QAEE,oBAAC;EAA0B,SAAS,cAAc;YAChD,qBAAC;GACC,oBAAC,QAAK,WAAU,QAAQ;GACxB,oBAAC,QAAK,WAAU,UAAU;GAC1B,oBAAC,QAAK,WAAU,WAAW;MAClB;IALQ,KAMJ;EAEnB;AAEF,MAAM,gBAA0C;CAC9C,OAAO;CACP,SAAS;CACT,OAAO;CACR"}
+{"version":3,"file":"InternalSpinner.js","names":["tasty","memo","Cube","SpinsContainer","InternalSpinnerProps","SpinSize","SpinsBox","styles","position","blockSize","InternalSpinner","props","$","_c","size","t0","CUBE_SIZE_MAP","t1","Symbol","for","t2","Record","small","default","large"],"sources":["../../../../src/components/status/Spin/InternalSpinner.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { Cube } from './Cube';\nimport { SpinsContainer } from './SpinsContainer';\nimport { InternalSpinnerProps, SpinSize } from './types';\n\nconst SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });\n\nexport const InternalSpinner = memo(function InternalSpinner(\n  props: InternalSpinnerProps,\n) {\n  const { size } = props;\n\n  return (\n    // Even though using size as a key resets the animation, it helps safari to resize the cubes.\n    <SpinsContainer key={size} ownSize={CUBE_SIZE_MAP[size]}>\n      <SpinsBox>\n        <Cube $position=\"top\" />\n        <Cube $position=\"right\" />\n        <Cube $position=\"bottom\" />\n      </SpinsBox>\n    </SpinsContainer>\n  );\n});\n\nconst CUBE_SIZE_MAP: Record<SpinSize, number> = {\n  small: 24,\n  default: 32,\n  large: 48,\n};\n"],"mappings":";;;;;;;;;AAOA,MAAMM,WAAWN,MAAM,EAAEO,QAAQ;CAAEC,UAAU;CAAYC,WAAW;CAAO,EAAG,CAAC;AAE/E,MAAaC,kBAAkBT,KAAK,SAAAS,gBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGlC,MAAA,EAAAC,SAAiBH;CAIqB,MAAAI,KAAAC,cAAcF;CAAK,IAAAG;AAAA,KAAAL,EAAA,OAAAM,OAAAC,IAAA,4BAAA,EAAA;AACrDF,OAAA,qBAAC;GACC,oBAAC,QAAe,WAAA,QAChB;uBAAC,QAAe,WAAA,UAChB;uBAAC,QAAe,WAAA,WAClB;MAAW;AAAAL,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAQ;AAAA,KAAAR,EAAA,OAAAE,QAAAF,EAAA,OAAAG,IAAA;AALbK,OAAA,oBAAC;GAAmC,SAAAL;aAClCE;KADmBH,KAMJ;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QANjBQ;EAQF;AAEF,MAAMJ,gBAA0C;CAC9CM,OAAO;CACPC,SAAS;CACTC,OAAO;CACR"}

package/dist/components/status/Spin/Spin.js

@@ -1,18 +1,42 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { InternalSpinner } from "./InternalSpinner.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/components/status/Spin/Spin.tsx
 const SpinContainer = tasty(Block, { styles: { lineHeight: "0" } });
 function Spin(props) {
-	const { size = "default", spinning = true, children, styles } = props;
-	if (!spinning) return /* @__PURE__ */ jsx(Fragment, { children });
-	return /* @__PURE__ */ jsx(SpinContainer, {
-		styles,
-		children: /* @__PURE__ */ jsx(InternalSpinner, { size })
-	});
+	const $ = c(7);
+	const { size: t0, spinning: t1, children, styles } = props;
+	const size = t0 === void 0 ? "default" : t0;
+	if (!(t1 === void 0 ? true : t1)) {
+		let t2;
+		if ($[0] !== children) {
+			t2 = /* @__PURE__ */ jsx(Fragment, { children });
+			$[0] = children;
+			$[1] = t2;
+		} else t2 = $[1];
+		return t2;
+	}
+	let t2;
+	if ($[2] !== size) {
+		t2 = /* @__PURE__ */ jsx(InternalSpinner, { size });
+		$[2] = size;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== styles || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(SpinContainer, {
+			styles,
+			children: t2
+		});
+		$[4] = styles;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
 }
 
 //#endregion

package/dist/components/status/Spin/Spin.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spin.js","names":[],"sources":["../../../../src/components/status/Spin/Spin.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Block } from '../../Block';\n\nimport { InternalSpinner } from './InternalSpinner';\nimport { CubeSpinProps } from './types';\n\nconst SpinContainer = tasty(Block, { styles: { lineHeight: '0' } });\n\nexport function Spin(props: CubeSpinProps) {\n  const { size = 'default', spinning = true, children, styles } = props;\n\n  if (!spinning) {\n    return <>{children}</>;\n  }\n\n  return (\n    <SpinContainer styles={styles}>\n      <InternalSpinner size={size} />\n    </SpinContainer>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,MAAM,OAAO,EAAE,QAAQ,EAAE,YAAY,KAAK,EAAE,CAAC;AAEnE,SAAgB,KAAK,OAAsB;CACzC,MAAM,EAAE,OAAO,WAAW,WAAW,MAAM,UAAU,WAAW;AAEhE,KAAI,CAAC,SACH,QAAO,gCAAG,WAAY;AAGxB,QACE,oBAAC;EAAsB;YACrB,oBAAC,mBAAsB,OAAQ;GACjB"}
+{"version":3,"file":"Spin.js","names":["tasty","Block","InternalSpinner","CubeSpinProps","SpinContainer","styles","lineHeight","Spin","props","$","_c","size","t0","spinning","t1","children","undefined","t2","t3"],"sources":["../../../../src/components/status/Spin/Spin.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Block } from '../../Block';\n\nimport { InternalSpinner } from './InternalSpinner';\nimport { CubeSpinProps } from './types';\n\nconst SpinContainer = tasty(Block, { styles: { lineHeight: '0' } });\n\nexport function Spin(props: CubeSpinProps) {\n  const { size = 'default', spinning = true, children, styles } = props;\n\n  if (!spinning) {\n    return <>{children}</>;\n  }\n\n  return (\n    <SpinContainer styles={styles}>\n      <InternalSpinner size={size} />\n    </SpinContainer>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAMI,gBAAgBJ,MAAMC,OAAO,EAAEI,QAAQ,EAAEC,YAAY,KAAI,EAAG,CAAC;AAEnE,SAAOC,KAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,EAAAC,MAAAC,IAAAC,UAAAC,IAAAC,UAAAV,WAAgEG;CAAxD,MAAAG,OAAAC,OAAAI,SAAA,YAAAJ;AAER,KAAI,EAFsBE,OAAAE,SAAA,OAAAF,KAEb;EAAA,IAAAG;AAAA,MAAAR,EAAA,OAAAM,UAAA;AACJE,QAAA,gCAAGF,WAAY;AAAAN,KAAA,KAAAM;AAAAN,KAAA,KAAAQ;QAAAA,MAAAR,EAAA;AAAA,SAAfQ;;CACR,IAAAA;AAAA,KAAAR,EAAA,OAAAE,MAAA;AAIGM,OAAA,oBAAC,mBAAsBN,OAAQ;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAS;AAAA,KAAAT,EAAA,OAAAJ,UAAAI,EAAA,OAAAQ,IAAA;AADjCC,OAAA,oBAAC;GAAsBb;aACrBY;IACc;AAAAR,IAAA,KAAAJ;AAAAI,IAAA,KAAAQ;AAAAR,IAAA,KAAAS;OAAAA,MAAAT,EAAA;AAAA,QAFhBS"}

package/dist/components/status/Spin/SpinsContainer.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";
 
@@ -20,11 +21,27 @@ const SpinsContainerElement = tasty({
 		} }
 	}
 });
-function SpinsContainer({ ownSize, children }) {
-	return /* @__PURE__ */ jsx(SpinsContainerElement, {
-		tokens: { "$cube-spin-size": `${ownSize}px` },
-		children
-	});
+function SpinsContainer(t0) {
+	const $ = c(5);
+	const { ownSize, children } = t0;
+	const t1 = `${ownSize}px`;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { "$cube-spin-size": t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== children || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(SpinsContainerElement, {
+			tokens: t2,
+			children
+		});
+		$[2] = children;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 
 //#endregion

package/dist/components/status/Spin/SpinsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinsContainer.js","names":[],"sources":["../../../../src/components/status/Spin/SpinsContainer.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nconst SpinsContainerElement = tasty({\n  role: 'presentation',\n  styles: {\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    padding: '(1 / 10 * $cube-spin-size)',\n    width: '$cube-spin-size',\n    height: '$cube-spin-size',\n    opacity: 0.8,\n    contain: 'size layout style paint',\n    // animation: {\n    //   '': 'cube-spin-reduced-motion 2s infinite ease-in-out',\n    //   '@media(prefers-reduced-motion)': 'none',\n    // },\n\n    '@keyframes': {\n      'cube-spin-reduced-motion': {\n        '0%': 'opacity: 0.4;',\n        '50%': 'opacity: 0.8;',\n        '100%': 'opacity: 0.4;',\n      },\n    },\n  },\n});\n\nexport interface SpinsContainerProps {\n  ownSize: number;\n  children?: ReactNode;\n}\n\nexport function SpinsContainer({ ownSize, children }: SpinsContainerProps) {\n  return (\n    <SpinsContainerElement tokens={{ '$cube-spin-size': `${ownSize}px` }}>\n      {children}\n    </SpinsContainerElement>\n  );\n}\n"],"mappings":";;;;;AAGA,MAAM,wBAAwB,MAAM;CAClC,MAAM;CACN,QAAQ;EACN,WAAW;EACX,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;EACT,SAAS;EAMT,cAAc,EACZ,4BAA4B;GAC1B,MAAM;GACN,OAAO;GACP,QAAQ;GACT,EACF;EACF;CACF,CAAC;AAOF,SAAgB,eAAe,EAAE,SAAS,YAAiC;AACzE,QACE,oBAAC;EAAsB,QAAQ,EAAE,mBAAmB,GAAG,QAAQ,KAAK;EACjE;GACqB"}
+{"version":3,"file":"SpinsContainer.js","names":["tasty","ReactNode","SpinsContainerElement","role","styles","boxSizing","display","padding","width","height","opacity","contain","SpinsContainerProps","ownSize","children","SpinsContainer","t0","$","_c","t1","t2","t3"],"sources":["../../../../src/components/status/Spin/SpinsContainer.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nconst SpinsContainerElement = tasty({\n  role: 'presentation',\n  styles: {\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    padding: '(1 / 10 * $cube-spin-size)',\n    width: '$cube-spin-size',\n    height: '$cube-spin-size',\n    opacity: 0.8,\n    contain: 'size layout style paint',\n    // animation: {\n    //   '': 'cube-spin-reduced-motion 2s infinite ease-in-out',\n    //   '@media(prefers-reduced-motion)': 'none',\n    // },\n\n    '@keyframes': {\n      'cube-spin-reduced-motion': {\n        '0%': 'opacity: 0.4;',\n        '50%': 'opacity: 0.8;',\n        '100%': 'opacity: 0.4;',\n      },\n    },\n  },\n});\n\nexport interface SpinsContainerProps {\n  ownSize: number;\n  children?: ReactNode;\n}\n\nexport function SpinsContainer({ ownSize, children }: SpinsContainerProps) {\n  return (\n    <SpinsContainerElement tokens={{ '$cube-spin-size': `${ownSize}px` }}>\n      {children}\n    </SpinsContainerElement>\n  );\n}\n"],"mappings":";;;;;;AAGA,MAAME,wBAAwBF,MAAM;CAClCG,MAAM;CACNC,QAAQ;EACNC,WAAW;EACXC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,SAAS;EAMT,cAAc,EACZ,4BAA4B;GAC1B,MAAM;GACN,OAAO;GACP,QAAQ;GACV,EACF;EACF;CACD,CAAC;AAOF,SAAOI,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwB,MAAA,EAAAL,SAAAC,aAAAE;CAEyB,MAAAG,KAAA,GAAGN,QAAO;CAAI,IAAAO;AAAA,KAAAH,EAAA,OAAAE,IAAA;AAAnCC,OAAA,EAAA,mBAAqBD,IAAgB;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAI;AAAA,KAAAJ,EAAA,OAAAH,YAAAG,EAAA,OAAAG,IAAA;AAApEC,OAAA,oBAAC;GAA8B,QAAAD;GAC5BN;IACqB;AAAAG,IAAA,KAAAH;AAAAG,IAAA,KAAAG;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;AAAA,QAFxBI"}

package/dist/data/item-themes.d.ts

@@ -2,7 +2,7 @@
 import { Styles } from "@tenphi/tasty";
 
 //#region src/data/item-themes.d.ts
-type ItemVariant = 'current.item' | 'current.primary' | 'current.outline' | 'current.outline-2' | 'current.clear' | 'current.link' | 'current.card' | 'default.primary' | 'default.outline' | 'default.outline-2' | 'default.clear' | 'default.link' | 'default.item' | 'default.card' | 'danger.primary' | 'danger.outline' | 'danger.outline-2' | 'danger.clear' | 'danger.link' | 'danger.item' | 'danger.card' | 'success.primary' | 'success.outline' | 'success.outline-2' | 'success.clear' | 'success.link' | 'success.item' | 'success.card' | 'warning.primary' | 'warning.outline' | 'warning.outline-2' | 'warning.clear' | 'warning.link' | 'warning.item' | 'warning.card' | 'note.primary' | 'note.outline' | 'note.outline-2' | 'note.clear' | 'note.link' | 'note.item' | 'note.card' | 'special.primary' | 'special.outline' | 'special.clear' | 'special.link' | 'special.item';
+type ItemVariant = 'current.item' | 'current.primary' | 'current.outline' | 'current.outline-2' | 'current.clear' | 'current.link' | 'current.card' | 'default.primary' | 'default.outline' | 'default.outline-2' | 'default.clear' | 'default.link' | 'default.item' | 'default.card' | 'primary.card' | 'danger.primary' | 'danger.outline' | 'danger.outline-2' | 'danger.clear' | 'danger.link' | 'danger.item' | 'danger.card' | 'success.primary' | 'success.outline' | 'success.outline-2' | 'success.clear' | 'success.link' | 'success.item' | 'success.card' | 'warning.primary' | 'warning.outline' | 'warning.outline-2' | 'warning.clear' | 'warning.link' | 'warning.item' | 'warning.card' | 'note.primary' | 'note.outline' | 'note.outline-2' | 'note.clear' | 'note.link' | 'note.item' | 'note.card' | 'special.primary' | 'special.outline' | 'special.clear' | 'special.link' | 'special.item';
 //#endregion
 export { ItemVariant };
 //# sourceMappingURL=item-themes.d.ts.map

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
 	invalid: "#danger-accent-text",
@@ -877,6 +877,11 @@ const DEFAULT_CARD_STYLES = {
 	fill: "#surface-3",
 	color: "#surface-text-soft"
 };
+const PRIMARY_CARD_STYLES = {
+	border: "#primary-accent-surface.20",
+	fill: "#primary-surface",
+	color: "#primary-accent-text"
+};
 const SUCCESS_CARD_STYLES = {
 	border: "#success-accent-surface.20",
 	fill: "#success-surface",
@@ -912,6 +917,7 @@ const ITEM_VARIANTS = {
 	"default.link": DEFAULT_LINK_STYLES,
 	"default.item": DEFAULT_ITEM_STYLES,
 	"default.card": DEFAULT_CARD_STYLES,
+	"primary.card": PRIMARY_CARD_STYLES,
 	"danger.primary": DANGER_PRIMARY_STYLES,
 	"danger.outline": DANGER_OUTLINE_STYLES,
 	"danger.outline-2": DANGER_OUTLINE_2_STYLES,