@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as RadixTabs from '@radix-ui/react-tabs';\nimport { styled } from 'styled-components';\nimport { TabsProps } from './Tabs.types';\n\nconst Trigger = styled(RadixTabs.Trigger)`\n  padding: ${props =>\n    `${props.theme.click.tabs.space.y} ${props.theme.click.tabs.space.x}`};\n\n  border-top-left-radius: ${props => props.theme.click.tabs.radii.all};\n  border-top-right-radius: ${props => props.theme.click.tabs.radii.all};\n  border: none;\n  border-bottom: 2px solid ${props => props.theme.click.tabs.basic.color.stroke.default};\n  background-color: ${props => props.theme.click.tabs.basic.color.background.default};\n  color: ${props => props.theme.click.tabs.basic.color.text.default};\n  font: ${props => props.theme.click.tabs.typography.label.default};\n  cursor: pointer;\n\n  &[data-state='active'] {\n    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.color.stroke.active};\n    color: ${props => props.theme.click.tabs.basic.color.text.active};\n    font: ${props => props.theme.click.tabs.typography.label.active};\n    &:hover {\n      font: ${props => props.theme.click.tabs.typography.label.active};\n    }\n  }\n\n  &:hover {\n    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.color.stroke.hover};\n    background-color: ${props => props.theme.click.tabs.basic.color.background.hover};\n    color: ${props => props.theme.click.tabs.basic.color.text.hover};\n    font: ${props => props.theme.click.tabs.typography.label.hover};\n  }\n\n  &:hover[data-state='active'] {\n    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.color.stroke.active};\n  }\n`;\n\nconst Content = styled(RadixTabs.Content)``;\n\nconst TriggersList = styled(RadixTabs.List)`\n  border-bottom: 1px solid ${props => props.theme.click.global.color.stroke.default};\n  display: flex;\n`;\n\nconst Tabs = ({\n  defaultValue,\n  children,\n  ariaLabel,\n  onValueChange,\n  ...delegated\n}: TabsProps) => {\n  return (\n    <RadixTabs.Root\n      aria-label={ariaLabel}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      {...delegated}\n    >\n      {children}\n    </RadixTabs.Root>\n  );\n};\n\nTabs.TriggersList = TriggersList;\nTabs.Trigger = Trigger;\nTabs.Content = Content;\n\nconst FullWidthTabs = styled(Tabs)`\n  width: 100%;\n`;\n\nFullWidthTabs.Trigger = styled(Trigger)<{ width?: string }>`\n  ${props =>\n    props.width\n      ? `width: ${props.width};`\n      : `\n    flex-basis: auto;\n    flex-grow: 1;\n    flex-shrink: 1;\n  `};\n`;\n\nFullWidthTabs.TriggersList = TriggersList;\n\nexport { Tabs, FullWidthTabs };\n"],"names":["Trigger","styled","RadixTabs","withConfig","componentId","props","theme","click","tabs","space","y","x","radii","all","basic","color","stroke","default","background","text","typography","label","active","hover","Content","TriggersList","List","global","Tabs","defaultValue","children","ariaLabel","onValueChange","delegated","jsx","FullWidthTabs","width"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, ElementRef, forwardRef } from 'react';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport { cn, cva } from '@/lib/cva';\nimport { TabsProps } from './Tabs.types';\nimport styles from './Tabs.module.css';\n\nconst fullWidthTriggerVariants = cva(\n  cn(styles.tabs__trigger, styles['full-width-tabs__trigger']),\n  {\n    variants: {\n      width: {\n        fixed: styles['full-width-tabs__trigger_width_fixed'],\n        stretched: styles['full-width-tabs__trigger_width_stretched'],\n      },\n    },\n    defaultVariants: {\n      width: 'stretched',\n    },\n  }\n);\n\nconst Trigger = forwardRef<\n  ElementRef<typeof RadixTabs.Trigger>,\n  ComponentPropsWithoutRef<typeof RadixTabs.Trigger>\n>(({ className, ...props }, ref) => (\n  <RadixTabs.Trigger\n    ref={ref}\n    {...props}\n    className={cn(styles.tabs__trigger, className)}\n  />\n));\n\nconst Content = forwardRef<\n  ElementRef<typeof RadixTabs.Content>,\n  ComponentPropsWithoutRef<typeof RadixTabs.Content>\n>(({ className, ...props }, ref) => (\n  <RadixTabs.Content\n    ref={ref}\n    {...props}\n    className={cn(styles.tabs__content, className)}\n  />\n));\n\nconst TriggersList = forwardRef<\n  ElementRef<typeof RadixTabs.List>,\n  ComponentPropsWithoutRef<typeof RadixTabs.List>\n>(({ className, ...props }, ref) => (\n  <RadixTabs.List\n    ref={ref}\n    {...props}\n    className={cn(styles['tabs__triggers-list'], className)}\n  />\n));\n\nconst Tabs = ({\n  defaultValue,\n  children,\n  ariaLabel,\n  onValueChange,\n  ...delegated\n}: TabsProps) => {\n  return (\n    <RadixTabs.Root\n      aria-label={ariaLabel}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      {...delegated}\n    >\n      {children}\n    </RadixTabs.Root>\n  );\n};\n\nTabs.TriggersList = TriggersList;\nTabs.Trigger = Trigger;\nTabs.Content = Content;\n\nconst FullWidthTabs = ({ className, ...props }: TabsProps) => (\n  <Tabs\n    {...props}\n    className={cn(styles['full-width-tabs'], className)}\n  />\n);\n\nconst FullWidthTabsTrigger = forwardRef<\n  ElementRef<typeof RadixTabs.Trigger>,\n  ComponentPropsWithoutRef<typeof RadixTabs.Trigger> & { width?: string }\n>(({ className, width, style, ...props }, ref) => (\n  <RadixTabs.Trigger\n    ref={ref}\n    {...props}\n    style={\n      width\n        ? ({ ...style, '--full-width-tabs-trigger-width': width } as CSSProperties)\n        : style\n    }\n    className={cn(\n      fullWidthTriggerVariants({ width: width ? 'fixed' : 'stretched' }),\n      className\n    )}\n  />\n));\n\nFullWidthTabs.Trigger = FullWidthTabsTrigger;\nFullWidthTabs.TriggersList = TriggersList;\nFullWidthTabs.Content = Content;\n\nexport { Tabs, FullWidthTabs };\n"],"names":["fullWidthTriggerVariants","cva","cn","styles","tabs__trigger","variants","width","fixed","stretched","defaultVariants","Trigger","forwardRef","className","props","ref","jsx","RadixTabs","Content","tabs__content","TriggersList","Tabs","defaultValue","children","ariaLabel","onValueChange","delegated","FullWidthTabs","FullWidthTabsTrigger","style"],"mappings":"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"}

