@cube-dev/ui-kit 0.138.6 → 0.140.0

package/dist/components/content/Layout/LayoutHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"back title suffix extra\" 1fr\n        \".. subtitle subtitle extra\" auto\n        / auto max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 / strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"neutral\"\n            icon={<IconArrowLeft />}\n            aria-label=\"Go back\"\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,MAAM;GACJ,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,QAAQ;GACT;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAsBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,QACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;EACb;;GAEV,mBAAmB;GACnB,UACC,oBAAC;IAAI,gBAAa;cAChB,oBAAC;KACC,MAAK;KACL,MAAM,oBAAC,kBAAgB;KACvB,cAAW;KACX,SAAS;MACT;KACE;GAEP,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import { IconArrowLeft } from '@tabler/icons-react';\nimport { tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { Button } from '../../actions/Button/Button';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"back title suffix extra\" 1fr\n        \".. subtitle subtitle extra\" auto\n        / auto max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Back: {\n      $: '> Inner >',\n      gridArea: 'back',\n      display: 'flex',\n      placeItems: 'center',\n      margin: '.5x right',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 / strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n  /** Callback for the back button. When provided, a back arrow button is rendered to the left of the title. */\n  onBack?: () => void;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    onBack,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {onBack && (\n        <div data-element=\"Back\">\n          <Button\n            type=\"clear\"\n            icon={<IconArrowLeft />}\n            aria-label=\"Go back\"\n            onPress={onBack}\n          />\n        </div>\n      )}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,MAAM;GACJ,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,QAAQ;GACT;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAsBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,QACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;EACb;;GAEV,mBAAmB;GACnB,UACC,oBAAC;IAAI,gBAAa;cAChB,oBAAC;KACC,MAAK;KACL,MAAM,oBAAC,kBAAgB;KACvB,cAAW;KACX,SAAS;MACT;KACE;GAEP,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/content/Layout/LayoutPane.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { _Item } from "../Item/Item.js";

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

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

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

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

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

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

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

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

package/dist/components/content/Paragraph.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { _Text } from "./Text.js";
 import { CONTAINER_STYLES, TEXT_STYLES } from "@tenphi/tasty";

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

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

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

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

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

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/FilterPicker/FilterPicker.d.ts

@@ -10,6 +10,7 @@ import "../ListBox/index.js";
 import { CubeFilterListBoxProps } from "../FilterListBox/FilterListBox.js";
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
+import { Placement } from "react-aria";
 import { ListState, Section } from "react-stately";
 
 //#region src/components/fields/FilterPicker/FilterPicker.d.ts
@@ -28,6 +29,13 @@ interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'size
   isCheckable?: boolean;
   /** Whether to flip the popover placement */
   shouldFlip?: boolean;
+  /**
+   * Placement of the popover relative to the trigger.
+   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,
+   * `'top start'`, `'right top'`, `'left top'`).
+   * @default 'bottom start'
+   */
+  placement?: Placement;
   /** Minimum padding in pixels between the popover and viewport edges */
   containerPadding?: number;
   /** Tooltip for the trigger button (separate from field tooltip) */

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

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
@@ -55,7 +56,7 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { qa, label, extra, id, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = "All", items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, isLoadingItems, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, isReorderable, onReorder, form, ...otherProps } = props;
+	let { qa, label, extra, id, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = "medium", styles, listBoxStyles, popoverStyles, type = "outline", theme = "default", shape, labelSuffix, shouldFocusWrap, children, shouldFlip = true, placement = "bottom start", containerPadding = 8, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = "single", listStateRef, focusOnHover, showSelectAll, selectAllLabel = "All", items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, isLoadingItems, searchValue, onSearchChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, isReorderable, onReorder, form, ...otherProps } = props;
 	const sortSelectedToTopExplicit = sortSelectedToTopProp !== void 0;
 	const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);
 	styles = extractStyles(otherProps, PROP_STYLES, styles);
@@ -287,13 +288,16 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 			...externalMods
 		},
 		icon,
-		rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemAction, {
-			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
-			size,
-			theme: validationState === "invalid" ? "danger" : void 0,
-			qa: "FilterPickerClearButton",
-			mods: { pressed: false },
-			onPress: clearValue
+		rightIcon: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : rightIcon !== void 0 ? rightIcon : showClearButton ? /* @__PURE__ */ jsx(ItemActionProvider, {
+			type,
+			theme: validationState === "invalid" ? "danger" : theme,
+			children: /* @__PURE__ */ jsx(ItemAction, {
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				size,
+				qa: "FilterPickerClearButton",
+				mods: { pressed: false },
+				onPress: clearValue
+			})
 		}) : /* @__PURE__ */ jsx(DirectionIcon, { to: isPopoverOpen ? "top" : "bottom" }),
 		prefix,
 		suffix,
@@ -337,7 +341,7 @@ const FilterPicker = forwardRef(function FilterPicker(props, ref) {
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			isDismissable: true,
 			type: "popover",
-			placement: "bottom start",
+			placement,
 			isOpen: isPopoverOpen,
 			containerPadding,
 			shouldFlip,