@clickhouse/click-ui 0.0.138 → 0.0.139

package/dist/click-ui.es.js

@@ -8903,21 +8903,24 @@ const Accordion = ({
   iconSize,
   gap,
   children,
+  fillWidth = false,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: size2, children: title })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
   ] }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { children })
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+    children
+  ] })
 ] }) });
 const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
   componentId: "sc-1ysh219-0"
-})(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ""], ({
+})(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
   theme: theme2,
   $size = "md",
   color = "default"
@@ -8936,7 +8939,9 @@ const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withC
       font: ${theme2.click.accordion[$size].typography.label.hover};
       cursor: pointer;
     }
-  `);
+  `, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
 const AccordionIconWrapper = styled.div.withConfig({
   componentId: "sc-1ysh219-1"
 })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
@@ -32307,10 +32312,25 @@ const Wrapper$3 = styled.div.withConfig({
     color: ${theme2.click.field.color.text.default};
     border: 1px solid ${theme2.click.field.color.stroke.default};
     background: ${theme2.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
+      caret-color: ${theme2.click.field.color.text.default};
+    }
+
     &:hover {
       border: 1px solid ${theme2.click.field.color.stroke.hover};
       background: ${theme2.click.field.color.background.hover};
       color: ${theme2.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
+        caret-color: ${theme2.click.field.color.text.hover};
+      }
     }
     ${$resize === "none" ? "" : `
       resize: ${$resize};
@@ -32322,9 +32342,23 @@ const Wrapper$3 = styled.div.withConfig({
       border: 1px solid ${theme2.click.field.color.stroke.error};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+        caret-color: ${theme2.click.field.color.text.error};
+      }
+
       &:hover {
-      border: 1px solid ${theme2.click.field.color.stroke.error};
-      color: ${theme2.click.field.color.text.error};
+        border: 1px solid ${theme2.click.field.color.stroke.error};
+        color: ${theme2.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+          caret-color: ${theme2.click.field.color.text.error};
+        }
       }
     ` : `
     &:focus-within,
@@ -32333,6 +32367,13 @@ const Wrapper$3 = styled.div.withConfig({
       border: 1px solid ${theme2.click.field.color.stroke.active};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
+        caret-color: ${theme2.click.field.color.text.active};
+      }
     }
     `};
     &:disabled, &.disabled {
@@ -32340,6 +32381,13 @@ const Wrapper$3 = styled.div.withConfig({
       border: 1px solid ${theme2.click.field.color.stroke.disabled};
       background: ${theme2.click.field.color.background.disabled};
       color: ${theme2.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
+        caret-color: ${theme2.click.field.color.text.disabled};
+      }
     }
   `);
 const InputWrapper = ({
@@ -37318,7 +37366,7 @@ const NavContext = createContext({
 });
 const CollapsibleContainer = styled.div.withConfig({
   componentId: "sc-guwmyz-0"
-})(["width:100%;"]);
+})(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
@@ -37378,7 +37426,7 @@ CollapsipleHeader.displayName = "CollapsibleHeader";
 Collapsible.Header = CollapsipleHeader;
 const CollapsipleTriggerButton = styled(EmptyButton$1).withConfig({
   componentId: "sc-guwmyz-2"
-})(['display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+})(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
 const CollapsipleTrigger = ({
   onClick: onClickProp,
   children,
@@ -38012,6 +38060,17 @@ 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;
+  `);
+FullWidthTabs.TriggersList = TriggersList;
 const TabsContainer = styled.div.withConfig({
   componentId: "sc-137ymle-0"
 })(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
@@ -47879,6 +47938,7 @@ const StepItem = styled.div.withConfig({
     row-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.y};
     column-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.x};
     padding-bottom: ${theme2.click.stepper.vertical[$type].content.space.bottom[$isOpen ? "active" : "default"]};
+    box-sizing: content-box;
     &:not(:last-of-type) {
       &::before{
         content: "";
@@ -47887,7 +47947,8 @@ const StepItem = styled.div.withConfig({
         height: 100%;
         left: calc(${theme2.click.stepper.vertical[$type].step.size.width}  / 2 );
         width: ${theme2.click.stepper.vertical[$type].connector.size.width};
-        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]}
+        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]};
+        box-sizing: content-box;
       }
     }
   `);
@@ -47924,8 +47985,10 @@ const StepBubble = styled.div.withConfig({
     font: ${theme2.click.stepper.vertical.numbered.step.typography.number.default};
     color: ${theme2.click.stepper.vertical[$type].step.color.icon[$status]};
     counter-increment: vertical-stepper;
+    box-sizing: content-box;
     ${$type === "numbered" && $status !== "complete" ? `
         &::before {
+          box-sizing: content-box;
           font: inherit;
           color: inherit;
           content: counter(vertical-stepper);
@@ -47933,6 +47996,7 @@ const StepBubble = styled.div.withConfig({
     ` : ""}
       ${$status == "complete" && $type === "bulleted" ? `
       &::after {
+        box-sizing: content-box;
         content: "";
         position: absolute;
         width: 50%;
@@ -48015,6 +48079,7 @@ export {
   Flags,
   Flyout,
   FormContainer,
+  FullWidthTabs,
   Grid,
   GridContainer$1 as GridContainer,
   HoverCard,

package/dist/click-ui.umd.js

@@ -8920,21 +8920,24 @@ var __publicField = (obj, key, value) => {
     iconSize,
     gap,
     children,
+    fillWidth = false,
     ...delegated
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, className: "asasas", ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: size2, children: title })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, children: title })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { children })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+      children
+    ] })
   ] }) });
   const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1ysh219-0"
