npm - @cube-dev/ui-kit - Versions diffs - 0.121.6 → 0.122.0 - Mend

@cube-dev/ui-kit 0.121.6 → 0.122.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (480) hide show

package/dist/components/content/Layout/LayoutPane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutPane.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPane.tsx"],"sourcesContent":["import {\n BaseProps,\n ContainerStyleProps,\n extractStyles,\n filterBaseProps,\n INNER_STYLES,\n mergeStyles,\n OUTER_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { ScrollbarType } from './LayoutContent';\nimport { LayoutContextReset } from './LayoutContext';\nimport { clampSize } from './utils';\n\n// Handler dimensions\nconst HANDLER_WIDTH = 9; // Interactive area\nconst HANDLER_RESERVED = 5; // Space reserved in Inner padding\n\nconst PaneElement = tasty({\n as: 'div',\n qa: 'LayoutPane',\n styles: {\n container: 'pane / inline-size',\n position: 'relative',\n display: 'grid',\n gridColumns: '1sf',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n placeSelf: 'stretch',\n flexShrink: 0,\n flexGrow: 0,\n // Size is set via CSS custom property for performance during drag\n width: {\n '': 'auto',\n 'edge=right': '2x $pane-size $pane-size',\n },\n height: {\n '': '2x $pane-size $pane-size',\n 'edge=right': 'auto',\n },\n boxSizing: 'content-box',\n\n Inner: {\n $: '>',\n display: 'flex',\n flow: 'column',\n padding: '($content-padding, 1x)',\n // Reserve space for handler on resize edge\n paddingRight: {\n '': '($content-padding, 1x)',\n 'edge=right': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n },\n paddingBottom: {\n '': '($content-padding, 1x)',\n 'edge=bottom': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n },\n overflow: {\n '': 'auto',\n 'scrollbar=none': 'clip',\n },\n placeSelf: 'stretch',\n scrollbar: {\n '': 'thin',\n 'scrollbar=tiny \| scrollbar=none': 'none',\n },\n\n '$layout-border-size': '0',\n },\n\n // Custom scrollbar handles (when scrollbar=\"tiny\")\n ScrollbarV: {\n position: 'absolute',\n right: {\n '': '1px',\n 'edge=right': `${HANDLER_RESERVED + 1}px`,\n },\n top: '$scrollbar-v-top',\n width: '1ow',\n height: '$scrollbar-v-height',\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n '(focused \| scrolling) & scrollbar=tiny': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n\n ScrollbarH: {\n $: '>',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'edge=bottom': `${HANDLER_RESERVED + 1}px`,\n },\n left: '$scrollbar-h-left',\n height: '1ow',\n width: '$scrollbar-h-width',\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n '(focused \| scrolling) & scrollbar=tiny': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n\n // Compact resize handler - only drag dots\n ResizeHandler: {\n position: 'absolute',\n // Size: 9px interactive area\n width: {\n '': '100%',\n 'edge=right': `${HANDLER_WIDTH}px`,\n },\n height: {\n '': `${HANDLER_WIDTH}px`,\n 'edge=right': '100%',\n },\n // Position at edge, centered on the reserved space boundary\n right: {\n '': 'initial',\n 'edge=right': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n },\n bottom: {\n '': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n 'edge=right': 'initial',\n },\n top: {\n '': 'initial',\n 'edge=right': 0,\n },\n left: {\n '': 0,\n 'edge=right': 'initial',\n },\n cursor: {\n '': 'row-resize',\n 'edge=right': 'col-resize',\n disabled: 'not-allowed',\n },\n padding: 0,\n outline: 0,\n boxSizing: 'border-box',\n transition: 'theme',\n },\n\n Drag: {\n display: 'grid',\n gap: '2bw',\n border: 0,\n flow: {\n '': 'row',\n 'edge=right': 'column',\n },\n gridColumns: {\n '': '3px 3px 3px 3px 3px',\n 'edge=right': 'auto',\n },\n gridRows: {\n '': 'auto',\n 'edge=right': '3px 3px 3px 3px 3px',\n },\n width: {\n '': 'auto',\n 'edge=right': '3px',\n },\n height: {\n '': '3px',\n 'edge=right': 'auto',\n },\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n transition: 'theme',\n radius: 'round',\n outline: {\n '': '0',\n 'focused \| drag': '1bw #primary-text',\n },\n outlineOffset: 1,\n },\n\n DragPart: {\n radius: true,\n fill: {\n '': '#dark-03',\n 'handlerHovered \| drag \| focused': '#primary-text',\n disabled: '#dark-04',\n },\n },\n },\n});\n\nexport type ResizeEdge = 'right' \| 'bottom';\n\nexport interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {\n /** Edge where resize handler appears /\n resizeEdge?: ResizeEdge;\n /* Enable resize functionality /\n isResizable?: boolean;\n /* Controlled size (width for right edge, height for bottom edge) /\n size?: number \| string;\n /* Default size for uncontrolled state /\n defaultSize?: number \| string;\n /* Minimum size constraint /\n minSize?: number \| string;\n /* Maximum size constraint /\n maxSize?: number \| string;\n /* Size change callback /\n onSizeChange?: (size: number) => void;\n /* Scrollbar style /\n scrollbar?: ScrollbarType;\n /* Custom styles /\n styles?: Styles;\n children?: ReactNode;\n /* Ref for the inner content element /\n innerRef?: ForwardedRef<HTMLDivElement>;\n /* Props to spread on the Inner sub-element /\n innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\ninterface PaneResizeHandlerProps {\n edge: ResizeEdge;\n isDisabled?: boolean;\n moveProps: ReturnType<typeof useMove>['moveProps'];\n onDoubleClick?: () => void;\n onHoverChange?: (isHovered: boolean) => void;\n onFocusChange?: (isFocused: boolean) => void;\n}\n\nfunction PaneResizeHandler(props: PaneResizeHandlerProps) {\n const {\n edge,\n isDisabled,\n moveProps,\n onDoubleClick,\n onHoverChange,\n onFocusChange,\n } = props;\n const { hoverProps, isHovered } = useHover({\n onHoverChange,\n });\n const { focusProps, isFocusVisible } = useFocusRing();\n const isHorizontal = edge === 'right';\n\n // Notify parent of focus changes\n useEffect(() => {\n onFocusChange?.(isFocusVisible);\n }, [isFocusVisible, onFocusChange]);\n\n return (\n <div\n data-element=\"ResizeHandler\"\n {...mergeProps(hoverProps, focusProps, isDisabled ? {} : moveProps, {\n tabIndex: isDisabled ? undefined : 0,\n role: 'separator',\n 'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n 'aria-label': `Resize pane ${edge}`,\n onDoubleClick: isDisabled ? undefined : onDoubleClick,\n })}\n >\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 )}\n </div>\n );\n}\n\nfunction LayoutPane(\n props: CubeLayoutPaneProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n resizeEdge = 'right',\n isResizable = false,\n size: providedSize,\n defaultSize = 200,\n minSize,\n maxSize,\n onSizeChange,\n scrollbar = 'thin',\n styles,\n mods,\n children,\n innerRef: innerRefProp,\n innerProps,\n ...otherProps\n } = props;\n\n const combinedRef = useCombinedRefs(ref);\n const internalInnerRef = useRef<HTMLDivElement>(null);\n const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n const prevProvidedSizeRef = useRef(providedSize);\n const isHorizontal = resizeEdge === 'right';\n\n // Resize state\n const [isDragging, setIsDragging] = useState(false);\n const [isHandlerHovered, setIsHandlerHovered] = useState(false);\n const [isHandlerFocused, setIsHandlerFocused] = useState(false);\n const debouncedHandlerHovered = useDebouncedValue(isHandlerHovered, 150);\n const [size, setSize] = useState<number>(() => {\n const initialSize =\n typeof providedSize === 'number'\n ? providedSize\n : typeof defaultSize === 'number'\n ? defaultSize\n : 200;\n\n return clampSize(initialSize, minSize, maxSize);\n });\n\n // Extract outer wrapper styles and inner content styles\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n const isTinyScrollbar = scrollbar === 'tiny';\n const { hoverProps, isHovered } = useHover({});\n\n const {\n handleVStyle,\n handleHStyle,\n hasOverflowY,\n hasOverflowX,\n isScrolling,\n } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n // Clamp size to min/max constraints\n const clampValue = useCallback(\n (value: number) => clampSize(value, minSize, maxSize),\n [minSize, maxSize],\n );\n\n const { moveProps } = useMove({\n onMoveStart() {\n if (!isResizable) return;\n setIsDragging(true);\n },\n onMove(e) {\n if (!isResizable) return;\n\n let delta: number;\n\n if (e.pointerType === 'keyboard') {\n // Keyboard resize: 10px per step, 50px with Shift\n const step = e.shiftKey ? 50 : 10;\n const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n delta = rawDelta step;\n } else {\n // Pointer resize: use exact delta values\n delta = isHorizontal ? e.deltaX : e.deltaY;\n }\n\n setSize((currentSize) => clampValue(currentSize + delta));\n },\n onMoveEnd() {\n setIsDragging(false);\n // Round to integer on release and notify parent\n setSize((currentSize) => {\n const finalSize = Math.round(clampValue(currentSize));\n onSizeChange?.(finalSize);\n return finalSize;\n });\n },\n });\n\n // Sync provided size with internal state (only when providedSize actually changes)\n // This prevents resetting size when only isDragging changes (which would cause a flash)\n useEffect(() => {\n if (prevProvidedSizeRef.current !== providedSize) {\n prevProvidedSizeRef.current = providedSize;\n if (typeof providedSize === 'number' && !isDragging) {\n setSize(clampValue(providedSize));\n }\n }\n }, [providedSize, isDragging, clampValue]);\n\n // Reset to default size on double-click\n const handleResetSize = useCallback(() => {\n const resetSize =\n typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n const clampedSize = clampValue(resetSize \|\| 200);\n setSize(clampedSize);\n onSizeChange?.(clampedSize);\n }, [defaultSize, clampValue, onSizeChange]);\n\n const scrollbarStyle = useMemo(() => {\n if (!isTinyScrollbar) return {};\n\n return {\n ...handleVStyle,\n ...handleHStyle,\n };\n }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n const paneMods = useMemo(\n () => ({\n scrollbar,\n hovered: isHovered,\n scrolling: isScrolling,\n handlerHovered: debouncedHandlerHovered,\n focused: isHandlerFocused,\n disabled: !isResizable,\n edge: resizeEdge,\n drag: isDragging,\n ...mods,\n }),\n [\n scrollbar,\n isHovered,\n isScrolling,\n debouncedHandlerHovered,\n isHandlerFocused,\n isResizable,\n resizeEdge,\n isDragging,\n mods,\n ],\n );\n\n // Merge styles: outer styles to root, inner styles to Inner element\n // Size is NOT included here - it's set via CSS custom property in paneStyle for performance\n const finalStyles = useMemo(() => {\n return mergeStyles(\n styles,\n outerStyles,\n innerStyles ? { Inner: innerStyles } : null,\n );\n }, [styles, outerStyles, innerStyles]);\n\n // Size is set via CSS custom property for performance during drag\n // This avoids expensive style recalculation on every mouse move\n const paneStyle = useMemo(\n () => ({\n ...scrollbarStyle,\n '--pane-size': `${size}px`,\n '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n }),\n [scrollbarStyle, size, minSize, maxSize],\n );\n\n return (\n <PaneElement\n ref={combinedRef}\n {...filterBaseProps(otherProps, { eventProps: true })}\n {...hoverProps}\n mods={paneMods}\n styles={finalStyles}\n style={paneStyle}\n >\n <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </div>\n {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n {isResizable && (\n <PaneResizeHandler\n edge={resizeEdge}\n isDisabled={!isResizable}\n moveProps={moveProps}\n onDoubleClick={handleResetSize}\n onHoverChange={setIsHandlerHovered}\n onFocusChange={setIsHandlerFocused}\n />\n )}\n </PaneElement>\n );\n}\n\nconst _LayoutPane = forwardRef(LayoutPane);\n\n_LayoutPane.displayName = 'Layout.Pane';\n\nexport { _LayoutPane as LayoutPane };\n"],"mappings":"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"}
1	+ {"version":3,"file":"LayoutPane.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPane.tsx"],"sourcesContent":["import {\n BaseProps,\n ContainerStyleProps,\n filterBaseProps,\n INNER_STYLES,\n mergeStyles,\n OUTER_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { useTinyScrollbar } from './hooks/useTinyScrollbar';\nimport { ScrollbarType } from './LayoutContent';\nimport { LayoutContextReset } from './LayoutContext';\nimport { clampSize } from './utils';\n\n// Handler dimensions\nconst HANDLER_WIDTH = 9; // Interactive area\nconst HANDLER_RESERVED = 5; // Space reserved in Inner padding\n\nconst PaneElement = tasty({\n as: 'div',\n qa: 'LayoutPane',\n styles: {\n container: 'pane / inline-size',\n position: 'relative',\n display: 'grid',\n gridColumns: '1sf',\n gridRows: '1sf',\n placeContent: 'stretch',\n placeItems: 'stretch',\n placeSelf: 'stretch',\n flexShrink: 0,\n flexGrow: 0,\n // Size is set via CSS custom property for performance during drag\n width: {\n '': 'auto',\n 'edge=right': '2x $pane-size $pane-size',\n },\n height: {\n '': '2x $pane-size $pane-size',\n 'edge=right': 'auto',\n },\n boxSizing: 'content-box',\n\n Inner: {\n $: '>',\n display: 'flex',\n flow: 'column',\n padding: '($content-padding, 1x)',\n // Reserve space for handler on resize edge\n paddingRight: {\n '': '($content-padding, 1x)',\n 'edge=right': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n },\n paddingBottom: {\n '': '($content-padding, 1x)',\n 'edge=bottom': `calc(($content-padding, 1x) + ${HANDLER_RESERVED}px)`,\n },\n overflow: {\n '': 'auto',\n 'scrollbar=none': 'clip',\n },\n placeSelf: 'stretch',\n scrollbar: {\n '': 'thin',\n 'scrollbar=tiny \| scrollbar=none': 'none',\n },\n\n '$layout-border-size': '0',\n },\n\n // Custom scrollbar handles (when scrollbar=\"tiny\")\n ScrollbarV: {\n position: 'absolute',\n right: {\n '': '1px',\n 'edge=right': `${HANDLER_RESERVED + 1}px`,\n },\n top: '$scrollbar-v-top',\n width: '1ow',\n height: '$scrollbar-v-height',\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n '(focused \| scrolling) & scrollbar=tiny': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n\n ScrollbarH: {\n $: '>',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'edge=bottom': `${HANDLER_RESERVED + 1}px`,\n },\n left: '$scrollbar-h-left',\n height: '1ow',\n width: '$scrollbar-h-width',\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n '(focused \| scrolling) & scrollbar=tiny': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n\n // Compact resize handler - only drag dots\n ResizeHandler: {\n position: 'absolute',\n // Size: 9px interactive area\n width: {\n '': '100%',\n 'edge=right': `${HANDLER_WIDTH}px`,\n },\n height: {\n '': `${HANDLER_WIDTH}px`,\n 'edge=right': '100%',\n },\n // Position at edge, centered on the reserved space boundary\n right: {\n '': 'initial',\n 'edge=right': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n },\n bottom: {\n '': `${(HANDLER_RESERVED - HANDLER_WIDTH) / 2}px`,\n 'edge=right': 'initial',\n },\n top: {\n '': 'initial',\n 'edge=right': 0,\n },\n left: {\n '': 0,\n 'edge=right': 'initial',\n },\n cursor: {\n '': 'row-resize',\n 'edge=right': 'col-resize',\n disabled: 'not-allowed',\n },\n padding: 0,\n outline: 0,\n boxSizing: 'border-box',\n transition: 'theme',\n },\n\n Drag: {\n display: 'grid',\n gap: '2bw',\n border: 0,\n flow: {\n '': 'row',\n 'edge=right': 'column',\n },\n gridColumns: {\n '': '3px 3px 3px 3px 3px',\n 'edge=right': 'auto',\n },\n gridRows: {\n '': 'auto',\n 'edge=right': '3px 3px 3px 3px 3px',\n },\n width: {\n '': 'auto',\n 'edge=right': '3px',\n },\n height: {\n '': '3px',\n 'edge=right': 'auto',\n },\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n transition: 'theme',\n radius: 'round',\n outline: {\n '': '0',\n 'focused \| drag': '1bw #primary-text',\n },\n outlineOffset: 1,\n },\n\n DragPart: {\n radius: true,\n fill: {\n '': '#dark-03',\n 'handlerHovered \| drag \| focused': '#primary-text',\n disabled: '#dark-04',\n },\n },\n },\n});\n\nexport type ResizeEdge = 'right' \| 'bottom';\n\nexport interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {\n /** Edge where resize handler appears /\n resizeEdge?: ResizeEdge;\n /* Enable resize functionality /\n isResizable?: boolean;\n /* Controlled size (width for right edge, height for bottom edge) /\n size?: number \| string;\n /* Default size for uncontrolled state /\n defaultSize?: number \| string;\n /* Minimum size constraint /\n minSize?: number \| string;\n /* Maximum size constraint /\n maxSize?: number \| string;\n /* Size change callback /\n onSizeChange?: (size: number) => void;\n /* Scrollbar style /\n scrollbar?: ScrollbarType;\n /* Custom styles /\n styles?: Styles;\n children?: ReactNode;\n /* Ref for the inner content element /\n innerRef?: ForwardedRef<HTMLDivElement>;\n /* Props to spread on the Inner sub-element /\n innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\ninterface PaneResizeHandlerProps {\n edge: ResizeEdge;\n isDisabled?: boolean;\n moveProps: ReturnType<typeof useMove>['moveProps'];\n onDoubleClick?: () => void;\n onHoverChange?: (isHovered: boolean) => void;\n onFocusChange?: (isFocused: boolean) => void;\n}\n\nfunction PaneResizeHandler(props: PaneResizeHandlerProps) {\n const {\n edge,\n isDisabled,\n moveProps,\n onDoubleClick,\n onHoverChange,\n onFocusChange,\n } = props;\n const { hoverProps, isHovered } = useHover({\n onHoverChange,\n });\n const { focusProps, isFocusVisible } = useFocusRing();\n const isHorizontal = edge === 'right';\n\n // Notify parent of focus changes\n useEffect(() => {\n onFocusChange?.(isFocusVisible);\n }, [isFocusVisible, onFocusChange]);\n\n return (\n <div\n data-element=\"ResizeHandler\"\n {...mergeProps(hoverProps, focusProps, isDisabled ? {} : moveProps, {\n tabIndex: isDisabled ? undefined : 0,\n role: 'separator',\n 'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n 'aria-label': `Resize pane ${edge}`,\n onDoubleClick: isDisabled ? undefined : onDoubleClick,\n })}\n >\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 )}\n </div>\n );\n}\n\nfunction LayoutPane(\n props: CubeLayoutPaneProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n resizeEdge = 'right',\n isResizable = false,\n size: providedSize,\n defaultSize = 200,\n minSize,\n maxSize,\n onSizeChange,\n scrollbar = 'thin',\n styles,\n mods,\n children,\n innerRef: innerRefProp,\n innerProps,\n ...otherProps\n } = props;\n\n const combinedRef = useCombinedRefs(ref);\n const internalInnerRef = useRef<HTMLDivElement>(null);\n const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);\n const prevProvidedSizeRef = useRef(providedSize);\n const isHorizontal = resizeEdge === 'right';\n\n // Resize state\n const [isDragging, setIsDragging] = useState(false);\n const [isHandlerHovered, setIsHandlerHovered] = useState(false);\n const [isHandlerFocused, setIsHandlerFocused] = useState(false);\n const debouncedHandlerHovered = useDebouncedValue(isHandlerHovered, 150);\n const [size, setSize] = useState<number>(() => {\n const initialSize =\n typeof providedSize === 'number'\n ? providedSize\n : typeof defaultSize === 'number'\n ? defaultSize\n : 200;\n\n return clampSize(initialSize, minSize, maxSize);\n });\n\n // Extract outer wrapper styles and inner content styles\n const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n const isTinyScrollbar = scrollbar === 'tiny';\n const { hoverProps, isHovered } = useHover({});\n\n const {\n handleVStyle,\n handleHStyle,\n hasOverflowY,\n hasOverflowX,\n isScrolling,\n } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);\n\n // Clamp size to min/max constraints\n const clampValue = useCallback(\n (value: number) => clampSize(value, minSize, maxSize),\n [minSize, maxSize],\n );\n\n const { moveProps } = useMove({\n onMoveStart() {\n if (!isResizable) return;\n setIsDragging(true);\n },\n onMove(e) {\n if (!isResizable) return;\n\n let delta: number;\n\n if (e.pointerType === 'keyboard') {\n // Keyboard resize: 10px per step, 50px with Shift\n const step = e.shiftKey ? 50 : 10;\n const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n delta = rawDelta step;\n } else {\n // Pointer resize: use exact delta values\n delta = isHorizontal ? e.deltaX : e.deltaY;\n }\n\n setSize((currentSize) => clampValue(currentSize + delta));\n },\n onMoveEnd() {\n setIsDragging(false);\n // Round to integer on release and notify parent\n setSize((currentSize) => {\n const finalSize = Math.round(clampValue(currentSize));\n onSizeChange?.(finalSize);\n return finalSize;\n });\n },\n });\n\n // Sync provided size with internal state (only when providedSize actually changes)\n // This prevents resetting size when only isDragging changes (which would cause a flash)\n useEffect(() => {\n if (prevProvidedSizeRef.current !== providedSize) {\n prevProvidedSizeRef.current = providedSize;\n if (typeof providedSize === 'number' && !isDragging) {\n setSize(clampValue(providedSize));\n }\n }\n }, [providedSize, isDragging, clampValue]);\n\n // Reset to default size on double-click\n const handleResetSize = useCallback(() => {\n const resetSize =\n typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n const clampedSize = clampValue(resetSize \|\| 200);\n setSize(clampedSize);\n onSizeChange?.(clampedSize);\n }, [defaultSize, clampValue, onSizeChange]);\n\n const scrollbarStyle = useMemo(() => {\n if (!isTinyScrollbar) return {};\n\n return {\n ...handleVStyle,\n ...handleHStyle,\n };\n }, [isTinyScrollbar, handleVStyle, handleHStyle]);\n\n const paneMods = useMemo(\n () => ({\n scrollbar,\n hovered: isHovered,\n scrolling: isScrolling,\n handlerHovered: debouncedHandlerHovered,\n focused: isHandlerFocused,\n disabled: !isResizable,\n edge: resizeEdge,\n drag: isDragging,\n ...mods,\n }),\n [\n scrollbar,\n isHovered,\n isScrolling,\n debouncedHandlerHovered,\n isHandlerFocused,\n isResizable,\n resizeEdge,\n isDragging,\n mods,\n ],\n );\n\n // Merge styles: outer styles to root, inner styles to Inner element\n // Size is NOT included here - it's set via CSS custom property in paneStyle for performance\n const finalStyles = useMemo(() => {\n return mergeStyles(\n styles,\n outerStyles,\n innerStyles ? { Inner: innerStyles } : null,\n );\n }, [styles, outerStyles, innerStyles]);\n\n // Size is set via CSS custom property for performance during drag\n // This avoids expensive style recalculation on every mouse move\n const paneStyle = useMemo(\n () => ({\n ...scrollbarStyle,\n '--pane-size': `${size}px`,\n '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n }),\n [scrollbarStyle, size, minSize, maxSize],\n );\n\n return (\n <PaneElement\n ref={combinedRef}\n {...filterBaseProps(otherProps, { eventProps: true })}\n {...hoverProps}\n mods={paneMods}\n styles={finalStyles}\n style={paneStyle}\n >\n <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </div>\n {isTinyScrollbar && hasOverflowY && <div data-element=\"ScrollbarV\" />}\n {isTinyScrollbar && hasOverflowX && <div data-element=\"ScrollbarH\" />}\n {isResizable && (\n <PaneResizeHandler\n edge={resizeEdge}\n isDisabled={!isResizable}\n moveProps={moveProps}\n onDoubleClick={handleResetSize}\n onHoverChange={setIsHandlerHovered}\n onFocusChange={setIsHandlerFocused}\n />\n )}\n </PaneElement>\n );\n}\n\nconst _LayoutPane = forwardRef(LayoutPane);\n\n_LayoutPane.displayName = 'Layout.Pane';\n\nexport { _LayoutPane as LayoutPane };\n"],"mappings":"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"}

