tiny-ui 0.0.95 → 1.0.0

package/es/checkbox/checkbox-group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CheckboxGroupProps } from './types';
+declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CheckboxGroup;

package/es/checkbox/checkbox-group.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect, useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider/config-context';
+import { getPrefixCls } from '../_utils/general';
+import { CheckboxGroupContext } from './checkbox-group-context';
+const CheckboxGroup = React.forwardRef((props, ref) => {
+    const { defaultValue = [], prefixCls: customisedCls, onChange, disabled, className, children, ...otherProps } = props;
+    const configContext = useContext(ConfigContext);
+    const prefixCls = getPrefixCls('checkbox-group', configContext.prefixCls, customisedCls);
+    const cls = classNames(prefixCls, className);
+    const [value, setValue] = useState('value' in props ? props.value : defaultValue);
+    const itemOnChange = (e) => {
+        if (!disabled) {
+            const name = e.currentTarget.name;
+            const newValue = value.includes(name)
+                ? value.filter((v) => v !== name)
+                : [...value, name];
+            !('value' in props) && setValue(newValue);
+            onChange && onChange(newValue);
+        }
+    };
+    useEffect(() => {
+        'value' in props && setValue([...props.value]);
+    }, [props]);
+    return (_jsx(CheckboxGroupContext.Provider, { value: {
+            value,
+            disabled,
+            onChange: itemOnChange,
+        }, children: _jsx("div", { ...otherProps, ref: ref, role: "group", className: cls, children: children }) }));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+export default CheckboxGroup;
+//# sourceMappingURL=checkbox-group.js.map

package/es/checkbox/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../components/checkbox/checkbox-group.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,KAAyB,EAAE,GAAG,EAAsB,EAAE;IACrD,MAAM,EACJ,YAAY,GAAG,EAAE,EACjB,SAAS,EAAE,aAAa,EACxB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACd,GAAG,KAAK,CAAC;IACV,MAAM,aAAa,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,YAAY,CAAC,gBAAgB,EAAE,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACzF,MAAM,GAAG,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAE,KAAK,CAAC,KAAkB,CAAC,CAAC,CAAC,YAAY,CAC5D,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAQ,EAAE;QACpE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC;YAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACnC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;gBACjC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC;YACrB,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAC1C,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,IAAI,KAAK,IAAI,QAAQ,CAAC,CAAC,GAAI,KAAK,CAAC,KAAkB,CAAC,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;YACL,KAAK;YACL,QAAQ;YACR,QAAQ,EAAE,YAAY;SACvB,YACD,iBAAS,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,YACvD,QAAQ,GACL,GACwB,CACjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,eAAe,aAAa,CAAC"}

package/es/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CheckboxProps } from './types';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export default Checkbox;

package/es/checkbox/checkbox.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider/config-context';
+import { getPrefixCls } from '../_utils/general';
+import { CheckboxGroupContext } from './checkbox-group-context';
+const Checkbox = React.forwardRef((props, ref) => {
+    const { defaultChecked = false, indeterminate = false, value, onChange, className, children, checkboxRef, prefixCls: customisedCls, ...otherProps } = props;
+    const configContext = useContext(ConfigContext);
+    const checkboxGroupContext = useContext(CheckboxGroupContext);
+    const initialChecked = 'checked' in props ? props.checked : defaultChecked;
+    const [checked, setChecked] = useState('value' in checkboxGroupContext ? checkboxGroupContext.value === value : initialChecked);
+    const prefixCls = getPrefixCls('checkbox', configContext.prefixCls, customisedCls);
+    const disabled = 'disabled' in props
+        ? props.disabled
+        : 'disabled' in checkboxGroupContext
+            ? checkboxGroupContext.disabled
+            : false;
+    const cls = classNames(prefixCls, className, {
+        [`${prefixCls}_indeterminate`]: indeterminate,
+        [`${prefixCls}_checked`]: checked && !indeterminate,
+        [`${prefixCls}_disabled`]: disabled,
+    });
+    const checkboxOnChange = (e) => {
+        if (!disabled) {
+            !('checked' in props) && setChecked(e.currentTarget.checked);
+            onChange && onChange(e);
+            checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
+        }
+    };
+    useEffect(() => {
+        if ('value' in checkboxGroupContext && typeof checkboxGroupContext.value !== 'undefined' && 'value' in props) {
+            setChecked((checkboxGroupContext.value).includes(value));
+        }
+        'checked' in props && typeof props.checked !== 'undefined' && setChecked(props.checked);
+    }, [props, checkboxGroupContext, value]);
+    return (_jsxs("label", { ...otherProps, ref: ref, className: cls, children: [_jsx("input", { ref: checkboxRef, role: "checkbox", "aria-checked": checked, name: value, disabled: disabled, className: `${prefixCls}__native`, type: "checkbox", checked: checked, onChange: checkboxOnChange }), _jsx("span", { className: `${prefixCls}__inner` }), _jsx("span", { children: children })] }));
+});
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;
+//# sourceMappingURL=checkbox.js.map

package/es/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../components/checkbox/checkbox.tsx"],"names":[],"mappings":"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"}

package/es/checkbox/index.d.ts

@@ -0,0 +1,7 @@
+import Checkbox from './checkbox';
+import CheckboxGroup from './checkbox-group';
+type ICheckbox = typeof Checkbox & {
+    Group: typeof CheckboxGroup;
+};
+declare const DefaultCheckbox: ICheckbox;
+export default DefaultCheckbox;

package/es/checkbox/index.js

@@ -0,0 +1,6 @@
+import Checkbox from './checkbox';
+import CheckboxGroup from './checkbox-group';
+const DefaultCheckbox = Checkbox;
+DefaultCheckbox.Group = CheckboxGroup;
+export default DefaultCheckbox;
+//# sourceMappingURL=index.js.map

package/es/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../components/checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAM7C,MAAM,eAAe,GAAG,QAAqB,CAAC;AAC9C,eAAe,CAAC,KAAK,GAAG,aAAa,CAAC;AAEtC,eAAe,eAAe,CAAC"}

package/es/checkbox/style/_index.scss

@@ -0,0 +1,139 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: $font-size-base;
+  margin-right: 8px;
+  color: var(--ty-color-text);
+  box-sizing: border-box;
+
+  &:hover {
+    .#{$prefix}-checkbox__inner {
+      border-color: var(--ty-color-primary);
+    }
+  }
+
+  &__native {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__inner {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid var(--ty-checkbox-border);
+    background-color: var(--ty-checkbox-bg);
+    transition: 200ms;
+    line-height: 1;
+    vertical-align: middle;
+
+    &:before {
+      content: '';
+      position: absolute;
+      display: block;
+      border: 1px solid var(--ty-checkbox-check-color);
+      margin-top: -1px;
+      left: 3px;
+      right: 3px;
+      top: 50%;
+      transition: all 200ms;
+      transform: scale(0);
+    }
+
+    &:after {
+      transform: rotate(45deg) scaleY(1);
+      pointer-events: none;
+      box-sizing: content-box;
+      border: 2px solid var(--ty-checkbox-check-color);
+      border-left: 0;
+      border-top: 0;
+      height: 7px;
+      left: 4px;
+      position: absolute;
+      top: 1px;
+      width: 4px;
+      transform-origin: center;
+    }
+
+    & + span {
+      padding: 0 5px 0 8px;
+      line-height: 16px;
+    }
+  }
+
+  &_checked {
+    .#{$prefix}-checkbox {
+      &__inner {
+        background-color: var(--ty-color-primary);
+        border-color: var(--ty-color-primary);
+
+        &:after {
+          content: '';
+          transform: rotate(45deg) scale(1);
+        }
+
+        &:before {
+          transform: scale(0);
+        }
+      }
+    }
+  }
+
+  &_indeterminate {
+    .#{$prefix}-checkbox {
+      &__inner {
+        background-color: var(--ty-color-primary);
+        border-color: var(--ty-color-primary);
+
+        &:before {
+          transform: scale(1);
+        }
+
+        &:after {
+          transform: rotate(45deg) scale(0);
+        }
+      }
+    }
+  }
+
+  &_disabled {
+    .#{$prefix}-checkbox {
+      &__native {
+        cursor: not-allowed;
+      }
+
+      &__inner {
+        background-color: var(--ty-checkbox-disabled-bg);
+        border-color: var(--ty-checkbox-border) !important;
+
+        &:after {
+          border-color: var(--ty-color-text-quaternary);
+        }
+
+        & + span {
+          color: var(--ty-color-text-quaternary);
+        }
+      }
+    }
+  }
+
+  &-group {
+    display: inline-block;
+  }
+}

