@clickhouse/click-ui 0.6.1 → 0.6.2-rc1

package/dist/esm/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","FullWidthTabs","width"],"mappings":"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"}
+{"version":3,"file":"index.js","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","Content","tabs__content","TriggersList","Tabs","defaultValue","children","ariaLabel","onValueChange","delegated","FullWidthTabs","FullWidthTabsTrigger","style"],"mappings":"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"}

package/dist/esm/components/Tooltip/index.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { styled } from 'styled-components';
+import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 
 const Tooltip = ({
   children,
@@ -41,9 +42,11 @@ const TooltipContent = ({
   children,
   sideOffset = 6,
   maxWidth,
+  container,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
+  const portalContainer = useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsx(RadixTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RadixTooltipContent, { sideOffset, $maxWidth: maxWidth, ...props, children: [
     showArrow && /* @__PURE__ */ jsx(Arrow, { as: RadixTooltip.Arrow, width: 20, height: 8 }),
     children
   ] }) });

package/dist/esm/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","TooltipTrigger","displayName","Trigger","RadixTooltipContent","styled","RadixTooltip","Content","withConfig","componentId","theme","$maxWidth","click","tooltip","space","y","x","color","label","default","background","radii","all","typography","Arrow","svg","TooltipContent","showArrow","sideOffset","maxWidth"],"mappings":"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"}
+{"version":3,"file":"index.js","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","TooltipTrigger","displayName","Trigger","RadixTooltipContent","styled","RadixTooltip","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"],"mappings":"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"}

package/dist/esm/index.js

@@ -80,5 +80,7 @@ export { Text } from './components/Text/index.js';
 export { Title } from './components/Title/index.js';
 export { VerticalStepper } from './components/VerticalStepper/index.js';
 export { ClickUIProvider } from './providers/ClickUIProvider.js';
+export { PortalProvider } from './providers/PortalProvider.js';
 export { ThemeProvider } from './providers/ThemeProvider.js';
+export { usePortalContainer, useResolvedPortalContainer } from './providers/PortalContext.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/providers/PortalContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+const PortalContainerContext = createContext(null);
+const usePortalContainer = () => {
+  return useContext(PortalContainerContext);
+};
+const useResolvedPortalContainer = (container) => {
+  const contextContainer = usePortalContainer();
+  return container === void 0 ? contextContainer : container;
+};
+
+export { PortalContainerContext, usePortalContainer, useResolvedPortalContainer };
+//# sourceMappingURL=PortalContext.js.map

package/dist/esm/providers/PortalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalContext.js","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,cAA+B,IAAI;AAElE,MAAMC,qBAAqBA,MAAuB;AACvD,EAAA,OAAOC,WAAWH,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/esm/providers/PortalProvider.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { PortalContainerContext } from './PortalContext.js';
+
+const PortalProvider = ({
+  children,
+  container = null
+}) => {
+  return /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container, children });
+};
+
+export { PortalProvider };
+//# sourceMappingURL=PortalProvider.js.map

package/dist/esm/providers/PortalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalProvider.js","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"],"mappings":";;;AAQO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC,QAAAA;AAAAA,EACAC,SAAAA,GAAY;AACO,CAAA,KAAoB;AACvC,EAAA,2BACG,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,KAAA,EAAOA,WACrCD,QAAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/esm/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/esm/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/esm/theme/tokens/variables.dark.js

@@ -768,6 +768,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: {