@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { cn, cva } from '@/lib/cva';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dialog.module.css';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n  return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\nconst DialogTrigger = ({\n  children,\n  asChild,\n  className,\n  ...props\n}: DialogTriggerProps) => {\n  return (\n    <RadixDialog.Trigger\n      asChild={asChild}\n      className={asChild ? className : cn(styles.trigger, className)}\n      {...props}\n    >\n      {children}\n    </RadixDialog.Trigger>\n  );\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n  <RadixDialog.Close asChild>\n    <Button\n      type={type}\n      label={label}\n      {...props}\n    />\n  </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\nconst contentAreaVariants = cva(styles.content, {\n  variants: {\n    reducePadding: {\n      true: styles['content_reduce-padding'],\n    },\n  },\n});\n\nconst titleAreaVariants = cva(styles['title-area'], {\n  variants: {\n    onlyClose: {\n      true: styles['title-area_only-close'],\n    },\n  },\n});\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n  <RadixDialog.Close asChild>\n    <CrossButton onClick={onClose}>\n      <Icon\n        name=\"cross\"\n        size=\"lg\"\n      />\n    </CrossButton>\n  </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n  title,\n  description,\n  children,\n  showClose,\n  onClose,\n  forceMount,\n  container,\n  showOverlay = true,\n  reducePadding = false,\n  className,\n  ...props\n}: DialogContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixDialog.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      {showOverlay && <RadixDialog.Overlay className={styles.overlay} />}\n      <RadixDialog.Content\n        data-testid=\"click-dialog-contentarea\"\n        {...props}\n        className={cn(contentAreaVariants({ reducePadding }), className)}\n      >\n        {(title || showClose) && (\n          <>\n            <div className={cn(titleAreaVariants({ onlyClose: !!showClose && !title }))}>\n              {title && (\n                <RadixDialog.Title\n                  data-testid=\"click-dialog-title\"\n                  className={styles.title}\n                >\n                  {title}\n                </RadixDialog.Title>\n              )}\n              {showClose && (\n                <CloseButton\n                  data-testid=\"click-dialog-close\"\n                  onClose={onClose}\n                />\n              )}\n            </div>\n            <Spacer size=\"sm\" />\n          </>\n        )}\n        {description ? (\n          <RadixDialog.Description className={styles.description}>\n            {description}\n          </RadixDialog.Description>\n        ) : (\n          <RadixDialog.Description hidden />\n        )}\n        {children}\n      </RadixDialog.Content>\n    </RadixDialog.Portal>\n  );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","RadixDialog","DialogTrigger","asChild","className","jsx","cn","styles","trigger","displayName","Trigger","DialogClose","label","type","Button","Close","contentAreaVariants","cva","content","variants","reducePadding","true","titleAreaVariants","onlyClose","CloseButton","onClose","CrossButton","Icon","DialogContent","title","description","showClose","forceMount","container","showOverlay","portalContainer","useResolvedPortalContainer","overlay","jsxs","Fragment","Spacer","Content"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { cn, cva } from '@/lib/cva';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dialog.module.css';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n  return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\nconst DialogTrigger = ({\n  children,\n  asChild,\n  className,\n  ...props\n}: DialogTriggerProps) => {\n  return (\n    <RadixDialog.Trigger\n      asChild={asChild}\n      className={asChild ? className : cn(styles.trigger, className)}\n      {...props}\n    >\n      {children}\n    </RadixDialog.Trigger>\n  );\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n  <RadixDialog.Close asChild>\n    <Button\n      type={type}\n      label={label}\n      {...props}\n    />\n  </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\nconst contentAreaVariants = cva(styles.content, {\n  variants: {\n    reducePadding: {\n      true: styles['content_reduce-padding'],\n    },\n  },\n});\n\nconst titleAreaVariants = cva(styles['title-area'], {\n  variants: {\n    onlyClose: {\n      true: styles['title-area_only-close'],\n    },\n  },\n});\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n  <RadixDialog.Close asChild>\n    <CrossButton onClick={onClose}>\n      <Icon\n        name=\"cross\"\n        size=\"lg\"\n      />\n    </CrossButton>\n  </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n  title,\n  description,\n  children,\n  showClose,\n  onClose,\n  forceMount,\n  container,\n  showOverlay = true,\n  reducePadding = false,\n  className,\n  ...props\n}: DialogContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixDialog.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      {showOverlay && <RadixDialog.Overlay className={styles.overlay} />}\n      <RadixDialog.Content\n        data-testid=\"click-dialog-contentarea\"\n        {...props}\n        className={cn(contentAreaVariants({ reducePadding }), className)}\n      >\n        {(title || showClose) && (\n          <>\n            <div className={cn(titleAreaVariants({ onlyClose: !!showClose && !title }))}>\n              {title && (\n                <RadixDialog.Title\n                  data-testid=\"click-dialog-title\"\n                  className={styles.title}\n                >\n                  {title}\n                </RadixDialog.Title>\n              )}\n              {showClose && (\n                <CloseButton\n                  data-testid=\"click-dialog-close\"\n                  onClose={onClose}\n                />\n              )}\n            </div>\n            <Spacer size=\"sm\" />\n          </>\n        )}\n        {description ? (\n          <RadixDialog.Description className={styles.description}>\n            {description}\n          </RadixDialog.Description>\n        ) : (\n          <RadixDialog.Description hidden />\n        )}\n        {children}\n      </RadixDialog.Content>\n    </RadixDialog.Portal>\n  );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["RadixDialog","jsx","cn","styles","Button","cva","CrossButton","Icon","useResolvedPortalContainer","jsxs","Fragment","Spacer"],"mappings":"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"}

package/dist/cjs/components/Dropdown/Dropdown.css

@@ -1,4 +1,4 @@
-.dropdown-menu-content__Qc6mk {
+@layer clickui {.dropdown-menu-content__Qc6mk {
   z-index: 1;
   /* stylelint-disable-next-line custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
   min-width: var(--click-genericMenu-item-size-minWidth);
@@ -34,3 +34,4 @@
   /* stylelint-disable-next-line custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
   border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
 }
+}

package/dist/cjs/components/Dropdown/index.cjs

@@ -36,10 +36,14 @@ function _interopNamespace(e) {
 const DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
 
 const Dropdown = (props) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Root, { ...props });
-const _DropdownMenuItem = ({
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { ref, ...props, className: cva.cn(Dropdown_module.default["dropdown-menu-item"], className) });
+const _DropdownMenuItem = ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  GenericMenu.GenericMenuItem,
+  {
+    ref,
+    ...props,
+    className: cva.cn(Dropdown_module.default["dropdown-menu-item"], className)
+  }
+);
 const DropdownMenuItem = react.forwardRef(_DropdownMenuItem);
 const DropdownTrigger = ({
   sub,
@@ -47,28 +51,47 @@ const DropdownTrigger = ({
   ...props
 }) => {
   if (sub) {
-    const {
-      icon,
-      iconDir,
-      ...menuProps
-    } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { as: DropdownMenu__namespace.SubTrigger, ...menuProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right" })
-    ] });
+    const { icon, iconDir, ...menuProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenuItem,
+      {
+        as: DropdownMenu__namespace.SubTrigger,
+        ...menuProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconWrapper.IconWrapper,
+            {
+              icon,
+              iconDir,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right" })
+        ]
+      }
+    );
   }
-  const {
-    className,
-    ...triggerProps
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, ...triggerProps, className: cva.cn(Dropdown_module.default["dropdown-trigger"], className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }) });
+  const { className, ...triggerProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Trigger,
+    {
+      asChild: true,
+      ...triggerProps,
+      className: cva.cn(Dropdown_module.default["dropdown-trigger"], className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+    }
+  );
 };
 DropdownTrigger.displayName = "DropdownTrigger";
 Dropdown.Trigger = DropdownTrigger;
-const _DropdownMenuContent = ({
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuPanel, { ref, ...props, className: cva.cn(Dropdown_module.default["dropdown-menu-content"], className) });
+const _DropdownMenuContent = ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  GenericMenu.GenericMenuPanel,
+  {
+    ref,
+    ...props,
+    className: cva.cn(Dropdown_module.default["dropdown-menu-content"], className)
+  }
+);
 const DropdownMenuContent = react.forwardRef(_DropdownMenuContent);
 const DropdownContent = ({
   sub,
@@ -81,18 +104,44 @@ const DropdownContent = ({
   const ContentElement = sub ? DropdownMenu__namespace.SubContent : DropdownMenu__namespace.Content;
   const inputModalityProps = useInputModality.useInputModality();
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { ...props, type: "dropdown-menu", showArrow, as: ContentElement, sideOffset: 4, loop: true, avoidCollisions: responsivePositioning, collisionPadding: responsivePositioning ? 100 : void 0, ...inputModalityProps, children: [
-    showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: DropdownMenu__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
-    children
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenuContent,
+    {
+      ...props,
+      type: "dropdown-menu",
+      showArrow,
+      as: ContentElement,
+      sideOffset: 4,
+      loop: true,
+      avoidCollisions: responsivePositioning,
+      collisionPadding: responsivePositioning ? 100 : void 0,
+      ...inputModalityProps,
+      children: [
+        showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+          GenericMenu.Arrow,
+          {
+            asChild: true,
+            as: DropdownMenu__namespace.Arrow,
+            width: 20,
+            height: 10,
+            children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {})
+          }
+        ),
+        children
+      ]
+    }
+  ) });
 };
 DropdownContent.displayName = "DropdownContent";
 Dropdown.Content = DropdownContent;
-const DropdownGroup = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Group, { ...props, className: cva.cn(Dropdown_module.default["dropdown-group"], className) });
+const DropdownGroup = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Group,
+    {
+      ...props,
+      className: cva.cn(Dropdown_module.default["dropdown-group"], className)
+    }
+  );
 };
 DropdownGroup.displayName = "DropdownGroup";
 Dropdown.Group = DropdownGroup;
@@ -108,7 +157,22 @@ const DropdownItem = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { as: DropdownMenu__namespace.Item, type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenuItem,
+    {
+      as: DropdownMenu__namespace.Item,
+      type,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconWrapper.IconWrapper,
+        {
+          icon,
+          iconDir,
+          children
+        }
+      )
+    }
+  );
 };
 DropdownItem.displayName = "DropdownItem";
 Dropdown.Item = DropdownItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub is a context-only Radix primitive that renders no DOM node, so\n// the original styled(DropdownMenu.Sub) border-bottom never applied (the className\n// was dropped). The migration preserves that behavior: no class is forwarded.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["Dropdown","props","jsx","DropdownMenu","_DropdownMenuItem","className","ref","GenericMenuItem","cn","styles","DropdownMenuItem","forwardRef","DropdownTrigger","sub","children","icon","iconDir","menuProps","SubTrigger","IconWrapper","Icon","triggerProps","displayName","Trigger","_DropdownMenuContent","GenericMenuPanel","DropdownMenuContent","DropdownContent","container","showArrow","responsivePositioning","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","undefined","Arrow","Popover_Arrow","DropdownGroup","Group","DropdownSub","Sub","DropdownItem","type","Item"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport { useInputModality } from '@/hooks/internal';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Dropdown.module.css';\n\nexport const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (\n  <DropdownMenu.Root {...props} />\n);\n\ntype DropdownMenuItemComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuItem<T>>\n) => ReactNode;\n\nconst _DropdownMenuItem = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuItem<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuItem\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuItem>)}\n    className={cn(styles['dropdown-menu-item'], className)}\n  />\n);\n\nconst DropdownMenuItem: DropdownMenuItemComponent = forwardRef(_DropdownMenuItem);\n\ninterface SubDropdownProps {\n  sub?: true;\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDropdownProps;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n        <Icon name=\"chevron-right\" />\n      </DropdownMenuItem>\n    );\n  }\n\n  const { className, ...triggerProps } = props as DropdownTriggerProps;\n  return (\n    <DropdownMenu.Trigger\n      asChild\n      {...triggerProps}\n      className={cn(styles['dropdown-trigger'], className)}\n    >\n      <div>{children}</div>\n    </DropdownMenu.Trigger>\n  );\n};\n\nDropdownTrigger.displayName = 'DropdownTrigger';\nDropdown.Trigger = DropdownTrigger;\n\nexport type ArrowProps = {\n  showArrow?: boolean;\n};\n\ninterface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ninterface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {\n  children?: ReactNode;\n  container?: HTMLElement | null;\n  responsivePositioning?: boolean;\n}\n\ntype DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;\ntype DropdownSubContentProps = StyledDropdownSubContentProps &\n  MainDropdownProps &\n  ArrowProps;\n\ntype DropdownMenuContentComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>>\n) => ReactNode;\n\nconst _DropdownMenuContent = <T extends ElementType = 'div'>(\n  { className, ...props }: ComponentProps<typeof GenericMenuPanel<T>>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(styles['dropdown-menu-content'], className)}\n  />\n);\n\nconst DropdownMenuContent: DropdownMenuContentComponent =\n  forwardRef(_DropdownMenuContent);\n\nconst DropdownContent = ({\n  sub,\n  children,\n  container,\n  showArrow,\n  responsivePositioning = true,\n  ...props\n}: DropdownContentProps | DropdownSubContentProps) => {\n  const ContentElement = sub ? DropdownMenu.SubContent : DropdownMenu.Content;\n  const inputModalityProps = useInputModality();\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DropdownMenu.Portal container={portalContainer}>\n      <DropdownMenuContent\n        {...props}\n        type=\"dropdown-menu\"\n        showArrow={showArrow}\n        as={ContentElement}\n        sideOffset={4}\n        loop\n        avoidCollisions={responsivePositioning}\n        collisionPadding={responsivePositioning ? 100 : undefined}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={DropdownMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </DropdownMenuContent>\n    </DropdownMenu.Portal>\n  );\n};\n\nDropdownContent.displayName = 'DropdownContent';\nDropdown.Content = DropdownContent;\n\nconst DropdownGroup = ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps) => {\n  return (\n    <DropdownMenu.Group\n      {...props}\n      className={cn(styles['dropdown-group'], className)}\n    />\n  );\n};\n\nDropdownGroup.displayName = 'DropdownGroup';\nDropdown.Group = DropdownGroup;\n\n// DropdownMenu.Sub is a context-only Radix primitive that renders no DOM node, so\n// the original styled(DropdownMenu.Sub) border-bottom never applied (the className\n// was dropped). The migration preserves that behavior: no class is forwarded.\nconst DropdownSub = (props: DropdownMenu.DropdownMenuGroupProps) => {\n  return <DropdownMenu.Sub {...props} />;\n};\n\nDropdownSub.displayName = 'DropdownSub';\nDropdown.Sub = DropdownSub;\n\ninterface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {\n  /** Icon to display in the menu item */\n  icon?: IconName;\n  /** The direction of the icon relative to the label */\n  iconDir?: HorizontalDirection;\n  /** The type of the menu item */\n  type?: 'default' | 'danger';\n}\n\nexport type { DropdownItemProps };\n\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: DropdownItemProps) => {\n  return (\n    <DropdownMenuItem\n      as={DropdownMenu.Item}\n      type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </DropdownMenuItem>\n  );\n};\n\nDropdownItem.displayName = 'DropdownItem';\nDropdown.Item = DropdownItem;\n\nexport default Dropdown;\n"],"names":["jsx","DropdownMenu","GenericMenuItem","cn","styles","forwardRef","jsxs","IconWrapper","Icon","GenericMenuPanel","useInputModality","useResolvedPortalContainer","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,QAAA,GAAW,CAAC,KAAA,qBACvBA,cAAA,CAACC,wBAAa,IAAA,EAAb,EAAmB,GAAG,KAAA,EAAO;AAOhC,MAAM,oBAAoB,CACxB,EAAE,WAAW,GAAG,KAAA,IAChB,GAAA,qBAEAD,cAAA;AAAA,EAACE,2BAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACC,GAAI,KAAA;AAAA,IACL,SAAA,EAAWC,MAAA,CAAGC,uBAAA,CAAO,oBAAoB,GAAG,SAAS;AAAA;AACvD,CAAA;AAGF,MAAM,gBAAA,GAA8CC,iBAAW,iBAAiB,CAAA;AAgBhF,MAAM,kBAAkB,CAAC;AAAA,EACvB,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAsD;AACpD,EAAA,IAAI,GAAA,EAAK;AACP,IAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,GAAG,WAAU,GAAI,KAAA;AACxC,IAAA,uBACEC,eAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,IAAIL,uBAAA,CAAa,UAAA;AAAA,QAChB,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAD,cAAA;AAAA,YAACO,uBAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACAP,cAAA,CAACQ,SAAA,EAAA,EAAK,IAAA,EAAK,eAAA,EAAgB;AAAA;AAAA;AAAA,KAC7B;AAAA,EAEJ;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,YAAA,EAAa,GAAI,KAAA;AACvC,EAAA,uBACER,cAAA;AAAA,IAACC,uBAAA,CAAa,OAAA;AAAA,IAAb;AAAA,MACC,OAAA,EAAO,IAAA;AAAA,MACN,GAAG,YAAA;AAAA,MACJ,SAAA,EAAWE,MAAA,CAAGC,uBAAA,CAAO,kBAAkB,GAAG,SAAS,CAAA;AAAA,MAEnD,QAAA,kBAAAJ,cAAA,CAAC,SAAK,QAAA,EAAS;AAAA;AAAA,GACjB;AAEJ,CAAA;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAC9B,QAAA,CAAS,OAAA,GAAU,eAAA;AA2BnB,MAAM,uBAAuB,CAC3B,EAAE,WAAW,GAAG,KAAA,IAChB,GAAA,qBAEAA,cAAA;AAAA,EAACS,4BAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACC,GAAI,KAAA;AAAA,IACL,SAAA,EAAWN,MAAA,CAAGC,uBAAA,CAAO,uBAAuB,GAAG,SAAS;AAAA;AAC1D,CAAA;AAGF,MAAM,mBAAA,GACJC,iBAAW,oBAAoB,CAAA;AAEjC,MAAM,kBAAkB,CAAC;AAAA,EACvB,GAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA,GAAwB,IAAA;AAAA,EACxB,GAAG;AACL,CAAA,KAAsD;AACpD,EAAA,MAAM,cAAA,GAAiB,GAAA,GAAMJ,uBAAA,CAAa,UAAA,GAAaA,uBAAA,CAAa,OAAA;AACpE,EAAA,MAAM,qBAAqBS,iCAAA,EAAiB;AAC5C,EAAA,MAAM,eAAA,GAAkBC,yCAA2B,SAAS,CAAA;AAE5D,EAAA,uBACEX,cAAA,CAACC,uBAAA,CAAa,MAAA,EAAb,EAAoB,WAAW,eAAA,EAC9B,QAAA,kBAAAK,eAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,IAAA,EAAK,eAAA;AAAA,MACL,SAAA;AAAA,MACA,EAAA,EAAI,cAAA;AAAA,MACJ,UAAA,EAAY,CAAA;AAAA,MACZ,IAAA,EAAI,IAAA;AAAA,MACJ,eAAA,EAAiB,qBAAA;AAAA,MACjB,gBAAA,EAAkB,wBAAwB,GAAA,GAAM,MAAA;AAAA,MAC/C,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACCN,cAAA;AAAA,UAACY,iBAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAO,IAAA;AAAA,YACP,IAAIX,uBAAA,CAAa,KAAA;AAAA,YACjB,KAAA,EAAO,EAAA;AAAA,YACP,MAAA,EAAQ,EAAA;AAAA,YAER,yCAACY,oBAAA,EAAA,EAAc;AAAA;AAAA,SACjB;AAAA,QAED;AAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAA;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAC9B,QAAA,CAAS,OAAA,GAAU,eAAA;AAEnB,MAAM,gBAAgB,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,KAA2C;AACtF,EAAA,uBACEb,cAAA;AAAA,IAACC,uBAAA,CAAa,KAAA;AAAA,IAAb;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWE,MAAA,CAAGC,uBAAA,CAAO,gBAAgB,GAAG,SAAS;AAAA;AAAA,GACnD;AAEJ,CAAA;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;AAC5B,QAAA,CAAS,KAAA,GAAQ,aAAA;AAKjB,MAAM,WAAA,GAAc,CAAC,KAAA,KAA+C;AAClE,EAAA,uBAAOJ,cAAA,CAACC,uBAAA,CAAa,GAAA,EAAb,EAAkB,GAAG,KAAA,EAAO,CAAA;AACtC,CAAA;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAC1B,QAAA,CAAS,GAAA,GAAM,WAAA;AAaf,MAAM,eAAe,CAAC;AAAA,EACpB,IAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAyB;AACvB,EAAA,uBACED,cAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,IAAIC,uBAAA,CAAa,IAAA;AAAA,MACjB,IAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA;AAAA,QAACO,uBAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,OAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AAC3B,QAAA,CAAS,IAAA,GAAO,YAAA;;;;;"}

package/dist/cjs/components/EllipsisContent/EllipsisContent.css

@@ -1,4 +1,4 @@
-/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+@layer clickui {/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
    width fallback chain (100% → -webkit-fill-available → fill-available →
    stretch) so the content fills the available inline space. */
 .ellipsis-content__jsw7w {
@@ -19,3 +19,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+}

package/dist/cjs/components/EllipsisContent/index.cjs

@@ -7,21 +7,44 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const mergeRefs = require('../../utils/mergeRefs.cjs');
 const cva = require('../../lib/cva.cjs');
+const Tooltip = require('../Tooltip/index.cjs');
 const EllipsisContent_module = require('./EllipsisContent.module.css.cjs');
 
-const _EllipsisContent = ({
+const EllipsisContentComponent = ({
   component,
   className,
   ...props
 }, ref) => {
   const Component = component ?? "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref: mergeRefs.mergeRefs([ref, (node) => {
-    if (node && node.scrollWidth > node.clientWidth) {
-      node.title = node.innerText;
+  const [tooltipContent, setTooltipContent] = react.useState(null);
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref: mergeRefs.mergeRefs([
+        ref,
+        (node) => {
+          if (node) {
+            setTooltipContent(
+              node.scrollWidth > node.clientWidth ? node.innerText : null
+            );
+          }
+        }
+      ]),
+      ...props,
+      className: cva.cn(EllipsisContent_module.default["ellipsis-content"], className)
     }
-  }]), ...props, className: cva.cn(EllipsisContent_module.default["ellipsis-content"], className) });
+  );
+  if (!tooltipContent) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip.Trigger, { asChild: true, children: content }),
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip.Content, { children: tooltipContent })
+  ] });
 };
