@clickhouse/click-ui 0.10.0 → 0.11.0

package/dist/cjs/click-ui.css

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

package/dist/cjs/components/CodeBlock/CodeBlock.css

@@ -23,9 +23,12 @@
      colors are set inline per state via --codeblock-button, matching the
      --codeblock-numbers pattern so both track the ThemeProvider runtime. */
   --codeblock-button: initial;
+  /* assign context to be above pseudo-element 
+     can be cleaned up when background is a regular color variable with alpha */
+  z-index: 1;
   padding: 0;
   border: 0;
-  color: var(--codeblock-button, inherit);
+  color: var(--codeblock-button, inherit); 
 }
 
 .codeblock__highlighter__t4Xol {
@@ -41,9 +44,39 @@
 
 .codeblock__button-container__D6yob {
   display: flex;
+  opacity: 0;
   position: absolute;
   top: var(--click-codeblock-space-y);
   right: var(--click-codeblock-space-x);
-  gap: 0.625rem;
+  padding: var(--spaces-1);
+  gap: var(--spaces-1);
+  pointer-events: none;
+  transition: opacity 200ms ease-in-out;
 }
+
+.codeblock__pRWOC:hover .codeblock__button-container__D6yob,
+.codeblock__pRWOC:focus-within .codeblock__button-container__D6yob {
+  opacity: 1;
+  pointer-events: auto;
+  transition-duration: 150ms;
+}
+
+/* this element can be refactored to a color var with alpha when available */
+.codeblock__button-container__D6yob::before {
+  content: "";
+  opacity: 0.85;
+  position: absolute;  
+  z-index: 0;
+  inset: 0;
+  border-radius: var(--spaces-1); 
+}
+
+/* custom conditional theming can be later replaced with semantic color tokens */
+[data-cui-theme="light"] .codeblock__button-container__D6yob::before {
+  background: var(--palette-indigo-100);
+}
+
+[data-cui-theme="dark"] .codeblock__button-container__D6yob::before {
+  background: var(--palette-neutral-900);
 }
+}

package/dist/cjs/components/CodeBlock/index.cjs