package/es/checkbox/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/checkbox/style/index.js

@@ -0,0 +1,2 @@
+import './index.scss';
+//# sourceMappingURL=index.js.map

package/es/checkbox/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/checkbox/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC"}

package/es/checkbox/types.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseProps } from '../_utils/props';
+export interface CheckboxGroupProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'onChange'> {
+    defaultValue?: string[];
+    value?: string[];
+    onChange?: (checkedValues: string[]) => void;
+    disabled?: boolean;
+}
+export interface CheckboxProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['label']>, 'onChange'> {
+    /** Only required when use checkbox group */
+    value?: string;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    checkboxRef?: React.RefObject<HTMLInputElement>;
+}

package/es/checkbox/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/es/checkbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../components/checkbox/types.ts"],"names":[],"mappings":""}

package/es/col/index.d.ts

@@ -0,0 +1,2 @@
+import Col from '../grid/col';
+export default Col;

package/es/col/index.js

@@ -0,0 +1,3 @@
+import Col from '../grid/col';
+export default Col;
+//# sourceMappingURL=index.js.map

package/es/col/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../components/col/index.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAC;AAE9B,eAAe,GAAG,CAAC"}

package/es/collapse/collapse-context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    activeKeys: string[];
+    onItemClick?: (itemKey: string) => void;
+};
+export declare const CollapseContext: React.Context<Props>;
+export {};

