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

package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.module.css.cjs.map

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

package/dist/cjs/components/SidebarNavigationItem/index.cjs

@@ -1,12 +1,71 @@
+require("./SidebarNavigationItem.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const IconWrapper = require('../Collapsible/IconWrapper.cjs');
+const SidebarNavigationItem_module = require('./SidebarNavigationItem.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
+const wrapperVariants = classVarianceAuthority.cva(SidebarNavigationItem_module.default.wrapper, {
+  variants: {
+    itemType: {
+      item: SidebarNavigationItem_module.default.wrapper_itemtype_item,
+      subItem: SidebarNavigationItem_module.default["wrapper_itemtype_sub-item"]
+    },
+    // The colour set depends on BOTH the sidebar type and the item depth, so
+    // it is applied through the compoundVariants below rather than here.
+    type: {
+      main: "",
+      sqlSidebar: ""
+    },
+    collapsible: {
+      true: SidebarNavigationItem_module.default.wrapper_collapsible_true,
+      false: ""
+    }
+  },
+  compoundVariants: [{
+    type: "main",
+    itemType: "item",
+    class: SidebarNavigationItem_module.default["wrapper_color_main-item"]
+  }, {
+    type: "main",
+    itemType: "subItem",
+    class: SidebarNavigationItem_module.default["wrapper_color_main-sub-item"]
+  }, {
+    type: "sqlSidebar",
+    itemType: "item",
+    class: SidebarNavigationItem_module.default["wrapper_color_sql-sidebar-item"]
+  }, {
+    type: "sqlSidebar",
+    itemType: "subItem",
+    class: SidebarNavigationItem_module.default["wrapper_color_sql-sidebar-sub-item"]
+  }],
+  defaultVariants: {
+    itemType: "item",
+    type: "main",
+    collapsible: false
+  }
+});
+const _SidebarItemWrapper = ({
+  as,
+  $collapsible = false,
+  $level = 0,
+  $type = "main",
+  className,
+  ...props
+}, ref) => {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(wrapperVariants({
+    itemType: $level === 0 ? "item" : "subItem",
+    type: $type,
+    collapsible: $collapsible
+  }), className) });
+};
+const SidebarItemWrapper = react.forwardRef(_SidebarItemWrapper);
 const SidebarNavigationItem = react.forwardRef(({
   label,
   level = 0,
@@ -19,74 +78,6 @@ const SidebarNavigationItem = react.forwardRef(({
 }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label }) });
 });
