@cube-dev/ui-kit 0.199.2 → 0.200.0

package/dist/components/navigation/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["useControlledState","filterBaseProps","OUTER_STYLES","tasty","forwardRef","useEvent","useFormatter","useI18n","BackwardIcon","ForwardIcon","LeftIcon","RightIcon","extractStyles","Button","Select","clampPage","getPageInfo","getPaginationRange","ForwardedRef","ReactElement","CubePaginationProps","CubeTablePageInfo","PaginationElement","qa","as","styles","display","flow","gap","placeItems","placeContent","Summary","preset","color","whiteSpace","Controls","Gap","width","height","userSelect","Pages","styleProps","NavButton","type","border","PageButton","formatRange","info","start","page","pageSize","end","total","Math","min","Pagination","props","ref","$","_c","pageProp","defaultPage","onPageChange","totalPages","totalPagesProp","pageSizeProp","defaultPageSize","pageSizeOptions","onPageSizeChange","t0","siblingCount","t1","boundaryCount","t2","size","t3","isDisabled","hasNextPage","isCompact","t4","summary","t5","labelFormatter","ariaLabel","pageSizeSelectStyles","mods","rest","undefined","t","formatNumber","setPageSize","v","setPage","isCountable","Number","MAX_SAFE_INTEGER","from","to","goTo","next","clamped","max","t6","value","onPageSizeSelectionChange","t7","value_0","onPageSelectionChange","pageItems","selectEntries","Array","length","_temp","isFirst","isLast","t8","summaryNode","renderPageControl","String","map","entry","entryInfo","label","entry_0","index","showEdgeButtons","t9","eventProps","t10","t11","t12","option","label_0","t13","t14","Symbol","for","t15","t16","t17","t18","t19","t20","t21","t22","_","i","_Pagination","displayName","_c","Select"],"sources":["../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { filterBaseProps, OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useFormatter, useI18n } from '../../../i18n';\nimport { BackwardIcon } from '../../../icons/BackwardIcon';\nimport { ForwardIcon } from '../../../icons/ForwardIcon';\nimport { LeftIcon } from '../../../icons/LeftIcon';\nimport { RightIcon } from '../../../icons/RightIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { Select } from '../../fields/Select';\n\nimport { clampPage, getPageInfo, getPaginationRange } from './use-pagination';\n\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type { CubePaginationProps, CubeTablePageInfo } from './types';\n\nconst PaginationElement = tasty({\n  qa: 'Pagination',\n  as: 'nav',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    placeContent: 'start',\n\n    Summary: {\n      // Follows the control's size rather than being fixed, so the summary\n      // matches whatever the buttons beside it are.\n      preset: { '': 't3', 'size=xsmall': 't4' },\n      color: '#dark-03',\n      whiteSpace: 'nowrap',\n    },\n\n    Controls: {\n      display: 'flex',\n      flow: 'row',\n      gap: '.5x',\n      placeItems: 'center',\n    },\n\n    Gap: {\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min $gap-size',\n      height: '$gap-size',\n      preset: 't3',\n      color: '#dark-04',\n      userSelect: 'none',\n    },\n\n    /**\n     * The page numbers sit tighter than the nav buttons around them: they read\n     * as one run of pages, not as separate controls, and a hairline is enough\n     * to keep the current page's outline off its neighbours.\n     */\n    Pages: {\n      display: 'flex',\n      flow: 'row',\n      gap: '1bw',\n      placeItems: 'center',\n    },\n\n    '$gap-size': {\n      '': '$size-sm',\n      'size=xsmall': '$size-xs',\n      'size=medium': '$size-md',\n    },\n  },\n  styleProps: OUTER_STYLES,\n});\n\nconst NavButton = tasty(Button, {\n  type: 'clear',\n  styles: { border: true },\n});\n\n// Page buttons are borderless so the current page — which renders as `outline`\n// and therefore draws its own border — is the only bordered one in the run.\nconst PageButton = tasty(Button, {\n  type: 'clear',\n});\n\nfunction formatRange(info: CubeTablePageInfo): string {\n  const start = (info.page - 1) * info.pageSize + 1;\n  const end =\n    info.total > 0\n      ? Math.min(info.page * info.pageSize, info.total)\n      : info.page * info.pageSize;\n\n  return `${start}–${end}`;\n}\n\nfunction Pagination(\n  props: CubePaginationProps,\n  ref: ForwardedRef<HTMLElement>,\n): ReactElement {\n  const {\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    totalPages: totalPagesProp,\n    total,\n    pageSize: pageSizeProp,\n    defaultPageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    type = 'numbers',\n    siblingCount = 1,\n    boundaryCount = 1,\n    size = 'small',\n    isDisabled,\n    hasNextPage,\n    isCompact = false,\n    summary = false,\n    labelFormatter,\n    ariaLabel,\n    pageSizeSelectStyles,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const { t } = useI18n();\n  const { formatNumber } = useFormatter();\n\n  const [pageSize, setPageSize] = useControlledState<number>(\n    pageSizeProp as number,\n    defaultPageSize ?? 50,\n    onPageSizeChange as (v: number) => void,\n  );\n  const [page, setPage] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (v: number) => void,\n  );\n\n  // Unknown total: prev/next only, with `hasNextPage` driving the next button.\n  // The page must NOT be clamped in that mode — there is nothing to clamp to.\n  const isCountable = totalPagesProp != null || total != null;\n\n  const info: CubeTablePageInfo = isCountable\n    ? getPageInfo({\n        page,\n        pageSize,\n        total: total ?? 0,\n        totalPages: totalPagesProp,\n      })\n    : {\n        page: clampPage(page, Number.MAX_SAFE_INTEGER),\n        pageSize,\n        totalPages: 0,\n        total: 0,\n        from: 0,\n        to: 0,\n      };\n\n  const { totalPages } = info;\n\n  const goTo = useEvent((next: number) => {\n    const clamped = isCountable\n      ? clampPage(next, totalPages)\n      : Math.max(next, 1);\n\n    if (clamped !== info.page) setPage(clamped);\n  });\n\n  const onPageSizeSelectionChange = useEvent((value: any) => {\n    setPageSize(Number(value));\n    setPage(1);\n  });\n\n  const onPageSelectionChange = useEvent((value: any) => {\n    goTo(Number(value));\n  });\n\n  const pageItems =\n    type === 'numbers' && isCountable\n      ? getPaginationRange({\n          page: info.page,\n          totalPages,\n          siblingCount,\n          boundaryCount,\n        })\n      : [];\n\n  // `type=\"select\"` materializes one entry per page, so it is only safe for\n  // small page counts. Above the cap we fall back to `compact`, which reads the\n  // same but renders a single label.\n  const selectEntries =\n    type === 'select' && isCountable && totalPages <= 200\n      ? Array.from({ length: totalPages }, (_, i) => i + 1)\n      : null;\n\n  const isFirst = info.page <= 1;\n  const isLast = isCountable ? info.page >= totalPages : !hasNextPage;\n\n  const styles = extractStyles(props, OUTER_STYLES);\n\n  const summaryNode =\n    summary === false\n      ? null\n      : typeof summary === 'function'\n        ? summary(info)\n        : info.total > 0\n          ? // Numbers are formatted here rather than left to i18next, which\n            // interpolates them raw (\"1204\", not \"1,204\").\n            t('pagination.summary', '{{from}}–{{to}} of {{total}}', {\n              from: formatNumber(info.from),\n              to: formatNumber(info.to),\n              total: formatNumber(info.total),\n            })\n          : null;\n\n  function renderPageControl() {\n    if (selectEntries) {\n      return (\n        <Select\n          isBare\n          qa=\"PaginationPageSelect\"\n          size={size}\n          isDisabled={isDisabled}\n          aria-label={t('pagination.selectPage', 'Select page')}\n          selectedKey={String(info.page)}\n          width=\"min 15x\"\n          styles={pageSizeSelectStyles}\n          onSelectionChange={onPageSelectionChange}\n        >\n          {selectEntries.map((entry) => {\n            const entryInfo = { ...info, page: entry };\n            const label =\n              labelFormatter?.(entryInfo) ??\n              (info.total > 0\n                ? formatRange(entryInfo)\n                : t('pagination.page', 'Page {{page}}', { page: entry }));\n\n            return (\n              <Select.Item key={entry} textValue={String(label)}>\n                {label}\n              </Select.Item>\n            );\n          })}\n        </Select>\n      );\n    }\n\n    if (type === 'numbers' && pageItems.length > 0) {\n      return (\n        <div data-element=\"Pages\">\n          {pageItems.map((entry, index) =>\n            entry === 'gap' ? (\n              <div key={`gap-${index}`} data-element=\"Gap\" aria-hidden=\"true\">\n                {'…'}\n              </div>\n            ) : (\n              <PageButton\n                key={entry}\n                qa={`PaginationPage_${entry}`}\n                size={size}\n                type={entry === info.page ? 'outline' : 'clear'}\n                isDisabled={isDisabled}\n                aria-label={t('pagination.page', 'Page {{page}}', {\n                  page: entry,\n                })}\n                aria-current={entry === info.page ? 'page' : undefined}\n                onPress={() => goTo(entry)}\n              >\n                {entry}\n              </PageButton>\n            ),\n          )}\n        </div>\n      );\n    }\n\n    if (!isCountable) return null;\n\n    return (\n      <div data-element=\"Summary\" data-qa=\"PaginationPageLabel\">\n        {t('pagination.pageOf', '{{page}} of {{totalPages}}', {\n          page: info.page,\n          totalPages,\n        })}\n      </div>\n    );\n  }\n\n  const showEdgeButtons = !isCompact && isCountable;\n\n  return (\n    <PaginationElement\n      {...filterBaseProps(rest, { eventProps: true })}\n      ref={ref}\n      qa={qa || 'Pagination'}\n      styles={styles}\n      mods={{ size, ...mods }}\n      aria-label={ariaLabel ?? t('pagination.ariaLabel', 'Pagination')}\n    >\n      {summaryNode ? <div data-element=\"Summary\">{summaryNode}</div> : null}\n\n      {pageSizeOptions && onPageSizeChange ? (\n        <Select\n          isBare\n          qa=\"PaginationPageSizeSelect\"\n          size={size}\n          isDisabled={isDisabled}\n          aria-label={t('pagination.itemsPerPage', 'Items per page')}\n          selectedKey={String(pageSize)}\n          styles={pageSizeSelectStyles}\n          onSelectionChange={onPageSizeSelectionChange}\n        >\n          {pageSizeOptions.map((option) => {\n            const label = t(\n              'pagination.itemsPerPageOption',\n              '{{size}} / page',\n              {\n                size: option,\n              },\n            );\n\n            return (\n              <Select.Item key={option} textValue={label}>\n                {label}\n              </Select.Item>\n            );\n          })}\n        </Select>\n      ) : null}\n\n      <div data-element=\"Controls\">\n        {showEdgeButtons ? (\n          <NavButton\n            qa=\"PaginationFirstButton\"\n            size={size}\n            icon={<BackwardIcon />}\n            isDisabled={isFirst || isDisabled}\n            aria-label={t('pagination.firstPage', 'First page')}\n            onPress={() => goTo(1)}\n          />\n        ) : null}\n\n        <NavButton\n          qa=\"PaginationPrevButton\"\n          size={size}\n          icon={<LeftIcon />}\n          isDisabled={isFirst || isDisabled}\n          aria-label={t('pagination.previousPage', 'Previous page')}\n          onPress={() => goTo(info.page - 1)}\n        />\n\n        {renderPageControl()}\n\n        <NavButton\n          qa=\"PaginationNextButton\"\n          size={size}\n          icon={<RightIcon />}\n          isDisabled={isLast || isDisabled}\n          aria-label={t('pagination.nextPage', 'Next page')}\n          onPress={() => goTo(info.page + 1)}\n        />\n\n        {showEdgeButtons ? (\n          <NavButton\n            qa=\"PaginationLastButton\"\n            size={size}\n            icon={<ForwardIcon />}\n            isDisabled={isLast || isDisabled}\n            aria-label={t('pagination.lastPage', 'Last page')}\n            onPress={() => goTo(totalPages)}\n          />\n        ) : null}\n      </div>\n    </PaginationElement>\n  );\n}\n\nconst _Pagination = forwardRef(Pagination);\n\n_Pagination.displayName = 'Pagination';\n\nexport { _Pagination as Pagination };\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["useControlledState","filterBaseProps","OUTER_STYLES","tasty","forwardRef","useEvent","useFormatter","useI18n","BackwardIcon","ForwardIcon","LeftIcon","RightIcon","extractStyles","Button","Select","clampPage","getPageInfo","getPaginationRange","ForwardedRef","ReactElement","CubePaginationProps","CubeTablePageInfo","PaginationElement","qa","as","styles","display","flow","gap","placeItems","placeContent","Summary","preset","color","whiteSpace","Controls","Gap","width","height","userSelect","Pages","styleProps","NavButton","type","border","PageButton","formatRange","info","start","page","pageSize","end","total","Math","min","Pagination","props","ref","$","_c","pageProp","defaultPage","onPageChange","totalPages","totalPagesProp","pageSizeProp","defaultPageSize","pageSizeOptions","onPageSizeChange","t0","siblingCount","t1","boundaryCount","t2","size","t3","isDisabled","hasNextPage","isCompact","t4","summary","t5","labelFormatter","ariaLabel","pageSizeSelectStyles","mods","rest","undefined","t","formatNumber","setPageSize","v","setPage","isCountable","Number","MAX_SAFE_INTEGER","from","to","goTo","next","clamped","max","t6","value","onPageSizeSelectionChange","t7","value_0","onPageSelectionChange","pageItems","selectEntries","Array","length","_temp","isFirst","isLast","t8","summaryNode","renderPageControl","String","map","entry","entryInfo","label","entry_0","index","showEdgeButtons","t9","eventProps","t10","t11","t12","option","label_0","t13","t14","Symbol","for","t15","t16","t17","t18","t19","t20","t21","t22","_","i","_Pagination","displayName","_c","Select"],"sources":["../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { filterBaseProps, OUTER_STYLES, tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useFormatter, useI18n } from '../../../i18n';\nimport { BackwardIcon } from '../../../icons/BackwardIcon';\nimport { ForwardIcon } from '../../../icons/ForwardIcon';\nimport { LeftIcon } from '../../../icons/LeftIcon';\nimport { RightIcon } from '../../../icons/RightIcon';\nimport { extractStyles } from '../../../utils/styles';\nimport { Button } from '../../actions';\nimport { Select } from '../../fields/Select';\n\nimport { clampPage, getPageInfo, getPaginationRange } from './use-pagination';\n\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type { CubePaginationProps, CubeTablePageInfo } from './types';\n\nconst PaginationElement = tasty({\n  qa: 'Pagination',\n  as: 'nav',\n  styles: {\n    display: 'flex',\n    flow: 'row',\n    gap: '1x',\n    placeItems: 'center',\n    placeContent: 'start',\n\n    Summary: {\n      // Follows the control's size rather than being fixed, so the summary\n      // matches whatever the buttons beside it are.\n      preset: { '': 't3', 'size=xsmall': 't4' },\n      color: '#dark-03',\n      whiteSpace: 'nowrap',\n    },\n\n    Controls: {\n      display: 'flex',\n      flow: 'row',\n      gap: '.5x',\n      placeItems: 'center',\n    },\n\n    Gap: {\n      display: 'grid',\n      placeItems: 'center',\n      width: 'min $gap-size',\n      height: '$gap-size',\n      preset: 't3',\n      color: '#dark-04',\n      userSelect: 'none',\n    },\n\n    /**\n     * The page numbers sit tighter than the nav buttons around them: they read\n     * as one run of pages, not as separate controls, and a hairline is enough\n     * to keep the current page's outline off its neighbours.\n     */\n    Pages: {\n      display: 'flex',\n      flow: 'row',\n      gap: '$item-gap',\n      placeItems: 'center',\n    },\n\n    '$gap-size': {\n      '': '$size-sm',\n      'size=xsmall': '$size-xs',\n      'size=medium': '$size-md',\n    },\n  },\n  styleProps: OUTER_STYLES,\n});\n\nconst NavButton = tasty(Button, {\n  type: 'clear',\n  styles: { border: true },\n});\n\n// Page buttons are borderless so the current page — which renders as `outline`\n// and therefore draws its own border — is the only bordered one in the run.\nconst PageButton = tasty(Button, {\n  type: 'clear',\n});\n\nfunction formatRange(info: CubeTablePageInfo): string {\n  const start = (info.page - 1) * info.pageSize + 1;\n  const end =\n    info.total > 0\n      ? Math.min(info.page * info.pageSize, info.total)\n      : info.page * info.pageSize;\n\n  return `${start}–${end}`;\n}\n\nfunction Pagination(\n  props: CubePaginationProps,\n  ref: ForwardedRef<HTMLElement>,\n): ReactElement {\n  const {\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    totalPages: totalPagesProp,\n    total,\n    pageSize: pageSizeProp,\n    defaultPageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    type = 'numbers',\n    siblingCount = 1,\n    boundaryCount = 1,\n    size = 'small',\n    isDisabled,\n    hasNextPage,\n    isCompact = false,\n    summary = false,\n    labelFormatter,\n    ariaLabel,\n    pageSizeSelectStyles,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const { t } = useI18n();\n  const { formatNumber } = useFormatter();\n\n  const [pageSize, setPageSize] = useControlledState<number>(\n    pageSizeProp as number,\n    defaultPageSize ?? 50,\n    onPageSizeChange as (v: number) => void,\n  );\n  const [page, setPage] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (v: number) => void,\n  );\n\n  // Unknown total: prev/next only, with `hasNextPage` driving the next button.\n  // The page must NOT be clamped in that mode — there is nothing to clamp to.\n  const isCountable = totalPagesProp != null || total != null;\n\n  const info: CubeTablePageInfo = isCountable\n    ? getPageInfo({\n        page,\n        pageSize,\n        total: total ?? 0,\n        totalPages: totalPagesProp,\n      })\n    : {\n        page: clampPage(page, Number.MAX_SAFE_INTEGER),\n        pageSize,\n        totalPages: 0,\n        total: 0,\n        from: 0,\n        to: 0,\n      };\n\n  const { totalPages } = info;\n\n  const goTo = useEvent((next: number) => {\n    const clamped = isCountable\n      ? clampPage(next, totalPages)\n      : Math.max(next, 1);\n\n    if (clamped !== info.page) setPage(clamped);\n  });\n\n  const onPageSizeSelectionChange = useEvent((value: any) => {\n    setPageSize(Number(value));\n    setPage(1);\n  });\n\n  const onPageSelectionChange = useEvent((value: any) => {\n    goTo(Number(value));\n  });\n\n  const pageItems =\n    type === 'numbers' && isCountable\n      ? getPaginationRange({\n          page: info.page,\n          totalPages,\n          siblingCount,\n          boundaryCount,\n        })\n      : [];\n\n  // `type=\"select\"` materializes one entry per page, so it is only safe for\n  // small page counts. Above the cap we fall back to `compact`, which reads the\n  // same but renders a single label.\n  const selectEntries =\n    type === 'select' && isCountable && totalPages <= 200\n      ? Array.from({ length: totalPages }, (_, i) => i + 1)\n      : null;\n\n  const isFirst = info.page <= 1;\n  const isLast = isCountable ? info.page >= totalPages : !hasNextPage;\n\n  const styles = extractStyles(props, OUTER_STYLES);\n\n  const summaryNode =\n    summary === false\n      ? null\n      : typeof summary === 'function'\n        ? summary(info)\n        : info.total > 0\n          ? // Numbers are formatted here rather than left to i18next, which\n            // interpolates them raw (\"1204\", not \"1,204\").\n            t('pagination.summary', '{{from}}–{{to}} of {{total}}', {\n              from: formatNumber(info.from),\n              to: formatNumber(info.to),\n              total: formatNumber(info.total),\n            })\n          : null;\n\n  function renderPageControl() {\n    if (selectEntries) {\n      return (\n        <Select\n          isBare\n          qa=\"PaginationPageSelect\"\n          size={size}\n          isDisabled={isDisabled}\n          aria-label={t('pagination.selectPage', 'Select page')}\n          selectedKey={String(info.page)}\n          width=\"min 15x\"\n          styles={pageSizeSelectStyles}\n          onSelectionChange={onPageSelectionChange}\n        >\n          {selectEntries.map((entry) => {\n            const entryInfo = { ...info, page: entry };\n            const label =\n              labelFormatter?.(entryInfo) ??\n              (info.total > 0\n                ? formatRange(entryInfo)\n                : t('pagination.page', 'Page {{page}}', { page: entry }));\n\n            return (\n              <Select.Item key={entry} textValue={String(label)}>\n                {label}\n              </Select.Item>\n            );\n          })}\n        </Select>\n      );\n    }\n\n    if (type === 'numbers' && pageItems.length > 0) {\n      return (\n        <div data-element=\"Pages\">\n          {pageItems.map((entry, index) =>\n            entry === 'gap' ? (\n              <div key={`gap-${index}`} data-element=\"Gap\" aria-hidden=\"true\">\n                {'…'}\n              </div>\n            ) : (\n              <PageButton\n                key={entry}\n                qa={`PaginationPage_${entry}`}\n                size={size}\n                type={entry === info.page ? 'outline' : 'clear'}\n                isDisabled={isDisabled}\n                aria-label={t('pagination.page', 'Page {{page}}', {\n                  page: entry,\n                })}\n                aria-current={entry === info.page ? 'page' : undefined}\n                onPress={() => goTo(entry)}\n              >\n                {entry}\n              </PageButton>\n            ),\n          )}\n        </div>\n      );\n    }\n\n    if (!isCountable) return null;\n\n    return (\n      <div data-element=\"Summary\" data-qa=\"PaginationPageLabel\">\n        {t('pagination.pageOf', '{{page}} of {{totalPages}}', {\n          page: info.page,\n          totalPages,\n        })}\n      </div>\n    );\n  }\n\n  const showEdgeButtons = !isCompact && isCountable;\n\n  return (\n    <PaginationElement\n      {...filterBaseProps(rest, { eventProps: true })}\n      ref={ref}\n      qa={qa || 'Pagination'}\n      styles={styles}\n      mods={{ size, ...mods }}\n      aria-label={ariaLabel ?? t('pagination.ariaLabel', 'Pagination')}\n    >\n      {summaryNode ? <div data-element=\"Summary\">{summaryNode}</div> : null}\n\n      {pageSizeOptions && onPageSizeChange ? (\n        <Select\n          isBare\n          qa=\"PaginationPageSizeSelect\"\n          size={size}\n          isDisabled={isDisabled}\n          aria-label={t('pagination.itemsPerPage', 'Items per page')}\n          selectedKey={String(pageSize)}\n          styles={pageSizeSelectStyles}\n          onSelectionChange={onPageSizeSelectionChange}\n        >\n          {pageSizeOptions.map((option) => {\n            const label = t(\n              'pagination.itemsPerPageOption',\n              '{{size}} / page',\n              {\n                size: option,\n              },\n            );\n\n            return (\n              <Select.Item key={option} textValue={label}>\n                {label}\n              </Select.Item>\n            );\n          })}\n        </Select>\n      ) : null}\n\n      <div data-element=\"Controls\">\n        {showEdgeButtons ? (\n          <NavButton\n            qa=\"PaginationFirstButton\"\n            size={size}\n            icon={<BackwardIcon />}\n            isDisabled={isFirst || isDisabled}\n            aria-label={t('pagination.firstPage', 'First page')}\n            onPress={() => goTo(1)}\n          />\n        ) : null}\n\n        <NavButton\n          qa=\"PaginationPrevButton\"\n          size={size}\n          icon={<LeftIcon />}\n          isDisabled={isFirst || isDisabled}\n          aria-label={t('pagination.previousPage', 'Previous page')}\n          onPress={() => goTo(info.page - 1)}\n        />\n\n        {renderPageControl()}\n\n        <NavButton\n          qa=\"PaginationNextButton\"\n          size={size}\n          icon={<RightIcon />}\n          isDisabled={isLast || isDisabled}\n          aria-label={t('pagination.nextPage', 'Next page')}\n          onPress={() => goTo(info.page + 1)}\n        />\n\n        {showEdgeButtons ? (\n          <NavButton\n            qa=\"PaginationLastButton\"\n            size={size}\n            icon={<ForwardIcon />}\n            isDisabled={isLast || isDisabled}\n            aria-label={t('pagination.lastPage', 'Last page')}\n            onPress={() => goTo(totalPages)}\n          />\n        ) : null}\n      </div>\n    </PaginationElement>\n  );\n}\n\nconst _Pagination = forwardRef(Pagination);\n\n_Pagination.displayName = 'Pagination';\n\nexport { _Pagination as Pagination };\n"],"mappings":"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"}

package/dist/components/navigation/Pagination/use-pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useControlledState } from "@react-stately/utils";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useTabsContext } from "./TabsContext.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useMemo, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
@@ -8,6 +8,15 @@ import { FilterPicker } from "../../fields/FilterPicker/FilterPicker.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Tabs/TabPicker.tsx
+const NO_DIVIDER_STYLES = { border: 0 };
+const DIVIDER_STYLES = { border: {
+	"": 0,
+	"!:first-child": "left"
+} };
+const VERTICAL_DIVIDER_STYLES = { border: {
+	"": 0,
+	"!:first-child": "top"
+} };
 /**
 * Tab picker component that displays a dropdown menu of all tabs.
 *
@@ -15,7 +24,7 @@ import { jsx } from "react/jsx-runtime";
 * to any tab without scrolling.
 */
 function TabPicker(t0) {
-	const $ = c(30);
+	const $ = c(25);
 	const { tabs, selectedKey, onSelect, onDelete, size, type: t1, placement: t2, isReorderable, onReorder } = t0;
 	const type = t1 === void 0 ? "default" : t1;
 	const placement = t2 === void 0 ? "top" : t2;
@@ -30,46 +39,31 @@ function TabPicker(t0) {
 		$[0] = t3;
 	} else t3 = $[0];
 	const t4 = POPOVER_PLACEMENT_BY_TABS_PLACEMENT[placement];
-	let t5;
-	if ($[1] !== isVertical || $[2] !== showBorderDivider) {
-		t5 = showBorderDivider ? {
-			"": 0,
-			"!:first-child": isVertical ? "top" : "left"
-		} : 0;
-		$[1] = isVertical;
-		$[2] = showBorderDivider;
-		$[3] = t5;
-	} else t5 = $[3];
+	const t5 = !showBorderDivider ? NO_DIVIDER_STYLES : isVertical ? VERTICAL_DIVIDER_STYLES : DIVIDER_STYLES;
 	let t6;
-	if ($[4] !== t5) {
-		t6 = { border: t5 };
-		$[4] = t5;
-		$[5] = t6;
-	} else t6 = $[5];
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = { border: 0 };
+		$[1] = t6;
+	} else t6 = $[1];
 	let t7;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = { border: 0 };
-		$[6] = t7;
-	} else t7 = $[6];
+	if ($[2] !== t) {
+		t7 = t("tabs.selectTab", "Select tab");
+		$[2] = t;
+		$[3] = t7;
+	} else t7 = $[3];
 	let t8;
-	if ($[7] !== t) {
-		t8 = t("tabs.selectTab", "Select tab");
-		$[7] = t;
-		$[8] = t8;
-	} else t8 = $[8];
-	let t9;
-	if ($[9] !== onSelect) {
-		t9 = (key) => {
+	if ($[4] !== onSelect) {
+		t8 = (key) => {
 			if (key != null) onSelect(String(key));
 		};
-		$[9] = onSelect;
-		$[10] = t9;
-	} else t9 = $[10];
-	let t10;
-	if ($[11] !== isDeletable || $[12] !== onDelete || $[13] !== t || $[14] !== tabs) {
-		let t11;
-		if ($[16] !== isDeletable || $[17] !== onDelete || $[18] !== t) {
-			t11 = (tab) => /* @__PURE__ */ jsx(FilterPicker.Item, {
+		$[4] = onSelect;
+		$[5] = t8;
+	} else t8 = $[5];
+	let t9;
+	if ($[6] !== isDeletable || $[7] !== onDelete || $[8] !== t || $[9] !== tabs) {
+		let t10;
+		if ($[11] !== isDeletable || $[12] !== onDelete || $[13] !== t) {
+			t10 = (tab) => /* @__PURE__ */ jsx(FilterPicker.Item, {
 				icon: tab.icon,
 				tooltip: tab.tooltip,
 				textValue: typeof tab.title === "string" ? tab.title : String(tab.key),
@@ -83,21 +77,21 @@ function TabPicker(t0) {
 				}) : void 0,
 				children: tab.title
 			}, tab.key);
-			$[16] = isDeletable;
-			$[17] = onDelete;
-			$[18] = t;
-			$[19] = t11;
-		} else t11 = $[19];
-		t10 = tabs.map(t11);
-		$[11] = isDeletable;
-		$[12] = onDelete;
-		$[13] = t;
-		$[14] = tabs;
-		$[15] = t10;
-	} else t10 = $[15];
-	let t11;
-	if ($[20] !== isReorderable || $[21] !== onReorder || $[22] !== pickerSize || $[23] !== selectedKey || $[24] !== t10 || $[25] !== t4 || $[26] !== t6 || $[27] !== t8 || $[28] !== t9) {
-		t11 = /* @__PURE__ */ jsx(FilterPicker, {
+			$[11] = isDeletable;
+			$[12] = onDelete;
+			$[13] = t;
+			$[14] = t10;
+		} else t10 = $[14];
+		t9 = tabs.map(t10);
+		$[6] = isDeletable;
+		$[7] = onDelete;
+		$[8] = t;
+		$[9] = tabs;
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[15] !== isReorderable || $[16] !== onReorder || $[17] !== pickerSize || $[18] !== selectedKey || $[19] !== t4 || $[20] !== t5 || $[21] !== t7 || $[22] !== t8 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(FilterPicker, {
 			isBare: true,
 			selectedKey,
 			renderSummary: false,
@@ -107,26 +101,26 @@ function TabPicker(t0) {
 			type: "clear",
 			size: pickerSize,
 			placement: t4,
-			styles: t6,
-			triggerStyles: t7,
-			"aria-label": t8,
+			styles: t5,
+			triggerStyles: t6,
+			"aria-label": t7,
 			isReorderable,
 			onReorder,
-			onSelectionChange: t9,
-			children: t10
+			onSelectionChange: t8,
+			children: t9
 		});
-		$[20] = isReorderable;
-		$[21] = onReorder;
-		$[22] = pickerSize;
-		$[23] = selectedKey;
+		$[15] = isReorderable;
+		$[16] = onReorder;
+		$[17] = pickerSize;
+		$[18] = selectedKey;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
 		$[24] = t10;
-		$[25] = t4;
-		$[26] = t6;
-		$[27] = t8;
-		$[28] = t9;
-		$[29] = t11;
-	} else t11 = $[29];
-	return t11;
+	} else t10 = $[24];
+	return t10;
 }
 //#endregion
 export { TabPicker };

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

@@ -1 +1 @@
-{"version":3,"file":"TabPicker.js","names":["useI18n","CloseIcon","MoreIcon","ItemAction","FilterPicker","POPOVER_PLACEMENT_BY_TABS_PLACEMENT","ParsedTab","TabPlacement","TabSize","TabType","TabPickerProps","tabs","selectedKey","onSelect","key","onDelete","size","type","placement","isReorderable","onReorder","newOrder","TabPicker","t0","$","_c","t1","t2","undefined","t","isDeletable","pickerSize","showBorderDivider","isVertical","t3","Symbol","for","t4","t5","t6","border","t7","t8","t9","String","t10","t11","tab","icon","tooltip","title","map","_c"],"sources":["../../../../src/components/navigation/Tabs/TabPicker.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { MoreIcon } from '../../../icons/MoreIcon';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { FilterPicker } from '../../fields/FilterPicker/FilterPicker';\n\nimport { POPOVER_PLACEMENT_BY_TABS_PLACEMENT } from './popover-placement';\n\nimport type { ParsedTab, TabPlacement, TabSize, TabType } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface TabPickerProps {\n  /** Ordered list of parsed tabs to display in the picker */\n  tabs: ParsedTab[];\n  /** Currently selected tab key */\n  selectedKey: string | null;\n  /** Callback when a tab is selected from the picker */\n  onSelect: (key: string) => void;\n  /** Callback when a tab should be deleted. When provided, shows delete action on items. */\n  onDelete?: (key: string) => void;\n  /** Size of the picker trigger button */\n  size?: TabSize;\n  /** Type of the parent Tabs component (for border styling) */\n  type?: TabType;\n  /** Placement of the parent Tabs component (controls divider + popover placement) */\n  placement?: TabPlacement;\n  /** Enable drag-and-drop reordering of items in the picker dropdown */\n  isReorderable?: boolean;\n  /** Callback when items are reordered via drag-and-drop */\n  onReorder?: (newOrder: string[]) => void;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Tab picker component that displays a dropdown menu of all tabs.\n *\n * Used in the Tabs suffix area when tabs overflow to provide quick navigation\n * to any tab without scrolling.\n */\nexport function TabPicker({\n  tabs,\n  selectedKey,\n  onSelect,\n  onDelete,\n  size,\n  type = 'default',\n  placement = 'top',\n  isReorderable,\n  onReorder,\n}: TabPickerProps) {\n  const { t } = useI18n();\n  const isDeletable = !!onDelete;\n\n  // Map TabSize to FilterPicker size (xsmall -> small)\n  const pickerSize = size === 'xsmall' ? 'small' : size;\n\n  // Only show border divider for file type\n  const showBorderDivider = type === 'file';\n  const isVertical = placement === 'left' || placement === 'right';\n\n  return (\n    <FilterPicker\n      isBare\n      selectedKey={selectedKey}\n      renderSummary={false}\n      icon={<MoreIcon />}\n      rightIcon={null}\n      shape=\"sharp\"\n      type=\"clear\"\n      size={pickerSize}\n      placement={POPOVER_PLACEMENT_BY_TABS_PLACEMENT[placement]}\n      // Apply border to wrapper (FilterPickerWrapper) so :first-child evaluates\n      // relative to Suffix container, not the internal DialogTrigger. The\n      // divider side flips with the bar's orientation.\n      styles={{\n        border: showBorderDivider\n          ? {\n              '': 0,\n              '!:first-child': isVertical ? 'top' : 'left',\n            }\n          : 0,\n      }}\n      triggerStyles={{ border: 0 }}\n      aria-label={t('tabs.selectTab', 'Select tab')}\n      isReorderable={isReorderable}\n      onReorder={onReorder}\n      onSelectionChange={(key) => {\n        if (key != null) {\n          onSelect(String(key));\n        }\n      }}\n    >\n      {tabs.map((tab) => (\n        <FilterPicker.Item\n          key={tab.key}\n          icon={tab.icon}\n          tooltip={tab.tooltip}\n          textValue={\n            typeof tab.title === 'string' ? tab.title : String(tab.key)\n          }\n          autoHideActions={isDeletable}\n          actions={\n            isDeletable ? (\n              <ItemAction\n                icon={<CloseIcon />}\n                aria-label={t('tabs.close', 'Close')}\n                onPress={() => {\n                  onDelete(tab.key);\n                }}\n              />\n            ) : undefined\n          }\n        >\n          {tab.title}\n        </FilterPicker.Item>\n      ))}\n    </FilterPicker>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TabPicker.js","names":["useI18n","CloseIcon","MoreIcon","ItemAction","FilterPicker","POPOVER_PLACEMENT_BY_TABS_PLACEMENT","Styles","ParsedTab","TabPlacement","TabSize","TabType","NO_DIVIDER_STYLES","border","DIVIDER_STYLES","VERTICAL_DIVIDER_STYLES","TabPickerProps","tabs","selectedKey","onSelect","key","onDelete","size","type","placement","isReorderable","onReorder","newOrder","TabPicker","t0","$","_c","t1","t2","undefined","t","isDeletable","pickerSize","showBorderDivider","isVertical","t3","Symbol","for","t4","t5","t6","t7","t8","String","t9","t10","tab","icon","tooltip","title","map","_c"],"sources":["../../../../src/components/navigation/Tabs/TabPicker.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { MoreIcon } from '../../../icons/MoreIcon';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { FilterPicker } from '../../fields/FilterPicker/FilterPicker';\n\nimport { POPOVER_PLACEMENT_BY_TABS_PLACEMENT } from './popover-placement';\n\nimport type { Styles } from '@tenphi/tasty';\nimport type { ParsedTab, TabPlacement, TabSize, TabType } from './types';\n\nconst NO_DIVIDER_STYLES: Styles = { border: 0 };\nconst DIVIDER_STYLES: Styles = { border: { '': 0, '!:first-child': 'left' } };\nconst VERTICAL_DIVIDER_STYLES: Styles = {\n  border: { '': 0, '!:first-child': 'top' },\n};\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface TabPickerProps {\n  /** Ordered list of parsed tabs to display in the picker */\n  tabs: ParsedTab[];\n  /** Currently selected tab key */\n  selectedKey: string | null;\n  /** Callback when a tab is selected from the picker */\n  onSelect: (key: string) => void;\n  /** Callback when a tab should be deleted. When provided, shows delete action on items. */\n  onDelete?: (key: string) => void;\n  /** Size of the picker trigger button */\n  size?: TabSize;\n  /** Type of the parent Tabs component (for border styling) */\n  type?: TabType;\n  /** Placement of the parent Tabs component (controls divider + popover placement) */\n  placement?: TabPlacement;\n  /** Enable drag-and-drop reordering of items in the picker dropdown */\n  isReorderable?: boolean;\n  /** Callback when items are reordered via drag-and-drop */\n  onReorder?: (newOrder: string[]) => void;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Tab picker component that displays a dropdown menu of all tabs.\n *\n * Used in the Tabs suffix area when tabs overflow to provide quick navigation\n * to any tab without scrolling.\n */\nexport function TabPicker({\n  tabs,\n  selectedKey,\n  onSelect,\n  onDelete,\n  size,\n  type = 'default',\n  placement = 'top',\n  isReorderable,\n  onReorder,\n}: TabPickerProps) {\n  const { t } = useI18n();\n  const isDeletable = !!onDelete;\n\n  // Map TabSize to FilterPicker size (xsmall -> small)\n  const pickerSize = size === 'xsmall' ? 'small' : size;\n\n  // Only show border divider for file type\n  const showBorderDivider = type === 'file';\n  const isVertical = placement === 'left' || placement === 'right';\n\n  return (\n    <FilterPicker\n      isBare\n      selectedKey={selectedKey}\n      renderSummary={false}\n      icon={<MoreIcon />}\n      rightIcon={null}\n      shape=\"sharp\"\n      type=\"clear\"\n      size={pickerSize}\n      placement={POPOVER_PLACEMENT_BY_TABS_PLACEMENT[placement]}\n      // Apply border to wrapper (FilterPickerWrapper) so :first-child evaluates\n      // relative to Suffix container, not the internal DialogTrigger. The\n      // divider side flips with the bar's orientation.\n      styles={\n        !showBorderDivider\n          ? NO_DIVIDER_STYLES\n          : isVertical\n            ? VERTICAL_DIVIDER_STYLES\n            : DIVIDER_STYLES\n      }\n      triggerStyles={{ border: 0 }}\n      aria-label={t('tabs.selectTab', 'Select tab')}\n      isReorderable={isReorderable}\n      onReorder={onReorder}\n      onSelectionChange={(key) => {\n        if (key != null) {\n          onSelect(String(key));\n        }\n      }}\n    >\n      {tabs.map((tab) => (\n        <FilterPicker.Item\n          key={tab.key}\n          icon={tab.icon}\n          tooltip={tab.tooltip}\n          textValue={\n            typeof tab.title === 'string' ? tab.title : String(tab.key)\n          }\n          autoHideActions={isDeletable}\n          actions={\n            isDeletable ? (\n              <ItemAction\n                icon={<CloseIcon />}\n                aria-label={t('tabs.close', 'Close')}\n                onPress={() => {\n                  onDelete(tab.key);\n                }}\n              />\n            ) : undefined\n          }\n        >\n          {tab.title}\n        </FilterPicker.Item>\n      ))}\n    </FilterPicker>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAMW,oBAA4B,EAAEC,QAAQ,EAAE;AAC9C,MAAMC,iBAAyB,EAAED,QAAQ;CAAE,IAAI;CAAG,iBAAiB;AAAO,EAAE;AAC5E,MAAME,0BAAkC,EACtCF,QAAQ;CAAE,IAAI;CAAG,iBAAiB;AAAM,EAC1C;;;;;;;AAqCA,SAAOe,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmB,MAAA,EAAAd,MAAAC,aAAAC,UAAAE,UAAAC,MAAAC,MAAAS,IAAAR,WAAAS,IAAAR,eAAAC,cAAAG;CAMxB,MAAAN,OAAAS,OAAAE,KAAAA,IAAA,YAAAF;CACA,MAAAR,YAAAS,OAAAC,KAAAA,IAAA,QAAAD;CAIA,MAAA,EAAAE,MAAclC,QAAQ;CACtB,MAAAmC,cAAoB,CAAC,CAACf;CAGtB,MAAAgB,aAAmBf,SAAS,WAAT,UAAAA;CAGnB,MAAAgB,oBAA0Bf,SAAS;CACnC,MAAAgB,aAAmBf,cAAc,UAAUA,cAAc;CAAQ,IAAAgB;CAAA,IAAAV,EAAA,OAAAW,OAAAC,IAAA,2BAAA,GAAA;EAOvDF,KAAA,oBAAC,UAAD,CAAS,CAAA;EAAGV,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAKP,MAAAa,KAAArC,oCAAoCkB;CAK7C,MAAAoB,KAAA,CAACN,oBAAD1B,oBAEI2B,aAAAxB,0BAAAD;CAEgB,IAAA+B;CAAA,IAAAf,EAAA,OAAAW,OAAAC,IAAA,2BAAA,GAAA;EAEPG,KAAA,EAAAhC,QAAU,EAAE;EAACiB,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAK,GAAA;EAChBW,KAAAX,EAAE,kBAAkB,YAAY;EAACL,EAAA,KAAAK;EAAAL,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAX,UAAA;EAG1B4B,MAAA3B,QAAA;GACjB,IAAIA,OAAO,MACTD,SAAS6B,OAAO5B,GAAG,CAAC;EACrB;EACFU,EAAA,KAAAX;EAAAW,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,OAAAM,eAAAN,EAAA,OAAAT,YAAAS,EAAA,OAAAK,KAAAL,EAAA,OAAAb,MAAA;EAAA,IAAAiC;EAAA,IAAApB,EAAA,QAAAM,eAAAN,EAAA,QAAAT,YAAAS,EAAA,QAAAK,GAAA;GAESe,OAAAC,QACR,oBAAA,aAAA,MAAA;IAEQ,MAAAA,IAAGC;IACA,SAAAD,IAAGE;IAEV,WAAA,OAAOF,IAAGG,UAAW,WAAWH,IAAGG,QAASN,OAAOG,IAAG/B,GAAI;IAE3CgB,iBAAAA;IAEf,SAAAA,cACE,oBAAC,YAAD;KACQ,MAAA,oBAAC,WAAD,CAAU,CAAA;KACJ,cAAAD,EAAE,cAAc,OAAO;KAC1B,eAAA;MACPd,SAAS8B,IAAG/B,GAAI;KAAC;IAClB,CAAA,IANLc,KAAAA;IAWDiB,UAAAA,IAAGG;GACN,GApBOH,IAAG/B,GAoBV;GACDU,EAAA,MAAAM;GAAAN,EAAA,MAAAT;GAAAS,EAAA,MAAAK;GAAAL,EAAA,MAAAoB;EAAA,OAAAA,MAAApB,EAAA;EAvBAmB,KAAAhC,KAAIsC,IAAKL,GAuBT;EAACpB,EAAA,KAAAM;EAAAN,EAAA,KAAAT;EAAAS,EAAA,KAAAK;EAAAL,EAAA,KAAAb;EAAAa,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAL,iBAAAK,EAAA,QAAAJ,aAAAI,EAAA,QAAAO,cAAAP,EAAA,QAAAZ,eAAAY,EAAA,QAAAa,MAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAmB,IAAA;EArDJC,MAAA,oBAAC,cAAD;GACE,QAAA;GACahC;GACE,eAAA;GACT,MAAAsB;GACK,WAAA;GACL,OAAA;GACD,MAAA;GACCH,MAAAA;GACK,WAAAM;GAKT,QAAAC;GAMa,eAAAC;GACH,cAAAC;GACGrB;GACJC;GACQ,mBAAAqB;GAMlBE,UAAAA;EA9BU,CAAA;EAsDEnB,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAO;EAAAP,EAAA,MAAAZ;EAAAY,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;CAAA,OAAAA,MAAApB,EAAA;CAAA,OAtDfoB;AAsDe"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { Item as _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 //#region src/components/navigation/Tabs/styled.ts
@@ -69,7 +69,7 @@ const TabsElement = tasty({ styles: {
 		flexGrow: 0,
 		$transition: "$tab-transition",
 		"$tab-indicator-size": {
-			"": "2bw",
+			"": "2px",
 			"size=large": "1ow"
 		}
 	},
@@ -192,7 +192,7 @@ const TabsElement = tasty({ styles: {
 			"type=default": "1x",
 			"type=narrow": "2x",
 			"type=radio": ".5x",
-			"(type=default | type=narrow) & (placement=left | placement=right)": "1bw"
+			"(type=default | type=narrow) & (placement=left | placement=right)": "$item-gap"
 		},
 		placeContent: "start",
 		overflow: "visible",
@@ -226,9 +226,10 @@ const TabsElement = tasty({ styles: {
 	},
 	Scrollbar: {
 		$: "> Bar > ScrollWrapper >",
+		"$scrollbar-inset": "1px",
 		position: "absolute",
 		bottom: {
-			"": "1px",
+			"": "$scrollbar-inset",
 			"placement=left | placement=right": "auto"
 		},
 		top: {
@@ -241,7 +242,7 @@ const TabsElement = tasty({ styles: {
 		},
 		right: {
 			"": "auto",
-			"placement=left | placement=right": "1px"
+			"placement=left | placement=right": "$scrollbar-inset"
 		},
 		height: {
 			"": "1ow",
@@ -297,10 +298,10 @@ const TabElement = tasty(_Item, {
 		},
 		shadow: {
 			"": "$selection-shadow",
-			"focused & focus-visible": "inset 0 0 0 1bw #primary-text, $selection-shadow",
-			editing: "inset 0 0 0 1bw #primary-text, $selection-shadow",
+			"focused & focus-visible": "inset 0 0 0 $ring-width #primary-text, $selection-shadow",
+			editing: "inset 0 0 0 $ring-width #primary-text, $selection-shadow",
 			"type=radio & selected": "$item-shadow",
-			"type=radio & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 1bw #primary-text"
+			"type=radio & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 $ring-width #primary-text"
 		},
 		outline: "none",
 		placeContent: { "type=radio": "center" },
@@ -370,21 +371,21 @@ const DropIndicatorElement = tasty({ styles: {
 	top: {
 		"": 0,
 		"placement=left | placement=right": "auto",
-		"(placement=left | placement=right) & before": "-2px"
+		"(placement=left | placement=right) & before": "-.25x"
 	},
 	bottom: {
 		"": 0,
 		"placement=left | placement=right": "auto",
-		"(placement=left | placement=right) & after": "-2px"
+		"(placement=left | placement=right) & after": "-.25x"
 	},
 	left: {
 		"": "auto",
-		"before & !(placement=left | placement=right)": "-2px",
+		"before & !(placement=left | placement=right)": "-.25x",
 		"placement=left | placement=right": 0
 	},
 	right: {
 		"": "auto",
-		"after & !(placement=left | placement=right)": "-2px",
+		"after & !(placement=left | placement=right)": "-.25x",
 		"placement=left | placement=right": 0
 	}
 } });