@purr-react-styled-components/components.collapse 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -1 +1,71 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("clsx"),h=require("react"),N=require("@purr-react-styled-components/components.divider"),n=require("styled-components"),z=require("@purr-react-styled-components/utils.helpers"),A=require("@purr-react-styled-components/components.typography"),S=require("@purr-react-styled-components/components.icon"),r={Container:n.div.withConfig({displayName:"_styles__Container",componentId:"sc-ob6zrz-0"})(["border:1px solid #d9d9d9;border-radius:8px;overflow:hidden;"]),ItemContainer:n.div.withConfig({displayName:"_styles__ItemContainer",componentId:"sc-ob6zrz-1"})(["transition:margin 150ms ease-in-out;width:100%;will-change:margin;&:first-of-type{margin-top:0px;}&:last-of-type{margin-bottom:0px;}",";"],({$disabled:t})=>t?n.css(["opacity:0.3;pointer-events:none;cursor:not-allowed;"]):n.css(["cursor:pointer;"])),ItemHeader:n.button.withConfig({displayName:"_styles__ItemHeader",componentId:"sc-ob6zrz-2"})(["display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0px 16px;width:100%;height:46px;border-bottom:1px solid ",";background-color:#00000005;",""],({$isExpanded:t})=>t?"#d9d9d9":"transparent",z.getInvisibleButton),ItemHeaderSection:n.span.withConfig({displayName:"_styles__ItemHeaderSection",componentId:"sc-ob6zrz-3"})(["display:flex;align-items:center;gap:16px;"]),ItemHeaderSectionGroup:n.span.withConfig({displayName:"_styles__ItemHeaderSectionGroup",componentId:"sc-ob6zrz-4"})(["display:flex;justify-content:space-between;flex-grow:1;"]),ItemHeaderExpandIcon:n.span.withConfig({displayName:"_styles__ItemHeaderExpandIcon",componentId:"sc-ob6zrz-5"})(["display:flex;transition:all 250ms ease-in-out;transform:",";"],({$isExpanded:t})=>t?"rotate(180deg)":"none"),ItemContent:n.div.withConfig({displayName:"_styles__ItemContent",componentId:"sc-ob6zrz-6"})(["transition:max-height 150ms ease-in-out,opacity 150ms ease-in-out,padding-top 150ms ease-in-out,padding-bottom 150ms ease-in-out;padding-left:16px;padding-right:16px;overflow:hidden;will-change:max-height,opacity,padding-top,padding-bottom;",";"],({$isExpanded:t})=>t?n.css(["max-height:200vh;padding-top:16px;padding-bottom:16px;opacity:1;"]):n.css(["max-height:0px;padding-top:0px;padding-bottom:0px;opacity:0;"]))},H=h.memo(({expandIcon:t,isExpanded:i,htmlAttributes:l,showExpandIcon:a})=>(console.log("showExpandIcon",a),a?o.jsx(r.ItemHeaderExpandIcon,{...l,$isExpanded:i,className:"collapse-item__header__right__expand-icon",children:t??o.jsx(S.Icon,{name:"chevron-down",width:14,height:14})}):null));H.displayName="CollapseItemExpandIcon";const C=h.memo(({label:t,preIcon:i,postIcon:l,expandIcon:a,isExpanded:c,isOnlyOneExpand:x,id:p,showExpandIcon:b,expandIconHtmlAttributes:g,htmlAttributes:I,labelHtmlAttributes:m,setItemDictionary:e})=>{const s=u=>()=>{e(x?d=>({...Object.keys(d).reduce((f,j)=>(f[j]=!1,f),{}),[u]:!d[u]}):d=>({...d,[u]:!d[u]}))},_=h.useMemo(()=>o.jsxs(r.ItemHeaderSectionGroup,{children:[o.jsxs(r.ItemHeaderSection,{className:"collapse-item__header__left",children:[i,o.jsx(A.Typography,{className:"collapse-item__header-label",htmlAttributes:m,children:t})]}),o.jsx(r.ItemHeaderSection,{className:"collapse-item__header__right",children:l})]}),[t,m,l,i]);return o.jsxs(r.ItemHeader,{...I,$isExpanded:c,className:"collapse-item__header",onClick:s(p),children:[o.jsx(H,{htmlAttributes:g,expandIcon:a,isExpanded:c,showExpandIcon:b}),_]})});C.displayName="CollapseItemHeader";const w=h.memo(({id:t,label:i,body:l,preIcon:a,postIcon:c,expandIcon:x,disabled:p,bodyHtmlAttributes:b,htmlAttributes:g,expandIconHtmlAttributes:I,itemHeaderHtmlAttributes:m,itemHeaderLabelHtmlAttributes:e,isExpanded:s,isOnlyOneExpand:_,showExpandIcon:u,setItemDictionary:d})=>o.jsxs(r.ItemContainer,{...g,$disabled:p,className:y("collapse-item",s&&"collapse-item--isExpanded",p&&"collapse-item--disabled"),children:[o.jsx(C,{label:i,preIcon:a,postIcon:c,expandIcon:x,isExpanded:s,isOnlyOneExpand:_,id:t,showExpandIcon:u,expandIconHtmlAttributes:I,htmlAttributes:m,labelHtmlAttributes:e,setItemDictionary:d}),o.jsx(r.ItemContent,{...b,$isExpanded:s,className:y("collapse-item__content",s&&"collapse-item__content--isExpanded"),children:l})]}));w.displayName="CollapseItem";const v=({items:t,className:i,isOnlyOneExpand:l=!1,expandIds:a,preIcon:c=null,postIcon:x=null,expandIcon:p=null,disabled:b=!1,htmlAttributes:g})=>{const[I,m]=h.useState(()=>a?a.reduce((e,s)=>(e[s]=!0,e),{}):{});return o.jsx(r.Container,{...g,className:y("collapse",i),children:t==null?void 0:t.map((e,s)=>o.jsxs(h.Fragment,{children:[!!s&&o.jsx(N.Divider,{color:"#d9d9d9",className:"collapse-divider"}),o.jsx(w,{id:e.id,label:e.label,body:e.body,preIcon:c??e.preIcon,postIcon:x??e.postIcon,expandIcon:p??e.expandIcon,disabled:b||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!I[e.id]:!1,showExpandIcon:e.showExpandIcon??!0,isOnlyOneExpand:l,setItemDictionary:m})]},e.id))})};exports.Collapse=v;
+'use strict';var A=require('clsx'),I=require('react'),components_divider=require('@purr-react-styled-components/components.divider'),p=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers'),components_typography=require('@purr-react-styled-components/components.typography'),components_icon=require('@purr-react-styled-components/components.icon');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var A__default=/*#__PURE__*/_interopDefault(A);var I__default=/*#__PURE__*/_interopDefault(I);var p__default=/*#__PURE__*/_interopDefault(p);var o={Container:p__default.default.div`
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    overflow: hidden;
+  `,ItemContainer:p__default.default.div`
+    transition: margin 150ms ease-in-out;
+    width: 100%;
+    will-change: margin;
+
+    &:first-of-type {
+      margin-top: 0px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
+
+    ${({$disabled:t})=>t?p.css`
+            opacity: 0.3;
+            pointer-events: none;
+            cursor: not-allowed;
+          `:p.css`
+            cursor: pointer;
+          `};
+  `,ItemHeader:p__default.default.button`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 0px 16px;
+    width: 100%;
+    height: 46px;
+    border-bottom: 1px solid
+      ${({$isExpanded:t})=>t?"#d9d9d9":"transparent"};
+    background-color: #00000005;
+    ${utils_helpers.getInvisibleButton}
+  `,ItemHeaderSection:p__default.default.span`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  `,ItemHeaderSectionGroup:p__default.default.span`
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+  `,ItemHeaderExpandIcon:p__default.default.span`
+    display: flex;
+    transition: all 250ms ease-in-out;
+    transform: ${({$isExpanded:t})=>t?"rotate(180deg)":"none"};
+  `,ItemContent:p__default.default.div`
+    transition:
+      max-height 150ms ease-in-out,
+      opacity 150ms ease-in-out,
+      padding-top 150ms ease-in-out,
+      padding-bottom 150ms ease-in-out;
+    padding-left: 16px;
+    padding-right: 16px;
+    overflow: hidden;
+    will-change: max-height, opacity, padding-top, padding-bottom;
+
+    ${({$isExpanded:t})=>t?p.css`
+            max-height: 200vh;
+            padding-top: 16px;
+            padding-bottom: 16px;
+            opacity: 1;
+          `:p.css`
+            max-height: 0px;
+            padding-top: 0px;
+            padding-bottom: 0px;
+            opacity: 0;
+          `};
+  `};var H=I.memo(({expandIcon:t,isExpanded:r,htmlAttributes:l,showExpandIcon:n})=>(console.log("showExpandIcon",n),n?I__default.default.createElement(o.ItemHeaderExpandIcon,{...l,$isExpanded:r,className:"collapse-item__header__right__expand-icon"},t??I__default.default.createElement(components_icon.Icon,{name:"chevron-down",width:14,height:14})):null));H.displayName="CollapseItemExpandIcon";var C=I.memo(({label:t,preIcon:r,postIcon:l,expandIcon:n,isExpanded:s,isOnlyOneExpand:x,id:d,showExpandIcon:u,expandIconHtmlAttributes:y,htmlAttributes:b,labelHtmlAttributes:m,setItemDictionary:e})=>{let a=c=>()=>{e(x?i=>({...Object.keys(i).reduce((E,$)=>(E[$]=false,E),{}),[c]:!i[c]}):i=>({...i,[c]:!i[c]}));},h=I.useMemo(()=>I__default.default.createElement(o.ItemHeaderSectionGroup,null,I__default.default.createElement(o.ItemHeaderSection,{className:"collapse-item__header__left"},r,I__default.default.createElement(components_typography.Typography,{className:"collapse-item__header-label",htmlAttributes:m},t)),I__default.default.createElement(o.ItemHeaderSection,{className:"collapse-item__header__right"},l)),[t,m,l,r]);return I__default.default.createElement(o.ItemHeader,{...b,$isExpanded:s,className:"collapse-item__header",onClick:a(d)},I__default.default.createElement(H,{htmlAttributes:y,expandIcon:n,isExpanded:s,showExpandIcon:u}),h)});C.displayName="CollapseItemHeader";var _=I.memo(({id:t,label:r,body:l,preIcon:n,postIcon:s,expandIcon:x,disabled:d,bodyHtmlAttributes:u,htmlAttributes:y,expandIconHtmlAttributes:b,itemHeaderHtmlAttributes:m,itemHeaderLabelHtmlAttributes:e,isExpanded:a,isOnlyOneExpand:h,showExpandIcon:c,setItemDictionary:i})=>I__default.default.createElement(o.ItemContainer,{...y,$disabled:d,className:A__default.default("collapse-item",a&&"collapse-item--isExpanded",d&&"collapse-item--disabled")},I__default.default.createElement(C,{label:r,preIcon:n,postIcon:s,expandIcon:x,isExpanded:a,isOnlyOneExpand:h,id:t,showExpandIcon:c,expandIconHtmlAttributes:b,htmlAttributes:m,labelHtmlAttributes:e,setItemDictionary:i}),I__default.default.createElement(o.ItemContent,{...u,$isExpanded:a,className:A__default.default("collapse-item__content",a&&"collapse-item__content--isExpanded")},l)));_.displayName="CollapseItem";var pe=({items:t,className:r,isOnlyOneExpand:l=false,expandIds:n,preIcon:s=null,postIcon:x=null,expandIcon:d=null,disabled:u=false,htmlAttributes:y})=>{let[b,m]=I.useState(()=>n?n.reduce((e,a)=>(e[a]=true,e),{}):{});return I__default.default.createElement(o.Container,{...y,className:A__default.default("collapse",r)},t?.map((e,a)=>I__default.default.createElement(I.Fragment,{key:e.id},!!a&&I__default.default.createElement(components_divider.Divider,{color:"#d9d9d9",className:"collapse-divider"}),I__default.default.createElement(_,{id:e.id,label:e.label,body:e.body,preIcon:s??e.preIcon,postIcon:x??e.postIcon,expandIcon:d??e.expandIcon,disabled:u||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!b[e.id]:false,showExpandIcon:e.showExpandIcon??true,isOnlyOneExpand:l,setItemDictionary:m}))))};exports.Collapse=pe;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,8 +1,8 @@
-import { ButtonHTMLAttributes, Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import { IExtendable } from '@purr-core/utils.definitions';
 
-export type TItemDictionary = Record<string, boolean>;
-export interface ICollapseItem {
+type TItemDictionary = Record<string, boolean>;
+interface ICollapseItem {
     id: string;
     label: string;
     body: ReactNode;
@@ -17,12 +17,12 @@ export interface ICollapseItem {
     itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
     showExpandIcon?: boolean;
 }
-export interface ICollapseItemProps extends ICollapseItem {
+interface ICollapseItemProps extends ICollapseItem {
     isExpanded: boolean;
     isOnlyOneExpand: boolean;
     setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
 }
-export interface ICollapseProps {
+interface ICollapseProps {
     items?: ICollapseItem[];
     className?: string;
     disabled?: boolean;
@@ -33,13 +33,13 @@ export interface ICollapseProps {
     isOnlyOneExpand?: boolean;
     htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
 }
-export interface ICollapseItemExpandIconProps {
+interface ICollapseItemExpandIconProps {
     expandIcon?: ReactNode;
     isExpanded: boolean;
     htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
     showExpandIcon?: boolean;
 }
-export interface ICollapseItemHeaderProps {
+interface ICollapseItemHeaderProps {
     label: string;
     preIcon?: ReactNode;
     postIcon?: ReactNode;
@@ -53,3 +53,7 @@ export interface ICollapseItemHeaderProps {
     labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
     setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
 }
+
+declare const Collapse: ({ items, className, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: ICollapseProps) => React.JSX.Element;
+
+export { Collapse, type ICollapseItem, type ICollapseItemExpandIconProps, type ICollapseItemHeaderProps, type ICollapseItemProps, type ICollapseProps, type TItemDictionary };

package/dist/index.d.ts

@@ -1,2 +1,59 @@
-export * from './_components';
-export * from './_types';
+import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+type TItemDictionary = Record<string, boolean>;
+interface ICollapseItem {
+    id: string;
+    label: string;
+    body: ReactNode;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    disabled?: boolean;
+    bodyHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+    expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    itemHeaderHtmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
+    itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    showExpandIcon?: boolean;
+}
+interface ICollapseItemProps extends ICollapseItem {
+    isExpanded: boolean;
+    isOnlyOneExpand: boolean;
+    setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
+}
+interface ICollapseProps {
+    items?: ICollapseItem[];
+    className?: string;
+    disabled?: boolean;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    expandIds?: string[];
+    isOnlyOneExpand?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+}
+interface ICollapseItemExpandIconProps {
+    expandIcon?: ReactNode;
+    isExpanded: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    showExpandIcon?: boolean;
+}
+interface ICollapseItemHeaderProps {
+    label: string;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    isExpanded: boolean;
+    isOnlyOneExpand: boolean;
+    id: string;
+    showExpandIcon?: boolean;
+    expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
+    labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
+    setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
+}
+
+declare const Collapse: ({ items, className, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: ICollapseProps) => React.JSX.Element;
+
+export { Collapse, type ICollapseItem, type ICollapseItemExpandIconProps, type ICollapseItemHeaderProps, type ICollapseItemProps, type ICollapseProps, type TItemDictionary };

package/dist/index.js

@@ -1,129 +1,71 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import f from "clsx";
-import { memo as H, useMemo as S, useState as v, Fragment as E } from "react";
-import { Divider as j } from "@purr-react-styled-components/components.divider";
-import d, { css as _ } from "styled-components";
-import { getInvisibleButton as k } from "@purr-react-styled-components/utils.helpers";
-import { Typography as $ } from "@purr-react-styled-components/components.typography";
-import { Icon as G } from "@purr-react-styled-components/components.icon";
-const s = {
-  Container: d.div.withConfig({
-    displayName: "_styles__Container",
-    componentId: "sc-ob6zrz-0"
-  })(["border:1px solid #d9d9d9;border-radius:8px;overflow:hidden;"]),
-  ItemContainer: d.div.withConfig({
-    displayName: "_styles__ItemContainer",
-    componentId: "sc-ob6zrz-1"
-  })(["transition:margin 150ms ease-in-out;width:100%;will-change:margin;&:first-of-type{margin-top:0px;}&:last-of-type{margin-bottom:0px;}", ";"], ({
-    $disabled: t
-  }) => t ? _(["opacity:0.3;pointer-events:none;cursor:not-allowed;"]) : _(["cursor:pointer;"])),
-  ItemHeader: d.button.withConfig({
-    displayName: "_styles__ItemHeader",
-    componentId: "sc-ob6zrz-2"
-  })(["display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0px 16px;width:100%;height:46px;border-bottom:1px solid ", ";background-color:#00000005;", ""], ({
-    $isExpanded: t
-  }) => t ? "#d9d9d9" : "transparent", k),
-  ItemHeaderSection: d.span.withConfig({
-    displayName: "_styles__ItemHeaderSection",
-    componentId: "sc-ob6zrz-3"
-  })(["display:flex;align-items:center;gap:16px;"]),
-  ItemHeaderSectionGroup: d.span.withConfig({
-    displayName: "_styles__ItemHeaderSectionGroup",
-    componentId: "sc-ob6zrz-4"
-  })(["display:flex;justify-content:space-between;flex-grow:1;"]),
-  ItemHeaderExpandIcon: d.span.withConfig({
-    displayName: "_styles__ItemHeaderExpandIcon",
-    componentId: "sc-ob6zrz-5"
-  })(["display:flex;transition:all 250ms ease-in-out;transform:", ";"], ({
-    $isExpanded: t
-  }) => t ? "rotate(180deg)" : "none"),
-  ItemContent: d.div.withConfig({
-    displayName: "_styles__ItemContent",
-    componentId: "sc-ob6zrz-6"
-  })(["transition:max-height 150ms ease-in-out,opacity 150ms ease-in-out,padding-top 150ms ease-in-out,padding-bottom 150ms ease-in-out;padding-left:16px;padding-right:16px;overflow:hidden;will-change:max-height,opacity,padding-top,padding-bottom;", ";"], ({
-    $isExpanded: t
-  }) => t ? _(["max-height:200vh;padding-top:16px;padding-bottom:16px;opacity:1;"]) : _(["max-height:0px;padding-top:0px;padding-bottom:0px;opacity:0;"]))
-}, w = H(({
-  expandIcon: t,
-  isExpanded: i,
-  htmlAttributes: l,
-  showExpandIcon: a
-}) => (console.log("showExpandIcon", a), a ? /* @__PURE__ */ n(s.ItemHeaderExpandIcon, { ...l, $isExpanded: i, className: "collapse-item__header__right__expand-icon", children: t ?? /* @__PURE__ */ n(G, { name: "chevron-down", width: 14, height: 14 }) }) : null));
-w.displayName = "CollapseItemExpandIcon";
-const N = H(({
-  label: t,
-  preIcon: i,
-  postIcon: l,
-  expandIcon: a,
-  isExpanded: p,
-  isOnlyOneExpand: u,
-  id: m,
-  showExpandIcon: b,
-  expandIconHtmlAttributes: I,
-  htmlAttributes: g,
-  labelHtmlAttributes: c,
-  setItemDictionary: e
-}) => {
-  const o = (h) => () => {
-    e(u ? (r) => ({
-      ...Object.keys(r).reduce((C, A) => (C[A] = !1, C), {}),
-      [h]: !r[h]
-    }) : (r) => ({
-      ...r,
-      [h]: !r[h]
-    }));
-  }, y = S(() => /* @__PURE__ */ x(s.ItemHeaderSectionGroup, { children: [
-    /* @__PURE__ */ x(s.ItemHeaderSection, { className: "collapse-item__header__left", children: [
-      i,
-      /* @__PURE__ */ n($, { className: "collapse-item__header-label", htmlAttributes: c, children: t })
-    ] }),
-    /* @__PURE__ */ n(s.ItemHeaderSection, { className: "collapse-item__header__right", children: l })
-  ] }), [t, c, l, i]);
-  return /* @__PURE__ */ x(s.ItemHeader, { ...g, $isExpanded: p, className: "collapse-item__header", onClick: o(m), children: [
-    /* @__PURE__ */ n(w, { htmlAttributes: I, expandIcon: a, isExpanded: p, showExpandIcon: b }),
-    y
-  ] });
-});
-N.displayName = "CollapseItemHeader";
-const z = H(({
-  id: t,
-  label: i,
-  body: l,
-  preIcon: a,
-  postIcon: p,
-  expandIcon: u,
-  disabled: m,
-  bodyHtmlAttributes: b,
-  htmlAttributes: I,
-  expandIconHtmlAttributes: g,
-  itemHeaderHtmlAttributes: c,
-  itemHeaderLabelHtmlAttributes: e,
-  isExpanded: o,
-  isOnlyOneExpand: y,
-  showExpandIcon: h,
-  setItemDictionary: r
-}) => /* @__PURE__ */ x(s.ItemContainer, { ...I, $disabled: m, className: f("collapse-item", o && "collapse-item--isExpanded", m && "collapse-item--disabled"), children: [
-  /* @__PURE__ */ n(N, { label: i, preIcon: a, postIcon: p, expandIcon: u, isExpanded: o, isOnlyOneExpand: y, id: t, showExpandIcon: h, expandIconHtmlAttributes: g, htmlAttributes: c, labelHtmlAttributes: e, setItemDictionary: r }),
-  /* @__PURE__ */ n(s.ItemContent, { ...b, $isExpanded: o, className: f("collapse-item__content", o && "collapse-item__content--isExpanded"), children: l })
-] }));
-z.displayName = "CollapseItem";
-const J = ({
-  items: t,
-  className: i,
-  isOnlyOneExpand: l = !1,
-  expandIds: a,
-  preIcon: p = null,
-  postIcon: u = null,
-  expandIcon: m = null,
-  disabled: b = !1,
-  htmlAttributes: I
-}) => {
-  const [g, c] = v(() => a ? a.reduce((e, o) => (e[o] = !0, e), {}) : {});
-  return /* @__PURE__ */ n(s.Container, { ...I, className: f("collapse", i), children: t == null ? void 0 : t.map((e, o) => /* @__PURE__ */ x(E, { children: [
-    !!o && /* @__PURE__ */ n(j, { color: "#d9d9d9", className: "collapse-divider" }),
-    /* @__PURE__ */ n(z, { id: e.id, label: e.label, body: e.body, preIcon: p ?? e.preIcon, postIcon: u ?? e.postIcon, expandIcon: m ?? e.expandIcon, disabled: b || e.disabled, bodyHtmlAttributes: e.bodyHtmlAttributes, htmlAttributes: e.htmlAttributes, expandIconHtmlAttributes: e.expandIconHtmlAttributes, itemHeaderHtmlAttributes: e.itemHeaderHtmlAttributes, itemHeaderLabelHtmlAttributes: e.itemHeaderLabelHtmlAttributes, isExpanded: e.id ? !!g[e.id] : !1, showExpandIcon: e.showExpandIcon ?? !0, isOnlyOneExpand: l, setItemDictionary: c })
-  ] }, e.id)) });
-};
-export {
-  J as Collapse
-};
+import A from'clsx';import I,{memo,useMemo,useState,Fragment}from'react';import {Divider}from'@purr-react-styled-components/components.divider';import p,{css}from'styled-components';import {getInvisibleButton}from'@purr-react-styled-components/utils.helpers';import {Typography}from'@purr-react-styled-components/components.typography';import {Icon}from'@purr-react-styled-components/components.icon';var o={Container:p.div`
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    overflow: hidden;
+  `,ItemContainer:p.div`
+    transition: margin 150ms ease-in-out;
+    width: 100%;
+    will-change: margin;
+
+    &:first-of-type {
+      margin-top: 0px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
+
+    ${({$disabled:t})=>t?css`
+            opacity: 0.3;
+            pointer-events: none;
+            cursor: not-allowed;
+          `:css`
+            cursor: pointer;
+          `};
+  `,ItemHeader:p.button`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 0px 16px;
+    width: 100%;
+    height: 46px;
+    border-bottom: 1px solid
+      ${({$isExpanded:t})=>t?"#d9d9d9":"transparent"};
+    background-color: #00000005;
+    ${getInvisibleButton}
+  `,ItemHeaderSection:p.span`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  `,ItemHeaderSectionGroup:p.span`
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+  `,ItemHeaderExpandIcon:p.span`
+    display: flex;
+    transition: all 250ms ease-in-out;
+    transform: ${({$isExpanded:t})=>t?"rotate(180deg)":"none"};
+  `,ItemContent:p.div`
+    transition:
+      max-height 150ms ease-in-out,
+      opacity 150ms ease-in-out,
+      padding-top 150ms ease-in-out,
+      padding-bottom 150ms ease-in-out;
+    padding-left: 16px;
+    padding-right: 16px;
+    overflow: hidden;
+    will-change: max-height, opacity, padding-top, padding-bottom;
+
+    ${({$isExpanded:t})=>t?css`
+            max-height: 200vh;
+            padding-top: 16px;
+            padding-bottom: 16px;
+            opacity: 1;
+          `:css`
+            max-height: 0px;
+            padding-top: 0px;
+            padding-bottom: 0px;
+            opacity: 0;
+          `};
+  `};var H=memo(({expandIcon:t,isExpanded:r,htmlAttributes:l,showExpandIcon:n})=>(console.log("showExpandIcon",n),n?I.createElement(o.ItemHeaderExpandIcon,{...l,$isExpanded:r,className:"collapse-item__header__right__expand-icon"},t??I.createElement(Icon,{name:"chevron-down",width:14,height:14})):null));H.displayName="CollapseItemExpandIcon";var C=memo(({label:t,preIcon:r,postIcon:l,expandIcon:n,isExpanded:s,isOnlyOneExpand:x,id:d,showExpandIcon:u,expandIconHtmlAttributes:y,htmlAttributes:b,labelHtmlAttributes:m,setItemDictionary:e})=>{let a=c=>()=>{e(x?i=>({...Object.keys(i).reduce((E,$)=>(E[$]=false,E),{}),[c]:!i[c]}):i=>({...i,[c]:!i[c]}));},h=useMemo(()=>I.createElement(o.ItemHeaderSectionGroup,null,I.createElement(o.ItemHeaderSection,{className:"collapse-item__header__left"},r,I.createElement(Typography,{className:"collapse-item__header-label",htmlAttributes:m},t)),I.createElement(o.ItemHeaderSection,{className:"collapse-item__header__right"},l)),[t,m,l,r]);return I.createElement(o.ItemHeader,{...b,$isExpanded:s,className:"collapse-item__header",onClick:a(d)},I.createElement(H,{htmlAttributes:y,expandIcon:n,isExpanded:s,showExpandIcon:u}),h)});C.displayName="CollapseItemHeader";var _=memo(({id:t,label:r,body:l,preIcon:n,postIcon:s,expandIcon:x,disabled:d,bodyHtmlAttributes:u,htmlAttributes:y,expandIconHtmlAttributes:b,itemHeaderHtmlAttributes:m,itemHeaderLabelHtmlAttributes:e,isExpanded:a,isOnlyOneExpand:h,showExpandIcon:c,setItemDictionary:i})=>I.createElement(o.ItemContainer,{...y,$disabled:d,className:A("collapse-item",a&&"collapse-item--isExpanded",d&&"collapse-item--disabled")},I.createElement(C,{label:r,preIcon:n,postIcon:s,expandIcon:x,isExpanded:a,isOnlyOneExpand:h,id:t,showExpandIcon:c,expandIconHtmlAttributes:b,htmlAttributes:m,labelHtmlAttributes:e,setItemDictionary:i}),I.createElement(o.ItemContent,{...u,$isExpanded:a,className:A("collapse-item__content",a&&"collapse-item__content--isExpanded")},l)));_.displayName="CollapseItem";var pe=({items:t,className:r,isOnlyOneExpand:l=false,expandIds:n,preIcon:s=null,postIcon:x=null,expandIcon:d=null,disabled:u=false,htmlAttributes:y})=>{let[b,m]=useState(()=>n?n.reduce((e,a)=>(e[a]=true,e),{}):{});return I.createElement(o.Container,{...y,className:A("collapse",r)},t?.map((e,a)=>I.createElement(Fragment,{key:e.id},!!a&&I.createElement(Divider,{color:"#d9d9d9",className:"collapse-divider"}),I.createElement(_,{id:e.id,label:e.label,body:e.body,preIcon:s??e.preIcon,postIcon:x??e.postIcon,expandIcon:d??e.expandIcon,disabled:u||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!b[e.id]:false,showExpandIcon:e.showExpandIcon??true,isOnlyOneExpand:l,setItemDictionary:m}))))};export{pe as Collapse};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.collapse",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,14 +25,14 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-react-styled-components/utils.helpers": "0.0.6",
-    "@purr-react-styled-components/components.icon": "0.0.7",
-    "@purr-react-styled-components/components.typography": "0.0.8",
-    "@purr-react-styled-components/components.divider": "0.0.3"
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-react-styled-components/utils.helpers": "0.0.8",
+    "@purr-react-styled-components/components.icon": "0.0.9",
+    "@purr-react-styled-components/components.typography": "0.0.10",
+    "@purr-react-styled-components/components.divider": "0.0.5"
   },
   "devDependencies": {
-    "@purr-react-styled-components/components.flex-box": "0.0.8"
+    "@purr-react-styled-components/components.flex-box": "0.0.10"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -41,6 +41,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components/_expand-icon.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ICollapseItemExpandIconProps } from '../_types';
-
-export declare const CollapseItemExpandIcon: React.MemoExoticComponent<({ expandIcon, isExpanded, htmlAttributes, showExpandIcon, }: ICollapseItemExpandIconProps) => React.JSX.Element | null>;

package/dist/_components/_item-header.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ICollapseItemHeaderProps } from '../_types';
-
-export declare const CollapseItemHeader: React.MemoExoticComponent<({ label, preIcon, postIcon, expandIcon, isExpanded, isOnlyOneExpand, id, showExpandIcon, expandIconHtmlAttributes, htmlAttributes, labelHtmlAttributes, setItemDictionary, }: ICollapseItemHeaderProps) => React.JSX.Element>;

package/dist/_components/_item.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ICollapseItemProps } from '../_types';
-
-export declare const CollapseItem: React.MemoExoticComponent<({ id, label, body, preIcon, postIcon, expandIcon, disabled, bodyHtmlAttributes, htmlAttributes, expandIconHtmlAttributes, itemHeaderHtmlAttributes, itemHeaderLabelHtmlAttributes, isExpanded, isOnlyOneExpand, showExpandIcon, setItemDictionary, }: ICollapseItemProps) => React.JSX.Element>;

package/dist/_components/index.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ICollapseProps } from '../_types';
-
-export declare const Collapse: ({ items, className, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: ICollapseProps) => React.JSX.Element;

package/dist/_styles.d.ts

@@ -1,17 +0,0 @@
-export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    ItemContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $disabled?: boolean;
-    }>> & string;
-    ItemHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-        $isExpanded: boolean;
-    }>> & string;
-    ItemHeaderSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    ItemHeaderSectionGroup: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    ItemHeaderExpandIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
-        $isExpanded: boolean;
-    }>> & string;
-    ItemContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $isExpanded: boolean;
-    }>> & string;
-};