npm - @clickhouse/click-ui - Versions diffs - 0.10.0-rc2 → 0.11.0-rc1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (220) hide show

package/dist/cjs/components/Assets/Flags/system/FlagsLight.cjs CHANGED Viewed

@@ -3,54 +3,86 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 const Australia = require('../Australia.cjs');
+const Austria = require('../Austria.cjs');
+const Bahrain = require('../Bahrain.cjs');
+const Belgium = require('../Belgium.cjs');
 const Brazil = require('../Brazil.cjs');
 const Canada = require('../Canada.cjs');
+const Chile = require('../Chile.cjs');
+const China = require('../China.cjs');
+const Denmark = require('../Denmark.cjs');
 const EuropeanUnion = require('../European-Union.cjs');
+const Finland = require('../Finland.cjs');
 const France = require('../France.cjs');
 const Germany = require('../Germany.cjs');
 const GreatBritain = require('../Great-Britain.cjs');
+const Greece = require('../Greece.cjs');
 const HongKong = require('../Hong-Kong.cjs');
 const India = require('../India.cjs');
 const Indonesia = require('../Indonesia.cjs');
 const Ireland = require('../Ireland.cjs');
 const Israel = require('../Israel.cjs');
+const Italy = require('../Italy.cjs');
 const Japan = require('../Japan.cjs');
 const Malaysia = require('../Malaysia.cjs');
 const Mexico = require('../Mexico.cjs');
 const Netherlands = require('../Netherlands.cjs');
+const NewZealand = require('../New-Zealand.cjs');
+const Norway = require('../Norway.cjs');
+const Poland = require('../Poland.cjs');
+const Qatar = require('../Qatar.cjs');
+const SaudiArabia = require('../Saudi-Arabia.cjs');
 const Singapore = require('../Singapore.cjs');
 const SouthAfrica = require('../South-Africa.cjs');
 const SouthKorea = require('../South-Korea.cjs');
+const Spain = require('../Spain.cjs');
 const Sweden = require('../Sweden.cjs');
 const Switzerland = require('../Switzerland.cjs');
 const Taiwan = require('../Taiwan.cjs');
