npm - @clickhouse/click-ui - Versions diffs - 0.7.0 → 0.9.0 - Mend

@clickhouse/click-ui 0.7.0 → 0.9.0

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 (398) hide show

package/dist/cjs/components/CodeBlock/InlineCodeBlock.module.css.cjs ADDED Viewed

@@ -0,0 +1,12 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const inline = "inline__jYdpl";
+const styles = {
+	inline: inline
+};
+exports.default = styles;
+exports.inline = inline;
+//# sourceMappingURL=InlineCodeBlock.module.css.cjs.map

package/dist/cjs/components/CodeBlock/InlineCodeBlock.module.css.cjs.map ADDED Viewed

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

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

@@ -1,3 +1,4 @@
+require("./CodeBlock.css");
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,9 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactSyntaxHighlighter = require('react-syntax-highlighter');
-const EmptyButton = require('../EmptyButton/index.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const useColorStyle = require('./useColorStyle.cjs');
+const CodeBlock_module = require('./CodeBlock.module.css.cjs');
 const sql = require('react-syntax-highlighter/dist/cjs/languages/hljs/sql.js');
 const bash = require('react-syntax-highlighter/dist/cjs/languages/hljs/bash.js');
 const json = require('react-syntax-highlighter/dist/cjs/languages/hljs/json.js');
@@ -28,47 +29,6 @@ reactSyntaxHighlighter.Light.registerLanguage("bash", bash__default.default.defa
 reactSyntaxHighlighter.Light.registerLanguage("json", json__default.default.default || json__default.default);
 reactSyntaxHighlighter.Light.registerLanguage("tsx", tsx__default.default.default || tsx__default.default);
 reactSyntaxHighlighter.Light.registerLanguage("plaintext", plaintext__default.default.default || plaintext__default.default);
-const CodeBlockContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-18gnqgi-0"
-})(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;position:relative;", ""], ({
-  theme,
-  $theme
-}) => {
-  const themeName = theme.name;
-  const codeTheme = theme.click.codeblock[`${!$theme ? themeName : $theme}Mode`].color;
-  return `
-    color: ${codeTheme.numbers.default};
-    .linenumber {
-      color: ${codeTheme.numbers.default}
-    }
-  `;
-});
-const CodeButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
-  componentId: "sc-18gnqgi-1"
-})(["", ""], ({
-  $copied,
-  $error,
-  theme
-}) => `
-    color: ${$copied ? theme.click.alert.color.text.success : $error ? theme.click.alert.color.text.danger : "inherit"};
-    padding: 0;
-    border: 0;
-  `);
-const Highlighter = styledComponents.styled(reactSyntaxHighlighter.Light).withConfig({
-  componentId: "sc-18gnqgi-2"
-})(["background:transparent;padding:0;margin:0;"]);
-const CodeContent = styledComponents.styled.code.withConfig({
-  componentId: "sc-18gnqgi-3"
-})(["font-family:inherit;color:inherit;"]);
-const ButtonContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-18gnqgi-4"
-})(["position:absolute;display:flex;", ""], ({
-  theme
-}) => `
-    gap:  0.625rem;
-    top: ${theme.click.codeblock.space.y};
-    right: ${theme.click.codeblock.space.x};
-  `);
 const CodeBlock = ({
   children,
   language,
@@ -78,12 +38,16 @@ const CodeBlock = ({
   wrapLines = false,
   onCopy,
   onCopyError,
+  className,
+  style,
   ...props
 }) => {
   const [copied, setCopied] = react.useState(false);
   const [errorCopy, setErrorCopy] = react.useState(false);
   const [wrap, setWrap] = react.useState(wrapLines);
   const customStyle = useColorStyle.default(theme);
+  const numbersColor = useColorStyle.useNumbersColor(theme);
+  const buttonStateColors = useColorStyle.useButtonStateColors();
   const copyCodeToClipboard = async () => {
     try {
       await navigator.clipboard.writeText(children);
@@ -107,13 +71,18 @@ const CodeBlock = ({
   const wrapElement = () => {
     setWrap((wrap2) => !wrap2);
   };
-  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { ...props2 });
-  return /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockContainer, { $theme: theme, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ButtonContainer, { children: [
-      showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(CodeButton, { as: IconButton.IconButton, $copied: false, $error: false, icon: "document", onClick: wrapElement }),
-      /* @__PURE__ */ jsxRuntime.jsx(CodeButton, { as: IconButton.IconButton, $copied: copied, $error: errorCopy, icon: copied ? "check" : errorCopy ? "warning" : "copy", onClick: copyCodeToClipboard })
+  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx("code", { ...props2, className: cva.cn(CodeBlock_module.default["codeblock__content"], props2.className) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, 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(Highlighter, { language, style: customStyle, CodeTag: CodeWithRef, renderer: ({
+    /* @__PURE__ */ jsxRuntime.jsx(reactSyntaxHighlighter.Light, { language, style: customStyle, CodeTag: CodeWithRef, className: CodeBlock_module.default["codeblock__highlighter"], renderer: ({
       rows,
       stylesheet,
       useInlineStyles

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 { EmptyButton } from '@/components/EmptyButton';\nimport { IconButton } from '@/components/IconButton';\n\nimport { styled } from 'styled-components';\nimport useColorStyle from './useColorStyle';\nimport { CodeBlockProps, CodeThemeType } from './CodeBlock.types';\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\nconst CodeBlockContainer = styled.div<{ $theme?: CodeThemeType }>`\n width: 100%;\n width: -webkit-fill-available;\n width: fill-available;\n width: stretch;\n position: relative;\n ${({ theme, $theme }) => {\n const themeName = theme.name as CodeThemeType;\n\n const codeTheme = theme.click.codeblock[`${!$theme ? themeName : $theme}Mode`].color;\n return `\n color: ${codeTheme.numbers.default};\n .linenumber {\n color: ${codeTheme.numbers.default}\n }\n `;\n }}\n`;\n\nconst CodeButton = styled(EmptyButton)<{ $copied: boolean; $error: boolean }>`\n ${({ $copied, $error, theme }) => `\n color: ${\n $copied\n ? theme.click.alert.color.text.success\n : $error\n ? theme.click.alert.color.text.danger\n : 'inherit'\n };\n padding: 0;\n border: 0;\n `}\n`;\n\nconst Highlighter = styled(SyntaxHighlighter)`\n background: transparent;\n padding: 0;\n margin: 0;\n`;\n\nconst CodeContent = styled.code`\n font-family: inherit;\n color: inherit;\n`;\n\nconst ButtonContainer = styled.div`\n position: absolute;\n display: flex;\n ${({ theme }) => `\n gap: 0.625rem;\n top: ${theme.click.codeblock.space.y};\n right: ${theme.click.codeblock.space.x};\n `}\n`;\n\nexport const CodeBlock = ({\n children,\n language,\n theme,\n showLineNumbers,\n showWrapButton = false,\n wrapLines = false,\n onCopy,\n onCopyError,\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\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>) => <CodeContent {...props} />;\n return (\n <CodeBlockContainer\n $theme={theme}\n {...props}\n >\n <ButtonContainer>\n {showWrapButton && (\n <CodeButton\n as={IconButton}\n $copied={false}\n $error={false}\n icon=\"document\"\n onClick={wrapElement}\n />\n )}\n <CodeButton\n as={IconButton}\n $copied={copied}\n $error={errorCopy}\n icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n onClick={copyCodeToClipboard}\n />\n </ButtonContainer>\n <Highlighter\n language={language}\n style={customStyle}\n CodeTag={CodeWithRef}\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 </Highlighter>\n </CodeBlockContainer>\n );\n};\n"],"names":["SyntaxHighlighter","registerLanguage","sql","default","bash","json","tsx","plaintext","CodeBlockContainer","styled","div","withConfig","componentId","theme","$theme","themeName","name","codeTheme","click","codeblock","color","numbers","CodeButton","EmptyButton","$copied","$error","alert","text","success","danger","Highlighter","CodeContent","code","ButtonContainer","space","y","x","CodeBlock","children","language","showLineNumbers","showWrapButton","wrapLines","onCopy","onCopyError","props","copied","setCopied","useState","errorCopy","setErrorCopy","wrap","setWrap","customStyle","useColorStyle","copyCodeToClipboard","navigator","clipboard","writeText","setTimeout","error","message","Error","wrapElement","CodeWithRef","jsx","jsxs","IconButton","rows","stylesheet","useInlineStyles","map","row","index","lineNumberElement","shift","properties","className","tagName","type","createElement","node","key"],"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 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","registerLanguage","sql","default","bash","json","tsx","plaintext","CodeBlock","children","language","theme","showLineNumbers","showWrapButton","wrapLines","onCopy","onCopyError","className","style","props","copied","setCopied","useState","errorCopy","setErrorCopy","wrap","setWrap","customStyle","useColorStyle","numbersColor","useNumbersColor","buttonStateColors","useButtonStateColors","copyCodeToClipboard","navigator","clipboard","writeText","setTimeout","error","message","Error","wrapElement","CodeWithRef","jsx","cn","styles","jsxs","codeblock","IconButton","success","danger","undefined","rows","stylesheet","useInlineStyles","map","row","index","lineNumberElement","shift","properties","tagName","type","createElement","node","key"],"mappings":"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"}

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

@@ -123,6 +123,21 @@ const useColorStyle = (defaultTheme) => {
     }
   };
 };
+const useNumbersColor = (defaultTheme) => {
+  const theme = styledComponents.useTheme();
+  const inheritedThemeName = theme.name;
+  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;
+  return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;
+};
+const useButtonStateColors = () => {
+  const theme = styledComponents.useTheme();
+  return {
+    success: theme.click.alert.color.text.success,
+    danger: theme.click.alert.color.text.danger
+  };
+};
 exports.default = useColorStyle;
+exports.useButtonStateColors = useButtonStateColors;
+exports.useNumbersColor = useNumbersColor;
 //# sourceMappingURL=useColorStyle.cjs.map

package/dist/cjs/components/CodeBlock/useColorStyle.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useColorStyle.cjs","sources":["../../../../src/components/CodeBlock/useColorStyle.ts"],"sourcesContent":["import { useTheme } from 'styled-components';\nimport { CodeThemeType } from './CodeBlock.types';\n\nconst useColorStyle = (defaultTheme?: CodeThemeType) => {\n const theme = useTheme();\n const inheritedThemeName = theme.name as CodeThemeType;\n const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;\n\n return {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n padding: `${theme.click.codeblock.space.y} ${theme.click.codeblock.space.x}`,\n color: codeTheme.text.default,\n background: codeTheme.background.default,\n borderRadius: theme.click.codeblock.radii.all,\n font: theme.click.codeblock.typography.text.default,\n },\n 'hljs-comment': {\n color: themeName === 'dark' ? '#999999' : '#656e77',\n },\n 'hljs-keyword': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-selector-tag': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-meta-keyword': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-doctag': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-section': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-selector-class': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-meta': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-selector-pseudo': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-attr': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-attribute': {\n color: themeName === 'dark' ? '#c59bc1' : '#803378',\n },\n 'hljs-name': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-type': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-number': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-selector-id': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-quote': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-template-tag': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-built_in': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-title': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-literal': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-string': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-regexp': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-symbol': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-variable': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-template-variable': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-link': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-selector-attr': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-meta-string': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-bullet': {\n color: themeName === 'dark' ? '#cccccc' : '#535a60',\n },\n 'hljs-code': {\n color: themeName === 'dark' ? '#cccccc' : '#535a60',\n },\n 'hljs-deletion': {\n color: themeName === 'dark' ? '#de7176' : '#c02d2e',\n },\n 'hljs-addition': {\n color: themeName === 'dark' ? '#76c490' : '#2f6f44',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n };\n};\n\nexport default useColorStyle;\n"],"names":["useColorStyle","defaultTheme","theme","useTheme","inheritedThemeName","name","themeName","codeTheme","click","codeblock","color","hljs","display","overflowX","padding","space","y","x","text","default","background","borderRadius","radii","all","font","typography","fontStyle","fontWeight"],"mappings":";;;;;;~~AAGA~~,MAAMA,aAAAA,GAAgBA,CAACC,YAAAA,~~KAAiC~~;~~AACtD~~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~~;;;;~~"}
1	+ {"version":3,"file":"useColorStyle.cjs","sources":["../../../../src/components/CodeBlock/useColorStyle.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { useTheme } from 'styled-components';\nimport { CodeThemeType } from './CodeBlock.types';\n\nconst useColorStyle = (defaultTheme?: CodeThemeType): Record<string, CSSProperties> => {\n const theme = useTheme();\n const inheritedThemeName = theme.name as CodeThemeType;\n const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;\n\n return {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n padding: `${theme.click.codeblock.space.y} ${theme.click.codeblock.space.x}`,\n color: codeTheme.text.default,\n background: codeTheme.background.default,\n borderRadius: theme.click.codeblock.radii.all,\n font: theme.click.codeblock.typography.text.default,\n },\n 'hljs-comment': {\n color: themeName === 'dark' ? '#999999' : '#656e77',\n },\n 'hljs-keyword': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-selector-tag': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-meta-keyword': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-doctag': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-section': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-selector-class': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-meta': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-selector-pseudo': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-attr': {\n color: themeName === 'dark' ? '#88aece' : '#015692',\n },\n 'hljs-attribute': {\n color: themeName === 'dark' ? '#c59bc1' : '#803378',\n },\n 'hljs-name': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-type': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-number': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-selector-id': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-quote': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-template-tag': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-built_in': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-title': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-literal': {\n color: themeName === 'dark' ? '#f08d49' : '#b75501',\n },\n 'hljs-string': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-regexp': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-symbol': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-variable': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-template-variable': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-link': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-selector-attr': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-meta-string': {\n color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n },\n 'hljs-bullet': {\n color: themeName === 'dark' ? '#cccccc' : '#535a60',\n },\n 'hljs-code': {\n color: themeName === 'dark' ? '#cccccc' : '#535a60',\n },\n 'hljs-deletion': {\n color: themeName === 'dark' ? '#de7176' : '#c02d2e',\n },\n 'hljs-addition': {\n color: themeName === 'dark' ? '#76c490' : '#2f6f44',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n };\n};\n\nexport const useNumbersColor = (defaultTheme?: CodeThemeType): string => {\n const theme = useTheme();\n const inheritedThemeName = theme.name as CodeThemeType;\n const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;\n};\n\nexport const useButtonStateColors = (): { success: string; danger: string } => {\n const theme = useTheme();\n return {\n success: theme.click.alert.color.text.success,\n danger: theme.click.alert.color.text.danger,\n };\n};\n\nexport default useColorStyle;\n"],"names":["useColorStyle","defaultTheme","theme","useTheme","inheritedThemeName","name","themeName","codeTheme","click","codeblock","color","hljs","display","overflowX","padding","space","y","x","text","default","background","borderRadius","radii","all","font","typography","fontStyle","fontWeight","useNumbersColor","numbers","useButtonStateColors","success","alert","danger"],"mappings":"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"}

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

@@ -1,3 +1,10 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+.trigger__4-zK2:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
 .right-menu-content__0-EQz {
   z-index: 1;
   flex-direction: column;
@@ -26,3 +33,8 @@
 .right-menu-content_show-arrow__-yaE-[data-side='right'] .popover-arrow__z8r3W {
   margin-left: 1rem;
 }
+.group__4UU7V {
+  width: 100%;
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+}

package/dist/cjs/components/ContextMenu/ContextMenu.module.css.cjs CHANGED Viewed

@@ -2,9 +2,16 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const trigger = "trigger__4-zK2";
+const group = "group__4UU7V";
 const styles = {
+	trigger: trigger,
 	"right-menu-content": "right-menu-content__0-EQz",
-	"right-menu-content_show-arrow": "right-menu-content_show-arrow__-yaE-"};
+	"right-menu-content_show-arrow": "right-menu-content_show-arrow__-yaE-",
+	group: group
+};
 exports.default = styles;
+exports.group = group;
+exports.trigger = trigger;
 //# sourceMappingURL=ContextMenu.module.css.cjs.map

package/dist/cjs/components/ContextMenu/ContextMenu.module.css.cjs.map CHANGED Viewed

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

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

@@ -5,7 +5,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require('react/jsx-runtime');
 const RightMenu = require('@radix-ui/react-context-menu');
-const styledComponents = require('styled-components');
 const react = require('react');
 const GenericMenu = require('../GenericMenu/index.cjs');
 const cva = require('../../lib/cva.cjs');
@@ -38,16 +37,12 @@ function _interopNamespace(e) {
 const RightMenu__namespace = /*#__PURE__*/_interopNamespace(RightMenu);
 const ContextMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Root, { ...props });
-const TriggerDiv = styledComponents.styled.div.withConfig({
-  componentId: "sc-8z6kye-0"
-})(["&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
-  theme
-}) => theme.click.global.color.outline.default);
 const ContextMenuTrigger = react.forwardRef(({
   disabled,
+  className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(TriggerDiv, { ref, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, className: cva.cn(ContextMenu_module.default.trigger, className) }) });
 });
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 ContextMenu.Trigger = ContextMenuTrigger;
@@ -105,25 +100,18 @@ const ContextMenuContent = ({
 };
 ContextMenuContent.displayName = "ContextMenuContent";
 ContextMenu.Content = ContextMenuContent;
-const RightMenuGroup = styledComponents.styled(RightMenu__namespace.Group).withConfig({
-  componentId: "sc-8z6kye-1"
-})(["width:100%;border-bottom:1px solid ", ";"], ({
-  theme
-}) => theme.click.genericMenu.item.color.default.stroke.default);
-const ContextMenuGroup = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenuGroup, { ...props });
+const ContextMenuGroup = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Group, { ...props, className: cva.cn(ContextMenu_module.default.group, className) });
 };
 ContextMenuGroup.displayName = "ContextMenuGroup";
 ContextMenu.Group = ContextMenuGroup;
-const RightMenuSub = styledComponents.styled(RightMenu__namespace.Sub).withConfig({
-  componentId: "sc-8z6kye-2"
-})(["border-bottom:1px solid ", ";"], ({
-  theme
-}) => theme.click.genericMenu.item.color.default.stroke.default);
 const ContextMenuSub = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenuSub, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Sub, { ...props });
 };
 ContextMenuSub.displayName = "ContextMenuSub";
 ContextMenu.Sub = ContextMenuSub;

package/dist/cjs/components/ContextMenu/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport { styled } from 'styled-components';\nimport {\n ComponentProps,\n ComponentPropsWithRef,\n ElementType,\n ReactNode,\n forwardRef,\n} from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn, cva } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './ContextMenu.module.css';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n <RightMenu.Root {...props} />\n);\n\nconst TriggerDiv = styled.div`\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n outline-offset: 2px;\n }\n`;\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n ({ disabled, ...props }, ref) => {\n return (\n <RightMenu.Trigger\n asChild\n disabled={disabled}\n >\n <TriggerDiv\n ref={ref}\n {...props}\n />\n </RightMenu.Trigger>\n );\n }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n icon?: IconName;\n iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n icon,\n iconDir,\n children,\n ...props\n}: ContextMenuSubTriggerProps) => {\n return (\n <GenericMenuItem\n as={RightMenu.SubTrigger}\n {...props}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n <div className=\"dropdown-arrow\">\n <Icon name=\"chevron-right\" />\n </div>\n </GenericMenuItem>\n );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 /\n side?: string;\n /* @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n sub?: true;\n container?: HTMLElement \| null;\n} & ArrowProps &\n DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n sub?: never;\n container?: HTMLElement \| null;\n} & ArrowProps &\n DeprecatedFields;\n\nconst rightMenuContentVariants = cva(styles['right-menu-content'], {\n variants: {\n showArrow: {\n true: styles['right-menu-content_show-arrow'],\n false: '',\n },\n },\n defaultVariants: {\n showArrow: false,\n },\n});\n\ntype RightMenuContentComponent = <T extends ElementType = 'div'>(\n props: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean }\n) => ReactNode;\n\nconst _RightMenuContent = <T extends ElementType = 'div'>(\n {\n showArrow,\n className,\n ...props\n }: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean },\n ref: ComponentPropsWithRef<T>['ref']\n) => (\n <GenericMenuPanel\n ref={ref}\n showArrow={showArrow}\n {...(props as ComponentProps<typeof GenericMenuPanel>)}\n className={cn(rightMenuContentVariants({ showArrow }), className)}\n />\n);\n\nconst RightMenuContent: RightMenuContentComponent = forwardRef(_RightMenuContent);\n\nconst ContextMenuContent = ({\n sub,\n children,\n container,\n showArrow,\n // TODO: remove deprecated side and align\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n side,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n align,\n ...props\n}: ContextMenuContentProps \| ContextMenuSubContentProps) => {\n const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n const inputModalityProps = useInputModality();\n const portalContainer = useResolvedPortalContainer(container);\n\n return (\n <RightMenu.Portal container={portalContainer}>\n <RightMenuContent\n {...props}\n type=\"context-menu\"\n showArrow={showArrow}\n as={ContentElement}\n {...inputModalityProps}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RightMenu.Arrow}\n width={20}\n height={10}\n >\n <Popover_Arrow className=\"popover-arrow\" />\n </Arrow>\n )}\n {children}\n </RightMenuContent>\n </RightMenu.Portal>\n );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst RightMenuGroup = styled(RightMenu.Group)`\n width: 100%;\n border-bottom: 1px solid\n ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuGroup = (props: RightMenu.ContextMenuGroupProps) => {\n return <RightMenuGroup {...props} />;\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst RightMenuSub = styled(RightMenu.Sub)`\n border-bottom: 1px solid\n ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n return <RightMenuSub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n icon,\n iconDir,\n type = 'default',\n children,\n ...props\n}: ContextMenuItemProps) => {\n return (\n <GenericMenuItem\n as={RightMenu.Item}\n type={type}\n {...props}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n </GenericMenuItem>\n );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["ContextMenu","props","jsx","RightMenu","TriggerDiv","styled","div","withConfig","componentId","theme","click","global","color","outline","default","ContextMenuTrigger","forwardRef","disabled","ref","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","GenericMenuItem","SubTrigger","IconWrapper","Icon","rightMenuContentVariants","cva","styles","variants","showArrow","true","false","defaultVariants","_RightMenuContent","className","GenericMenuPanel","cn","RightMenuContent","ContextMenuContent","sub","container","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","Arrow","Popover_Arrow","RightMenuGroup","Group","genericMenu","item","stroke","ContextMenuGroup","RightMenuSub","Sub","ContextMenuSub","ContextMenuItem","type","Item"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport {\n ComponentProps,\n ComponentPropsWithRef,\n ElementType,\n ReactNode,\n forwardRef,\n} from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport { cn, cva } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './ContextMenu.module.css';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n <RightMenu.Root {...props} />\n);\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n ({ disabled, className, ...props }, ref) => {\n return (\n <RightMenu.Trigger\n asChild\n disabled={disabled}\n >\n <div\n ref={ref}\n {...props}\n className={cn(styles.trigger, className)}\n />\n </RightMenu.Trigger>\n );\n }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n icon?: IconName;\n iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n icon,\n iconDir,\n children,\n ...props\n}: ContextMenuSubTriggerProps) => {\n return (\n <GenericMenuItem\n as={RightMenu.SubTrigger}\n {...props}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n <div className=\"dropdown-arrow\">\n <Icon name=\"chevron-right\" />\n </div>\n </GenericMenuItem>\n );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 /\n side?: string;\n /* @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n sub?: true;\n container?: HTMLElement \| null;\n} & ArrowProps &\n DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n sub?: never;\n container?: HTMLElement \| null;\n} & ArrowProps &\n DeprecatedFields;\n\nconst rightMenuContentVariants = cva(styles['right-menu-content'], {\n variants: {\n showArrow: {\n true: styles['right-menu-content_show-arrow'],\n false: '',\n },\n },\n defaultVariants: {\n showArrow: false,\n },\n});\n\ntype RightMenuContentComponent = <T extends ElementType = 'div'>(\n props: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean }\n) => ReactNode;\n\nconst _RightMenuContent = <T extends ElementType = 'div'>(\n {\n showArrow,\n className,\n ...props\n }: ComponentProps<typeof GenericMenuPanel<T>> & { showArrow?: boolean },\n ref: ComponentPropsWithRef<T>['ref']\n) => (\n <GenericMenuPanel\n ref={ref}\n showArrow={showArrow}\n {...(props as ComponentProps<typeof GenericMenuPanel>)}\n className={cn(rightMenuContentVariants({ showArrow }), className)}\n />\n);\n\nconst RightMenuContent: RightMenuContentComponent = forwardRef(_RightMenuContent);\n\nconst ContextMenuContent = ({\n sub,\n children,\n container,\n showArrow,\n // TODO: remove deprecated side and align\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n side,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n align,\n ...props\n}: ContextMenuContentProps \| ContextMenuSubContentProps) => {\n const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n const inputModalityProps = useInputModality();\n const portalContainer = useResolvedPortalContainer(container);\n\n return (\n <RightMenu.Portal container={portalContainer}>\n <RightMenuContent\n {...props}\n type=\"context-menu\"\n showArrow={showArrow}\n as={ContentElement}\n {...inputModalityProps}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RightMenu.Arrow}\n width={20}\n height={10}\n >\n <Popover_Arrow className=\"popover-arrow\" />\n </Arrow>\n )}\n {children}\n </RightMenuContent>\n </RightMenu.Portal>\n );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst ContextMenuGroup = ({ className, ...props }: RightMenu.ContextMenuGroupProps) => {\n return (\n <RightMenu.Group\n {...props}\n className={cn(styles.group, className)}\n />\n );\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n return <RightMenu.Sub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n icon,\n iconDir,\n type = 'default',\n children,\n ...props\n}: ContextMenuItemProps) => {\n return (\n <GenericMenuItem\n as={RightMenu.Item}\n type={type}\n {...props}\n >\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n </GenericMenuItem>\n );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["ContextMenu","props","jsx","RightMenu","ContextMenuTrigger","forwardRef","disabled","className","ref","cn","styles","trigger","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","GenericMenuItem","SubTrigger","IconWrapper","Icon","rightMenuContentVariants","cva","variants","showArrow","true","false","defaultVariants","_RightMenuContent","GenericMenuPanel","RightMenuContent","ContextMenuContent","sub","container","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","portalContainer","useResolvedPortalContainer","jsxs","Arrow","Popover_Arrow","ContextMenuGroup","group","Group","ContextMenuSub","Sub","ContextMenuItem","type","Item"],"mappings":"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"}

package/dist/cjs/components/CrossButton/CrossButton.css ADDED Viewed

@@ -0,0 +1,12 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+.cross-button__StJ4Q {
+  padding: var(--click-button-iconButton-sm-space-y)
+    var(--click-button-iconButton-sm-space-x);
+  border-radius: var(--click-button-iconButton-radii-all);
+  background: var(--click-button-iconButton-color-primary-background-default);
+}
+.cross-button__StJ4Q:hover {
+  background: var(--click-button-iconButton-color-primary-background-hover);
+}

package/dist/cjs/components/CrossButton/CrossButton.module.css.cjs ADDED Viewed

@@ -0,0 +1,10 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const styles = {
+	"cross-button": "cross-button__StJ4Q"
+};
+exports.default = styles;
+//# sourceMappingURL=CrossButton.module.css.cjs.map

package/dist/cjs/components/CrossButton/CrossButton.module.css.cjs.map ADDED Viewed

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

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

@@ -1,27 +1,20 @@
+require("./CrossButton.css");
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
 const EmptyButton = require('../EmptyButton/index.cjs');
+const CrossButton_module = require('./CrossButton.module.css.cjs');
-const CrossButton = styledComponents.styled(EmptyButton.EmptyButton).attrs(({
-  type = "button"
-}) => ({
-  type
-})).withConfig({
-  componentId: "sc-1jltje-0"
-})(["padding:", " ", ";background:", ";border-radius:", ";&:hover{background:", ";}"], ({
-  theme
-}) => theme.click.button.iconButton.sm.space.y, ({
-  theme
-}) => theme.click.button.iconButton.sm.space.x, ({
-  theme
-}) => theme.click.button.iconButton.color.primary.background.default, ({
-  theme
-}) => theme.click.button.iconButton.radii.all, ({
-  theme
-}) => theme.click.button.iconButton.color.primary.background.hover);
+const CrossButton = react.forwardRef(({
+  type = "button",
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(EmptyButton.EmptyButton, { ref, type, ...props, className: cva.cn(CrossButton_module.default["cross-button"], className) }));
+CrossButton.displayName = "CrossButton";
 exports.CrossButton = CrossButton;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/CrossButton/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../../src/components/CrossButton/CrossButton.tsx"],"sourcesContent":["import { ~~styled~~ } from '~~styled-components~~';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nexport const CrossButton = ~~styled(EmptyButton).attrs<{\~~n ~~type?: React.~~ButtonHTMLAttributes<HTMLButtonElement~~>['type'];\~~n}>(({ type = 'button' }) => (~~{ type }))`\~~n ~~padding: $~~{~~({ theme~~ }~~) => theme.click.button.iconButton.sm.space.y}~~\n ${~~({ theme~~ }~~) => theme.click.button.iconButton.sm.space.x};\~~n ~~background: $~~{~~({ theme~~ }~~) =>\~~n ~~theme.click.button.iconButton.color.primary.background.default};\n border-radius: $~~{({ ~~theme }~~) ~~=> theme.click.button.iconButton.radii.all~~}~~;\n~~\n ~~&:hover {\~~n ~~background: ${({ theme }~~) ~~=>\~~n ~~theme~~.~~click.button.iconButton.color.primary.background.hover}~~;\n ~~}\n`;\n~~"],"names":["CrossButton","~~styled~~","~~EmptyButton","attrs","~~type","~~withConfig~~","~~componentId~~","~~theme~~","~~click~~","~~button~~","~~iconButton~~","sm","~~space~~"~~,"y","x","color","primary","background","default","radii","all","hover"~~],"mappings":"~~;;;;;;;AAGO~~,MAAMA,WAAAA,GAAcC,~~uBAAAA~~,~~CAAOC,uBAAW,CAAA,CAAEC,MAE5C,~~CAAC;AAAA,EAAEC,IAAAA,GAAO~~;AAAS~~,~~CAAA,MAAO~~;AAAA,~~EAAEA;AAAK~~,~~CAAA,CAAE,EAACC,UAAAA,CAAA~~;~~AAAA~~,~~EAAAC~~,~~WAAAA,EAAA~~;~~AAAA~~,CAAA,~~CAAA~~,~~CAAA~~,~~CAAA~~,~~UAAA~~,~~EAAA~~,~~GAAA~~,EAAA,~~gBAAA~~,~~iBAAA~~,~~EAAA~~,~~sBAAA~~,~~EAAA~~,~~IAAA,CAAA,EAC1B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,~~KAAAA,~~CAAMC~~,~~MAAAA~~,~~CAAOC~~,~~WAAWC,EAAAA,CAAGC,KAAAA,CAAMC,GAC7D,CAAC;AAAA,EAAEN;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,~~MAAAA,~~CAAOC,WAAWC,EAAAA,~~CAAGC,~~KAAAA~~,~~CAAME~~,~~GAC5C~~,~~CAAC;AAAA,EAAEP;AAAM,~~CAAA,~~KACrBA~~,~~KAAAA~~,~~CAAMC,MAAMC,MAAAA,CAAOC,UAAAA,CAAWK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWC,SACxC,CAAC~~;~~AAAA~~,~~EAAEX;AAAM~~,~~CAAA~~,~~KAAMA~~,~~MAAMC~~,~~KAAAA,CAAMC,MAAAA,CAAOC,UAAAA,CAAWS,KAAAA,CAAMC,KAGpD,CAAC;AAAA,EAAEb;AAAM,CAAA,KACrBA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWI,KAAK~~;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../../src/components/CrossButton/CrossButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport styles from './CrossButton.module.css';\n\nexport const CrossButton = forwardRef<\n HTMLButtonElement,\n ButtonHTMLAttributes<HTMLButtonElement>\n>(({ type = 'button', className, ...props }, ref) => (\n <EmptyButton\n ref={ref}\n type={type}\n {...props}\n className={cn(styles['cross-button'], className)}\n />\n));\n\nCrossButton.displayName = 'CrossButton';\n"],"names":["CrossButton","forwardRef","type","className","props","ref","jsx","EmptyButton","cn","styles","displayName"],"mappings":";;;;;;;;;;AAKO,MAAMA,WAAAA,GAAcC,iBAGzB,CAAC;AAAA,EAAEC,IAAAA,GAAO,QAAA;AAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,qBAC3CC,cAAA,CAACC,uBAAA,EAAA,EACC,GAAA,EACA,MACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,MAAAA,CAAGC,0BAAAA,CAAO,cAAc,CAAA,EAAGN,SAAS,IAElD;AAEDH,WAAAA,CAAYU,WAAAA,GAAc,aAAA;;;;"}

package/dist/cjs/components/DatePicker/DateRangePicker.cjs CHANGED Viewed

@@ -50,6 +50,7 @@ const DateRangeTableCell = styledComponents.styled(Common.DateTableCell).withCon
     border-radius: 0;
     `);
 const Calendar = ({
+  allowOnlyDatesList,
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
@@ -64,6 +65,11 @@ const Calendar = ({
   const today = utils.shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
   const shiftedStart = startDate ? utils.shiftToTimezone(startDate, timezone) : void 0;
   const shiftedEnd = endDate ? utils.shiftToTimezone(endDate, timezone) : void 0;
+  const shiftedAllowList = react.useMemo(() => {
+    return allowOnlyDatesList?.map((date) => {
+      return utils.shiftToTimezone(date, timezone);
+    });
+  }, [allowOnlyDatesList, timezone]);
   const handleMouseOut = () => {
     setHoveredDate(void 0);
   };
@@ -90,6 +96,9 @@ const Calendar = ({
       if (maxRangeLength > 1 && shiftedStart && !utils.datesAreWithinMaxRange(shiftedStart, fullDate, maxRangeLength) && fullDate > shiftedStart) {
         isDisabled = true;
       }
+      if (utils.isDateNotInAllowList(shiftedAllowList, fullDate)) {
+        isDisabled = true;
+      }
       const shouldShowRangeIndicator = !shiftedEnd && Boolean(shiftedStart && hoveredDate && fullDate > shiftedStart && fullDate < hoveredDate);
       const handleMouseEnter = () => {
         setHoveredDate(fullDate);
@@ -157,6 +166,7 @@ const PredefinedDates = ({
   ] });
 };
 const DateRangePicker = ({
+  allowOnlyDatesList,
   endDate,
   startDate,
   disabled = false,
@@ -246,8 +256,8 @@ const DateRangePicker = ({
     /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Trigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsxRuntime.jsx(Common.DateRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate, timezone }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown.Content, { align: "start", responsivePositioning, children: shouldShowPredefinedDates ? /* @__PURE__ */ jsxRuntime.jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
       /* @__PURE__ */ jsxRuntime.jsx(PredefinedDates, { onSelectDateRange, predefinedDatesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange, timezone }),
-      shouldShowCustomRange && /* @__PURE__ */ jsxRuntime.jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate, timezone }) }) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(Common.CalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate, timezone }) }) })
+      shouldShowCustomRange && /* @__PURE__ */ jsxRuntime.jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { allowOnlyDatesList, calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate, timezone }) }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(Common.CalendarRenderer, { calendarOptions, allowYearMonthSelection: false, selectedDate: selectedStartDate, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { allowOnlyDatesList, calendarBody: body, closeDatepicker: closeDatePicker, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setSelectedDate: handleSelectDate, startDate: selectedStartDate, endDate: selectedEndDate, timezone }) }) })
   ] });
 };