package/dist/cjs/components/Tooltip/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixTooltip = require('@radix-ui/react-tooltip');
 const styledComponents = require('styled-components');
+const PortalContext = require('../../providers/PortalContext.cjs');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -65,9 +66,11 @@ const TooltipContent = ({
   children,
   sideOffset = 6,
   maxWidth,
+  container,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { as: RadixTooltip__namespace.Arrow, width: 20, height: 8 }),
     children
   ] }) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\nimport { TooltipProps } from './Tooltip.types';\n\nexport const Tooltip = ({ children, open, disabled, ...props }: TooltipProps) => {\n  return (\n    <RadixTooltip.Root\n      open={disabled ? false : open}\n      {...props}\n    >\n      {children}\n    </RadixTooltip.Root>\n  );\n};\n\nconst TooltipTrigger = (props: HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <RadixTooltip.Trigger asChild>\n      <div {...props} />\n    </RadixTooltip.Trigger>\n  );\n};\nTooltipTrigger.displayName = 'TooltipTrigger';\nTooltip.Trigger = TooltipTrigger;\ninterface TooltipContentProps extends RadixTooltip.TooltipContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Maximum width of the tooltip content */\n  maxWidth?: string;\n}\n\nconst RadixTooltipContent = styled(RadixTooltip.Content)<{ $maxWidth?: string }>`\n  display: flex;\n  align-items: flex-start;\n  ${({ theme, $maxWidth }) => `\n    padding: ${theme.click.tooltip.space.y} ${theme.click.tooltip.space.x};\n    color: ${theme.click.tooltip.color.label.default};\n    background: ${theme.click.tooltip.color.background.default};\n    border-radius: ${theme.click.tooltip.radii.all};\n    font: ${theme.click.tooltip.typography.label.default};\n    white-space: pre-wrap;\n    ${$maxWidth && `max-width: ${$maxWidth}`};\n  `}\n`;\n\nconst Arrow = styled.svg`\n  ${({ theme }) => `\n    fill: ${theme.click.tooltip.color.background.default};\n  `};\n`;\n\nconst TooltipContent = ({\n  showArrow,\n  children,\n  sideOffset = 6,\n  maxWidth,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <RadixTooltip.Portal>\n      <RadixTooltipContent\n        sideOffset={sideOffset}\n        $maxWidth={maxWidth}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            as={RadixTooltip.Arrow}\n            width={20}\n            height={8}\n          />\n        )}\n        {children}\n      </RadixTooltipContent>\n    </RadixTooltip.Portal>\n  );\n};\nTooltipContent.displayName = 'TooltipContent';\nTooltip.Content = TooltipContent;\n"],"names":["Tooltip","children","open","disabled","props","jsx","RadixTooltip","TooltipTrigger","displayName","Trigger","RadixTooltipContent","styled","Content","withConfig","componentId","theme","$maxWidth","click","tooltip","space","y","x","color","label","default","background","radii","all","typography","Arrow","svg","TooltipContent","showArrow","sideOffset","maxWidth","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport { TooltipContentProps, TooltipProps } from './Tooltip.types';\n\nexport const Tooltip = ({ children, open, disabled, ...props }: TooltipProps) => {\n  return (\n    <RadixTooltip.Root\n      open={disabled ? false : open}\n      {...props}\n    >\n      {children}\n    </RadixTooltip.Root>\n  );\n};\n\nconst TooltipTrigger = (props: HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <RadixTooltip.Trigger asChild>\n      <div {...props} />\n    </RadixTooltip.Trigger>\n  );\n};\nTooltipTrigger.displayName = 'TooltipTrigger';\nTooltip.Trigger = TooltipTrigger;\nconst RadixTooltipContent = styled(RadixTooltip.Content)<{ $maxWidth?: string }>`\n  display: flex;\n  align-items: flex-start;\n  ${({ theme, $maxWidth }) => `\n    padding: ${theme.click.tooltip.space.y} ${theme.click.tooltip.space.x};\n    color: ${theme.click.tooltip.color.label.default};\n    background: ${theme.click.tooltip.color.background.default};\n    border-radius: ${theme.click.tooltip.radii.all};\n    font: ${theme.click.tooltip.typography.label.default};\n    white-space: pre-wrap;\n    ${$maxWidth && `max-width: ${$maxWidth}`};\n  `}\n`;\n\nconst Arrow = styled.svg`\n  ${({ theme }) => `\n    fill: ${theme.click.tooltip.color.background.default};\n  `};\n`;\n\nconst TooltipContent = ({\n  showArrow,\n  children,\n  sideOffset = 6,\n  maxWidth,\n  container,\n  ...props\n}: TooltipContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixTooltip.Portal container={portalContainer}>\n      <RadixTooltipContent\n        sideOffset={sideOffset}\n        $maxWidth={maxWidth}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            as={RadixTooltip.Arrow}\n            width={20}\n            height={8}\n          />\n        )}\n        {children}\n      </RadixTooltipContent>\n    </RadixTooltip.Portal>\n  );\n};\nTooltipContent.displayName = 'TooltipContent';\nTooltip.Content = TooltipContent;\n"],"names":["Tooltip","children","open","disabled","props","jsx","RadixTooltip","TooltipTrigger","displayName","Trigger","RadixTooltipContent","styled","Content","withConfig","componentId","theme","$maxWidth","click","tooltip","space","y","x","color","label","default","background","radii","all","typography","Arrow","svg","TooltipContent","showArrow","sideOffset","maxWidth","container","portalContainer","useResolvedPortalContainer","jsxs"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -84,7 +84,9 @@ const Text = require('./components/Text/index.cjs');
 const Title = require('./components/Title/index.cjs');
 const VerticalStepper = require('./components/VerticalStepper/index.cjs');
 const ClickUIProvider = require('./providers/ClickUIProvider.cjs');