package/es/collapse/collapse-context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const CollapseContext = React.createContext({
+    activeKeys: [],
+});
+//# sourceMappingURL=collapse-context.js.map

package/es/collapse/collapse-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-context.js","sourceRoot":"","sources":["../../components/collapse/collapse-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAQ;IACxD,UAAU,EAAE,EAAE;CACf,CAAC,CAAC"}

package/es/collapse/collapse-panel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CollapsePanelProps } from './types';
+declare const CollapsePanel: {
+    (props: CollapsePanelProps): React.ReactElement;
+    displayName: string;
+};
+export default CollapsePanel;

package/es/collapse/collapse-panel.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId, useRef } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider/config-context';
+import { getPrefixCls } from '../_utils/general';
+import { ArrowDown } from '../_utils/components';
+import CollapseTransition from '../collapse-transition';
+import { CollapseContext } from './collapse-context';
+/**
+ * Allow to parse active status to a node
+ * @param node
+ * @param isActive
+ */
+const richNode = (node, isActive) => {
+    return typeof node === 'function' ? node(isActive) : node;
+};
+const CollapsePanel = (props) => {
+    const { showArrow = true, itemKey, header, disabled, extra, deletable, onHeaderOnClick, className, style, children, prefixCls: customisedCls, } = props;
+    const itemRef = useRef(null);
+    const panelId = useId();
+    const headerId = useId();
+    const configContext = useContext(ConfigContext);
+    const { activeKeys, onItemClick } = useContext(CollapseContext);
+    const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);
+    const active = activeKeys.includes(itemKey);
+    const cls = classNames(prefixCls, className, {
+        [`${prefixCls}_active`]: active,
+    });
+    const headerOnClick = (e) => {
+        if (!disabled) {
+            onHeaderOnClick && onHeaderOnClick(e);
+            onItemClick && onItemClick(itemKey);
+        }
+    };
+    /**
+     * Remove a item from collapse only the header is enabled
+     * @param e
+     * @private
+     */
+    const removeItem = (e) => {
+        e.stopPropagation();
+        if (!disabled) {
+            const node = itemRef.current;
+            node && node.parentNode?.removeChild(node);
+        }
+    };
+    const renderHeader = () => {
+        const headerCls = classNames(`${prefixCls}__header`, {
+            [`${prefixCls}__header_disabled`]: disabled,
+        });
+        const arrowCls = classNames(`${prefixCls}__arrow`, {
+            [`${prefixCls}__arrow_active`]: active,
+        });
+        return (_jsxs("button", { type: "button", id: headerId, className: headerCls, onClick: headerOnClick, "aria-expanded": active, "aria-controls": panelId, "aria-disabled": disabled || undefined, children: [showArrow && _jsx(ArrowDown, { size: 10, className: arrowCls }), _jsx("div", { className: `${prefixCls}__title`, children: richNode(header, active) }), _jsx("div", { className: `${prefixCls}__extra`, children: deletable ? _jsx("span", { onClick: removeItem, children: "\u2715" }) : richNode(extra, active) })] }));
+    };
+    return (_jsxs("div", { className: cls, style: style, ref: itemRef, children: [renderHeader(), _jsx(CollapseTransition, { isShow: active, children: _jsx("div", { className: `${prefixCls}__content`, id: panelId, role: "region", "aria-labelledby": headerId, children: richNode(children, active) }) })] }));
+};
+CollapsePanel.displayName = 'CollapsePanel';
+export default CollapsePanel;
+//# sourceMappingURL=collapse-panel.js.map

