@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/button/button.js

@@ -0,0 +1,106 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "onClick", "loading", "size"];
+import { Button as AntdButton } from 'antd';
+import React, { useEffect, useRef } from 'react';
+import { withCustomClassName, withDisabledClass } from "../hooks";
+import { IconLoadingConic } from "../icon/icons/common";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 使用 HOC 链式包装 Button 组件
+var ButtonWithClassName = withCustomClassName(withDisabledClass(AntdButton, {
+  passDisabled: false // 不传递 disabled 给 Ant Design，避免其禁用样式生效
+}), 'slimfit-button');
+
+/**
+ * 根据按钮尺寸获取图标大小
+ */
+var getIconSize = function getIconSize(size) {
+  switch (size) {
+    case 'small':
+      return 14;
+    case 'large':
+      return 18;
+    case 'middle':
+    default:
+      return 16;
+  }
+};
+export var Button = function Button(props) {
+  var disabled = props.disabled,
+    onClick = props.onClick,
+    loading = props.loading,
+    size = props.size,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var btnRef = useRef(null);
+
+  // 当禁用状态时，保存原始颜色到 CSS 变量
+  useEffect(function () {
+    // SSR 兼容性检查
+    if (typeof window === 'undefined') return;
+    if (disabled && btnRef.current) {
+      var computed = window.getComputedStyle(btnRef.current);
+      var bgColor = computed.backgroundColor;
+      var borderColor = computed.borderColor;
+      var textColor = computed.color;
+
+      // 设置 CSS 变量
+      btnRef.current.style.setProperty('--original-bg-color', bgColor);
+      btnRef.current.style.setProperty('--original-border-color', borderColor);
+      btnRef.current.style.setProperty('--original-text-color', textColor);
+    }
+  }, [disabled]);
+
+  // 拦截点击事件
+  var handleClick = function handleClick(e) {
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+
+  // 根据按钮尺寸计算图标大小
+  var iconSize = getIconSize(size);
+
+  // 处理 loading 配置
+  var loadingConfig = React.useMemo(function () {
+    if (!loading) return false;
+
+    // 如果 loading 是对象类型
+    if (_typeof(loading) === 'object') {
+      // 如果用户自定义了 icon，则尊重用户配置
+      if (loading.icon) {
+        return loading;
+      }
+      // 否则合并用户配置和默认图标
+      return _objectSpread(_objectSpread({}, loading), {}, {
+        icon: /*#__PURE__*/_jsx(IconLoadingConic, {
+          spin: true,
+          style: {
+            fontSize: iconSize
+          }
+        })
+      });
+    }
+
+    // 如果 loading 是 boolean，使用默认配置
+    return {
+      icon: /*#__PURE__*/_jsx(IconLoadingConic, {
+        spin: true,
+        style: {
+          fontSize: iconSize
+        }
+      })
+    };
+  }, [loading, iconSize]);
+  return /*#__PURE__*/_jsx(ButtonWithClassName, _objectSpread({
+    ref: btnRef,
+    onClick: handleClick,
+    disabled: disabled,
+    size: size,
+    loading: loadingConfig
+  }, restProps));
+};

package/lib/esm/button/style.css

@@ -0,0 +1,61 @@
+/* Button 组件样式 */
+.slimfit-button {
+  box-shadow: none !important;
+
+  /* 非 primary 的危险按钮 hover 时添加背景色 */
+  &.ant-btn-color-dangerous:not(.ant-btn-variant-solid):not(:disabled):not(
+      .ant-btn-disabled
+    ):not(.slimfit-disabled):hover {
+    background-color: var(--ant-color-error-bg) !important;
+    color: var(--ant-color-error) !important;
+  }
+
+  /* 危险按钮 outlined 变体：统一边框颜色和 loading 图标颜色 */
+  &.ant-btn-color-dangerous.ant-btn-variant-outlined {
+    border-color: var(--ant-button-default-border-color);
+
+    .anticon-spin {
+      color: var(--ant-button-default-hover-color);
+    }
+
+    &:hover {
+      border-color: var(--ant-button-default-border-color) !important;
+    }
+  }
+
+  /* 最小宽度（排除 text/link 类型） */
+  &:not(.ant-btn-text):not(.ant-btn-link) {
+    min-width: 88px;
+  }
+
+  &.ant-btn-sm:not(.ant-btn-text):not(.ant-btn-link) {
+    min-width: 68px;
+  }
+
+  /* 纯图标按钮 */
+  &.ant-btn-icon-only {
+    padding: 7px;
+  }
+
+  /* text 和 link 类型按钮 */
+  &.ant-btn-text,
+  &.ant-btn-link {
+    padding: 0 10px;
+  }
+
+  /* 带图标的按钮样式 */
+  @supports selector(:has(*)) {
+    /* 普通按钮：带图标 */
+    &:not(.ant-btn-icon-only):has(> .ant-btn-icon:first-child) {
+      padding: 0 10px;
+      gap: 4px;
+    }
+
+    /* text/link 按钮：带图标 */
+    &:is(.ant-btn-text, .ant-btn-link):not(.ant-btn-icon-only):has(
+        > .ant-btn-icon:first-child
+      ) {
+      padding: 0 4px;
+    }
+  }
+}

package/lib/esm/calendar/calendar.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarProps as AntdCalendarProps } from 'antd';
+import type { Dayjs } from 'dayjs';
+import React from 'react';
+import './style.less';
+export interface CalendarProps extends AntdCalendarProps<Dayjs> {
+}
+declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;

