@tiny-design/react 1.0.4

package/es/checkbox/style/index.css

@@ -0,0 +1,106 @@
+.ty-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: 1rem;
+  margin-right: 8px;
+  color: var(--ty-color-text);
+  box-sizing: border-box;
+}
+.ty-checkbox:hover .ty-checkbox__inner {
+  border-color: var(--ty-color-primary);
+}
+.ty-checkbox__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;
+}
+.ty-checkbox__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;
+}
+.ty-checkbox__inner: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);
+}
+.ty-checkbox__inner: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;
+}
+.ty-checkbox__inner + span {
+  padding: 0 5px 0 8px;
+  line-height: 16px;
+}
+.ty-checkbox_checked .ty-checkbox__inner {
+  background-color: var(--ty-color-primary);
+  border-color: var(--ty-color-primary);
+}
+.ty-checkbox_checked .ty-checkbox__inner:after {
+  content: "";
+  transform: rotate(45deg) scale(1);
+}
+.ty-checkbox_checked .ty-checkbox__inner:before {
+  transform: scale(0);
+}
+.ty-checkbox_indeterminate .ty-checkbox__inner {
+  background-color: var(--ty-color-primary);
+  border-color: var(--ty-color-primary);
+}
+.ty-checkbox_indeterminate .ty-checkbox__inner:before {
+  transform: scale(1);
+}
+.ty-checkbox_indeterminate .ty-checkbox__inner:after {
+  transform: rotate(45deg) scale(0);
+}
+.ty-checkbox_disabled .ty-checkbox__native {
+  cursor: not-allowed;
+}
+.ty-checkbox_disabled .ty-checkbox__inner {
+  background-color: var(--ty-checkbox-disabled-bg);
+  border-color: var(--ty-checkbox-border) !important;
+}
+.ty-checkbox_disabled .ty-checkbox__inner:after {
+  border-color: var(--ty-color-text-quaternary);
+}
+.ty-checkbox_disabled .ty-checkbox__inner + span {
+  color: var(--ty-color-text-quaternary);
+}
+.ty-checkbox-group {
+  display: inline-block;
+}

package/es/checkbox/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/checkbox/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/checkbox/types.d.ts

@@ -0,0 +1,23 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/checkbox/types.d.ts
+interface CheckboxGroupProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'onChange'> {
+  defaultValue?: string[];
+  value?: string[];
+  onChange?: (checkedValues: string[]) => void;
+  disabled?: boolean;
+}
+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>;
+}
+//#endregion
+export { CheckboxGroupProps, CheckboxProps };
+//# sourceMappingURL=types.d.ts.map

package/es/col/index.d.ts

@@ -0,0 +1 @@
+import { Col } from "../grid/col.js";

package/es/col/index.js

