@clickhouse/click-ui 0.6.1-rc2 → 0.6.1

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/types/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
 import { AccordionProps } from './Accordion.types';
-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 };
+declare const Accordion: ({ title, size, color, icon, iconSize, gap, children, fillWidth, className, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+declare const SidebarAccordion: ({ className, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export { Accordion, SidebarAccordion };

package/dist/types/components/Assets/Icons/Dollar.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Dollar: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Dollar;

package/dist/types/components/Assets/Icons/Pin.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Pin: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Pin;

package/dist/types/components/Assets/Icons/Unpin.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Unpin: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Unpin;

package/dist/types/components/Assets/Icons/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type IconName = 'activity' | 'alarm' | 'arrow-directions' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-triangle' | 'arrow-up' | 'auth-app' | 'auth-sms' | 'backups' | 'bar-chart' | 'bell' | 'beta' | 'blog' | 'bold' | 'book' | 'brackets' | 'briefcase' | 'building' | 'burger-menu' | 'calendar' | 'calendar-with-time' | 'cards' | 'cell-tower' | 'chart-area' | 'chart-bar-horizontal' | 'chart-cloud' | 'chart-donut' | 'chart-heatmap' | 'chart-scatter' | 'chart-square' | 'chart-stacked-horizontal' | 'chart-stacked-vertical' | 'chat' | 'check' | 'check-in-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clock' | 'cloud' | 'cloud-keys' | 'code' | 'code-in-square' | 'collapse-all' | 'connect' | 'connect-alt' | 'console' | 'copy' | 'cpu' | 'credit-card' | 'cross' | 'data' | 'data-lakes' | 'database' | 'disk' | 'display' | 'document' | 'dot' | 'dots-horizontal' | 'dots-triangle' | 'dots-vertical' | 'dots-vertical-double' | 'double-check' | 'download' | 'download-in-circle' | 'email' | 'empty' | 'enter' | 'expand-all' | 'eye' | 'eye-closed' | 'filter' | 'fire' | 'flag' | 'flash' | 'flask' | 'folder-closed' | 'folder-open' | 'gear' | 'gift' | 'git-merge' | 'globe' | 'hexagon' | 'history' | 'home' | 'horizontal-loading' | 'http' | 'http-monitoring' | 'info-in-circle' | 'information' | 'insert-row' | 'integrations' | 'italic' | 'key' | 'keys' | 'lifebuoy' | 'light-bulb' | 'light-bulb-on' | 'lightening' | 'line-in-circle' | 'list-bulleted' | 'list-numbered' | 'loading' | 'loading-animated' | 'lock' | 'map-pin' | 'mcp' | 'metrics' | 'metrics-alt' | 'minus' | 'moon' | 'no-cloud' | 'pause' | 'payment' | 'pencil' | 'pie-chart' | 'pipe' | 'play' | 'play-in-circle' | 'plug' | 'plus' | 'popin' | 'popout' | 'popover-arrow' | 'puzzle-piece' | 'query' | 'question' | 'refresh' | 'resize-arrows-horizontal' | 'resize-arrows-vertical' | 'rocket' | 'sand-glass' | 'search' | 'secure' | 'server' | 'services' | 'settings' | 'share' | 'share-arrow' | 'share-network' | 'sleep' | 'slide-in' | 'slide-out' | 'sort' | 'sort-alt' | 'sparkle' | 'speaker' | 'speed' | 'square' | 'star' | 'stop' | 'support' | 'table' | 'taxi' | 'text-slash' | 'thumbs-down' | 'thumbs-up' | 'trash' | 'tree-structure' | 'underline' | 'upgrade' | 'upload' | 'url' | 'user' | 'users' | 'warning' | 'waves';
+export type IconName = 'activity' | 'alarm' | 'arrow-directions' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-triangle' | 'arrow-up' | 'auth-app' | 'auth-sms' | 'backups' | 'bar-chart' | 'bell' | 'beta' | 'blog' | 'bold' | 'book' | 'brackets' | 'briefcase' | 'building' | 'burger-menu' | 'calendar' | 'calendar-with-time' | 'cards' | 'cell-tower' | 'chart-area' | 'chart-bar-horizontal' | 'chart-cloud' | 'chart-donut' | 'chart-heatmap' | 'chart-scatter' | 'chart-square' | 'chart-stacked-horizontal' | 'chart-stacked-vertical' | 'chat' | 'check' | 'check-in-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clock' | 'cloud' | 'cloud-keys' | 'code' | 'code-in-square' | 'collapse-all' | 'connect' | 'connect-alt' | 'console' | 'copy' | 'cpu' | 'credit-card' | 'cross' | 'data' | 'data-lakes' | 'database' | 'disk' | 'display' | 'document' | 'dollar' | 'dot' | 'dots-horizontal' | 'dots-triangle' | 'dots-vertical' | 'dots-vertical-double' | 'double-check' | 'download' | 'download-in-circle' | 'email' | 'empty' | 'enter' | 'expand-all' | 'eye' | 'eye-closed' | 'filter' | 'fire' | 'flag' | 'flash' | 'flask' | 'folder-closed' | 'folder-open' | 'gear' | 'gift' | 'git-merge' | 'globe' | 'hexagon' | 'history' | 'home' | 'horizontal-loading' | 'http' | 'http-monitoring' | 'info-in-circle' | 'information' | 'insert-row' | 'integrations' | 'italic' | 'key' | 'keys' | 'lifebuoy' | 'light-bulb' | 'light-bulb-on' | 'lightening' | 'line-in-circle' | 'list-bulleted' | 'list-numbered' | 'loading' | 'loading-animated' | 'lock' | 'map-pin' | 'mcp' | 'metrics' | 'metrics-alt' | 'minus' | 'moon' | 'no-cloud' | 'pause' | 'payment' | 'pencil' | 'pie-chart' | 'pin' | 'pipe' | 'play' | 'play-in-circle' | 'plug' | 'plus' | 'popin' | 'popout' | 'popover-arrow' | 'puzzle-piece' | 'query' | 'question' | 'refresh' | 'resize-arrows-horizontal' | 'resize-arrows-vertical' | 'rocket' | 'sand-glass' | 'search' | 'secure' | 'server' | 'services' | 'settings' | 'share' | 'share-arrow' | 'share-network' | 'sleep' | 'slide-in' | 'slide-out' | 'sort' | 'sort-alt' | 'sparkle' | 'speaker' | 'speed' | 'square' | 'star' | 'stop' | 'support' | 'table' | 'taxi' | 'text-slash' | 'thumbs-down' | 'thumbs-up' | 'trash' | 'tree-structure' | 'underline' | 'unpin' | 'upgrade' | 'upload' | 'url' | 'user' | 'users' | 'warning' | 'waves';
 export interface IconProps extends SVGAttributes<SVGElement> {
     name: IconName;
     theme?: ThemeName;

package/dist/types/components/Button/Button.d.ts

@@ -1,25 +1,2 @@
-import { IconName } from '../Icon';
-export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
-type Alignment = 'center' | 'left';
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    /** The visual style variant of the button */
-    type?: ButtonType;
-    /** Whether the button is disabled */
-    disabled?: boolean;
-    /** The text label to display in the button */
-    label?: string;
-    /** Icon to display on the left side of the label */
-    iconLeft?: IconName;
-    /** Icon to display on the right side of the label */
-    iconRight?: IconName;
-    /** Alignment of the button content */
-    align?: Alignment;
-    /** Whether the button should fill the full width of its container */
-    fillWidth?: boolean;
-    /** Whether to show a loading state */
-    loading?: boolean;
-    /** Whether the button should be focused on mount */
-    autoFocus?: boolean;
-}
+import { ButtonProps } from './Button.types';
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/types/components/Button/Button.types.d.ts

@@ -2,7 +2,10 @@ import { IconName } from '../Icon';
 export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
 export type Alignment = 'center' | 'left';
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The visual style variant of the button */
     type?: ButtonType;
+    /** Used for native button type attribute  */
+    htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     disabled?: boolean;
     label?: string;
     iconLeft?: IconName;

package/dist/types/components/Collapsible/Collapsible.d.ts

@@ -3,14 +3,14 @@ import { ImageName } from '../Icon';
 import { HorizontalDirection } from '../../types';
 import { CollapsibleProps } from './Collapsible.types';
 export declare const Collapsible: {
-    ({ open: openProp, onOpenChange: onOpenChangeProp, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+    ({ open: openProp, onOpenChange: onOpenChangeProp, children, className, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
     Header: import('react').ForwardRefExoticComponent<CollapsipleHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
     Trigger: {
-        ({ onClick: onClickProp, children, indicatorDir, icon, iconDir, ...props }: CollapsipleTriggerProps): import("react/jsx-runtime").JSX.Element;
+        ({ onClick: onClickProp, children, indicatorDir, icon, iconDir, className, ...props }: CollapsipleTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {
-        ({ indicatorDir, ...props }: HTMLAttributes<HTMLDivElement> & {
+        ({ indicatorDir, className, ...props }: HTMLAttributes<HTMLDivElement> & {
             indicatorDir?: HorizontalDirection;
         }): import("react/jsx-runtime").JSX.Element | undefined;
         displayName: string;

package/dist/types/components/HoverCard/HoverCard.d.ts

@@ -9,7 +9,7 @@ export interface HoverCardContentProps extends RadixHoverCard.HoverCardContentPr
 export declare const HoverCard: {
     ({ children, ...props }: RadixHoverCard.HoverCardProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
-        ({ children, ...props }: RadixHoverCard.HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: RadixHoverCard.HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {

package/dist/types/components/SidebarNavigationItem/SidebarNavigationItem.d.ts

@@ -1,8 +1,12 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { SidebarNavigationItemProps } from './SidebarNavigationItem.types';
-declare const SidebarNavigationItem: import('react').ForwardRefExoticComponent<SidebarNavigationItemProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare const SidebarItemWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export interface SidebarItemWrapperProps<T extends ElementType = 'div'> {
+    as?: T;
     $collapsible?: boolean;
-    $level: number;
-    $type: "main" | "sqlSidebar";
-}>> & string;
+    $level?: number;
+    $type?: 'main' | 'sqlSidebar';
+}
+type SidebarItemWrapperComponent = <T extends ElementType = 'div'>(props: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> & SidebarItemWrapperProps<T>) => ReactNode;
+export declare const SidebarItemWrapper: SidebarItemWrapperComponent;
+declare const SidebarNavigationItem: import('react').ForwardRefExoticComponent<SidebarNavigationItemProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SidebarNavigationItem };

package/dist/types/components/SidebarNavigationTitle/SidebarNavigationTitle.d.ts

@@ -1,6 +1,11 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { SidebarNavigationTitleProps } from './SidebarNavigationTitle.types';
-export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, type, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SidebarTitleWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export interface SidebarTitleWrapperProps<T extends ElementType = 'button'> {
+    as?: T;
     $collapsible?: boolean;
-    $type: "main" | "sqlSidebar";
-}>> & string;
+    $type?: 'main' | 'sqlSidebar';
+}
+type SidebarTitleWrapperComponent = <T extends ElementType = 'button'>(props: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> & SidebarTitleWrapperProps<T>) => ReactNode;
+export declare const SidebarTitleWrapper: SidebarTitleWrapperComponent;
+export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, type, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

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