package/lib/esm/calendar/calendar.js

@@ -0,0 +1,21 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+import { Calendar as AntdCalendar } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { ConfigProvider } from "../config-provider";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Calendar = function Calendar(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {},
+    children: /*#__PURE__*/_jsx(AntdCalendar, _objectSpread({
+      className: classNames('slimfit-calendar', className)
+    }, props))
+  });
+};
+Calendar.displayName = 'Calendar';
+export default Calendar;

package/lib/esm/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Calendar } from './calendar';
+export type { CalendarProps } from './calendar';

package/lib/esm/calendar/index.js

@@ -0,0 +1 @@
+export { default as Calendar } from "./calendar";

package/lib/esm/calendar/style.less

@@ -0,0 +1,51 @@
+@import '../style/index.css';
+
+.slimfit-calendar {
+  .ant-picker-content {
+    thead th {
+      color: var(--color-neutral-500);
+    }
+  }
+
+  &.ant-picker-calendar-mini {
+    .ant-picker-panel {
+      border: none;
+    }
+
+    .ant-picker-cell {
+      color: var(--color-neutral-400);
+    }
+
+    .ant-picker-cell-in-view,
+    thead tr th {
+      color: var(--color-neutral-900);
+    }
+
+    .ant-picker-cell-inner {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 50%;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(
+        .ant-picker-cell-disabled
+      )
+      .ant-picker-cell-inner {
+      background: var(--color-fill-300) !important;
+    }
+
+    .ant-picker-month-panel {
+      .ant-picker-cell-inner {
+        width: 36px;
+        height: 36px;
+        line-height: 36px;
+        padding: 0;
+      }
+    }
+  }
+}

package/lib/esm/cascader/cascader.d.ts

@@ -0,0 +1,13 @@
+import type { CascaderProps as AntdCascaderProps } from 'antd';
+import { Cascader as AntdCascader } from 'antd';
+import React from 'react';
+import type { WithFormModeProps } from '../form-mode/types';
+import './style.less';
+export type CascaderProps = AntdCascaderProps & WithFormModeProps;
+declare const CascaderComponent: React.ForwardRefExoticComponent<Omit<Omit<AntdCascaderProps<import("antd/es/cascader").DefaultOptionType, string, boolean> & WithFormModeProps & React.RefAttributes<any>, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+type CompoundCascader = typeof CascaderComponent & {
+    SHOW_CHILD: typeof AntdCascader.SHOW_CHILD;
+    SHOW_PARENT: typeof AntdCascader.SHOW_PARENT;
+};
+declare const Cascader: CompoundCascader;
+export default Cascader;

package/lib/esm/cascader/cascader.js

@@ -0,0 +1,188 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["suffixIcon", "maxTagPlaceholder", "tagRender", "disabled", "multiple", "value", "defaultValue", "optionRender", "open", "onDropdownVisibleChange", "onChange", "expandIcon"];
+import { Cascader as AntdCascader, Popover } from 'antd';
+import React, { useState } from 'react';
+import { Trans } from 'react-i18next';
+import { withFormMode } from "../form-mode";
+import { useLocale, withCustomClassName, withCustomClearIcon, withDisabledClass } from "../hooks";
+import { IconDropdown, IconExpand2, IconExpandRight } from "../icon";
+import i18n from "../locale";
+import { Tag } from "../tag";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 先使用 HOC 为 AntdCascader 添加自定义 clearIcon 支持
+var AntdCascaderWithClearIcon = withCustomClearIcon(AntdCascader, 'AntdCascaderWithClearIcon');
+
+// PopoverMaxTagPlaceholder 组件 - 显示超出标签的气泡
+
+var PopoverMaxTagPlaceholder = function PopoverMaxTagPlaceholder(_ref) {
+  var omittedValues = _ref.omittedValues,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverOpen = _useState2[0],
+    setPopoverOpen = _useState2[1];
+
+  // 构建气泡内容 - 使用 Tag 组件展示超出的标签
+  var popoverContent = /*#__PURE__*/_jsx("div", {
+    className: "slimfit-cascader-popover-content",
+    children: omittedValues.map(function (value) {
+      // 使用 value 值作为唯一标识符
+      var uniqueKey = Array.isArray(value) ? value.join('-') : value;
+      var displayLabel = Array.isArray(value === null || value === void 0 ? void 0 : value.label) ? value.label.join(' / ') : (value === null || value === void 0 ? void 0 : value.label) || (Array.isArray(value) ? value.join(' / ') : value);
+      return /*#__PURE__*/_jsx(Tag, {
+        type: "shallow",
+        disabled: disabled,
+        children: displayLabel
+      }, uniqueKey);
+    })
+  });
+
+  // 气泡触发文本
+  var triggerText = /*#__PURE__*/_jsx(Trans, {
+    i18n: i18n,
+    i18nKey: "Select.maxTagPlaceholder",
+    values: {
+      count: omittedValues.length
+    },
+    components: {
+      highlight: /*#__PURE__*/_jsx("span", {
+        style: {
+          color: disabled ? 'var(--color-fi-400)' : 'var(--color-fi-600)'
+        }
+      })
+    }
+  });
+  return /*#__PURE__*/_jsx(Popover, {
+    content: popoverContent,
+    trigger: "hover",
+    open: popoverOpen,
+    onOpenChange: setPopoverOpen,
+    placement: "topRight",
+    arrow: true,
+    children: /*#__PURE__*/_jsx("span", {
+      className: disabled ? 'slimfit-disabled' : '',
+      children: triggerText
+    })
+  });
+};
+
+// 自定义 Cascader 组件，支持动态 suffixIcon 和默认 maxTagPlaceholder
+var CustomCascader = function CustomCascader(_ref2) {
+  var suffixIcon = _ref2.suffixIcon,
+    maxTagPlaceholder = _ref2.maxTagPlaceholder,
+    tagRender = _ref2.tagRender,
+    disabled = _ref2.disabled,
+    multiple = _ref2.multiple,
+    externalValue = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    optionRender = _ref2.optionRender,
+    externalOpen = _ref2.open,
+    onDropdownVisibleChange = _ref2.onDropdownVisibleChange,
+    onChange = _ref2.onChange,
+    expandIcon = _ref2.expandIcon,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalOpen = _useState4[0],
+    setInternalOpen = _useState4[1];
+  // 维护内部选中值状态，用于判断 checkbox 选中状态
+  var _useState5 = useState(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    internalValue = _useState6[0],
+    setInternalValue = _useState6[1];
+  useLocale(); // 确保语言同步
+
+  // 优先使用外部 open，否则使用内部状态
+  var open = externalOpen !== undefined ? externalOpen : internalOpen;
+
+  // 获取当前实际的选中值（受控或非受控）
+  var currentValue = externalValue !== undefined ? externalValue : internalValue;
+
+  // 根据展开状态动态切换图标
+  var dynamicSuffixIcon = open ? /*#__PURE__*/_jsx(IconExpand2, {}) : /*#__PURE__*/_jsx(IconDropdown, {});
+
+  // 默认的 expandIcon
+  var defaultExpandIcon = /*#__PURE__*/_jsx(IconExpandRight, {});
+
+  // 默认的 maxTagPlaceholder 实现
+  var defaultMaxTagPlaceholder = function defaultMaxTagPlaceholder(omittedValues) {
+    return /*#__PURE__*/_jsx(PopoverMaxTagPlaceholder, {
+      omittedValues: omittedValues,
+      disabled: disabled
+    });
+  };
+
+  // 默认的 tagRender 实现 - 使用本地 Tag 组件
+  var defaultTagRender = function defaultTagRender(props) {
+    var label = props.label,
+      closable = props.closable,
+      _onClose = props.onClose;
+    return /*#__PURE__*/_jsx(Tag, {
+      closable: closable,
+      onClose: function onClose(e) {
+        // 阻止事件冒泡，防止触发下拉框
+        e.stopPropagation();
+        _onClose === null || _onClose === void 0 || _onClose(e);
+      },
+      type: "shallow",
+      category: true,
+      disabled: disabled,
+      style: disabled ? {
+        backgroundColor: 'var(--color-fill-100)'
+      } : undefined,
+      children: label
+    });
+  };
+
+  // 处理 dropdown 可见性变化
+  var handleDropdownVisibleChange = function handleDropdownVisibleChange(visible) {
+    setInternalOpen(visible);
+    onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(visible);
+  };
+
+  // 处理值变化
+  var handleChange = function handleChange(newValue, selectedOptions) {
+    // 更新内部状态（用于非受控模式）
+    if (externalValue === undefined) {
+      setInternalValue(newValue);
+    }
+    // 调用外部 onChange
+    onChange === null || onChange === void 0 || onChange(newValue, selectedOptions);
+  };
+  return /*#__PURE__*/_jsx(AntdCascaderWithClearIcon, _objectSpread(_objectSpread({
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return triggerNode.parentElement || document.body;
+    }
+  }, props), {}, {
+    multiple: multiple,
+    value: externalValue,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    open: open,
+    onDropdownVisibleChange: handleDropdownVisibleChange,
+    onChange: handleChange,
+    suffixIcon: suffixIcon !== undefined ? suffixIcon : dynamicSuffixIcon,
+    expandIcon: expandIcon !== undefined ? expandIcon : defaultExpandIcon,
+    maxTagPlaceholder: maxTagPlaceholder !== undefined ? maxTagPlaceholder : defaultMaxTagPlaceholder,
+    tagRender: tagRender !== undefined ? tagRender : defaultTagRender
+  }));
+};
+
+// 使用 HOC 链式包装 Cascader 组件
+var CascaderWithClassName = withCustomClassName(withDisabledClass(CustomCascader), 'slimfit-cascader');
+
+// 使用 HOC 包装
+var CascaderComponent = withFormMode(CascaderWithClassName, 'cascader');
+
+// 创建复合组件类型
+
+var Cascader = CascaderComponent;
+
+// 支持复合组件
+Cascader.SHOW_CHILD = AntdCascader.SHOW_CHILD;
+Cascader.SHOW_PARENT = AntdCascader.SHOW_PARENT;
+export default Cascader;

package/lib/esm/cascader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Cascader } from './cascader';
+export type { CascaderProps } from './cascader';

