@cube-dev/ui-kit 0.117.0 → 0.119.0

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
+import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/components/helpers/IconSwitch/IconSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconSwitch.js","names":[],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { BaseProps, tasty } from '../../../tasty';\nimport { DisplayTransition } from '../DisplayTransition/DisplayTransition';\n\nexport interface CubeIconSwitchProps extends BaseProps {\n  /** The icon to display */\n  children: ReactNode;\n  /** Override the default key derivation for detecting icon changes */\n  contentKey?: string | number;\n  /** When true, renders without wrapper element, expecting parent to provide grid context */\n  noWrapper?: boolean;\n}\n\ninterface IconEntry {\n  key: number;\n  content: ReactNode;\n}\n\nfunction isNullishContent(node: ReactNode) {\n  // React treats `null`, `undefined`, and `false` as \"render nothing\"\n  return node == null || node === false;\n}\n\nconst typeIds = new WeakMap<object, number>();\nlet lastTypeId = 0;\n\nfunction getTypeId(type: object) {\n  const existing = typeIds.get(type);\n  if (existing != null) return existing;\n  const next = (lastTypeId += 1);\n  typeIds.set(type, next);\n  return next;\n}\n\n/**\n * Best-effort key derivation for icon switching when `contentKey` is not provided.\n * The goal is to:\n * - Transition when icon component type changes\n * - Not transition when only props change for the same icon type (self-animating icons)\n * - Transition when toggling to/from nullish content\n */\nfunction deriveContentKey(children: ReactNode): string {\n  if (isNullishContent(children)) return 'nullish';\n  if (!isValidElement(children)) return `non-element:${typeof children}`;\n\n  const { type, key } = children;\n  const keyPart = key == null ? '' : `:${String(key)}`;\n\n  if (typeof type === 'string') return `host:${type}${keyPart}`;\n  if (typeof type === 'function') return `fn:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'object' && type != null)\n    return `obj:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'symbol') return `sym:${String(type)}${keyPart}`;\n\n  return `unknown${keyPart}`;\n}\n\nconst IconSwitchElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n  },\n});\n\nconst IconSlotElement = tasty({\n  styles: {\n    gridArea: '1 / 1',\n    display: 'grid',\n    placeItems: 'center',\n    opacity: {\n      '': 0,\n      entered: 1,\n    },\n    transition: {\n      '': 'theme $transition ease-out',\n      'exit | entered': 'theme $transition ease-in',\n    },\n  },\n});\n\n/**\n * A component that cross-fades between icons when children change.\n * Useful for animated icon transitions in buttons, items, etc.\n *\n * When `contentKey` changes, a transition is triggered.\n * When only `children` changes (same `contentKey`), content is updated in-place\n * without transition, allowing self-animating icons (like DirectionIcon) to work.\n */\nexport function IconSwitch(props: CubeIconSwitchProps) {\n  const { children, contentKey, noWrapper, ...rest } = props;\n\n  const keyCounterRef = useRef(0);\n  const effectiveKey = contentKey ?? deriveContentKey(children);\n  const prevEffectiveKeyRef = useRef<string | number>(effectiveKey);\n  const prevChildrenRef = useRef<ReactNode>(children);\n\n  const [icons, setIcons] = useState<IconEntry[]>(() => [\n    { key: keyCounterRef.current, content: children },\n  ]);\n\n  useLayoutEffect(() => {\n    const prevKey = prevEffectiveKeyRef.current;\n    const prevChildren = prevChildrenRef.current;\n\n    const hasKeyChanged = effectiveKey !== prevKey;\n    const hasNullishToggled =\n      isNullishContent(children) !== isNullishContent(prevChildren);\n\n    // Transition rules:\n    // - If key changed -> transition (add new icon entry)\n    // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)\n    // - Otherwise -> no state update (children reference changes are handled at render time)\n    if (hasKeyChanged || hasNullishToggled) {\n      keyCounterRef.current += 1;\n      const newEntry: IconEntry = {\n        key: keyCounterRef.current,\n        content: children,\n      };\n      setIcons((prev) => [...prev, newEntry]);\n    }\n\n    prevEffectiveKeyRef.current = effectiveKey;\n    prevChildrenRef.current = children;\n  }, [children, effectiveKey]);\n\n  const handleExitComplete = useCallback((exitedKey: number) => {\n    setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));\n  }, []);\n\n  const latestKey = icons[icons.length - 1]?.key;\n\n  // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).\n  // In this state, we must use stored content to avoid flashing the new icon before the transition.\n  const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;\n  const isNullishChangePending =\n    isNullishContent(children) !== isNullishContent(prevChildrenRef.current);\n  const isTransitionPending = isKeyChangePending || isNullishChangePending;\n\n  const content = icons.map((icon) => {\n    const isActive = icon.key === latestKey;\n    // Use current children for active icon ONLY when no transition is pending.\n    // During intermediate renders (before effect adds new entry), use stored content.\n    // For exiting icons, always use stored content to preserve appearance during fade-out.\n    const displayContent =\n      isActive && !isTransitionPending ? children : icon.content;\n\n    return (\n      <DisplayTransition\n        key={icon.key}\n        isShown={isActive}\n        animateOnMount={icon.key !== 0}\n        onRest={(transition) => {\n          if (transition === 'exit') {\n            handleExitComplete(icon.key);\n          }\n        }}\n      >\n        {({ isShown, phase, ref }) => (\n          <IconSlotElement\n            ref={ref}\n            mods={{\n              entered: isShown,\n              phase,\n            }}\n          >\n            {displayContent}\n          </IconSlotElement>\n        )}\n      </DisplayTransition>\n    );\n  });\n\n  if (noWrapper) {\n    return <>{content}</>;\n  }\n\n  return <IconSwitchElement {...rest}>{content}</IconSwitchElement>;\n}\n\nexport type { CubeIconSwitchProps as IconSwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"IconSwitch.js","names":[],"sources":["../../../../src/components/helpers/IconSwitch/IconSwitch.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport {\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DisplayTransition } from '../DisplayTransition/DisplayTransition';\n\nexport interface CubeIconSwitchProps extends BaseProps {\n  /** The icon to display */\n  children: ReactNode;\n  /** Override the default key derivation for detecting icon changes */\n  contentKey?: string | number;\n  /** When true, renders without wrapper element, expecting parent to provide grid context */\n  noWrapper?: boolean;\n}\n\ninterface IconEntry {\n  key: number;\n  content: ReactNode;\n}\n\nfunction isNullishContent(node: ReactNode) {\n  // React treats `null`, `undefined`, and `false` as \"render nothing\"\n  return node == null || node === false;\n}\n\nconst typeIds = new WeakMap<object, number>();\nlet lastTypeId = 0;\n\nfunction getTypeId(type: object) {\n  const existing = typeIds.get(type);\n  if (existing != null) return existing;\n  const next = (lastTypeId += 1);\n  typeIds.set(type, next);\n  return next;\n}\n\n/**\n * Best-effort key derivation for icon switching when `contentKey` is not provided.\n * The goal is to:\n * - Transition when icon component type changes\n * - Not transition when only props change for the same icon type (self-animating icons)\n * - Transition when toggling to/from nullish content\n */\nfunction deriveContentKey(children: ReactNode): string {\n  if (isNullishContent(children)) return 'nullish';\n  if (!isValidElement(children)) return `non-element:${typeof children}`;\n\n  const { type, key } = children;\n  const keyPart = key == null ? '' : `:${String(key)}`;\n\n  if (typeof type === 'string') return `host:${type}${keyPart}`;\n  if (typeof type === 'function') return `fn:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'object' && type != null)\n    return `obj:${getTypeId(type)}${keyPart}`;\n  if (typeof type === 'symbol') return `sym:${String(type)}${keyPart}`;\n\n  return `unknown${keyPart}`;\n}\n\nconst IconSwitchElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n  },\n});\n\nconst IconSlotElement = tasty({\n  styles: {\n    gridArea: '1 / 1',\n    display: 'grid',\n    placeItems: 'center',\n    opacity: {\n      '': 0,\n      entered: 1,\n    },\n    transition: {\n      '': 'theme $transition ease-out',\n      'exit | entered': 'theme $transition ease-in',\n    },\n  },\n});\n\n/**\n * A component that cross-fades between icons when children change.\n * Useful for animated icon transitions in buttons, items, etc.\n *\n * When `contentKey` changes, a transition is triggered.\n * When only `children` changes (same `contentKey`), content is updated in-place\n * without transition, allowing self-animating icons (like DirectionIcon) to work.\n */\nexport function IconSwitch(props: CubeIconSwitchProps) {\n  const { children, contentKey, noWrapper, ...rest } = props;\n\n  const keyCounterRef = useRef(0);\n  const effectiveKey = contentKey ?? deriveContentKey(children);\n  const prevEffectiveKeyRef = useRef<string | number>(effectiveKey);\n  const prevChildrenRef = useRef<ReactNode>(children);\n\n  const [icons, setIcons] = useState<IconEntry[]>(() => [\n    { key: keyCounterRef.current, content: children },\n  ]);\n\n  useLayoutEffect(() => {\n    const prevKey = prevEffectiveKeyRef.current;\n    const prevChildren = prevChildrenRef.current;\n\n    const hasKeyChanged = effectiveKey !== prevKey;\n    const hasNullishToggled =\n      isNullishContent(children) !== isNullishContent(prevChildren);\n\n    // Transition rules:\n    // - If key changed -> transition (add new icon entry)\n    // - If we toggled nullish <-> non-nullish -> transition (even if key did not change)\n    // - Otherwise -> no state update (children reference changes are handled at render time)\n    if (hasKeyChanged || hasNullishToggled) {\n      keyCounterRef.current += 1;\n      const newEntry: IconEntry = {\n        key: keyCounterRef.current,\n        content: children,\n      };\n      setIcons((prev) => [...prev, newEntry]);\n    }\n\n    prevEffectiveKeyRef.current = effectiveKey;\n    prevChildrenRef.current = children;\n  }, [children, effectiveKey]);\n\n  const handleExitComplete = useCallback((exitedKey: number) => {\n    setIcons((prev) => prev.filter((icon) => icon.key !== exitedKey));\n  }, []);\n\n  const latestKey = icons[icons.length - 1]?.key;\n\n  // Detect if we're in an intermediate render (transition pending but effect hasn't added new entry yet).\n  // In this state, we must use stored content to avoid flashing the new icon before the transition.\n  const isKeyChangePending = effectiveKey !== prevEffectiveKeyRef.current;\n  const isNullishChangePending =\n    isNullishContent(children) !== isNullishContent(prevChildrenRef.current);\n  const isTransitionPending = isKeyChangePending || isNullishChangePending;\n\n  const content = icons.map((icon) => {\n    const isActive = icon.key === latestKey;\n    // Use current children for active icon ONLY when no transition is pending.\n    // During intermediate renders (before effect adds new entry), use stored content.\n    // For exiting icons, always use stored content to preserve appearance during fade-out.\n    const displayContent =\n      isActive && !isTransitionPending ? children : icon.content;\n\n    return (\n      <DisplayTransition\n        key={icon.key}\n        isShown={isActive}\n        animateOnMount={icon.key !== 0}\n        onRest={(transition) => {\n          if (transition === 'exit') {\n            handleExitComplete(icon.key);\n          }\n        }}\n      >\n        {({ isShown, phase, ref }) => (\n          <IconSlotElement\n            ref={ref}\n            mods={{\n              entered: isShown,\n              phase,\n            }}\n          >\n            {displayContent}\n          </IconSlotElement>\n        )}\n      </DisplayTransition>\n    );\n  });\n\n  if (noWrapper) {\n    return <>{content}</>;\n  }\n\n  return <IconSwitchElement {...rest}>{content}</IconSwitchElement>;\n}\n\nexport type { CubeIconSwitchProps as IconSwitchProps };\n"],"mappings":"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"}

package/dist/components/layout/Flex.d.ts

@@ -1,6 +1,5 @@
 
-import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/layout/Flex.d.ts

package/dist/components/layout/Flex.js

@@ -1,8 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\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;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Flow.d.ts

@@ -1,6 +1,5 @@
 
-import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/layout/Flow.d.ts

package/dist/components/layout/Flow.js

@@ -1,8 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\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":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\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":";;;;;;AAUA,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"}

