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

package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.css

@@ -0,0 +1,76 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+.wrapper__ey0v7 {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+   same width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the title fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  padding: 0;
+  padding-left: var(--title-pad-left);
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  white-space: nowrap;
+
+  /* Not collapsible by default: reserve the icon-column width on the left.
+     The single-class modifiers below override this; keep these defaults at
+     single-class specificity so they can. */
+  --title-pad-left: var(--click-image-sm-size-width);
+}
+
+/* Doubled class → specificity (0,2,0). SidebarCollapsibleTitle renders this
+   wrapper `as={Collapsible.Trigger}`, so the element also carries
+   `.collapsible__trigger`, whose `display/align-items/color/font/cursor`
+   resets would otherwise win on CSS-module bundle order and strip the title's
+   own typography. The original styled-components cascade resolved in the
+   title's favour; the doubled class makes that deterministic. Only the
+   properties that actually conflict with the trigger live here — box metrics
+   and the `--title-*` custom properties stay single-class above/below so the
+   `type`/`collapsible` modifiers still override them. */
+.wrapper__ey0v7.wrapper__ey0v7 {
+  display: inline-flex;
+  align-items: center;
+  color: var(--title-color-default);
+  font: var(--click-sidebar-navigation-title-typography-default);
+  cursor: pointer;
+}
+
+.wrapper__ey0v7.wrapper__ey0v7:hover {
+  color: var(--title-color-hover);
+  font: var(--click-sidebar-navigation-title-typography-hover);
+}
+
+.wrapper__ey0v7.wrapper__ey0v7:active,
+.wrapper__ey0v7.wrapper__ey0v7[data-state='open'],
+.wrapper__ey0v7.wrapper__ey0v7[data-selected='true'] {
+  color: var(--title-color-active);
+  font: var(--click-sidebar-navigation-title-typography-active);
+}
+
+.wrapper__ey0v7 a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.wrapper__ey0v7 a:active {
+  color: inherit;
+}
+
+.wrapper_type_main__wvTIv {
+  --title-color-default: var(--click-sidebar-main-navigation-title-color-default);
+  --title-color-hover: var(--click-sidebar-main-navigation-title-color-hover);
+  --title-color-active: var(--click-sidebar-main-navigation-title-color-active);
+}
+
+.wrapper_type_sql-sidebar__J-qle {
+  --title-color-default: var(--click-sidebar-sqlSidebar-navigation-title-color-default);
+  --title-color-hover: var(--click-sidebar-sqlSidebar-navigation-title-color-hover);
+  --title-color-active: var(--click-sidebar-sqlSidebar-navigation-title-color-active);
+}
+
+.wrapper_collapsible_true__8ANnP {
+  --title-pad-left: 0;
+}

package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.js

@@ -0,0 +1,12 @@
+const wrapper = "wrapper__ey0v7";
+const wrapper_type_main = "wrapper_type_main__wvTIv";
+const wrapper_collapsible_true = "wrapper_collapsible_true__8ANnP";
+const styles = {
+	wrapper: wrapper,
+	wrapper_type_main: wrapper_type_main,
+	"wrapper_type_sql-sidebar": "wrapper_type_sql-sidebar__J-qle",
+	wrapper_collapsible_true: wrapper_collapsible_true
+};
+
+export { styles as default, wrapper, wrapper_collapsible_true, wrapper_type_main };
+//# sourceMappingURL=SidebarNavigationTitle.module.css.js.map

package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.js.map

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

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

@@ -1,7 +1,41 @@
+import "./SidebarNavigationTitle.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cva.js';
 import { IconWrapper } from '../Collapsible/IconWrapper.js';
+import styles from './SidebarNavigationTitle.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const wrapperVariants = cva(styles.wrapper, {
+  variants: {
+    type: {
+      main: styles.wrapper_type_main,
+      sqlSidebar: styles["wrapper_type_sql-sidebar"]
+    },
+    collapsible: {
+      true: styles.wrapper_collapsible_true,
+      false: ""
+    }
+  },
+  defaultVariants: {
+    type: "main",
+    collapsible: false
+  }
+});
+const _SidebarTitleWrapper = ({
+  as,
+  $collapsible = false,
+  $type = "main",
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "button";
+  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(wrapperVariants({
+    type: $type,
+    collapsible: $collapsible
+  }), className) });
+};
+const SidebarTitleWrapper = forwardRef(_SidebarTitleWrapper);
 const SidebarNavigationTitle = ({
   label,
   icon,
@@ -12,28 +46,6 @@ const SidebarNavigationTitle = ({
 }) => {
   return /* @__PURE__ */ jsx(SidebarTitleWrapper, { "data-selected": selected, $type: type, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children: label }) });
 };