package/lib/esm/cascader/index.js

@@ -0,0 +1 @@
+export { default as Cascader } from "./cascader";

package/lib/esm/cascader/style.less

@@ -0,0 +1,70 @@
+@import '../style/index.css';
+@import '../checkbox/style.less';
+
+// SlimFit Cascader 组件样式
+
+// 下拉菜单样式
+.ant-cascader-dropdown {
+  // 复用 checkbox 样式（选中、半选、禁用状态）
+  .slimfit-checkbox-common(@prefix: ant-cascader-checkbox);
+  .ant-cascader-menu-item-expand-icon {
+    line-height: 1;
+    font-size: 16px;
+    color: var(--color-neutral-800) !important;
+  }
+  .ant-cascader-menu-item {
+    border-radius: 0;
+  }
+  // 下拉选项 hover 样式
+  .ant-cascader-menu-item:hover {
+    background-color: var(--color-fill-300) !important;
+  }
+
+  // 下拉选项 active 样式
+  .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+    background-color: var(--color-fi-100) !important;
+  }
+
+  // 多选模式下,当选项包含选中或半选状态的 checkbox 时也应用 active 样式
+  // .ant-cascader-menu-item:has(.ant-cascader-checkbox-indeterminate),
+  // .ant-cascader-menu-item:has(.ant-cascader-checkbox-checked) {
+  //   background-color: var(--color-fi-100) !important;
+  // }
+
+  // 选中状态样式
+  .ant-cascader-menu-item-selected {
+    background-color: var(--color-fi-100);
+    .ant-cascader-menu-item-content {
+      color: var(--color-fi-600);
+    }
+  }
+}
+
+// Popover MaxTagPlaceholder 组件样式
+.slimfit-cascader-popover-content {
+  max-width: 450px;
+  max-height: calc(7 * 28px); // 7 行最大高度，每行约 28px
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  .slimfit-tag {
+    margin-bottom: 8px;
+  }
+}
+
+// 多选模式下的 checkbox 选项样式
+.slimfit-cascader-option-with-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  .slimfit-checkbox {
+    pointer-events: none; // 防止 checkbox 干扰 Cascader 的点击事件
+  }
+}

