npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-b376419 → 0.0.0-canary-0c97570 - Mend

@cube-dev/ui-kit 0.0.0-canary-b376419 → 0.0.0-canary-0c97570

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 (487) hide show

package/dist/components/layout/Panel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/layout/Prefix.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";

package/dist/components/layout/ResizablePanel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/layout/Space.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Suffix.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useTabsContext } from "./TabsContext.js";
 import { useEffect, useRef, useState } from "react";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/navigation/Tabs/TabsAction.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/navigation/Tabs/TabsContext.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/popover-placement.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 //#region src/components/navigation/Tabs/popover-placement.ts
 /**
 * Maps the parent Tabs `placement` to the popover placement for menus and

package/dist/components/navigation/Tabs/styled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
@@ -163,12 +163,12 @@ const TabsElement = tasty({ styles: {
 		},
 		transition: "##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in",
 		"#tabs-fade-start": {
-			"": "rgb(0 0 0 / 1)",
-			"fade-start": "rgb(0 0 0 / 0)"
+			"": "#black",
+			"fade-start": "#black.0"
 		},
 		"#tabs-fade-end": {
-			"": "rgb(0 0 0 / 1)",
-			"fade-end": "rgb(0 0 0 / 0)"
+			"": "#black",
+			"fade-end": "#black.0"
 		}
 	},
 	TabList: {
@@ -176,7 +176,7 @@ const TabsElement = tasty({ styles: {
 		position: "relative",
 		display: "grid",
 		boxSizing: "border-box",
-		gridAutoFlow: {
+		flow: {
 			"": "column",
 			"placement=left | placement=right": "row"
 		},

package/dist/components/navigation/Tabs/styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n styles: {\n display: 'flex',\n flow: {\n '': 'column',\n 'placement=bottom': 'column-reverse',\n 'placement=left': 'row',\n 'placement=right': 'row-reverse',\n },\n // Participate in parent flex layouts; allow shrinking on both axes so we\n // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n // which makes the practical minimum of the wrapper along the main axis\n // equal to the tablist's intrinsic size. When there are no panels the\n // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n flexShrink: { '': 0, 'has-panels': 1 },\n flexGrow: { '': 0, 'has-panels': 1 },\n width: 'min 0',\n height: 'min 0',\n overflow: 'visible',\n\n // ============================================\n // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n // ============================================\n Bar: {\n $: '>',\n display: 'flex',\n flow: {\n '': 'row',\n 'placement=left \| placement=right': 'column',\n },\n placeItems: {\n '': 'end stretch',\n 'placement=bottom': 'start stretch',\n 'placement=left': 'stretch end',\n 'placement=right': 'stretch start',\n 'type=radio \| type=file': 'stretch',\n },\n overflow: 'visible',\n border: {\n '': 0,\n '(type=default \| type=file \| type=narrow) & has-panels': 'bottom',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=bottom':\n 'top',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=left':\n 'right',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=right':\n 'left',\n },\n // Bar sizing — always follow the outer wrapper along the main axis so\n // `width` / `height` props on `<Tabs>` apply to the strip as they did\n // before the wrapper was introduced.\n // - horizontal placements: main-axis = wrapper width (100%), cross-axis intrinsic (auto)\n // - vertical placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n width: {\n '': '100%',\n 'placement=left \| placement=right': 'auto',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '100%',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n radius: {\n '': 0,\n 'type=radio': '1cr',\n },\n fill: {\n '': '#clear',\n 'type=radio': '#surface-4',\n },\n // Never let the Bar shrink/grow within the outer wrapper — this is what\n // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n flexShrink: 0,\n flexGrow: 0,\n\n $transition: '$tab-transition',\n '$tab-indicator-size': {\n '': '2bw',\n 'size=large': '1ow',\n },\n },\n\n // ============================================\n // Prefix — slot before the scroll area.\n // ============================================\n Prefix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 0 .5x 1x',\n 'type=default & (placement=left \| placement=right)': '1x .5x 0 .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n },\n\n // ============================================\n // Suffix — slot after the scroll area.\n // ============================================\n Suffix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 1x .5x 0',\n 'type=default & (placement=left \| placement=right)': '0 .5x 1x .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'left',\n 'type=file & (placement=left \| placement=right)': 'top',\n },\n },\n\n // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n ScrollWrapper: {\n $: '> Bar >',\n position: 'relative',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n width: {\n '': 'min 0',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'min 0',\n },\n overflow: {\n '': 'hidden',\n 'type=radio': 'visible',\n },\n },\n\n Scroll: {\n $: '> Bar > ScrollWrapper >',\n position: 'relative',\n display: 'block',\n overflow: {\n '': 'auto hidden',\n 'placement=left \| placement=right': 'hidden auto',\n 'type=radio': 'visible',\n },\n scrollbar: 'none',\n flexGrow: 1,\n width: '100%',\n // Add padding/margin for radio type to allow shadow to render outside\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n margin: {\n '': 0,\n 'type=radio': '-.5x',\n },\n // Multi-group fade with axis-neutral color tokens for smooth transitions.\n // Direction flips based on placement.\n fade: {\n '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n 'placement=left \| placement=right':\n '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n },\n // ##name outputs --name-color (literal CSS property name)\n transition:\n '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n '#tabs-fade-start': {\n '': 'rgb(0 0 0 / 1)',\n 'fade-start': 'rgb(0 0 0 / 0)',\n },\n '#tabs-fade-end': {\n '': 'rgb(0 0 0 / 1)',\n 'fade-end': 'rgb(0 0 0 / 0)',\n },\n },\n\n TabList: {\n $: '> Bar > ScrollWrapper > Scroll >',\n position: 'relative',\n display: 'grid',\n // `border-box` is required because we set `width: 100%` for vertical\n // placements AND apply padding. With the default `content-box`, the\n // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n // horizontally — and the side selection indicator (positioned at\n // `right: 0` / `left: 0` of TabList) would land in that overflow region\n // and get clipped by Scroll's `overflow-x: hidden`.\n boxSizing: 'border-box',\n gridAutoFlow: {\n '': 'column',\n 'placement=left \| placement=right': 'row',\n },\n gridAutoColumns: {\n '': 'auto',\n 'type=radio': '1fr',\n },\n gridAutoRows: {\n '': 'auto',\n 'type=radio & (placement=left \| placement=right)': '1fr',\n },\n gap: {\n '': 0,\n 'type=default': '1x',\n 'type=narrow': '2x',\n 'type=radio': '.5x',\n // Tabs stack vertically — collapse the gap so the strip reads as a\n // single column. `narrow` is coerced to `default` in vertical, but we\n // keep the rule defensive in case the styled element is consumed\n // directly with a `type=narrow` mod set.\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '1bw',\n },\n placeContent: 'start',\n overflow: 'visible',\n width: {\n '': 'max-content',\n 'type=radio': '100%',\n 'placement=left \| placement=right': '100%',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'max-content',\n },\n // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n // (instead of only the parallel axis) so the breathing room around the\n // tabs and the selection indicator can be tuned via the `tabListPadding`\n // prop — the same prop that controls horizontal start/end padding.\n padding: {\n '': '0 $tablist-padding',\n 'placement=left \| placement=right': '$tablist-padding 0',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '$tablist-padding',\n },\n\n // Default `$tablist-padding` per type. Vertical default/narrow gets the\n // smaller `.5x` default since it applies to all four sides; the\n // `tabListPadding` prop overrides this via inline CSS variable.\n '$tablist-padding': {\n '': '0',\n 'type=default \| type=narrow': '1x',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '.5x',\n },\n },\n\n // Size variable for actions (if ItemAction is used instead of TabsAction)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n // edges and dimensions based on placement; the driving CSS custom\n // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n Scrollbar: {\n $: '> Bar > ScrollWrapper >',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=left \| placement=right': '$scrollbar-v-top',\n },\n left: {\n '': '$scrollbar-h-left',\n 'placement=left \| placement=right': 'auto',\n },\n right: {\n '': 'auto',\n 'placement=left \| placement=right': '1px',\n },\n height: {\n '': '1ow',\n 'placement=left \| placement=right': '$scrollbar-v-height',\n },\n width: {\n '': '$scrollbar-h-width',\n 'placement=left \| placement=right': '1ow',\n },\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n 'focused \| scrolling': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n as: 'button',\n styles: {\n radius: {\n '': false,\n 'type=radio \| type=default': true,\n 'type=narrow': 'top',\n 'type=narrow & placement=bottom': 'bottom',\n 'type=narrow & placement=left': 'left',\n 'type=narrow & placement=right': 'right',\n },\n color: {\n '': '#dark-02',\n 'type=narrow & (hovered & !selected)': '#primary-text',\n '(type=default \| type=narrow) & selected': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n fill: {\n '': '#clear',\n 'hovered & !type=narrow': '#dark.03',\n 'type=file': '#surface-3',\n 'type=file & hovered': '#surface-3.5',\n 'type=radio & hovered': '#surface.5',\n '(type=file \| type=radio) & selected': '#surface',\n // Spring-load hint: a widget is hovering this tab and it is about to open.\n 'drop-pending': '#primary.10',\n },\n border: {\n '': '#clear',\n 'type=file': '0 #clear',\n },\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n },\n shadow: {\n '': '$selection-shadow',\n 'focused & focus-visible':\n 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n 'type=radio & selected': '$item-shadow',\n 'type=radio & selected & focused & focus-visible':\n '$item-shadow, inset 0 0 0 1bw #primary-text',\n },\n outline: 'none',\n placeContent: {\n // extend\n 'type=radio': 'center',\n },\n gridTemplate: {\n // extend\n 'type=radio':\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n },\n // File-type selection indicator: an inset shadow on the edge that faces\n // the panel area. Flips with placement so the highlight always sits on\n // the edge adjacent to the content.\n '$selection-shadow': {\n '': 'inset 0 0 0 0 #primary',\n 'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n 'type=file & selected & placement=bottom':\n 'inset 0 $tab-indicator-size 0 0 #primary',\n 'type=file & selected & placement=left':\n 'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n 'type=file & selected & placement=right':\n 'inset $tab-indicator-size 0 0 0 #primary',\n '!type=file': 'inset 0 0 0 0 #primary.0',\n },\n // Collapse horizontal padding for narrow type\n '$label-padding-left': {\n '': '$inline-padding',\n 'has-start-content': 0,\n 'type=narrow': 0,\n },\n '$label-padding-right': {\n '': '$inline-padding',\n 'has-end-content': 0,\n 'type=narrow': 0,\n },\n Label: {\n placeSelf: {\n '': 'center start',\n 'type=radio': 'center start',\n 'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n 'center',\n },\n },\n Actions: {\n transition: false,\n },\n },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n styles: {\n position: 'relative',\n display: 'grid',\n margin: {\n '': 0,\n // Horizontal strip: .5x top/bottom creates space between the tab and the\n // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n 'type=default': '.5x 0',\n // Vertical strip: the breathing room around the tabs and the gap from\n // the side indicator is provided by the TabList's own `.5x` padding —\n // don't add per-tab horizontal margin on top of it.\n 'type=default & (placement=left \| placement=right)': 0,\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n cursor: {\n '': 'default',\n draggable: 'grab',\n dragging: 'grabbing',\n },\n\n // Size variable for actions (same as ItemButton's ActionsWrapper)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Actions rendered outside the button for accessibility\n Actions: {\n $: '>',\n position: 'absolute',\n inset: '1bw 1bw auto auto',\n display: 'flex',\n gap: '1bw',\n placeItems: 'center',\n placeContent: 'center end',\n pointerEvents: 'auto',\n height: 'min ($size - 2bw)',\n padding: '0 $side-padding',\n // Simple CSS opacity for show-on-hover\n opacity: {\n '': 1,\n 'auto-hide-actions': 0,\n 'auto-hide-actions & (active \| :hover \| :focus-within \| :has([data-pressed]))': 1,\n },\n transition: 'opacity $transition',\n // Size variables (same as Item)\n '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n '$side-padding': '(($size - $action-size - 2bw) / 2)',\n },\n },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n styles: {\n zIndex: 10,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n fill: '#primary',\n width: {\n '': '.5x',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '.5x',\n },\n top: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & before': '-2px',\n },\n bottom: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & after': '-2px',\n },\n left: {\n '': 'auto',\n 'before & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n right: {\n '': 'auto',\n 'after & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n styles: {\n position: 'absolute',\n bottom: {\n '': '0',\n 'placement=bottom \| placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=bottom': '0',\n },\n left: {\n '': 'auto',\n 'placement=right': '0',\n },\n right: {\n '': 'auto',\n 'placement=left': '0',\n },\n height: {\n '': '$tab-indicator-size',\n 'placement=left \| placement=right': 'auto',\n },\n width: {\n '': 'auto',\n 'placement=left \| placement=right': '$tab-indicator-size',\n },\n fill: '#primary',\n // Transition all four properties unconditionally — only the two relevant\n // ones change per render, the others stay constant.\n transition:\n 'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n pointerEvents: 'none',\n },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n as: 'section',\n styles: {\n display: 'contents',\n hide: {\n '': true,\n active: false,\n },\n },\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n styles: {\n display: 'flex',\n flow: {\n '': 'column',\n 'placement=bottom': 'column-reverse',\n 'placement=left': 'row',\n 'placement=right': 'row-reverse',\n },\n // Participate in parent flex layouts; allow shrinking on both axes so we\n // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n // which makes the practical minimum of the wrapper along the main axis\n // equal to the tablist's intrinsic size. When there are no panels the\n // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n flexShrink: { '': 0, 'has-panels': 1 },\n flexGrow: { '': 0, 'has-panels': 1 },\n width: 'min 0',\n height: 'min 0',\n overflow: 'visible',\n\n // ============================================\n // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n // ============================================\n Bar: {\n $: '>',\n display: 'flex',\n flow: {\n '': 'row',\n 'placement=left \| placement=right': 'column',\n },\n placeItems: {\n '': 'end stretch',\n 'placement=bottom': 'start stretch',\n 'placement=left': 'stretch end',\n 'placement=right': 'stretch start',\n 'type=radio \| type=file': 'stretch',\n },\n overflow: 'visible',\n border: {\n '': 0,\n '(type=default \| type=file \| type=narrow) & has-panels': 'bottom',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=bottom':\n 'top',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=left':\n 'right',\n '(type=default \| type=file \| type=narrow) & has-panels & placement=right':\n 'left',\n },\n // Bar sizing — always follow the outer wrapper along the main axis so\n // `width` / `height` props on `<Tabs>` apply to the strip as they did\n // before the wrapper was introduced.\n // - horizontal placements: main-axis = wrapper width (100%), cross-axis intrinsic (auto)\n // - vertical placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n width: {\n '': '100%',\n 'placement=left \| placement=right': 'auto',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '100%',\n 'type=radio & (placement=left \| placement=right)': 'max-content',\n },\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n radius: {\n '': 0,\n 'type=radio': '1cr',\n },\n fill: {\n '': '#clear',\n 'type=radio': '#surface-4',\n },\n // Never let the Bar shrink/grow within the outer wrapper — this is what\n // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n flexShrink: 0,\n flexGrow: 0,\n\n $transition: '$tab-transition',\n '$tab-indicator-size': {\n '': '2bw',\n 'size=large': '1ow',\n },\n },\n\n // ============================================\n // Prefix — slot before the scroll area.\n // ============================================\n Prefix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 0 .5x 1x',\n 'type=default & (placement=left \| placement=right)': '1x .5x 0 .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n },\n\n // ============================================\n // Suffix — slot after the scroll area.\n // ============================================\n Suffix: {\n $: '> Bar >',\n display: 'flex',\n placeItems: 'center',\n placeContent: 'center',\n flexShrink: 0,\n placeSelf: 'stretch',\n padding: {\n '': 0,\n 'type=default': '.5x 1x .5x 0',\n 'type=default & (placement=left \| placement=right)': '0 .5x 1x .5x',\n },\n gap: {\n '': 0,\n 'type=default': '.5x',\n },\n border: {\n '': 0,\n 'type=file': 'left',\n 'type=file & (placement=left \| placement=right)': 'top',\n },\n },\n\n // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n ScrollWrapper: {\n $: '> Bar >',\n position: 'relative',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n width: {\n '': 'min 0',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'min 0',\n },\n overflow: {\n '': 'hidden',\n 'type=radio': 'visible',\n },\n },\n\n Scroll: {\n $: '> Bar > ScrollWrapper >',\n position: 'relative',\n display: 'block',\n overflow: {\n '': 'auto hidden',\n 'placement=left \| placement=right': 'hidden auto',\n 'type=radio': 'visible',\n },\n scrollbar: 'none',\n flexGrow: 1,\n width: '100%',\n // Add padding/margin for radio type to allow shadow to render outside\n padding: {\n '': 0,\n 'type=radio': '.5x',\n },\n margin: {\n '': 0,\n 'type=radio': '-.5x',\n },\n // Multi-group fade with axis-neutral color tokens for smooth transitions.\n // Direction flips based on placement.\n fade: {\n '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n 'placement=left \| placement=right':\n '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n },\n // ##name outputs --name-color (literal CSS property name)\n transition:\n '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n '#tabs-fade-start': {\n '': '#black',\n 'fade-start': '#black.0',\n },\n '#tabs-fade-end': {\n '': '#black',\n 'fade-end': '#black.0',\n },\n },\n\n TabList: {\n $: '> Bar > ScrollWrapper > Scroll >',\n position: 'relative',\n display: 'grid',\n // `border-box` is required because we set `width: 100%` for vertical\n // placements AND apply padding. With the default `content-box`, the\n // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n // horizontally — and the side selection indicator (positioned at\n // `right: 0` / `left: 0` of TabList) would land in that overflow region\n // and get clipped by Scroll's `overflow-x: hidden`.\n boxSizing: 'border-box',\n flow: {\n '': 'column',\n 'placement=left \| placement=right': 'row',\n },\n gridAutoColumns: {\n '': 'auto',\n 'type=radio': '1fr',\n },\n gridAutoRows: {\n '': 'auto',\n 'type=radio & (placement=left \| placement=right)': '1fr',\n },\n gap: {\n '': 0,\n 'type=default': '1x',\n 'type=narrow': '2x',\n 'type=radio': '.5x',\n // Tabs stack vertically — collapse the gap so the strip reads as a\n // single column. `narrow` is coerced to `default` in vertical, but we\n // keep the rule defensive in case the styled element is consumed\n // directly with a `type=narrow` mod set.\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '1bw',\n },\n placeContent: 'start',\n overflow: 'visible',\n width: {\n '': 'max-content',\n 'type=radio': '100%',\n 'placement=left \| placement=right': '100%',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': 'max-content',\n },\n // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n // (instead of only the parallel axis) so the breathing room around the\n // tabs and the selection indicator can be tuned via the `tabListPadding`\n // prop — the same prop that controls horizontal start/end padding.\n padding: {\n '': '0 $tablist-padding',\n 'placement=left \| placement=right': '$tablist-padding 0',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '$tablist-padding',\n },\n\n // Default `$tablist-padding` per type. Vertical default/narrow gets the\n // smaller `.5x` default since it applies to all four sides; the\n // `tabListPadding` prop overrides this via inline CSS variable.\n '$tablist-padding': {\n '': '0',\n 'type=default \| type=narrow': '1x',\n '(type=default \| type=narrow) & (placement=left \| placement=right)':\n '.5x',\n },\n },\n\n // Size variable for actions (if ItemAction is used instead of TabsAction)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n // edges and dimensions based on placement; the driving CSS custom\n // properties come from `useTinyScrollbar.handleHStyle` / `handleVStyle`.\n Scrollbar: {\n $: '> Bar > ScrollWrapper >',\n position: 'absolute',\n bottom: {\n '': '1px',\n 'placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=left \| placement=right': '$scrollbar-v-top',\n },\n left: {\n '': '$scrollbar-h-left',\n 'placement=left \| placement=right': 'auto',\n },\n right: {\n '': 'auto',\n 'placement=left \| placement=right': '1px',\n },\n height: {\n '': '1ow',\n 'placement=left \| placement=right': '$scrollbar-v-height',\n },\n width: {\n '': '$scrollbar-h-width',\n 'placement=left \| placement=right': '1ow',\n },\n radius: 'round',\n fill: '#dark.35',\n opacity: {\n '': 0,\n 'focused \| scrolling': 1,\n },\n transition: 'opacity 0.15s',\n pointerEvents: 'none',\n },\n },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n as: 'button',\n styles: {\n radius: {\n '': false,\n 'type=radio \| type=default': true,\n 'type=narrow': 'top',\n 'type=narrow & placement=bottom': 'bottom',\n 'type=narrow & placement=left': 'left',\n 'type=narrow & placement=right': 'right',\n },\n color: {\n '': '#dark-02',\n 'type=narrow & (hovered & !selected)': '#primary-text',\n '(type=default \| type=narrow) & selected': '#primary-text',\n disabled: '#disabled-surface-text',\n },\n fill: {\n '': '#clear',\n 'hovered & !type=narrow': '#dark.03',\n 'type=file': '#surface-3',\n 'type=file & hovered': '#surface-3.5',\n 'type=radio & hovered': '#surface.5',\n '(type=file \| type=radio) & selected': '#surface',\n // Spring-load hint: a widget is hovering this tab and it is about to open.\n 'drop-pending': '#primary.10',\n },\n border: {\n '': '#clear',\n 'type=file': '0 #clear',\n },\n preset: {\n '': 't3m',\n 'size=xsmall': 't4',\n },\n shadow: {\n '': '$selection-shadow',\n 'focused & focus-visible':\n 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n editing: 'inset 0 0 0 1bw #primary-text, $selection-shadow',\n 'type=radio & selected': '$item-shadow',\n 'type=radio & selected & focused & focus-visible':\n '$item-shadow, inset 0 0 0 1bw #primary-text',\n },\n outline: 'none',\n placeContent: {\n // extend\n 'type=radio': 'center',\n },\n gridTemplate: {\n // extend\n 'type=radio':\n '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n },\n // File-type selection indicator: an inset shadow on the edge that faces\n // the panel area. Flips with placement so the highlight always sits on\n // the edge adjacent to the content.\n '$selection-shadow': {\n '': 'inset 0 0 0 0 #primary',\n 'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n 'type=file & selected & placement=bottom':\n 'inset 0 $tab-indicator-size 0 0 #primary',\n 'type=file & selected & placement=left':\n 'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n 'type=file & selected & placement=right':\n 'inset $tab-indicator-size 0 0 0 #primary',\n '!type=file': 'inset 0 0 0 0 #primary.0',\n },\n // Collapse horizontal padding for narrow type\n '$label-padding-left': {\n '': '$inline-padding',\n 'has-start-content': 0,\n 'type=narrow': 0,\n },\n '$label-padding-right': {\n '': '$inline-padding',\n 'has-end-content': 0,\n 'type=narrow': 0,\n },\n Label: {\n placeSelf: {\n '': 'center start',\n 'type=radio': 'center start',\n 'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n 'center',\n },\n },\n Actions: {\n transition: false,\n },\n },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n styles: {\n position: 'relative',\n display: 'grid',\n margin: {\n '': 0,\n // Horizontal strip: .5x top/bottom creates space between the tab and the\n // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n 'type=default': '.5x 0',\n // Vertical strip: the breathing room around the tabs and the gap from\n // the side indicator is provided by the TabList's own `.5x` padding —\n // don't add per-tab horizontal margin on top of it.\n 'type=default & (placement=left \| placement=right)': 0,\n },\n border: {\n '': 0,\n 'type=file': 'right',\n 'type=file & (placement=left \| placement=right)': 'bottom',\n },\n cursor: {\n '': 'default',\n draggable: 'grab',\n dragging: 'grabbing',\n },\n\n // Size variable for actions (same as ItemButton's ActionsWrapper)\n $size: {\n '': '$size-md',\n 'size=xsmall': '$size-xs',\n 'size=small': '$size-sm',\n 'size=medium': '$size-md',\n 'size=large': '$size-lg',\n 'size=xlarge': '$size-xl',\n },\n\n // Actions rendered outside the button for accessibility\n Actions: {\n $: '>',\n position: 'absolute',\n inset: '1bw 1bw auto auto',\n display: 'flex',\n gap: '1bw',\n placeItems: 'center',\n placeContent: 'center end',\n pointerEvents: 'auto',\n height: 'min ($size - 2bw)',\n padding: '0 $side-padding',\n // Simple CSS opacity for show-on-hover\n opacity: {\n '': 1,\n 'auto-hide-actions': 0,\n 'auto-hide-actions & (active \| :hover \| :focus-within \| :has([data-pressed]))': 1,\n },\n transition: 'opacity $transition',\n // Size variables (same as Item)\n '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n '$side-padding': '(($size - $action-size - 2bw) / 2)',\n },\n },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n styles: {\n zIndex: 10,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: {\n '': 0,\n 'drop-target': 1,\n },\n fill: '#primary',\n width: {\n '': '.5x',\n 'placement=left \| placement=right': 'auto',\n },\n height: {\n '': 'auto',\n 'placement=left \| placement=right': '.5x',\n },\n top: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & before': '-2px',\n },\n bottom: {\n '': 0,\n 'placement=left \| placement=right': 'auto',\n '(placement=left \| placement=right) & after': '-2px',\n },\n left: {\n '': 'auto',\n 'before & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n right: {\n '': 'auto',\n 'after & !(placement=left \| placement=right)': '-2px',\n 'placement=left \| placement=right': 0,\n },\n },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the dynamic axis dimensions (left/width for\n// horizontal, top/height for vertical) are populated via inline `style` from\n// `useTabIndicator` in `Tabs.tsx`.\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n styles: {\n position: 'absolute',\n bottom: {\n '': '0',\n 'placement=bottom \| placement=left \| placement=right': 'auto',\n },\n top: {\n '': 'auto',\n 'placement=bottom': '0',\n },\n left: {\n '': 'auto',\n 'placement=right': '0',\n },\n right: {\n '': 'auto',\n 'placement=left': '0',\n },\n height: {\n '': '$tab-indicator-size',\n 'placement=left \| placement=right': 'auto',\n },\n width: {\n '': 'auto',\n 'placement=left \| placement=right': '$tab-indicator-size',\n },\n fill: '#primary',\n // Transition all four properties unconditionally — only the two relevant\n // ones change per render, the others stay constant.\n transition:\n 'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n pointerEvents: 'none',\n },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n as: 'section',\n styles: {\n display: 'contents',\n hide: {\n '': true,\n active: false,\n },\n },\n});\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/types.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

package/dist/components/navigation/Tabs/use-tab-editing.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { useCallback, useState } from "react";
 //#region src/components/navigation/Tabs/use-tab-editing.ts

package/dist/components/navigation/Tabs/use-tab-indicator.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";

package/dist/components/organisms/FileTabs/FileTabs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { Block } from "../../Block.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/organisms/StatsCard/StatsCard.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";

package/dist/components/other/Calendar/Calendar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/other/Calendar/CalendarCell.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/other/Calendar/CalendarGrid.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { CalendarCell } from "./CalendarCell.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/other/Calendar/RangeCalendar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useProviderProps } from "../../../provider.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/other/CloudLogo/CloudLogo.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { Button } from "../../actions/index.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/overlays/AlertDialog/AlertDialog.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { _Title } from "../../content/Title.js";

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/overlays/AlertDialog/AlertDialogZone.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
 import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { _AlertDialog } from "./AlertDialog.js";

package/dist/components/overlays/Dialog/Dialog.d.ts CHANGED Viewed

@@ -14,8 +14,6 @@ interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, Base
   onDismiss?: (arg?: any) => void;
   /** That you can replace the close icon with */
   closeIcon?: ReactElement;
