@clickhouse/click-ui 0.10.0 → 0.11.0-rc1

package/dist/esm/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/esm/components/Popover/index.js

@@ -7,7 +7,7 @@ import { cn } from '../../lib/cva.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 import styles from './Popover.module.css.js';
-import { Icon as SvgImage } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
 import { cva } from 'class-variance-authority';
 
 const Popover = ({ children, ...props }) => {
@@ -76,14 +76,6 @@ const PopoverContent = ({
           sideOffset: 4,
           ...props,
           children: [
-            showClose && /* @__PURE__ */ jsx(
-              RadixPopover.Close,
-              {
-                asChild: true,
-                className: styles["close-button"],
-                children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" })
-              }
-            ),
             showArrow && /* @__PURE__ */ jsx(
               Arrow,
               {
@@ -94,7 +86,17 @@ const PopoverContent = ({
                 children: /* @__PURE__ */ jsx(Popover_Arrow, {})
               }
             ),
-            children
+            children,
+            showClose && /* @__PURE__ */ jsx(RadixPopover.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                className: styles["close-button"],
+                icon: "cross",
+                type: "ghost",
+                size: "sm",
+                "aria-label": "Close"
+              }
+            ) })
           ]
         }
       )

package/dist/esm/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":["Icon"],"mappings":"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"}
+{"version":3,"file":"index.js","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":[],"mappings":"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"}

package/dist/esm/components/ProgressBar/index.js

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

package/dist/esm/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":[],"mappings":";;;;;;AAMA,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAO,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,OAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAU,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAK,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAO,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,GAAsB,GAAA,CAAI,MAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,OAAO,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,uBACE,GAAA;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,EAAW,EAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;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.js","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":[],"mappings":";;;;;;AAMA,MAAM,mBAAA,GAAsB,GAAA,CAAI,MAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,OAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAO,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,OAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAU,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAO,OAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAK,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAO,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,GAAsB,GAAA,CAAI,MAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,OAAO,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,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EAAO,WAAA;AAAA,MACN,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;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/esm/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/esm/components/Text/Text.module.css.js

@@ -1,4 +1,6 @@
 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";
@@ -10,6 +12,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",
@@ -40,5 +46,5 @@ const styles = {
 	text_align_right: text_align_right
 };
 
-export { styles as default, text, text_align_center, text_align_left, text_align_right, text_color_danger, text_color_default, text_color_disabled, text_color_muted, text_color_warning };
+export { styles as default, text, text_align_center, text_align_left, text_align_right, text_color_danger, text_color_default, text_color_disabled, text_color_muted, text_color_warning, text_wrap_nowrap, text_wrap_wrap };
 //# sourceMappingURL=Text.module.css.js.map

package/dist/esm/components/Text/Text.module.css.js.map

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

package/dist/esm/components/Text/index.js