-const SidebarItemWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1rz759l-0"
-})(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;", ""], ({
-  theme,
-  $collapsible = false,
-  $level,
-  $type
-}) => {
-  const itemType = $level === 0 ? "item" : "subItem";
-  return `
-    padding: ${theme.click.sidebar.navigation[itemType].default.space.y} ${theme.click.sidebar.navigation[itemType].default.space.right} ${theme.click.sidebar.navigation[itemType].default.space.y} ${$collapsible ? theme.click.sidebar.navigation[itemType].default.space.left : theme.click.image.sm.size.width};
-    border-radius: ${theme.click.sidebar.navigation[itemType].radii.all};
-    font: ${theme.click.sidebar.navigation[itemType].typography.default};
-    background-color: ${theme.click.sidebar[$type].navigation[itemType].color.background.default};
-    color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
-    span a {
-      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};
-    cursor: pointer;
-      text-decoration: none;
-    }
-    cursor: pointer;
-    pointer-events: all;
-
-    &:hover, &:focus {
-      font: ${theme.click.sidebar.navigation[itemType].typography.hover};
-      background-color: ${theme.click.sidebar[$type].navigation[itemType].color.background.hover};
-      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.hover};
-      pointer-events: auto;
-    }
-
-    &:active, &[data-selected="true"] {
-      font: ${theme.click.sidebar.navigation[itemType].typography.active};
-      background-color: ${theme.click.sidebar[$type].navigation[itemType].color.background.active};
-      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.active};
-      pointer-events: all;
-    }
-
-    &[aria-disabled=true],
-    &[aria-disabled=true]:hover,
-    &[aria-disabled=true]:focus,
-    &[aria-disabled=true]:active,
-    &[aria-disabled=true]:focus-within,
-    &[aria-disabled=true][data-selected="true"] {
-
-      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};
-      pointer-events: none;
-
-      span a {
-        color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};
-        cursor: not-allowed;
-        text-decoration: none;
-      }
-      cursor: not-allowed;
-    }
-
-    @media (max-width: 640px) {
-      gap: ${theme.click.sidebar.navigation[itemType].mobile.space.gap};
-      padding: ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${theme.click.sidebar.navigation[itemType].mobile.space.right} ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${$collapsible ? theme.click.sidebar.navigation[itemType].mobile.space.left : theme.click.image.sm.size.width};
-      font: ${theme.click.sidebar.navigation[itemType].mobile.typography.default};
-      &:hover, &:focus {
-        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.hover};
-      }
-      &:active, &[data-selected="true"] {
-        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.active};
-      }
-    }
-  `;
-});
 
 exports.SidebarItemWrapper = SidebarItemWrapper;
 exports.SidebarNavigationItem = SidebarNavigationItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/SidebarNavigationItem/SidebarNavigationItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { styled } from 'styled-components';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationItemProps } from './SidebarNavigationItem.types';\n\nconst SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(\n  (\n    { label, level = 0, icon, selected, iconDir, disabled, type = 'main', ...props },\n    ref\n  ) => {\n    return (\n      <SidebarItemWrapper\n        $level={level}\n        data-selected={selected}\n        $type={type}\n        ref={ref}\n        aria-disabled={disabled}\n        {...props}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </SidebarItemWrapper>\n    );\n  }\n);\n\nexport const SidebarItemWrapper = styled.div<{\n  $collapsible?: boolean;\n  $level: number;\n  $type: 'main' | 'sqlSidebar';\n}>`\n  display: flex;\n  align-items: center;\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  flex-wrap: nowrap;\n\n  ${({ theme, $collapsible = false, $level, $type }) => {\n    const itemType = $level === 0 ? 'item' : 'subItem';\n    return `\n    padding: ${theme.click.sidebar.navigation[itemType].default.space.y} ${\n      theme.click.sidebar.navigation[itemType].default.space.right\n    } ${theme.click.sidebar.navigation[itemType].default.space.y} ${\n      $collapsible\n        ? theme.click.sidebar.navigation[itemType].default.space.left\n        : theme.click.image.sm.size.width\n    };\n    border-radius: ${theme.click.sidebar.navigation[itemType].radii.all};\n    font: ${theme.click.sidebar.navigation[itemType].typography.default};\n    background-color: ${\n      theme.click.sidebar[$type].navigation[itemType].color.background.default\n    };\n    color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};\n    span a {\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.default};\n    cursor: pointer;\n      text-decoration: none;\n    }\n    cursor: pointer;\n    pointer-events: all;\n\n    &:hover, &:focus {\n      font: ${theme.click.sidebar.navigation[itemType].typography.hover};\n      background-color: ${\n        theme.click.sidebar[$type].navigation[itemType].color.background.hover\n      };\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.hover};\n      pointer-events: auto;\n    }\n\n    &:active, &[data-selected=\"true\"] {\n      font: ${theme.click.sidebar.navigation[itemType].typography.active};\n      background-color: ${\n        theme.click.sidebar[$type].navigation[itemType].color.background.active\n      };\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.active};\n      pointer-events: all;\n    }\n\n    &[aria-disabled=true],\n    &[aria-disabled=true]:hover,\n    &[aria-disabled=true]:focus,\n    &[aria-disabled=true]:active,\n    &[aria-disabled=true]:focus-within,\n    &[aria-disabled=true][data-selected=\"true\"] {\n\n      color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};\n      pointer-events: none;\n\n      span a {\n        color: ${theme.click.sidebar[$type].navigation[itemType].color.text.disabled};\n        cursor: not-allowed;\n        text-decoration: none;\n      }\n      cursor: not-allowed;\n    }\n\n    @media (max-width: 640px) {\n      gap: ${theme.click.sidebar.navigation[itemType].mobile.space.gap};\n      padding: ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${\n        theme.click.sidebar.navigation[itemType].mobile.space.right\n      } ${theme.click.sidebar.navigation[itemType].mobile.space.y} ${\n        $collapsible\n          ? theme.click.sidebar.navigation[itemType].mobile.space.left\n          : theme.click.image.sm.size.width\n      };\n      font: ${theme.click.sidebar.navigation[itemType].mobile.typography.default};\n      &:hover, &:focus {\n        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.hover};\n      }\n      &:active, &[data-selected=\"true\"] {\n        font: ${theme.click.sidebar.navigation[itemType].mobile.typography.active};\n      }\n    }\n  `;\n  }}\n`;\n\nexport { SidebarNavigationItem };\n"],"names":["SidebarNavigationItem","forwardRef","label","level","icon","selected","iconDir","disabled","type","props","ref","jsx","IconWrapper","SidebarItemWrapper","styled","div","withConfig","componentId","theme","$collapsible","$level","$type","itemType","click","sidebar","navigation","default","space","y","right","left","image","sm","size","width","radii","all","typography","color","background","text","hover","active","mobile","gap"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SidebarNavigationItem/SidebarNavigationItem.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 { SidebarNavigationItemProps } from './SidebarNavigationItem.types';\nimport styles from './SidebarNavigationItem.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    itemType: {\n      item: styles.wrapper_itemtype_item,\n      subItem: styles['wrapper_itemtype_sub-item'],\n    },\n    // The colour set depends on BOTH the sidebar type and the item depth, so\n    // it is applied through the compoundVariants below rather than here.\n    type: { main: '', sqlSidebar: '' },\n    collapsible: { true: styles.wrapper_collapsible_true, false: '' },\n  },\n  compoundVariants: [\n    { type: 'main', itemType: 'item', class: styles['wrapper_color_main-item'] },\n    { type: 'main', itemType: 'subItem', class: styles['wrapper_color_main-sub-item'] },\n    {\n      type: 'sqlSidebar',\n      itemType: 'item',\n      class: styles['wrapper_color_sql-sidebar-item'],\n    },\n    {\n      type: 'sqlSidebar',\n      itemType: 'subItem',\n      class: styles['wrapper_color_sql-sidebar-sub-item'],\n    },\n  ],\n  defaultVariants: { itemType: 'item', type: 'main', collapsible: false },\n});\n\n// Polymorphic wrapper: SidebarCollapsibleItem renders it `as={Collapsible.Header}`.\n// Same shape as the Container polymorphic component (src/components/Container).\nexport interface SidebarItemWrapperProps<T extends ElementType = 'div'> {\n  as?: T;\n  $collapsible?: boolean;\n  $level?: number;\n  $type?: 'main' | 'sqlSidebar';\n}\n\ntype SidebarItemWrapperComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> &\n    SidebarItemWrapperProps<T>\n) => ReactNode;\n\nconst _SidebarItemWrapper = <T extends ElementType = 'div'>(\n  {\n    as,\n    $collapsible = false,\n    $level = 0,\n    $type = 'main',\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> &\n    SidebarItemWrapperProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          itemType: $level === 0 ? 'item' : 'subItem',\n          type: $type,\n          collapsible: $collapsible,\n        }),\n        className\n      )}\n    />\n  );\n};\n\nexport const SidebarItemWrapper: SidebarItemWrapperComponent =\n  forwardRef(_SidebarItemWrapper);\n\nconst SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(\n  (\n    { label, level = 0, icon, selected, iconDir, disabled, type = 'main', ...props },\n    ref\n  ) => {\n    return (\n      <SidebarItemWrapper\n        $level={level}\n        data-selected={selected}\n        $type={type}\n        ref={ref}\n        aria-disabled={disabled}\n        {...props}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </SidebarItemWrapper>\n    );\n  }\n);\n\nexport { SidebarNavigationItem };\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","itemType","item","wrapper_itemtype_item","subItem","type","main","sqlSidebar","collapsible","true","wrapper_collapsible_true","false","compoundVariants","class","defaultVariants","_SidebarItemWrapper","as","$collapsible","$level","$type","className","props","ref","Component","cn","SidebarItemWrapper","forwardRef","SidebarNavigationItem","label","level","icon","selected","iconDir","disabled","jsx","IconWrapper"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,0BAAAA,CAAIC,oCAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,MAAMJ,oCAAAA,CAAOK,qBAAAA;AAAAA,MACbC,OAAAA,EAASN,qCAAO,2BAA2B;AAAA,KAC7C;AAAA;AAAA;AAAA,IAGAO,IAAAA,EAAM;AAAA,MAAEC,IAAAA,EAAM,EAAA;AAAA,MAAIC,UAAAA,EAAY;AAAA,KAAG;AAAA,IACjCC,WAAAA,EAAa;AAAA,MAAEC,MAAMX,oCAAAA,CAAOY,wBAAAA;AAAAA,MAA0BC,KAAAA,EAAO;AAAA;AAAG,GAClE;AAAA,EACAC,kBAAkB,CAChB;AAAA,IAAEP,IAAAA,EAAM,MAAA;AAAA,IAAQJ,QAAAA,EAAU,MAAA;AAAA,IAAQY,KAAAA,EAAOf,qCAAO,yBAAyB;AAAA,GAAE,EAC3E;AAAA,IAAEO,IAAAA,EAAM,MAAA;AAAA,IAAQJ,QAAAA,EAAU,SAAA;AAAA,IAAWY,KAAAA,EAAOf,qCAAO,6BAA6B;AAAA,GAAE,EAClF;AAAA,IACEO,IAAAA,EAAM,YAAA;AAAA,IACNJ,QAAAA,EAAU,MAAA;AAAA,IACVY,KAAAA,EAAOf,qCAAO,gCAAgC;AAAA,GAChD,EACA;AAAA,IACEO,IAAAA,EAAM,YAAA;AAAA,IACNJ,QAAAA,EAAU,SAAA;AAAA,IACVY,KAAAA,EAAOf,qCAAO,oCAAoC;AAAA,GACnD,CAAA;AAAA,EAEHgB,eAAAA,EAAiB;AAAA,IAAEb,QAAAA,EAAU,MAAA;AAAA,IAAQI,IAAAA,EAAM,MAAA;AAAA,IAAQG,WAAAA,EAAa;AAAA;AAClE,CAAC,CAAA;AAgBD,MAAMO,sBAAsB,CAC1B;AAAA,EACEC,EAAAA;AAAAA,EACAC,YAAAA,GAAe,KAAA;AAAA,EACfC,MAAAA,GAAS,CAAA;AAAA,EACTC,KAAAA,GAAQ,MAAA;AAAA,EACRC,SAAAA;AAAAA,EACA,GAAGC;AAEsB,CAAA,EAC3BC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYP,EAAAA,IAAM,KAAA;AACxB,EAAA,sCACG,SAAA,EAAA,EACC,GAAA,KACIK,KAAAA,EACJ,SAAA,EAAWG,OACT5B,eAAAA,CAAgB;AAAA,IACdK,QAAAA,EAAUiB,MAAAA,KAAW,CAAA,GAAI,MAAA,GAAS,SAAA;AAAA,IAClCb,IAAAA,EAAMc,KAAAA;AAAAA,IACNX,WAAAA,EAAaS;AAAAA,GACd,CAAA,EACDG,SACF,CAAA,EAAE,CAAA;AAGR,CAAA;AAEO,MAAMK,kBAAAA,GACXC,iBAAWX,mBAAmB;AAEhC,MAAMY,qBAAAA,GAAwBD,iBAC5B,CACE;AAAA,EAAEE,KAAAA;AAAAA,EAAOC,KAAAA,GAAQ,CAAA;AAAA,EAAGC,IAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAUC,OAAAA;AAAAA,EAASC,QAAAA;AAAAA,EAAU5B,IAAAA,GAAO,MAAA;AAAA,EAAQ,GAAGgB;AAAM,CAAA,EAC/EC,GAAAA,KACG;AACH,EAAA,sCACG,kBAAA,EAAA,EACC,MAAA,EAAQO,OACR,eAAA,EAAeE,QAAAA,EACf,OAAO1B,IAAAA,EACP,GAAA,EACA,eAAA,EAAe4B,QAAAA,EACf,GAAIZ,KAAAA,EAEJ,QAAA,kBAAAa,cAAA,CAACC,2BACC,IAAA,EACA,OAAA,EAECP,iBACH,CAAA,EACF,CAAA;AAEJ,CACF;;;;;"}

package/dist/cjs/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/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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
+};
+
+exports.default = styles;
+exports.wrapper = wrapper;
+exports.wrapper_collapsible_true = wrapper_collapsible_true;
+exports.wrapper_type_main = wrapper_type_main;
+//# sourceMappingURL=SidebarNavigationTitle.module.css.cjs.map