-  })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ""], ({
+  })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
     theme: theme2,
     $size = "md",
     color = "default"
@@ -8953,7 +8956,9 @@ var __publicField = (obj, key, value) => {
       font: ${theme2.click.accordion[$size].typography.label.hover};
       cursor: pointer;
     }
-  `);
+  `, ({
+    $fillWidth
+  }) => $fillWidth && "width: 100%");
   const AccordionIconWrapper = styled.div.withConfig({
     componentId: "sc-1ysh219-1"
   })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
@@ -32324,10 +32329,25 @@ var __publicField = (obj, key, value) => {
     color: ${theme2.click.field.color.text.default};
     border: 1px solid ${theme2.click.field.color.stroke.default};
     background: ${theme2.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
+      caret-color: ${theme2.click.field.color.text.default};
+    }
+
     &:hover {
       border: 1px solid ${theme2.click.field.color.stroke.hover};
       background: ${theme2.click.field.color.background.hover};
       color: ${theme2.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
+        caret-color: ${theme2.click.field.color.text.hover};
+      }
     }
     ${$resize === "none" ? "" : `
       resize: ${$resize};
@@ -32339,9 +32359,23 @@ var __publicField = (obj, key, value) => {
       border: 1px solid ${theme2.click.field.color.stroke.error};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+        caret-color: ${theme2.click.field.color.text.error};
+      }
+
       &:hover {
-      border: 1px solid ${theme2.click.field.color.stroke.error};
-      color: ${theme2.click.field.color.text.error};
+        border: 1px solid ${theme2.click.field.color.stroke.error};
+        color: ${theme2.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+          caret-color: ${theme2.click.field.color.text.error};
+        }
       }
     ` : `
     &:focus-within,
@@ -32350,6 +32384,13 @@ var __publicField = (obj, key, value) => {
       border: 1px solid ${theme2.click.field.color.stroke.active};
       background: ${theme2.click.field.color.background.active};
       color: ${theme2.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
+        caret-color: ${theme2.click.field.color.text.active};
+      }
     }
     `};
     &:disabled, &.disabled {
@@ -32357,6 +32398,13 @@ var __publicField = (obj, key, value) => {
       border: 1px solid ${theme2.click.field.color.stroke.disabled};
       background: ${theme2.click.field.color.background.disabled};
       color: ${theme2.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
+        caret-color: ${theme2.click.field.color.text.disabled};
+      }
     }
   `);
   const InputWrapper = ({
@@ -37335,7 +37383,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   const CollapsibleContainer = styled.div.withConfig({
     componentId: "sc-guwmyz-0"
-  })(["width:100%;"]);
+  })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
   const Collapsible = ({
     open: openProp,
     onOpenChange: onOpenChangeProp,
@@ -37395,7 +37443,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   Collapsible.Header = CollapsipleHeader;
   const CollapsipleTriggerButton = styled(EmptyButton$1).withConfig({
     componentId: "sc-guwmyz-2"
-  })(['display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}&:hover{[data-trigger-icon]{visibility:visible;}}']);
+  })(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
   const CollapsipleTrigger = ({
     onClick: onClickProp,
     children,
@@ -38029,6 +38077,17 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   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;
+  `);
+  FullWidthTabs.TriggersList = TriggersList;
   const TabsContainer = styled.div.withConfig({
     componentId: "sc-137ymle-0"
   })(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
@@ -47896,6 +47955,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     row-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.y};
     column-gap: ${theme2.click.stepper.vertical[$type].content.space.gap.x};
     padding-bottom: ${theme2.click.stepper.vertical[$type].content.space.bottom[$isOpen ? "active" : "default"]};
+    box-sizing: content-box;
     &:not(:last-of-type) {
       &::before{
         content: "";
@@ -47904,7 +47964,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         height: 100%;
         left: calc(${theme2.click.stepper.vertical[$type].step.size.width}  / 2 );
         width: ${theme2.click.stepper.vertical[$type].connector.size.width};
-        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]}
+        background: ${theme2.click.stepper.vertical[$type].connector.color.stroke[$status]};
+        box-sizing: content-box;
       }
     }
   `);
@@ -47941,8 +48002,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     font: ${theme2.click.stepper.vertical.numbered.step.typography.number.default};
     color: ${theme2.click.stepper.vertical[$type].step.color.icon[$status]};
     counter-increment: vertical-stepper;
+    box-sizing: content-box;
     ${$type === "numbered" && $status !== "complete" ? `
         &::before {
+          box-sizing: content-box;
           font: inherit;
           color: inherit;
           content: counter(vertical-stepper);
@@ -47950,6 +48013,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     ` : ""}
       ${$status == "complete" && $type === "bulleted" ? `
       &::after {
+        box-sizing: content-box;
         content: "";
         position: absolute;
         width: 50%;
@@ -48031,6 +48095,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Flags = Flags;
   exports2.Flyout = Flyout;
   exports2.FormContainer = FormContainer;
+  exports2.FullWidthTabs = FullWidthTabs;
   exports2.Grid = Grid;
   exports2.GridContainer = GridContainer$1;
   exports2.HoverCard = HoverCard;

package/dist/components/Accordion/Accordion.d.ts

@@ -12,10 +12,11 @@ export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionS
     iconSize?: IconSize;
     gap?: Gap;
     children: React.ReactNode;
+    fillWidth?: boolean;
 }
 interface SizeProp {
     size?: Size;
 }
-declare const SidebarAccordion: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
-declare const AccordionToExport: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+declare const SidebarAccordion: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+declare const AccordionToExport: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export { AccordionToExport as Accordion, SidebarAccordion };

package/dist/components/Tabs/Tabs.d.ts

@@ -15,4 +15,16 @@ declare const Tabs: {
         ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
 };
-export { Tabs };
+declare const FullWidthTabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<TabsProps, never>> & string & Omit<{
+    ({ defaultValue, children, ariaLabel, onValueChange, ...delegated }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    TriggersList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+    Trigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | import('react').RefObject<HTMLButtonElement> | null | undefined;
+    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+    Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+}, keyof import('react').Component<any, {}, any>>;
+export { Tabs, FullWidthTabs };

package/dist/components/index.d.ts

@@ -50,7 +50,7 @@ export { SidebarCollapsibleTitle } from './SidebarCollapsibleTitle/SidebarCollap
 export { Spacer } from './Spacer/Spacer';
 export { SplitButton } from './SplitButton/SplitButton';
 export { Switch } from './Switch/Switch';
-export { Tabs } from './Tabs/Tabs';
+export { Tabs, FullWidthTabs } from './Tabs/Tabs';
 export { FileTabs, FileTabElement } from './FileTabs/FileTabs';
 export { Table } from './Table/Table';
 export { Text } from './Typography/Text/Text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.138",
+  "version": "v0.0.139",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",