+const PortalProvider = require('./providers/PortalProvider.cjs');
 const ThemeProvider = require('./providers/ThemeProvider.cjs');
+const PortalContext = require('./providers/PortalContext.cjs');
 
 
 
@@ -180,5 +182,8 @@ exports.Text = Text.Text;
 exports.Title = Title.Title;
 exports.VerticalStepper = VerticalStepper.VerticalStepper;
 exports.ClickUIProvider = ClickUIProvider.ClickUIProvider;
+exports.PortalProvider = PortalProvider.PortalProvider;
 exports.ThemeProvider = ThemeProvider.ThemeProvider;
+exports.usePortalContainer = PortalContext.usePortalContainer;
+exports.useResolvedPortalContainer = PortalContext.useResolvedPortalContainer;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

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

package/dist/cjs/providers/PortalContext.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const PortalContainerContext = react.createContext(null);
+const usePortalContainer = () => {
+  return react.useContext(PortalContainerContext);
+};
+const useResolvedPortalContainer = (container) => {
+  const contextContainer = usePortalContainer();
+  return container === void 0 ? contextContainer : container;
+};
+
+exports.PortalContainerContext = PortalContainerContext;
+exports.usePortalContainer = usePortalContainer;
+exports.useResolvedPortalContainer = useResolvedPortalContainer;
+//# sourceMappingURL=PortalContext.cjs.map