package/dist/components/layout/Grid.d.ts

@@ -1,6 +1,5 @@
 
-import { AllBaseProps, ContainerStyleProps, ShortGridStyles } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { AllBaseProps, ContainerStyleProps, ShortGridStyles } from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/layout/Grid.d.ts

package/dist/components/layout/Grid.js

@@ -1,8 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '../../tasty';\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 })}\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,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\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 })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAWA,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,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Panel.d.ts

@@ -1,7 +1,5 @@
 
-import { Styles } from "../../tasty/styles/types.js";
-import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { ReactNode } from "react";
 

package/dist/components/layout/Panel.js

@@ -1,6 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.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";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":[],"sources":["../../../src/components/layout/Panel.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';\n\nimport {\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 '../../tasty';\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":";;;;;;;AAiBA,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":[],"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"}

package/dist/components/layout/Prefix.d.ts

@@ -1,6 +1,5 @@
 
-import { BaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { BaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import * as react from "react";
 import { CSSProperties } from "react";
 

package/dist/components/layout/Prefix.js

@@ -1,10 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '../../tasty';\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\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":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\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"}

package/dist/components/layout/ResizablePanel.d.ts

@@ -1,7 +1,6 @@
 
-import { Styles } from "../../tasty/styles/types.js";
-import "../../tasty/index.js";
 import { CubePanelProps } from "./Panel.js";
+import { Styles } from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/layout/ResizablePanel.d.ts

package/dist/components/layout/ResizablePanel.js

@@ -1,10 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { tasty } from "../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.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 { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHover, useMove } from "react-aria";

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 {\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 { BasePropsWithoutChildren, Styles, tasty } from '../../tasty/index';\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  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      '[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: '#dark-04',\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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"}
+{"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  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      '[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: '#dark-04',\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.d.ts

@@ -1,6 +1,5 @@
 
-import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/layout/Space.d.ts

package/dist/components/layout/Space.js

@@ -1,8 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\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":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\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":";;;;;;AAUA,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"}

package/dist/components/layout/Suffix.d.ts

@@ -1,6 +1,5 @@
 
-import { BaseProps, ContainerStyleProps } from "../../tasty/types.js";
-import "../../tasty/index.js";
+import { BaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import * as react from "react";
 import { CSSProperties } from "react";
 

package/dist/components/layout/Suffix.js

@@ -1,9 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
-import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
-import { tasty } from "../../tasty/tasty.js";
-import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '../../tasty';\nimport { useCombinedRefs } from '../../utils/react';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\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,OAAO;EACP,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;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,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,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}
+{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport { useCombinedRefs } from '../../utils/react';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\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,OAAO;EACP,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;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,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,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/navigation/Tabs/DraggableTabList.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useCallback, useMemo } from "react";
 import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection } from "react-aria";

package/dist/components/navigation/Tabs/EditableTitle.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
 import { useLayoutEffect, useRef, useState } from "react";

package/dist/components/navigation/Tabs/TabButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

package/dist/components/navigation/Tabs/TabDropIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useTabPanel } from 'react-aria';\n\nimport { TabPanelElement } from './styled';\n\nimport type { ReactNode } from 'react';\nimport type { AriaTabPanelProps } from 'react-aria';\nimport type { TabListState } from 'react-stately';\nimport type { Styles } from '../../../tasty';\nimport type { CacheKeyValue, ParsedPanel, ParsedTab } from './types';\n\n// =============================================================================\n// Panel Rendering Utilities\n// =============================================================================\n\n/**\n * Determines if a panel should be rendered based on prerender/keepMounted settings.\n */\nexport function shouldRenderPanel(\n  isActive: boolean,\n  wasVisited: boolean,\n  effectivePrerender: boolean | undefined,\n  effectiveKeepMounted: boolean | undefined,\n): boolean {\n  return (\n    !!effectivePrerender || isActive || (!!effectiveKeepMounted && wasVisited)\n  );\n}\n\n// =============================================================================\n// TabPanelRenderer Component\n// =============================================================================\n\nexport interface TabPanelRendererProps {\n  tabKey: string;\n  state: TabListState<object>;\n  content: ReactNode;\n  prerender?: boolean;\n  keepMounted?: boolean;\n  tabPrerender?: boolean;\n  tabKeepMounted?: boolean;\n  visitedKeys: Set<string>;\n  panelStyles?: Styles;\n  qa?: string;\n  qaVal?: string;\n}\n\n/**\n * Renders a single tab panel with proper ARIA attributes.\n */\nexport function TabPanelRenderer({\n  tabKey,\n  state,\n  content,\n  prerender,\n  keepMounted,\n  tabPrerender,\n  tabKeepMounted,\n  visitedKeys,\n  panelStyles,\n  qa,\n  qaVal,\n}: TabPanelRendererProps) {\n  const ref = useRef<HTMLElement>(null);\n  const { tabPanelProps } = useTabPanel(\n    { key: tabKey } as AriaTabPanelProps,\n    state,\n    ref,\n  );\n\n  const isActive = state.selectedKey === tabKey;\n\n  // Determine effective prerender/keepMounted (tab-level overrides global)\n  const effectivePrerender = tabPrerender ?? prerender;\n  const effectiveKeepMounted = tabKeepMounted ?? keepMounted;\n\n  // Determine if panel should render\n  if (\n    !shouldRenderPanel(\n      isActive,\n      visitedKeys.has(tabKey),\n      effectivePrerender,\n      effectiveKeepMounted,\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <TabPanelElement\n      {...tabPanelProps}\n      ref={ref}\n      mods={{ active: isActive }}\n      qa={qa ?? 'TabPanel'}\n      qaVal={qaVal ?? String(tabKey)}\n      styles={panelStyles}\n    >\n      {content}\n    </TabPanelElement>\n  );\n}\n\n// =============================================================================\n// CachedPanelRenderer Component\n// =============================================================================\n\nexport interface CachedPanelRendererProps {\n  parsedTabs: ParsedTab[];\n  explicitPanels: Map<string, ParsedPanel>;\n  state: TabListState<object>;\n  renderPanel: (key: string) => ReactNode;\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  prerender: boolean;\n  keepMounted: boolean;\n  visitedKeys: Set<string>;\n}\n\n/**\n * Renders panels with content caching for `renderPanel`.\n *\n * Core principle: `renderPanel` is only called when the tab is active\n * (or once on mount for `prerender`). Inactive panels use cached content.\n *\n * Caching behavior:\n * - `keepMounted=true`: Cache content after first activation, reuse while inactive\n * - `prerender=true`: Call `renderPanel` once on mount, reuse until active again\n * - `panelCacheKeys`: Adds cache-key-based invalidation (lazy - only when active)\n * - No caching props: Only active panel is rendered, unmount when inactive\n */\nexport function CachedPanelRenderer({\n  parsedTabs,\n  explicitPanels,\n  state,\n  renderPanel,\n  panelCacheKeys,\n  prerender,\n  keepMounted,\n  visitedKeys,\n}: CachedPanelRendererProps) {\n  // Cache for rendered content - stores { content, cacheKey } per panel\n  const contentCacheRef = useRef<\n    Map<string, { content: ReactNode; cacheKey: CacheKeyValue }>\n  >(new Map());\n\n  /** Get the cache key for a panel. Returns undefined if not defined. */\n  const getCacheKey = (key: string): CacheKeyValue => panelCacheKeys?.[key];\n\n  /** Check if a panel has a defined (non-undefined) cache key. */\n  const hasCacheKey = (key: string): boolean =>\n    panelCacheKeys != null &&\n    key in panelCacheKeys &&\n    panelCacheKeys[key] !== undefined;\n\n  /**\n   * Determine if we should call renderPanel for this tab.\n   */\n  const shouldCallRenderPanel = (\n    tabKey: string,\n    isActive: boolean,\n  ): boolean => {\n    const cached = contentCacheRef.current.get(tabKey);\n\n    // No cache exists - always need to populate on first render\n    if (!cached) {\n      return true;\n    }\n\n    // Cache exists\n    if (isActive) {\n      // If panelCacheKeys has an entry for this panel, use cache-key-based invalidation\n      if (hasCacheKey(tabKey)) {\n        const currentCacheKey = getCacheKey(tabKey);\n        return cached.cacheKey !== currentCacheKey;\n      }\n\n      // No panelCacheKeys entry = always re-render when active\n      return true;\n    }\n\n    // Inactive with cache - use cache\n    return false;\n  };\n\n  // Clean up cache entries for removed tabs\n  const currentTabKeys = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of contentCacheRef.current.keys()) {\n      if (!currentTabKeys.has(key)) {\n        contentCacheRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeys]);\n\n  return (\n    <>\n      {parsedTabs.map((tab) => {\n        const explicitPanel = explicitPanels.get(tab.key);\n        const tabPrerender = explicitPanel?.prerender ?? tab.prerender;\n        const tabKeepMounted = explicitPanel?.keepMounted ?? tab.keepMounted;\n        const effectivePrerender = tabPrerender ?? prerender;\n        const effectiveKeepMounted = tabKeepMounted ?? keepMounted;\n\n        const isActive = state.selectedKey === tab.key;\n        const wasVisited = visitedKeys.has(tab.key);\n\n        // Determine if panel should be in DOM (visibility)\n        if (\n          !shouldRenderPanel(\n            isActive,\n            wasVisited,\n            effectivePrerender,\n            effectiveKeepMounted,\n          )\n        ) {\n          // Panel not in DOM - clear cache if no caching strategy\n          if (!effectiveKeepMounted && !effectivePrerender) {\n            contentCacheRef.current.delete(tab.key);\n          }\n          return null;\n        }\n\n        // Determine if we need to call renderPanel\n        let content: ReactNode;\n        const needsRender = shouldCallRenderPanel(tab.key, isActive);\n\n        if (needsRender) {\n          // Call renderPanel and cache the result\n          content = renderPanel(tab.key);\n          const currentCacheKey = getCacheKey(tab.key);\n          contentCacheRef.current.set(tab.key, {\n            content,\n            cacheKey: currentCacheKey,\n          });\n        } else {\n          // Use cached content\n          const cached = contentCacheRef.current.get(tab.key);\n          content = cached?.content ?? null;\n        }\n\n        return (\n          <TabPanelRenderer\n            key={tab.key}\n            tabKey={tab.key}\n            state={state}\n            content={content}\n            prerender={prerender}\n            keepMounted={keepMounted}\n            tabPrerender={tabPrerender}\n            tabKeepMounted={tabKeepMounted}\n            visitedKeys={visitedKeys}\n            panelStyles={explicitPanel?.styles}\n            qa={explicitPanel?.qa}\n            qaVal={explicitPanel?.qaVal}\n          />\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,kBACd,UACA,YACA,oBACA,sBACS;AACT,QACE,CAAC,CAAC,sBAAsB,YAAa,CAAC,CAAC,wBAAwB;;;;;AAyBnE,SAAgB,iBAAiB,EAC/B,QACA,OACA,SACA,WACA,aACA,cACA,gBACA,aACA,aACA,IACA,SACwB;CACxB,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,EAAE,kBAAkB,YACxB,EAAE,KAAK,QAAQ,EACf,OACA,IACD;CAED,MAAM,WAAW,MAAM,gBAAgB;CAGvC,MAAM,qBAAqB,gBAAgB;CAC3C,MAAM,uBAAuB,kBAAkB;AAG/C,KACE,CAAC,kBACC,UACA,YAAY,IAAI,OAAO,EACvB,oBACA,qBACD,CAED,QAAO;AAGT,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM,EAAE,QAAQ,UAAU;EAC1B,IAAI,MAAM;EACV,OAAO,SAAS,OAAO,OAAO;EAC9B,QAAQ;YAEP;GACe;;;;;;;;;;;;;;AA+BtB,SAAgB,oBAAoB,EAClC,YACA,gBACA,OACA,aACA,gBACA,WACA,aACA,eAC2B;CAE3B,MAAM,kBAAkB,uBAEtB,IAAI,KAAK,CAAC;;CAGZ,MAAM,eAAe,QAA+B,iBAAiB;;CAGrE,MAAM,eAAe,QACnB,kBAAkB,QAClB,OAAO,kBACP,eAAe,SAAS;;;;CAK1B,MAAM,yBACJ,QACA,aACY;EACZ,MAAM,SAAS,gBAAgB,QAAQ,IAAI,OAAO;AAGlD,MAAI,CAAC,OACH,QAAO;AAIT,MAAI,UAAU;AAEZ,OAAI,YAAY,OAAO,EAAE;IACvB,MAAM,kBAAkB,YAAY,OAAO;AAC3C,WAAO,OAAO,aAAa;;AAI7B,UAAO;;AAIT,SAAO;;CAIT,MAAM,iBAAiB,cACf,IAAI,IAAI,WAAW,KAAK,MAAM,EAAE,IAAI,CAAC,EAC3C,CAAC,WAAW,CACb;AAED,iBAAgB;AACd,OAAK,MAAM,OAAO,gBAAgB,QAAQ,MAAM,CAC9C,KAAI,CAAC,eAAe,IAAI,IAAI,CAC1B,iBAAgB,QAAQ,OAAO,IAAI;IAGtC,CAAC,eAAe,CAAC;AAEpB,QACE,4CACG,WAAW,KAAK,QAAQ;EACvB,MAAM,gBAAgB,eAAe,IAAI,IAAI,IAAI;EACjD,MAAM,eAAe,eAAe,aAAa,IAAI;EACrD,MAAM,iBAAiB,eAAe,eAAe,IAAI;EACzD,MAAM,qBAAqB,gBAAgB;EAC3C,MAAM,uBAAuB,kBAAkB;EAE/C,MAAM,WAAW,MAAM,gBAAgB,IAAI;AAI3C,MACE,CAAC,kBACC,UALe,YAAY,IAAI,IAAI,IAAI,EAOvC,oBACA,qBACD,EACD;AAEA,OAAI,CAAC,wBAAwB,CAAC,mBAC5B,iBAAgB,QAAQ,OAAO,IAAI,IAAI;AAEzC,UAAO;;EAIT,IAAI;AAGJ,MAFoB,sBAAsB,IAAI,KAAK,SAAS,EAE3C;AAEf,aAAU,YAAY,IAAI,IAAI;GAC9B,MAAM,kBAAkB,YAAY,IAAI,IAAI;AAC5C,mBAAgB,QAAQ,IAAI,IAAI,KAAK;IACnC;IACA,UAAU;IACX,CAAC;QAIF,WADe,gBAAgB,QAAQ,IAAI,IAAI,IAAI,EACjC,WAAW;AAG/B,SACE,oBAAC;GAEC,QAAQ,IAAI;GACL;GACE;GACE;GACE;GACC;GACE;GACH;GACb,aAAa,eAAe;GAC5B,IAAI,eAAe;GACnB,OAAO,eAAe;KAXjB,IAAI,IAYT;GAEJ,GACD"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useTabPanel } from 'react-aria';\n\nimport { TabPanelElement } from './styled';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { AriaTabPanelProps } from 'react-aria';\nimport type { TabListState } from 'react-stately';\nimport type { CacheKeyValue, ParsedPanel, ParsedTab } from './types';\n\n// =============================================================================\n// Panel Rendering Utilities\n// =============================================================================\n\n/**\n * Determines if a panel should be rendered based on prerender/keepMounted settings.\n */\nexport function shouldRenderPanel(\n  isActive: boolean,\n  wasVisited: boolean,\n  effectivePrerender: boolean | undefined,\n  effectiveKeepMounted: boolean | undefined,\n): boolean {\n  return (\n    !!effectivePrerender || isActive || (!!effectiveKeepMounted && wasVisited)\n  );\n}\n\n// =============================================================================\n// TabPanelRenderer Component\n// =============================================================================\n\nexport interface TabPanelRendererProps {\n  tabKey: string;\n  state: TabListState<object>;\n  content: ReactNode;\n  prerender?: boolean;\n  keepMounted?: boolean;\n  tabPrerender?: boolean;\n  tabKeepMounted?: boolean;\n  visitedKeys: Set<string>;\n  panelStyles?: Styles;\n  qa?: string;\n  qaVal?: string;\n}\n\n/**\n * Renders a single tab panel with proper ARIA attributes.\n */\nexport function TabPanelRenderer({\n  tabKey,\n  state,\n  content,\n  prerender,\n  keepMounted,\n  tabPrerender,\n  tabKeepMounted,\n  visitedKeys,\n  panelStyles,\n  qa,\n  qaVal,\n}: TabPanelRendererProps) {\n  const ref = useRef<HTMLElement>(null);\n  const { tabPanelProps } = useTabPanel(\n    { key: tabKey } as AriaTabPanelProps,\n    state,\n    ref,\n  );\n\n  const isActive = state.selectedKey === tabKey;\n\n  // Determine effective prerender/keepMounted (tab-level overrides global)\n  const effectivePrerender = tabPrerender ?? prerender;\n  const effectiveKeepMounted = tabKeepMounted ?? keepMounted;\n\n  // Determine if panel should render\n  if (\n    !shouldRenderPanel(\n      isActive,\n      visitedKeys.has(tabKey),\n      effectivePrerender,\n      effectiveKeepMounted,\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <TabPanelElement\n      {...tabPanelProps}\n      ref={ref}\n      mods={{ active: isActive }}\n      qa={qa ?? 'TabPanel'}\n      qaVal={qaVal ?? String(tabKey)}\n      styles={panelStyles}\n    >\n      {content}\n    </TabPanelElement>\n  );\n}\n\n// =============================================================================\n// CachedPanelRenderer Component\n// =============================================================================\n\nexport interface CachedPanelRendererProps {\n  parsedTabs: ParsedTab[];\n  explicitPanels: Map<string, ParsedPanel>;\n  state: TabListState<object>;\n  renderPanel: (key: string) => ReactNode;\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  prerender: boolean;\n  keepMounted: boolean;\n  visitedKeys: Set<string>;\n}\n\n/**\n * Renders panels with content caching for `renderPanel`.\n *\n * Core principle: `renderPanel` is only called when the tab is active\n * (or once on mount for `prerender`). Inactive panels use cached content.\n *\n * Caching behavior:\n * - `keepMounted=true`: Cache content after first activation, reuse while inactive\n * - `prerender=true`: Call `renderPanel` once on mount, reuse until active again\n * - `panelCacheKeys`: Adds cache-key-based invalidation (lazy - only when active)\n * - No caching props: Only active panel is rendered, unmount when inactive\n */\nexport function CachedPanelRenderer({\n  parsedTabs,\n  explicitPanels,\n  state,\n  renderPanel,\n  panelCacheKeys,\n  prerender,\n  keepMounted,\n  visitedKeys,\n}: CachedPanelRendererProps) {\n  // Cache for rendered content - stores { content, cacheKey } per panel\n  const contentCacheRef = useRef<\n    Map<string, { content: ReactNode; cacheKey: CacheKeyValue }>\n  >(new Map());\n\n  /** Get the cache key for a panel. Returns undefined if not defined. */\n  const getCacheKey = (key: string): CacheKeyValue => panelCacheKeys?.[key];\n\n  /** Check if a panel has a defined (non-undefined) cache key. */\n  const hasCacheKey = (key: string): boolean =>\n    panelCacheKeys != null &&\n    key in panelCacheKeys &&\n    panelCacheKeys[key] !== undefined;\n\n  /**\n   * Determine if we should call renderPanel for this tab.\n   */\n  const shouldCallRenderPanel = (\n    tabKey: string,\n    isActive: boolean,\n  ): boolean => {\n    const cached = contentCacheRef.current.get(tabKey);\n\n    // No cache exists - always need to populate on first render\n    if (!cached) {\n      return true;\n    }\n\n    // Cache exists\n    if (isActive) {\n      // If panelCacheKeys has an entry for this panel, use cache-key-based invalidation\n      if (hasCacheKey(tabKey)) {\n        const currentCacheKey = getCacheKey(tabKey);\n        return cached.cacheKey !== currentCacheKey;\n      }\n\n      // No panelCacheKeys entry = always re-render when active\n      return true;\n    }\n\n    // Inactive with cache - use cache\n    return false;\n  };\n\n  // Clean up cache entries for removed tabs\n  const currentTabKeys = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of contentCacheRef.current.keys()) {\n      if (!currentTabKeys.has(key)) {\n        contentCacheRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeys]);\n\n  return (\n    <>\n      {parsedTabs.map((tab) => {\n        const explicitPanel = explicitPanels.get(tab.key);\n        const tabPrerender = explicitPanel?.prerender ?? tab.prerender;\n        const tabKeepMounted = explicitPanel?.keepMounted ?? tab.keepMounted;\n        const effectivePrerender = tabPrerender ?? prerender;\n        const effectiveKeepMounted = tabKeepMounted ?? keepMounted;\n\n        const isActive = state.selectedKey === tab.key;\n        const wasVisited = visitedKeys.has(tab.key);\n\n        // Determine if panel should be in DOM (visibility)\n        if (\n          !shouldRenderPanel(\n            isActive,\n            wasVisited,\n            effectivePrerender,\n            effectiveKeepMounted,\n          )\n        ) {\n          // Panel not in DOM - clear cache if no caching strategy\n          if (!effectiveKeepMounted && !effectivePrerender) {\n            contentCacheRef.current.delete(tab.key);\n          }\n          return null;\n        }\n\n        // Determine if we need to call renderPanel\n        let content: ReactNode;\n        const needsRender = shouldCallRenderPanel(tab.key, isActive);\n\n        if (needsRender) {\n          // Call renderPanel and cache the result\n          content = renderPanel(tab.key);\n          const currentCacheKey = getCacheKey(tab.key);\n          contentCacheRef.current.set(tab.key, {\n            content,\n            cacheKey: currentCacheKey,\n          });\n        } else {\n          // Use cached content\n          const cached = contentCacheRef.current.get(tab.key);\n          content = cached?.content ?? null;\n        }\n\n        return (\n          <TabPanelRenderer\n            key={tab.key}\n            tabKey={tab.key}\n            state={state}\n            content={content}\n            prerender={prerender}\n            keepMounted={keepMounted}\n            tabPrerender={tabPrerender}\n            tabKeepMounted={tabKeepMounted}\n            visitedKeys={visitedKeys}\n            panelStyles={explicitPanel?.styles}\n            qa={explicitPanel?.qa}\n            qaVal={explicitPanel?.qaVal}\n          />\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,kBACd,UACA,YACA,oBACA,sBACS;AACT,QACE,CAAC,CAAC,sBAAsB,YAAa,CAAC,CAAC,wBAAwB;;;;;AAyBnE,SAAgB,iBAAiB,EAC/B,QACA,OACA,SACA,WACA,aACA,cACA,gBACA,aACA,aACA,IACA,SACwB;CACxB,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,EAAE,kBAAkB,YACxB,EAAE,KAAK,QAAQ,EACf,OACA,IACD;CAED,MAAM,WAAW,MAAM,gBAAgB;CAGvC,MAAM,qBAAqB,gBAAgB;CAC3C,MAAM,uBAAuB,kBAAkB;AAG/C,KACE,CAAC,kBACC,UACA,YAAY,IAAI,OAAO,EACvB,oBACA,qBACD,CAED,QAAO;AAGT,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM,EAAE,QAAQ,UAAU;EAC1B,IAAI,MAAM;EACV,OAAO,SAAS,OAAO,OAAO;EAC9B,QAAQ;YAEP;GACe;;;;;;;;;;;;;;AA+BtB,SAAgB,oBAAoB,EAClC,YACA,gBACA,OACA,aACA,gBACA,WACA,aACA,eAC2B;CAE3B,MAAM,kBAAkB,uBAEtB,IAAI,KAAK,CAAC;;CAGZ,MAAM,eAAe,QAA+B,iBAAiB;;CAGrE,MAAM,eAAe,QACnB,kBAAkB,QAClB,OAAO,kBACP,eAAe,SAAS;;;;CAK1B,MAAM,yBACJ,QACA,aACY;EACZ,MAAM,SAAS,gBAAgB,QAAQ,IAAI,OAAO;AAGlD,MAAI,CAAC,OACH,QAAO;AAIT,MAAI,UAAU;AAEZ,OAAI,YAAY,OAAO,EAAE;IACvB,MAAM,kBAAkB,YAAY,OAAO;AAC3C,WAAO,OAAO,aAAa;;AAI7B,UAAO;;AAIT,SAAO;;CAIT,MAAM,iBAAiB,cACf,IAAI,IAAI,WAAW,KAAK,MAAM,EAAE,IAAI,CAAC,EAC3C,CAAC,WAAW,CACb;AAED,iBAAgB;AACd,OAAK,MAAM,OAAO,gBAAgB,QAAQ,MAAM,CAC9C,KAAI,CAAC,eAAe,IAAI,IAAI,CAC1B,iBAAgB,QAAQ,OAAO,IAAI;IAGtC,CAAC,eAAe,CAAC;AAEpB,QACE,4CACG,WAAW,KAAK,QAAQ;EACvB,MAAM,gBAAgB,eAAe,IAAI,IAAI,IAAI;EACjD,MAAM,eAAe,eAAe,aAAa,IAAI;EACrD,MAAM,iBAAiB,eAAe,eAAe,IAAI;EACzD,MAAM,qBAAqB,gBAAgB;EAC3C,MAAM,uBAAuB,kBAAkB;EAE/C,MAAM,WAAW,MAAM,gBAAgB,IAAI;AAI3C,MACE,CAAC,kBACC,UALe,YAAY,IAAI,IAAI,IAAI,EAOvC,oBACA,qBACD,EACD;AAEA,OAAI,CAAC,wBAAwB,CAAC,mBAC5B,iBAAgB,QAAQ,OAAO,IAAI,IAAI;AAEzC,UAAO;;EAIT,IAAI;AAGJ,MAFoB,sBAAsB,IAAI,KAAK,SAAS,EAE3C;AAEf,aAAU,YAAY,IAAI,IAAI;GAC9B,MAAM,kBAAkB,YAAY,IAAI,IAAI;AAC5C,mBAAgB,QAAQ,IAAI,IAAI,KAAK;IACnC;IACA,UAAU;IACX,CAAC;QAIF,WADe,gBAAgB,QAAQ,IAAI,IAAI,IAAI,EACjC,WAAW;AAG/B,SACE,oBAAC;GAEC,QAAQ,IAAI;GACL;GACE;GACE;GACE;GACC;GACE;GACH;GACb,aAAa,eAAe;GAC5B,IAAI,eAAe;GACnB,OAAO,eAAe;KAXjB,IAAI,IAYT;GAEJ,GACD"}

package/dist/components/navigation/Tabs/TabPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,7 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.117.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
-import { OUTER_STYLES } from "../../../tasty/styles/list.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMergeStyles } from "../../../utils/react/useMergeStyles.js";
@@ -17,6 +14,7 @@ import { TabPicker } from "./TabPicker.js";
 import { TabsAction } from "./TabsAction.js";
 import { useTabEditing } from "./use-tab-editing.js";
 import { useTabIndicator } from "./use-tab-indicator.js";
+import { OUTER_STYLES, extractStyles, mergeStyles } from "@tenphi/tasty";
 import { Children, forwardRef, isValidElement, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTabList } from "react-aria";