@@ -22,6 +22,12 @@ const textVariants = cva(styles.text, {
     fillWidth: {
       true: styles["text_fill-width"]
     },
+    wrap: {
+      wrap: styles["text_wrap_wrap"],
+      nowrap: styles["text_wrap_nowrap"],
+      "break-word": styles["text_wrap_break-word"],
+      "break-all": styles["text_wrap_break-all"]
+    },
     size: {
       xs: "",
       sm: "",
@@ -74,6 +80,7 @@ const _Text = ({
   children,
   component,
   fillWidth,
+  wrap,
   ...props
 }, ref) => {
   const Component = component ?? "p";
@@ -82,7 +89,10 @@ const _Text = ({
     {
       ref,
       ...props,
-      className: cn(textVariants({ color, align, size, weight, fillWidth }), className),
+      className: cn(
+        textVariants({ color, align, size, weight, fillWidth, wrap }),
+        className
+      ),
       children
     }
   );

package/dist/esm/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":[],"mappings":"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"}
+{"version":3,"file":"index.js","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":[],"mappings":"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"}

package/dist/esm/components/Toast/index.js

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

package/dist/esm/components/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":["Icon"],"mappings":"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"}
+{"version":3,"file":"index.js","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":["Icon"],"mappings":"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"}

package/dist/types/components/CodeBlock/CodeBlock.d.ts

@@ -1,2 +1,2 @@
 import { CodeBlockProps } from './CodeBlock.types';
-export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, className, style, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, ariaLabel, onCopy, onCopyError, className, style, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CodeBlock/CodeBlock.types.d.ts

@@ -7,6 +7,14 @@ export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     showLineNumbers?: boolean;
     showWrapButton?: boolean;
     wrapLines?: boolean;
+    /**
+     * Accessible name for the scrollable code region. The region is a keyboard
+     * tab stop (so overflowing code can be scrolled), and a tab stop must be
+     * announced. Defaults to the `language` plus "code block", or "Code block"
+     * when no language is set. Override to localise it or to say which code this
+     * is when a page has several blocks.
+     */
+    ariaLabel?: string;
     onCopy?: (value: string) => void | Promise<void>;
     onCopyError?: (error: string) => void | Promise<void>;
 }

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
+import { IconWrapperProps } from '../IconWrapper';
 import { IconName } from '../Icon';
 import { HorizontalDirection } from '../../types';
+import { ArrowProps, DropdownItemProps } from './Dropdown.types';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 export declare const Dropdown: {
     (props: DropdownMenu.DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
@@ -21,23 +23,27 @@ export declare const Dropdown: {
         displayName: string;
     };
     Item: {
-        ({ icon, iconDir, type, children, ...props }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ icon, iconDir, type, tooltipProps, children, ...props }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
-interface SubDropdownProps {
+interface SubDiscriminant {
     sub?: true;
+}
+interface SubTriggerFields {
     icon?: IconName;
     iconDir?: HorizontalDirection;
+    /**
+     * Positions the tooltip shown when the label is truncated. Defaults to
+     * `side: 'right'` so the tooltip does not cover the items above it.
+     */
+    tooltipProps?: IconWrapperProps['tooltipProps'];
 }
 interface MainDropdownProps {
     sub?: never;
 }
-type DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & SubDropdownProps;
+type DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & SubDiscriminant & SubTriggerFields;
 type DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;
-export type ArrowProps = {
-    showArrow?: boolean;
-};
 interface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {
     children?: ReactNode;
     container?: HTMLElement | null;
@@ -48,15 +54,6 @@ interface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubCont
     container?: HTMLElement | null;
     responsivePositioning?: boolean;
 }
-type DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;
+type DropdownContentProps = StyledDropdownContentProps & SubDiscriminant & ArrowProps;
 type DropdownSubContentProps = StyledDropdownSubContentProps & MainDropdownProps & ArrowProps;
-interface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {
-    /** Icon to display in the menu item */
-    icon?: IconName;
-    /** The direction of the icon relative to the label */
-    iconDir?: HorizontalDirection;
-    /** The type of the menu item */
-    type?: 'default' | 'danger';
-}
-export type { DropdownItemProps };
 export default Dropdown;

package/dist/types/components/Dropdown/Dropdown.types.d.ts

@@ -1,10 +1,20 @@
 import { HorizontalDirection } from '../../types';
 import { IconName } from '../Icon/Icon.types';
+import { IconWrapperProps } from '../IconWrapper/IconWrapper.types';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 export interface ArrowProps {
     showArrow?: boolean;
 }
 export interface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {
+    /** Icon to display in the menu item */
     icon?: IconName;
+    /** The direction of the icon relative to the label */
     iconDir?: HorizontalDirection;
+    /** The type of the menu item */
+    type?: 'default' | 'danger';
+    /**
+     * Positions the tooltip shown when the label is truncated. Defaults to
+     * `side: 'right'` so the tooltip does not cover the items above it.
+     */
+    tooltipProps?: IconWrapperProps['tooltipProps'];
 }

package/dist/types/components/EllipsisContent/EllipsisContent.d.ts

@@ -1,7 +1,5 @@
 import { ComponentProps, ElementType, ReactNode } from 'react';
-export interface EllipsisContentProps<T extends ElementType = 'div'> {
-    component?: T;
-}
+import { EllipsisContentProps } from './EllipsisContent.types';
 type EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>) => ReactNode;
 export declare const EllipsisContent: EllipsisPolymorphicComponent;
 export {};

package/dist/types/components/EllipsisContent/EllipsisContent.types.d.ts

@@ -1,4 +1,10 @@
 import { ElementType } from 'react';
+import { TooltipContentProps } from '../Tooltip/Tooltip.types';
 export interface EllipsisContentProps<T extends ElementType = 'div'> {
     component?: T;
+    /**
+     * Positions the tooltip shown when the content is truncated, e.g.
+     * `{ side: 'right' }` to keep it clear of the content above it.
+     */
+    tooltipProps?: Pick<TooltipContentProps, 'side' | 'align' | 'sideOffset'>;
 }

package/dist/types/components/IconWrapper/IconWrapper.d.ts

@@ -1,2 +1,2 @@
 import { IconWrapperProps } from './IconWrapper.types';
-export declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, gap, isResponsive, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, tooltipProps, gap, isResponsive, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/IconWrapper/IconWrapper.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { HorizontalDirection, AssetSize } from '../../types';
+import { EllipsisContentProps } from '../EllipsisContent/EllipsisContent.types';
 import { ImageName } from '../Icon/Icon.types';
 import { GapOptions } from '../Container';
 export interface IconWrapperProps extends HTMLAttributes<HTMLDivElement> {
@@ -10,6 +11,8 @@ export interface IconWrapperProps extends HTMLAttributes<HTMLDivElement> {
     height?: number | string;
     children: ReactNode;
     ellipsisContent?: boolean;
+    /** Positions the truncation tooltip. Ignored when `ellipsisContent` is `false`. */
+    tooltipProps?: EllipsisContentProps['tooltipProps'];
     gap?: GapOptions;
     isResponsive?: boolean;
 }

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -1,2 +1,2 @@
 import { ProgressBarProps } from './ProgressBar.types';
-export declare const ProgressBar: ({ progress, type, dismissable, onCancel, successMessage, orientation, dir, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ progress, type, dismissable, onCancel, successMessage, orientation, dir, className, style, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Text/Text.d.ts

@@ -3,6 +3,7 @@ export type TextSize = 'xs' | 'sm' | 'md' | 'lg';
 export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';
 export type TextAlignment = 'left' | 'center' | 'right';
 export type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';
+export type TextWrap = 'wrap' | 'nowrap' | 'break-word' | 'break-all';
 export interface TextProps<T extends ElementType = 'p'> {
     /** The text content to display */
     children: ReactNode;
@@ -20,6 +21,8 @@ export interface TextProps<T extends ElementType = 'p'> {
     component?: T;
     /** Whether the text should fill the full width of its container */
     fillWidth?: boolean;
+    /** Text wrapping, unset by default - inherits from parent */
+    wrap?: TextWrap;
 }
 type TextPolymorphicComponent = <T extends ElementType = 'p'>(props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>) => ReactNode;
 export declare const Text: TextPolymorphicComponent;

package/dist/types/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip.types';
+export type { TooltipContentProps, TooltipProps } from './Tooltip.types';

package/dist/types/index.d.ts

@@ -55,7 +55,9 @@ export type { DateRange, Timezone } from './components/DatePicker/utils';
 export { Dialog } from './components/Dialog';
 export type { DialogContentProps, DialogProps, DialogTriggerProps, } from './components/Dialog';
 export { Dropdown } from './components/Dropdown';
+export type { DropdownItemProps } from './components/Dropdown';
 export { EllipsisContent } from './components/EllipsisContent';
+export type { EllipsisContentProps } from './components/EllipsisContent';
 export { FileMultiUpload, FileUpload } from './components/FileUpload';
 export { FileTabs, FileTabElement } from './components/FileTabs';
 export type { FileTabStatusType } from './components/FileTabs';
@@ -124,7 +126,7 @@ export type { ToastProps } from './components/Toast';
 export { useInitialTheme, useToast, useCUITheme } from './hooks';
 export type { CUIThemeType, UseThemeParams } from './hooks';
 export { Tooltip } from './components/Tooltip/Tooltip';
-export type { TooltipProps } from './components/Tooltip';
+export type { TooltipContentProps, TooltipProps } from './components/Tooltip';
 export { Text } from './components/Text';
 export type { TextProps } from './components/Text';
 export { Title } from './components/Title';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "v0.10.0",
+  "version": "0.11.0-rc1",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -390,7 +390,7 @@
     "storybook:build": "storybook build -o .storybook/out",
     "storybook:serve": "yarn dlx http-server .storybook/out",
     "test": "vitest",
-    "test:chromatic": "yarn dlx chromatic",
+    "test:chromatic": "yarn chromatic",
     "test:visual": ".scripts/bash/playwright-docker",
     "test:visual:report": ".scripts/bash/playwright-docker report",
     "test:visual:ui": ".scripts/bash/playwright-docker ui",
@@ -400,22 +400,20 @@
   },
   "dependencies": {
     "@h6s/calendar": "2.2.0",
-    "@radix-ui/react-accordion": "1.2.12",
-    "@radix-ui/react-avatar": "1.1.1",
-    "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-context-menu": "2.2.2",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dismissable-layer": "1.1.1",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-popper": "1.2.1",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-separator": "1.1.1",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toast": "1.2.2",
-    "@radix-ui/react-tooltip": "1.1.2",
+    "@radix-ui/react-accordion": "1.2.20",
+    "@radix-ui/react-avatar": "1.2.6",
+    "@radix-ui/react-checkbox": "1.3.11",
+    "@radix-ui/react-context-menu": "2.3.7",
+    "@radix-ui/react-dialog": "1.1.23",
+    "@radix-ui/react-dropdown-menu": "2.1.24",
+    "@radix-ui/react-hover-card": "1.1.23",
+    "@radix-ui/react-popover": "1.1.23",
+    "@radix-ui/react-radio-group": "1.4.7",
+    "@radix-ui/react-separator": "1.1.15",
+    "@radix-ui/react-switch": "1.3.7",
+    "@radix-ui/react-tabs": "1.1.21",
+    "@radix-ui/react-toast": "1.2.23",
+    "@radix-ui/react-tooltip": "1.2.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
@@ -449,7 +447,7 @@
     "@types/react-window": "^1.8.8",
     "@types/sortablejs": "^1.15.2",
     "@vitejs/plugin-react": "^5.1.2",
-    "chromatic": "^13.3.4",
+    "chromatic": "^18.6.0",
     "eslint": "^9",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",