@@ -36,6 +36,7 @@ const CodeBlock = ({
   showLineNumbers,
   showWrapButton = false,
   wrapLines = false,
+  ariaLabel,
   onCopy,
   onCopyError,
   className,
@@ -68,6 +69,7 @@ const CodeBlock = ({
       setTimeout(() => setErrorCopy(false), 2e3);
     }
   };
+  const codeRegionLabel = ariaLabel ?? (language ? `${language} code block` : "Code block");
   const wrapElement = () => {
     setWrap((wrap2) => !wrap2);
   };
@@ -85,30 +87,12 @@ const CodeBlock = ({
       style: { "--codeblock-numbers": numbersColor, ...style },
       className: cva.cn(CodeBlock_module.default.codeblock, className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default["codeblock__button-container"], children: [
-          showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(
-            IconButton.IconButton,
-            {
-              className: CodeBlock_module.default["codeblock__button"],
-              icon: "document",
-              onClick: wrapElement
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            IconButton.IconButton,
-            {
-              className: CodeBlock_module.default["codeblock__button"],
-              style: {
-                "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
-              },
-              icon: copied ? "check" : errorCopy ? "warning" : "copy",
-              onClick: copyCodeToClipboard
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactSyntaxHighlighter.Light,
           {
+            tabIndex: 0,
+            role: "group",
+            "aria-label": codeRegionLabel,
             language,
             style: customStyle,
             CodeTag: CodeWithRef,
@@ -143,7 +127,28 @@ const CodeBlock = ({
             wrapLongLines: wrap || wrapLines,
             children
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default["codeblock__button-container"], children: [
+          showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              className: CodeBlock_module.default["codeblock__button"],
+              icon: "document",
+              onClick: wrapElement
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              className: CodeBlock_module.default["codeblock__button"],
+              style: {
+                "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
+              },
+              icon: copied ? "check" : errorCopy ? "warning" : "copy",
+              onClick: copyCodeToClipboard
+            }
+          )
+        ] })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","sql","bash","json","tsx","plaintext","useState","useColorStyle","useNumbersColor","useButtonStateColors","wrap","props","jsx","cn","styles","jsxs","IconButton","children","createElement"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  ariaLabel,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n\n  const codeRegionLabel =\n    ariaLabel ?? (language ? `${language} code block` : 'Code block');\n\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <SyntaxHighlighter\n        tabIndex={0}\n        role=\"group\"\n        aria-label={codeRegionLabel}\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","sql","bash","json","tsx","plaintext","useState","useColorStyle","useNumbersColor","useButtonStateColors","wrap","props","jsx","cn","styles","jsxs","children","createElement","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBAA,4BAAA,CAAkB,gBAAA,CAAiB,KAAA,EAAOC,oBAAA,CAAI,OAAA,IAAWA,oBAAG,CAAA;AAC5DD,4BAAA,CAAkB,gBAAA,CAAiB,MAAA,EAAQE,qBAAA,CAAK,OAAA,IAAWA,qBAAI,CAAA;AAC/DF,4BAAA,CAAkB,gBAAA,CAAiB,MAAA,EAAQG,qBAAA,CAAK,OAAA,IAAWA,qBAAI,CAAA;AAC/DH,4BAAA,CAAkB,gBAAA,CAAiB,KAAA,EAAOI,oBAAA,CAAI,OAAA,IAAWA,oBAAG,CAAA;AAC5DJ,4BAAA,CAAkB,gBAAA,CAAiB,WAAA,EAAaK,0BAAA,CAAU,OAAA,IAAWA,0BAAS,CAAA;AAevE,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAsB;AACpB,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAS,SAAS,CAAA;AAC1C,EAAA,MAAM,WAAA,GAAcC,sBAAc,KAAK,CAAA;AACvC,EAAA,MAAM,YAAA,GAAeC,8BAAgB,KAAK,CAAA;AAC1C,EAAA,MAAM,oBAAoBC,kCAAA,EAAqB;AAE/C,EAAA,MAAM,sBAAsB,YAAY;AACtC,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,CAAU,SAAA,CAAU,SAAA,CAAU,QAAQ,CAAA;AAC5C,MAAA,IAAI,OAAO,UAAU,UAAA,EAAY;AAC/B,QAAA,MAAA,CAAO,QAAQ,CAAA;AAAA,MACjB;AACA,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,UAAA,CAAW,MAAM,SAAA,CAAU,KAAK,CAAA,EAAG,GAAI,CAAA;AAAA,IACzC,SAAS,KAAA,EAAO;AACd,MAAA,IAAI,OAAA,GAAU,qBAAA;AACd,MAAA,IAAI,iBAAiB,KAAA,EAAO;AAC1B,QAAA,OAAA,GAAU,KAAA,CAAM,OAAA;AAAA,MAClB;AACA,MAAA,YAAA,CAAa,IAAI,CAAA;AACjB,MAAA,IAAI,OAAO,gBAAgB,UAAA,EAAY;AACrC,QAAA,WAAA,CAAY,OAAO,CAAA;AAAA,MACrB;AACA,MAAA,UAAA,CAAW,MAAM,YAAA,CAAa,KAAK,CAAA,EAAG,GAAI,CAAA;AAAA,IAC5C;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAA,GACJ,SAAA,KAAc,QAAA,GAAW,CAAA,EAAG,QAAQ,CAAA,WAAA,CAAA,GAAgB,YAAA,CAAA;AAEtD,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,OAAA,CAAQ,CAAAC,KAAAA,KAAQ,CAACA,KAAI,CAAA;AAAA,EACvB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAACC,MAAAA,qBACnBC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAGD,MAAAA;AAAA,MACJ,WAAWE,MAAA,CAAGC,wBAAA,CAAO,oBAAoB,CAAA,EAAGH,OAAM,SAAS;AAAA;AAAA,GAC7D;AAEF,EAAA,uBACEI,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,qBAAA,EAAuB,YAAA,EAAc,GAAG,KAAA,EAAM;AAAA,MACvD,SAAA,EAAWF,MAAA,CAAGC,wBAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAAA,MAEzC,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAACZ,4BAAA;AAAA,UAAA;AAAA,YACC,QAAA,EAAU,CAAA;AAAA,YACV,IAAA,EAAK,OAAA;AAAA,YACL,YAAA,EAAY,eAAA;AAAA,YACZ,QAAA;AAAA,YACA,KAAA,EAAO,WAAA;AAAA,YACP,OAAA,EAAS,WAAA;AAAA,YACT,SAAA,EAAWc,yBAAO,wBAAwB,CAAA;AAAA,YAC1C,UAAU,CAAC,EAAE,IAAA,EAAM,UAAA,EAAY,iBAAgB,KAA2B;AACxE,cAAA,OAAO,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,KAAU;AAC9B,gBAAA,MAAME,YAAW,GAAA,CAAI,QAAA;AACrB,gBAAA,MAAM,iBAAA,GAAoBA,WAAU,KAAA,EAAM;AAM1C,gBAAA,IAAI,iBAAA,EAAmB;AACrB,kBAAA,GAAA,CAAI,QAAA,GAAW;AAAA,oBACb,iBAAA;AAAA,oBACA;AAAA,sBACE,QAAA,EAAAA,SAAAA;AAAA,sBACA,UAAA,EAAY;AAAA,wBACV,WAAW;AAAC,uBACd;AAAA,sBACA,OAAA,EAAS,MAAA;AAAA,sBACT,IAAA,EAAM;AAAA;AACR,mBACF;AAAA,gBACF;AAEA,gBAAA,OAAOC,oCAAA,CAAc;AAAA,kBACnB,IAAA,EAAM,GAAA;AAAA,kBACN,UAAA;AAAA,kBACA,eAAA;AAAA,kBACA,GAAA,EAAK;AAAA,iBACN,CAAA;AAAA,cACH,CAAC,CAAA;AAAA,YACH,CAAA;AAAA,YACA,eAAA;AAAA,YACA,WAAW,IAAA,IAAQ,SAAA;AAAA,YACnB,eAAe,IAAA,IAAQ,SAAA;AAAA,YAEtB;AAAA;AAAA,SACH;AAAA,wBACAF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,wBAAA,CAAO,6BAA6B,CAAA,EACjD,QAAA,EAAA;AAAA,UAAA,cAAA,oBACCF,cAAA;AAAA,YAACM,qBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWJ,yBAAO,mBAAmB,CAAA;AAAA,cACrC,IAAA,EAAK,UAAA;AAAA,cACL,OAAA,EAAS;AAAA;AAAA,WACX;AAAA,0BAEFF,cAAA;AAAA,YAACM,qBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWJ,yBAAO,mBAAmB,CAAA;AAAA,cACrC,KAAA,EACE;AAAA,gBACE,sBAAsB,MAAA,GAClB,iBAAA,CAAkB,OAAA,GAClB,SAAA,GACE,kBAAkB,MAAA,GAClB;AAAA,eACR;AAAA,cAEF,IAAA,EAAM,MAAA,GAAS,OAAA,GAAU,SAAA,GAAY,SAAA,GAAY,MAAA;AAAA,cACjD,OAAA,EAAS;AAAA;AAAA;AACX,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/cjs/components/DateDetails/index.cjs

@@ -32,6 +32,7 @@ const formatDateDetails = (date, timezone) => {
   }
   return date.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
 };
+const fallbackSystemTimeZone = "America/New_York";
 const DateDetails = ({
   date: date$1,
   side = "top",
@@ -41,11 +42,13 @@ const DateDetails = ({
 }) => {
   const dayjsDate = dayjs__default.default(date$1);
   let systemTime;
-  if (systemTimeZone) {
+  let resolvedSystemTimeZone = systemTimeZone;
+  if (resolvedSystemTimeZone) {
     try {
-      systemTime = dayjsDate.tz(systemTimeZone);
+      systemTime = dayjsDate.tz(resolvedSystemTimeZone);
     } catch {
-      systemTime = dayjsDate.tz("America/New_York");
+      resolvedSystemTimeZone = fallbackSystemTimeZone;
+      systemTime = dayjsDate.tz(resolvedSystemTimeZone);
     }
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { children: [
@@ -105,11 +108,11 @@ const DateDetails = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { size: "sm", children: [
-                  formatDateDetails(systemTime, systemTimeZone),
+                  formatDateDetails(systemTime, resolvedSystemTimeZone),
                   " (",
                   date.formatTimezone({
                     date: systemTime,
-                    timezone: systemTimeZone
+                    timezone: resolvedSystemTimeZone
                   }),
                   ")"
                 ] }) })

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { Link } from '@/components/Link';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  if (systemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(systemTimeZone);\n    } catch {\n      systemTime = dayjsDate.tz('America/New_York');\n    }\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <Link\n          component=\"span\"\n          size=\"sm\"\n          weight=\"medium\"\n        >\n          <Text\n            component=\"span\"\n            size={size}\n            weight={weight}\n          >\n            {dayjs.utc(date).fromNow()}\n          </Text>\n        </Link>\n      </Popover.Trigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, systemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: systemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["dayjs","date","Popover","jsx","Link","Text","jsxs","GridContainer","Container","formatTimezone","Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { Link } from '@/components/Link';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nconst fallbackSystemTimeZone = 'America/New_York';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  let resolvedSystemTimeZone = systemTimeZone;\n  if (resolvedSystemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(resolvedSystemTimeZone);\n    } catch {\n      resolvedSystemTimeZone = fallbackSystemTimeZone;\n      systemTime = dayjsDate.tz(resolvedSystemTimeZone);\n    }\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger>\n        <Link\n          component=\"span\"\n          size=\"sm\"\n          weight=\"medium\"\n        >\n          <Text\n            component=\"span\"\n            size={size}\n            weight={weight}\n          >\n            {dayjs.utc(date).fromNow()}\n          </Text>\n        </Link>\n      </Popover.Trigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, resolvedSystemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: resolvedSystemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["dayjs","date","Popover","jsx","Link","Text","jsxs","GridContainer","Container","formatTimezone","Fragment"],"mappings":"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"}

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

@@ -51,7 +51,7 @@ const DropdownTrigger = ({
   ...props
 }) => {
   if (sub) {
-    const { icon, iconDir, ...menuProps } = props;
+    const { icon, iconDir, tooltipProps, ...menuProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       DropdownMenuItem,
       {
@@ -63,6 +63,7 @@ const DropdownTrigger = ({
             {
               icon,
               iconDir,
+              tooltipProps: { side: "right", ...tooltipProps },
               children
             }
           ),
@@ -154,6 +155,7 @@ const DropdownItem = ({
   icon,
   iconDir,
   type = "default",
+  tooltipProps,
   children,
   ...props
 }) => {
@@ -168,6 +170,7 @@ const DropdownItem = ({
         {
           icon,
           iconDir,
+          tooltipProps: { side: "right", ...tooltipProps },
           children
         }
       )

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":["jsx","DropdownMenu","GenericMenuItem","cn","styles","forwardRef","jsxs","IconWrapper","Icon","GenericMenuPanel","useInputModality","useResolvedPortalContainer","Arrow","Popover_Arrow"],"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 type { IconWrapperProps } 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 type { ArrowProps, DropdownItemProps } from './Dropdown.types';\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\n// `sub` alone discriminates the two shapes of Trigger and Content. The label\n// fields live separately so only the sub-trigger accepts them — Content spreads\n// what it does not read straight onto the Radix element, i.e. into the DOM.\ninterface SubDiscriminant {\n  sub?: true;\n}\n\ninterface SubTriggerFields {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n  /**\n   * Positions the tooltip shown when the label is truncated. Defaults to\n   * `side: 'right'` so the tooltip does not cover the items above it.\n   */\n  tooltipProps?: IconWrapperProps['tooltipProps'];\n}\n\ninterface MainDropdownProps {\n  sub?: never;\n}\n\ntype DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps &\n  SubDiscriminant &\n  SubTriggerFields;\ntype DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;\n\nconst DropdownTrigger = ({\n  sub,\n  children,\n  ...props\n}: DropdownSubTriggerProps | DropdownTriggerProps) => {\n  if (sub) {\n    const { icon, iconDir, tooltipProps, ...menuProps } =\n      props as DropdownSubTriggerProps;\n    return (\n      <DropdownMenuItem\n        as={DropdownMenu.SubTrigger}\n        {...menuProps}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n          tooltipProps={{ side: 'right', ...tooltipProps }}\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\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 & SubDiscriminant & 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\nconst DropdownItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  tooltipProps,\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        tooltipProps={{ side: 'right', ...tooltipProps }}\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":"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"}

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

@@ -13,6 +13,7 @@ const EllipsisContent_module = require('./EllipsisContent.module.css.cjs');
 const EllipsisContentComponent = ({
   component,
   className,
+  tooltipProps,
   ...props
 }, ref) => {
   const Component = component ?? "div";
@@ -37,9 +38,9 @@ const EllipsisContentComponent = ({
   if (!tooltipContent) {
     return content;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { disableHoverableContent: true, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip.Trigger, { asChild: true, children: content }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip.Content, { children: tooltipContent })
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip.Content, { ...tooltipProps, children: tooltipContent })
   ] });
 };
 const EllipsisContent = react.forwardRef(

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  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;;;;"}
+{"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 { EllipsisContentProps } from './EllipsisContent.types';\nimport styles from './EllipsisContent.module.css';\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    tooltipProps,\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 disableHoverableContent>\n      <Tooltip.Trigger asChild>{content}</Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps}>{tooltipContent}</Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(\n  EllipsisContentComponent\n);\n"],"names":["useState","jsx","mergeRefs","cn","styles","jsxs","Tooltip","forwardRef"],"mappings":";;;;;;;;;;;AAkBA,MAAM,2BAA2B,CAC/B;AAAA,EACE,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;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,uBACEC,eAAA,CAACC,eAAA,EAAA,EAAQ,uBAAA,EAAuB,IAAA,EAC9B,QAAA,EAAA;AAAA,oBAAAL,cAAA,CAACK,eAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,mCACjCA,eAAA,CAAQ,OAAA,EAAR,EAAiB,GAAG,cAAe,QAAA,EAAA,cAAA,EAAe;AAAA,GAAA,EACrD,CAAA;AAEJ,CAAA;AAEO,MAAM,eAAA,GAAgDC,gBAAA;AAAA,EAC3D;AACF;;;;"}

package/dist/cjs/components/IconButton/IconButton.css

@@ -8,6 +8,11 @@
   cursor: pointer;
 }
 
+.iconbutton__G-cEu:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
 .iconbutton_size_sm__tT3BV {
   padding: var(--click-button-iconButton-sm-space-y)
     var(--click-button-iconButton-sm-space-x);

package/dist/cjs/components/IconButton/index.cjs

@@ -31,22 +31,32 @@ const iconButtonVariants = classVarianceAuthority.cva(IconButton_module.default.
   }
 });
 const IconButton = react.forwardRef(
-  ({ type = "primary", htmlType, icon, size, disabled, className, ...props }, ref) => {
+  ({
+    type = "primary",
+    htmlType = "button",
+    icon,
+    size,
+    disabled,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
     const iconName = icon ? icon.toString() : "unknown icon";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        "aria-label": ariaLabel || iconName,
         ...props,
         type: htmlType,
         className: cva.cn(iconButtonVariants({ type, size }), className),
         disabled,
         ref,
         role: "button",
-        "aria-label": iconName,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
           {
             name: icon,
+            "aria-hidden": true,
             size: "sm"
           }
         )

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', htmlType, icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","forwardRef","jsx","cn","Icon"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAqBA,0BAAA,CAAIC,yBAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,0BAAO,yBAAyB,CAAA;AAAA,MACzC,SAAA,EAAWA,0BAAO,2BAA2B,CAAA;AAAA,MAC7C,KAAA,EAAOA,0BAAO,uBAAuB,CAAA;AAAA,MACrC,MAAA,EAAQA,0BAAO,wBAAwB,CAAA;AAAA,MACvC,IAAA,EAAMA,0BAAO,sBAAsB;AAAA,KACrC;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,EAAA;AAAA,MACT,EAAA,EAAIA,0BAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,0BAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,CAAC,EAAE,IAAA,GAAO,SAAA,EAAW,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClF,IAAA,MAAM,QAAA,GAAW,IAAA,GAAO,IAAA,CAAK,QAAA,EAAS,GAAI,cAAA;AAE1C,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EAAWC,OAAG,kBAAA,CAAmB,EAAE,MAAM,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC3D,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,QAAA;AAAA,QAEZ,QAAA,kBAAAD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      type = 'primary',\n      htmlType = 'button',\n      icon,\n      size,\n      disabled,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        aria-label={ariaLabel || iconName}\n        {...props}\n        type={htmlType}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n      >\n        <Icon\n          name={icon}\n          aria-hidden\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","forwardRef","jsx","cn","Icon"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAqBA,0BAAA,CAAIC,yBAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,0BAAO,yBAAyB,CAAA;AAAA,MACzC,SAAA,EAAWA,0BAAO,2BAA2B,CAAA;AAAA,MAC7C,KAAA,EAAOA,0BAAO,uBAAuB,CAAA;AAAA,MACrC,MAAA,EAAQA,0BAAO,wBAAwB,CAAA;AAAA,MACvC,IAAA,EAAMA,0BAAO,sBAAsB;AAAA,KACrC;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,EAAA;AAAA,MACT,EAAA,EAAIA,0BAAO,oBAAoB,CAAA;AAAA,MAC/B,EAAA,EAAIA,0BAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,CACE;AAAA,IACE,IAAA,GAAO,SAAA;AAAA,IACP,QAAA,GAAW,QAAA;AAAA,IACX,IAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,IAAA,GAAO,IAAA,CAAK,QAAA,EAAS,GAAI,cAAA;AAE1C,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,cAAY,SAAA,IAAa,QAAA;AAAA,QACxB,GAAG,KAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EAAWC,OAAG,kBAAA,CAAmB,EAAE,MAAM,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC3D,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QAEL,QAAA,kBAAAD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,aAAA,EAAW,IAAA;AAAA,YACX,IAAA,EAAK;AAAA;AAAA;AACP;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/cjs/components/IconWrapper/index.cjs

@@ -15,11 +15,11 @@ const IconWrapper = ({
   height,
   children,
   ellipsisContent = true,
+  tooltipProps,
   gap = "sm",
   isResponsive = true,
   ...props
 }) => {
-  const TextWrapper = ellipsisContent ? EllipsisContent.EllipsisContent : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Container.Container,
     {
@@ -38,13 +38,14 @@ const IconWrapper = ({
             height
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TextWrapper,
+        ellipsisContent ? /* @__PURE__ */ jsxRuntime.jsx(
+          EllipsisContent.EllipsisContent,
           {
-            "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`,
+            "data-testid": "ellipsed-icon-wrapper-text",
+            tooltipProps,
             children
           }
-        ),
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "normal-icon-wrapper-text", children }),
         icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  const TextWrapper = ellipsisContent ? EllipsisContent : 'div';\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      <TextWrapper\n        data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-icon-wrapper-text`}\n      >\n        {children}\n      </TextWrapper>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["EllipsisContent","jsxs","Container","jsx","Icon"],"mappings":";;;;;;;;;AAKO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,IAAA;AAAA,EAClB,GAAA,GAAM,IAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,WAAA,GAAc,kBAAkBA,+BAAA,GAAkB,KAAA;AACxD,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,YAAA;AAAA,MACZ,GAAA;AAAA,MACA,QAAA,EAAS,QAAA;AAAA,MACT,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,YAAY,OAAA,oBACnBC,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEFD,cAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,CAAA,EAAG,eAAA,GAAkB,UAAA,GAAa,QAAQ,CAAA,kBAAA,CAAA;AAAA,YAEtD;AAAA;AAAA,SACH;AAAA,QACC,IAAA,IAAQ,YAAY,KAAA,oBACnBA,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { EllipsisContent } from '@/components/EllipsisContent';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapperProps } from './IconWrapper.types';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  size = 'sm',\n  width,\n  height,\n  children,\n  ellipsisContent = true,\n  tooltipProps,\n  gap = 'sm',\n  isResponsive = true,\n  ...props\n}: IconWrapperProps) => {\n  return (\n    <Container\n      orientation=\"horizontal\"\n      gap={gap}\n      overflow=\"hidden\"\n      isResponsive={isResponsive}\n      {...props}\n    >\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n      {ellipsisContent ? (\n        <EllipsisContent\n          data-testid=\"ellipsed-icon-wrapper-text\"\n          tooltipProps={tooltipProps}\n        >\n          {children}\n        </EllipsisContent>\n      ) : (\n        <div data-testid=\"normal-icon-wrapper-text\">{children}</div>\n      )}\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size={size}\n          width={width}\n          height={height}\n        />\n      )}\n    </Container>\n  );\n};\n"],"names":["jsxs","Container","jsx","Icon","EllipsisContent"],"mappings":";;;;;;;;;AAKO,MAAM,cAAc,CAAC;AAAA,EAC1B,IAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA,GAAkB,IAAA;AAAA,EAClB,YAAA;AAAA,EACA,GAAA,GAAM,IAAA;AAAA,EACN,YAAA,GAAe,IAAA;AAAA,EACf,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,uBACEA,eAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,YAAA;AAAA,MACZ,GAAA;AAAA,MACA,QAAA,EAAS,QAAA;AAAA,MACT,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,YAAY,OAAA,oBACnBC,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QAED,eAAA,mBACCD,cAAA;AAAA,UAACE,+BAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,4BAAA;AAAA,YACZ,YAAA;AAAA,YAEC;AAAA;AAAA,SACH,mBAEAF,cAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,4BAA4B,QAAA,EAAS,CAAA;AAAA,QAEvD,IAAA,IAAQ,YAAY,KAAA,oBACnBA,cAAA;AAAA,UAACC,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,IAAA;AAAA,YACA,KAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}