package/es/collapse/collapse-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-panel.js","sourceRoot":"","sources":["../../components/collapse/collapse-panel.tsx"],"names":[],"mappings":"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"}

package/es/collapse/collapse.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CollapseProps } from './types';
+declare const Collapse: React.ForwardRefExoticComponent<Omit<CollapseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Collapse;

package/es/collapse/collapse.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect, useContext } from 'react';
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider/config-context';
+import { CollapseContext } from './collapse-context';
+import { getPrefixCls } from '../_utils/general';
+/**
+ * Format active key to array
+ * @param activeKey
+ */
+const toArray = (activeKey) => {
+    return Array.isArray(activeKey) ? activeKey : [activeKey];
+};
+const Collapse = React.forwardRef((props, ref) => {
+    const { showArrow = true, bordered = true, deletable = false, accordion = false, defaultActiveKey = [], prefixCls: customisedCls, activeKey, onChange, className, children, ...otherProps } = props;
+    let currentActiveKey = defaultActiveKey;
+    if (activeKey) {
+        currentActiveKey = activeKey;
+    }
+    const [activeItems, setActiveItems] = useState(toArray(currentActiveKey));
+    const configContext = useContext(ConfigContext);
+    const prefixCls = getPrefixCls('collapse', configContext.prefixCls, customisedCls);
+    const cls = classNames(prefixCls, className, {
+        [`${prefixCls}_borderless`]: !bordered,
+    });
+    const updateActiveItems = (items) => {
+        if (!('activeKey' in props)) {
+            // only for defaultKey
+            setActiveItems(items);
+        }
+        onChange && onChange(items);
+    };
+    const handleOnItemClick = (itemKey) => {
+        let items = activeItems;
+        if (accordion) {
+            items = items[0] === itemKey ? [] : [itemKey];
+        }
+        else {
+            items = [...activeItems];
+            const index = items.indexOf(itemKey);
+            const isActive = index > -1;
+            if (isActive) {
+                // remove active state
+                items.splice(index, 1);
+            }
+            else {
+                items.push(itemKey);
+            }
+        }
+        updateActiveItems(items);
+    };
+    useEffect(() => {
+        // Update state from updated props
+        activeKey && setActiveItems(toArray(activeKey));
+    }, [activeKey]);
+    return (_jsx("div", { ...otherProps, ref: ref, className: cls, children: _jsx(CollapseContext.Provider, { value: {
+                activeKeys: activeItems,
+                onItemClick: handleOnItemClick,
+            }, children: React.Children.map(children, (child, idx) => {
+                const childElement = child;
+                if (childElement.type.displayName === 'CollapsePanel') {
+                    const itemProps = {
+                        deletable,
+                        showArrow,
+                        itemKey: `${idx}`,
+                    };
+                    return React.cloneElement(childElement, itemProps);
+                }
+                return child;
+            }) }) }));
+});
+Collapse.displayName = 'Collapse';
+export default Collapse;
+//# sourceMappingURL=collapse.js.map

package/es/collapse/collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../components/collapse/collapse.tsx"],"names":[],"mappings":"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"}

package/es/collapse/index.d.ts

