@clickhouse/click-ui 0.7.0 → 0.8.0

package/dist/esm/components/Select/common/SelectComponents.module.css.js

@@ -0,0 +1,27 @@
+const styles = {
+	"select-value": "select-value__CxDXF",
+	"select-trigger": "select-trigger__k4Odp",
+	"select-trigger_error": "select-trigger_error__fZGGT",
+	"select-popover-content": "select-popover-content__30txk",
+	"select-popover-content_full-width": "select-popover-content_full-width__frIlp",
+	"search-bar-container": "search-bar-container__bidMt",
+	"search-bar-container_show-search": "search-bar-container_show-search__YLR4i",
+	"search-bar": "search-bar__J2qTl",
+	"search-bar_show-search": "search-bar_show-search__IhdJT",
+	"search-close": "search-close__dB1cs",
+	"search-close_show-close": "search-close_show-close__-Anjf",
+	"select-list": "select-list__CNYUb",
+	"select-list-content": "select-list-content__AJbe9",
+	"hidden-select-element": "hidden-select-element__YZlhL",
+	"select-group-container": "select-group-container__Pd5rW",
+	"select-group-name": "select-group-name__TrAy3",
+	"select-group-content": "select-group-content__OBO5d",
+	"select-no-data-container": "select-no-data-container__b2319",
+	"select-no-data-container_clickable": "select-no-data-container_clickable__J6Bkj",
+	"check-icon": "check-icon__ORxKK",
+	"check-icon_show-check": "check-icon_show-check__rVelk",
+	"select-item-description-text": "select-item-description-text__eKqEn"
+};
+
+export { styles as default };
+//# sourceMappingURL=SelectComponents.module.css.js.map

package/dist/esm/components/Select/common/SelectComponents.module.css.js.map

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

package/dist/esm/components/SplitButton/SplitButton.css

