@clickhouse/click-ui 0.10.0-rc2 → 0.11.0-rc1

package/dist/cjs/components/Link/Link.css

@@ -1,7 +1,6 @@
 @layer clickui {.link__Ly-e3 {
   display: inline-flex;
   margin: 0;
-  margin-right: var(--link-gap);
   align-items: center;
   gap: var(--link-gap);
   color: var(--click-global-color-text-link-default);

package/dist/cjs/components/Link/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["cva","styles","jsxs","cn","jsx","Icon","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAM,YAAA,GAAeA,0BAAA,CAAIC,mBAAA,CAAO,IAAA,EAAM;AAAA,EACpC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAIA,oBAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAIA,oBAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAIA,oBAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAIA,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQA,oBAAO,oBAAoB,CAAA;AAAA,MACnC,MAAA,EAAQA,oBAAO,oBAAoB,CAAA;AAAA,MACnC,QAAA,EAAUA,oBAAO,sBAAsB,CAAA;AAAA,MACvC,IAAA,EAAMA,oBAAO,kBAAkB,CAAA;AAAA,MAC/B,IAAA,EAAMA,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAM,YAAA,GAAeD,0BAAA,CAAIC,mBAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAIA,oBAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,oBAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,oBAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,oBAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAM,QAAQ,CACZ;AAAA,EACE,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,QAAA;AAAA,EACT,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,GAAA;AAC/B,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,OAAG,YAAA,CAAa,EAAE,MAAM,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAEtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,IAAA,mCACE,MAAA,EAAA,EACC,QAAA,kBAAAC,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,WAAWF,MAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,YACpC,aAAA,EAAa;AAAA;AAAA,SACf,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AACO,MAAM,IAAA,GAAiCG,iBAAW,KAAK;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\n\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["cva","styles","jsxs","cn","jsx","Icon","forwardRef"],"mappings":";;;;;;;;;;;AA+BA,MAAM,YAAA,GAAeA,0BAAA,CAAIC,mBAAA,CAAO,IAAA,EAAM;AAAA,EACpC,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAIA,oBAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAIA,oBAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAIA,oBAAO,cAAc,CAAA;AAAA,MACzB,EAAA,EAAIA,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQA,oBAAO,oBAAoB,CAAA;AAAA,MACnC,MAAA,EAAQA,oBAAO,oBAAoB,CAAA;AAAA,MACnC,QAAA,EAAUA,oBAAO,sBAAsB,CAAA;AAAA,MACvC,IAAA,EAAMA,oBAAO,kBAAkB,CAAA;AAAA,MAC/B,IAAA,EAAMA,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAM,YAAA,GAAeD,0BAAA,CAAIC,mBAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAIA,oBAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,oBAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,oBAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,oBAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAM,QAAQ,CACZ;AAAA,EACE,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,QAAA;AAAA,EACT,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,GAAA;AAC/B,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,OAAG,YAAA,CAAa,EAAE,MAAM,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAEtD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,IAAA,mCACE,MAAA,EAAA,EACC,QAAA,kBAAAC,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,WAAWF,MAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,YACpC,aAAA,EAAa;AAAA;AAAA,SACf,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AACO,MAAM,IAAA,GAAiCG,iBAAW,KAAK;;;;"}

package/dist/cjs/components/Pagination/index.cjs

@@ -39,11 +39,11 @@ const Pagination = ({
   const leftButtonDisabled = currentPage <= 1;
   const rightButtonDisabled = !!totalPages && currentPage === totalPages || disableNextButton;
   const onChange = (value) => {
-    const sanitizedValue = parseInt(value, 10);
-    if (sanitizedValue < 1 || inputRef.current?.disabled || (typeof totalPages !== "undefined" ? sanitizedValue > totalPages : false)) {
+    const pageNumber = parseInt(value, 10);
+    if (Number.isNaN(pageNumber) || pageNumber < 1 || inputRef.current?.disabled || (typeof totalPages !== "undefined" ? pageNumber > totalPages : false)) {
       return;
     }
-    onChangeProp(sanitizedValue);
+    onChangeProp(pageNumber);
   };
   const onPageSizeChange = (value) => {
     if (typeof onPageSizeChangeProp === "function") {

package/dist/cjs/components/Pagination/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const sanitizedValue = parseInt(value, 10);\n    if (\n      sanitizedValue < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? sanitizedValue > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(sanitizedValue);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":["useRef","useCallback","jsxs","Container","Text","jsx","IconButton","NumberField","Select","styles"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import {\n  FocusEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  useCallback,\n  useRef,\n} from 'react';\nimport { Container, type ContainerProps } from '@/components/Container';\nimport { IconButton } from '@/components/IconButton';\nimport { NumberField } from '@/components/NumberField';\nimport { Select } from '@/components/Select';\nimport { Text } from '@/components/Text';\nimport styles from './Pagination.module.css';\n\nexport interface PaginationProps extends Omit<\n  ContainerProps<'div'>,\n  'children' | 'onChange'\n> {\n  /** Total number of pages available */\n  totalPages?: number;\n  /** The currently selected page number */\n  currentPage: number;\n  /** List of options for rows per page dropdown */\n  maxRowsPerPageList?: number[];\n  /** Total row count to display */\n  rowCount?: number | string;\n  /** Callback when page number changes */\n  onChange: (pageNumber: number) => void;\n  /** Callback when page size changes */\n  onPageSizeChange?: (pageNumber: number) => void;\n  /** Current page size/rows per page */\n  pageSize?: number;\n  /** Callback when next page button is clicked */\n  onNextPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when previous page button is clicked */\n  onPrevPageClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Callback when page number input receives focus */\n  onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;\n  /** Callback when page number input loses focus */\n  onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;\n  /** Whether to disable the next page button */\n  disableNextButton?: boolean;\n  /** Whether to show \"All rows\" option in the dropdown */\n  allowAllRows?: boolean;\n}\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  maxRowsPerPageList = [],\n  rowCount,\n  onChange: onChangeProp,\n  onPageSizeChange: onPageSizeChangeProp,\n  pageSize = -1,\n  fillWidth = true,\n  gap = 'md',\n  justifyContent,\n  onNextPageClick,\n  onPrevPageClick,\n  onPageNumberFocus,\n  onPageNumberBlur,\n  disableNextButton,\n  allowAllRows = true,\n  ...props\n}: PaginationProps): ReactElement => {\n  const hasRowCount = ['number', 'string'].includes(typeof rowCount);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const formatNumber = (value: number) => {\n    return new Intl.NumberFormat('en').format(value);\n  };\n  const leftButtonDisabled = currentPage <= 1;\n  const rightButtonDisabled =\n    (!!totalPages && currentPage === totalPages) || disableNextButton;\n\n  const onChange = (value: string) => {\n    const pageNumber = parseInt(value, 10);\n    if (\n      Number.isNaN(pageNumber) ||\n      pageNumber < 1 ||\n      inputRef.current?.disabled ||\n      (typeof totalPages !== 'undefined' ? pageNumber > totalPages : false)\n    ) {\n      return;\n    }\n\n    onChangeProp(pageNumber);\n  };\n\n  const onPageSizeChange = (value: string) => {\n    if (typeof onPageSizeChangeProp === 'function') {\n      onPageSizeChangeProp(Number(value));\n    }\n  };\n\n  const onPrevClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (leftButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage - 1);\n      if (typeof onPrevPageClick === 'function') {\n        onPrevPageClick(e);\n      }\n    },\n    [currentPage, leftButtonDisabled, onChangeProp, onPrevPageClick]\n  );\n\n  const onNextClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    e => {\n      if (rightButtonDisabled) {\n        return;\n      }\n\n      onChangeProp(currentPage + 1);\n      if (typeof onNextPageClick === 'function') {\n        onNextPageClick(e);\n      }\n    },\n    [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]\n  );\n\n  // if `allowAllRows` is false we need to switch to the first option in the list\n  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {\n    pageSize = maxRowsPerPageList[0];\n  }\n\n  return (\n    <Container\n      gap={gap}\n      justifyContent={\n        justifyContent ??\n        (rowCount || maxRowsPerPageList.length > 0 ? 'space-between' : 'center')\n      }\n      fillWidth={fillWidth}\n      {...props}\n    >\n      {hasRowCount && (\n        <Text\n          component=\"div\"\n          color=\"muted\"\n          size=\"sm\"\n        >\n          {typeof rowCount === 'number' ? formatNumber(rowCount) : rowCount} rows\n        </Text>\n      )}\n      <Container\n        gap=\"xxs\"\n        fillWidth={false}\n      >\n        <IconButton\n          icon=\"chevron-left\"\n          type=\"ghost\"\n          disabled={leftButtonDisabled}\n          onClick={onPrevClick}\n          data-testid=\"prev-btn\"\n        />\n        <Container\n          maxWidth=\"50px\"\n          fillWidth={false}\n        >\n          <NumberField\n            ref={inputRef}\n            onChange={onChange}\n            value={currentPage}\n            loading={false}\n            aria-label={currentPage.toString()}\n            min={1}\n            max={totalPages}\n            onFocus={onPageNumberFocus}\n            hideControls\n            onBlur={onPageNumberBlur}\n            disabled={leftButtonDisabled && rightButtonDisabled}\n          />\n        </Container>\n        {!!totalPages && (\n          <Text\n            component=\"div\"\n            color=\"muted\"\n            size=\"sm\"\n          >\n            of {formatNumber(totalPages)}\n          </Text>\n        )}\n        <IconButton\n          icon=\"chevron-right\"\n          type=\"ghost\"\n          disabled={rightButtonDisabled}\n          onClick={onNextClick}\n          data-testid=\"next-btn\"\n        />\n      </Container>\n      {maxRowsPerPageList.length > 0 && (\n        <Select\n          className={styles['custom-select']}\n          onSelect={onPageSizeChange}\n          value={pageSize.toString()}\n        >\n          {allowAllRows && <Select.Item value=\"-1\">All rows</Select.Item>}\n          {maxRowsPerPageList.map(option => (\n            <Select.Item\n              key={option}\n              value={option.toString()}\n            >\n              {option} rows\n            </Select.Item>\n          ))}\n        </Select>\n      )}\n    </Container>\n  );\n};\n"],"names":["useRef","useCallback","jsxs","Container","Text","jsx","IconButton","NumberField","Select","styles"],"mappings":"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"}

package/dist/cjs/components/Popover/Popover.css

@@ -1,4 +1,6 @@
-@layer clickui {.menu-panel__-IeVm {
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+
+.menu-panel__-IeVm {
   display: block;
   padding: var(--click-popover-space-y) var(--click-popover-space-x);
   border: 1px solid var(--click-popover-color-panel-stroke-default);
@@ -23,11 +25,10 @@
   cursor: pointer;
 }
 
-.close-button__fpjhc {
+.menu-panel__-IeVm .close-button__fpjhc {
+  /* Offset by the button's own padding so the cross sits at the panel inset */
   position: absolute;
-  top: var(--click-popover-space-y);
-  right: var(--click-popover-space-x);
-  width: var(--click-popover-icon-size-width);
-  height: var(--click-popover-icon-size-height);
+  top: calc(var(--click-popover-space-y) - var(--click-button-iconButton-sm-space-y));
+  right: calc(var(--click-popover-space-x) - var(--click-button-iconButton-sm-space-x));
 }
 }

package/dist/cjs/components/Popover/index.cjs

@@ -11,7 +11,7 @@ const cva = require('../../lib/cva.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
 const Popover_module = require('./Popover.module.css.cjs');
-const Icon = require('../Icon/index.cjs');
+const IconButton = require('../IconButton/index.cjs');
 const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
@@ -100,14 +100,6 @@ const PopoverContent = ({
           sideOffset: 4,
           ...props,
           children: [
-            showClose && /* @__PURE__ */ jsxRuntime.jsx(
-              RadixPopover__namespace.Close,
-              {
-                asChild: true,
-                className: Popover_module.default["close-button"],
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" })
-              }
-            ),
             showArrow && /* @__PURE__ */ jsxRuntime.jsx(
               GenericMenu.Arrow,
               {
@@ -118,7 +110,17 @@ const PopoverContent = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {})
               }
             ),
-            children
+            children,
+            showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                className: Popover_module.default["close-button"],
+                icon: "cross",
+                type: "ghost",
+                size: "sm",
+                "aria-label": "Close"
+              }
+            ) })
           ]
         }
       )

package/dist/cjs/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <RadixPopover.Close\n            asChild\n            className={styles['close-button']}\n          >\n            <Icon name=\"cross\" />\n          </RadixPopover.Close>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["RadixPopover","jsxs","Fragment","jsx","styles","cva","GenericMenuPanel","cn","forwardRef","useResolvedPortalContainer","Icon","Arrow","Popover_Arrow"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButton } from '@/components/IconButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n        {/* Rendered last so it takes focus after the panel's interactive elements */}\n        {showClose && (\n          <RadixPopover.Close asChild>\n            <IconButton\n              className={styles['close-button']}\n              icon=\"cross\"\n              type=\"ghost\"\n              size=\"sm\"\n              aria-label=\"Close\"\n            />\n          </RadixPopover.Close>\n        )}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["RadixPopover","jsxs","Fragment","jsx","styles","cva","GenericMenuPanel","cn","forwardRef","useResolvedPortalContainer","Arrow","Popover_Arrow","IconButton"],"mappings":"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"}

package/dist/cjs/components/ProgressBar/index.cjs

@@ -49,15 +49,18 @@ const ProgressBar = ({
   orientation = "horizontal",
   dir = "start",
   className,
+  style,
   ...props
 }) => {
   const completed = progress === 100;
+  const mergedStyle = {
+    "--progress": `${progress}%`,
+    ...style
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      style: {
-        "--progress": `${progress}%`
-      },
+      style: mergedStyle,
       ...props,
       className: cva.cn(
         progressBarVariants({ type, orientation, dir, completed }),

package/dist/cjs/components/ProgressBar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["cva","styles","jsx","cn","jsxs","Fragment","IconButton"],"mappings":";;;;;;;;;;AAMA,MAAM,mBAAA,GAAsBA,0BAAA,CAAIC,0BAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,2BAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAOA,2BAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAYA,2BAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAUA,2BAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAOA,2BAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAKA,2BAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAMA,2BAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsBD,0BAAA,CAAIC,0BAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAMA,2BAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,OAAA;AAAA,EACN,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAY,QAAA,KAAa,GAAA;AAE/B,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAG,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,MAED,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,MAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACRC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,WAAWD,0BAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACAC,cAAA;AAAA,UAACI,qBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAS,QAAA;AAAA,YACT,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,mBAAA,CAAoB,EAAE,WAAA,EAAa;AAAA;AAAA;AAChD,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  style,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n  const mergedStyle = {\n    '--progress': `${progress}%`,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={mergedStyle}\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["cva","styles","jsx","cn","jsxs","Fragment","IconButton"],"mappings":";;;;;;;;;;AAMA,MAAM,mBAAA,GAAsBA,0BAAA,CAAIC,0BAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,2BAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAOA,2BAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAYA,2BAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAUA,2BAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAOA,2BAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAKA,2BAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAMA,2BAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsBD,0BAAA,CAAIC,0BAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAMA,2BAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,OAAA;AAAA,EACN,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAY,QAAA,KAAa,GAAA;AAC/B,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,YAAA,EAAc,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,IACzB,GAAG;AAAA,GACL;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,MAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACRC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,WAAWD,0BAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACAC,cAAA;AAAA,UAACI,qBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAS,QAAA;AAAA,YACT,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,mBAAA,CAAoB,EAAE,WAAA,EAAa;AAAA;AAAA;AAChD,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/cjs/components/Text/Text.css

@@ -9,6 +9,26 @@
   width: 100%;
 }
 
+.text_wrap_wrap__RR--m {
+  white-space: normal;
+}
+
+.text_wrap_nowrap__DCK82 {
+  white-space: nowrap;
+}
+
+.text_wrap_break-word__Oc5qD {
+  white-space: normal;
+  /* `anywhere` rather than `break-word` so long words also shrink the
+   min-content width, which is what flex and table layouts measure. */
+  overflow-wrap: anywhere;
+}
+
+.text_wrap_break-all__EdYJs {
+  white-space: normal;
+  word-break: break-all;
+}
+
 /* font shorthand depends on both size and weight; one class per pairing
    emits a single `font:` declaration. */
 

package/dist/cjs/components/Text/Text.module.css.cjs

@@ -3,6 +3,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const text = "text__78lq0";
+const text_wrap_wrap = "text_wrap_wrap__RR--m";
+const text_wrap_nowrap = "text_wrap_nowrap__DCK82";
 const text_color_default = "text_color_default__225Wd";
 const text_color_muted = "text_color_muted__DpcbG";
 const text_color_danger = "text_color_danger__hphaQ";
@@ -14,6 +16,10 @@ const text_align_right = "text_align_right__azLA3";
 const styles = {
 	text: text,
 	"text_fill-width": "text_fill-width__zRuxC",
+	text_wrap_wrap: text_wrap_wrap,
+	text_wrap_nowrap: text_wrap_nowrap,
+	"text_wrap_break-word": "text_wrap_break-word__Oc5qD",
+	"text_wrap_break-all": "text_wrap_break-all__EdYJs",
 	"text_font_normal-xs": "text_font_normal-xs__78uM-",
 	"text_font_normal-sm": "text_font_normal-sm__nFGGC",
 	"text_font_normal-md": "text_font_normal-md__In-T2",
@@ -54,4 +60,6 @@ exports.text_color_default = text_color_default;
 exports.text_color_disabled = text_color_disabled;
 exports.text_color_muted = text_color_muted;
 exports.text_color_warning = text_color_warning;
+exports.text_wrap_nowrap = text_wrap_nowrap;
+exports.text_wrap_wrap = text_wrap_wrap;
 //# sourceMappingURL=Text.module.css.cjs.map

package/dist/cjs/components/Text/Text.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Text.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/Text/index.cjs

@@ -26,6 +26,12 @@ const textVariants = classVarianceAuthority.cva(Text_module.default.text, {
     fillWidth: {
       true: Text_module.default["text_fill-width"]
     },
+    wrap: {
+      wrap: Text_module.default["text_wrap_wrap"],
+      nowrap: Text_module.default["text_wrap_nowrap"],
+      "break-word": Text_module.default["text_wrap_break-word"],
+      "break-all": Text_module.default["text_wrap_break-all"]
+    },
     size: {
       xs: "",
       sm: "",
@@ -78,6 +84,7 @@ const _Text = ({
   children,
   component,
   fillWidth,
+  wrap,
   ...props
 }, ref) => {
   const Component = component ?? "p";
@@ -86,7 +93,10 @@ const _Text = ({
     {
       ref,
       ...props,
-      className: cva.cn(textVariants({ color, align, size, weight, fillWidth }), className),
+      className: cva.cn(
+        textVariants({ color, align, size, weight, fillWidth, wrap }),
+        className
+      ),
       children
     }
   );

package/dist/cjs/components/Text/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(textVariants({ color, align, size, weight, fillWidth }), className)}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":["cva","styles","jsx","cn","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\nexport type TextWrap = 'wrap' | 'nowrap' | 'break-word' | 'break-all';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n  /** Text wrapping, unset by default - inherits from parent */\n  wrap?: TextWrap;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    wrap: {\n      wrap: styles['text_wrap_wrap'],\n      nowrap: styles['text_wrap_nowrap'],\n      'break-word': styles['text_wrap_break-word'],\n      'break-all': styles['text_wrap_break-all'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    wrap,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        textVariants({ color, align, size, weight, fillWidth, wrap }),\n        className\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":["cva","styles","jsx","cn","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Toast/index.cjs

@@ -195,7 +195,13 @@ const ToastProvider = ({
             id
           ))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(RadixUIToast__namespace.Viewport, { className: cva.cn(viewportVariants({ align })) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixUIToast__namespace.Viewport,
+          {
+            "aria-live": "off",
+            className: cva.cn(viewportVariants({ align }))
+          }
+        )
       ]
     },
     `toast-provider-${align}`

package/dist/cjs/components/Toast/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createContext, useEffect, useState } from 'react';\nimport * as RadixUIToast from '@radix-ui/react-toast';\nimport { cn, cva } from '@/lib/cva';\nimport { toastsEventEmitter } from './toastEmitter';\nimport { Icon, type IconName, type IconProps } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { Button } from '@/components/Button';\nimport { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';\nimport styles from './Toast.module.css';\n\nexport const ToastContext = createContext<ToastContextProps>({\n  createToast: () => null,\n});\n\nconst toastIconVariants = cva(styles.toast__icon, {\n  variants: {\n    type: {\n      default: styles['toast__icon_type_default'],\n      success: styles['toast__icon_type_success'],\n      warning: styles['toast__icon_type_warning'],\n      danger: styles['toast__icon_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ToastIcon = ({\n  $type = 'default',\n  className,\n  ...props\n}: IconProps & { $type?: ToastType }) => (\n  <Icon\n    {...props}\n    className={cn(toastIconVariants({ type: $type }), className)}\n  />\n);\n\nconst viewportVariants = cva(styles['toast-viewport'], {\n  variants: {\n    align: {\n      start: styles['toast-viewport_align_start'],\n      end: styles['toast-viewport_align_end'],\n    },\n  },\n  defaultVariants: {\n    align: 'end',\n  },\n});\n\nexport const Toast = ({\n  type,\n  toastType = 'foreground',\n  title,\n  description,\n  actions = [],\n  duration,\n  onClose,\n  className,\n  ...props\n}: ToastProps & { onClose: (open: boolean) => void }) => {\n  let iconName = '';\n  if (type === 'default') {\n    iconName = 'info-in-circle';\n  } else if (type === 'success') {\n    iconName = 'check';\n  } else if (type && ['danger', 'warning'].includes(type)) {\n    iconName = 'warning';\n  }\n  return (\n    <RadixUIToast.Root\n      onOpenChange={onClose}\n      duration={duration}\n      type={toastType}\n      {...props}\n      className={cn(styles.toast, className)}\n    >\n      <RadixUIToast.Title className={styles.toast__header}>\n        {iconName.length > 0 && (\n          <ToastIcon\n            name={iconName as IconName}\n            $type={type}\n          />\n        )}\n        <div className={styles.toast__title}>{title}</div>\n        <RadixUIToast.Close asChild>\n          <IconButton\n            icon=\"cross\"\n            type=\"ghost\"\n          />\n        </RadixUIToast.Close>\n      </RadixUIToast.Title>\n      {(description || actions.length > 0) && (\n        <div className={styles['toast__description-container']}>\n          <RadixUIToast.Description className={styles['toast__description-content']}>\n            {description}\n          </RadixUIToast.Description>\n          {actions.length > 0 && (\n            <div className={styles['toast__description-content']}>\n              {actions.map(({ altText, ...btnProps }) => (\n                <RadixUIToast.Action\n                  altText={altText}\n                  asChild\n                  key={altText}\n                >\n                  <div>\n                    <Button {...btnProps} />\n                  </div>\n                </RadixUIToast.Action>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </RadixUIToast.Root>\n  );\n};\n\nexport interface ToastProviderProps extends RadixUIToast.ToastProviderProps {\n  align?: ToastAlignment;\n}\n\nexport const ToastProvider = ({\n  children,\n  align = 'end',\n  ...props\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({\n    start: new Map(),\n    end: new Map(),\n  });\n\n  useEffect(() => {\n    const listener = (toast: ToastProps) => {\n      setToasts(currentToasts => {\n        const alignment = toast.align ?? 'end';\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[alignment]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[alignment] = map;\n        return newToasts;\n      });\n    };\n\n    toastsEventEmitter.on(listener);\n\n    return () => toastsEventEmitter.off(listener);\n  }, []);\n\n  const onClose = (id: string) => (open: boolean) => {\n    if (!open) {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[align]);\n        map.delete(id);\n        newToasts[align] = map;\n        return newToasts;\n      });\n    }\n  };\n\n  const value = {\n    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[toastAlign]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[toastAlign] = map;\n        return newToasts;\n      });\n    },\n  };\n\n  return (\n    <RadixUIToast.Provider\n      swipeDirection={align === 'start' ? 'left' : 'right'}\n      key={`toast-provider-${align}`}\n      {...props}\n    >\n      <ToastContext.Provider value={value}>\n        {children}\n        {Array.from(toasts[align]).map(([id, toast]) => (\n          <Toast\n            key={id}\n            {...toast}\n            onClose={onClose(id)}\n          />\n        ))}\n      </ToastContext.Provider>\n      <RadixUIToast.Viewport className={cn(viewportVariants({ align }))} />\n    </RadixUIToast.Provider>\n  );\n};\n"],"names":["createContext","cva","styles","jsx","Icon","cn","jsxs","RadixUIToast","IconButton","Button","useState","useEffect","toastsEventEmitter"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createContext, useEffect, useState } from 'react';\nimport * as RadixUIToast from '@radix-ui/react-toast';\nimport { cn, cva } from '@/lib/cva';\nimport { toastsEventEmitter } from './toastEmitter';\nimport { Icon, type IconName, type IconProps } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { Button } from '@/components/Button';\nimport { ToastContextProps, ToastProps, ToastAlignment, ToastType } from './Toast.types';\nimport styles from './Toast.module.css';\n\nexport const ToastContext = createContext<ToastContextProps>({\n  createToast: () => null,\n});\n\nconst toastIconVariants = cva(styles.toast__icon, {\n  variants: {\n    type: {\n      default: styles['toast__icon_type_default'],\n      success: styles['toast__icon_type_success'],\n      warning: styles['toast__icon_type_warning'],\n      danger: styles['toast__icon_type_danger'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ToastIcon = ({\n  $type = 'default',\n  className,\n  ...props\n}: IconProps & { $type?: ToastType }) => (\n  <Icon\n    {...props}\n    className={cn(toastIconVariants({ type: $type }), className)}\n  />\n);\n\nconst viewportVariants = cva(styles['toast-viewport'], {\n  variants: {\n    align: {\n      start: styles['toast-viewport_align_start'],\n      end: styles['toast-viewport_align_end'],\n    },\n  },\n  defaultVariants: {\n    align: 'end',\n  },\n});\n\nexport const Toast = ({\n  type,\n  toastType = 'foreground',\n  title,\n  description,\n  actions = [],\n  duration,\n  onClose,\n  className,\n  ...props\n}: ToastProps & { onClose: (open: boolean) => void }) => {\n  let iconName = '';\n  if (type === 'default') {\n    iconName = 'info-in-circle';\n  } else if (type === 'success') {\n    iconName = 'check';\n  } else if (type && ['danger', 'warning'].includes(type)) {\n    iconName = 'warning';\n  }\n  return (\n    <RadixUIToast.Root\n      onOpenChange={onClose}\n      duration={duration}\n      type={toastType}\n      {...props}\n      className={cn(styles.toast, className)}\n    >\n      <RadixUIToast.Title className={styles.toast__header}>\n        {iconName.length > 0 && (\n          <ToastIcon\n            name={iconName as IconName}\n            $type={type}\n          />\n        )}\n        <div className={styles.toast__title}>{title}</div>\n        <RadixUIToast.Close asChild>\n          <IconButton\n            icon=\"cross\"\n            type=\"ghost\"\n          />\n        </RadixUIToast.Close>\n      </RadixUIToast.Title>\n      {(description || actions.length > 0) && (\n        <div className={styles['toast__description-container']}>\n          <RadixUIToast.Description className={styles['toast__description-content']}>\n            {description}\n          </RadixUIToast.Description>\n          {actions.length > 0 && (\n            <div className={styles['toast__description-content']}>\n              {actions.map(({ altText, ...btnProps }) => (\n                <RadixUIToast.Action\n                  altText={altText}\n                  asChild\n                  key={altText}\n                >\n                  <div>\n                    <Button {...btnProps} />\n                  </div>\n                </RadixUIToast.Action>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </RadixUIToast.Root>\n  );\n};\n\nexport interface ToastProviderProps extends RadixUIToast.ToastProviderProps {\n  align?: ToastAlignment;\n}\n\nexport const ToastProvider = ({\n  children,\n  align = 'end',\n  ...props\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<Record<ToastAlignment, Map<string, ToastProps>>>({\n    start: new Map(),\n    end: new Map(),\n  });\n\n  useEffect(() => {\n    const listener = (toast: ToastProps) => {\n      setToasts(currentToasts => {\n        const alignment = toast.align ?? 'end';\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[alignment]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[alignment] = map;\n        return newToasts;\n      });\n    };\n\n    toastsEventEmitter.on(listener);\n\n    return () => toastsEventEmitter.off(listener);\n  }, []);\n\n  const onClose = (id: string) => (open: boolean) => {\n    if (!open) {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[align]);\n        map.delete(id);\n        newToasts[align] = map;\n        return newToasts;\n      });\n    }\n  };\n\n  const value = {\n    createToast: (toast: ToastProps, toastAlign: ToastAlignment = align) => {\n      setToasts(currentToasts => {\n        const newToasts = { ...currentToasts };\n        const map = new Map(newToasts[toastAlign]);\n        map.set(toast?.id ?? String(Date.now()), toast);\n        newToasts[toastAlign] = map;\n        return newToasts;\n      });\n    },\n  };\n\n  return (\n    <RadixUIToast.Provider\n      swipeDirection={align === 'start' ? 'left' : 'right'}\n      key={`toast-provider-${align}`}\n      {...props}\n    >\n      <ToastContext.Provider value={value}>\n        {children}\n        {Array.from(toasts[align]).map(([id, toast]) => (\n          <Toast\n            key={id}\n            {...toast}\n            onClose={onClose(id)}\n          />\n        ))}\n      </ToastContext.Provider>\n      {/* aria-live exempts the viewport from the aria-hidden sweep modal layers\n          run, keeping toasts over a Dialog or Select in the accessibility tree. */}\n      <RadixUIToast.Viewport\n        aria-live=\"off\"\n        className={cn(viewportVariants({ align }))}\n      />\n    </RadixUIToast.Provider>\n  );\n};\n"],"names":["createContext","cva","styles","jsx","Icon","cn","jsxs","RadixUIToast","IconButton","Button","useState","useEffect","toastsEventEmitter"],"mappings":"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"}

package/dist/esm/click-ui.css

@@ -972,6 +972,26 @@
   width: 100%;
 }
 
+.text_wrap_wrap__RR--m {
+  white-space: normal;
+}
+
+.text_wrap_nowrap__DCK82 {
+  white-space: nowrap;
+}
+
+.text_wrap_break-word__Oc5qD {
+  white-space: normal;
+  /* `anywhere` rather than `break-word` so long words also shrink the
+   min-content width, which is what flex and table layouts measure. */
+  overflow-wrap: anywhere;
+}
+
+.text_wrap_break-all__EdYJs {
+  white-space: normal;
+  word-break: break-all;
+}
+
 /* font shorthand depends on both size and weight; one class per pairing
    emits a single `font:` declaration. */
 
@@ -1356,6 +1376,11 @@
   cursor: pointer;
 }
 
+.iconbutton__G-cEu:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
 .iconbutton_size_sm__tT3BV {
   padding: var(--click-button-iconButton-sm-space-y)
     var(--click-button-iconButton-sm-space-x);
@@ -4208,9 +4233,12 @@ div:active + .topbadge__E79OZ {
      colors are set inline per state via --codeblock-button, matching the
      --codeblock-numbers pattern so both track the ThemeProvider runtime. */
   --codeblock-button: initial;
+  /* assign context to be above pseudo-element 
+     can be cleaned up when background is a regular color variable with alpha */
+  z-index: 1;
   padding: 0;
   border: 0;
-  color: var(--codeblock-button, inherit);
+  color: var(--codeblock-button, inherit); 
 }
 
 .codeblock__highlighter__t4Xol {
@@ -4226,13 +4254,42 @@ div:active + .topbadge__E79OZ {
 
 .codeblock__button-container__D6yob {
   display: flex;
+  opacity: 0;
   position: absolute;
   top: var(--click-codeblock-space-y);
   right: var(--click-codeblock-space-x);
-  gap: 0.625rem;
+  padding: var(--spaces-1);
+  gap: var(--spaces-1);
+  pointer-events: none;
+  transition: opacity 200ms ease-in-out;
 }
+
+.codeblock__pRWOC:hover .codeblock__button-container__D6yob,
+.codeblock__pRWOC:focus-within .codeblock__button-container__D6yob {
+  opacity: 1;
+  pointer-events: auto;
+  transition-duration: 150ms;
 }
-@layer clickui {.content__fI-1- {
+
+/* this element can be refactored to a color var with alpha when available */
+.codeblock__button-container__D6yob::before {
+  content: "";
+  opacity: 0.85;
+  position: absolute;  
+  z-index: 0;
+  inset: 0;
+  border-radius: var(--spaces-1); 
+}
+
+/* custom conditional theming can be later replaced with semantic color tokens */
+[data-cui-theme="light"] .codeblock__button-container__D6yob::before {
+  background: var(--palette-indigo-100);
+}
+
+[data-cui-theme="dark"] .codeblock__button-container__D6yob::before {
+  background: var(--palette-neutral-900);
+}
+}@layer clickui {.content__fI-1- {
   display: flex;
   overflow: hidden;
   flex-direction: column;
@@ -4772,7 +4829,9 @@ div:active + .topbadge__E79OZ {
   }
 }
 }
-@layer clickui {.menu-panel__-IeVm {
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+
+.menu-panel__-IeVm {
   display: block;
   padding: var(--click-popover-space-y) var(--click-popover-space-x);
   border: 1px solid var(--click-popover-color-panel-stroke-default);
@@ -4797,18 +4856,16 @@ div:active + .topbadge__E79OZ {
   cursor: pointer;
 }
 
-.close-button__fpjhc {
+.menu-panel__-IeVm .close-button__fpjhc {
+  /* Offset by the button's own padding so the cross sits at the panel inset */
   position: absolute;
-  top: var(--click-popover-space-y);
-  right: var(--click-popover-space-x);
-  width: var(--click-popover-icon-size-width);
-  height: var(--click-popover-icon-size-height);
+  top: calc(var(--click-popover-space-y) - var(--click-button-iconButton-sm-space-y));
+  right: calc(var(--click-popover-space-x) - var(--click-button-iconButton-sm-space-x));
 }
 }
 @layer clickui {.link__Ly-e3 {
   display: inline-flex;
   margin: 0;
-  margin-right: var(--link-gap);
   align-items: center;
   gap: var(--link-gap);
   color: var(--click-global-color-text-link-default);