@cube-dev/ui-kit 0.0.0-canary-623f64b → 0.0.0-canary-dd0f9c9

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";
@@ -24,8 +24,8 @@ const TreeElement = tasty({
 		flow: "column",
 		width: "100%",
 		height: {
-			"": "auto",
-			"has-height": "fixed $tree-height"
+			"": "min 0",
+			"has-height": "0 $tree-height $tree-height"
 		},
 		flexGrow: {
 			"": 1,
@@ -39,7 +39,6 @@ const TreeElement = tasty({
 			"": 0,
 			"has-height": "auto"
 		},
-		minHeight: 0,
 		fill: "#clear",
 		color: "#dark",
 		transition: "theme",

package/dist/components/content/Tree/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n * This element is the outer flex layout container; scrolling is\n * delegated to the inner `TreeScrollContainer` so the virtualized\n * sizer (a flex item here would be squashed by `flex-shrink: 1`) is\n * placed inside a normal block formatting context.\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'auto', 'has-height': 'fixed $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    minHeight: 0,\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': 0, 'shape=card': true },\n  },\n});\n\n/**\n * Inner scroll viewport. Block-level on purpose — placing the\n * virtualizer's sizer (`height: ${totalSize}px`) directly inside the\n * flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes\n * the scroll area visibly grow as `@tanstack/react-virtual`\n * re-measures rows during scroll.\n */\nexport const TreeScrollContainer = tasty({\n  qa: 'TreeScrollContainer',\n  styles: {\n    display: 'block',\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: 'auto',\n    width: '0 100% initial',\n    height: 'min 0',\n    overflow: 'auto',\n    scrollbar: 'thin',\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    placeSelf: 'stretch',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAQ,cAAc;GAAsB;EAC1D,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,WAAW;EACX,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACT,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAM;EACtC;CACF,CAAC;;;;;;;;AASF,MAAa,sBAAsB,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACZ;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,WAAW;EACX,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n * This element is the outer flex layout container; scrolling is\n * delegated to the inner `TreeScrollContainer` so the virtualized\n * sizer (a flex item here would be squashed by `flex-shrink: 1`) is\n * placed inside a normal block formatting context.\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'min 0', 'has-height': '0 $tree-height $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': 0, 'shape=card': true },\n  },\n});\n\n/**\n * Inner scroll viewport. Block-level on purpose — placing the\n * virtualizer's sizer (`height: ${totalSize}px`) directly inside the\n * flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes\n * the scroll area visibly grow as `@tanstack/react-virtual`\n * re-measures rows during scroll.\n */\nexport const TreeScrollContainer = tasty({\n  qa: 'TreeScrollContainer',\n  styles: {\n    display: 'block',\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: 'auto',\n    width: '0 100% initial',\n    height: 'min 0',\n    overflow: 'auto',\n    scrollbar: 'thin',\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    placeSelf: 'stretch',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAS,cAAc;GAA+B;EACpE,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACT,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAM;EACtC;CACF,CAAC;;;;;;;;AASF,MAAa,sBAAsB,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACZ;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,WAAW;EACX,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | 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/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -29,7 +29,7 @@ const EditableSegmentElement = tasty({
 			":focus": "#primary"
 		},
 		radius: ".25x",
-		Placeholder: { opacity: "var(--disabled-opacity)" }
+		Placeholder: { opacity: "$disabled-opacity" }
 	}
 });
 function DatePickerSegment({ segment, state, ...otherProps }) {

package/dist/components/fields/DatePicker/DatePickerSegment.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: 'var(--disabled-opacity)',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,2BACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}
+{"version":3,"file":"DatePickerSegment.js","names":[],"sources":["../../../../src/components/fields/DatePicker/DatePickerSegment.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useDateSegment } from 'react-aria';\nimport { DateFieldState, DateSegment } from 'react-stately';\n\nimport { DateFieldBase } from './types';\n\ninterface DatePickerSegmentProps extends DateFieldBase<DateValue> {\n  segment: DateSegment;\n  state: DateFieldState;\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment;\n}\n\nconst LiteralSegmentElement = tasty({\n  qa: 'LiteralSegment',\n  as: 'span',\n  'aria-hidden': 'true',\n  styles: {},\n});\n\nconst EditableSegmentElement = tasty({\n  qa: 'EditableSegment',\n  styles: {\n    padding: '0 1bw',\n    fontVariantNumeric: 'tabular-nums lining-nums',\n    textAlign: 'right',\n    font: 'monospace',\n    border: 0,\n    outline: 0,\n    color: {\n      '': 'inherit',\n      ':focus': '#white',\n    },\n    fill: {\n      '': '#clear',\n      ':focus': '#primary',\n    },\n    radius: '.25x',\n\n    Placeholder: {\n      opacity: '$disabled-opacity',\n    },\n  },\n});\n\nexport function DatePickerSegment({\n  segment,\n  state,\n  ...otherProps\n}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return (\n        <EditableSegment segment={segment} state={state} {...otherProps} />\n      );\n  }\n}\n\nfunction LiteralSegment({ segment }: LiteralSegmentProps) {\n  return (\n    <LiteralSegmentElement\n      data-type={segment.type === 'literal' ? undefined : segment.type}\n    >\n      {segment.text}\n    </LiteralSegmentElement>\n  );\n}\n\nfunction EditableSegment({ segment, state }: DatePickerSegmentProps) {\n  let ref = useRef(null);\n  let { segmentProps } = useDateSegment(segment, state, ref);\n  return (\n    <EditableSegmentElement\n      {...segmentProps}\n      ref={ref}\n      mods={{\n        placeholder: segment.isPlaceholder,\n        'read-only': !segment.isEditable,\n      }}\n      style={{\n        ...segmentProps.style,\n        minWidth:\n          segment.maxValue != null\n            ? `calc(${String(segment.maxValue).length + 'ch'})`\n            : undefined,\n      }}\n      data-testid={segment.type}\n    >\n      {segment.isPlaceholder ? (\n        <span data-element=\"Placeholder\" aria-hidden=\"true\">\n          {segment.placeholder}\n        </span>\n      ) : (\n        segment.text\n      )}\n    </EditableSegmentElement>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,eAAe;CACf,QAAQ,EAAE;CACX,CAAC;AAEF,MAAM,yBAAyB,MAAM;CACnC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,oBAAoB;EACpB,WAAW;EACX,MAAM;EACN,QAAQ;EACR,SAAS;EACT,OAAO;GACL,IAAI;GACJ,UAAU;GACX;EACD,MAAM;GACJ,IAAI;GACJ,UAAU;GACX;EACD,QAAQ;EAER,aAAa,EACX,SAAS,qBACV;EACF;CACF,CAAC;AAEF,SAAgB,kBAAkB,EAChC,SACA,OACA,GAAG,cACsB;AACzB,SAAQ,QAAQ,MAAhB;EAEE,KAAK,UACH,QAAO,oBAAC,kBAAwB,UAAW;EAG7C,QACE,QACE,oBAAC;GAAyB;GAAgB;GAAO,GAAI;IAAc;;;AAK3E,SAAS,eAAe,EAAE,WAAgC;AACxD,QACE,oBAAC;EACC,aAAW,QAAQ,SAAS,YAAY,SAAY,QAAQ;YAE3D,QAAQ;GACa;;AAI5B,SAAS,gBAAgB,EAAE,SAAS,SAAiC;CACnE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EAAE,iBAAiB,eAAe,SAAS,OAAO,IAAI;AAC1D,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;GACJ,aAAa,QAAQ;GACrB,aAAa,CAAC,QAAQ;GACvB;EACD,OAAO;GACL,GAAG,aAAa;GAChB,UACE,QAAQ,YAAY,OAChB,QAAQ,OAAO,QAAQ,SAAS,CAAC,SAAS,KAAK,KAC/C;GACP;EACD,eAAa,QAAQ;YAEpB,QAAQ,gBACP,oBAAC;GAAK,gBAAa;GAAc,eAAY;aAC1C,QAAQ;IACJ,GAEP,QAAQ;GAEa"}

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | 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";

package/dist/components/fields/FilterPicker/FilterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | Cube Dev Team */
 import { _FileInput } from "../FileInput/FileInput.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { _NumberInput } from "../NumberInput/NumberInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

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

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-623f64b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dd0f9c9 | 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";
@@ -87,9 +87,9 @@ const ListBoxItem = tasty(_Item, {
 	disableActionsFocus: true,
 	styles: {
 		margin: {
-			"": "0 0 1bw 0",
+			"": "1bw bottom",
 			":last-of-type": "0",
-			"draggable & :last-of-type": "0 0 .5x 0",
+			"draggable & :last-of-type": ".5x bottom",
 			all: ".5x"
 		},
 		Icon: {
@@ -131,7 +131,7 @@ const SectionWrapperElement = tasty({
 		display: "block",
 		padding: {
 			"": 0,
-			":last-of-type": "0 0 .5x 0"
+			":last-of-type": ".5x bottom"
 		}
 	}
 });