-const EllipsisContent = react.forwardRef(_EllipsisContent);
+const EllipsisContent = react.forwardRef(
+  EllipsisContentComponent
+);
 
 exports.EllipsisContent = EllipsisContent;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport styles from './EllipsisContent.module.css';\n\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst _EllipsisContent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  return (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node && node.scrollWidth > node.clientWidth) {\n            node.title = node.innerText;\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);\n"],"names":["_EllipsisContent","component","className","props","ref","Component","mergeRefs","node","scrollWidth","clientWidth","title","innerText","cn","styles","EllipsisContent","forwardRef"],"mappings":";;;;;;;;;;AAmBA,MAAMA,mBAAmB,CACvB;AAAA,EACEC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAE4C,CAAA,EACjDC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,KAAA;AAC/B,EAAA,sCACG,SAAA,EAAA,EACC,GAAA,EAAKK,mBAAAA,CAAU,CACbF,KACAG,CAAAA,IAAAA,KAAQ;AACN,IAAA,IAAIA,IAAAA,IAAQA,IAAAA,CAAKC,WAAAA,GAAcD,IAAAA,CAAKE,WAAAA,EAAa;AAC/CF,MAAAA,IAAAA,CAAKG,QAAQH,IAAAA,CAAKI,SAAAA;AAAAA,IACpB;AAAA,EACF,CAAC,CACF,CAAA,KACGR,KAAAA,EACJ,SAAA,EAAWS,MAAAA,CAAGC,8BAAAA,CAAO,kBAAkB,CAAA,EAAGX,SAAS,CAAA,EAAE,CAAA;AAG3D,CAAA;AAEO,MAAMY,eAAAA,GAAgDC,iBAAWf,gBAAgB;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport { Tooltip } from '@/components/Tooltip';\nimport styles from './EllipsisContent.module.css';\n\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst EllipsisContentComponent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const [tooltipContent, setTooltipContent] = useState<string | null>(null);\n\n  const content = (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node) {\n            setTooltipContent(\n              node.scrollWidth > node.clientWidth ? node.innerText : null\n            );\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n\n  if (!tooltipContent) {\n    return content;\n  }\n\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>{content}</Tooltip.Trigger>\n      <Tooltip.Content>{tooltipContent}</Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(\n  EllipsisContentComponent\n);\n"],"names":["useState","jsx","mergeRefs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;;;;;;AAqBA,MAAM,2BAA2B,CAC/B;AAAA,EACE,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,KAAA;AAC/B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAExE,EAAA,MAAM,OAAA,mBACJC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAKC,mBAAA,CAAU;AAAA,QACb,GAAA;AAAA,QACA,CAAA,IAAA,KAAQ;AACN,UAAA,IAAI,IAAA,EAAM;AACR,YAAA,iBAAA;AAAA,cACE,IAAA,CAAK,WAAA,GAAc,IAAA,CAAK,WAAA,GAAc,KAAK,SAAA,GAAY;AAAA,aACzD;AAAA,UACF;AAAA,QACF;AAAA,OACD,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,MAAA,CAAGC,8BAAA,CAAO,kBAAkB,GAAG,SAAS;AAAA;AAAA,GACrD;AAGF,EAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,IAAA,OAAO,OAAA;AAAA,EACT;AAEA,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAJ,cAAA,CAACI,eAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAClCJ,cAAA,CAACI,eAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,cAAA,EAAe;AAAA,GAAA,EACnC,CAAA;AAEJ,CAAA;AAEO,MAAM,eAAA,GAAgDC,gBAAA;AAAA,EAC3D;AACF;;;;"}

package/dist/cjs/components/EmptyButton/EmptyButton.css

@@ -1,4 +1,4 @@
-/* Kept at zero specificity via :where() so that downstream styled-components
+@layer clickui {/* Kept at zero specificity via :where() so that downstream styled-components
    overrides on a styled(EmptyButton) (e.g. CrossButton overriding background and
    padding, the Popover/CodeBlock close/copy buttons overriding color and padding)
    win without needing a specificity hack — EmptyButton is a CSS Module, whose
@@ -19,3 +19,4 @@
 :where(.empty-button__1ynA8):disabled {
   cursor: not-allowed;
 }
+}

package/dist/cjs/components/EmptyButton/index.cjs

@@ -8,10 +8,14 @@ const react = require('react');
 const cva = require('../../lib/cva.cjs');
 const EmptyButton_module = require('./EmptyButton.module.css.cjs');
 
-const EmptyButton = react.forwardRef(({
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { ref, ...props, className: cva.cn(EmptyButton_module.default["empty-button"], className) }));
+const EmptyButton = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    ref,
+    ...props,
+    className: cva.cn(EmptyButton_module.default["empty-button"], className)
+  }
+));
 EmptyButton.displayName = "EmptyButton";
 
 exports.EmptyButton = EmptyButton;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/EmptyButton/EmptyButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './EmptyButton.module.css';\n\nexport const EmptyButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    {...props}\n    className={cn(styles['empty-button'], className)}\n  />\n));\n\nEmptyButton.displayName = 'EmptyButton';\n"],"names":["EmptyButton","forwardRef","className","props","ref","jsx","cn","styles","displayName"],"mappings":";;;;;;;;;AAIO,MAAMA,WAAAA,GAAcC,iBAGzB,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,qBAC1BC,cAAA,CAAC,QAAA,EAAA,EACC,GAAA,KACIF,KAAAA,EACJ,SAAA,EAAWG,MAAAA,CAAGC,0BAAAA,CAAO,cAAc,CAAA,EAAGL,SAAS,IAElD;AAEDF,WAAAA,CAAYQ,WAAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/EmptyButton/EmptyButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './EmptyButton.module.css';\n\nexport const EmptyButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    {...props}\n    className={cn(styles['empty-button'], className)}\n  />\n));\n\nEmptyButton.displayName = 'EmptyButton';\n"],"names":["forwardRef","jsx","cn","styles"],"mappings":";;;;;;;;;AAIO,MAAM,WAAA,GAAcA,iBAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1BC,cAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,SAAA,EAAWC,MAAA,CAAGC,0BAAA,CAAO,cAAc,GAAG,SAAS;AAAA;AACjD,CACD;AAED,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}

package/dist/cjs/components/FileTabs/FileTabs.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
 .tabs__jY99b {
   display: flex;
   position: relative;
@@ -165,3 +165,4 @@
 .empty-button__czm-t:hover {
   background: var(--click-tabs-fileTabs-color-closeButton-background-hover);
 }
+}

package/dist/cjs/components/FileTabs/index.cjs

@@ -16,9 +16,7 @@ const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
 const ReactSortableModule__default = /*#__PURE__*/_interopDefault(ReactSortableModule);
 
-const {
-  ReactSortable
-} = ReactSortableModule__default.default;
+const { ReactSortable } = ReactSortableModule__default.default;
 const TabContext = react.createContext({
   selectedIndex: void 0,
   onClose: () => null
@@ -45,13 +43,17 @@ const FileTabs = ({
   ...props
 }) => {
   const ref = react.useRef(null);
-  const [list, setList] = react.useState(react.Children.map(children, (_, index) => ({
-    id: `tab-element-${index}`
-  })));
-  react.useEffect(() => {
-    setList(react.Children.map(children, (_, index) => ({
+  const [list, setList] = react.useState(
+    react.Children.map(children, (_, index) => ({
       id: `tab-element-${index}`
-    })));
+    }))
+  );
+  react.useEffect(() => {
+    setList(
+      react.Children.map(children, (_, index) => ({
+        id: `tab-element-${index}`
+      }))
+    );
   }, [children]);
   const onClose = (index) => {
     onCloseProp(index);
@@ -72,23 +74,53 @@ const FileTabs = ({
       ref.current.scrollLeft += evt.deltaY;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onWheel, role: "tablist", onScroll: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, className: FileTabs_module.default.tabs, style: {
-    "--file-tabs-count-width": `${(listProp ?? list).length * 200}px`
-  }, children: /* @__PURE__ */ jsxRuntime.jsx(ReactSortable, { direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
-    const {
-      newDraggableIndex,
-      oldDraggableIndex
-    } = evt;
-    if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
-      onReorderTab(oldDraggableIndex, newDraggableIndex);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      onWheel,
+      role: "tablist",
+      onScroll: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      className: FileTabs_module.default.tabs,
+      style: {
+        "--file-tabs-count-width": `${(listProp ?? list).length * 200}px`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ReactSortable,
+        {
+          direction: direction ?? "horizontal",
+          group: group ?? "tabbar",
+          list: listProp ?? list,
+          setList: setListProp ?? setList,
+          onEnd: (evt, sortable, store) => {
+            const { newDraggableIndex, oldDraggableIndex } = evt;
+            if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
+              onReorderTab(oldDraggableIndex, newDraggableIndex);
+            }
+            if (typeof onEnd === "function") {
+              onEnd(evt, sortable, store);
+            }
+          },
+          revertOnSpill: true,
+          ...props,
+          className: cva.cn(FileTabs_module.default["tabs-sortable"], className),
+          children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              tabIndex: index + 1,
+              role: "tab",
+              onClick: onSelect(index),
+              children: child
+            },
+            `tab-element-${index}`
+          ))
+        }
+      )
     }
-    if (typeof onEnd === "function") {
-      onEnd(evt, sortable, store);
-    }
-  }, revertOnSpill: true, ...props, className: cva.cn(FileTabs_module.default["tabs-sortable"], className), children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: index + 1, role: "tab", onClick: onSelect(index), children: child }, `tab-element-${index}`)) }) }) });
+  ) });
 };
 const tabVariants = classVarianceAuthority.cva(FileTabs_module.default.tab, {
   variants: {
@@ -126,10 +158,7 @@ const Tab = ({
   className,
   ...props
 }) => {
-  const {
-    selectedIndex,
-    onClose: onCloseProp
-  } = useSelect();
+  const { selectedIndex, onClose: onCloseProp } = useSelect();
   const onMouseDown = (e) => {
     e.currentTarget.scrollIntoView({
       behavior: "smooth",
@@ -145,18 +174,47 @@ const Tab = ({
     e.stopPropagation();
     onCloseProp(index);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { onMouseDown, "data-testid": testId ? `${testId}-${index}` : void 0, ...props, className: cva.cn(tabVariants({
-    active: selectedIndex === index,
-    preview,
-    dismissable: true
-  }), className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileTabs_module.default["tab-content"], children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }) : icon,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileTabs_module.default["tab-content-text"], children: text })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: FileTabs_module.default["empty-button"], htmlType: "button", icon: "cross", onClick: onClose, "data-type": "close", "data-testid": testId ? `${testId}-${index}-close` : void 0 }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: FileTabs_module.default.indicator, "data-indicator": status, "data-testid": testId ? `${testId}-${index}-status` : void 0 })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onMouseDown,
+      "data-testid": testId ? `${testId}-${index}` : void 0,
+      ...props,
+      className: cva.cn(
+        tabVariants({
+          active: selectedIndex === index,
+          preview,
+          dismissable: true
+        }),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileTabs_module.default["tab-content"], children: [
+          typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }) : icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileTabs_module.default["tab-content-text"], children: text })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.IconButton,
+          {
+            className: FileTabs_module.default["empty-button"],
+            htmlType: "button",
+            icon: "cross",
+            onClick: onClose,
+            "data-type": "close",
+            "data-testid": testId ? `${testId}-${index}-close` : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: FileTabs_module.default.indicator,
+            "data-indicator": status,
+            "data-testid": testId ? `${testId}-${index}-status` : void 0
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "FileTab";
 FileTabs.Tab = Tab;
@@ -168,14 +226,17 @@ const FileTabElement = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className: cva.cn(tabVariants({
-    active,
-    preview,
-    fixed: true
-  }), className), children: [
-    typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }) : icon,
-    children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileTabs_module.default["tab-content-text"], children })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      className: cva.cn(tabVariants({ active, preview, fixed: true }), className),
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon }) : icon,
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileTabs_module.default["tab-content-text"], children })
+      ]
+    }
+  );
 };
 
 exports.FileTabElement = FileTabElement;