package/lib/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { Checkbox as AntdCheckbox, type CheckboxProps as AntdCheckboxProps, type CheckboxRef } from 'antd';
+import React from 'react';
+import './style.less';
+export interface CheckboxProps extends AntdCheckboxProps {
+}
+export type CheckboxGroupProps = React.ComponentProps<typeof AntdCheckbox.Group>;
+declare const CheckboxComponent: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxRef>>;
+type CompoundCheckbox = typeof CheckboxComponent & {
+    Group: typeof AntdCheckbox.Group;
+};
+declare const Checkbox: CompoundCheckbox;
+export default Checkbox;

package/lib/esm/checkbox/checkbox.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+import { Checkbox as AntdCheckbox } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { ConfigProvider } from "../config-provider";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var CheckboxComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {},
+    children: /*#__PURE__*/_jsx(AntdCheckbox, _objectSpread(_objectSpread({
+      ref: ref,
+      className: classNames('slimfit-checkbox', className)
+    }, props), {}, {
+      children: children
+    }))
+  });
+});
+CheckboxComponent.displayName = 'Checkbox';
+
+// 创建复合组件类型
+
+var Checkbox = CheckboxComponent;
+
+// 支持复合组件
+Checkbox.Group = AntdCheckbox.Group;
+export default Checkbox;