package/dist/components/content/Layout/LayoutPanel.js CHANGED Viewed

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useLocalStorage } from "../../../utils/react/useLocalStorage.js";
@@ -8,7 +9,7 @@ import { DialogContainer } from "../../overlays/Dialog/DialogContainer.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { LayoutContextReset, LayoutPanelContext, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { clampSize, getOppositeSide, resolveCssSize } from "./utils.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFocusRing, useHover, useMove } from "react-aria";

package/dist/components/content/Layout/LayoutPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutPanel.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n extractStyles,\n filterBaseProps,\n mergeStyles,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n RefCallback,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport {\n mergeProps,\n useCombinedRefs,\n useLocalStorage,\n} from '../../../utils/react';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n CubeDialogContainerProps,\n DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n LayoutContextReset,\n LayoutPanelContext,\n Side,\n useLayoutActionsContext,\n useLayoutRefsContext,\n useLayoutStateContext,\n} from './LayoutContext';\nimport { clampSize, getOppositeSide, resolveCssSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n as: 'div',\n qa: 'LayoutPanel',\n styles: {\n container: 'panel / inline-size',\n position: 'absolute',\n display: 'flex',\n flow: 'column',\n overflow: 'hidden',\n boxSizing: 'border-box',\n\n '$content-padding': '1x',\n // Auto-border size for sub-components (panels are always vertical)\n '$layout-border-size': '1bw',\n\n // Position based on side prop\n top: {\n '': 0,\n 'side=bottom': 'initial',\n },\n right: {\n '': 0,\n 'side=left': 'initial',\n },\n bottom: {\n '': 0,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=right': 'initial',\n },\n\n // Size handling with CSS-level min/max clamping\n width: {\n '': '$min-size $panel-size $max-size',\n 'side=top \| side=bottom': '100%',\n },\n height: {\n '': '100%',\n 'side=top \| side=bottom': '$min-size $panel-size $max-size',\n },\n\n // Visual styling\n border: {\n 'side=left': 'right',\n 'side=right': 'left',\n 'side=top': 'bottom',\n 'side=bottom': 'top',\n },\n fill: '#white',\n\n // Transition styles - offscreen mod controls slide animation\n transform: {\n '': 'translateX(0) translateY(0)',\n 'offscreen & side=left': 'translateX(-100%)',\n 'offscreen & side=right': 'translateX(100%)',\n 'offscreen & side=top': 'translateY(-100%)',\n 'offscreen & side=bottom': 'translateY(100%)',\n },\n transition: {\n '': 'none',\n 'has-transition': 'transform $transition ease-out',\n },\n },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n qa: 'PanelResizeHandler',\n styles: {\n position: 'absolute',\n\n // Handler size\n width: {\n '': '100%',\n horizontal: `${HANDLER_WIDTH}px`,\n 'disabled & horizontal': '1bw',\n },\n height: {\n '': `${HANDLER_WIDTH}px`,\n horizontal: '100%',\n 'disabled & !horizontal': '1bw',\n },\n\n // Position handler with direct offset (no centering needed)\n top: {\n '': 0,\n 'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=bottom': 'initial',\n },\n bottom: {\n '': 0,\n 'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=right': 'initial',\n },\n right: {\n '': 0,\n 'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=left': 'initial',\n },\n\n // Offscreen transforms only (no centering needed with direct offset positioning)\n transform: {\n 'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n },\n\n cursor: {\n '': 'row-resize',\n horizontal: 'col-resize',\n disabled: 'not-allowed',\n },\n padding: 0,\n outline: 0,\n boxSizing: 'border-box',\n\n // Transition must match panel for synchronized animation\n transition: {\n '': 'theme',\n 'has-transition': 'transform $transition ease-out, theme',\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 \| focused) & !disabled': '#purple-03',\n },\n border: 0,\n transition: 'theme',\n outline: {\n '': '1bw #primary-text.0',\n 'drag \| focused': '1bw #primary-text',\n },\n outlineOffset: 1,\n },\n\n Drag: {\n display: 'grid',\n gap: '2bw',\n border: 0,\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 \| focused': '#primary-text',\n disabled: '#dark-04',\n },\n },\n },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n qa: 'PanelOverlay',\n styles: {\n position: 'absolute',\n inset: 0,\n // fill: '#white.2',\n backdropFilter: 'invert(.15)',\n cursor: 'pointer',\n opacity: {\n '': 0,\n visible: 1,\n },\n pointerEvents: {\n '': 'none',\n visible: 'auto',\n },\n transition: 'opacity .15s ease-out',\n },\n});\n\ninterface ResizeHandlerProps {\n side: Side;\n isDisabled?: boolean;\n mods?: Record<string, boolean>;\n moveProps: ReturnType<typeof useMove>['moveProps'];\n style?: Record<string, string \| number \| null \| undefined>;\n onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n const { hoverProps, isHovered } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const isHorizontal = side === 'left' \|\| side === 'right';\n const localIsHovered = useDebouncedValue(isHovered, 150);\n\n return (\n <ResizeHandlerElement\n {...mergeProps(hoverProps, focusProps, moveProps, {\n mods: {\n hovered: localIsHovered,\n horizontal: isHorizontal,\n disabled: isDisabled,\n focused: isFocusVisible,\n side,\n ...mods,\n },\n style,\n tabIndex: isDisabled ? undefined : 0,\n role: 'separator',\n 'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n 'aria-label': `Resize ${side} panel`,\n onDoubleClick: isDisabled ? undefined : onDoubleClick,\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 )}\n </ResizeHandlerElement>\n );\n}\n\n/** Panel rendering mode /\nexport type LayoutPanelMode = 'default' \| 'sticky' \| 'overlay' \| 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n /* Side of the layout where panel is positioned /\n side: Side;\n /\n Panel rendering mode:\n * - `default`: Standard panel that pushes content aside\n * - `sticky`: Panel floats over content without pushing it\n * - `overlay`: Panel with dismissable backdrop overlay\n * - `dialog`: Panel renders as a modal dialog\n /\n mode?: LayoutPanelMode;\n /* Panel size (width for left/right, height for top/bottom) - controlled /\n size?: number \| string;\n /* Default panel size for uncontrolled state /\n defaultSize?: number \| string;\n /* Minimum panel size /\n minSize?: number \| string;\n /* Maximum panel size /\n maxSize?: number \| string;\n /* Enable resize functionality /\n isResizable?: boolean;\n /* Size change callback /\n onSizeChange?: (size: number) => void;\n /* Controlled open state /\n isOpen?: boolean;\n /* Default open state /\n defaultIsOpen?: boolean;\n /* Open state change callback /\n onOpenChange?: (isOpen: boolean) => void;\n /* Enable slide transition on open/close /\n hasTransition?: boolean;\n /\n Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n * Only applies to `overlay` and `dialog` modes. Default: true\n /\n isDismissable?: boolean;\n /* Styles for the overlay backdrop in overlay mode /\n overlayStyles?: Styles;\n /\n @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n /\n isDialog?: boolean;\n /* Controlled dialog open state (used with mode=\"dialog\") /\n isDialogOpen?: boolean;\n /* Default dialog open state /\n defaultIsDialogOpen?: boolean;\n /* Dialog open state change callback /\n onDialogOpenChange?: (isOpen: boolean) => void;\n /* Props passed to Dialog component when in dialog mode /\n dialogProps?: Omit<\n CubeDialogContainerProps,\n 'isDismissable' \| 'onDismiss' \| 'isOpen'\n >;\n /* Padding for content areas inside the panel. Default: '1x' /\n contentPadding?: Styles['padding'];\n /* localStorage key for persisting panel size. When provided, size is stored and restored across instances. /\n sizeStorageKey?: string;\n /* Styles for the panel /\n styles?: Styles;\n children?: ReactNode;\n}\n\nfunction LayoutPanel(\n props: CubeLayoutPanelProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const layoutActions = useLayoutActionsContext();\n const layoutState = useLayoutStateContext();\n const layoutRefs = useLayoutRefsContext();\n\n if (!layoutActions \|\| !layoutState \|\| !layoutRefs) {\n throw new Error(\n 'Layout.Panel must be used within a Layout component. ' +\n 'Ensure your panel is rendered inside a <Layout> parent.',\n );\n }\n\n const {\n side = 'left',\n mode: modeProp,\n size: providedSize,\n defaultSize = 280,\n minSize = 200,\n maxSize,\n isResizable = false,\n onSizeChange,\n isOpen: providedIsOpen,\n defaultIsOpen = true,\n onOpenChange,\n hasTransition: hasTransitionProp,\n isDismissable = true,\n overlayStyles,\n // Deprecated prop - use mode=\"dialog\" instead\n isDialog = false,\n isDialogOpen: providedIsDialogOpen,\n defaultIsDialogOpen = false,\n onDialogOpenChange,\n dialogProps,\n contentPadding,\n sizeStorageKey,\n children,\n styles,\n mods,\n ...otherProps\n } = props;\n\n // Resolve mode from prop or deprecated isDialog\n const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n const isDialogMode = mode === 'dialog';\n const isOverlayMode = mode === 'overlay';\n const isStickyMode = mode === 'sticky';\n\n // Use prop value if provided, otherwise fall back to context value\n const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n const combinedRef = useCombinedRefs(ref);\n const prevProvidedSizeRef = useRef(providedSize);\n const isHorizontal = side === 'left' \|\| side === 'right';\n\n // Natural boundary computation\n const { containerWidth, containerHeight } = layoutState;\n const { minContentSize } = layoutActions;\n const containerDimension = isHorizontal ? containerWidth : containerHeight;\n const oppositeSide = getOppositeSide(side);\n const oppositePanelSize = layoutState.panelSizes[oppositeSide];\n const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;\n const naturalMax = useMemo(\n () =>\n containerDimension > 0\n ? Math.max(\n 0,\n containerDimension -\n oppositePanelSize -\n minContentSize -\n ownInsetOffset,\n )\n : Infinity,\n [containerDimension, oppositePanelSize, minContentSize, ownInsetOffset],\n );\n\n // Panel open state\n const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n const isOpen = providedIsOpen ?? internalIsOpen;\n\n // Dialog open state\n const [internalIsDialogOpen, setInternalIsDialogOpen] =\n useState(defaultIsDialogOpen);\n const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n // Persistent size storage\n const [storedSize, setStoredSize] = useLocalStorage<number \| null>(\n sizeStorageKey ?? null,\n null,\n );\n\n // Resize state\n const [isDragging, setIsDragging] = useState(false);\n const [size, setSize] = useState<number>(() => {\n const initialSize =\n typeof providedSize === 'number'\n ? providedSize\n : storedSize != null\n ? storedSize\n : typeof defaultSize === 'number'\n ? defaultSize\n : 280;\n\n return clampSize(initialSize, minSize, maxSize);\n });\n\n const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n // Merge styles with contentPadding support\n const finalStyles = useMemo(\n () =>\n mergeStyles(\n styles,\n contentPadding != null ? { '$content-padding': contentPadding } : null,\n extractedStyles,\n ),\n [extractedStyles, contentPadding, styles],\n );\n\n // Resolve user's maxSize to pixels for JS-level clamping.\n // String values (e.g. \"50%\") can only be resolved once we know the container size.\n const resolvedMax = useMemo(() => {\n if (typeof maxSize === 'number') return maxSize;\n if (typeof maxSize === 'string' && containerDimension > 0) {\n return resolveCssSize(maxSize, containerDimension);\n }\n return undefined;\n }, [maxSize, containerDimension]);\n\n // Effective max combines user's maxSize with natural boundary\n const effectiveMax = useMemo(() => {\n const values: number[] = [];\n if (resolvedMax != null) values.push(resolvedMax);\n if (Number.isFinite(naturalMax)) values.push(naturalMax);\n return values.length > 0 ? Math.min(...values) : undefined;\n }, [resolvedMax, naturalMax]);\n\n // Clamp size to min/max constraints (including natural boundaries)\n const clampValue = useCallback(\n (value: number) => clampSize(value, minSize, undefined, effectiveMax),\n [minSize, effectiveMax],\n );\n\n const setContextDragging = layoutActions.setDragging;\n\n const { moveProps } = useMove({\n onMoveStart() {\n if (!isResizable) return;\n setIsDragging(true);\n setContextDragging(true);\n },\n onMove(e) {\n if (!isResizable) return;\n\n let delta: number;\n\n if (e.pointerType === 'keyboard') {\n // Keyboard resize: 10px per step, 50px with Shift\n const step = e.shiftKey ? 50 : 10;\n // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n const direction = side === 'right' \|\| side === 'bottom' ? -1 : 1;\n delta = rawDelta step * direction;\n } else {\n // Pointer resize: use exact delta values\n delta = isHorizontal\n ? e.deltaX * (side === 'right' ? -1 : 1)\n : e.deltaY * (side === 'bottom' ? -1 : 1);\n }\n\n setSize((currentSize) => clampValue(currentSize + delta));\n },\n onMoveEnd() {\n setIsDragging(false);\n setContextDragging(false);\n // Round to integer on release and notify parent\n setSize((currentSize) => {\n const finalSize = Math.round(clampValue(currentSize));\n // Call onSizeChange synchronously to ensure parent state is updated\n onSizeChange?.(finalSize);\n // Persist to localStorage if key is provided\n setStoredSize(finalSize);\n return finalSize;\n });\n },\n });\n\n // Sync provided size with internal state (only when providedSize actually changes)\n // This prevents resetting size when only isDragging changes (which would cause a flash)\n useEffect(() => {\n if (prevProvidedSizeRef.current !== providedSize) {\n prevProvidedSizeRef.current = providedSize;\n if (typeof providedSize === 'number' && !isDragging) {\n setSize(clampValue(providedSize));\n }\n }\n }, [providedSize, isDragging, clampValue]);\n\n // Auto-shrink: re-clamp when container resizes or opposite panel changes\n useEffect(() => {\n if (!isDragging && containerDimension > 0) {\n setSize((prev) => {\n const clamped = clampValue(prev);\n\n if (clamped !== prev) {\n onSizeChange?.(Math.round(clamped));\n setStoredSize(Math.round(clamped));\n }\n\n return clamped;\n });\n }\n }, [isDragging, clampValue, containerDimension]);\n\n // Register panel with layout context\n // Include handler outside portion (minus border overlap) for proper content inset\n // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n // NOTE: We intentionally use `size` (not `clampValue(size)`) here to avoid a feedback\n // loop. `clampValue` depends on the opposite panel's context size, so clamping here\n // would create a period-2 oscillation through shared context. CSS --max-size handles\n // visual clamping immediately; the auto-shrink effect converges `size` state.\n const effectivePanelSize = isOpen && mode === 'default' ? size : 0;\n const effectiveInsetSize = Math.round(\n effectivePanelSize +\n (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n );\n\n const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n const { isReady } = layoutState;\n\n // Track the last reported size to prevent unnecessary updates\n const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n // Register on mount, unregister on unmount\n // Using useLayoutEffect ensures registration happens before browser paint\n useLayoutEffect(() => {\n registerPanel(side, lastSizeRef.current);\n\n return () => {\n unregisterPanel(side);\n };\n }, [side, registerPanel, unregisterPanel]);\n\n // Update size when it changes (after initial mount)\n // Using useLayoutEffect ensures size updates happen before browser paint\n useLayoutEffect(() => {\n if (lastSizeRef.current !== effectiveInsetSize) {\n lastSizeRef.current = effectiveInsetSize;\n updatePanelSize(side, effectiveInsetSize);\n }\n }, [side, effectiveInsetSize, updatePanelSize]);\n\n const handleOpenChange = useCallback(\n (newIsOpen: boolean) => {\n setInternalIsOpen(newIsOpen);\n onOpenChange?.(newIsOpen);\n },\n [onOpenChange],\n );\n\n // Dismiss handler for overlay mode (click on overlay)\n const handleDismiss = useCallback(() => {\n if (isDismissable) {\n handleOpenChange(false);\n }\n }, [isDismissable, handleOpenChange]);\n\n // Register overlay panel with Layout context for coordinated dismissal\n const { registerOverlayPanel } = layoutActions;\n\n useEffect(() => {\n // Only register if in overlay mode, open, and dismissable\n if (isOverlayMode && isOpen && isDismissable) {\n const unregister = registerOverlayPanel(() => handleOpenChange(false));\n return unregister;\n }\n }, [\n isOverlayMode,\n isOpen,\n isDismissable,\n registerOverlayPanel,\n handleOpenChange,\n ]);\n\n const handleDialogOpenChange = useCallback(\n (newIsOpen: boolean) => {\n setInternalIsDialogOpen(newIsOpen);\n onDialogOpenChange?.(newIsOpen);\n },\n [onDialogOpenChange],\n );\n\n // Panel context value for child components (like LayoutPanelHeader)\n const panelContextValue = useMemo(\n () => ({\n onOpenChange: handleOpenChange,\n isOpen,\n }),\n [handleOpenChange, isOpen],\n );\n\n // Dialog mode context value - uses dialog state instead of panel state\n const dialogPanelContextValue = useMemo(\n () => ({\n onOpenChange: handleDialogOpenChange,\n isOpen: dialogOpen,\n }),\n [handleDialogOpenChange, dialogOpen],\n );\n\n const panelMods = useMemo(\n () => ({\n side,\n drag: isDragging,\n horizontal: isHorizontal,\n // Only enable transition after layout is ready to prevent initial animation\n 'has-transition': hasTransition && isReady,\n ...mods,\n }),\n [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n );\n\n // Build --max-size CSS variable combining user maxSize and natural boundary\n const maxSizeCss = useMemo(() => {\n const parts: string[] = [];\n\n if (maxSize != null) {\n parts.push(typeof maxSize === 'number' ? `${maxSize}px` : maxSize);\n }\n\n if (containerDimension > 0 && Number.isFinite(naturalMax)) {\n parts.push(`${naturalMax}px`);\n }\n\n if (parts.length === 0) return undefined;\n return parts.length === 1 ? parts[0] : `min(${parts.join(', ')})`;\n }, [maxSize, naturalMax, containerDimension]);\n\n const panelStyle = useMemo(\n () => ({\n '--panel-size': `${size}px`,\n '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n '--max-size': maxSizeCss,\n }),\n [size, minSize, maxSizeCss],\n );\n\n // Combine refs for panel element\n const panelRefCallback = useCallback(\n (node: HTMLDivElement \| null, transitionRef?: RefCallback<HTMLElement>) => {\n // Update the combined ref\n (combinedRef as { current: HTMLDivElement \| null }).current = node;\n // Call transition ref if provided\n transitionRef?.(node);\n },\n [combinedRef],\n );\n\n // Reset to default size on double-click\n const handleResetSize = useCallback(() => {\n const resetSize =\n typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n const clampedSize = clampValue(resetSize \|\| 280);\n setSize(clampedSize);\n onSizeChange?.(clampedSize);\n setStoredSize(clampedSize);\n }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n const renderPanelContent = (\n offscreen = false,\n transitionRef?: RefCallback<HTMLElement>,\n ) => {\n const showOverlay = isOverlayMode && !offscreen;\n\n return (\n <>\n {/* Overlay backdrop for overlay mode */}\n {isOverlayMode && (\n <OverlayBackdrop\n mods={{ visible: showOverlay }}\n styles={overlayStyles}\n aria-hidden=\"true\"\n onClick={handleDismiss}\n />\n )}\n <PanelElement\n ref={(node: HTMLDivElement \| null) =>\n panelRefCallback(node, transitionRef)\n }\n {...filterBaseProps(otherProps, { eventProps: true })}\n mods={{ ...panelMods, offscreen }}\n styles={finalStyles}\n style={panelStyle}\n data-side={side}\n >\n <LayoutPanelContext.Provider value={panelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </PanelElement>\n {isResizable && (\n <ResizeHandler\n side={side}\n isDisabled={!isResizable}\n mods={{\n drag: isDragging,\n offscreen,\n 'has-transition': hasTransition && isReady,\n }}\n moveProps={moveProps}\n style={panelStyle}\n onDoubleClick={handleResetSize}\n />\n )}\n </>\n );\n };\n\n // Dialog mode - uses its own portal via DialogContainer\n if (isDialogMode) {\n return (\n <DialogContainer\n isOpen={dialogOpen}\n isDismissable={isDismissable}\n onDismiss={() => handleDialogOpenChange(false)}\n {...dialogProps}\n >\n <Dialog isDismissable={false}>\n <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </Dialog>\n </DialogContainer>\n );\n }\n\n // Wait for portal container to be ready before rendering\n if (!layoutRefs.isPanelContainerReady) {\n return null;\n }\n\n const portalContainer = layoutRefs.panelContainerRef.current!;\n\n // Panel with transition - portal to panel container\n if (hasTransition) {\n return createPortal(\n <DisplayTransition isShown={isOpen} animateOnMount={false}>\n {({ isShown, ref: transitionRef }) =>\n renderPanelContent(!isShown, transitionRef)\n }\n </DisplayTransition>,\n portalContainer,\n );\n }\n\n // Simple panel (no transition) - portal to panel container\n if (!isOpen) return null;\n\n return createPortal(renderPanelContent(false), portalContainer);\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":"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"}
1	+ {"version":3,"file":"LayoutPanel.js","names":["mergeProps"],"sources":["../../../../src/components/content/Layout/LayoutPanel.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n mergeStyles,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n RefCallback,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRing, useHover, useMove } from 'react-aria';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedValue } from '../../../_internal/hooks';\nimport {\n mergeProps,\n useCombinedRefs,\n useLocalStorage,\n} from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Dialog } from '../../overlays/Dialog';\nimport {\n CubeDialogContainerProps,\n DialogContainer,\n} from '../../overlays/Dialog/DialogContainer';\n\nimport {\n LayoutContextReset,\n LayoutPanelContext,\n Side,\n useLayoutActionsContext,\n useLayoutRefsContext,\n useLayoutStateContext,\n} from './LayoutContext';\nimport { clampSize, getOppositeSide, resolveCssSize } from './utils';\n\n// Resize handler dimensions\nconst HANDLER_WIDTH = 9;\n// How far from panel edge to position handler's inner edge (centers the 3px track on the edge)\nconst HANDLER_OFFSET = 4;\n// Extra inset added for resizable panels (to accommodate handler grab area)\nconst RESIZABLE_INSET_OFFSET = 2;\n\nconst PanelElement = tasty({\n as: 'div',\n qa: 'LayoutPanel',\n styles: {\n container: 'panel / inline-size',\n position: 'absolute',\n display: 'flex',\n flow: 'column',\n overflow: 'hidden',\n boxSizing: 'border-box',\n\n '$content-padding': '1x',\n // Auto-border size for sub-components (panels are always vertical)\n '$layout-border-size': '1bw',\n\n // Position based on side prop\n top: {\n '': 0,\n 'side=bottom': 'initial',\n },\n right: {\n '': 0,\n 'side=left': 'initial',\n },\n bottom: {\n '': 0,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=right': 'initial',\n },\n\n // Size handling with CSS-level min/max clamping\n width: {\n '': '$min-size $panel-size $max-size',\n 'side=top \| side=bottom': '100%',\n },\n height: {\n '': '100%',\n 'side=top \| side=bottom': '$min-size $panel-size $max-size',\n },\n\n // Visual styling\n border: {\n 'side=left': 'right',\n 'side=right': 'left',\n 'side=top': 'bottom',\n 'side=bottom': 'top',\n },\n fill: '#white',\n\n // Transition styles - offscreen mod controls slide animation\n transform: {\n '': 'translateX(0) translateY(0)',\n 'offscreen & side=left': 'translateX(-100%)',\n 'offscreen & side=right': 'translateX(100%)',\n 'offscreen & side=top': 'translateY(-100%)',\n 'offscreen & side=bottom': 'translateY(100%)',\n },\n transition: {\n '': 'none',\n 'has-transition': 'transform $transition ease-out',\n },\n },\n});\n\n// Handler is positioned as sibling to panel (in Fragment), relative to Layout\nconst ResizeHandlerElement = tasty({\n qa: 'PanelResizeHandler',\n styles: {\n position: 'absolute',\n\n // Handler size\n width: {\n '': '100%',\n horizontal: `${HANDLER_WIDTH}px`,\n 'disabled & horizontal': '1bw',\n },\n height: {\n '': `${HANDLER_WIDTH}px`,\n horizontal: '100%',\n 'disabled & !horizontal': '1bw',\n },\n\n // Position handler with direct offset (no centering needed)\n top: {\n '': 0,\n 'side=top': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=bottom': 'initial',\n },\n bottom: {\n '': 0,\n 'side=bottom': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=top': 'initial',\n },\n left: {\n '': 0,\n 'side=left': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=right': 'initial',\n },\n right: {\n '': 0,\n 'side=right': `calc($panel-size - ${HANDLER_OFFSET}px)`,\n 'side=left': 'initial',\n },\n\n // Offscreen transforms only (no centering needed with direct offset positioning)\n transform: {\n 'offscreen & side=left': `translateX(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=right': `translateX(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=top': `translateY(calc(-1 * $panel-size - ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n 'offscreen & side=bottom': `translateY(calc($panel-size + ${HANDLER_WIDTH - HANDLER_OFFSET}px))`,\n },\n\n cursor: {\n '': 'row-resize',\n horizontal: 'col-resize',\n disabled: 'not-allowed',\n },\n padding: 0,\n outline: 0,\n boxSizing: 'border-box',\n\n // Transition must match panel for synchronized animation\n transition: {\n '': 'theme',\n 'has-transition': 'transform $transition ease-out, theme',\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 \| focused) & !disabled': '#purple-03',\n },\n border: 0,\n transition: 'theme',\n outline: {\n '': '1bw #primary-text.0',\n 'drag \| focused': '1bw #primary-text',\n },\n outlineOffset: 1,\n },\n\n Drag: {\n display: 'grid',\n gap: '2bw',\n border: 0,\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 \| focused': '#primary-text',\n disabled: '#dark-04',\n },\n },\n },\n});\n\n// Overlay backdrop for overlay mode - covers the content area behind the panel\nconst OverlayBackdrop = tasty({\n qa: 'PanelOverlay',\n styles: {\n position: 'absolute',\n inset: 0,\n // fill: '#white.2',\n backdropFilter: 'invert(.15)',\n cursor: 'pointer',\n opacity: {\n '': 0,\n visible: 1,\n },\n pointerEvents: {\n '': 'none',\n visible: 'auto',\n },\n transition: 'opacity .15s ease-out',\n },\n});\n\ninterface ResizeHandlerProps {\n side: Side;\n isDisabled?: boolean;\n mods?: Record<string, boolean>;\n moveProps: ReturnType<typeof useMove>['moveProps'];\n style?: Record<string, string \| number \| null \| undefined>;\n onDoubleClick?: () => void;\n}\n\nfunction ResizeHandler(props: ResizeHandlerProps) {\n const { side, isDisabled, mods, moveProps, style, onDoubleClick } = props;\n const { hoverProps, isHovered } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const isHorizontal = side === 'left' \|\| side === 'right';\n const localIsHovered = useDebouncedValue(isHovered, 150);\n\n return (\n <ResizeHandlerElement\n {...mergeProps(hoverProps, focusProps, moveProps, {\n mods: {\n hovered: localIsHovered,\n horizontal: isHorizontal,\n disabled: isDisabled,\n focused: isFocusVisible,\n side,\n ...mods,\n },\n style,\n tabIndex: isDisabled ? undefined : 0,\n role: 'separator',\n 'aria-orientation': isHorizontal ? 'vertical' : 'horizontal',\n 'aria-label': `Resize ${side} panel`,\n onDoubleClick: isDisabled ? undefined : onDoubleClick,\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 )}\n </ResizeHandlerElement>\n );\n}\n\n/** Panel rendering mode /\nexport type LayoutPanelMode = 'default' \| 'sticky' \| 'overlay' \| 'dialog';\n\nexport interface CubeLayoutPanelProps extends BaseProps, ContainerStyleProps {\n /* Side of the layout where panel is positioned /\n side: Side;\n /\n Panel rendering mode:\n * - `default`: Standard panel that pushes content aside\n * - `sticky`: Panel floats over content without pushing it\n * - `overlay`: Panel with dismissable backdrop overlay\n * - `dialog`: Panel renders as a modal dialog\n /\n mode?: LayoutPanelMode;\n /* Panel size (width for left/right, height for top/bottom) - controlled /\n size?: number \| string;\n /* Default panel size for uncontrolled state /\n defaultSize?: number \| string;\n /* Minimum panel size /\n minSize?: number \| string;\n /* Maximum panel size /\n maxSize?: number \| string;\n /* Enable resize functionality /\n isResizable?: boolean;\n /* Size change callback /\n onSizeChange?: (size: number) => void;\n /* Controlled open state /\n isOpen?: boolean;\n /* Default open state /\n defaultIsOpen?: boolean;\n /* Open state change callback /\n onOpenChange?: (isOpen: boolean) => void;\n /* Enable slide transition on open/close /\n hasTransition?: boolean;\n /\n Whether the panel can be dismissed by clicking the overlay (overlay mode) or pressing Escape.\n * Only applies to `overlay` and `dialog` modes. Default: true\n /\n isDismissable?: boolean;\n /* Styles for the overlay backdrop in overlay mode /\n overlayStyles?: Styles;\n /\n @deprecated Use `mode=\"dialog\"` instead. Switch to dialog mode (renders panel inside Dialog)\n /\n isDialog?: boolean;\n /* Controlled dialog open state (used with mode=\"dialog\") /\n isDialogOpen?: boolean;\n /* Default dialog open state /\n defaultIsDialogOpen?: boolean;\n /* Dialog open state change callback /\n onDialogOpenChange?: (isOpen: boolean) => void;\n /* Props passed to Dialog component when in dialog mode /\n dialogProps?: Omit<\n CubeDialogContainerProps,\n 'isDismissable' \| 'onDismiss' \| 'isOpen'\n >;\n /* Padding for content areas inside the panel. Default: '1x' /\n contentPadding?: Styles['padding'];\n /* localStorage key for persisting panel size. When provided, size is stored and restored across instances. /\n sizeStorageKey?: string;\n /* Styles for the panel /\n styles?: Styles;\n children?: ReactNode;\n}\n\nfunction LayoutPanel(\n props: CubeLayoutPanelProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const layoutActions = useLayoutActionsContext();\n const layoutState = useLayoutStateContext();\n const layoutRefs = useLayoutRefsContext();\n\n if (!layoutActions \|\| !layoutState \|\| !layoutRefs) {\n throw new Error(\n 'Layout.Panel must be used within a Layout component. ' +\n 'Ensure your panel is rendered inside a <Layout> parent.',\n );\n }\n\n const {\n side = 'left',\n mode: modeProp,\n size: providedSize,\n defaultSize = 280,\n minSize = 200,\n maxSize,\n isResizable = false,\n onSizeChange,\n isOpen: providedIsOpen,\n defaultIsOpen = true,\n onOpenChange,\n hasTransition: hasTransitionProp,\n isDismissable = true,\n overlayStyles,\n // Deprecated prop - use mode=\"dialog\" instead\n isDialog = false,\n isDialogOpen: providedIsDialogOpen,\n defaultIsDialogOpen = false,\n onDialogOpenChange,\n dialogProps,\n contentPadding,\n sizeStorageKey,\n children,\n styles,\n mods,\n ...otherProps\n } = props;\n\n // Resolve mode from prop or deprecated isDialog\n const mode: LayoutPanelMode = modeProp ?? (isDialog ? 'dialog' : 'default');\n const isDialogMode = mode === 'dialog';\n const isOverlayMode = mode === 'overlay';\n const isStickyMode = mode === 'sticky';\n\n // Use prop value if provided, otherwise fall back to context value\n const hasTransition = hasTransitionProp ?? layoutActions.hasTransition;\n\n const combinedRef = useCombinedRefs(ref);\n const prevProvidedSizeRef = useRef(providedSize);\n const isHorizontal = side === 'left' \|\| side === 'right';\n\n // Natural boundary computation\n const { containerWidth, containerHeight } = layoutState;\n const { minContentSize } = layoutActions;\n const containerDimension = isHorizontal ? containerWidth : containerHeight;\n const oppositeSide = getOppositeSide(side);\n const oppositePanelSize = layoutState.panelSizes[oppositeSide];\n const ownInsetOffset = isResizable ? RESIZABLE_INSET_OFFSET : 0;\n const naturalMax = useMemo(\n () =>\n containerDimension > 0\n ? Math.max(\n 0,\n containerDimension -\n oppositePanelSize -\n minContentSize -\n ownInsetOffset,\n )\n : Infinity,\n [containerDimension, oppositePanelSize, minContentSize, ownInsetOffset],\n );\n\n // Panel open state\n const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n const isOpen = providedIsOpen ?? internalIsOpen;\n\n // Dialog open state\n const [internalIsDialogOpen, setInternalIsDialogOpen] =\n useState(defaultIsDialogOpen);\n const dialogOpen = providedIsDialogOpen ?? internalIsDialogOpen;\n\n // Persistent size storage\n const [storedSize, setStoredSize] = useLocalStorage<number \| null>(\n sizeStorageKey ?? null,\n null,\n );\n\n // Resize state\n const [isDragging, setIsDragging] = useState(false);\n const [size, setSize] = useState<number>(() => {\n const initialSize =\n typeof providedSize === 'number'\n ? providedSize\n : storedSize != null\n ? storedSize\n : typeof defaultSize === 'number'\n ? defaultSize\n : 280;\n\n return clampSize(initialSize, minSize, maxSize);\n });\n\n const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);\n\n // Merge styles with contentPadding support\n const finalStyles = useMemo(\n () =>\n mergeStyles(\n styles,\n contentPadding != null ? { '$content-padding': contentPadding } : null,\n extractedStyles,\n ),\n [extractedStyles, contentPadding, styles],\n );\n\n // Resolve user's maxSize to pixels for JS-level clamping.\n // String values (e.g. \"50%\") can only be resolved once we know the container size.\n const resolvedMax = useMemo(() => {\n if (typeof maxSize === 'number') return maxSize;\n if (typeof maxSize === 'string' && containerDimension > 0) {\n return resolveCssSize(maxSize, containerDimension);\n }\n return undefined;\n }, [maxSize, containerDimension]);\n\n // Effective max combines user's maxSize with natural boundary\n const effectiveMax = useMemo(() => {\n const values: number[] = [];\n if (resolvedMax != null) values.push(resolvedMax);\n if (Number.isFinite(naturalMax)) values.push(naturalMax);\n return values.length > 0 ? Math.min(...values) : undefined;\n }, [resolvedMax, naturalMax]);\n\n // Clamp size to min/max constraints (including natural boundaries)\n const clampValue = useCallback(\n (value: number) => clampSize(value, minSize, undefined, effectiveMax),\n [minSize, effectiveMax],\n );\n\n const setContextDragging = layoutActions.setDragging;\n\n const { moveProps } = useMove({\n onMoveStart() {\n if (!isResizable) return;\n setIsDragging(true);\n setContextDragging(true);\n },\n onMove(e) {\n if (!isResizable) return;\n\n let delta: number;\n\n if (e.pointerType === 'keyboard') {\n // Keyboard resize: 10px per step, 50px with Shift\n const step = e.shiftKey ? 50 : 10;\n // For keyboard, deltaX/deltaY are direction indicators (-1, 0, 1)\n const rawDelta = isHorizontal ? e.deltaX : e.deltaY;\n const direction = side === 'right' \|\| side === 'bottom' ? -1 : 1;\n delta = rawDelta step * direction;\n } else {\n // Pointer resize: use exact delta values\n delta = isHorizontal\n ? e.deltaX * (side === 'right' ? -1 : 1)\n : e.deltaY * (side === 'bottom' ? -1 : 1);\n }\n\n setSize((currentSize) => clampValue(currentSize + delta));\n },\n onMoveEnd() {\n setIsDragging(false);\n setContextDragging(false);\n // Round to integer on release and notify parent\n setSize((currentSize) => {\n const finalSize = Math.round(clampValue(currentSize));\n // Call onSizeChange synchronously to ensure parent state is updated\n onSizeChange?.(finalSize);\n // Persist to localStorage if key is provided\n setStoredSize(finalSize);\n return finalSize;\n });\n },\n });\n\n // Sync provided size with internal state (only when providedSize actually changes)\n // This prevents resetting size when only isDragging changes (which would cause a flash)\n useEffect(() => {\n if (prevProvidedSizeRef.current !== providedSize) {\n prevProvidedSizeRef.current = providedSize;\n if (typeof providedSize === 'number' && !isDragging) {\n setSize(clampValue(providedSize));\n }\n }\n }, [providedSize, isDragging, clampValue]);\n\n // Auto-shrink: re-clamp when container resizes or opposite panel changes\n useEffect(() => {\n if (!isDragging && containerDimension > 0) {\n setSize((prev) => {\n const clamped = clampValue(prev);\n\n if (clamped !== prev) {\n onSizeChange?.(Math.round(clamped));\n setStoredSize(Math.round(clamped));\n }\n\n return clamped;\n });\n }\n }, [isDragging, clampValue, containerDimension]);\n\n // Register panel with layout context\n // Include handler outside portion (minus border overlap) for proper content inset\n // In sticky, overlay, and dialog modes, panel doesn't push content, so size is 0\n // NOTE: We intentionally use `size` (not `clampValue(size)`) here to avoid a feedback\n // loop. `clampValue` depends on the opposite panel's context size, so clamping here\n // would create a period-2 oscillation through shared context. CSS --max-size handles\n // visual clamping immediately; the auto-shrink effect converges `size` state.\n const effectivePanelSize = isOpen && mode === 'default' ? size : 0;\n const effectiveInsetSize = Math.round(\n effectivePanelSize +\n (isResizable && effectivePanelSize > 0 ? RESIZABLE_INSET_OFFSET : 0),\n );\n\n const { registerPanel, unregisterPanel, updatePanelSize } = layoutActions;\n const { isReady } = layoutState;\n\n // Track the last reported size to prevent unnecessary updates\n const lastSizeRef = useRef<number>(effectiveInsetSize);\n\n // Register on mount, unregister on unmount\n // Using useLayoutEffect ensures registration happens before browser paint\n useLayoutEffect(() => {\n registerPanel(side, lastSizeRef.current);\n\n return () => {\n unregisterPanel(side);\n };\n }, [side, registerPanel, unregisterPanel]);\n\n // Update size when it changes (after initial mount)\n // Using useLayoutEffect ensures size updates happen before browser paint\n useLayoutEffect(() => {\n if (lastSizeRef.current !== effectiveInsetSize) {\n lastSizeRef.current = effectiveInsetSize;\n updatePanelSize(side, effectiveInsetSize);\n }\n }, [side, effectiveInsetSize, updatePanelSize]);\n\n const handleOpenChange = useCallback(\n (newIsOpen: boolean) => {\n setInternalIsOpen(newIsOpen);\n onOpenChange?.(newIsOpen);\n },\n [onOpenChange],\n );\n\n // Dismiss handler for overlay mode (click on overlay)\n const handleDismiss = useCallback(() => {\n if (isDismissable) {\n handleOpenChange(false);\n }\n }, [isDismissable, handleOpenChange]);\n\n // Register overlay panel with Layout context for coordinated dismissal\n const { registerOverlayPanel } = layoutActions;\n\n useEffect(() => {\n // Only register if in overlay mode, open, and dismissable\n if (isOverlayMode && isOpen && isDismissable) {\n const unregister = registerOverlayPanel(() => handleOpenChange(false));\n return unregister;\n }\n }, [\n isOverlayMode,\n isOpen,\n isDismissable,\n registerOverlayPanel,\n handleOpenChange,\n ]);\n\n const handleDialogOpenChange = useCallback(\n (newIsOpen: boolean) => {\n setInternalIsDialogOpen(newIsOpen);\n onDialogOpenChange?.(newIsOpen);\n },\n [onDialogOpenChange],\n );\n\n // Panel context value for child components (like LayoutPanelHeader)\n const panelContextValue = useMemo(\n () => ({\n onOpenChange: handleOpenChange,\n isOpen,\n }),\n [handleOpenChange, isOpen],\n );\n\n // Dialog mode context value - uses dialog state instead of panel state\n const dialogPanelContextValue = useMemo(\n () => ({\n onOpenChange: handleDialogOpenChange,\n isOpen: dialogOpen,\n }),\n [handleDialogOpenChange, dialogOpen],\n );\n\n const panelMods = useMemo(\n () => ({\n side,\n drag: isDragging,\n horizontal: isHorizontal,\n // Only enable transition after layout is ready to prevent initial animation\n 'has-transition': hasTransition && isReady,\n ...mods,\n }),\n [side, isDragging, isHorizontal, hasTransition, isReady, mods],\n );\n\n // Build --max-size CSS variable combining user maxSize and natural boundary\n const maxSizeCss = useMemo(() => {\n const parts: string[] = [];\n\n if (maxSize != null) {\n parts.push(typeof maxSize === 'number' ? `${maxSize}px` : maxSize);\n }\n\n if (containerDimension > 0 && Number.isFinite(naturalMax)) {\n parts.push(`${naturalMax}px`);\n }\n\n if (parts.length === 0) return undefined;\n return parts.length === 1 ? parts[0] : `min(${parts.join(', ')})`;\n }, [maxSize, naturalMax, containerDimension]);\n\n const panelStyle = useMemo(\n () => ({\n '--panel-size': `${size}px`,\n '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n '--max-size': maxSizeCss,\n }),\n [size, minSize, maxSizeCss],\n );\n\n // Combine refs for panel element\n const panelRefCallback = useCallback(\n (node: HTMLDivElement \| null, transitionRef?: RefCallback<HTMLElement>) => {\n // Update the combined ref\n (combinedRef as { current: HTMLDivElement \| null }).current = node;\n // Call transition ref if provided\n transitionRef?.(node);\n },\n [combinedRef],\n );\n\n // Reset to default size on double-click\n const handleResetSize = useCallback(() => {\n const resetSize =\n typeof defaultSize === 'number' ? defaultSize : parseInt(defaultSize, 10);\n const clampedSize = clampValue(resetSize \|\| 280);\n setSize(clampedSize);\n onSizeChange?.(clampedSize);\n setStoredSize(clampedSize);\n }, [defaultSize, clampValue, onSizeChange, setStoredSize]);\n\n const renderPanelContent = (\n offscreen = false,\n transitionRef?: RefCallback<HTMLElement>,\n ) => {\n const showOverlay = isOverlayMode && !offscreen;\n\n return (\n <>\n {/* Overlay backdrop for overlay mode */}\n {isOverlayMode && (\n <OverlayBackdrop\n mods={{ visible: showOverlay }}\n styles={overlayStyles}\n aria-hidden=\"true\"\n onClick={handleDismiss}\n />\n )}\n <PanelElement\n ref={(node: HTMLDivElement \| null) =>\n panelRefCallback(node, transitionRef)\n }\n {...filterBaseProps(otherProps, { eventProps: true })}\n mods={{ ...panelMods, offscreen }}\n styles={finalStyles}\n style={panelStyle}\n data-side={side}\n >\n <LayoutPanelContext.Provider value={panelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </PanelElement>\n {isResizable && (\n <ResizeHandler\n side={side}\n isDisabled={!isResizable}\n mods={{\n drag: isDragging,\n offscreen,\n 'has-transition': hasTransition && isReady,\n }}\n moveProps={moveProps}\n style={panelStyle}\n onDoubleClick={handleResetSize}\n />\n )}\n </>\n );\n };\n\n // Dialog mode - uses its own portal via DialogContainer\n if (isDialogMode) {\n return (\n <DialogContainer\n isOpen={dialogOpen}\n isDismissable={isDismissable}\n onDismiss={() => handleDialogOpenChange(false)}\n {...dialogProps}\n >\n <Dialog isDismissable={false}>\n <LayoutPanelContext.Provider value={dialogPanelContextValue}>\n <LayoutContextReset>{children}</LayoutContextReset>\n </LayoutPanelContext.Provider>\n </Dialog>\n </DialogContainer>\n );\n }\n\n // Wait for portal container to be ready before rendering\n if (!layoutRefs.isPanelContainerReady) {\n return null;\n }\n\n const portalContainer = layoutRefs.panelContainerRef.current!;\n\n // Panel with transition - portal to panel container\n if (hasTransition) {\n return createPortal(\n <DisplayTransition isShown={isOpen} animateOnMount={false}>\n {({ isShown, ref: transitionRef }) =>\n renderPanelContent(!isShown, transitionRef)\n }\n </DisplayTransition>,\n portalContainer,\n );\n }\n\n // Simple panel (no transition) - portal to panel container\n if (!isOpen) return null;\n\n return createPortal(renderPanelContent(false), portalContainer);\n}\n\nconst _LayoutPanel = forwardRef(LayoutPanel);\n\n_LayoutPanel.displayName = 'Layout.Panel';\n\nexport { _LayoutPanel as LayoutPanel };\n"],"mappings":"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"}

package/dist/components/content/Layout/LayoutPanelHeader.js CHANGED Viewed

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { useDialogContext } from "../../overlays/Dialog/context.js";
 import { useLayoutPanelContext } from "./LayoutContext.js";
-import { CONTAINER_STYLES, extractStyles, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/content/Layout/LayoutPanelHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutPanelHeader.js","names":["Item"],"sources":["../../../../src/components/content/Layout/LayoutPanelHeader.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n ~~extractStyles,\n~~ tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react';\n\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { useDialogContext } from '../../overlays/Dialog/context';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nimport { useLayoutPanelContext } from './LayoutContext';\n\nconst PanelHeaderElement = tasty(Item, {\n qa: 'PanelHeader',\n shape: 'sharp',\n type: 'header',\n styles: {\n border: 'bottom',\n boxSizing: 'content-box',\n\n '$inline-padding': '($content-padding, 1x)',\n },\n});\n\nexport interface CubeLayoutPanelHeaderProps\n extends Omit<BaseProps, 'theme'>,\n ContainerStyleProps,\n CubeItemProps {\n /** Panel title /\n title?: ReactNode;\n /* Title heading level (affects semantics, not visual) /\n level?: 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n /* Show close button /\n isClosable?: boolean;\n /* Close button click handler */\n onClose?: () => void;\n}\n\nfunction LayoutPanelHeader(\n props: CubeLayoutPanelHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n title,\n level = 3,\n isClosable,\n onClose,\n actions,\n children,\n ...otherProps\n } = props;\n\n // Extract container styles\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n // Access dialog context if in dialog mode\n const dialogContext = useDialogContext();\n // Access panel context to update panel open state\n const panelContext = useLayoutPanelContext();\n\n // Close handler that works for both panel and dialog modes\n const handleClose = useCallback(() => {\n // Call user-provided onClose callback\n onClose?.();\n // Update panel's internal open state\n panelContext?.onOpenChange(false);\n // If in dialog mode, also close the dialog\n dialogContext?.onClose?.();\n }, [onClose, panelContext, dialogContext]);\n\n const closeAction = isClosable ? (\n <ItemAction\n icon={<CloseIcon />}\n aria-label=\"Close panel\"\n onPress={handleClose}\n />\n ) : null;\n\n const finalActions = actions ?? closeAction;\n\n return (\n <PanelHeaderElement\n ref={ref}\n level={level}\n size=\"large\"\n actions={finalActions}\n styles={styles}\n {...otherProps}\n >\n {title ?? children}\n </PanelHeaderElement>\n );\n}\n\nconst _LayoutPanelHeader = forwardRef(LayoutPanelHeader);\n\n_LayoutPanelHeader.displayName = 'Layout.PanelHeader';\n\nexport { _LayoutPanelHeader as LayoutPanelHeader };\n"],"mappings":"~~;;;;;;;;;;;~~AAgBA,MAAM,qBAAqB,MAAMA,OAAM;CACrC,IAAI;CACJ,OAAO;CACP,MAAM;CACN,QAAQ;EACN,QAAQ;EACR,WAAW;EAEX,mBAAmB;EACpB;CACF,CAAC;AAgBF,SAAS,kBACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,YACA,SACA,SACA,UACA,GAAG,eACD;CAGJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAG1D,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,eAAe,uBAAuB;CAG5C,MAAM,cAAc,kBAAkB;AAEpC,aAAW;AAEX,gBAAc,aAAa,MAAM;AAEjC,iBAAe,WAAW;IACzB;EAAC;EAAS;EAAc;EAAc,CAAC;AAY1C,QACE,oBAAC;EACM;EACE;EACP,MAAK;EACL,SAPiB,YARD,aAClB,oBAAC;GACC,MAAM,oBAAC,cAAY;GACnB,cAAW;GACX,SAAS;IACT,GACA;EAUQ;EACR,GAAI;YAEH,SAAS;GACS;;AAIzB,MAAM,qBAAqB,WAAW,kBAAkB;AAExD,mBAAmB,cAAc"}
1	+ {"version":3,"file":"LayoutPanelHeader.js","names":["Item"],"sources":["../../../../src/components/content/Layout/LayoutPanelHeader.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react';\n\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { useDialogContext } from '../../overlays/Dialog/context';\nimport { CubeItemProps, Item } from '../Item/Item';\n\nimport { useLayoutPanelContext } from './LayoutContext';\n\nconst PanelHeaderElement = tasty(Item, {\n qa: 'PanelHeader',\n shape: 'sharp',\n type: 'header',\n styles: {\n border: 'bottom',\n boxSizing: 'content-box',\n\n '$inline-padding': '($content-padding, 1x)',\n },\n});\n\nexport interface CubeLayoutPanelHeaderProps\n extends Omit<BaseProps, 'theme'>,\n ContainerStyleProps,\n CubeItemProps {\n /** Panel title /\n title?: ReactNode;\n /* Title heading level (affects semantics, not visual) /\n level?: 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n /* Show close button /\n isClosable?: boolean;\n /* Close button click handler */\n onClose?: () => void;\n}\n\nfunction LayoutPanelHeader(\n props: CubeLayoutPanelHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n title,\n level = 3,\n isClosable,\n onClose,\n actions,\n children,\n ...otherProps\n } = props;\n\n // Extract container styles\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n // Access dialog context if in dialog mode\n const dialogContext = useDialogContext();\n // Access panel context to update panel open state\n const panelContext = useLayoutPanelContext();\n\n // Close handler that works for both panel and dialog modes\n const handleClose = useCallback(() => {\n // Call user-provided onClose callback\n onClose?.();\n // Update panel's internal open state\n panelContext?.onOpenChange(false);\n // If in dialog mode, also close the dialog\n dialogContext?.onClose?.();\n }, [onClose, panelContext, dialogContext]);\n\n const closeAction = isClosable ? (\n <ItemAction\n icon={<CloseIcon />}\n aria-label=\"Close panel\"\n onPress={handleClose}\n />\n ) : null;\n\n const finalActions = actions ?? closeAction;\n\n return (\n <PanelHeaderElement\n ref={ref}\n level={level}\n size=\"large\"\n actions={finalActions}\n styles={styles}\n {...otherProps}\n >\n {title ?? children}\n </PanelHeaderElement>\n );\n}\n\nconst _LayoutPanelHeader = forwardRef(LayoutPanelHeader);\n\n_LayoutPanelHeader.displayName = 'Layout.PanelHeader';\n\nexport { _LayoutPanelHeader as LayoutPanelHeader };\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,qBAAqB,MAAMA,OAAM;CACrC,IAAI;CACJ,OAAO;CACP,MAAM;CACN,QAAQ;EACN,QAAQ;EACR,WAAW;EAEX,mBAAmB;EACpB;CACF,CAAC;AAgBF,SAAS,kBACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,YACA,SACA,SACA,UACA,GAAG,eACD;CAGJ,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAG1D,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,eAAe,uBAAuB;CAG5C,MAAM,cAAc,kBAAkB;AAEpC,aAAW;AAEX,gBAAc,aAAa,MAAM;AAEjC,iBAAe,WAAW;IACzB;EAAC;EAAS;EAAc;EAAc,CAAC;AAY1C,QACE,oBAAC;EACM;EACE;EACP,MAAK;EACL,SAPiB,YARD,aAClB,oBAAC;GACC,MAAM,oBAAC,cAAY;GACnB,cAAW;GACX,SAAS;IACT,GACA;EAUQ;EACR,GAAI;YAEH,SAAS;GACS;;AAIzB,MAAM,qBAAqB,WAAW,kBAAkB;AAExD,mBAAmB,cAAc"}

package/dist/components/content/Layout/LayoutToolbar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/Layout/hooks/useTinyScrollbar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/components/content/Layout/hooks/useTinyScrollbar.ts

package/dist/components/content/Layout/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { LayoutActionsContext, LayoutContextReset, LayoutPanelContext, LayoutRefsContext, LayoutStateContext, useLayoutActionsContext, useLayoutPanelContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";

package/dist/components/content/Layout/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 //#region src/components/content/Layout/utils.ts
 /**
 * Clamps a size value within min/max constraints.

package/dist/components/content/Paragraph.js CHANGED Viewed

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
-import { CONTAINER_STYLES, TEXT_STYLES, extractStyles } from "@tenphi/tasty";
+import { CONTAINER_STYLES, TEXT_STYLES } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/content/Paragraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Paragraph.js","names":["Text"],"sources":["../../../src/components/content/Paragraph.tsx"],"sourcesContent":["import {\n CONTAINER_STYLES,\n ContainerStyleProps,\n ~~extractStyles,\n~~ Styles,\n TEXT_STYLES,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { CubeTextProps, Text } from './Text';\n\nconst DEFAULT_STYLES: Styles = {\n preset: 'p3',\n color: '#dark-02',\n display: 'block',\n};\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nexport interface CubeParagraphProps\n extends CubeTextProps,\n ContainerStyleProps {}\n\nexport const Paragraph = forwardRef<HTMLElement, CubeParagraphProps>(\n function Paragraph(props, ref) {\n const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);\n\n return <Text as=\"p\" qa=\"Paragraph\" {...props} ref={ref} styles={styles} />;\n },\n);\n"],"mappings":"~~;;;;;;;AAWA~~,MAAM,iBAAyB;CAC7B,QAAQ;CACR,OAAO;CACP,SAAS;CACV;AAED,MAAM,cAAc,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAMzD,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;CAC7B,MAAM,SAAS,cAAc,OAAO,aAAa,eAAe;AAEhE,QAAO,oBAACA;EAAK,IAAG;EAAI,IAAG;EAAY,GAAI;EAAY;EAAa;GAAU;EAE7E"}
1	+ {"version":3,"file":"Paragraph.js","names":["Text"],"sources":["../../../src/components/content/Paragraph.tsx"],"sourcesContent":["import {\n CONTAINER_STYLES,\n ContainerStyleProps,\n Styles,\n TEXT_STYLES,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nimport { CubeTextProps, Text } from './Text';\n\nconst DEFAULT_STYLES: Styles = {\n preset: 'p3',\n color: '#dark-02',\n display: 'block',\n};\n\nconst STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];\n\nexport interface CubeParagraphProps\n extends CubeTextProps,\n ContainerStyleProps {}\n\nexport const Paragraph = forwardRef<HTMLElement, CubeParagraphProps>(\n function Paragraph(props, ref) {\n const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);\n\n return <Text as=\"p\" qa=\"Paragraph\" {...props} ref={ref} styles={styles} />;\n },\n);\n"],"mappings":";;;;;;;;AAYA,MAAM,iBAAyB;CAC7B,QAAQ;CACR,OAAO;CACP,SAAS;CACV;AAED,MAAM,cAAc,CAAC,GAAG,kBAAkB,GAAG,YAAY;AAMzD,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;CAC7B,MAAM,SAAS,cAAc,OAAO,aAAa,eAAe;AAEhE,QAAO,oBAACA;EAAK,IAAG;EAAI,IAAG;EAAY,GAAI;EAAY;EAAa;GAAU;EAE7E"}

package/dist/components/content/Placeholder/Placeholder.js CHANGED Viewed

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/content/Placeholder/Placeholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Placeholder.js","names":[],"sources":["../../../../src/components/content/Placeholder/Placeholder.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n ~~extractStyles,\n~~ filterBaseProps,\n keyframes,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\n// Create the placeholder animation using keyframes helper\nconst placeholderAnimation = keyframes({\n '0%': {\n 'background-position': '0 0',\n },\n '100%': {\n 'background-position': '$placeholder-animation-size 0',\n },\n});\n\nconst StyledPlaceholder = tasty({\n role: 'alert',\n 'aria-live': 'polite',\n 'aria-label': 'Content is loading',\n styles: {\n display: 'block',\n fill: '#dark.10',\n height: '2x',\n opacity: '.35',\n aspectRatio: {\n '': 'initial',\n circle: '1 / 1',\n },\n radius: {\n '': '1r',\n circle: 'round',\n },\n\n // CSS custom properties for animation\n '$placeholder-animation-time': '1.4s',\n '$placeholder-animation-size': 'calc((180rem + 100vw) / 3)',\n\n // Base background styling\n backgroundRepeat: 'repeat',\n backgroundSize: '$placeholder-animation-size',\n backgroundColor: '#dark.15',\n\n // Animated state styling\n animation: {\n '': 'none',\n animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`,\n },\n backgroundImage: {\n '': 'none',\n animated: `linear-gradient(\n 135deg,\n #dark.15 0%,\n #dark.15 5%,\n #dark.0 35%,\n #dark-03.2 50%,\n #dark-03.0 65%,\n #dark.15 95%,\n #dark.15 100%\n )`,\n },\n },\n});\n\nexport interface CubePlaceholderProps extends BaseProps, ContainerStyleProps {\n size?: Styles['fontSize'];\n circle?: boolean;\n isStatic?: boolean;\n}\n\nexport const Placeholder = forwardRef(function Placeholder(\n allProps: CubePlaceholderProps,\n ref,\n) {\n let { size = '2x', isStatic, circle, ...props } = allProps;\n\n let styles = extractStyles(props, CONTAINER_STYLES);\n\n return (\n <StyledPlaceholder\n role=\"region\"\n {...filterBaseProps(props, { eventProps: true })}\n ref={ref}\n mods={{ animated: !isStatic, circle }}\n styles={{\n height: size,\n ...styles,\n }}\n />\n );\n});\n"],"mappings":"~~;;;;;;AAaA~~,MAAM,uBAAuB,UAAU;CACrC,MAAM,EACJ,uBAAuB,OACxB;CACD,QAAQ,EACN,uBAAuB,iCACxB;CACF,CAAC;AAEF,MAAM,oBAAoB,MAAM;CAC9B,MAAM;CACN,aAAa;CACb,cAAc;CACd,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,aAAa;GACX,IAAI;GACJ,QAAQ;GACT;EACD,QAAQ;GACN,IAAI;GACJ,QAAQ;GACT;EAGD,+BAA+B;EAC/B,+BAA+B;EAG/B,kBAAkB;EAClB,gBAAgB;EAChB,iBAAiB;EAGjB,WAAW;GACT,IAAI;GACJ,UAAU,GAAG,qBAAqB;GACnC;EACD,iBAAiB;GACf,IAAI;GACJ,UAAU;;;;;;;;;;GAUX;EACF;CACF,CAAC;AAQF,MAAa,cAAc,WAAW,SAAS,YAC7C,UACA,KACA;CACA,IAAI,EAAE,OAAO,MAAM,UAAU,QAAQ,GAAG,UAAU;CAElD,IAAI,SAAS,cAAc,OAAO,iBAAiB;AAEnD,QACE,oBAAC;EACC,MAAK;EACL,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACL,MAAM;GAAE,UAAU,CAAC;GAAU;GAAQ;EACrC,QAAQ;GACN,QAAQ;GACR,GAAG;GACJ;GACD;EAEJ"}
1	+ {"version":3,"file":"Placeholder.js","names":[],"sources":["../../../../src/components/content/Placeholder/Placeholder.tsx"],"sourcesContent":["import {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n keyframes,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\n\n// Create the placeholder animation using keyframes helper\nconst placeholderAnimation = keyframes({\n '0%': {\n 'background-position': '0 0',\n },\n '100%': {\n 'background-position': '$placeholder-animation-size 0',\n },\n});\n\nconst StyledPlaceholder = tasty({\n role: 'alert',\n 'aria-live': 'polite',\n 'aria-label': 'Content is loading',\n styles: {\n display: 'block',\n fill: '#dark.10',\n height: '2x',\n opacity: '.35',\n aspectRatio: {\n '': 'initial',\n circle: '1 / 1',\n },\n radius: {\n '': '1r',\n circle: 'round',\n },\n\n // CSS custom properties for animation\n '$placeholder-animation-time': '1.4s',\n '$placeholder-animation-size': 'calc((180rem + 100vw) / 3)',\n\n // Base background styling\n backgroundRepeat: 'repeat',\n backgroundSize: '$placeholder-animation-size',\n backgroundColor: '#dark.15',\n\n // Animated state styling\n animation: {\n '': 'none',\n animated: `${placeholderAnimation} $placeholder-animation-time linear infinite`,\n },\n backgroundImage: {\n '': 'none',\n animated: `linear-gradient(\n 135deg,\n #dark.15 0%,\n #dark.15 5%,\n #dark.0 35%,\n #dark-03.2 50%,\n #dark-03.0 65%,\n #dark.15 95%,\n #dark.15 100%\n )`,\n },\n },\n});\n\nexport interface CubePlaceholderProps extends BaseProps, ContainerStyleProps {\n size?: Styles['fontSize'];\n circle?: boolean;\n isStatic?: boolean;\n}\n\nexport const Placeholder = forwardRef(function Placeholder(\n allProps: CubePlaceholderProps,\n ref,\n) {\n let { size = '2x', isStatic, circle, ...props } = allProps;\n\n let styles = extractStyles(props, CONTAINER_STYLES);\n\n return (\n <StyledPlaceholder\n role=\"region\"\n {...filterBaseProps(props, { eventProps: true })}\n ref={ref}\n mods={{ animated: !isStatic, circle }}\n styles={{\n height: size,\n ...styles,\n }}\n />\n );\n});\n"],"mappings":";;;;;;;AAcA,MAAM,uBAAuB,UAAU;CACrC,MAAM,EACJ,uBAAuB,OACxB;CACD,QAAQ,EACN,uBAAuB,iCACxB;CACF,CAAC;AAEF,MAAM,oBAAoB,MAAM;CAC9B,MAAM;CACN,aAAa;CACb,cAAc;CACd,QAAQ;EACN,SAAS;EACT,MAAM;EACN,QAAQ;EACR,SAAS;EACT,aAAa;GACX,IAAI;GACJ,QAAQ;GACT;EACD,QAAQ;GACN,IAAI;GACJ,QAAQ;GACT;EAGD,+BAA+B;EAC/B,+BAA+B;EAG/B,kBAAkB;EAClB,gBAAgB;EAChB,iBAAiB;EAGjB,WAAW;GACT,IAAI;GACJ,UAAU,GAAG,qBAAqB;GACnC;EACD,iBAAiB;GACf,IAAI;GACJ,UAAU;;;;;;;;;;GAUX;EACF;CACF,CAAC;AAQF,MAAa,cAAc,WAAW,SAAS,YAC7C,UACA,KACA;CACA,IAAI,EAAE,OAAO,MAAM,UAAU,QAAQ,GAAG,UAAU;CAElD,IAAI,SAAS,cAAc,OAAO,iBAAiB;AAEnD,QACE,oBAAC;EACC,MAAK;EACL,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACL,MAAM;GAAE,UAAU,CAAC;GAAU;GAAQ;EACrC,QAAQ;GACN,QAAQ;GACR,GAAG;GACJ;GACD;EAEJ"}

package/dist/components/content/PrismCode/PrismCode.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js CHANGED Viewed

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Title } from "../Title.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconAlertTriangleFilled, IconCircleCheckFilled, IconCircleXFilled, IconInfoCircleFilled } from "@tabler/icons-react";

package/dist/components/content/Result/Result.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Result.js","names":["Title"],"sources":["../../../../src/components/content/Result/Result.tsx"],"sourcesContent":["import {\n IconAlertTriangleFilled,\n IconCircleCheckFilled,\n IconCircleXFilled,\n IconInfoCircleFilled,\n} from '@tabler/icons-react';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n ~~extractStyles,\n~~ filterBaseProps,\n tasty,\n} from '@tenphi/tasty';\nimport { ComponentType, forwardRef, ReactNode, useMemo } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react';\nimport { Title } from '../Title';\n\nexport interface CubeResultProps extends BaseProps, ContainerStyleProps {\n /** Additional block content. For example, a set of buttons /\n children?: ReactNode;\n /* Custom icon element /\n icon?: ReactNode;\n /\n Result status from ready-made templates\n * @default 'info'\n /\n status?: CubeResultStatus;\n /\n The subTitle\n * @deprecated The subTitle prop is deprecated and will be removed in next major release. consider using subtitle instead\n /\n subTitle?: ReactNode;\n /\n Subtitle of the Result component\n /\n subtitle?: ReactNode;\n /* The title /\n title?: ReactNode;\n /* Whether the result component has a compact presentation */\n isCompact?: boolean;\n}\n\nexport type CubeResultStatus =\n \| 'success'\n \| 'error'\n \| 'info'\n \| 'warning'\n \| 404\n \| 403\n \| 500;\n\ntype StatusIconMap = Record<\n CubeResultStatus,\n {\n color: string;\n component: ComponentType;\n }\n>;\n\nconst Container = tasty({\n qa: 'ResultContainer',\n as: 'section',\n styles: {\n display: {\n '': 'flex',\n compact: 'grid',\n },\n gridAreas: '\"icon title\" \"content content\"',\n flow: 'column',\n placeContent: {\n '': 'center',\n compact: 'start',\n },\n placeItems: {\n '': 'center',\n compact: 'start',\n },\n gap: {\n '': '3x',\n compact: '2x 1x',\n },\n padding: {\n '': '6x 4x',\n compact: '0',\n },\n textAlign: {\n '': 'center',\n compact: 'left',\n },\n '--icon-size': '6x',\n\n Icon: {\n $: '>',\n display: 'grid',\n gridArea: 'icon',\n },\n\n Content: {\n $: '>',\n gridArea: 'content',\n display: 'block',\n },\n\n Title: {\n $: '>',\n gridArea: 'title',\n display: 'flex',\n flow: 'column',\n placeItems: 'inherit',\n gap: '1x',\n placeSelf: 'center',\n },\n },\n});\n\nconst statusIconMap: StatusIconMap = {\n success: {\n color: 'success',\n component: () => <IconCircleCheckFilled />,\n },\n error: {\n color: 'danger',\n component: () => <IconCircleXFilled />,\n },\n info: {\n color: 'purple',\n component: () => <IconInfoCircleFilled />,\n },\n warning: {\n color: 'warning',\n component: () => <IconAlertTriangleFilled />,\n },\n 404: {\n color: 'purple',\n component: () => {\n // TODO: Needs to be implemented in the future\n return null;\n },\n },\n 403: {\n color: 'purple',\n component: () => {\n // TODO: Needs to be implemented in the future\n return null;\n },\n },\n 500: {\n color: 'purple',\n component: () => {\n // TODO: Needs to be implemented in the future\n return null;\n },\n },\n};\n\nfunction Result(props: CubeResultProps, ref) {\n let {\n children,\n isCompact,\n icon,\n status,\n subTitle,\n subtitle,\n title,\n ...otherProps\n } = props;\n\n subtitle = subtitle ?? subTitle;\n\n if (icon && status) {\n console.warn(\n 'Don\\'t use \"icon\" and \"status\" together, it can lead to possible errors.',\n );\n }\n\n const iconNode = useMemo(() => {\n if (icon) {\n return icon;\n }\n\n const { color, component: Component } =\n status && statusIconMap.hasOwnProperty(status)\n ? statusIconMap[status]\n : statusIconMap.info;\n\n return (\n <div data-element=\"Icon\" style={{ color: `var(--${color}-color)` }}>\n <Component data-element=\"Icon\" />\n </div>\n );\n }, [icon, status]);\n\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n return (\n <Container\n {...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {\n mods: { compact: isCompact },\n })}\n ref={ref}\n styles={styles}\n >\n {iconNode}\n {(title \|\| subtitle) && (\n <div data-element=\"Title\">\n {wrapNodeIfPlain(title, () => (\n <Title level={2} preset={isCompact ? 'h5' : 'h4'}>\n {title}\n </Title>\n ))}\n {wrapNodeIfPlain(subtitle, () => (\n <Title level={3} preset={isCompact ? 't3m' : 't2m'}>\n {subtitle}\n </Title>\n ))}\n </div>\n )}\n {children && <div data-element=\"Content\">{children}</div>}\n </Container>\n );\n}\n\nconst _Result = forwardRef(Result);\n\n_Result.displayName = 'Result';\n\nexport { _Result as Result };\n"],"mappings":"~~;;;;;;;;;;~~AA6DA,MAAM,YAAY,MAAM;CACtB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,WAAW;EACX,MAAM;EACN,cAAc;GACZ,IAAI;GACJ,SAAS;GACV;EACD,YAAY;GACV,IAAI;GACJ,SAAS;GACV;EACD,KAAK;GACH,IAAI;GACJ,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,WAAW;GACT,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EAEf,MAAM;GACJ,GAAG;GACH,SAAS;GACT,UAAU;GACX;EAED,SAAS;GACP,GAAG;GACH,UAAU;GACV,SAAS;GACV;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,WAAW;GACZ;EACF;CACF,CAAC;AAEF,MAAM,gBAA+B;CACnC,SAAS;EACP,OAAO;EACP,iBAAiB,oBAAC,0BAAwB;EAC3C;CACD,OAAO;EACL,OAAO;EACP,iBAAiB,oBAAC,sBAAoB;EACvC;CACD,MAAM;EACJ,OAAO;EACP,iBAAiB,oBAAC,yBAAuB;EAC1C;CACD,SAAS;EACP,OAAO;EACP,iBAAiB,oBAAC,4BAA0B;EAC7C;CACD,KAAK;EACH,OAAO;EACP,iBAAiB;AAEf,UAAO;;EAEV;CACD,KAAK;EACH,OAAO;EACP,iBAAiB;AAEf,UAAO;;EAEV;CACD,KAAK;EACH,OAAO;EACP,iBAAiB;AAEf,UAAO;;EAEV;CACF;AAED,SAAS,OAAO,OAAwB,KAAK;CAC3C,IAAI,EACF,UACA,WACA,MACA,QACA,UACA,UACA,OACA,GAAG,eACD;AAEJ,YAAW,YAAY;AAEvB,KAAI,QAAQ,OACV,SAAQ,KACN,8EACD;CAGH,MAAM,WAAW,cAAc;AAC7B,MAAI,KACF,QAAO;EAGT,MAAM,EAAE,OAAO,WAAW,cACxB,UAAU,cAAc,eAAe,OAAO,GAC1C,cAAc,UACd,cAAc;AAEpB,SACE,oBAAC;GAAI,gBAAa;GAAO,OAAO,EAAE,OAAO,SAAS,MAAM,UAAU;aAChE,oBAAC,aAAU,gBAAa,SAAS;IAC7B;IAEP,CAAC,MAAM,OAAO,CAAC;CAElB,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,qBAAC;EACC,GAAI,WAAW,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC,EAAE,EAChE,MAAM,EAAE,SAAS,WAAW,EAC7B,CAAC;EACG;EACG;;GAEP;IACC,SAAS,aACT,qBAAC;IAAI,gBAAa;eACf,gBAAgB,aACf,oBAACA;KAAM,OAAO;KAAG,QAAQ,YAAY,OAAO;eACzC;MACK,CACR,EACD,gBAAgB,gBACf,oBAACA;KAAM,OAAO;KAAG,QAAQ,YAAY,QAAQ;eAC1C;MACK,CACR;KACE;GAEP,YAAY,oBAAC;IAAI,gBAAa;IAAW;KAAe;;GAC/C;;AAIhB,MAAM,UAAU,WAAW,OAAO;AAElC,QAAQ,cAAc"}
1	+ {"version":3,"file":"Result.js","names":["Title"],"sources":["../../../../src/components/content/Result/Result.tsx"],"sourcesContent":["import {\n IconAlertTriangleFilled,\n IconCircleCheckFilled,\n IconCircleXFilled,\n IconInfoCircleFilled,\n} from '@tabler/icons-react';\nimport {\n BaseProps,\n CONTAINER_STYLES,\n ContainerStyleProps,\n filterBaseProps,\n tasty,\n} from '@tenphi/tasty';\nimport { ComponentType, forwardRef, ReactNode, useMemo } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { Title } from '../Title';\n\nexport interface CubeResultProps extends BaseProps, ContainerStyleProps {\n /** Additional block content. For example, a set of buttons /\n children?: ReactNode;\n /* Custom icon element /\n icon?: ReactNode;\n /\n Result status from ready-made templates\n * @default 'info'\n /\n status?: CubeResultStatus;\n /\n The subTitle\n * @deprecated The subTitle prop is deprecated and will be removed in next major release. consider using subtitle instead\n /\n subTitle?: ReactNode;\n /\n Subtitle of the Result component\n /\n subtitle?: ReactNode;\n /* The title /\n title?: ReactNode;\n /* Whether the result component has a compact presentation */\n isCompact?: boolean;\n}\n\nexport type CubeResultStatus =\n \| 'success'\n \| 'error'\n \| 'info'\n \| 'warning'\n \| 404\n \| 403\n \| 500;\n\ntype StatusIconMap = Record<\n CubeResultStatus,\n {\n color: string;\n component: ComponentType;\n }\n>;\n\nconst Container = tasty({\n qa: 'ResultContainer',\n as: 'section',\n styles: {\n display: {\n '': 'flex',\n compact: 'grid',\n },\n gridAreas: '\"icon title\" \"content content\"',\n flow: 'column',\n placeContent: {\n '': 'center',\n compact: 'start',\n },\n placeItems: {\n '': 'center',\n compact: 'start',\n },\n gap: {\n '': '3x',\n compact: '2x 1x',\n },\n padding: {\n '': '6x 4x',\n compact: '0',\n },\n textAlign: {\n '': 'center',\n compact: 'left',\n },\n '--icon-size': '6x',\n\n Icon: {\n $: '>',\n display: 'grid',\n gridArea: 'icon',\n },\n\n Content: {\n $: '>',\n gridArea: 'content',\n display: 'block',\n },\n\n Title: {\n $: '>',\n gridArea: 'title',\n display: 'flex',\n flow: 'column',\n placeItems: 'inherit',\n gap: '1x',\n placeSelf: 'center',\n },\n },\n});\n\nconst statusIconMap: StatusIconMap = {\n success: {\n color: 'success',\n component: () => <IconCircleCheckFilled />,\n },\n error: {\n color: 'danger',\n component: () => <IconCircleXFilled />,\n },\n info: {\n color: 'purple',\n component: () => <IconInfoCircleFilled />,\n },\n warning: {\n color: 'warning',\n component: () => <IconAlertTriangleFilled />,\n },\n 404: {\n color: 'purple',\n component: () => {\n // TODO: Needs to be implemented in the future\n return null;\n },\n },\n 403: {\n color: 'purple',\n component: () => {\n // TODO: Needs to be implemented in the future\n return null;\n },\n },\n 500: {\n color: 'purple',\n component: () => {\n // TODO: Needs to be implemented in the future\n return null;\n },\n },\n};\n\nfunction Result(props: CubeResultProps, ref) {\n let {\n children,\n isCompact,\n icon,\n status,\n subTitle,\n subtitle,\n title,\n ...otherProps\n } = props;\n\n subtitle = subtitle ?? subTitle;\n\n if (icon && status) {\n console.warn(\n 'Don\\'t use \"icon\" and \"status\" together, it can lead to possible errors.',\n );\n }\n\n const iconNode = useMemo(() => {\n if (icon) {\n return icon;\n }\n\n const { color, component: Component } =\n status && statusIconMap.hasOwnProperty(status)\n ? statusIconMap[status]\n : statusIconMap.info;\n\n return (\n <div data-element=\"Icon\" style={{ color: `var(--${color}-color)` }}>\n <Component data-element=\"Icon\" />\n </div>\n );\n }, [icon, status]);\n\n const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n return (\n <Container\n {...mergeProps(filterBaseProps(otherProps, { eventProps: true }), {\n mods: { compact: isCompact },\n })}\n ref={ref}\n styles={styles}\n >\n {iconNode}\n {(title \|\| subtitle) && (\n <div data-element=\"Title\">\n {wrapNodeIfPlain(title, () => (\n <Title level={2} preset={isCompact ? 'h5' : 'h4'}>\n {title}\n </Title>\n ))}\n {wrapNodeIfPlain(subtitle, () => (\n <Title level={3} preset={isCompact ? 't3m' : 't2m'}>\n {subtitle}\n </Title>\n ))}\n </div>\n )}\n {children && <div data-element=\"Content\">{children}</div>}\n </Container>\n );\n}\n\nconst _Result = forwardRef(Result);\n\n_Result.displayName = 'Result';\n\nexport { _Result as Result };\n"],"mappings":";;;;;;;;;;;AA6DA,MAAM,YAAY,MAAM;CACtB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,WAAW;EACX,MAAM;EACN,cAAc;GACZ,IAAI;GACJ,SAAS;GACV;EACD,YAAY;GACV,IAAI;GACJ,SAAS;GACV;EACD,KAAK;GACH,IAAI;GACJ,SAAS;GACV;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,WAAW;GACT,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EAEf,MAAM;GACJ,GAAG;GACH,SAAS;GACT,UAAU;GACX;EAED,SAAS;GACP,GAAG;GACH,UAAU;GACV,SAAS;GACV;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,WAAW;GACZ;EACF;CACF,CAAC;AAEF,MAAM,gBAA+B;CACnC,SAAS;EACP,OAAO;EACP,iBAAiB,oBAAC,0BAAwB;EAC3C;CACD,OAAO;EACL,OAAO;EACP,iBAAiB,oBAAC,sBAAoB;EACvC;CACD,MAAM;EACJ,OAAO;EACP,iBAAiB,oBAAC,yBAAuB;EAC1C;CACD,SAAS;EACP,OAAO;EACP,iBAAiB,oBAAC,4BAA0B;EAC7C;CACD,KAAK;EACH,OAAO;EACP,iBAAiB;AAEf,UAAO;;EAEV;CACD,KAAK;EACH,OAAO;EACP,iBAAiB;AAEf,UAAO;;EAEV;CACD,KAAK;EACH,OAAO;EACP,iBAAiB;AAEf,UAAO;;EAEV;CACF;AAED,SAAS,OAAO,OAAwB,KAAK;CAC3C,IAAI,EACF,UACA,WACA,MACA,QACA,UACA,UACA,OACA,GAAG,eACD;AAEJ,YAAW,YAAY;AAEvB,KAAI,QAAQ,OACV,SAAQ,KACN,8EACD;CAGH,MAAM,WAAW,cAAc;AAC7B,MAAI,KACF,QAAO;EAGT,MAAM,EAAE,OAAO,WAAW,cACxB,UAAU,cAAc,eAAe,OAAO,GAC1C,cAAc,UACd,cAAc;AAEpB,SACE,oBAAC;GAAI,gBAAa;GAAO,OAAO,EAAE,OAAO,SAAS,MAAM,UAAU;aAChE,oBAAC,aAAU,gBAAa,SAAS;IAC7B;IAEP,CAAC,MAAM,OAAO,CAAC;CAElB,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,qBAAC;EACC,GAAI,WAAW,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC,EAAE,EAChE,MAAM,EAAE,SAAS,WAAW,EAC7B,CAAC;EACG;EACG;;GAEP;IACC,SAAS,aACT,qBAAC;IAAI,gBAAa;eACf,gBAAgB,aACf,oBAACA;KAAM,OAAO;KAAG,QAAQ,YAAY,OAAO;eACzC;MACK,CACR,EACD,gBAAgB,gBACf,oBAACA;KAAM,OAAO;KAAG,QAAQ,YAAY,QAAQ;eAC1C;MACK,CACR;KACE;GAEP,YAAY,oBAAC;IAAI,gBAAa;IAAW;KAAe;;GAC/C;;AAIhB,MAAM,UAAU,WAAW,OAAO;AAElC,QAAQ,cAAc"}

package/dist/components/content/Skeleton/Skeleton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Text.js CHANGED Viewed

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
-import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/content/Text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/content/Text.tsx"],"sourcesContent":["import {\n AllBaseProps,\n BASE_STYLES,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n ~~extractStyles,\n~~ filterBaseProps,\n StylePropValue,\n TagName,\n tasty,\n TEXT_STYLES,\n TextStyleProps,\n} from '@tenphi/tasty';\nimport {\n CSSProperties,\n forwardRef,\n ForwardRefExoticComponent,\n RefAttributes,\n} from 'react';\n\nimport { useSlotProps } from '../../utils/react';\n\nconst STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES] as const;\n\nexport const TEXT_PROP_MAP = {\n transform: 'textTransform',\n weight: 'fontWeight',\n italic: 'fontStyle',\n} as const;\n\nexport interface CubeTextProps<T extends TagName = TagName>\n extends AllBaseProps<T>,\n TextStyleProps,\n BaseStyleProps,\n ColorStyleProps {\n /*\n Whether the text uses the monospace font.\n /\n monospace?: boolean;\n /\n Whether the text overflow is ellipsis\n /\n ellipsis?: boolean;\n /\n Whether the text is not wrapping\n /\n nowrap?: boolean;\n /\n Whether the text has italic style\n */\n italic?: StylePropValue<CSSProperties['fontStyle']>;\n weight?: string \| number;\n transform?: StylePropValue<CSSProperties['textTransform']>;\n}\n\nconst TextElement = tasty({\n qa: 'Text',\n as: 'span',\n styles: {\n display: {\n '': 'inline',\n 'ellipsis \| block': 'block',\n },\n margin: 0,\n padding: 0,\n whiteSpace: {\n '': 'inherit',\n 'nowrap \| ellipsis': 'nowrap',\n },\n textOverflow: {\n '': false,\n ellipsis: 'ellipsis',\n },\n overflow: {\n '': false,\n ellipsis: 'hidden',\n },\n width: {\n '': false,\n ellipsis: 'max 100%',\n },\n },\n});\n\nconst Text = forwardRef(function CubeText(allProps: CubeTextProps, ref) {\n allProps = useSlotProps(allProps, 'text');\n\n const { as, qa, block, ellipsis, nowrap, ...props } = allProps;\n const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);\n\n return (\n <TextElement\n as={as \|\| 'span'}\n qa={qa \|\| 'Text'}\n mods={{\n nowrap,\n ellipsis: !!ellipsis,\n block: !!block,\n }}\n {...filterBaseProps(props, { eventProps: true })}\n ref={ref}\n styles={styles}\n />\n );\n});\n\nconst MinorText = tasty(Text, {\n styles: {\n color: '#minor',\n },\n});\n\nconst DangerText = tasty(Text, {\n role: 'alert',\n styles: {\n color: '#danger-text',\n },\n});\n\nconst SuccessText = tasty(Text, {\n styles: {\n color: '#success-text',\n },\n});\n\nconst StrongText = tasty(Text, {\n as: 'strong',\n preset: 'strong',\n});\n\nconst EmphasisText = tasty(Text, {\n as: 'em',\n preset: 'em',\n});\n\nconst PlaceholderText = tasty(Text, {\n styles: {\n color: '#current.5',\n },\n});\n\nconst HighlightText = tasty(Text, {\n as: 'mark',\n styles: {\n fill: '#dark.15',\n color: '#dark',\n },\n});\n\nexport interface TextComponent\n extends ForwardRefExoticComponent<\n CubeTextProps & RefAttributes<HTMLElement>\n > {\n Minor: typeof MinorText;\n Danger: typeof DangerText;\n Success: typeof SuccessText;\n Strong: typeof StrongText;\n Emphasis: typeof EmphasisText;\n Placeholder: typeof PlaceholderText;\n Highlight: typeof HighlightText;\n}\n\nconst _Text: TextComponent = Object.assign(Text, {\n Minor: MinorText,\n Danger: DangerText,\n Success: SuccessText,\n Strong: StrongText,\n Emphasis: EmphasisText,\n Placeholder: PlaceholderText,\n Highlight: HighlightText,\n});\n\n_Text.displayName = 'Text';\n\nexport { _Text as Text };\n"],"mappings":"~~;;;;;;;~~AAuBA,MAAM,aAAa;CAAC,GAAG;CAAa,GAAG;CAAa,GAAG;CAAa;AAEpE,MAAa,gBAAgB;CAC3B,WAAW;CACX,QAAQ;CACR,QAAQ;CACT;AA2BD,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;GACP,IAAI;GACJ,oBAAoB;GACrB;EACD,QAAQ;EACR,SAAS;EACT,YAAY;GACV,IAAI;GACJ,qBAAqB;GACtB;EACD,cAAc;GACZ,IAAI;GACJ,UAAU;GACX;EACD,UAAU;GACR,IAAI;GACJ,UAAU;GACX;EACD,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;AAEF,MAAM,OAAO,WAAW,SAAS,SAAS,UAAyB,KAAK;AACtE,YAAW,aAAa,UAAU,OAAO;CAEzC,MAAM,EAAE,IAAI,IAAI,OAAO,UAAU,QAAQ,GAAG,UAAU;CACtD,MAAM,SAAS,cAAc,OAAO,YAAY,EAAE,EAAE,cAAc;AAElE,QACE,oBAAC;EACC,IAAI,MAAM;EACV,IAAI,MAAM;EACV,MAAM;GACJ;GACA,UAAU,CAAC,CAAC;GACZ,OAAO,CAAC,CAAC;GACV;EACD,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ;AAEF,MAAM,YAAY,MAAM,MAAM,EAC5B,QAAQ,EACN,OAAO,UACR,EACF,CAAC;AAEF,MAAM,aAAa,MAAM,MAAM;CAC7B,MAAM;CACN,QAAQ,EACN,OAAO,gBACR;CACF,CAAC;AAEF,MAAM,cAAc,MAAM,MAAM,EAC9B,QAAQ,EACN,OAAO,iBACR,EACF,CAAC;AAEF,MAAM,aAAa,MAAM,MAAM;CAC7B,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,MAAM;CAC/B,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,kBAAkB,MAAM,MAAM,EAClC,QAAQ,EACN,OAAO,cACR,EACF,CAAC;AAEF,MAAM,gBAAgB,MAAM,MAAM;CAChC,IAAI;CACJ,QAAQ;EACN,MAAM;EACN,OAAO;EACR;CACF,CAAC;AAeF,MAAM,QAAuB,OAAO,OAAO,MAAM;CAC/C,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,aAAa;CACb,WAAW;CACZ,CAAC;AAEF,MAAM,cAAc"}
1	+ {"version":3,"file":"Text.js","names":[],"sources":["../../../src/components/content/Text.tsx"],"sourcesContent":["import {\n AllBaseProps,\n BASE_STYLES,\n BaseStyleProps,\n COLOR_STYLES,\n ColorStyleProps,\n filterBaseProps,\n StylePropValue,\n TagName,\n tasty,\n TEXT_STYLES,\n TextStyleProps,\n} from '@tenphi/tasty';\nimport {\n CSSProperties,\n forwardRef,\n ForwardRefExoticComponent,\n RefAttributes,\n} from 'react';\n\nimport { useSlotProps } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES] as const;\n\nexport const TEXT_PROP_MAP = {\n transform: 'textTransform',\n weight: 'fontWeight',\n italic: 'fontStyle',\n} as const;\n\nexport interface CubeTextProps<T extends TagName = TagName>\n extends AllBaseProps<T>,\n TextStyleProps,\n BaseStyleProps,\n ColorStyleProps {\n /*\n Whether the text uses the monospace font.\n /\n monospace?: boolean;\n /\n Whether the text overflow is ellipsis\n /\n ellipsis?: boolean;\n /\n Whether the text is not wrapping\n /\n nowrap?: boolean;\n /\n Whether the text has italic style\n */\n italic?: StylePropValue<CSSProperties['fontStyle']>;\n weight?: string \| number;\n transform?: StylePropValue<CSSProperties['textTransform']>;\n}\n\nconst TextElement = tasty({\n qa: 'Text',\n as: 'span',\n styles: {\n display: {\n '': 'inline',\n 'ellipsis \| block': 'block',\n },\n margin: 0,\n padding: 0,\n whiteSpace: {\n '': 'inherit',\n 'nowrap \| ellipsis': 'nowrap',\n },\n textOverflow: {\n '': false,\n ellipsis: 'ellipsis',\n },\n overflow: {\n '': false,\n ellipsis: 'hidden',\n },\n width: {\n '': false,\n ellipsis: 'max 100%',\n },\n },\n});\n\nconst Text = forwardRef(function CubeText(allProps: CubeTextProps, ref) {\n allProps = useSlotProps(allProps, 'text');\n\n const { as, qa, block, ellipsis, nowrap, ...props } = allProps;\n const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);\n\n return (\n <TextElement\n as={as \|\| 'span'}\n qa={qa \|\| 'Text'}\n mods={{\n nowrap,\n ellipsis: !!ellipsis,\n block: !!block,\n }}\n {...filterBaseProps(props, { eventProps: true })}\n ref={ref}\n styles={styles}\n />\n );\n});\n\nconst MinorText = tasty(Text, {\n styles: {\n color: '#minor',\n },\n});\n\nconst DangerText = tasty(Text, {\n role: 'alert',\n styles: {\n color: '#danger-text',\n },\n});\n\nconst SuccessText = tasty(Text, {\n styles: {\n color: '#success-text',\n },\n});\n\nconst StrongText = tasty(Text, {\n as: 'strong',\n preset: 'strong',\n});\n\nconst EmphasisText = tasty(Text, {\n as: 'em',\n preset: 'em',\n});\n\nconst PlaceholderText = tasty(Text, {\n styles: {\n color: '#current.5',\n },\n});\n\nconst HighlightText = tasty(Text, {\n as: 'mark',\n styles: {\n fill: '#dark.15',\n color: '#dark',\n },\n});\n\nexport interface TextComponent\n extends ForwardRefExoticComponent<\n CubeTextProps & RefAttributes<HTMLElement>\n > {\n Minor: typeof MinorText;\n Danger: typeof DangerText;\n Success: typeof SuccessText;\n Strong: typeof StrongText;\n Emphasis: typeof EmphasisText;\n Placeholder: typeof PlaceholderText;\n Highlight: typeof HighlightText;\n}\n\nconst _Text: TextComponent = Object.assign(Text, {\n Minor: MinorText,\n Danger: DangerText,\n Success: SuccessText,\n Strong: StrongText,\n Emphasis: EmphasisText,\n Placeholder: PlaceholderText,\n Highlight: HighlightText,\n});\n\n_Text.displayName = 'Text';\n\nexport { _Text as Text };\n"],"mappings":";;;;;;;;AAuBA,MAAM,aAAa;CAAC,GAAG;CAAa,GAAG;CAAa,GAAG;CAAa;AAEpE,MAAa,gBAAgB;CAC3B,WAAW;CACX,QAAQ;CACR,QAAQ;CACT;AA2BD,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;GACP,IAAI;GACJ,oBAAoB;GACrB;EACD,QAAQ;EACR,SAAS;EACT,YAAY;GACV,IAAI;GACJ,qBAAqB;GACtB;EACD,cAAc;GACZ,IAAI;GACJ,UAAU;GACX;EACD,UAAU;GACR,IAAI;GACJ,UAAU;GACX;EACD,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;AAEF,MAAM,OAAO,WAAW,SAAS,SAAS,UAAyB,KAAK;AACtE,YAAW,aAAa,UAAU,OAAO;CAEzC,MAAM,EAAE,IAAI,IAAI,OAAO,UAAU,QAAQ,GAAG,UAAU;CACtD,MAAM,SAAS,cAAc,OAAO,YAAY,EAAE,EAAE,cAAc;AAElE,QACE,oBAAC;EACC,IAAI,MAAM;EACV,IAAI,MAAM;EACV,MAAM;GACJ;GACA,UAAU,CAAC,CAAC;GACZ,OAAO,CAAC,CAAC;GACV;EACD,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ;AAEF,MAAM,YAAY,MAAM,MAAM,EAC5B,QAAQ,EACN,OAAO,UACR,EACF,CAAC;AAEF,MAAM,aAAa,MAAM,MAAM;CAC7B,MAAM;CACN,QAAQ,EACN,OAAO,gBACR;CACF,CAAC;AAEF,MAAM,cAAc,MAAM,MAAM,EAC9B,QAAQ,EACN,OAAO,iBACR,EACF,CAAC;AAEF,MAAM,aAAa,MAAM,MAAM;CAC7B,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,MAAM;CAC/B,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,kBAAkB,MAAM,MAAM,EAClC,QAAQ,EACN,OAAO,cACR,EACF,CAAC;AAEF,MAAM,gBAAgB,MAAM,MAAM;CAChC,IAAI;CACJ,QAAQ;EACN,MAAM;EACN,OAAO;EACR;CACF,CAAC;AAeF,MAAM,QAAuB,OAAO,OAAO,MAAM;CAC/C,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,aAAa;CACb,WAAW;CACZ,CAAC;AAEF,MAAM,cAAc"}

package/dist/components/content/TextItem/TextItem.js CHANGED Viewed

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.122.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";
 import { useAutoTooltip } from "../use-auto-tooltip.js";
-import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";