@@ -0,0 +1,138 @@
+.split-button__EX3XI {
+  display: inline-flex;
+  width: revert;
+  overflow: hidden;
+  align-items: center;
+  border: 1px solid var(--split-stroke-default);
+  border-radius: var(--click-button-radii-all);
+  user-select: none;
+}
+
+.split-button_type_primary__n4Kxb {
+  --split-stroke-default: var(--click-button-split-primary-stroke-default);
+  --split-stroke-hover: var(--click-button-split-primary-stroke-hover);
+  --split-stroke-active: var(--click-button-split-primary-stroke-active);
+  --split-stroke-disabled: var(--click-button-split-primary-stroke-disabled);
+  --split-bg-main-default: var(--click-button-split-primary-background-main-default);
+  --split-bg-main-hover: var(--click-button-split-primary-background-main-hover);
+  --split-bg-main-active: var(--click-button-split-primary-background-main-active);
+  --split-bg-main-disabled: var(--click-button-split-primary-background-main-disabled);
+  --split-bg-action-default: var(--click-button-split-primary-background-action-default);
+  --split-bg-action-hover: var(--click-button-split-primary-background-action-hover);
+  --split-bg-action-active: var(--click-button-split-primary-background-action-active);
+  --split-bg-action-disabled: var(--click-button-split-primary-background-action-disabled);
+  --split-text-default: var(--click-button-split-primary-text-default);
+  --split-text-hover: var(--click-button-split-primary-text-hover);
+  --split-text-active: var(--click-button-split-primary-text-active);
+  --split-text-disabled: var(--click-button-split-primary-text-disabled);
+}
+
+.split-button_type_secondary__CMY5T {
+  --split-stroke-default: var(--click-button-split-secondary-stroke-default);
+  --split-stroke-hover: var(--click-button-split-secondary-stroke-hover);
+  --split-stroke-active: var(--click-button-split-secondary-stroke-active);
+  --split-stroke-disabled: var(--click-button-split-secondary-stroke-disabled);
+  --split-bg-main-default: var(--click-button-split-secondary-background-main-default);
+  --split-bg-main-hover: var(--click-button-split-secondary-background-main-hover);
+  --split-bg-main-active: var(--click-button-split-secondary-background-main-active);
+  --split-bg-main-disabled: var(--click-button-split-secondary-background-main-disabled);
+  --split-bg-action-default: var(--click-button-split-secondary-background-action-default);
+  --split-bg-action-hover: var(--click-button-split-secondary-background-action-hover);
+  --split-bg-action-active: var(--click-button-split-secondary-background-action-active);
+  --split-bg-action-disabled: var(--click-button-split-secondary-background-action-disabled);
+  --split-text-default: var(--click-button-split-secondary-text-default);
+  --split-text-hover: var(--click-button-split-secondary-text-hover);
+  --split-text-active: var(--click-button-split-secondary-text-active);
+  --split-text-disabled: var(--click-button-split-secondary-text-disabled);
+}
+
+.split-button_fill-width__4-oog {
+  width: 100%;
+}
+
+.split-button__EX3XI:hover {
+  border-color: var(--split-stroke-hover);
+}
+
+.split-button__EX3XI:focus-within {
+  border-color: var(--split-stroke-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/focus-within to mirror the source cascade order; the
+   pre-migration original omitted the hover/focus-within rules entirely when
+   disabled, so the disabled border-color must win over them. */
+.split-button_disabled__597A-,
+.split-button_disabled__597A-:hover,
+.split-button_disabled__597A-:focus-within {
+  border-color: var(--split-stroke-disabled);
+  cursor: not-allowed;
+}
+/* stylelint-enable no-descending-specificity */
+
+.split-button__primary__1RIoP {
+  width: revert;
+  padding: var(--click-button-split-space-y) var(--click-button-split-space-x);
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: var(--split-bg-main-default);
+  color: var(--split-text-default);
+  font: var(--click-button-split-typography-label-default);
+}
+
+.split-button__primary_fill-width__RRkLi {
+  width: 100%;
+}
+
+.split-button__primary__1RIoP:hover {
+  background: var(--split-bg-main-hover);
+  color: var(--split-text-hover);
+  font: var(--click-button-split-typography-label-hover);
+}
+
+.split-button__primary__1RIoP:focus {
+  background: var(--split-bg-main-active);
+  color: var(--split-text-active);
+  font: var(--click-button-split-typography-label-active);
+}
+
+.split-button__primary__1RIoP:disabled {
+  background: var(--split-bg-main-disabled);
+  color: var(--split-text-disabled);
+  font: var(--click-button-split-typography-label-disabled);
+}
+
+.split-button__secondary__CYtzX {
+  padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x);
+  align-self: stretch;
+  border: none;
+  border-radius: 0;
+  background: var(--split-bg-action-default);
+  color: var(--split-text-default);
+}
+
+.split-button__secondary__CYtzX:hover {
+  background: var(--split-bg-action-hover);
+  color: var(--split-text-hover);
+}
+
+.split-button__secondary__CYtzX:focus {
+  background: var(--split-bg-action-active);
+  color: var(--split-text-active);
+}
+
+.split-button__secondary__CYtzX[data-disabled] {
+  background: var(--split-bg-action-disabled);
+  color: var(--split-text-disabled);
+}
+
+.split-button__button-data__8yyZR {
+  width: auto;
+}
+
+.split-button__dropdown-content__nmia- {
+  min-width: var(--split-button-dropdown-min-width, 0);
+}

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

@@ -0,0 +1,15 @@
+const styles = {
+	"split-button": "split-button__EX3XI",
+	"split-button_type_primary": "split-button_type_primary__n4Kxb",
+	"split-button_type_secondary": "split-button_type_secondary__CMY5T",
+	"split-button_fill-width": "split-button_fill-width__4-oog",
+	"split-button_disabled": "split-button_disabled__597A-",
+	"split-button__primary": "split-button__primary__1RIoP",
+	"split-button__primary_fill-width": "split-button__primary_fill-width__RRkLi",
+	"split-button__secondary": "split-button__secondary__CYtzX",
+	"split-button__button-data": "split-button__button-data__8yyZR",
+	"split-button__dropdown-content": "split-button__dropdown-content__nmia-"
+};
+
+export { styles as default };
+//# sourceMappingURL=SplitButton.module.css.js.map

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

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

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

@@ -1,11 +1,38 @@
+import "./SplitButton.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
-import { styled } from 'styled-components';
+import { useRef, useState, useEffect, useMemo } from 'react';
 import { BaseButton } from '../Button/BaseButton.js';
 import { IconWrapper } from '../IconWrapper/index.js';
+import { cn } from '../../lib/cva.js';
+import styles from './SplitButton.module.css.js';
 import { Dropdown } from '../Dropdown/index.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
+const triggerVariants = cva(styles["split-button"], {
+  variants: {
+    type: {
+      primary: styles["split-button_type_primary"],
+      secondary: styles["split-button_type_secondary"]
+    },
+    fillWidth: {
+      true: styles["split-button_fill-width"]
+    },
+    disabled: {
+      true: styles["split-button_disabled"]
+    }
+  },
+  defaultVariants: {
+    type: "primary"
+  }
+});
+const primaryVariants = cva(styles["split-button__primary"], {
+  variants: {
+    fillWidth: {
+      true: styles["split-button__primary_fill-width"]
+    }
+  }
+});
 const SplitButton = ({
   type = "primary",
   htmlType,
@@ -21,6 +48,7 @@ const SplitButton = ({
   children,
   icon,
   iconDir = "start",
+  className,
   ...props
 }) => {
   const ref = useRef(null);
@@ -40,19 +68,23 @@ const SplitButton = ({
       resizeObserver.unobserve(targetDiv);
     };
   }, []);
+  const contentStyle = useMemo(() => ({
+    "--split-button-dropdown-min-width": `${width}px`
+  }), [width]);
   return /* @__PURE__ */ jsxs(Dropdown, { dir, open, defaultOpen, onOpenChange, modal, children: [
-    /* @__PURE__ */ jsxs(SplitButtonTrigger, { $disabled: disabled, $fillWidth: fillWidth, ref, $type: type, children: [
-      /* @__PURE__ */ jsx(PrimaryButton, { disabled, $type: type, $fillWidth: fillWidth, ...props, type: htmlType, children: /* @__PURE__ */ jsx(ButtonData, { as: IconWrapper, icon, iconDir, children }) }),
-      /* @__PURE__ */ jsx(SecondaryButton, { as: Dropdown.Trigger, disabled, $type: type, asChild: true, "data-testid": "split-button-dropdown", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-down", size: "sm" }) }) })
+    /* @__PURE__ */ jsxs("div", { ref, className: cn(triggerVariants({
+      type,
+      fillWidth,
+      disabled
+    })), children: [
+      /* @__PURE__ */ jsx(BaseButton, { disabled, ...props, type: htmlType, className: cn(primaryVariants({
+        fillWidth
+      }), className), children: /* @__PURE__ */ jsx(IconWrapper, { className: styles["split-button__button-data"], icon, iconDir, children }) }),
+      /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, asChild: true, "data-testid": "split-button-dropdown", className: styles["split-button__secondary"], children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-down", size: "sm" }) }) })
     ] }),
-    /* @__PURE__ */ jsx(DropdownContent, { as: Dropdown.Content, side, $width: width, sideOffset: 4, align: "end", children: menu.map((item, index) => /* @__PURE__ */ jsx(MenuContentItem, { parentKey: `split-menu-option-${index}`, ...item }, `split-menu-option-${index}`)) })
+    /* @__PURE__ */ jsx(Dropdown.Content, { side, sideOffset: 4, align: "end", className: styles["split-button__dropdown-content"], style: contentStyle, children: menu.map((item, index) => /* @__PURE__ */ jsx(MenuContentItem, { parentKey: `split-menu-option-${index}`, ...item }, `split-menu-option-${index}`)) })
   ] });
 };
-const DropdownContent = styled.div.withConfig({
-  componentId: "sc-85zs9e-0"
-})(["min-width:", "px;"], ({
-  $width
-}) => $width);
 const MenuContentItem = ({
   items = [],
   type = "item",
@@ -75,84 +107,6 @@ const MenuContentItem = ({
     ] });
   }
 };
-const SplitButtonTrigger = styled.div.withConfig({
-  componentId: "sc-85zs9e-1"
-})(["display:inline-flex;align-items:center;overflow:hidden;user-select:none;", ""], ({
-  theme,
-  $disabled = false,
-  $type,
-  $fillWidth
-}) => `
-    width: ${$fillWidth ? "100%" : "revert"};
-    border-radius: ${theme.click.button.radii.all};
-    border: 1px solid ${theme.click.button.split[$type].stroke.default};
-    ${$disabled ? `
-          cursor: not-allowed;
-          border-color: ${theme.click.button.split[$type].stroke.disabled};
-        ` : `
-          &:hover {
-            border-color: ${theme.click.button.split[$type].stroke.hover};
-          }
-          &:focus-within {
-            border-color: ${theme.click.button.split[$type].stroke.active};
-          }
-        `}
-  `);
-const PrimaryButton = styled(BaseButton).withConfig({
-  componentId: "sc-85zs9e-2"
-})(["border:none;align-self:stretch;border-radius:0;align-items:center;padding:", ";", ""], ({
-  theme
-}) => `${theme.click.button.split.space.y} ${theme.click.button.split.space.x}`, ({
-  theme,
-  $type,
-  $fillWidth
-}) => `
-    width: ${$fillWidth ? "100%" : "revert"};
-    justify-content: center;
-    background: ${theme.click.button.split[$type].background.main.default};
-    color: ${theme.click.button.split[$type].text.default};
-    font: ${theme.click.button.split.typography.label.default};
-    &:hover {
-      background: ${theme.click.button.split[$type].background.main.hover};
-      color: ${theme.click.button.split[$type].text.hover};
-      font: ${theme.click.button.split.typography.label.hover};
-    }
-    &:focus {
-      background: ${theme.click.button.split[$type].background.main.active};
-      color: ${theme.click.button.split[$type].text.active};
-      font: ${theme.click.button.split.typography.label.active};
-    }
-    &:disabled {
-      background: ${theme.click.button.split[$type].background.main.disabled};
-      color: ${theme.click.button.split[$type].text.disabled};
-      font: ${theme.click.button.split.typography.label.disabled};
-    }
-  `);
-const SecondaryButton = styled(BaseButton).withConfig({
-  componentId: "sc-85zs9e-3"
-})(["border:none;align-self:stretch;border-radius:0;", ""], ({
-  theme,
-  $type
-}) => `
-    padding: ${theme.click.button.split.icon.space.y} ${theme.click.button.split.icon.space.x};
-    background: ${theme.click.button.split[$type].background.action.default};
-    color: ${theme.click.button.split[$type].text.default};
-    &:hover {
-      background: ${theme.click.button.split[$type].background.action.hover};
-      color: ${theme.click.button.split[$type].text.hover};
-    }
-    &:focus {
-      background: ${theme.click.button.split[$type].background.action.active};
-      color: ${theme.click.button.split[$type].text.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.button.split[$type].background.action.disabled};
-      color: ${theme.click.button.split[$type].text.disabled};
-    }
-  `);
-const ButtonData = styled.div.withConfig({
-  componentId: "sc-85zs9e-4"
-})(["width:auto;"]);
 
 export { SplitButton };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Dropdown } from '@/components/Dropdown';\nimport { BaseButton } from '@/components/Button/BaseButton';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport { SplitButtonProps, Menu, ButtonType } from './SplitButton.types';\n\nexport const SplitButton = ({\n  type = 'primary',\n  htmlType,\n  disabled,\n  menu,\n  dir,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  side,\n  fillWidth,\n  children,\n  icon,\n  iconDir = 'start',\n  ...props\n}: SplitButtonProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const targetDiv = ref.current;\n    if (!targetDiv) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setWidth(entry.target.clientWidth);\n      }\n    });\n\n    resizeObserver.observe(targetDiv);\n\n    return () => {\n      resizeObserver.unobserve(targetDiv);\n    };\n  }, []);\n\n  return (\n    <Dropdown\n      dir={dir}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      <SplitButtonTrigger\n        $disabled={disabled}\n        $fillWidth={fillWidth}\n        ref={ref}\n        $type={type}\n      >\n        <PrimaryButton\n          disabled={disabled}\n          $type={type}\n          $fillWidth={fillWidth}\n          {...props}\n          type={htmlType}\n        >\n          <ButtonData\n            as={IconWrapper}\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </ButtonData>\n        </PrimaryButton>\n        <SecondaryButton\n          as={Dropdown.Trigger}\n          disabled={disabled}\n          $type={type}\n          asChild\n          data-testid=\"split-button-dropdown\"\n        >\n          <span>\n            <Icon\n              name=\"chevron-down\"\n              size=\"sm\"\n            />\n          </span>\n        </SecondaryButton>\n      </SplitButtonTrigger>\n      <DropdownContent\n        as={Dropdown.Content}\n        side={side}\n        $width={width}\n        sideOffset={4}\n        align=\"end\"\n      >\n        {menu.map((item: Menu, index: number) => (\n          <MenuContentItem\n            key={`split-menu-option-${index}`}\n            parentKey={`split-menu-option-${index}`}\n            {...item}\n          />\n        ))}\n      </DropdownContent>\n    </Dropdown>\n  );\n};\n\nconst DropdownContent = styled.div<{ $width: number }>`\n  min-width: ${({ $width }) => $width}px;\n`;\n\nconst MenuContentItem = ({\n  items = [],\n  type = 'item',\n  label,\n  icon,\n  iconDir = 'start',\n  parentKey,\n  ...props\n}: Menu & { parentKey: string }) => {\n  if (type === 'item') {\n    return (\n      <Dropdown.Item {...props}>\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </Dropdown.Item>\n    );\n  }\n  if (type === 'group') {\n    return (\n      <Dropdown.Group>\n        {items.map((item, index) => (\n          <MenuContentItem\n            key={`${parentKey}-group-${index}`}\n            parentKey={`${parentKey}-group-${index}`}\n            {...item}\n          />\n        ))}\n      </Dropdown.Group>\n    );\n  }\n  if (type === 'sub-menu') {\n    return (\n      <Dropdown.Sub>\n        <Dropdown.Trigger\n          sub\n          {...props}\n        >\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {label}\n          </IconWrapper>\n        </Dropdown.Trigger>\n        <Dropdown.Content sub>\n          {items.map((item, index) => (\n            <MenuContentItem\n              key={`${parentKey}-sub-menu-${index}`}\n              parentKey={`${parentKey}-sub-menu-${index}`}\n              {...item}\n            />\n          ))}\n        </Dropdown.Content>\n      </Dropdown.Sub>\n    );\n  }\n};\n\nconst SplitButtonTrigger = styled.div<{\n  $disabled?: boolean;\n  $type: ButtonType;\n  $fillWidth?: boolean;\n}>`\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n  ${({ theme, $disabled = false, $type, $fillWidth }) => `\n    width: ${$fillWidth ? '100%' : 'revert'};\n    border-radius: ${theme.click.button.radii.all};\n    border: 1px solid ${theme.click.button.split[$type].stroke.default};\n    ${\n      $disabled\n        ? `\n          cursor: not-allowed;\n          border-color: ${theme.click.button.split[$type].stroke.disabled};\n        `\n        : `\n          &:hover {\n            border-color: ${theme.click.button.split[$type].stroke.hover};\n          }\n          &:focus-within {\n            border-color: ${theme.click.button.split[$type].stroke.active};\n          }\n        `\n    }\n  `}\n`;\n\nconst PrimaryButton = styled(BaseButton)<{\n  $type: ButtonType;\n  $fillWidth?: boolean;\n}>`\n  border: none;\n  align-self: stretch;\n  border-radius: 0;\n  align-items: center;\n  padding: ${({ theme }) =>\n    `${theme.click.button.split.space.y} ${theme.click.button.split.space.x}`};\n  ${({ theme, $type, $fillWidth }) => `\n    width: ${$fillWidth ? '100%' : 'revert'};\n    justify-content: center;\n    background: ${theme.click.button.split[$type].background.main.default};\n    color: ${theme.click.button.split[$type].text.default};\n    font: ${theme.click.button.split.typography.label.default};\n    &:hover {\n      background: ${theme.click.button.split[$type].background.main.hover};\n      color: ${theme.click.button.split[$type].text.hover};\n      font: ${theme.click.button.split.typography.label.hover};\n    }\n    &:focus {\n      background: ${theme.click.button.split[$type].background.main.active};\n      color: ${theme.click.button.split[$type].text.active};\n      font: ${theme.click.button.split.typography.label.active};\n    }\n    &:disabled {\n      background: ${theme.click.button.split[$type].background.main.disabled};\n      color: ${theme.click.button.split[$type].text.disabled};\n      font: ${theme.click.button.split.typography.label.disabled};\n    }\n  `}\n`;\n\nconst SecondaryButton = styled(BaseButton)<{ $type: ButtonType }>`\n  border: none;\n  align-self: stretch;\n  border-radius: 0;\n  ${({ theme, $type }) => `\n    padding: ${theme.click.button.split.icon.space.y} ${theme.click.button.split.icon.space.x};\n    background: ${theme.click.button.split[$type].background.action.default};\n    color: ${theme.click.button.split[$type].text.default};\n    &:hover {\n      background: ${theme.click.button.split[$type].background.action.hover};\n      color: ${theme.click.button.split[$type].text.hover};\n    }\n    &:focus {\n      background: ${theme.click.button.split[$type].background.action.active};\n      color: ${theme.click.button.split[$type].text.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.button.split[$type].background.action.disabled};\n      color: ${theme.click.button.split[$type].text.disabled};\n    }\n  `}\n`;\n\nconst ButtonData = styled.div`\n  width: auto;\n`;\n"],"names":["SplitButton","type","htmlType","disabled","menu","dir","open","defaultOpen","onOpenChange","modal","side","fillWidth","children","icon","iconDir","props","ref","useRef","width","setWidth","useState","useEffect","targetDiv","current","resizeObserver","ResizeObserver","entries","entry","target","clientWidth","observe","unobserve","IconWrapper","Dropdown","Trigger","Icon","Content","map","item","index","DropdownContent","styled","div","withConfig","componentId","$width","MenuContentItem","items","label","parentKey","SplitButtonTrigger","theme","$disabled","$type","$fillWidth","click","button","radii","all","split","stroke","default","hover","active","PrimaryButton","BaseButton","space","y","x","background","main","text","typography","SecondaryButton","action","ButtonData"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';\nimport { Dropdown } from '@/components/Dropdown';\nimport { BaseButton } from '@/components/Button/BaseButton';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { SplitButtonProps, Menu } from './SplitButton.types';\nimport styles from './SplitButton.module.css';\n\nconst triggerVariants = cva(styles['split-button'], {\n  variants: {\n    type: {\n      primary: styles['split-button_type_primary'],\n      secondary: styles['split-button_type_secondary'],\n    },\n    fillWidth: {\n      true: styles['split-button_fill-width'],\n    },\n    disabled: {\n      true: styles['split-button_disabled'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n  },\n});\n\nconst primaryVariants = cva(styles['split-button__primary'], {\n  variants: {\n    fillWidth: {\n      true: styles['split-button__primary_fill-width'],\n    },\n  },\n});\n\nexport const SplitButton = ({\n  type = 'primary',\n  htmlType,\n  disabled,\n  menu,\n  dir,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  side,\n  fillWidth,\n  children,\n  icon,\n  iconDir = 'start',\n  className,\n  ...props\n}: SplitButtonProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const targetDiv = ref.current;\n    if (!targetDiv) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setWidth(entry.target.clientWidth);\n      }\n    });\n\n    resizeObserver.observe(targetDiv);\n\n    return () => {\n      resizeObserver.unobserve(targetDiv);\n    };\n  }, []);\n\n  const contentStyle = useMemo(\n    () =>\n      ({\n        '--split-button-dropdown-min-width': `${width}px`,\n      }) as CSSProperties,\n    [width]\n  );\n\n  return (\n    <Dropdown\n      dir={dir}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      <div\n        ref={ref}\n        className={cn(triggerVariants({ type, fillWidth, disabled }))}\n      >\n        <BaseButton\n          disabled={disabled}\n          {...props}\n          type={htmlType}\n          className={cn(primaryVariants({ fillWidth }), className)}\n        >\n          <IconWrapper\n            className={styles['split-button__button-data']}\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </IconWrapper>\n        </BaseButton>\n        <Dropdown.Trigger\n          disabled={disabled}\n          asChild\n          data-testid=\"split-button-dropdown\"\n          className={styles['split-button__secondary']}\n        >\n          <span>\n            <Icon\n              name=\"chevron-down\"\n              size=\"sm\"\n            />\n          </span>\n        </Dropdown.Trigger>\n      </div>\n      <Dropdown.Content\n        side={side}\n        sideOffset={4}\n        align=\"end\"\n        className={styles['split-button__dropdown-content']}\n        style={contentStyle}\n      >\n        {menu.map((item: Menu, index: number) => (\n          <MenuContentItem\n            key={`split-menu-option-${index}`}\n            parentKey={`split-menu-option-${index}`}\n            {...item}\n          />\n        ))}\n      </Dropdown.Content>\n    </Dropdown>\n  );\n};\n\nconst MenuContentItem = ({\n  items = [],\n  type = 'item',\n  label,\n  icon,\n  iconDir = 'start',\n  parentKey,\n  ...props\n}: Menu & { parentKey: string }) => {\n  if (type === 'item') {\n    return (\n      <Dropdown.Item {...props}>\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </Dropdown.Item>\n    );\n  }\n  if (type === 'group') {\n    return (\n      <Dropdown.Group>\n        {items.map((item, index) => (\n          <MenuContentItem\n            key={`${parentKey}-group-${index}`}\n            parentKey={`${parentKey}-group-${index}`}\n            {...item}\n          />\n        ))}\n      </Dropdown.Group>\n    );\n  }\n  if (type === 'sub-menu') {\n    return (\n      <Dropdown.Sub>\n        <Dropdown.Trigger\n          sub\n          {...props}\n        >\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {label}\n          </IconWrapper>\n        </Dropdown.Trigger>\n        <Dropdown.Content sub>\n          {items.map((item, index) => (\n            <MenuContentItem\n              key={`${parentKey}-sub-menu-${index}`}\n              parentKey={`${parentKey}-sub-menu-${index}`}\n              {...item}\n            />\n          ))}\n        </Dropdown.Content>\n      </Dropdown.Sub>\n    );\n  }\n};\n"],"names":["triggerVariants","cva","styles","variants","type","primary","secondary","fillWidth","true","disabled","defaultVariants","primaryVariants","SplitButton","htmlType","menu","dir","open","defaultOpen","onOpenChange","modal","side","children","icon","iconDir","className","props","ref","useRef","width","setWidth","useState","useEffect","targetDiv","current","resizeObserver","ResizeObserver","entries","entry","target","clientWidth","observe","unobserve","contentStyle","useMemo","cn","Icon","map","item","index","MenuContentItem","items","label","parentKey"],"mappings":"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"}

package/dist/esm/components/Table/Table.css

@@ -87,7 +87,6 @@
 
 .table__resizer__m6w0b {
   position: absolute;
-  z-index: 1;
   top: 0;
   right: 0;
   width: 24px;

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

@@ -58,7 +58,7 @@ interface Props extends PopoverProps, Omit<DivProps, 'onChange' | 'dir' | 'onSel
     allowCreateOption?: boolean;
 }
 export type AutoCompleteProps = (SelectOptionType & Props) | (SelectChildrenType & Props);
-export declare const SelectPopoverRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<PopoverProps, never>> & string & Omit<import('react').FC<PopoverProps>, keyof import('react').Component<any, {}, any>>;
+export declare const SelectPopoverRoot: import('react').FC<PopoverProps>;
 export declare const AutoComplete: {
     ({ onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, disabled, value, placeholder, container, ...props }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;
     Group: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1 +1,2 @@
-export declare const BaseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+import { ButtonHTMLAttributes } from 'react';
+export declare const BaseButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,2 +1,2 @@
 import { CardPromotionProps } from './CardPromotion.types';
-export declare const CardPromotion: ({ label, icon, dismissible, ...props }: CardPromotionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardPromotion: ({ label, icon, dismissible, className, ...props }: CardPromotionProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,2 +1,2 @@
 import { CodeBlockProps } from './CodeBlock.types';
-export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, className, style, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CodeBlock/InlineCodeBlock.d.ts

@@ -1,2 +1,2 @@
 import { HTMLAttributes } from 'react';
-export declare const InlineCodeBlock: (props: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineCodeBlock: ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CodeBlock/useColorStyle.d.ts

@@ -1,115 +1,9 @@
+import { CSSProperties } from 'react';
 import { CodeThemeType } from './CodeBlock.types';
-declare const useColorStyle: (defaultTheme?: CodeThemeType) => {
-    hljs: {
-        display: string;
-        overflowX: string;
-        padding: string;
-        color: string;
-        background: string;
-        borderRadius: string;
-        font: string;
-    };
-    'hljs-comment': {
-        color: string;
-    };
-    'hljs-keyword': {
-        color: string;
-    };
-    'hljs-selector-tag': {
-        color: string;
-    };
-    'hljs-meta-keyword': {
-        color: string;
-    };
-    'hljs-doctag': {
-        color: string;
-    };
-    'hljs-section': {
-        color: string;
-    };
-    'hljs-selector-class': {
-        color: string;
-    };
-    'hljs-meta': {
-        color: string;
-    };
-    'hljs-selector-pseudo': {
-        color: string;
-    };
-    'hljs-attr': {
-        color: string;
-    };
-    'hljs-attribute': {
-        color: string;
-    };
-    'hljs-name': {
-        color: string;
-    };
-    'hljs-type': {
-        color: string;
-    };
-    'hljs-number': {
-        color: string;
-    };
-    'hljs-selector-id': {
-        color: string;
-    };
-    'hljs-quote': {
-        color: string;
-    };
-    'hljs-template-tag': {
-        color: string;
-    };
-    'hljs-built_in': {
-        color: string;
-    };
-    'hljs-title': {
-        color: string;
-    };
-    'hljs-literal': {
-        color: string;
-    };
-    'hljs-string': {
-        color: string;
-    };
-    'hljs-regexp': {
-        color: string;
-    };
-    'hljs-symbol': {
-        color: string;
-    };
-    'hljs-variable': {
-        color: string;
-    };
-    'hljs-template-variable': {
-        color: string;
-    };
-    'hljs-link': {
-        color: string;
-    };
-    'hljs-selector-attr': {
-        color: string;
-    };
-    'hljs-meta-string': {
-        color: string;
-    };
-    'hljs-bullet': {
-        color: string;
-    };
-    'hljs-code': {
-        color: string;
-    };
-    'hljs-deletion': {
-        color: string;
-    };
-    'hljs-addition': {
-        color: string;
-    };
-    'hljs-emphasis': {
-        fontStyle: string;
-    };
-    'hljs-strong': {
-        fontWeight: string;
-    };
+declare const useColorStyle: (defaultTheme?: CodeThemeType) => Record<string, CSSProperties>;
+export declare const useNumbersColor: (defaultTheme?: CodeThemeType) => string;
+export declare const useButtonStateColors: () => {
+    success: string;
+    danger: string;
 };
 export default useColorStyle;

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

@@ -14,7 +14,7 @@ export declare const ContextMenu: {
         displayName: string;
     };
     Group: {
-        (props: RightMenu.ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: RightMenu.ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Sub: {

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

@@ -1,7 +1,2 @@
-export declare const CrossButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-}, Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-}>, {
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-}>, never>> & string;
+import { ButtonHTMLAttributes } from 'react';
+export declare const CrossButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -13,11 +13,11 @@ export declare const Dropdown: {
         displayName: string;
     };
     Group: {
-        (props: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Sub: {
-        ({ ...props }: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        (props: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Item: {

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

@@ -1 +1,2 @@
-export declare const EmptyButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+import { ButtonHTMLAttributes } from 'react';
+export declare const EmptyButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -40,9 +40,9 @@ export interface FileTabsProps extends Omit<ReactSortableProps<ItemInterface>, '
     setList?: (newState: ItemInterface[], sortable: Sortable | null, store: Store) => void;
 }
 export declare const FileTabs: {
-    ({ selectedIndex, children, onReorderTab, onClose: onCloseProp, onSelect: onSelectProp, list: listProp, setList: setListProp, onEnd, direction, group, ...props }: FileTabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selectedIndex, children, onReorderTab, onClose: onCloseProp, onSelect: onSelectProp, list: listProp, setList: setListProp, onEnd, direction, group, className, ...props }: FileTabsProps): import("react/jsx-runtime").JSX.Element;
     Tab: {
-        ({ text, index, icon, onMouseDown: onMouseDownProp, status, testId, preview, ...props }: FileTabProps): import("react/jsx-runtime").JSX.Element;
+        ({ text, index, icon, onMouseDown: onMouseDownProp, status, testId, preview, className, ...props }: FileTabProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
@@ -51,5 +51,5 @@ interface FileTabElementProps extends HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     preview?: boolean;
 }
-export declare const FileTabElement: ({ icon, children, active, preview, ...props }: FileTabElementProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileTabElement: ({ icon, children, active, preview, className, ...props }: FileTabElementProps) => import("react/jsx-runtime").JSX.Element;
 export {};