@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/layout/Flow.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,12 +12,33 @@ const FlowElement = tasty({ styles: {
 } });
 const STYLE_PROPS = CONTAINER_STYLES;
 const Flow = forwardRef(function Flow(props, ref) {
-	const styles = extractStyles(props, STYLE_PROPS);
-	return /* @__PURE__ */ jsx(FlowElement, {
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		styles
-	});
+	const $ = c(8);
+	let t0;
+	if ($[0] !== props) {
+		t0 = extractStyles(props, STYLE_PROPS);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const styles = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = filterBaseProps(props, { eventProps: true });
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== ref || $[5] !== styles || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(FlowElement, {
+			...t1,
+			ref,
+			styles
+		});
+		$[4] = ref;
+		$[5] = styles;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 });
 
 //#endregion

package/dist/components/layout/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAEF,MAAM,cAAc;AAIpB,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,YAAY;AAEhD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Flow.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","FlowElement","styles","display","flow","STYLE_PROPS","CubeFlowProps","Flow","props","ref","$","_c","t0","t1","eventProps","t2"],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAWA,MAAMO,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;CACR,EACD,CAAC;AAEF,MAAMC,cAAcV;AAIpB,MAAaY,OAAOR,WAAW,SAAAQ,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACdI,OAAAZ,cAAcQ,OAAOH,YAAY;AAAAK,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAAhD,MAAAR,SAAeU;CAAkC,IAAAC;AAAA,KAAAH,EAAA,OAAAF,OAAA;AAIzCK,OAAAhB,gBAAgBW,OAAO,EAAAM,YAAc,MAAM,CAAC;AAAAJ,IAAA,KAAAF;AAAAE,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAK;AAAA,KAAAL,EAAA,OAAAD,OAAAC,EAAA,OAAAR,UAAAQ,EAAA,OAAAG,IAAA;AADlDE,OAAA,oBAAC;GAAW,GACNF;GACCJ;GACGP;IACR;AAAAQ,IAAA,KAAAD;AAAAC,IAAA,KAAAR;AAAAQ,IAAA,KAAAG;AAAAH,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAAA,QAJFK;EAMF"}