@@ -0,0 +1,7 @@
+import Col from "../grid/col.js";
+//#region src/col/index.tsx
+var col_default = Col;
+//#endregion
+export { col_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/col/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/col/index.tsx"],"sourcesContent":["import Col from '../grid/col';\n\nexport default Col;\n"],"mappings":";;AAEA,IAAA,cAAe"}

package/es/collapse/collapse-context.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-context.js","names":[],"sources":["../../src/collapse/collapse-context.ts"],"sourcesContent":["import React from 'react';\n\ntype Props = {\n  activeKeys: string[];\n  onItemClick?: (itemKey: string) => void;\n};\n\nexport const CollapseContext = React.createContext<Props>({\n  activeKeys: [],\n});\n"],"mappings":";;AAOA,MAAa,kBAAkB,MAAM,cAAqB,EACxD,YAAY,EAAE,EACf,CAAC"}

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

@@ -0,0 +1,11 @@
+import { CollapsePanelProps } from "./types.js";
+import React from "react";
+
+//#region src/collapse/collapse-panel.d.ts
+declare const CollapsePanel: {
+  (props: CollapsePanelProps): React.ReactElement;
+  displayName: string;
+};
+//#endregion
+export { CollapsePanel };
+//# sourceMappingURL=collapse-panel.d.ts.map

package/es/collapse/collapse-panel.js

@@ -0,0 +1,96 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { ArrowDown } from "../_utils/components.js";
+import { CollapseContext } from "./collapse-context.js";
+import collapse_transition_default from "../collapse-transition/index.js";
+import { useContext, useId, useRef } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/collapse/collapse-panel.tsx
+/**
+* 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 /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			id: headerId,
+			className: headerCls,
+			onClick: headerOnClick,
+			"aria-expanded": active,
+			"aria-controls": panelId,
+			"aria-disabled": disabled || void 0,
+			children: [
+				showArrow && /* @__PURE__ */ jsx(ArrowDown, {
+					size: 10,
+					className: arrowCls
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__title`,
+					children: richNode(header, active)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__extra`,
+					children: deletable ? /* @__PURE__ */ jsx("span", {
+						onClick: removeItem,
+						children: "✕"
+					}) : richNode(extra, active)
+				})
+			]
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls,
+		style,
+		ref: itemRef,
+		children: [renderHeader(), /* @__PURE__ */ jsx(collapse_transition_default, {
+			isShow: active,
+			children: /* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__content`,
+				id: panelId,
+				role: "region",
+				"aria-labelledby": headerId,
+				children: richNode(children, active)
+			})
+		})]
+	});
+};
+CollapsePanel.displayName = "CollapsePanel";
+//#endregion
+export { CollapsePanel as default };
+
+//# sourceMappingURL=collapse-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-panel.js","names":["CollapseTransition"],"sources":["../../src/collapse/collapse-panel.tsx"],"sourcesContent":["import React, { useContext, useId, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CollapsePanelProps } from './types';\nimport { ArrowDown } from '../_utils/components';\nimport CollapseTransition from '../collapse-transition';\nimport { CollapseContext } from './collapse-context';\n\n/**\n * Allow to parse active status to a node\n * @param node\n * @param isActive\n */\nconst richNode = (node: React.ReactNode | ((isActive: boolean) => React.ReactNode), isActive: boolean) => {\n  return typeof node === 'function' ? node(isActive) : node;\n};\n\nconst CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {\n  const {\n    showArrow = true,\n    itemKey,\n    header,\n    disabled,\n    extra,\n    deletable,\n    onHeaderOnClick,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n  } = props;\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const panelId = useId();\n  const headerId = useId();\n  const configContext = useContext(ConfigContext);\n  const { activeKeys, onItemClick } = useContext(CollapseContext);\n  const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);\n  const active = activeKeys.includes(itemKey);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_active`]: active,\n  });\n\n  const headerOnClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      onHeaderOnClick && onHeaderOnClick(e);\n      onItemClick && onItemClick(itemKey);\n    }\n  };\n\n  /**\n   * Remove a item from collapse only the header is enabled\n   * @param e\n   * @private\n   */\n  const removeItem = (e: React.MouseEvent<HTMLSpanElement>) => {\n    e.stopPropagation();\n    if (!disabled) {\n      const node = itemRef.current;\n      node && node.parentNode?.removeChild(node);\n    }\n  };\n\n  const renderHeader = () => {\n    const headerCls = classNames(`${prefixCls}__header`, {\n      [`${prefixCls}__header_disabled`]: disabled,\n    });\n    const arrowCls = classNames(`${prefixCls}__arrow`, {\n      [`${prefixCls}__arrow_active`]: active,\n    });\n\n    return (\n      <button\n        type=\"button\"\n        id={headerId}\n        className={headerCls}\n        onClick={headerOnClick}\n        aria-expanded={active}\n        aria-controls={panelId}\n        aria-disabled={disabled || undefined}>\n        {showArrow && <ArrowDown size={10} className={arrowCls} />}\n        <div className={`${prefixCls}__title`}>{richNode(header, active)}</div>\n        <div className={`${prefixCls}__extra`}>\n          {deletable ? <span onClick={removeItem}>✕</span> : richNode(extra, active)}\n        </div>\n      </button>\n    );\n  };\n\n  return (\n    <div className={cls} style={style} ref={itemRef}>\n      {renderHeader()}\n      <CollapseTransition isShow={active}>\n        <div className={`${prefixCls}__content`} id={panelId} role=\"region\" aria-labelledby={headerId}>{richNode(children, active)}</div>\n      </CollapseTransition>\n    </div>\n  );\n};\n\nCollapsePanel.displayName = 'CollapsePanel';\n\nexport default CollapsePanel;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,YAAY,MAAkE,aAAsB;AACxG,QAAO,OAAO,SAAS,aAAa,KAAK,SAAS,GAAG;;AAGvD,MAAM,iBAAiB,UAAkD;CACvE,MAAM,EACJ,YAAY,MACZ,SACA,QACA,UACA,OACA,WACA,iBACA,WACA,OACA,UACA,WAAW,kBACT;CACJ,MAAM,UAAU,OAA8B,KAAK;CACnD,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,OAAO;CACxB,MAAM,gBAAgB,WAAW,cAAc;CAC/C,MAAM,EAAE,YAAY,gBAAgB,WAAW,gBAAgB;CAC/D,MAAM,YAAY,aAAa,iBAAiB,cAAc,WAAW,cAAc;CACvF,MAAM,SAAS,WAAW,SAAS,QAAQ;CAC3C,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,WAAW,QAC1B,CAAC;CAEF,MAAM,iBAAiB,MAAwB;AAC7C,MAAI,CAAC,UAAU;AACb,sBAAmB,gBAAgB,EAAE;AACrC,kBAAe,YAAY,QAAQ;;;;;;;;CASvC,MAAM,cAAc,MAAyC;AAC3D,IAAE,iBAAiB;AACnB,MAAI,CAAC,UAAU;GACb,MAAM,OAAO,QAAQ;AACrB,WAAQ,KAAK,YAAY,YAAY,KAAK;;;CAI9C,MAAM,qBAAqB;EACzB,MAAM,YAAY,WAAW,GAAG,UAAU,WAAW,GAClD,GAAG,UAAU,qBAAqB,UACpC,CAAC;EACF,MAAM,WAAW,WAAW,GAAG,UAAU,UAAU,GAChD,GAAG,UAAU,kBAAkB,QACjC,CAAC;AAEF,SACE,qBAAC,UAAD;GACE,MAAK;GACL,IAAI;GACJ,WAAW;GACX,SAAS;GACT,iBAAe;GACf,iBAAe;GACf,iBAAe,YAAY,KAAA;aAP7B;IAQG,aAAa,oBAAC,WAAD;KAAW,MAAM;KAAI,WAAW;KAAY,CAAA;IAC1D,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAAW,SAAS,QAAQ,OAAO;KAAO,CAAA;IACvE,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAC1B,YAAY,oBAAC,QAAD;MAAM,SAAS;gBAAY;MAAQ,CAAA,GAAG,SAAS,OAAO,OAAO;KACtE,CAAA;IACC;;;AAIb,QACE,qBAAC,OAAD;EAAK,WAAW;EAAY;EAAO,KAAK;YAAxC,CACG,cAAc,EACf,oBAACA,6BAAD;GAAoB,QAAQ;aAC1B,oBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;IAAY,IAAI;IAAS,MAAK;IAAS,mBAAiB;cAAW,SAAS,UAAU,OAAO;IAAO,CAAA;GAC9G,CAAA,CACjB;;;AAIV,cAAc,cAAc"}

package/es/collapse/collapse.d.ts

@@ -0,0 +1,8 @@
+import { CollapseProps } from "./types.js";
+import React from "react";
+
+//#region src/collapse/collapse.d.ts
+declare const Collapse: React.ForwardRefExoticComponent<Omit<CollapseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Collapse };
+//# sourceMappingURL=collapse.d.ts.map

package/es/collapse/collapse.js

@@ -0,0 +1,68 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { CollapseContext } from "./collapse-context.js";
+import React, { useContext, useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/collapse/collapse.tsx
+/**
+* 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 prefixCls = getPrefixCls("collapse", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, { [`${prefixCls}_borderless`]: !bordered });
+	const updateActiveItems = (items) => {
+		if (!("activeKey" in props)) 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);
+			if (index > -1) items.splice(index, 1);
+			else items.push(itemKey);
+		}
+		updateActiveItems(items);
+	};
+	useEffect(() => {
+		activeKey && setActiveItems(toArray(activeKey));
+	}, [activeKey]);
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		children: /* @__PURE__ */ 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";
+//#endregion
+export { Collapse as default };
+
+//# sourceMappingURL=collapse.js.map

package/es/collapse/collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.js","names":[],"sources":["../../src/collapse/collapse.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { CollapseContext } from './collapse-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CollapsePanelProps, CollapseProps } from './types';\n\n/**\n * Format active key to array\n * @param activeKey\n */\nconst toArray = (activeKey: string | string[]): string[] => {\n  return Array.isArray(activeKey) ? activeKey : [activeKey];\n};\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(\n  (props: CollapseProps, ref): React.ReactElement => {\n    const {\n      showArrow = true,\n      bordered = true,\n      deletable = false,\n      accordion = false,\n      defaultActiveKey = [],\n      prefixCls: customisedCls,\n      activeKey,\n      onChange,\n      className,\n      children,\n      ...otherProps\n    } = props;\n    let currentActiveKey: string | string[] = defaultActiveKey;\n    if (activeKey) {\n      currentActiveKey = activeKey;\n    }\n    const [activeItems, setActiveItems] = useState<string[]>(toArray(currentActiveKey));\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('collapse', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className, {\n      [`${prefixCls}_borderless`]: !bordered,\n    });\n\n    const updateActiveItems = (items: string[]) => {\n      if (!('activeKey' in props)) {\n        // only for defaultKey\n        setActiveItems(items);\n      }\n      onChange && onChange(items);\n    };\n\n    const handleOnItemClick = (itemKey: string) => {\n      let items = activeItems;\n      if (accordion) {\n        items = items[0] === itemKey ? [] : [itemKey];\n      } else {\n        items = [...activeItems];\n        const index = items.indexOf(itemKey);\n        const isActive = index > -1;\n        if (isActive) {\n          // remove active state\n          items.splice(index, 1);\n        } else {\n          items.push(itemKey);\n        }\n      }\n      updateActiveItems(items);\n    };\n\n    useEffect(() => {\n      // Update state from updated props\n      activeKey && setActiveItems(toArray(activeKey));\n    }, [activeKey]);\n\n    return (\n      <div {...otherProps} ref={ref} className={cls}>\n        <CollapseContext.Provider\n          value={{\n            activeKeys: activeItems,\n            onItemClick: handleOnItemClick,\n          }}>\n          {React.Children.map(children, (child, idx) => {\n            const childElement = child as React.FunctionComponentElement<CollapsePanelProps>;\n            if (childElement.type.displayName === 'CollapsePanel') {\n              const itemProps: Partial<CollapsePanelProps> = {\n                deletable,\n                showArrow,\n                itemKey: `${idx}`,\n              };\n              return React.cloneElement(childElement, itemProps);\n            }\n            return child;\n          })}\n        </CollapseContext.Provider>\n      </div>\n    );\n  }\n);\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,WAAW,cAA2C;AAC1D,QAAO,MAAM,QAAQ,UAAU,GAAG,YAAY,CAAC,UAAU;;AAG3D,MAAM,WAAW,MAAM,YACpB,OAAsB,QAA4B;CACjD,MAAM,EACJ,YAAY,MACZ,WAAW,MACX,YAAY,OACZ,YAAY,OACZ,mBAAmB,EAAE,EACrB,WAAW,eACX,WACA,UACA,WACA,UACA,GAAG,eACD;CACJ,IAAI,mBAAsC;AAC1C,KAAI,UACF,oBAAmB;CAErB,MAAM,CAAC,aAAa,kBAAkB,SAAmB,QAAQ,iBAAiB,CAAC;CAEnF,MAAM,YAAY,aAAa,YADT,WAAW,cAAc,CACU,WAAW,cAAc;CAClF,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,eAAe,CAAC,UAC/B,CAAC;CAEF,MAAM,qBAAqB,UAAoB;AAC7C,MAAI,EAAE,eAAe,OAEnB,gBAAe,MAAM;AAEvB,cAAY,SAAS,MAAM;;CAG7B,MAAM,qBAAqB,YAAoB;EAC7C,IAAI,QAAQ;AACZ,MAAI,UACF,SAAQ,MAAM,OAAO,UAAU,EAAE,GAAG,CAAC,QAAQ;OACxC;AACL,WAAQ,CAAC,GAAG,YAAY;GACxB,MAAM,QAAQ,MAAM,QAAQ,QAAQ;AAEpC,OADiB,QAAQ,GAGvB,OAAM,OAAO,OAAO,EAAE;OAEtB,OAAM,KAAK,QAAQ;;AAGvB,oBAAkB,MAAM;;AAG1B,iBAAgB;AAEd,eAAa,eAAe,QAAQ,UAAU,CAAC;IAC9C,CAAC,UAAU,CAAC;AAEf,QACE,oBAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;YACxC,oBAAC,gBAAgB,UAAjB;GACE,OAAO;IACL,YAAY;IACZ,aAAa;IACd;aACA,MAAM,SAAS,IAAI,WAAW,OAAO,QAAQ;IAC5C,MAAM,eAAe;AACrB,QAAI,aAAa,KAAK,gBAAgB,iBAAiB;KACrD,MAAM,YAAyC;MAC7C;MACA;MACA,SAAS,GAAG;MACb;AACD,YAAO,MAAM,aAAa,cAAc,UAAU;;AAEpD,WAAO;KACP;GACuB,CAAA;EACvB,CAAA;EAGX;AAED,SAAS,cAAc"}

package/es/collapse/index.d.ts

@@ -0,0 +1,11 @@
+import { Collapse } from "./collapse.js";
+import { CollapsePanel } from "./collapse-panel.js";
+
+//#region src/collapse/index.d.ts
+type ICollapse = typeof Collapse & {
+  Panel: typeof CollapsePanel;
+};
+declare const DefaultCollapse: ICollapse;
+//#endregion
+export { DefaultCollapse };
+//# sourceMappingURL=index.d.ts.map

package/es/collapse/index.js

@@ -0,0 +1,11 @@
+import '../style/base.css';
+import './style/index.css';
+import Collapse from "./collapse.js";
+import CollapsePanel from "./collapse-panel.js";
+//#region src/collapse/index.tsx
+const DefaultCollapse = Collapse;
+DefaultCollapse.Panel = CollapsePanel;
+//#endregion
+export { DefaultCollapse as default };
+
+//# sourceMappingURL=index.js.map

package/es/collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/collapse/index.tsx"],"sourcesContent":["import Collapse from './collapse';\nimport CollapsePanel from './collapse-panel';\n\ntype ICollapse = typeof Collapse & {\n  Panel: typeof CollapsePanel;\n};\n\nconst DefaultCollapse = Collapse as ICollapse;\nDefaultCollapse.Panel = CollapsePanel;\n\nexport default DefaultCollapse;\n"],"mappings":";;;AAOA,MAAM,kBAAkB;AACxB,gBAAgB,QAAQ"}

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/index.css

@@ -0,0 +1,83 @@
+.ty-collapse {
+  box-sizing: border-box;
+  border-radius: 2px;
+  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;
+}
+.ty-collapse-item {
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--ty-collapse-border);
+}
+.ty-collapse-item:last-child {
+  border-radius: 0 0 2px 2px;
+}
+.ty-collapse-item:last-child .ty-collapse-item__content {
+  border-radius: 0 0 2px 2px;
+}
+.ty-collapse-item__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;
+}
+.ty-collapse-item__header:hover {
+  background-color: var(--ty-collapse-header-hover-bg);
+}
+.ty-collapse-item__header_disabled {
+  color: var(--ty-color-text-quaternary);
+  cursor: not-allowed;
+}
+.ty-collapse-item__arrow {
+  margin-right: 10px;
+  transform: rotate(-90deg);
+  text-align: center;
+  color: currentColor;
+  transition: all 300ms;
+}
+.ty-collapse-item__arrow_active {
+  transform: rotate(0deg);
+}
+.ty-collapse-item__title {
+  flex: 1;
+}
+.ty-collapse-item__extra {
+  color: inherit;
+  font-size: 11px;
+  margin-left: 15px;
+}
+.ty-collapse-item__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;
+}
+.ty-collapse_borderless {
+  border: 0;
+  background-color: var(--ty-collapse-borderless-bg);
+}
+.ty-collapse_borderless > .ty-collapse-item:last-child {
+  border-radius: 0;
+}
+.ty-collapse_borderless > .ty-collapse-item > .ty-collapse-item__content {
+  border-radius: 0;
+  border-top: 0;
+  padding-top: 4px;
+}

package/es/collapse/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/collapse/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/collapse/types.d.ts

@@ -0,0 +1,28 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactNode } from "react";
+
+//#region src/collapse/types.d.ts
+interface CollapsePanelProps extends BaseProps {
+  itemKey: string;
+  header: ReactNode;
+  disabled?: boolean;
+  extra?: ReactNode;
+  deletable?: boolean;
+  showArrow?: boolean;
+  onHeaderOnClick?: (e: React.MouseEvent) => void;
+  children?: ReactNode;
+}
+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;
+}
+//#endregion
+export { CollapsePanelProps, CollapseProps };
+//# sourceMappingURL=types.d.ts.map