package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.cjs.map

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

package/dist/cjs/components/SidebarNavigationTitle/index.cjs

@@ -1,11 +1,45 @@
+require("./SidebarNavigationTitle.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
 const IconWrapper = require('../Collapsible/IconWrapper.cjs');
+const SidebarNavigationTitle_module = require('./SidebarNavigationTitle.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
+const wrapperVariants = classVarianceAuthority.cva(SidebarNavigationTitle_module.default.wrapper, {
+  variants: {
+    type: {
+      main: SidebarNavigationTitle_module.default.wrapper_type_main,
+      sqlSidebar: SidebarNavigationTitle_module.default["wrapper_type_sql-sidebar"]
+    },
+    collapsible: {
+      true: SidebarNavigationTitle_module.default.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__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(wrapperVariants({
+    type: $type,
+    collapsible: $collapsible
+  }), className) });
+};
+const SidebarTitleWrapper = react.forwardRef(_SidebarTitleWrapper);
 const SidebarNavigationTitle = ({
   label,
   icon,
@@ -16,28 +50,6 @@ const SidebarNavigationTitle = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarTitleWrapper, { "data-selected": selected, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label }) });
 };
-const SidebarTitleWrapper = styledComponents.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};
-    }
-  `);
 
 exports.SidebarNavigationTitle = SidebarNavigationTitle;
 exports.SidebarTitleWrapper = SidebarTitleWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","IconWrapper","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,uBACEC,cAAA,CAAC,mBAAA,EAAA,EACC,eAAA,EAAeH,QAAAA,EACf,KAAA,EAAOC,IAAAA,EACP,GAAIC,KAAAA,EAEJ,QAAA,kBAAAC,cAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,OAAA,EAECP,iBACH,CAAA,EACF,CAAA;AAEJ;AACO,MAAMQ,mBAAAA,GAAsBC,uBAAAA,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.cjs","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","jsx","IconWrapper"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,0BAAAA,CAAIC,qCAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,MAAMJ,qCAAAA,CAAOK,iBAAAA;AAAAA,MACbC,UAAAA,EAAYN,sCAAO,0BAA0B;AAAA,KAC/C;AAAA,IACAO,WAAAA,EAAa;AAAA,MAAEC,MAAMR,qCAAAA,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,sCACG,SAAA,EAAA,EACC,GAAA,KACII,KAAAA,EACJ,SAAA,EAAWG,OACTtB,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,iBAAWV,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,uBACEW,cAAA,CAAC,mBAAA,EAAA,EACC,eAAA,EAAeD,QAAAA,EACf,KAAA,EAAOxB,IAAAA,EACP,GAAIc,KAAAA,EAEJ,QAAA,kBAAAW,cAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,OAAA,EAECL,iBACH,CAAA,EACF,CAAA;AAEJ;;;;;"}

package/dist/cjs/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/cjs/components/Tabs/Tabs.module.css.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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"
+};
+
+exports.default = styles;
+exports.tabs__content = tabs__content;
+exports.tabs__trigger = tabs__trigger;
+//# sourceMappingURL=Tabs.module.css.cjs.map

package/dist/cjs/components/Tabs/Tabs.module.css.cjs.map

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

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

@@ -1,10 +1,14 @@
+require("./Tabs.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
 const RadixTabs = require('@radix-ui/react-tabs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Tabs_module = require('./Tabs.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,15 +30,29 @@ function _interopNamespace(e) {
 
 const RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 
-const Trigger = styledComponents.styled(RadixTabs__namespace.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 = styledComponents.styled(RadixTabs__namespace.Content).withConfig({
-  componentId: "sc-tj736u-1"
-})([""]);
-const TriggersList = styledComponents.styled(RadixTabs__namespace.List).withConfig({
-  componentId: "sc-tj736u-2"
-})(["border-bottom:1px solid ", ";display:flex;"], (props) => props.theme.click.global.color.stroke.default);
+const fullWidthTriggerVariants = classVarianceAuthority.cva(cva.cn(Tabs_module.default.tabs__trigger, Tabs_module.default["full-width-tabs__trigger"]), {
+  variants: {
+    width: {
+      fixed: Tabs_module.default["full-width-tabs__trigger_width_fixed"],
+      stretched: Tabs_module.default["full-width-tabs__trigger_width_stretched"]
+    }
+  },
+  defaultVariants: {
+    width: "stretched"
+  }
+});
+const Trigger = react.forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { ref, ...props, className: cva.cn(Tabs_module.default.tabs__trigger, className) }));
+const Content = react.forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Content, { ref, ...props, className: cva.cn(Tabs_module.default.tabs__content, className) }));
+const TriggersList = react.forwardRef(({
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { ref, ...props, className: cva.cn(Tabs_module.default["tabs__triggers-list"], className) }));
 const Tabs = ({
   defaultValue,
   children,
@@ -47,17 +65,24 @@ const Tabs = ({
 Tabs.TriggersList = TriggersList;
 Tabs.Trigger = Trigger;
 Tabs.Content = Content;
-const FullWidthTabs = styledComponents.styled(Tabs).withConfig({
-  componentId: "sc-tj736u-3"
-})(["width:100%;"]);
-FullWidthTabs.Trigger = styledComponents.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__ */ jsxRuntime.jsx(Tabs, { ...props, className: cva.cn(Tabs_module.default["full-width-tabs"], className) });
+const FullWidthTabsTrigger = react.forwardRef(({
+  className,
+  width,
+  style,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { ref, ...props, style: width ? {
+  ...style,
+  "--full-width-tabs-trigger-width": width
+} : style, className: cva.cn(fullWidthTriggerVariants({
+  width: width ? "fixed" : "stretched"
+}), className) }));
+FullWidthTabs.Trigger = FullWidthTabsTrigger;
 FullWidthTabs.TriggersList = TriggersList;
+FullWidthTabs.Content = Content;
 
 exports.FullWidthTabs = FullWidthTabs;
 exports.Tabs = Tabs;