-const SidebarTitleWrapper = styled.button.withConfig({
-  componentId: "sc-1rg1a4o-0"
-})(["display:inline-flex;align-items:center;background:transparent;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;cursor:pointer;", " a{color:inherit;text-decoration:none;&:active{color:inherit;}}"], ({
-  theme,
-  $collapsible = false,
-  $type
-}) => `
-    padding: 0;
-    padding-left: ${$collapsible ? 0 : theme.click.image.sm.size.width};
-    font: ${theme.click.sidebar.navigation.title.typography.default};
-    color: ${theme.click.sidebar[$type].navigation.title.color.default};
-
-    &:hover {
-      font: ${theme.click.sidebar.navigation.title.typography.hover};
-      color: ${theme.click.sidebar[$type].navigation.title.color.hover};
-    }
-
-    &:active, &[data-state="open"], &[data-selected="true"] {
-      font: ${theme.click.sidebar.navigation.title.typography.active};
-      color: ${theme.click.sidebar[$type].navigation.title.color.active};
-    }
-  `);
 
 export { SidebarNavigationTitle, SidebarTitleWrapper };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarNavigationTitle/SidebarNavigationTitle.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationTitleProps } from './SidebarNavigationTitle.types';\n\nexport const SidebarNavigationTitle = ({\n  label,\n  icon,\n  iconDir,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarNavigationTitleProps) => {\n  return (\n    <SidebarTitleWrapper\n      data-selected={selected}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {label}\n      </IconWrapper>\n    </SidebarTitleWrapper>\n  );\n};\nexport const SidebarTitleWrapper = styled.button<{\n  $collapsible?: boolean;\n  $type: 'main' | 'sqlSidebar';\n}>`\n  display: inline-flex;\n  align-items: center;\n  background: transparent;\n  border: none;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: pointer;\n  ${({ theme, $collapsible = false, $type }) => `\n    padding: 0;\n    padding-left: ${$collapsible ? 0 : theme.click.image.sm.size.width};\n    font: ${theme.click.sidebar.navigation.title.typography.default};\n    color: ${theme.click.sidebar[$type].navigation.title.color.default};\n\n    &:hover {\n      font: ${theme.click.sidebar.navigation.title.typography.hover};\n      color: ${theme.click.sidebar[$type].navigation.title.color.hover};\n    }\n\n    &:active, &[data-state=\"open\"], &[data-selected=\"true\"] {\n      font: ${theme.click.sidebar.navigation.title.typography.active};\n      color: ${theme.click.sidebar[$type].navigation.title.color.active};\n    }\n  `}\n\n  a {\n    color: inherit;\n    text-decoration: none;\n\n    &:active {\n      color: inherit;\n    }\n  }\n`;\n"],"names":["SidebarNavigationTitle","label","icon","iconDir","selected","type","props","SidebarTitleWrapper","styled","button","withConfig","componentId","theme","$collapsible","$type","click","image","sm","size","width","sidebar","navigation","title","typography","default","color","hover","active"],"mappings":";;;;AAIO,MAAMA,yBAAyBA,CAAC;AAAA,EACrCC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGC;AACwB,CAAA,KAAM;AACjC,EAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EACC,eAAA,EAAeF,QAAAA,EACf,KAAA,EAAOC,IAAAA,EACP,GAAIC,KAAAA,EAEJ,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EAECL,iBACH,CAAA,EACF,CAAA;AAEJ;AACO,MAAMM,mBAAAA,GAAsBC,MAAAA,CAAOC,MAAAA,CAAMC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yMAAA,EAAA,iEAAA,GAe5C,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,YAAAA,GAAe,KAAA;AAAA,EAAOC;AAAM,CAAA,KAAM;AAAA;AAAA,kBAAA,EAE5BD,eAAe,CAAA,GAAID,KAAAA,CAAMG,MAAMC,KAAAA,CAAMC,EAAAA,CAAGC,KAAKC,KAAK,CAAA;AAAA,UAAA,EAC1DP,MAAMG,KAAAA,CAAMK,OAAAA,CAAQC,UAAAA,CAAWC,KAAAA,CAAMC,WAAWC,OAAO,CAAA;AAAA,WAAA,EACtDZ,KAAAA,CAAMG,MAAMK,OAAAA,CAAQN,KAAK,EAAEO,UAAAA,CAAWC,KAAAA,CAAMG,MAAMD,OAAO,CAAA;;AAAA;AAAA,YAAA,EAGxDZ,MAAMG,KAAAA,CAAMK,OAAAA,CAAQC,UAAAA,CAAWC,KAAAA,CAAMC,WAAWG,KAAK,CAAA;AAAA,aAAA,EACpDd,KAAAA,CAAMG,MAAMK,OAAAA,CAAQN,KAAK,EAAEO,UAAAA,CAAWC,KAAAA,CAAMG,MAAMC,KAAK,CAAA;AAAA;;AAAA;AAAA,YAAA,EAIxDd,MAAMG,KAAAA,CAAMK,OAAAA,CAAQC,UAAAA,CAAWC,KAAAA,CAAMC,WAAWI,MAAM,CAAA;AAAA,aAAA,EACrDf,KAAAA,CAAMG,MAAMK,OAAAA,CAAQN,KAAK,EAAEO,UAAAA,CAAWC,KAAAA,CAAMG,MAAME,MAAM,CAAA;AAAA;AAAA,EAAA,CAEpE;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarNavigationTitle/SidebarNavigationTitle.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationTitleProps } from './SidebarNavigationTitle.types';\nimport styles from './SidebarNavigationTitle.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    type: {\n      main: styles.wrapper_type_main,\n      sqlSidebar: styles['wrapper_type_sql-sidebar'],\n    },\n    collapsible: { true: styles.wrapper_collapsible_true, false: '' },\n  },\n  defaultVariants: { type: 'main', collapsible: false },\n});\n\n// Polymorphic wrapper: SidebarCollapsibleTitle renders it `as={Collapsible.Trigger}`.\n// Same shape as the Container polymorphic component (src/components/Container).\nexport interface SidebarTitleWrapperProps<T extends ElementType = 'button'> {\n  as?: T;\n  $collapsible?: boolean;\n  $type?: 'main' | 'sqlSidebar';\n}\n\ntype SidebarTitleWrapperComponent = <T extends ElementType = 'button'>(\n  props: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> &\n    SidebarTitleWrapperProps<T>\n) => ReactNode;\n\nconst _SidebarTitleWrapper = <T extends ElementType = 'button'>(\n  {\n    as,\n    $collapsible = false,\n    $type = 'main',\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> &\n    SidebarTitleWrapperProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'button';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        wrapperVariants({ type: $type, collapsible: $collapsible }),\n        className\n      )}\n    />\n  );\n};\n\nexport const SidebarTitleWrapper: SidebarTitleWrapperComponent =\n  forwardRef(_SidebarTitleWrapper);\n\nexport const SidebarNavigationTitle = ({\n  label,\n  icon,\n  iconDir,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarNavigationTitleProps) => {\n  return (\n    <SidebarTitleWrapper\n      data-selected={selected}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {label}\n      </IconWrapper>\n    </SidebarTitleWrapper>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","type","main","wrapper_type_main","sqlSidebar","collapsible","true","wrapper_collapsible_true","false","defaultVariants","_SidebarTitleWrapper","as","$collapsible","$type","className","props","ref","Component","cn","SidebarTitleWrapper","forwardRef","SidebarNavigationTitle","label","icon","iconDir","selected"],"mappings":";;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,GAAAA,CAAIC,MAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,MAAMJ,MAAAA,CAAOK,iBAAAA;AAAAA,MACbC,UAAAA,EAAYN,OAAO,0BAA0B;AAAA,KAC/C;AAAA,IACAO,WAAAA,EAAa;AAAA,MAAEC,MAAMR,MAAAA,CAAOS,wBAAAA;AAAAA,MAA0BC,KAAAA,EAAO;AAAA;AAAG,GAClE;AAAA,EACAC,eAAAA,EAAiB;AAAA,IAAER,IAAAA,EAAM,MAAA;AAAA,IAAQI,WAAAA,EAAa;AAAA;AAChD,CAAC,CAAA;AAeD,MAAMK,uBAAuB,CAC3B;AAAA,EACEC,EAAAA;AAAAA,EACAC,YAAAA,GAAe,KAAA;AAAA,EACfC,KAAAA,GAAQ,MAAA;AAAA,EACRC,SAAAA;AAAAA,EACA,GAAGC;AAEuB,CAAA,EAC5BC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYN,EAAAA,IAAM,QAAA;AACxB,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,KACII,KAAAA,EACJ,SAAA,EAAWG,GACTtB,eAAAA,CAAgB;AAAA,IAAEK,IAAAA,EAAMY,KAAAA;AAAAA,IAAOR,WAAAA,EAAaO;AAAAA,GAAc,CAAA,EAC1DE,SACF,CAAA,EAAE,CAAA;AAGR,CAAA;AAEO,MAAMK,mBAAAA,GACXC,WAAWV,oBAAoB;AAE1B,MAAMW,yBAAyBA,CAAC;AAAA,EACrCC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAxB,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGc;AACwB,CAAA,KAAM;AACjC,EAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EACC,eAAA,EAAeU,QAAAA,EACf,KAAA,EAAOxB,IAAAA,EACP,GAAIc,KAAAA,EAEJ,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EAECO,iBACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/Tabs/Tabs.css