package/lib/esm/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './checkbox';
+export type { CheckboxGroupProps, CheckboxProps } from './checkbox';

package/lib/esm/checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from "./checkbox";

package/lib/esm/checkbox/style.less

@@ -0,0 +1,54 @@
+@import '../style/theme-vars.css';
+
+.slimfit-checkbox-common (@prefix) {
+  .@{prefix}-checked {
+    background-color: var(--color-fi-600);
+  }
+
+  .@{prefix}-checked .@{prefix}-inner {
+    border: none;
+  }
+
+  .@{prefix}-indeterminate {
+    .@{prefix}-inner {
+      background-color: var(--color-fi-600) !important;
+      border: none;
+    }
+
+    .@{prefix}-inner:after {
+      top: 50%;
+      inset-inline-start: 50%;
+      width: 0.625rem;
+      height: 0.125rem;
+      background-color: #4a50ff;
+      border: 0;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+      content: '';
+      background-color: var(--color-neutral-0);
+    }
+  }
+
+  // 禁用状态
+  .@{prefix}-disabled {
+    &.@{prefix}-checked {
+      background-color: var(--color-fi-300);
+
+      .@{prefix}-inner:after {
+        border-color: var(--color-neutral-0);
+      }
+    }
+
+    &.@{prefix}-indeterminate .@{prefix}-inner {
+      background-color: var(--color-fi-300) !important;
+
+      &:after {
+        background-color: var(--color-neutral-0);
+      }
+    }
+  }
+}
+
+.slimfit-checkbox {
+  .slimfit-checkbox-common(@prefix: ant-checkbox);
+}

package/lib/esm/color/ColorPalette.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './style.css';
+import type { ColorPaletteProps } from './types';
+export declare const ColorPalette: React.FC<ColorPaletteProps>;
+export default ColorPalette;