-  /** Size of the dismiss button. Defaults to the button's own default (medium). */
-  closeButtonSize?: 'small' | 'medium' | 'large';
   closeButtonStyles?: Styles;
   role?: 'dialog' | 'alertdialog';
 }

package/dist/components/overlays/Dialog/Dialog.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { SlotProvider } from "../../../utils/react/Slots.js";
@@ -92,8 +92,7 @@ const CloseButton = tasty(_ItemButton, {
 	styles: {
 		position: "absolute",
 		top: "1x",
-		right: "1x",
-		zIndex: 1
+		right: "1x"
 	}
 });
 const sizeMap = {
@@ -127,7 +126,7 @@ const Dialog = forwardRef(function Dialog(props, ref) {
 });
 const DialogContent = forwardRef(function DialogContent(props, ref) {
 	let { type = "modal", ...contextProps } = useDialogContext();
-	let { qa, children, size = "M", isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonSize, closeButtonStyles, style, ...otherProps } = props;
+	let { qa, children, size = "M", isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, style, ...otherProps } = props;
 	size = sizeMap[size.toUpperCase()] || size;
 	const styles = extractStyles(otherProps, STYLES_LIST);
 	const { t } = useI18n();
@@ -205,7 +204,6 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 		children: [dismissButton, /* @__PURE__ */ jsxs(SlotProvider, {
 			slots,
 			children: [isDismissable && /* @__PURE__ */ jsx(CloseButton, {
-				size: closeButtonSize,
 				icon: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { size: 20 }),
 				label: t("dialog.dismiss", "Dismiss"),
 				onPress: () => onDismiss && onDismiss()

package/dist/components/overlays/Dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useObjectRef } from '@react-aria/utils';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n DIMENSION_STYLES,\n DimensionStyleProps,\n FLOW_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, Ref, useEffect, useMemo } from 'react';\nimport {\n AriaDialogProps,\n DismissButton,\n FocusScope,\n useDialog,\n} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n ...BASE_STYLES,\n ...DIMENSION_STYLES,\n ...BLOCK_STYLES,\n ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n as: 'section',\n styles: {\n display: 'flex',\n flow: 'column',\n fill: '#surface',\n pointerEvents: 'auto',\n outline: 0,\n position: {\n '': 'relative',\n 'type=panel': 'absolute',\n },\n width: {\n '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n 'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n 'type=fullscreenTakeover': '100dvw 100dvw',\n 'type=panel': 'auto',\n },\n height: {\n '': 'auto (100dvh - 8x)',\n 'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n 'type=fullscreenTakeover \| type=panel': '100dvh 100dvh',\n 'type=popover': 'initial initial (50dvh - 5x)',\n },\n gap: 0,\n border: {\n '': false,\n 'type=popover': true,\n },\n radius: {\n '': '1cr',\n 'type=tray': '1cr top',\n 'type=fullscreenTakeover': '0r',\n },\n shadow: {\n '': '$dialog-shadow',\n 'type=popover \| type=panel': '$shadow',\n },\n top: {\n '': false,\n 'type=modal': '((50vh - 50%) / -3)',\n 'type=panel': 'auto',\n },\n '$dialog-title-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-padding-h': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-footer-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-gap': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n },\n});\n\nconst CloseButton = tasty(ItemButton, {\n qa: 'ModalCloseButton',\n type: 'clear',\n styles: {\n position: 'absolute',\n top: '1x',\n right: '1x',\n // Without an explicit z-index, this button and any later sibling that is\n // also positioned (e.g. a dialog content wrapper with `position: relative`)\n // sit in the same CSS stacking tier (\"positioned, z-index: auto\"), where\n // DOM order — not visual position — decides the winner. Being first in\n // the DOM (see render below), this button would lose that tie and the\n // sibling would silently swallow clicks meant for it.\n zIndex: 1,\n },\n});\n\nconst sizeMap = {\n S: 'small',\n M: 'medium',\n L: 'large',\n};\nconst sizePxMap = {\n small: 360,\n medium: 479,\n large: 798,\n};\n\nexport interface CubeDialogProps\n extends Omit<BaseProps, 'role'>,\n AriaDialogProps,\n BaseStyleProps,\n BlockStyleProps,\n DimensionStyleProps {\n /** The size of the dialog /\n size?: 'S' \| 'M' \| 'L' \| 'small' \| 'medium' \| 'large';\n /* Whether the dialog is dismissable /\n isDismissable?: boolean;\n /* Trigger when the dialog is dismissed /\n onDismiss?: (arg?: any) => void;\n /* That you can replace the close icon with /\n closeIcon?: ReactElement;\n /* Size of the dismiss button. Defaults to the button's own default (medium). /\n closeButtonSize?: 'small' \| 'medium' \| 'large';\n closeButtonStyles?: Styles;\n role?: 'dialog' \| 'alertdialog';\n}\n\n/\n Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n /\nexport const Dialog = forwardRef(function Dialog(\n props: CubeDialogProps,\n ref: Ref<HTMLDivElement>,\n) {\n const transitionContext = useOpenTransitionContext();\n\n const isEntered = transitionContext?.transitionState === 'entered';\n\n const context = useDialogContext();\n\n const content = useMemo(() => {\n return <DialogContent key=\"content\" {...props} ref={ref} />;\n }, [props, ref]);\n\n const shouldContainFocus =\n isEntered && !!context.isOpen && context.type !== 'panel';\n\n return (\n // This component traps the focus inside the dialog and restores it on close.\n <FocusScope restoreFocus contain={shouldContainFocus}>\n {content}\n </FocusScope>\n );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n props: CubeDialogProps,\n ref: Ref<HTMLDivElement>,\n) {\n let { type = 'modal', ...contextProps } = useDialogContext();\n\n let {\n qa,\n children,\n size = 'M',\n isDismissable = contextProps.isDismissable,\n onDismiss = contextProps.onClose,\n closeIcon,\n closeButtonSize,\n closeButtonStyles,\n style,\n ...otherProps\n } = props;\n\n size = sizeMap[size.toUpperCase()] \|\| size;\n\n const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n const { t } = useI18n();\n\n let domRef = useObjectRef(ref);\n let { dialogProps, titleProps } = useDialog(\n mergeProps(contextProps, props),\n domRef,\n );\n\n // If rendered in a popover or tray there won't be a visible dismiss button,\n // so we render a hidden one for screen readers.\n let dismissButton;\n if (type === 'popover' \|\| type === 'tray') {\n dismissButton = <DismissButton onDismiss={onDismiss} />;\n }\n\n // Focus the first focusable element in the dialog when it opens.\n //\n // We also re-run the priority focus logic when the dialog <section>\n // itself is the active element. This recovers from a race that occurs\n // when a popover-based component (FilterPicker, Picker, Select, …) opens\n // inside another contained Dialog: React's native `autoFocus` on the\n // inner control fires during the mutation phase, before the popover's\n // FocusScope registers in react-aria's focus-scope tree, so the outer\n // FocusScope yanks focus back. useDialog then defaults focus to the\n // dialog <section>; without re-promoting it here, the priority element\n // (e.g. the search input) is never focused.\n useEffect(() => {\n if (contextProps.isOpen) {\n setTimeout(() => {\n if (!domRef.current) return;\n\n const activeElement = document.activeElement;\n const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n const isFocusOnDialogShell = activeElement === domRef.current;\n\n // Priority 1: autofocus input or primary button\n const priorityElement = domRef.current.querySelector(\n 'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n ) as HTMLElement \| null;\n\n if (priorityElement && (isFocusOutsideDialog \|\| isFocusOnDialogShell)) {\n priorityElement.focus();\n return;\n }\n\n if (isFocusOutsideDialog) {\n // Fallback: focus first tabbable element, or dialog itself\n const focusManager = createFocusManager(domRef);\n\n if (!focusManager.focusFirst({ tabbable: true })) {\n domRef.current.focus();\n }\n }\n });\n }\n }, [contextProps.isOpen]);\n\n // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n let slots = {\n title: {\n level: 2,\n preset: 'h4',\n ...titleProps,\n },\n content: {\n styles: {\n flexGrow: 1,\n padding: '$dialog-content-padding-v $dialog-padding-h',\n gap: '$dialog-content-gap',\n height: {\n '': 'max (100% - (2 $dialog-content-padding-v))',\n ':last-child': 'max (100% - $dialog-content-padding-v)',\n },\n },\n },\n header: {\n ellipsis: true,\n styles: {\n display: 'flex',\n flow: 'row',\n gap: '1x',\n placeItems: 'center stretch',\n placeContent: 'space-between',\n padding: `$dialog-title-padding-v ${\n isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n } $dialog-title-padding-v $dialog-padding-h`,\n border: 'bottom',\n },\n },\n footer: {\n styles: {\n display: 'flex',\n gap: '1x',\n flow: 'row-reverse',\n placeItems: 'baseline stretch',\n placeContent: 'space-between',\n padding: '$dialog-footer-v $dialog-padding-h',\n },\n },\n buttonGroup: {\n styles: {\n flow: 'row-reverse',\n },\n },\n };\n\n return (\n <DialogElement\n ref={domRef}\n data-id=\"Dialog\"\n data-qa={qa \|\| 'Dialog'}\n styles={styles}\n as=\"section\"\n {...dialogProps}\n mods={{ dismissable: isDismissable }}\n style={{\n '--dialog-size': `${sizePxMap[size] \|\| sizePxMap.small}px`,\n ...style,\n }}\n data-type={type}\n data-size={size}\n >\n {dismissButton}\n\n <SlotProvider slots={slots}>\n {isDismissable && (\n <CloseButton\n size={closeButtonSize}\n icon={closeIcon \|\| <CloseIcon size={20} />}\n label={t('dialog.dismiss', 'Dismiss')}\n onPress={() => onDismiss && onDismiss()}\n />\n )}\n {children}\n </SlotProvider>\n </DialogElement>\n );\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useObjectRef } from '@react-aria/utils';\nimport {\n BASE_STYLES,\n BaseProps,\n BaseStyleProps,\n BLOCK_STYLES,\n BlockStyleProps,\n DIMENSION_STYLES,\n DimensionStyleProps,\n FLOW_STYLES,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, ReactElement, Ref, useEffect, useMemo } from 'react';\nimport {\n AriaDialogProps,\n DismissButton,\n FocusScope,\n useDialog,\n} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n ...BASE_STYLES,\n ...DIMENSION_STYLES,\n ...BLOCK_STYLES,\n ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n as: 'section',\n styles: {\n display: 'flex',\n flow: 'column',\n fill: '#surface',\n pointerEvents: 'auto',\n outline: 0,\n position: {\n '': 'relative',\n 'type=panel': 'absolute',\n },\n width: {\n '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n 'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n 'type=fullscreenTakeover': '100dvw 100dvw',\n 'type=panel': 'auto',\n },\n height: {\n '': 'auto (100dvh - 8x)',\n 'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n 'type=fullscreenTakeover \| type=panel': '100dvh 100dvh',\n 'type=popover': 'initial initial (50dvh - 5x)',\n },\n gap: 0,\n border: {\n '': false,\n 'type=popover': true,\n },\n radius: {\n '': '1cr',\n 'type=tray': '1cr top',\n 'type=fullscreenTakeover': '0r',\n },\n shadow: {\n '': '$dialog-shadow',\n 'type=popover \| type=panel': '$shadow',\n },\n top: {\n '': false,\n 'type=modal': '((50vh - 50%) / -3)',\n 'type=panel': 'auto',\n },\n '$dialog-title-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-padding-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-padding-h': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-footer-v': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n '$dialog-content-gap': {\n '': '1.5x',\n 'type=popover': '1x',\n },\n },\n});\n\nconst CloseButton = tasty(ItemButton, {\n qa: 'ModalCloseButton',\n type: 'clear',\n styles: {\n position: 'absolute',\n top: '1x',\n right: '1x',\n },\n});\n\nconst sizeMap = {\n S: 'small',\n M: 'medium',\n L: 'large',\n};\nconst sizePxMap = {\n small: 360,\n medium: 479,\n large: 798,\n};\n\nexport interface CubeDialogProps\n extends Omit<BaseProps, 'role'>,\n AriaDialogProps,\n BaseStyleProps,\n BlockStyleProps,\n DimensionStyleProps {\n /** The size of the dialog /\n size?: 'S' \| 'M' \| 'L' \| 'small' \| 'medium' \| 'large';\n /* Whether the dialog is dismissable /\n isDismissable?: boolean;\n /* Trigger when the dialog is dismissed /\n onDismiss?: (arg?: any) => void;\n /* That you can replace the close icon with /\n closeIcon?: ReactElement;\n closeButtonStyles?: Styles;\n role?: 'dialog' \| 'alertdialog';\n}\n\n/\n Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n /\nexport const Dialog = forwardRef(function Dialog(\n props: CubeDialogProps,\n ref: Ref<HTMLDivElement>,\n) {\n const transitionContext = useOpenTransitionContext();\n\n const isEntered = transitionContext?.transitionState === 'entered';\n\n const context = useDialogContext();\n\n const content = useMemo(() => {\n return <DialogContent key=\"content\" {...props} ref={ref} />;\n }, [props, ref]);\n\n const shouldContainFocus =\n isEntered && !!context.isOpen && context.type !== 'panel';\n\n return (\n // This component traps the focus inside the dialog and restores it on close.\n <FocusScope restoreFocus contain={shouldContainFocus}>\n {content}\n </FocusScope>\n );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n props: CubeDialogProps,\n ref: Ref<HTMLDivElement>,\n) {\n let { type = 'modal', ...contextProps } = useDialogContext();\n\n let {\n qa,\n children,\n size = 'M',\n isDismissable = contextProps.isDismissable,\n onDismiss = contextProps.onClose,\n closeIcon,\n closeButtonStyles,\n style,\n ...otherProps\n } = props;\n\n size = sizeMap[size.toUpperCase()] \|\| size;\n\n const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n const { t } = useI18n();\n\n let domRef = useObjectRef(ref);\n let { dialogProps, titleProps } = useDialog(\n mergeProps(contextProps, props),\n domRef,\n );\n\n // If rendered in a popover or tray there won't be a visible dismiss button,\n // so we render a hidden one for screen readers.\n let dismissButton;\n if (type === 'popover' \|\| type === 'tray') {\n dismissButton = <DismissButton onDismiss={onDismiss} />;\n }\n\n // Focus the first focusable element in the dialog when it opens.\n //\n // We also re-run the priority focus logic when the dialog <section>\n // itself is the active element. This recovers from a race that occurs\n // when a popover-based component (FilterPicker, Picker, Select, …) opens\n // inside another contained Dialog: React's native `autoFocus` on the\n // inner control fires during the mutation phase, before the popover's\n // FocusScope registers in react-aria's focus-scope tree, so the outer\n // FocusScope yanks focus back. useDialog then defaults focus to the\n // dialog <section>; without re-promoting it here, the priority element\n // (e.g. the search input) is never focused.\n useEffect(() => {\n if (contextProps.isOpen) {\n setTimeout(() => {\n if (!domRef.current) return;\n\n const activeElement = document.activeElement;\n const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n const isFocusOnDialogShell = activeElement === domRef.current;\n\n // Priority 1: autofocus input or primary button\n const priorityElement = domRef.current.querySelector(\n 'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n ) as HTMLElement \| null;\n\n if (priorityElement && (isFocusOutsideDialog \|\| isFocusOnDialogShell)) {\n priorityElement.focus();\n return;\n }\n\n if (isFocusOutsideDialog) {\n // Fallback: focus first tabbable element, or dialog itself\n const focusManager = createFocusManager(domRef);\n\n if (!focusManager.focusFirst({ tabbable: true })) {\n domRef.current.focus();\n }\n }\n });\n }\n }, [contextProps.isOpen]);\n\n // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n let slots = {\n title: {\n level: 2,\n preset: 'h4',\n ...titleProps,\n },\n content: {\n styles: {\n flexGrow: 1,\n padding: '$dialog-content-padding-v $dialog-padding-h',\n gap: '$dialog-content-gap',\n height: {\n '': 'max (100% - (2 $dialog-content-padding-v))',\n ':last-child': 'max (100% - $dialog-content-padding-v)',\n },\n },\n },\n header: {\n ellipsis: true,\n styles: {\n display: 'flex',\n flow: 'row',\n gap: '1x',\n placeItems: 'center stretch',\n placeContent: 'space-between',\n padding: `$dialog-title-padding-v ${\n isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n } $dialog-title-padding-v $dialog-padding-h`,\n border: 'bottom',\n },\n },\n footer: {\n styles: {\n display: 'flex',\n gap: '1x',\n flow: 'row-reverse',\n placeItems: 'baseline stretch',\n placeContent: 'space-between',\n padding: '$dialog-footer-v $dialog-padding-h',\n },\n },\n buttonGroup: {\n styles: {\n flow: 'row-reverse',\n },\n },\n };\n\n return (\n <DialogElement\n ref={domRef}\n data-id=\"Dialog\"\n data-qa={qa \|\| 'Dialog'}\n styles={styles}\n as=\"section\"\n {...dialogProps}\n mods={{ dismissable: isDismissable }}\n style={{\n '--dialog-size': `${sizePxMap[size] \|\| sizePxMap.small}px`,\n ...style,\n }}\n data-type={type}\n data-size={size}\n >\n {dismissButton}\n\n <SlotProvider slots={slots}>\n {isDismissable && (\n <CloseButton\n icon={closeIcon \|\| <CloseIcon size={20} />}\n label={t('dialog.dismiss', 'Dismiss')}\n onPress={() => onDismiss && onDismiss()}\n />\n )}\n {children}\n </SlotProvider>\n </DialogElement>\n );\n});\n"],"mappings":"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"}

package/dist/components/overlays/Dialog/DialogContainer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _Modal } from "../Modal/Modal.js";
 import { DialogContext } from "./context.js";
 import { Children, isValidElement, useRef } from "react";

package/dist/components/overlays/Dialog/DialogForm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { _Title } from "../../content/Title.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";

package/dist/components/overlays/Dialog/DialogTrigger.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";

package/dist/components/overlays/Dialog/context.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import invariant from "tiny-invariant";

package/dist/components/overlays/Dialog/use-dialog-container.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { DialogContainer } from "./DialogContainer.js";

package/dist/components/overlays/Modal/Modal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Overlay } from "./Overlay.js";
 import { _Underlay } from "./Underlay.js";
@@ -34,11 +34,12 @@ const ModalWrapperElement = tasty({
 	styles: OVERLAY_WRAPPER_STYLES
 });
 const ModalElement = tasty({ styles: {
-	display: {
-		"": "none",
-		"enter | entered": "grid",
-		exit: "grid",
-		unmounted: "none"
+	display: "grid",
+	hide: {
+		"": true,
+		"enter | entered": false,
+		exit: false,
+		unmounted: true
 	},
 	zIndex: 10,
 	height: {

package/dist/components/overlays/Modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","names":["Overlay","Underlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Props, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n position: 'fixed',\n display: 'grid',\n left: 0,\n top: 0,\n placeItems: {\n '': 'center',\n 'type=fullscreen': 'center',\n 'type=fullscreenTakeover \| type=panel': 'stretch',\n },\n boxSizing: 'border-box',\n width: '100vw',\n height: '100dvh',\n pointerEvents: 'none',\n zIndex: 10,\n transition: {\n '': 'visibility .5s steps(2, start)',\n open: 'visibility 0s linear',\n },\n};\n\nconst ModalWrapperElement = tasty({\n qa: 'ModalWrapper',\n styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n styles: {\n display: {\n '': ~~'none'~~,\n 'enter \| entered': ~~'grid'~~,\n exit: ~~'grid'~~,\n unmounted: ~~'none'~~,\n },\n zIndex: 10,\n height: {\n '': 'max 90dvh',\n 'type=fullscreenTakeover \| type=panel': '100dvh 100dvh',\n 'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n 'type=panel': 'auto',\n },\n width: {\n '': '$min-dialog-size (100dvw - 8x)',\n 'type=panel': 'auto',\n },\n pointerEvents: 'none',\n transition: 'opacity .25s linear, transform .25s ease-in-out',\n transform: {\n '': 'initial',\n 'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n '(type^=fullscreen \| type=panel) & !open':\n 'translate(0, 0) scale(1.02, 1.02)',\n },\n opacity: {\n '': 0,\n open: 0.9999,\n },\n },\n});\n\nexport interface CubeModalProps\n extends Omit<ModalProps, 'container' \| 'type' \| 'nodeRef'>,\n WithCloseBehavior {\n container?: HTMLElement;\n qa?: BaseProps['qa'];\n onClose?: (action?: string) => void;\n type?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' \| 'panel';\n styles?: Styles;\n shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref) {\n let { qa, children, onClose, type, styles, ...otherProps } = props;\n let domRef = useObjectRef(ref);\n\n let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);\n\n return (\n <Overlay {...otherProps}>\n {type !== 'fullscreenTakeover' && type !== 'panel' && (\n <Underlay {...underlayProps} />\n )}\n <ModalWrapper\n ref={domRef}\n qa={qa}\n type={type}\n overlayProps={overlayProps}\n styles={styles}\n onClose={onClose}\n >\n {children}\n </ModalWrapper>\n </Overlay>\n );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n children?: ReactNode;\n qa?: BaseProps['qa'];\n isOpen?: boolean;\n type?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' \| 'panel';\n placement?: 'top' \| 'bottom';\n styles?: Styles;\n overlayProps?: Props;\n onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n props: ModalWrapperProps,\n ref,\n) {\n let {\n qa,\n children,\n isOpen,\n type,\n placement,\n styles,\n overlayProps,\n transitionState,\n ...otherProps\n } = props;\n\n usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n return (\n <ModalWrapperElement data-type={type} data-placement={placement}>\n <ModalElement\n qa={qa \|\| 'Modal'}\n styles={styles}\n mods={{\n open: isOpen,\n enter: transitionState === 'enter',\n exit: transitionState === 'exit',\n unmounted: transitionState === 'unmounted',\n entered: transitionState === 'entered',\n }}\n data-type={type}\n data-placement={placement}\n {...mergeProps(otherProps, overlayProps, modalProps)}\n ref={ref}\n >\n {children}\n </ModalElement>\n </ModalWrapperElement>\n );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,yBAAiC;CAC5C,UAAU;CACV,SAAS;CACT,MAAM;CACN,KAAK;CACL,YAAY;EACV,IAAI;EACJ,mBAAmB;EACnB,wCAAwC;EACzC;CACD,WAAW;CACX,OAAO;CACP,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;EACV,IAAI;EACJ,MAAM;EACP;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;~~EACP~~,IAAI;EACJ,mBAAmB;EACnB,MAAM;EACN,WAAW;EACZ;CACD,QAAQ;CACR,QAAQ;EACN,IAAI;EACJ,wCAAwC;EACxC,mBAAmB;EACnB,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,cAAc;EACf;CACD,eAAe;CACf,YAAY;CACZ,WAAW;EACT,IAAI;EACJ,sBAAsB;EACtB,2CACE;EACH;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACP;CACF,EACF,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;CACzC,IAAI,EAAE,IAAI,UAAU,SAAS,MAAM,QAAQ,GAAG,eAAe;CAC7D,IAAI,SAAS,aAAa,IAAI;CAE9B,IAAI,EAAE,cAAc,kBAAkB,WAAW,EAAE,GAAG,OAAO,EAAE,OAAO;AAEtE,QACE,qBAACA;EAAQ,GAAI;aACV,SAAS,wBAAwB,SAAS,WACzC,oBAACC,aAAS,GAAI,gBAAiB,EAEjC,oBAAC;GACC,KAAK;GACD;GACE;GACQ;GACN;GACC;GAER;IACY;GACP;;AAed,IAAI,eAAe,WAAW,SAAS,aACrC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,QACA,MACA,WACA,QACA,cACA,iBACA,GAAG,eACD;AAEJ,kBAAiB,EAAE,YAAY,oBAAoB,WAAW,CAAC;CAE/D,IAAI,EAAE,eAAe,SAAS,EAAE,YAAY,oBAAoB,WAAW,CAAC;AAE5E,QACE,oBAAC;EAAoB,aAAW;EAAM,kBAAgB;YACpD,oBAAC;GACC,IAAI,MAAM;GACF;GACR,MAAM;IACJ,MAAM;IACN,OAAO,oBAAoB;IAC3B,MAAM,oBAAoB;IAC1B,WAAW,oBAAoB;IAC/B,SAAS,oBAAoB;IAC9B;GACD,aAAW;GACX,kBAAgB;GAChB,GAAIC,aAAW,YAAY,cAAc,WAAW;GAC/C;GAEJ;IACY;GACK;EAExB;AAEF,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
1	+ {"version":3,"file":"Modal.js","names":["Overlay","Underlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Props, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n position: 'fixed',\n display: 'grid',\n left: 0,\n top: 0,\n placeItems: {\n '': 'center',\n 'type=fullscreen': 'center',\n 'type=fullscreenTakeover \| type=panel': 'stretch',\n },\n boxSizing: 'border-box',\n width: '100vw',\n height: '100dvh',\n pointerEvents: 'none',\n zIndex: 10,\n transition: {\n '': 'visibility .5s steps(2, start)',\n open: 'visibility 0s linear',\n },\n};\n\nconst ModalWrapperElement = tasty({\n qa: 'ModalWrapper',\n styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n styles: {\n display: 'grid',\n hide: {\n '': true,\n 'enter \| entered': false,\n exit: false,\n unmounted: true,\n },\n zIndex: 10,\n height: {\n '': 'max 90dvh',\n 'type=fullscreenTakeover \| type=panel': '100dvh 100dvh',\n 'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n 'type=panel': 'auto',\n },\n width: {\n '': '$min-dialog-size (100dvw - 8x)',\n 'type=panel': 'auto',\n },\n pointerEvents: 'none',\n transition: 'opacity .25s linear, transform .25s ease-in-out',\n transform: {\n '': 'initial',\n 'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n '(type^=fullscreen \| type=panel) & !open':\n 'translate(0, 0) scale(1.02, 1.02)',\n },\n opacity: {\n '': 0,\n open: 0.9999,\n },\n },\n});\n\nexport interface CubeModalProps\n extends Omit<ModalProps, 'container' \| 'type' \| 'nodeRef'>,\n WithCloseBehavior {\n container?: HTMLElement;\n qa?: BaseProps['qa'];\n onClose?: (action?: string) => void;\n type?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' \| 'panel';\n styles?: Styles;\n shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref) {\n let { qa, children, onClose, type, styles, ...otherProps } = props;\n let domRef = useObjectRef(ref);\n\n let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);\n\n return (\n <Overlay {...otherProps}>\n {type !== 'fullscreenTakeover' && type !== 'panel' && (\n <Underlay {...underlayProps} />\n )}\n <ModalWrapper\n ref={domRef}\n qa={qa}\n type={type}\n overlayProps={overlayProps}\n styles={styles}\n onClose={onClose}\n >\n {children}\n </ModalWrapper>\n </Overlay>\n );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n children?: ReactNode;\n qa?: BaseProps['qa'];\n isOpen?: boolean;\n type?: 'modal' \| 'fullscreen' \| 'fullscreenTakeover' \| 'panel';\n placement?: 'top' \| 'bottom';\n styles?: Styles;\n overlayProps?: Props;\n onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n props: ModalWrapperProps,\n ref,\n) {\n let {\n qa,\n children,\n isOpen,\n type,\n placement,\n styles,\n overlayProps,\n transitionState,\n ...otherProps\n } = props;\n\n usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n return (\n <ModalWrapperElement data-type={type} data-placement={placement}>\n <ModalElement\n qa={qa \|\| 'Modal'}\n styles={styles}\n mods={{\n open: isOpen,\n enter: transitionState === 'enter',\n exit: transitionState === 'exit',\n unmounted: transitionState === 'unmounted',\n entered: transitionState === 'entered',\n }}\n data-type={type}\n data-placement={placement}\n {...mergeProps(otherProps, overlayProps, modalProps)}\n ref={ref}\n >\n {children}\n </ModalElement>\n </ModalWrapperElement>\n );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,yBAAiC;CAC5C,UAAU;CACV,SAAS;CACT,MAAM;CACN,KAAK;CACL,YAAY;EACV,IAAI;EACJ,mBAAmB;EACnB,wCAAwC;EACzC;CACD,WAAW;CACX,OAAO;CACP,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;EACV,IAAI;EACJ,MAAM;EACP;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,MAAM;EACJ,IAAI;EACJ,mBAAmB;EACnB,MAAM;EACN,WAAW;EACZ;CACD,QAAQ;CACR,QAAQ;EACN,IAAI;EACJ,wCAAwC;EACxC,mBAAmB;EACnB,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,cAAc;EACf;CACD,eAAe;CACf,YAAY;CACZ,WAAW;EACT,IAAI;EACJ,sBAAsB;EACtB,2CACE;EACH;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACP;CACF,EACF,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;CACzC,IAAI,EAAE,IAAI,UAAU,SAAS,MAAM,QAAQ,GAAG,eAAe;CAC7D,IAAI,SAAS,aAAa,IAAI;CAE9B,IAAI,EAAE,cAAc,kBAAkB,WAAW,EAAE,GAAG,OAAO,EAAE,OAAO;AAEtE,QACE,qBAACA;EAAQ,GAAI;aACV,SAAS,wBAAwB,SAAS,WACzC,oBAACC,aAAS,GAAI,gBAAiB,EAEjC,oBAAC;GACC,KAAK;GACD;GACE;GACQ;GACN;GACC;GAER;IACY;GACP;;AAed,IAAI,eAAe,WAAW,SAAS,aACrC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,QACA,MACA,WACA,QACA,cACA,iBACA,GAAG,eACD;AAEJ,kBAAiB,EAAE,YAAY,oBAAoB,WAAW,CAAC;CAE/D,IAAI,EAAE,eAAe,SAAS,EAAE,YAAY,oBAAoB,WAAW,CAAC;AAE5E,QACE,oBAAC;EAAoB,aAAW;EAAM,kBAAgB;YACpD,oBAAC;GACC,IAAI,MAAM;GACF;GACR,MAAM;IACJ,MAAM;IACN,OAAO,oBAAoB;IAC3B,MAAM,oBAAoB;IAC1B,WAAW,oBAAoB;IAC/B,SAAS,oBAAoB;IAC9B;GACD,aAAW;GACX,kBAAgB;GAChB,GAAIC,aAAW,YAAY,cAAc,WAAW;GAC/C;GAEJ;IACY;GACK;EAExB;AAEF,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

package/dist/components/overlays/Modal/OpenTransitionContext.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b376419 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0c97570 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/overlays/Modal/OpenTransitionContext.tsx