package/dist/components/layout/Grid.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -16,12 +17,34 @@ const PROP_MAP = {
 	areas: "gridAreas"
 };
 const Grid = forwardRef(function Grid(props, ref) {
-	const styles = extractStyles(props, CONTAINER_STYLES, void 0, PROP_MAP);
-	return /* @__PURE__ */ jsx(GridElement, {
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		styles
-	});
+	const $ = c(8);
+	let t0;
+	if ($[0] !== props) {
+		t0 = extractStyles(props, CONTAINER_STYLES, void 0, PROP_MAP);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const styles = t0;
+	let t1;
+	if ($[2] !== props) {
+		t1 = filterBaseProps(props, { eventProps: true });
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	const t2 = t1;
+	let t3;
+	if ($[4] !== ref || $[5] !== styles || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(GridElement, {
+			...t2,
+			ref,
+			styles
+		});
+		$[4] = ref;
+		$[5] = styles;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 });
 
 //#endregion

package/dist/components/layout/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...(filterBaseProps(props, { eventProps: true }) as Record<\n        string,\n        unknown\n      >)}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAYA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAOF,MAAM,WAAW;CACf,UAAU;CACV,SAAS;CACT,MAAM;CACN,OAAO;CACR;AAED,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,kBAAkB,QAAW,SAAS;AAE1E,QACE,oBAAC;EACC,GAAK,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAI5C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Grid.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","ShortGridStyles","tasty","forwardRef","extractStyles","GridElement","styles","display","flow","CubeGridProps","Omit","PROP_MAP","template","columns","rows","areas","const","Grid","props","ref","$","_c","t0","undefined","t1","eventProps","t2","Record","t3"],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...(filterBaseProps(props, { eventProps: true }) as Record<\n        string,\n        unknown\n      >)}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAYA,MAAMQ,cAAcH,MAAM,EACxBI,QAAQ;CACNC,SAAS;CACTC,MAAM;CACR,EACD,CAAC;AAOF,MAAMG,WAAW;CACfC,UAAU;CACVC,SAAS;CACTC,MAAM;CACNC,OAAO;CACR;AAED,MAAaE,OAAOd,WAAW,SAAAc,KAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,OAAA;AACdI,OAAAlB,cAAcc,OAAOpB,kBAAkByB,QAAWZ,SAAS;AAAAS,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAA1E,MAAAd,SAAegB;CAA4D,IAAAE;AAAA,KAAAJ,EAAA,OAAAF,OAAA;AAIlEM,OAAAxB,gBAAgBkB,OAAO,EAAAO,YAAc,MAAM,CAAC;AAAAL,IAAA,KAAAF;AAAAE,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAA5C,MAAAM,KAAAF;CAGJ,IAAAI;AAAA,KAAAR,EAAA,OAAAD,OAAAC,EAAA,OAAAd,UAAAc,EAAA,OAAAM,IAAA;AAJHE,OAAA,oBAAC;GAAW,GACLF;GAIAP;GACGb;IACR;AAAAc,IAAA,KAAAD;AAAAC,IAAA,KAAAd;AAAAc,IAAA,KAAAM;AAAAN,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QAPFQ;EASF"}

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -75,13 +75,13 @@ const STYLES = [
 ];
 function Panel(props, ref) {
 	let { qa, mods, isStretched, isFloating, isCard, isFlex, styles, innerStyles, children, extra, style, ...otherProps } = props;
-	STYLES.forEach((style) => {
-		if (props[style]) {
+	STYLES.forEach((style_0) => {
+		if (props[style_0]) {
 			innerStyles = {
 				...innerStyles,
-				[style]: props[style]
+				[style_0]: props[style_0]
 			};
-			delete otherProps[style];
+			delete otherProps[style_0];
 		}
 	});
 	[
@@ -90,13 +90,13 @@ function Panel(props, ref) {
 		...BLOCK_STYLES,
 		...COLOR_STYLES,
 		...DIMENSION_STYLES
-	].forEach((style) => {
-		if (style in otherProps) {
+	].forEach((style_1) => {
+		if (style_1 in otherProps) {
 			styles = {
 				...styles,
-				[style]: otherProps[style]
+				[style_1]: otherProps[style_1]
 			};
-			delete otherProps[style];
+			delete otherProps[style_1];
 		}
 	});
 	const appliedMods = useMemo(() => ({

package/dist/components/layout/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/components/layout/Panel.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  DIMENSION_STYLES,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';\n\nconst PanelElement = tasty({\n  as: 'section',\n  qa: 'Panel',\n  styles: {\n    position: {\n      '': 'relative',\n      'stretched | floating': 'absolute',\n    },\n    inset: {\n      '': 'initial',\n      stretched: true,\n    },\n    display: 'block',\n    radius: {\n      '': '0',\n      card: '1r',\n    },\n    border: {\n      '': '0',\n      card: '1bw',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n  },\n});\n\nconst PanelInnerElement = tasty({\n  styles: {\n    position: 'absolute',\n    display: {\n      '': 'grid',\n      flex: 'flex',\n    },\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflow: 'auto',\n    scrollbar: 'thin #dark.2',\n    gridColumns: 'minmax(100%, 100%)',\n    gridRows: {\n      '': 'initial',\n      stretched: 'minmax(0, 1fr)',\n    },\n    radius: {\n      '': '0',\n      card: '(1r - 1bw)',\n    },\n    flow: 'row',\n    placeContent: 'start stretch',\n  },\n  styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],\n});\n\nexport interface CubePanelProps\n  extends OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    BaseProps {\n  isStretched?: boolean;\n  isCard?: boolean;\n  isFloating?: boolean;\n  styles?: Styles;\n  innerStyles?: Styles;\n  placeContent?: Styles['placeContent'];\n  placeItems?: Styles['placeItems'];\n  gridColumns?: Styles['gridTemplateColumns'];\n  gridRows?: Styles['gridTemplateRows'];\n  flow?: Styles['flow'];\n  gap?: Styles['gap'];\n  isFlex?: boolean;\n  children?: ReactNode;\n  extra?: ReactNode;\n}\n\nconst STYLES = [\n  'placeContent',\n  'placeItems',\n  'gridColumns',\n  'gridRows',\n  'flow',\n  'gap',\n  'padding',\n  'overflow',\n  'fill',\n  'color',\n  'preset',\n] as const;\n\nfunction Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {\n    qa,\n    mods,\n    isStretched,\n    isFloating,\n    isCard,\n    isFlex,\n    styles,\n    innerStyles,\n    children,\n    extra,\n    style,\n    ...otherProps\n  } = props;\n\n  STYLES.forEach((style) => {\n    if (props[style]) {\n      innerStyles = { ...innerStyles, [style]: props[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  [\n    ...OUTER_STYLES,\n    ...BASE_STYLES,\n    ...BLOCK_STYLES,\n    ...COLOR_STYLES,\n    ...DIMENSION_STYLES,\n  ].forEach((style) => {\n    if (style in otherProps) {\n      styles = { ...styles, [style]: otherProps[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  const appliedMods = useMemo(\n    () => ({\n      floating: isFloating,\n      stretched: isStretched,\n      card: isCard,\n      flex: isFlex,\n      ...mods,\n    }),\n    [isStretched, isCard, mods],\n  );\n\n  return (\n    <PanelElement\n      ref={ref}\n      qa={qa}\n      mods={appliedMods}\n      styles={styles}\n      style={style}\n      {...otherProps}\n    >\n      <PanelInnerElement mods={appliedMods} styles={innerStyles}>\n        {children}\n      </PanelInnerElement>\n      {extra}\n    </PanelElement>\n  );\n}\n\nconst _Panel = forwardRef(Panel);\n\n_Panel.displayName = 'Panel';\n\nexport { _Panel as Panel };\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,UAAU;GACR,IAAI;GACJ,wBAAwB;GACzB;EACD,OAAO;GACL,IAAI;GACJ,WAAW;GACZ;EACD,SAAS;EACT,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,UAAU;EACV,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,oBAAoB,MAAM;CAC9B,QAAQ;EACN,UAAU;EACV,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EACD,KAAK;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACX,aAAa;EACb,UAAU;GACR,IAAI;GACJ,WAAW;GACZ;EACD,QAAQ;GACN,IAAI;GACJ,MAAM;GACP;EACD,MAAM;EACN,cAAc;EACf;CACD,YAAY;EAAC,GAAG;EAAc,GAAG;EAAa,GAAG;EAAa;CAC/D,CAAC;AAwBF,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,MAAM,OAAuB,KAAmC;CACvE,IAAI,EACF,IACA,MACA,aACA,YACA,QACA,QACA,QACA,aACA,UACA,OACA,OACA,GAAG,eACD;AAEJ,QAAO,SAAS,UAAU;AACxB,MAAI,MAAM,QAAQ;AAChB,iBAAc;IAAE,GAAG;KAAc,QAAQ,MAAM;IAAQ;AAEvD,UAAO,WAAW;;GAEpB;AAEF;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACJ,CAAC,SAAS,UAAU;AACnB,MAAI,SAAS,YAAY;AACvB,YAAS;IAAE,GAAG;KAAS,QAAQ,WAAW;IAAQ;AAElD,UAAO,WAAW;;GAEpB;CAEF,MAAM,cAAc,eACX;EACL,UAAU;EACV,WAAW;EACX,MAAM;EACN,MAAM;EACN,GAAG;EACJ,GACD;EAAC;EAAa;EAAQ;EAAK,CAC5B;AAED,QACE,qBAAC;EACM;EACD;EACJ,MAAM;EACE;EACD;EACP,GAAI;aAEJ,oBAAC;GAAkB,MAAM;GAAa,QAAQ;GAC3C;IACiB,EACnB;GACY;;AAInB,MAAM,SAAS,WAAW,MAAM;AAEhC,OAAO,cAAc"}
+{"version":3,"file":"Panel.js","names":["BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","DIMENSION_STYLES","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","useMemo","PanelElement","as","qa","styles","position","inset","stretched","display","radius","card","border","flexGrow","placeSelf","PanelInnerElement","flex","top","left","right","bottom","overflow","scrollbar","gridColumns","gridRows","flow","placeContent","styleProps","CubePanelProps","isStretched","isCard","isFloating","innerStyles","placeItems","gap","isFlex","children","extra","STYLES","const","Panel","props","ref","HTMLDivElement","mods","style","otherProps","forEach","appliedMods","floating","_Panel","displayName"],"sources":["../../../src/components/layout/Panel.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  DIMENSION_STYLES,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';\n\nconst PanelElement = tasty({\n  as: 'section',\n  qa: 'Panel',\n  styles: {\n    position: {\n      '': 'relative',\n      'stretched | floating': 'absolute',\n    },\n    inset: {\n      '': 'initial',\n      stretched: true,\n    },\n    display: 'block',\n    radius: {\n      '': '0',\n      card: '1r',\n    },\n    border: {\n      '': '0',\n      card: '1bw',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n  },\n});\n\nconst PanelInnerElement = tasty({\n  styles: {\n    position: 'absolute',\n    display: {\n      '': 'grid',\n      flex: 'flex',\n    },\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflow: 'auto',\n    scrollbar: 'thin #dark.2',\n    gridColumns: 'minmax(100%, 100%)',\n    gridRows: {\n      '': 'initial',\n      stretched: 'minmax(0, 1fr)',\n    },\n    radius: {\n      '': '0',\n      card: '(1r - 1bw)',\n    },\n    flow: 'row',\n    placeContent: 'start stretch',\n  },\n  styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],\n});\n\nexport interface CubePanelProps\n  extends OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    BaseProps {\n  isStretched?: boolean;\n  isCard?: boolean;\n  isFloating?: boolean;\n  styles?: Styles;\n  innerStyles?: Styles;\n  placeContent?: Styles['placeContent'];\n  placeItems?: Styles['placeItems'];\n  gridColumns?: Styles['gridTemplateColumns'];\n  gridRows?: Styles['gridTemplateRows'];\n  flow?: Styles['flow'];\n  gap?: Styles['gap'];\n  isFlex?: boolean;\n  children?: ReactNode;\n  extra?: ReactNode;\n}\n\nconst STYLES = [\n  'placeContent',\n  'placeItems',\n  'gridColumns',\n  'gridRows',\n  'flow',\n  'gap',\n  'padding',\n  'overflow',\n  'fill',\n  'color',\n  'preset',\n] as const;\n\nfunction Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {\n    qa,\n    mods,\n    isStretched,\n    isFloating,\n    isCard,\n    isFlex,\n    styles,\n    innerStyles,\n    children,\n    extra,\n    style,\n    ...otherProps\n  } = props;\n\n  STYLES.forEach((style) => {\n    if (props[style]) {\n      innerStyles = { ...innerStyles, [style]: props[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  [\n    ...OUTER_STYLES,\n    ...BASE_STYLES,\n    ...BLOCK_STYLES,\n    ...COLOR_STYLES,\n    ...DIMENSION_STYLES,\n  ].forEach((style) => {\n    if (style in otherProps) {\n      styles = { ...styles, [style]: otherProps[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  const appliedMods = useMemo(\n    () => ({\n      floating: isFloating,\n      stretched: isStretched,\n      card: isCard,\n      flex: isFlex,\n      ...mods,\n    }),\n    [isStretched, isCard, mods],\n  );\n\n  return (\n    <PanelElement\n      ref={ref}\n      qa={qa}\n      mods={appliedMods}\n      styles={styles}\n      style={style}\n      {...otherProps}\n    >\n      <PanelInnerElement mods={appliedMods} styles={innerStyles}>\n        {children}\n      </PanelInnerElement>\n      {extra}\n    </PanelElement>\n  );\n}\n\nconst _Panel = forwardRef(Panel);\n\n_Panel.displayName = 'Panel';\n\nexport { _Panel as Panel };\n"],"mappings":";;;;;;AAgBA,MAAMgB,eAAeL,MAAM;CACzBM,IAAI;CACJC,IAAI;CACJC,QAAQ;EACNC,UAAU;GACR,IAAI;GACJ,wBAAwB;GACzB;EACDC,OAAO;GACL,IAAI;GACJC,WAAW;GACZ;EACDC,SAAS;EACTC,QAAQ;GACN,IAAI;GACJC,MAAM;GACP;EACDC,QAAQ;GACN,IAAI;GACJD,MAAM;GACP;EACDE,UAAU;EACVC,WAAW;EACb;CACD,CAAC;AAEF,MAAMC,oBAAoBlB,MAAM;CAC9BQ,QAAQ;EACNC,UAAU;EACVG,SAAS;GACP,IAAI;GACJO,MAAM;GACP;EACDC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,UAAU;EACVC,WAAW;EACXC,aAAa;EACbC,UAAU;GACR,IAAI;GACJhB,WAAW;GACZ;EACDE,QAAQ;GACN,IAAI;GACJC,MAAM;GACP;EACDc,MAAM;EACNC,cAAc;EACf;CACDC,YAAY;EAAC,GAAGjC;EAAc,GAAGR;EAAa,GAAGK;EAAY;CAC9D,CAAC;AAwBF,MAAM+C,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAASE,MAAMC,OAAuBC,KAAmC;CACvE,IAAI,EACFtC,IACAwC,MACAf,aACAE,YACAD,QACAK,QACA9B,QACA2B,aACAI,UACAC,OACAQ,OACA,GAAGC,eACDL;AAEJH,QAAOS,SAASF,YAAU;AACxB,MAAIJ,MAAMI,UAAQ;AAChBb,iBAAc;IAAE,GAAGA;KAAca,UAAQJ,MAAMI;IAAQ;AAEvD,UAAOC,WAAWD;;GAEpB;AAEF;EACE,GAAGnD;EACH,GAAGR;EACH,GAAGG;EACH,GAAGE;EACH,GAAGE;EACJ,CAACsD,SAASF,YAAU;AACnB,MAAIA,WAASC,YAAY;AACvBzC,YAAS;IAAE,GAAGA;KAASwC,UAAQC,WAAWD;IAAQ;AAElD,UAAOC,WAAWD;;GAEpB;CAEF,MAAMG,cAAc/C,eACX;EACLgD,UAAUlB;EACVvB,WAAWqB;EACXlB,MAAMmB;EACNd,MAAMmB;EACN,GAAGS;EACJ,GACD;EAACf;EAAaC;EAAQc;EACxB,CAAC;AAED,QACE,qBAAC;EACMF;EACDtC;EACJ,MAAM4C;EACE3C;EACDwC;EACP,GAAIC;aAEJ,oBAAC;GAAkB,MAAME;GAAa,QAAQhB;GAC3CI;IACgB,EAClBC;GACY;;AAInB,MAAMa,SAASnD,WAAWyC,MAAM;AAEhCU,OAAOC,cAAc"}

package/dist/components/layout/Prefix.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -24,23 +25,65 @@ const PrefixElement = tasty({
 	}
 });
 const Prefix = forwardRef(function Prefix(allProps, outerRef) {
-	let { onWidthChange, outerGap = "1bw", children, ...props } = allProps;
+	const $ = c(18);
+	const { onWidthChange, outerGap: t0, children, ...props } = allProps;
+	const outerGap = t0 === void 0 ? "1bw" : t0;
 	const styles = extractStyles(props, CONTAINER_STYLES);
 	const ref = useCombinedRefs(outerRef);
-	useLayoutEffect$1(() => {
-		if (ref?.current && onWidthChange) onWidthChange(ref.current.offsetWidth);
-	}, [
-		children,
-		ref,
-		onWidthChange
-	]);
-	return /* @__PURE__ */ jsx(PrefixElement, {
-		...filterBaseProps(props, { eventProps: true }),
-		ref,
-		styles,
-		style: { "--prefix-gap": parseStyle(outerGap).output },
-		children
-	});
+	let t1;
+	if ($[0] !== onWidthChange || $[1] !== ref) {
+		t1 = () => {
+			if (ref?.current && onWidthChange) onWidthChange(ref.current.offsetWidth);
+		};
+		$[0] = onWidthChange;
+		$[1] = ref;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== children || $[4] !== onWidthChange || $[5] !== ref) {
+		t2 = [
+			children,
+			ref,
+			onWidthChange
+		];
+		$[3] = children;
+		$[4] = onWidthChange;
+		$[5] = ref;
+		$[6] = t2;
+	} else t2 = $[6];
+	useLayoutEffect$1(t1, t2);
+	const T0 = PrefixElement;
+	const t3 = filterBaseProps(props, { eventProps: true });
+	let t4;
+	if ($[7] !== outerGap) {
+		t4 = parseStyle(outerGap);
+		$[7] = outerGap;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4.output) {
+		t5 = { "--prefix-gap": t4.output };
+		$[9] = t4.output;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== T0 || $[12] !== children || $[13] !== ref || $[14] !== styles || $[15] !== t3 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t3,
+			ref,
+			styles,
+			style: t5,
+			children
+		});
+		$[11] = T0;
+		$[12] = children;
+		$[13] = ref;
+		$[14] = styles;
+		$[15] = t3;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 });
 
 //#endregion

package/dist/components/layout/Prefix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAE9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,yBAAsB;AACpB,MAAI,KAAK,WAAW,cAClB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EAEL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}
+{"version":3,"file":"Prefix.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","parseStyle","tasty","CSSProperties","forwardRef","useCombinedRefs","useLayoutEffect","extractStyles","PrefixElement","element","styles","position","display","placeContent","placeItems","flow","gap","left","top","bottom","color","height","CubePrefixProps","onWidthChange","Function","outerGap","Prefix","HTMLDivElement","allProps","outerRef","$","_c","t0","children","props","undefined","ref","t1","current","offsetWidth","t2","T0","t3","eventProps","t4","t5","output","t6"],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAaA,MAAMW,gBAAgBN,MAAM;CAC1BO,SAAS;CACTC,QAAQ;EACNC,UAAU;EACVC,SAAS;EACTC,cAAc;EACdC,YAAY;EACZC,MAAM;EACNC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACV;CACD,CAAC;AAOF,MAAaK,SAAStB,WACpB,SAAAsB,OAAAE,UAAAC,UAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACE,MAAA,EAAAR,eAAAE,UAAAO,IAAAC,UAAA,GAAAC,UAA8DN;CAAzC,MAAAH,WAAAO,OAAAG,SAAA,QAAAH;CAErB,MAAAtB,SAAeH,cAAc2B,OAAOpC,iBAAiB;CACrD,MAAAsC,MAAY/B,gBAAgBwB,SAAS;CAAC,IAAAQ;AAAA,KAAAP,EAAA,OAAAP,iBAAAO,EAAA,OAAAM,KAAA;AAEtBC,aAAA;AACd,OAAID,KAAGE,WAAHf,cACFA,eAAca,IAAGE,QAAQC,YAAa;;AAEzCT,IAAA,KAAAP;AAAAO,IAAA,KAAAM;AAAAN,IAAA,KAAAO;OAAAA,MAAAP,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAG,YAAAH,EAAA,OAAAP,iBAAAO,EAAA,OAAAM,KAAA;AAAEI,OAAA;GAACP;GAAUG;GAAKb;GAAc;AAAAO,IAAA,KAAAG;AAAAH,IAAA,KAAAP;AAAAO,IAAA,KAAAM;AAAAN,IAAA,KAAAU;OAAAA,MAAAV,EAAA;AAJjCxB,mBAAgB+B,IAIbG,GAA+B;CAG/B,MAAAC,KAAAjC;CACK,MAAAkC,KAAA1C,gBAAgBkC,OAAO,EAAAS,YAAc,MAAM,CAAC;CAAA,IAAAC;AAAA,KAAAd,EAAA,OAAAL,UAAA;AAK9BmB,OAAA3C,WAAWwB,SAAS;AAAAK,IAAA,KAAAL;AAAAK,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,OAAAc,GAAAE,QAAA;AAF/BD,OAAA,EAAA,gBAEWD,GAAoBE,QACrC;AAAAhB,IAAA,KAAAc,GAAAE;AAAAhB,IAAA,MAAAe;OAAAA,MAAAf,EAAA;CAAA,IAAAiB;AAAA,KAAAjB,EAAA,QAAAW,MAAAX,EAAA,QAAAG,YAAAH,EAAA,QAAAM,OAAAN,EAAA,QAAApB,UAAAoB,EAAA,QAAAY,MAAAZ,EAAA,QAAAe,IAAA;AAPHE,OAAA,oBAAC;GAAa,GACRL;GACCN;GACG1B;GACD,OAAAmC;GAKNZ;IACa;AAAAH,IAAA,MAAAW;AAAAX,IAAA,MAAAG;AAAAH,IAAA,MAAAM;AAAAN,IAAA,MAAApB;AAAAoB,IAAA,MAAAY;AAAAZ,IAAA,MAAAe;AAAAf,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;AAAA,QAVhBiB;EAaL"}

package/dist/components/layout/ResizablePanel.js

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useDebouncedValue } from "../../_internal/hooks/use-debounced-value.js";
 import { _Panel } from "./Panel.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -134,19 +135,34 @@ const HandlerElement = tasty({
 	}
 });
 const Handler = (props) => {
-	const { direction = "right", isDisabled, ...otherProps } = props;
-	const { hoverProps, isHovered } = useHover({});
+	const $ = c(8);
+	const { direction: t0, isDisabled, ...otherProps } = props;
+	const direction = t0 === void 0 ? "right" : t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {};
+		$[0] = t1;
+	} else t1 = $[0];
+	const { hoverProps, isHovered } = useHover(t1);
 	const isHorizontal = direction === "left" || direction === "right";
-	return /* @__PURE__ */ jsxs(HandlerElement, {
-		...mergeProps$1(hoverProps, {
-			mods: {
-				hovered: useDebouncedValue(isHovered, 150),
-				horizontal: isHorizontal,
-				disabled: isDisabled
-			},
-			"data-direction": direction
-		}, otherProps),
-		children: [/* @__PURE__ */ jsx("div", { "data-element": "Track" }), !isDisabled ? /* @__PURE__ */ jsxs("div", {
+	const localIsHovered = useDebouncedValue(isHovered, 150);
+	const T0 = HandlerElement;
+	const t2 = mergeProps$1(hoverProps, {
+		mods: {
+			hovered: localIsHovered,
+			horizontal: isHorizontal,
+			disabled: isDisabled
+		},
+		"data-direction": direction
+	}, otherProps);
+	let t3;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("div", { "data-element": "Track" });
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== isDisabled) {
+		t4 = !isDisabled ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "Drag",
 			children: [
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
@@ -155,8 +171,22 @@ const Handler = (props) => {
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
 				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" })
 			]
-		}) : null]
-	});
+		}) : null;
+		$[2] = isDisabled;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== T0 || $[5] !== t2 || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(T0, {
+			...t2,
+			children: [t3, t4]
+		});
+		$[4] = T0;
+		$[5] = t2;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
 };
 const StyledPanel = tasty(_Panel, { styles: {
 	flexGrow: 0,
@@ -194,10 +224,10 @@ function ResizablePanel(props, ref) {
 		ref,
 		onResize
 	});
-	function clamp(size) {
-		if (typeof maxSize === "number") size = Math.min(maxSize, size);
-		if (typeof minSize === "number" || !minSize) size = Math.max(minSize || 0, size);
-		return Math.max(size, 0);
+	function clamp(size_0) {
+		if (typeof maxSize === "number") size_0 = Math.min(maxSize, size_0);
+		if (typeof minSize === "number" || !minSize) size_0 = Math.max(minSize || 0, size_0);
+		return Math.max(size_0, 0);
 	}
 	let [size, setSize] = useState(providedSize != null ? clamp(providedSize) : 200);
 	let [visualSize, setVisualSize] = useState(null);
@@ -205,26 +235,26 @@ function ResizablePanel(props, ref) {
 		onMoveStart(e) {
 			if (isDisabled) return;
 			setIsDragging(true);
-			const offsetProp = isHorizontal ? "offsetWidth" : "offsetHeight";
-			if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) setSize(Math.round(ref.current[offsetProp]));
+			const offsetProp_0 = isHorizontal ? "offsetWidth" : "offsetHeight";
+			if (ref.current && Math.abs(ref.current[offsetProp_0] - size) >= 1) setSize(Math.round(ref.current[offsetProp_0]));
 		},
-		onMove(e) {
-			setSize((size) => {
-				if (isDisabled) return size;
-				if (e.pointerType === "keyboard") return size;
-				size += isHorizontal ? e.deltaX * (direction === "right" ? 1 : -1) : e.deltaY * (direction === "bottom" ? 1 : -1);
-				return size;
+		onMove(e_0) {
+			setSize((size_1) => {
+				if (isDisabled) return size_1;
+				if (e_0.pointerType === "keyboard") return size_1;
+				size_1 += isHorizontal ? e_0.deltaX * (direction === "right" ? 1 : -1) : e_0.deltaY * (direction === "bottom" ? 1 : -1);
+				return size_1;
 			});
 		},
-		onMoveEnd(e) {
+		onMoveEnd(e_1) {
 			setIsDragging(false);
-			setSize((size) => clamp(Math.round(size)));
+			setSize((size_2) => clamp(Math.round(size_2)));
 		}
 	});
 	const notifyChange = useEvent(() => {
-		setSize((size) => {
-			if (providedSize && Math.abs(providedSize - size) > .5) return providedSize;
-			return size;
+		setSize((size_3) => {
+			if (providedSize && Math.abs(providedSize - size_3) > .5) return providedSize;
+			return size_3;
 		});
 	});
 	useEffect(() => {

package/dist/components/layout/ResizablePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizablePanel.js","names":["mergeProps","Panel"],"sources":["../../../src/components/layout/ResizablePanel.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport { BasePropsWithoutChildren, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue, useEvent } from '../../_internal/hooks';\nimport { mergeProps, useCombinedRefs } from '../../utils/react';\n\nimport { CubePanelProps, Panel } from './Panel';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface CubeResizablePanelProps extends CubePanelProps {\n  handlerStyles?: Styles;\n  /**\n   * Optional because both `ResizablePanel` and `Handler` destructure it as\n   * `direction = 'right'`. Declaring it required contradicted that default and\n   * made `no-redundant-default-prop` unusable: the rule reads the same `'right'`\n   * default out of the generated registry and strips an explicit\n   * `direction=\"right\"`, which then fails to typecheck.\n   */\n  direction?: Direction;\n  size?: number;\n  onSizeChange?: (size: number) => void;\n  minSize?: string | number;\n  maxSize?: string | number;\n  isDisabled?: boolean;\n}\n\nconst HandlerElement = tasty({\n  qa: 'ResizeHandler',\n  styles: {\n    // The real size is slightly bigger than the visual one.\n    width: {\n      '': 'initial',\n      horizontal: '9px',\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': '9px',\n      horizontal: 'initial',\n      'disabled & !horizontal': '1bw',\n    },\n    top: {\n      '': 0,\n      '[data-direction=\"top\"]': 'initial',\n    },\n    bottom: {\n      '': 0,\n      '[data-direction=\"bottom\"]': 'initial',\n    },\n    right: {\n      '': 0,\n      '[data-direction=\"right\"]': 'initial',\n    },\n    left: {\n      '': 0,\n      '[data-direction=\"left\"]': 'initial',\n    },\n    // Transform requires a separate visual size property to respect size boundaries\n    transform: {\n      '': 'translate(0, 0)',\n      '[data-direction=\"top\"]':\n        'translate(0, ($size-compensation - $visual-size))',\n      '[data-direction=\"right\"]':\n        'translate(($visual-size - $size-compensation), 0)',\n      '[data-direction=\"bottom\"]':\n        'translate(0, ($visual-size - $size-compensation))',\n      '[data-direction=\"left\"]':\n        'translate(($size-compensation - $visual-size), 0)',\n    },\n    position: 'absolute',\n    zIndex: 1,\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    padding: 0,\n    boxSizing: 'border-box',\n    transition: 'theme',\n    '--size-compensation': {\n      '': '6px',\n      disabled: '1bw',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag) & !disabled': '#purple-03',\n      },\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        drag: '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag': '#dark-02',\n        disabled: '#disabled-surface-text',\n      },\n    },\n  },\n});\n\ninterface HandlerProps extends BasePropsWithoutChildren {\n  direction?: Direction;\n}\n\nconst Handler = (props: HandlerProps) => {\n  const { direction = 'right', isDisabled, ...otherProps } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const isHorizontal = direction === 'left' || direction === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <HandlerElement\n      {...mergeProps(\n        hoverProps,\n        {\n          mods: {\n            hovered: localIsHovered,\n            horizontal: isHorizontal,\n            disabled: isDisabled,\n          },\n          'data-direction': direction,\n        },\n        otherProps,\n      )}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled ? (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      ) : null}\n    </HandlerElement>\n  );\n};\n\nconst StyledPanel = tasty(Panel, {\n  styles: {\n    flexGrow: 0,\n    width: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"top\"] | [data-direction=\"bottom\"]': 'initial',\n    },\n    height: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"left\"] | [data-direction=\"right\"]': 'initial',\n    },\n    placeSelf: 'stretch',\n    touchAction: 'none',\n\n    '$indent-compensation': {\n      '': '3px',\n      disabled: '1bw',\n    },\n  },\n});\n\nfunction ResizablePanel(\n  props: CubeResizablePanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const isControllable = typeof props.size === 'number';\n  const {\n    isDisabled,\n    direction = 'right',\n    size: providedSize,\n    onSizeChange,\n    minSize = 200,\n    maxSize = isControllable ? undefined : 'min(50%, 400px)',\n    ...restProps\n  } = props;\n  const [isDragging, setIsDragging] = useState(false);\n  const isHorizontal = direction === 'left' || direction === 'right';\n\n  ref = useCombinedRefs(ref);\n\n  const onResize = useEvent(() => {\n    if (ref?.current) {\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n      const containerSize = ref.current[offsetProp];\n\n      if (Math.abs(containerSize - size) < 1 && !isDisabled) {\n        setVisualSize(size);\n      } else {\n        setVisualSize(containerSize);\n      }\n    }\n  });\n\n  useResizeObserver({\n    ref,\n    onResize,\n  });\n\n  function clamp(size: number) {\n    if (typeof maxSize === 'number') {\n      size = Math.min(maxSize, size);\n    }\n\n    if (typeof minSize === 'number' || !minSize) {\n      size = Math.max((minSize as number) || 0, size);\n    }\n\n    return Math.max(size, 0);\n  }\n\n  let [size, setSize] = useState<number>(\n    providedSize != null ? clamp(providedSize) : 200,\n  );\n  let [visualSize, setVisualSize] = useState<number | null>(null);\n\n  let { moveProps } = useMove({\n    onMoveStart(e) {\n      if (isDisabled) {\n        return;\n      }\n\n      setIsDragging(true);\n\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n\n      if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) {\n        setSize(Math.round(ref.current[offsetProp]));\n      }\n    },\n    onMove(e) {\n      setSize((size) => {\n        if (isDisabled) {\n          return size;\n        }\n\n        if (e.pointerType === 'keyboard') {\n          return size;\n        }\n\n        size += isHorizontal\n          ? e.deltaX * (direction === 'right' ? 1 : -1)\n          : e.deltaY * (direction === 'bottom' ? 1 : -1);\n\n        return size;\n      });\n    },\n    onMoveEnd(e) {\n      setIsDragging(false);\n      setSize((size) => clamp(Math.round(size)));\n    },\n  });\n\n  // Since we sync provided size and the local one in two ways,\n  // we need a way to prevent infinite loop in some cases.\n  // We will run this in setTimeout and make sure it will get the most recent state.\n  const notifyChange = useEvent(() => {\n    setSize((size) => {\n      if (providedSize && Math.abs(providedSize - size) > 0.5) {\n        return providedSize;\n      }\n\n      return size;\n    });\n  });\n\n  useEffect(() => {\n    onResize();\n  }, [size, isDisabled]);\n\n  useEffect(() => {\n    if (\n      !isDragging &&\n      visualSize != null &&\n      (providedSize == null || Math.abs(providedSize - visualSize) > 0.5)\n    ) {\n      onSizeChange?.(Math.round(visualSize));\n    }\n  }, [visualSize, isDragging]);\n\n  useEffect(() => {\n    timerRef.current = setTimeout(notifyChange, 500);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [providedSize]);\n\n  const mods = useMemo(() => {\n    return {\n      drag: isDragging,\n      horizontal: isHorizontal,\n      disabled: isDisabled,\n    };\n  }, [isDragging, isHorizontal, isDisabled]);\n\n  return (\n    <StyledPanel\n      ref={ref}\n      data-direction={direction}\n      mods={mods}\n      extra={\n        <Handler\n          isDisabled={isDisabled || visualSize == null}\n          direction={direction}\n          {...moveProps}\n          mods={mods}\n        />\n      }\n      {...mergeProps(restProps, {\n        style: {\n          // We set the current size further via width/min-width/max-width styles to respect size boundaries\n          '--size': `${size}px`,\n          // We use a separate visual size to paint the handler for a smoother experience\n          '--visual-size': `${visualSize}px`,\n          '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n          '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n        },\n        innerStyles: {\n          // The panel inner space compensation for the handler\n          margin: `$indent-compensation ${direction}`,\n        },\n      })}\n    />\n  );\n}\n\nconst _ResizablePanel = forwardRef(ResizablePanel);\n\n_ResizablePanel.displayName = 'ResizablePanel';\n\nexport { _ResizablePanel as ResizablePanel };\n"],"mappings":";;;;;;;;;;;;;AAoCA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EAEN,OAAO;GACL,IAAI;GACJ,YAAY;GACZ,yBAAyB;GAC1B;EACD,QAAQ;GACN,IAAI;GACJ,YAAY;GACZ,0BAA0B;GAC3B;EACD,KAAK;GACH,IAAI;GACJ,4BAA0B;GAC3B;EACD,QAAQ;GACN,IAAI;GACJ,+BAA6B;GAC9B;EACD,OAAO;GACL,IAAI;GACJ,8BAA4B;GAC7B;EACD,MAAM;GACJ,IAAI;GACJ,6BAA2B;GAC5B;EAED,WAAW;GACT,IAAI;GACJ,4BACE;GACF,8BACE;GACF,+BACE;GACF,6BACE;GACH;EACD,UAAU;EACV,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,YAAY;GACZ,UAAU;GACX;EACD,SAAS;EACT,WAAW;EACX,YAAY;EACZ,uBAAuB;GACrB,IAAI;GACJ,UAAU;GACX;EAED,OAAO;GACL,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,yBAAyB;IAC1B;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACZ,0BAA0B;IAC3B;GACD,UAAU;GACV,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,UAAU;IACX;GACD,MAAM;IACJ,IAAI;IACJ,gCAAgC;IACjC;GACD,YAAY;GACZ,SAAS;IACP,IAAI;IACJ,MAAM;IACP;GACD,eAAe;GAChB;EAED,MAAM;GACJ,SAAS;GACT,KAAK;GACL,MAAM;IACJ,IAAI;IACJ,YAAY;IACb;GACD,aAAa;IACX,IAAI;IACJ,YAAY;IACb;GACD,UAAU;IACR,IAAI;IACJ,YAAY;IACb;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACb;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACb;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACb;GACD,WAAW;IACT,IAAI;IACJ,YAAY;IACb;GACD,UAAU;GACV,YAAY;GACb;EAED,UAAU;GACR,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,kBAAkB;IAClB,UAAU;IACX;GACF;EACF;CACF,CAAC;AAMF,MAAM,WAAW,UAAwB;CACvC,MAAM,EAAE,YAAY,SAAS,YAAY,GAAG,eAAe;CAC3D,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,eAAe,cAAc,UAAU,cAAc;AAG3D,QACE,qBAAC;EACC,GAAIA,aACF,YACA;GACE,MAAM;IACJ,SARa,kBAAkB,WAAW,IAAI;IAS9C,YAAY;IACZ,UAAU;IACX;GACD,kBAAkB;GACnB,EACD,WACD;aAED,oBAAC,SAAI,gBAAa,UAAU,EAC3B,CAAC,aACA,qBAAC;GAAI,gBAAa;;IAChB,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;;IAC3B,GACJ;GACW;;AAIrB,MAAM,cAAc,MAAMC,QAAO,EAC/B,QAAQ;CACN,UAAU;CACV,OAAO;EACL,IAAI;EACJ,0DAAsD;EACvD;CACD,QAAQ;EACN,IAAI;EACJ,0DAAsD;EACvD;CACD,WAAW;CACX,aAAa;CAEb,wBAAwB;EACtB,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAEF,SAAS,eACP,OACA,KACA;CACA,MAAM,WAAW,OAAsC,KAAK;CAC5D,MAAM,iBAAiB,OAAO,MAAM,SAAS;CAC7C,MAAM,EACJ,YACA,YAAY,SACZ,MAAM,cACN,cACA,UAAU,KACV,UAAU,iBAAiB,SAAY,mBACvC,GAAG,cACD;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,cAAc,UAAU,cAAc;AAE3D,OAAM,gBAAgB,IAAI;CAE1B,MAAM,WAAW,eAAe;AAC9B,MAAI,KAAK,SAAS;GAChB,MAAM,aAAa,eAAe,gBAAgB;GAClD,MAAM,gBAAgB,IAAI,QAAQ;AAElC,OAAI,KAAK,IAAI,gBAAgB,KAAK,GAAG,KAAK,CAAC,WACzC,eAAc,KAAK;OAEnB,eAAc,cAAc;;GAGhC;AAEF,mBAAkB;EAChB;EACA;EACD,CAAC;CAEF,SAAS,MAAM,MAAc;AAC3B,MAAI,OAAO,YAAY,SACrB,QAAO,KAAK,IAAI,SAAS,KAAK;AAGhC,MAAI,OAAO,YAAY,YAAY,CAAC,QAClC,QAAO,KAAK,IAAK,WAAsB,GAAG,KAAK;AAGjD,SAAO,KAAK,IAAI,MAAM,EAAE;;CAG1B,IAAI,CAAC,MAAM,WAAW,SACpB,gBAAgB,OAAO,MAAM,aAAa,GAAG,IAC9C;CACD,IAAI,CAAC,YAAY,iBAAiB,SAAwB,KAAK;CAE/D,IAAI,EAAE,cAAc,QAAQ;EAC1B,YAAY,GAAG;AACb,OAAI,WACF;AAGF,iBAAc,KAAK;GAEnB,MAAM,aAAa,eAAe,gBAAgB;AAElD,OAAI,IAAI,WAAW,KAAK,IAAI,IAAI,QAAQ,cAAc,KAAK,IAAI,EAC7D,SAAQ,KAAK,MAAM,IAAI,QAAQ,YAAY,CAAC;;EAGhD,OAAO,GAAG;AACR,YAAS,SAAS;AAChB,QAAI,WACF,QAAO;AAGT,QAAI,EAAE,gBAAgB,WACpB,QAAO;AAGT,YAAQ,eACJ,EAAE,UAAU,cAAc,UAAU,IAAI,MACxC,EAAE,UAAU,cAAc,WAAW,IAAI;AAE7C,WAAO;KACP;;EAEJ,UAAU,GAAG;AACX,iBAAc,MAAM;AACpB,YAAS,SAAS,MAAM,KAAK,MAAM,KAAK,CAAC,CAAC;;EAE7C,CAAC;CAKF,MAAM,eAAe,eAAe;AAClC,WAAS,SAAS;AAChB,OAAI,gBAAgB,KAAK,IAAI,eAAe,KAAK,GAAG,GAClD,QAAO;AAGT,UAAO;IACP;GACF;AAEF,iBAAgB;AACd,YAAU;IACT,CAAC,MAAM,WAAW,CAAC;AAEtB,iBAAgB;AACd,MACE,CAAC,cACD,cAAc,SACb,gBAAgB,QAAQ,KAAK,IAAI,eAAe,WAAW,GAAG,IAE/D,gBAAe,KAAK,MAAM,WAAW,CAAC;IAEvC,CAAC,YAAY,WAAW,CAAC;AAE5B,iBAAgB;AACd,WAAS,UAAU,WAAW,cAAc,IAAI;AAEhD,eAAa;AACX,OAAI,SAAS,QACX,cAAa,SAAS,QAAQ;;IAGjC,CAAC,aAAa,CAAC;CAElB,MAAM,OAAO,cAAc;AACzB,SAAO;GACL,MAAM;GACN,YAAY;GACZ,UAAU;GACX;IACA;EAAC;EAAY;EAAc;EAAW,CAAC;AAE1C,QACE,oBAAC;EACM;EACL,kBAAgB;EACV;EACN,OACE,oBAAC;GACC,YAAY,cAAc,cAAc;GAC7B;GACX,GAAI;GACE;IACN;EAEJ,GAAID,aAAW,WAAW;GACxB,OAAO;IAEL,UAAU,GAAG,KAAK;IAElB,iBAAiB,GAAG,WAAW;IAC/B,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;IAC7D,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;IAC9D;GACD,aAAa,EAEX,QAAQ,wBAAwB,aACjC;GACF,CAAC;GACF;;AAIN,MAAM,kBAAkB,WAAW,eAAe;AAElD,gBAAgB,cAAc"}
+{"version":3,"file":"ResizablePanel.js","names":["useResizeObserver","BasePropsWithoutChildren","Styles","tasty","ForwardedRef","forwardRef","useEffect","useMemo","useRef","useState","useHover","useMove","useDebouncedValue","useEvent","mergeProps","useCombinedRefs","CubePanelProps","Panel","Direction","CubeResizablePanelProps","handlerStyles","direction","size","onSizeChange","minSize","maxSize","isDisabled","HandlerElement","qa","styles","width","horizontal","height","top","bottom","right","left","transform","position","zIndex","cursor","disabled","padding","boxSizing","transition","Track","inset","fill","outline","drag","outlineOffset","Drag","display","gap","flow","gridColumns","gridRows","DragPart","radius","HandlerProps","Handler","props","$","_c","t0","otherProps","undefined","t1","Symbol","for","hoverProps","isHovered","isHorizontal","localIsHovered","T0","t2","mods","hovered","t3","t4","t5","StyledPanel","flexGrow","placeSelf","touchAction","ResizablePanel","ref","HTMLDivElement","timerRef","ReturnType","setTimeout","isControllable","providedSize","restProps","isDragging","setIsDragging","onResize","current","offsetProp","containerSize","Math","abs","setVisualSize","clamp","min","max","setSize","visualSize","moveProps","onMoveStart","e","round","onMove","pointerType","deltaX","deltaY","onMoveEnd","notifyChange","clearTimeout","style","innerStyles","margin","_ResizablePanel","displayName"],"sources":["../../../src/components/layout/ResizablePanel.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport { BasePropsWithoutChildren, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue, useEvent } from '../../_internal/hooks';\nimport { mergeProps, useCombinedRefs } from '../../utils/react';\n\nimport { CubePanelProps, Panel } from './Panel';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface CubeResizablePanelProps extends CubePanelProps {\n  handlerStyles?: Styles;\n  /**\n   * Optional because both `ResizablePanel` and `Handler` destructure it as\n   * `direction = 'right'`. Declaring it required contradicted that default and\n   * made `no-redundant-default-prop` unusable: the rule reads the same `'right'`\n   * default out of the generated registry and strips an explicit\n   * `direction=\"right\"`, which then fails to typecheck.\n   */\n  direction?: Direction;\n  size?: number;\n  onSizeChange?: (size: number) => void;\n  minSize?: string | number;\n  maxSize?: string | number;\n  isDisabled?: boolean;\n}\n\nconst HandlerElement = tasty({\n  qa: 'ResizeHandler',\n  styles: {\n    // The real size is slightly bigger than the visual one.\n    width: {\n      '': 'initial',\n      horizontal: '9px',\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': '9px',\n      horizontal: 'initial',\n      'disabled & !horizontal': '1bw',\n    },\n    top: {\n      '': 0,\n      '[data-direction=\"top\"]': 'initial',\n    },\n    bottom: {\n      '': 0,\n      '[data-direction=\"bottom\"]': 'initial',\n    },\n    right: {\n      '': 0,\n      '[data-direction=\"right\"]': 'initial',\n    },\n    left: {\n      '': 0,\n      '[data-direction=\"left\"]': 'initial',\n    },\n    // Transform requires a separate visual size property to respect size boundaries\n    transform: {\n      '': 'translate(0, 0)',\n      '[data-direction=\"top\"]':\n        'translate(0, ($size-compensation - $visual-size))',\n      '[data-direction=\"right\"]':\n        'translate(($visual-size - $size-compensation), 0)',\n      '[data-direction=\"bottom\"]':\n        'translate(0, ($visual-size - $size-compensation))',\n      '[data-direction=\"left\"]':\n        'translate(($size-compensation - $visual-size), 0)',\n    },\n    position: 'absolute',\n    zIndex: 1,\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    padding: 0,\n    boxSizing: 'border-box',\n    transition: 'theme',\n    '--size-compensation': {\n      '': '6px',\n      disabled: '1bw',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag) & !disabled': '#purple-03',\n      },\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        drag: '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag': '#dark-02',\n        disabled: '#disabled-surface-text',\n      },\n    },\n  },\n});\n\ninterface HandlerProps extends BasePropsWithoutChildren {\n  direction?: Direction;\n}\n\nconst Handler = (props: HandlerProps) => {\n  const { direction = 'right', isDisabled, ...otherProps } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const isHorizontal = direction === 'left' || direction === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <HandlerElement\n      {...mergeProps(\n        hoverProps,\n        {\n          mods: {\n            hovered: localIsHovered,\n            horizontal: isHorizontal,\n            disabled: isDisabled,\n          },\n          'data-direction': direction,\n        },\n        otherProps,\n      )}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled ? (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      ) : null}\n    </HandlerElement>\n  );\n};\n\nconst StyledPanel = tasty(Panel, {\n  styles: {\n    flexGrow: 0,\n    width: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"top\"] | [data-direction=\"bottom\"]': 'initial',\n    },\n    height: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"left\"] | [data-direction=\"right\"]': 'initial',\n    },\n    placeSelf: 'stretch',\n    touchAction: 'none',\n\n    '$indent-compensation': {\n      '': '3px',\n      disabled: '1bw',\n    },\n  },\n});\n\nfunction ResizablePanel(\n  props: CubeResizablePanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const isControllable = typeof props.size === 'number';\n  const {\n    isDisabled,\n    direction = 'right',\n    size: providedSize,\n    onSizeChange,\n    minSize = 200,\n    maxSize = isControllable ? undefined : 'min(50%, 400px)',\n    ...restProps\n  } = props;\n  const [isDragging, setIsDragging] = useState(false);\n  const isHorizontal = direction === 'left' || direction === 'right';\n\n  ref = useCombinedRefs(ref);\n\n  const onResize = useEvent(() => {\n    if (ref?.current) {\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n      const containerSize = ref.current[offsetProp];\n\n      if (Math.abs(containerSize - size) < 1 && !isDisabled) {\n        setVisualSize(size);\n      } else {\n        setVisualSize(containerSize);\n      }\n    }\n  });\n\n  useResizeObserver({\n    ref,\n    onResize,\n  });\n\n  function clamp(size: number) {\n    if (typeof maxSize === 'number') {\n      size = Math.min(maxSize, size);\n    }\n\n    if (typeof minSize === 'number' || !minSize) {\n      size = Math.max((minSize as number) || 0, size);\n    }\n\n    return Math.max(size, 0);\n  }\n\n  let [size, setSize] = useState<number>(\n    providedSize != null ? clamp(providedSize) : 200,\n  );\n  let [visualSize, setVisualSize] = useState<number | null>(null);\n\n  let { moveProps } = useMove({\n    onMoveStart(e) {\n      if (isDisabled) {\n        return;\n      }\n\n      setIsDragging(true);\n\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n\n      if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) {\n        setSize(Math.round(ref.current[offsetProp]));\n      }\n    },\n    onMove(e) {\n      setSize((size) => {\n        if (isDisabled) {\n          return size;\n        }\n\n        if (e.pointerType === 'keyboard') {\n          return size;\n        }\n\n        size += isHorizontal\n          ? e.deltaX * (direction === 'right' ? 1 : -1)\n          : e.deltaY * (direction === 'bottom' ? 1 : -1);\n\n        return size;\n      });\n    },\n    onMoveEnd(e) {\n      setIsDragging(false);\n      setSize((size) => clamp(Math.round(size)));\n    },\n  });\n\n  // Since we sync provided size and the local one in two ways,\n  // we need a way to prevent infinite loop in some cases.\n  // We will run this in setTimeout and make sure it will get the most recent state.\n  const notifyChange = useEvent(() => {\n    setSize((size) => {\n      if (providedSize && Math.abs(providedSize - size) > 0.5) {\n        return providedSize;\n      }\n\n      return size;\n    });\n  });\n\n  useEffect(() => {\n    onResize();\n  }, [size, isDisabled]);\n\n  useEffect(() => {\n    if (\n      !isDragging &&\n      visualSize != null &&\n      (providedSize == null || Math.abs(providedSize - visualSize) > 0.5)\n    ) {\n      onSizeChange?.(Math.round(visualSize));\n    }\n  }, [visualSize, isDragging]);\n\n  useEffect(() => {\n    timerRef.current = setTimeout(notifyChange, 500);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [providedSize]);\n\n  const mods = useMemo(() => {\n    return {\n      drag: isDragging,\n      horizontal: isHorizontal,\n      disabled: isDisabled,\n    };\n  }, [isDragging, isHorizontal, isDisabled]);\n\n  return (\n    <StyledPanel\n      ref={ref}\n      data-direction={direction}\n      mods={mods}\n      extra={\n        <Handler\n          isDisabled={isDisabled || visualSize == null}\n          direction={direction}\n          {...moveProps}\n          mods={mods}\n        />\n      }\n      {...mergeProps(restProps, {\n        style: {\n          // We set the current size further via width/min-width/max-width styles to respect size boundaries\n          '--size': `${size}px`,\n          // We use a separate visual size to paint the handler for a smoother experience\n          '--visual-size': `${visualSize}px`,\n          '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n          '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n        },\n        innerStyles: {\n          // The panel inner space compensation for the handler\n          margin: `$indent-compensation ${direction}`,\n        },\n      })}\n    />\n  );\n}\n\nconst _ResizablePanel = forwardRef(ResizablePanel);\n\n_ResizablePanel.displayName = 'ResizablePanel';\n\nexport { _ResizablePanel as ResizablePanel };\n"],"mappings":"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"}

package/dist/components/layout/Space.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -18,17 +19,60 @@ const SpaceElement = tasty({ styles: {
 	}
 } });
 const Space = forwardRef(function Space(props, ref) {
-	const { mods, direction, ...otherProps } = props;
-	const styles = extractStyles(otherProps, CONTAINER_STYLES);
-	return /* @__PURE__ */ jsx(SpaceElement, {
-		...filterBaseProps(otherProps, { eventProps: true }),
-		ref,
-		mods: {
-			vertical: direction === "vertical" || otherProps.flow === "column" || styles.flow === "column",
+	const $ = c(16);
+	let T0;
+	let direction;
+	let mods;
+	let otherProps;
+	let styles;
+	let t0;
+	if ($[0] !== props) {
+		({mods, direction, ...otherProps} = props);
+		styles = extractStyles(otherProps, CONTAINER_STYLES);
+		T0 = SpaceElement;
+		t0 = filterBaseProps(otherProps, { eventProps: true });
+		$[0] = props;
+		$[1] = T0;
+		$[2] = direction;
+		$[3] = mods;
+		$[4] = otherProps;
+		$[5] = styles;
+		$[6] = t0;
+	} else {
+		T0 = $[1];
+		direction = $[2];
+		mods = $[3];
+		otherProps = $[4];
+		styles = $[5];
+		t0 = $[6];
+	}
+	const t1 = direction === "vertical" || otherProps.flow === "column" || styles.flow === "column";
+	let t2;
+	if ($[7] !== mods || $[8] !== t1) {
+		t2 = {
+			vertical: t1,
 			...mods
-		},
-		styles
-	});
+		};
+		$[7] = mods;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== T0 || $[11] !== ref || $[12] !== styles || $[13] !== t0 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t0,
+			ref,
+			mods: t2,
+			styles
+		});
+		$[10] = T0;
+		$[11] = ref;
+		$[12] = styles;
+		$[13] = t0;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 });
 
 //#endregion

package/dist/components/layout/Space.js.map

@@ -1 +1 @@
-{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}
+{"version":3,"file":"Space.js","names":["AllBaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","forwardRef","extractStyles","SpaceElement","styles","display","gap","flow","vertical","placeItems","CubeSpaceProps","direction","Space","props","ref","$","_c","T0","mods","otherProps","t0","eventProps","t1","t2","t3"],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAWA,MAAMO,eAAeH,MAAM,EACzBI,QAAQ;CACNC,SAAS;CACTC,KAAK;CACLC,MAAM;EACJ,IAAI;EACJC,UAAU;EACX;CACDC,YAAY;EACV,IAAI;EACJD,UAAU;EACZ;CACF,EACD,CAAC;AAMF,MAAaI,QAAQX,WAAW,SAAAW,MAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;CAAA,IAAAN;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAf;CAAA,IAAAgB;AAAA,KAAAL,EAAA,OAAAF,OAAA;AAC9B,GAAA,CAAAK,MAAAP,cAAAQ,cAA2CN;AAC3CT,WAAeF,cAAciB,YAAYtB,iBAAiB;AAGvDoB,OAAAd;AACKiB,OAAArB,gBAAgBoB,YAAY,EAAAE,YAAc,MAAM,CAAC;AAAAN,IAAA,KAAAF;AAAAE,IAAA,KAAAE;AAAAF,IAAA,KAAAJ;AAAAI,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAX;AAAAW,IAAA,KAAAK;QAAA;AAAAH,OAAAF,EAAA;AAAAJ,cAAAI,EAAA;AAAAG,SAAAH,EAAA;AAAAI,eAAAJ,EAAA;AAAAX,WAAAW,EAAA;AAAAK,OAAAL,EAAA;;CAIjD,MAAAO,KAAAX,cAAc,cACdQ,WAAUZ,SAAU,YACpBH,OAAMG,SAAU;CAAQ,IAAAgB;AAAA,KAAAR,EAAA,OAAAG,QAAAH,EAAA,OAAAO,IAAA;AAJtBC,OAAA;GAAAf,UAEFc;GAEwB,GACvBJ;GACJ;AAAAH,IAAA,KAAAG;AAAAH,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAS;AAAA,KAAAT,EAAA,QAAAE,MAAAF,EAAA,QAAAD,OAAAC,EAAA,QAAAX,UAAAW,EAAA,QAAAK,MAAAL,EAAA,QAAAQ,IAAA;AATHC,OAAA,oBAAC;GAAY,GACPJ;GACCN;GACC,MAAAS;GAOEnB;IACR;AAAAW,IAAA,MAAAE;AAAAF,IAAA,MAAAD;AAAAC,IAAA,MAAAX;AAAAW,IAAA,MAAAK;AAAAL,IAAA,MAAAQ;AAAAR,IAAA,MAAAS;OAAAA,MAAAT,EAAA;AAAA,QAXFS;EAaF"}