@@ -0,0 +1,7 @@
+import Collapse from './collapse';
+import CollapsePanel from './collapse-panel';
+type ICollapse = typeof Collapse & {
+    Panel: typeof CollapsePanel;
+};
+declare const DefaultCollapse: ICollapse;
+export default DefaultCollapse;

package/es/collapse/index.js

@@ -0,0 +1,6 @@
+import Collapse from './collapse';
+import CollapsePanel from './collapse-panel';
+const DefaultCollapse = Collapse;
+DefaultCollapse.Panel = CollapsePanel;
+export default DefaultCollapse;
+//# sourceMappingURL=index.js.map

package/es/collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../components/collapse/index.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAM7C,MAAM,eAAe,GAAG,QAAqB,CAAC;AAC9C,eAAe,CAAC,KAAK,GAAG,aAAa,CAAC;AAEtC,eAAe,eAAe,CAAC"}

package/es/collapse/style/_index.scss

@@ -0,0 +1,101 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-collapse {
+  box-sizing: border-box;
+  border-radius: $collapse-border-radius;
+  color: var(--ty-color-text);
+  font-size: 14px;
+  border: 1px solid var(--ty-collapse-border);
+  border-bottom: 0;
+  background-color: var(--ty-collapse-bg);
+  overflow: hidden;
+
+  &-item {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--ty-collapse-border);
+
+    &:last-child {
+      border-radius: 0 0 $collapse-border-radius $collapse-border-radius;
+
+      .#{$prefix}-collapse-item__content {
+        border-radius: 0 0 $collapse-border-radius $collapse-border-radius;
+      }
+    }
+
+    &__header {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      padding: 12px 16px;
+      color: var(--ty-color-text);
+      line-height: 22px;
+      cursor: pointer;
+      transition: all 300ms;
+      background: none;
+      border: none;
+      width: 100%;
+      text-align: left;
+      font-size: inherit;
+      font-family: inherit;
+
+      &:hover {
+        background-color: var(--ty-collapse-header-hover-bg);
+      }
+
+      &_disabled {
+        color: var(--ty-color-text-quaternary);
+        cursor: not-allowed;
+      }
+    }
+
+    &__arrow {
+      margin-right: 10px;
+      transform: rotate(-90deg);
+      text-align: center;
+      color: currentColor;
+      transition: all 300ms;
+
+      &_active {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__title {
+      flex: 1;
+    }
+
+    &__extra {
+      color: inherit;
+      font-size: 11px;
+      margin-left: 15px;
+    }
+
+    &__content {
+      overflow: hidden;
+      color: var(--ty-color-text-secondary);
+      background-color: var(--ty-collapse-content-bg);
+      border-top: 1px solid var(--ty-collapse-border);
+      padding: 16px;
+      box-sizing: border-box;
+      transition: height 300ms;
+    }
+  }
+
+  &_borderless {
+    border: 0;
+    background-color: var(--ty-collapse-borderless-bg);
+  }
+
+  &_borderless > .#{$prefix}-collapse-item {
+    &:last-child {
+      border-radius: 0;
+    }
+  }
+
+  &_borderless > .#{$prefix}-collapse-item > .#{$prefix}-collapse-item__content {
+    border-radius: 0;
+    border-top: 0;
+    padding-top: 4px;
+  }
+}

package/es/collapse/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/collapse/style/index.js

@@ -0,0 +1,2 @@
+import './index.scss';
+//# sourceMappingURL=index.js.map

package/es/collapse/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/collapse/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC"}

package/es/collapse/types.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { BaseProps } from '../_utils/props';
+export interface CollapsePanelProps extends BaseProps {
+    itemKey: string;
+    header: ReactNode;
+    disabled?: boolean;
+    extra?: ReactNode;
+    deletable?: boolean;
+    showArrow?: boolean;
+    onHeaderOnClick?: (e: React.MouseEvent) => void;
+    children?: ReactNode;
+}
+export interface CollapseProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'onChange'> {
+    defaultActiveKey?: string | string[];
+    activeKey?: string | string[];
+    /** Only open one panel */
+    accordion?: boolean;
+    /** Allow to delete */
+    deletable?: boolean;
+    showArrow?: boolean;
+    bordered?: boolean;
+    onChange?: (keys: string | string[]) => void;
+}