package/dist/cjs/providers/PortalContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalContext.cjs","sources":["../../../src/providers/PortalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type PortalContainer = HTMLElement | null;\n\nexport const PortalContainerContext = createContext<PortalContainer>(null);\n\nexport const usePortalContainer = (): PortalContainer => {\n  return useContext(PortalContainerContext);\n};\n\nexport const useResolvedPortalContainer = (\n  container?: PortalContainer\n): PortalContainer => {\n  const contextContainer = usePortalContainer();\n\n  return container === undefined ? contextContainer : container;\n};\n"],"names":["PortalContainerContext","createContext","usePortalContainer","useContext","useResolvedPortalContainer","container","contextContainer","undefined"],"mappings":";;;;;;AAIO,MAAMA,sBAAAA,GAAyBC,oBAA+B,IAAI;AAElE,MAAMC,qBAAqBA,MAAuB;AACvD,EAAA,OAAOC,iBAAWH,sBAAsB,CAAA;AAC1C;AAEO,MAAMI,0BAAAA,GAA6BA,CACxCC,SAAAA,KACoB;AACpB,EAAA,MAAMC,mBAAmBJ,kBAAAA,EAAmB;AAE5C,EAAA,OAAOG,SAAAA,KAAcE,SAAYD,gBAAAA,GAAmBD,SAAAA;AACtD;;;;;;"}

package/dist/cjs/providers/PortalProvider.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const PortalContext = require('./PortalContext.cjs');
+
+const PortalProvider = ({
+  children,
+  container = null
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.PortalContainerContext.Provider, { value: container, children });
+};
+
+exports.PortalProvider = PortalProvider;
+//# sourceMappingURL=PortalProvider.cjs.map

package/dist/cjs/providers/PortalProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalProvider.cjs","sources":["../../../src/providers/PortalProvider.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { PortalContainerContext, type PortalContainer } from './PortalContext';\n\nexport interface PortalProviderProps {\n  children: ReactNode;\n  container?: PortalContainer;\n}\n\nexport const PortalProvider = ({\n  children,\n  container = null,\n}: PortalProviderProps): ReactElement => {\n  return (\n    <PortalContainerContext.Provider value={container}>\n      {children}\n    </PortalContainerContext.Provider>\n  );\n};\n"],"names":["PortalProvider","children","container","PortalContainerContext"],"mappings":";;;;;;;AAQO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC,QAAAA;AAAAA,EACAC,SAAAA,GAAY;AACO,CAAA,KAAoB;AACvC,EAAA,sCACGC,oCAAA,CAAuB,QAAA,EAAvB,EAAgC,KAAA,EAAOD,WACrCD,QAAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/cjs/theme/styles/tokens-dark.css

@@ -367,6 +367,11 @@
   --click-button-group-space-button-default-x: 0.75rem;
   --click-button-group-space-button-borderless-y: 5.5px;
   --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-space-icon-default-y: 3px;
+  --click-button-group-space-icon-default-x: 1rem;
+  --click-button-group-space-icon-borderless-y: 5.5px;
+  --click-button-group-space-icon-borderless-x: 1rem;
+  --click-button-group-icon-size-all: 1rem;
   --click-button-group-color-background-default: rgba(0, 0, 0, 0);
   --click-button-group-color-background-hover: #282828;
   --click-button-group-color-background-active: #414141;

package/dist/cjs/theme/styles/tokens-light.css

@@ -368,6 +368,11 @@
   --click-button-group-space-button-default-x: 0.75rem;
   --click-button-group-space-button-borderless-y: 5.5px;
   --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-space-icon-default-y: 3px;
+  --click-button-group-space-icon-default-x: 1rem;
+  --click-button-group-space-icon-borderless-y: 5.5px;
+  --click-button-group-space-icon-borderless-x: 1rem;
+  --click-button-group-icon-size-all: 1rem;
   --click-button-group-color-background-default: rgba(0, 0, 0, 0);
   --click-button-group-color-background-hover: #f6f7fa;
   --click-button-group-color-background-active: lch(95.274 1.5364 271.98);

package/dist/cjs/theme/tokens/variables.dark.cjs

@@ -772,6 +772,21 @@ const theme = {
               y: "5.5px",
               x: "1rem"
             }
+          },
+          icon: {
+            default: {
+              y: "3px",
+              x: "1rem"
+            },
+            borderless: {
+              y: "5.5px",
+              x: "1rem"
+            }
+          }
+        },
+        icon: {
+          size: {
+            all: "1rem"
           }
         },
         color: {