+const Thailand = require('../Thailand.cjs');
 const UnitedArabEmirates = require('../United-Arab-Emirates.cjs');
 const UnitedKingdom = require('../United-Kingdom.cjs');
 const UnitedStates = require('../United-States.cjs');
 const FlagsLight = {
   australia: Australia.default,
+  austria: Austria.default,
+  bahrain: Bahrain.default,
+  belgium: Belgium.default,
   brazil: Brazil.default,
   canada: Canada.default,
+  chile: Chile.default,
+  china: China.default,
+  denmark: Denmark.default,
   "european-union": EuropeanUnion.default,
+  finland: Finland.default,
   france: France.default,
   germany: Germany.default,
   "great-britain": GreatBritain.default,
+  greece: Greece.default,
   "hong-kong": HongKong.default,
   india: India.default,
   indonesia: Indonesia.default,
   ireland: Ireland.default,
   israel: Israel.default,
+  italy: Italy.default,
   japan: Japan.default,
   malaysia: Malaysia.default,
   mexico: Mexico.default,
   netherlands: Netherlands.default,
+  "new-zealand": NewZealand.default,
+  norway: Norway.default,
+  poland: Poland.default,
+  qatar: Qatar.default,
+  "saudi-arabia": SaudiArabia.default,
   singapore: Singapore.default,
   "south-africa": SouthAfrica.default,
   "south-korea": SouthKorea.default,
+  spain: Spain.default,
   sweden: Sweden.default,
   switzerland: Switzerland.default,
   taiwan: Taiwan.default,
+  thailand: Thailand.default,
   "united-arab-emirates": UnitedArabEmirates.default,
   "united-kingdom": UnitedKingdom.default,
   "united-states": UnitedStates.default

package/dist/cjs/components/Assets/Flags/system/FlagsLight.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlagsLight.cjs","sources":["../../../../../../src/components/Assets/Flags/system/FlagsLight.ts"],"sourcesContent":["/\n * WARNING: Auto-generated file!\n Do NOT modify it, your changes will be lost!\n If you find need to modify manually,\n ** report the issue immediately.\n */\n\nimport Australia from '../Australia';\nimport Brazil from '../Brazil';\nimport Canada from '../Canada';\nimport European_Union from '../European-Union';\nimport France from '../France';\nimport Germany from '../Germany';\nimport Great_Britain from '../Great-Britain';\nimport Hong_Kong from '../Hong-Kong';\nimport India from '../India';\nimport Indonesia from '../Indonesia';\nimport Ireland from '../Ireland';\nimport Israel from '../Israel';\nimport Japan from '../Japan';\nimport Malaysia from '../Malaysia';\nimport Mexico from '../Mexico';\nimport Netherlands from '../Netherlands';\nimport Singapore from '../Singapore';\nimport South_Africa from '../South-Africa';\nimport South_Korea from '../South-Korea';\nimport Sweden from '../Sweden';\nimport Switzerland from '../Switzerland';\nimport Taiwan from '../Taiwan';\nimport United_Arab_Emirates from '../United-Arab-Emirates';\nimport United_Kingdom from '../United-Kingdom';\nimport United_States from '../United-States';\nimport { FlagName } from './types';\nimport type { SVGAssetProps } from '@/types';\nimport type { ComponentType } from 'react';\n\nconst FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {\n australia: Australia,\n brazil: Brazil,\n canada: Canada,\n 'european-union': European_Union,\n france: France,\n germany: Germany,\n 'great-britain': Great_Britain,\n 'hong-kong': Hong_Kong,\n india: India,\n indonesia: Indonesia,\n ireland: Ireland,\n israel: Israel,\n japan: Japan,\n malaysia: Malaysia,\n mexico: Mexico,\n netherlands: Netherlands,\n singapore: Singapore,\n 'south-africa': South_Africa,\n 'south-korea': South_Korea,\n sweden: Sweden,\n switzerland: Switzerland,\n taiwan: Taiwan,\n 'united-arab-emirates': United_Arab_Emirates,\n 'united-kingdom': United_Kingdom,\n 'united-states': United_States,\n};\n\nexport default FlagsLight;\n"],"names":["Australia","Brazil","Canada","European_Union","France","Germany","Great_Britain","Hong_Kong","India","Indonesia","Ireland","Israel","Japan","Malaysia","Mexico","Netherlands","Singapore","South_Africa","South_Korea","Sweden","Switzerland","Taiwan","United_Arab_Emirates","United_Kingdom","United_States"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA~~,MAAM,UAAA,GAA6D;AAAA,EACjE,SAAA,EAAWA,iBAAA;AAAA,EACX,MAAA,EAAQC,cAAA;AAAA,EACR,MAAA,EAAQC,cAAA;AAAA,EACR,gBAAA,EAAkBC,qBAAA;AAAA,EAClB,MAAA,EAAQC,cAAA;AAAA,EACR,OAAA,EAASC,eAAA;AAAA,EACT,eAAA,EAAiBC,oBAAA;AAAA,EACjB,WAAA,EAAaC,gBAAA;AAAA,EACb,KAAA,EAAOC,aAAA;AAAA,EACP,SAAA,EAAWC,iBAAA;AAAA,EACX,OAAA,EAASC,eAAA;AAAA,EACT,MAAA,EAAQC,cAAA;AAAA,EACR,KAAA,EAAOC,aAAA;AAAA,EACP,QAAA,EAAUC,gBAAA;AAAA,EACV,MAAA,EAAQC,cAAA;AAAA,EACR,WAAA,EAAaC,mBAAA;AAAA,EACb,SAAA,EAAWC,iBAAA;AAAA,EACX,cAAA,EAAgBC,mBAAA;AAAA,EAChB,aAAA,EAAeC,kBAAA;AAAA,EACf,MAAA,EAAQC,cAAA;AAAA,EACR,WAAA,EAAaC,mBAAA;AAAA,EACb,MAAA,EAAQC,cAAA;AAAA,EACR,sBAAA,EAAwBC,0BAAA;AAAA,EACxB,gBAAA,EAAkBC,qBAAA;AAAA,EAClB,eAAA,EAAiBC;AACnB;;;;"}
1	+ {"version":3,"file":"FlagsLight.cjs","sources":["../../../../../../src/components/Assets/Flags/system/FlagsLight.ts"],"sourcesContent":["/\n * WARNING: Auto-generated file!\n Do NOT modify it, your changes will be lost!\n If you find need to modify manually,\n ** report the issue immediately.\n */\n\nimport Australia from '../Australia';\nimport Austria from '../Austria';\nimport Bahrain from '../Bahrain';\nimport Belgium from '../Belgium';\nimport Brazil from '../Brazil';\nimport Canada from '../Canada';\nimport Chile from '../Chile';\nimport China from '../China';\nimport Denmark from '../Denmark';\nimport European_Union from '../European-Union';\nimport Finland from '../Finland';\nimport France from '../France';\nimport Germany from '../Germany';\nimport Great_Britain from '../Great-Britain';\nimport Greece from '../Greece';\nimport Hong_Kong from '../Hong-Kong';\nimport India from '../India';\nimport Indonesia from '../Indonesia';\nimport Ireland from '../Ireland';\nimport Israel from '../Israel';\nimport Italy from '../Italy';\nimport Japan from '../Japan';\nimport Malaysia from '../Malaysia';\nimport Mexico from '../Mexico';\nimport Netherlands from '../Netherlands';\nimport New_Zealand from '../New-Zealand';\nimport Norway from '../Norway';\nimport Poland from '../Poland';\nimport Qatar from '../Qatar';\nimport Saudi_Arabia from '../Saudi-Arabia';\nimport Singapore from '../Singapore';\nimport South_Africa from '../South-Africa';\nimport South_Korea from '../South-Korea';\nimport Spain from '../Spain';\nimport Sweden from '../Sweden';\nimport Switzerland from '../Switzerland';\nimport Taiwan from '../Taiwan';\nimport Thailand from '../Thailand';\nimport United_Arab_Emirates from '../United-Arab-Emirates';\nimport United_Kingdom from '../United-Kingdom';\nimport United_States from '../United-States';\nimport { FlagName } from './types';\nimport type { SVGAssetProps } from '@/types';\nimport type { ComponentType } from 'react';\n\nconst FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {\n australia: Australia,\n austria: Austria,\n bahrain: Bahrain,\n belgium: Belgium,\n brazil: Brazil,\n canada: Canada,\n chile: Chile,\n china: China,\n denmark: Denmark,\n 'european-union': European_Union,\n finland: Finland,\n france: France,\n germany: Germany,\n 'great-britain': Great_Britain,\n greece: Greece,\n 'hong-kong': Hong_Kong,\n india: India,\n indonesia: Indonesia,\n ireland: Ireland,\n israel: Israel,\n italy: Italy,\n japan: Japan,\n malaysia: Malaysia,\n mexico: Mexico,\n netherlands: Netherlands,\n 'new-zealand': New_Zealand,\n norway: Norway,\n poland: Poland,\n qatar: Qatar,\n 'saudi-arabia': Saudi_Arabia,\n singapore: Singapore,\n 'south-africa': South_Africa,\n 'south-korea': South_Korea,\n spain: Spain,\n sweden: Sweden,\n switzerland: Switzerland,\n taiwan: Taiwan,\n thailand: Thailand,\n 'united-arab-emirates': United_Arab_Emirates,\n 'united-kingdom': United_Kingdom,\n 'united-states': United_States,\n};\n\nexport default FlagsLight;\n"],"names":["Australia","Austria","Bahrain","Belgium","Brazil","Canada","Chile","China","Denmark","European_Union","Finland","France","Germany","Great_Britain","Greece","Hong_Kong","India","Indonesia","Ireland","Israel","Italy","Japan","Malaysia","Mexico","Netherlands","New_Zealand","Norway","Poland","Qatar","Saudi_Arabia","Singapore","South_Africa","South_Korea","Spain","Sweden","Switzerland","Taiwan","Thailand","United_Arab_Emirates","United_Kingdom","United_States"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,UAAA,GAA6D;AAAA,EACjE,SAAA,EAAWA,iBAAA;AAAA,EACX,OAAA,EAASC,eAAA;AAAA,EACT,OAAA,EAASC,eAAA;AAAA,EACT,OAAA,EAASC,eAAA;AAAA,EACT,MAAA,EAAQC,cAAA;AAAA,EACR,MAAA,EAAQC,cAAA;AAAA,EACR,KAAA,EAAOC,aAAA;AAAA,EACP,KAAA,EAAOC,aAAA;AAAA,EACP,OAAA,EAASC,eAAA;AAAA,EACT,gBAAA,EAAkBC,qBAAA;AAAA,EAClB,OAAA,EAASC,eAAA;AAAA,EACT,MAAA,EAAQC,cAAA;AAAA,EACR,OAAA,EAASC,eAAA;AAAA,EACT,eAAA,EAAiBC,oBAAA;AAAA,EACjB,MAAA,EAAQC,cAAA;AAAA,EACR,WAAA,EAAaC,gBAAA;AAAA,EACb,KAAA,EAAOC,aAAA;AAAA,EACP,SAAA,EAAWC,iBAAA;AAAA,EACX,OAAA,EAASC,eAAA;AAAA,EACT,MAAA,EAAQC,cAAA;AAAA,EACR,KAAA,EAAOC,aAAA;AAAA,EACP,KAAA,EAAOC,aAAA;AAAA,EACP,QAAA,EAAUC,gBAAA;AAAA,EACV,MAAA,EAAQC,cAAA;AAAA,EACR,WAAA,EAAaC,mBAAA;AAAA,EACb,aAAA,EAAeC,kBAAA;AAAA,EACf,MAAA,EAAQC,cAAA;AAAA,EACR,MAAA,EAAQC,cAAA;AAAA,EACR,KAAA,EAAOC,aAAA;AAAA,EACP,cAAA,EAAgBC,mBAAA;AAAA,EAChB,SAAA,EAAWC,iBAAA;AAAA,EACX,cAAA,EAAgBC,mBAAA;AAAA,EAChB,aAAA,EAAeC,kBAAA;AAAA,EACf,KAAA,EAAOC,aAAA;AAAA,EACP,MAAA,EAAQC,cAAA;AAAA,EACR,WAAA,EAAaC,mBAAA;AAAA,EACb,MAAA,EAAQC,cAAA;AAAA,EACR,QAAA,EAAUC,gBAAA;AAAA,EACV,sBAAA,EAAwBC,0BAAA;AAAA,EACxB,gBAAA,EAAkBC,qBAAA;AAAA,EAClB,eAAA,EAAiBC;AACnB;;;;"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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":"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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;;;AAQA,MAAM,iBAAA,GAAoB,CAAC,IAAA,EAAa,QAAA,KAA8B;AACpE,EAAA,MAAM,gBAAgBA,sBAAA,EAAM,CAAE,IAAA,EAAK,KAAM,KAAK,IAAA,EAAK;AACnD,EAAA,MAAM,oBAAA,GAAuB,eAAA;AAC7B,EAAA,MAAM,iBAAA,GAAoB,qBAAA;AAE1B,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,MAAM,gBAAA,GAAmB,IAAA,CAAK,EAAA,CAAG,QAAQ,CAAA;AACzC,MAAA,OAAO,gBAAA,CACJ,MAAA,CAAO,oBAAoB,CAAA,CAC3B,OAAA,CAAQ,MAAM,MAAM,CAAA,CACpB,OAAA,CAAQ,IAAA,EAAM,MAAM,CAAA;AAAA,IACzB;AAEA,IAAA,OAAO,IAAA,CAAK,MAAA,CAAO,oBAAoB,CAAA,CAAE,OAAA,CAAQ,MAAM,MAAM,CAAA,CAAE,OAAA,CAAQ,IAAA,EAAM,MAAM,CAAA;AAAA,EACrF;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,MAAM,gBAAA,GAAmB,IAAA,CAAK,EAAA,CAAG,QAAQ,CAAA;AACzC,IAAA,OAAO,gBAAA,CACJ,MAAA,CAAO,iBAAiB,CAAA,CACxB,OAAA,CAAQ,MAAM,MAAM,CAAA,CACpB,OAAA,CAAQ,IAAA,EAAM,MAAM,CAAA;AAAA,EACzB;AACA,EAAA,OAAO,IAAA,CAAK,MAAA,CAAO,iBAAiB,CAAA,CAAE,OAAA,CAAQ,MAAM,MAAM,CAAA,CAAE,OAAA,CAAQ,IAAA,EAAM,MAAM,CAAA;AAClF,CAAA;~~AAIO~~,MAAM,cAAc,CAAC;AAAA,QAC1BC,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,cAAA;AAAA,EACA,MAAA,GAAS;AACX,CAAA,KAAwB;AACtB,EAAA,MAAM,SAAA,GAAYD,uBAAMC,MAAI,CAAA;AAE5B,EAAA,IAAI,UAAA;AACJ,EAAA,IAAI,cAAA,~~EAAgB~~;~~AAClB~~,IAAA,IAAI;AACF,MAAA,UAAA,GAAa,SAAA,CAAU,GAAG,~~cAAc~~,CAAA;AAAA,~~IAC1C~~,CAAA,CAAA,MAAQ;AACN,MAAA,UAAA,GAAa,SAAA,CAAU,GAAG,~~kBAAkB~~,CAAA;AAAA,~~IAC9C~~;AAAA,EACF;AAEA,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACD,eAAA,CAAQ,SAAR,EACC,QAAA,kBAAAC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,MAAA;AAAA,QACV,IAAA,EAAK,IAAA;AAAA,QACL,MAAA,EAAO,QAAA;AAAA,QAEP,QAAA,kBAAAD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,MAAA;AAAA,YACV,IAAA;AAAA,YACA,MAAA;AAAA,YAEC,QAAA,EAAAL,sBAAA,CAAM,GAAA,CAAIC,MAAI,CAAA,CAAE,OAAA;AAAQ;AAAA;AAC3B;AAAA,KACF,EACF,CAAA;AAAA,oBACAE,cAAA;AAAA,MAACD,eAAA,CAAQ,OAAA;AAAA,MAAR;AAAA,QACC,IAAA;AAAA,QACA,SAAA,EAAS,IAAA;AAAA,QAET,QAAA,kBAAAI,eAAA;AAAA,UAACC,2BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,IAAA;AAAA,YACV,mBAAA,EAAoB,iBAAA;AAAA,YACpB,GAAA,EAAI,IAAA;AAAA,YAEJ,QAAA,EAAA;AAAA,8BAAAJ,cAAA;AAAA,gBAACE,SAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAM,OAAA;AAAA,kBACN,IAAA,EAAK,IAAA;AAAA,kBACN,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,6CACCG,mBAAA,EAAA,EAAU,cAAA,EAAe,OACxB,QAAA,kBAAAF,eAAA,CAACD,SAAA,EAAA,EAAK,MAAK,IAAA,EACR,QAAA,EAAA;AAAA,gBAAA,iBAAA,CAAkB,SAAS,CAAA;AAAA,gBAAE,IAAA;AAAA,gBAC7BI,mBAAA,CAAe;AAAA,kBACd,IAAA,EAAM,SAAA;AAAA,kBACN,QAAA,EAAUT,sBAAA,CAAM,EAAA,CAAG,KAAA;AAAM,iBAC1B,CAAA;AAAA,gBAAE;AAAA,eAAA,EAEL,CAAA,EACF,CAAA;AAAA,cAEC,8BACCM,eAAA,CAAAI,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,gCAAAP,cAAA;AAAA,kBAACE,SAAA;AAAA,kBAAA;AAAA,oBACC,KAAA,EAAM,OAAA;AAAA,oBACN,IAAA,EAAK,IAAA;AAAA,oBACN,QAAA,EAAA;AAAA;AAAA,iBAED;AAAA,+CAECG,mBAAA,EAAA,EAAU,cAAA,EAAe,OACxB,QAAA,kBAAAF,eAAA,CAACD,SAAA,EAAA,EAAK,MAAK,IAAA,EACR,QAAA,EAAA;AAAA,kBAAA,iBAAA,CAAkB,YAAY,~~cAAc~~,CAAA;AAAA,kBAAE,IAAA;AAAA,~~kBAC9CI~~,mBAAA,CAAe;AAAA,oBACd,IAAA,EAAM,UAAA;AAAA,oBACN,QAAA,EAAU;AAAA,mBACX,CAAA;AAAA,kBAAE;AAAA,iBAAA,EAEL,CAAA,EACF;AAAA,eAAA,EACF,CAAA;AAAA,8BAGFN,cAAA;AAAA,gBAACE,SAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAM,OAAA;AAAA,kBACN,IAAA,EAAK,IAAA;AAAA,kBACN,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,8BACAF,cAAA,CAACK,mBAAA,EAAA,EAAU,cAAA,EAAe,KAAA,EACxB,yCAACH,SAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,iBAAA,CAAkB,SAAA,CAAU,GAAA,EAAI,EAAG,KAAK,GAAE,CAAA,EAC7D,CAAA;AAAA,8BAEAF,cAAA;AAAA,gBAACE,SAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAM,OAAA;AAAA,kBACN,IAAA,EAAK,IAAA;AAAA,kBACN,QAAA,EAAA;AAAA;AAAA,eAED;AAAA,8BACAF,cAAA,CAACK,mBAAA,EAAA,EAAU,cAAA,EAAe,KAAA,EACxB,yCAACH,SAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,CAAK,MAAM,SAAA,CAAU,OAAA,EAAQ,GAAI,GAAI,GAAE,CAAA,EAC1D;AAAA;AAAA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}
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\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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 (\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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;;;;"}
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 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;;;;"}