@@ -0,0 +1,54 @@
+.tabs__trigger__JHqK4 {
+  padding: var(--click-tabs-space-y) var(--click-tabs-space-x);
+  border: none;
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-default);
+  background-color: var(--click-tabs-basic-color-background-default);
+  color: var(--click-tabs-basic-color-text-default);
+  font: var(--click-tabs-typography-label-default);
+  cursor: pointer;
+  border-top-left-radius: var(--click-tabs-radii-all);
+  border-top-right-radius: var(--click-tabs-radii-all);
+}
+
+.tabs__trigger__JHqK4[data-state='active'] {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-active);
+  color: var(--click-tabs-basic-color-text-active);
+  font: var(--click-tabs-typography-label-active);
+}
+
+.tabs__trigger__JHqK4:hover {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-hover);
+  background-color: var(--click-tabs-basic-color-background-hover);
+  color: var(--click-tabs-basic-color-text-hover);
+  font: var(--click-tabs-typography-label-hover);
+}
+
+.tabs__trigger__JHqK4:hover[data-state='active'] {
+  border-bottom: 2px solid var(--click-tabs-basic-color-stroke-active);
+  font: var(--click-tabs-typography-label-active);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.tabs__content__O9Cub {
+}
+
+.tabs__triggers-list__9Hz3q {
+  display: flex;
+  border-bottom: 1px solid var(--click-global-color-stroke-default);
+}
+
+.full-width-tabs__VaUSf {
+  width: 100%;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.full-width-tabs__trigger__LA8iG {
+}
+
+.full-width-tabs__trigger_width_stretched__Q31k- {
+  flex: 1 1 auto;
+}
+
+.full-width-tabs__trigger_width_fixed__U9z-W {
+  width: var(--full-width-tabs-trigger-width);
+}

package/dist/esm/components/Tabs/Tabs.module.css.js

@@ -0,0 +1,14 @@
+const tabs__trigger = "tabs__trigger__JHqK4";
+const tabs__content = "tabs__content__O9Cub";
+const styles = {
+	tabs__trigger: tabs__trigger,
+	tabs__content: tabs__content,
+	"tabs__triggers-list": "tabs__triggers-list__9Hz3q",
+	"full-width-tabs": "full-width-tabs__VaUSf",
+	"full-width-tabs__trigger": "full-width-tabs__trigger__LA8iG",
+	"full-width-tabs__trigger_width_stretched": "full-width-tabs__trigger_width_stretched__Q31k-",
+	"full-width-tabs__trigger_width_fixed": "full-width-tabs__trigger_width_fixed__U9z-W"
+};
+
+export { styles as default, tabs__content, tabs__trigger };
+//# sourceMappingURL=Tabs.module.css.js.map

package/dist/esm/components/Tabs/Tabs.module.css.js.map

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

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

@@ -1,16 +1,34 @@
+import "./Tabs.css";
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import * as RadixTabs from '@radix-ui/react-tabs';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Tabs.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const Trigger = styled(RadixTabs.Trigger).withConfig({
-  componentId: "sc-tj736u-0"
-})(["padding:", ";border-top-left-radius:", ";border-top-right-radius:", ";border:none;border-bottom:2px solid ", ";background-color:", ";color:", ";font:", ";cursor:pointer;&[data-state='active']{border-bottom:2px solid ", ";color:", ";font:", ";&:hover{font:", ";}}&:hover{border-bottom:2px solid ", ";background-color:", ";color:", ";font:", ";}&:hover[data-state='active']{border-bottom:2px solid ", ";}"], (props) => `${props.theme.click.tabs.space.y} ${props.theme.click.tabs.space.x}`, (props) => props.theme.click.tabs.radii.all, (props) => props.theme.click.tabs.radii.all, (props) => props.theme.click.tabs.basic.color.stroke.default, (props) => props.theme.click.tabs.basic.color.background.default, (props) => props.theme.click.tabs.basic.color.text.default, (props) => props.theme.click.tabs.typography.label.default, (props) => props.theme.click.tabs.basic.color.stroke.active, (props) => props.theme.click.tabs.basic.color.text.active, (props) => props.theme.click.tabs.typography.label.active, (props) => props.theme.click.tabs.typography.label.active, (props) => props.theme.click.tabs.basic.color.stroke.hover, (props) => props.theme.click.tabs.basic.color.background.hover, (props) => props.theme.click.tabs.basic.color.text.hover, (props) => props.theme.click.tabs.typography.label.hover, (props) => props.theme.click.tabs.basic.color.stroke.active);
-const Content = styled(RadixTabs.Content).withConfig({
-  componentId: "sc-tj736u-1"
-})([""]);
-const TriggersList = styled(RadixTabs.List).withConfig({
-  componentId: "sc-tj736u-2"
-})(["border-bottom:1px solid ", ";display:flex;"], (props) => props.theme.click.global.color.stroke.default);
+const fullWidthTriggerVariants = cva(cn(styles.tabs__trigger, styles["full-width-tabs__trigger"]), {
+  variants: {
+    width: {
+      fixed: styles["full-width-tabs__trigger_width_fixed"],
+      stretched: styles["full-width-tabs__trigger_width_stretched"]
+    }
+  },
+  defaultVariants: {
+    width: "stretched"
+  }
+});
+const Trigger = forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, ...props, className: cn(styles.tabs__trigger, className) }));
+const Content = forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(RadixTabs.Content, { ref, ...props, className: cn(styles.tabs__content, className) }));
+const TriggersList = forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(RadixTabs.List, { ref, ...props, className: cn(styles["tabs__triggers-list"], className) }));
 const Tabs = ({
   defaultValue,
   children,
@@ -23,17 +41,24 @@ const Tabs = ({
 Tabs.TriggersList = TriggersList;
 Tabs.Trigger = Trigger;
 Tabs.Content = Content;
-const FullWidthTabs = styled(Tabs).withConfig({
-  componentId: "sc-tj736u-3"
-})(["width:100%;"]);
-FullWidthTabs.Trigger = styled(Trigger).withConfig({
-  componentId: "sc-tj736u-4"
-})(["", ";"], (props) => props.width ? `width: ${props.width};` : `
-    flex-basis: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-  `);
+const FullWidthTabs = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Tabs, { ...props, className: cn(styles["full-width-tabs"], className) });
+const FullWidthTabsTrigger = forwardRef(({
+  className,
+  width,
+  style,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, ...props, style: width ? {
+  ...style,
+  "--full-width-tabs-trigger-width": width
+} : style, className: cn(fullWidthTriggerVariants({
+  width: width ? "fixed" : "stretched"
+}), className) }));
+FullWidthTabs.Trigger = FullWidthTabsTrigger;
 FullWidthTabs.TriggersList = TriggersList;
+FullWidthTabs.Content = Content;
 
 export { FullWidthTabs, Tabs };
 //# sourceMappingURL=index.js.map

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: {