@purr-react-tailwindcss/components.accordion 0.0.5

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

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

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

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

package/dist/_components/_item.d.ts

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

package/dist/_components/index.d.ts

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

package/dist/_types.d.ts

@@ -0,0 +1,52 @@
+import { ButtonHTMLAttributes, Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export type TItemDictionary = Record<string, boolean>;
+export interface IAccordionItem {
+    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;
+}
+export interface IAccordionItemProps extends IAccordionItem {
+    isExpanded: boolean;
+    isOnlyOneExpand: boolean;
+    setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
+}
+export interface IAccordionProps {
+    items?: IAccordionItem[];
+    disabled?: boolean;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    expandIds?: string[];
+    isOnlyOneExpand?: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
+}
+export interface IAccordionItemExpandIconProps {
+    expandIcon?: ReactNode;
+    isExpanded: boolean;
+    htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+}
+export interface IAccordionItemHeaderProps {
+    label: string;
+    preIcon?: ReactNode;
+    postIcon?: ReactNode;
+    expandIcon?: ReactNode;
+    disabled?: boolean;
+    isExpanded: boolean;
+    isOnlyOneExpand: boolean;
+    id: string;
+    expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
+    htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
+    labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
+    setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),h=require("clsx"),H=require("@purr-react-tailwindcss/components.icon"),A=b.memo(({expandIcon:n,isExpanded:o,htmlAttributes:r})=>t.jsx("span",{className:h("duration-250 flex h-5 w-5 items-center justify-center transition-all ease-in-out",o?"rotate-180":"","accordion-item__header__right__expand-icon"),...r,children:n??t.jsx(H.Icon,{name:"chevron-down"})}));A.displayName="AccordionItemExpandIcon";const j=b.memo(({label:n,preIcon:o,postIcon:r,expandIcon:i,disabled:c,isExpanded:l,isOnlyOneExpand:d,id:u,expandIconHtmlAttributes:m,htmlAttributes:x,labelHtmlAttributes:e,setItemDictionary:a})=>{const p=s=>()=>{a(d?_=>({...Object.keys(_).reduce((y,w)=>(y[w]=!1,y),{}),[s]:!_[s]}):_=>({..._,[s]:!_[s]}))},f=b.useMemo(()=>t.jsxs("span",{className:"flex flex-grow justify-between",children:[t.jsxs("span",{className:"accordion-item__header__left flex gap-4",children:[o,t.jsx("span",{className:"accordion-item__header-label font-sans",...e,children:n})]}),t.jsx("span",{className:"accordion-item__header__right flex gap-4",children:r})]}),[n,e,r,o]);return t.jsxs("button",{className:h("flex h-12 w-full items-center justify-between gap-4 p-0 px-4",c?"bg-white/12 pointer-events-none cursor-default text-white/50":"cursor-pointer bg-transparent text-white","accordion-item__header"),onClick:p(u),...x,children:[f,t.jsx(A,{htmlAttributes:m,expandIcon:i,isExpanded:l})]})});j.displayName="AccordionItemHeader";const g=b.memo(({id:n,label:o,body:r,preIcon:i,postIcon:c,expandIcon:l,disabled:d,bodyHtmlAttributes:u,htmlAttributes:m,expandIconHtmlAttributes:x,itemHeaderHtmlAttributes:e,itemHeaderLabelHtmlAttributes:a,isExpanded:p,isOnlyOneExpand:f,setItemDictionary:s})=>t.jsxs("div",{className:h("w-full bg-gray-900 shadow-[0px_2px_1px_-1px_#00000033,0px_1px_1px_0px_#00000024,0px_1px_3px_0px_#0000001f] transition-[margin] duration-150 ease-in-out will-change-[margin]",p?"my-4":"my-0","not-first:border-t not-first:border-gray-200 first:mt-0 last:mb-0","accordion-item"),...m,children:[t.jsx(j,{label:o,preIcon:i,postIcon:c,expandIcon:l,disabled:d,isExpanded:p,isOnlyOneExpand:f,id:n,expandIconHtmlAttributes:x,htmlAttributes:e,labelHtmlAttributes:a,setItemDictionary:s}),t.jsx("div",{className:h("overflow-hidden px-4 transition-all duration-150 ease-in-out will-change-auto",p?"accordion-item__content--isExpanded max-h-[200vh] pb-4 pt-4 opacity-100":"accordion-item__content--isExpanded max-h-0 pb-0 pt-0 opacity-0","accordion-item__content"),...u,children:r})]}));g.displayName="AccordionItem";const I=({items:n,isOnlyOneExpand:o=!1,expandIds:r,preIcon:i=null,postIcon:c=null,expandIcon:l=null,disabled:d=!1,htmlAttributes:u})=>{const[m,x]=b.useState(()=>r?r.reduce((e,a)=>(e[a]=!0,e),{}):{});return t.jsx("div",{className:"accordion text-white",...u,children:n==null?void 0:n.map(e=>t.jsx(g,{id:e.id,label:e.label,body:e.body,preIcon:i??e.preIcon,postIcon:c??e.postIcon,expandIcon:l??e.expandIcon,disabled:d||e.disabled,bodyHtmlAttributes:e.bodyHtmlAttributes,htmlAttributes:e.htmlAttributes,expandIconHtmlAttributes:e.expandIconHtmlAttributes,itemHeaderHtmlAttributes:e.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:e.itemHeaderLabelHtmlAttributes,isExpanded:e.id?!!m[e.id]:!1,isOnlyOneExpand:o,setItemDictionary:x},e.id))})};exports.Accordion=I;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './_components';
+export * from './_types';

package/dist/index.js

@@ -0,0 +1,189 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { memo as A, useMemo as N, useState as j } from "react";
+import h from "clsx";
+import { Icon as v } from "@purr-react-tailwindcss/components.icon";
+const g = A(
+  ({
+    expandIcon: t,
+    isExpanded: o,
+    htmlAttributes: n
+  }) => /* @__PURE__ */ r(
+    "span",
+    {
+      className: h(
+        "duration-250 flex h-5 w-5 items-center justify-center transition-all ease-in-out",
+        o ? "rotate-180" : "",
+        "accordion-item__header__right__expand-icon"
+      ),
+      ...n,
+      children: t ?? /* @__PURE__ */ r(v, { name: "chevron-down" })
+    }
+  )
+);
+g.displayName = "AccordionItemExpandIcon";
+const w = A(
+  ({
+    label: t,
+    preIcon: o,
+    postIcon: n,
+    expandIcon: c,
+    disabled: s,
+    isExpanded: l,
+    isOnlyOneExpand: d,
+    id: m,
+    expandIconHtmlAttributes: p,
+    htmlAttributes: u,
+    labelHtmlAttributes: e,
+    setItemDictionary: a
+  }) => {
+    const x = (i) => () => {
+      a(d ? (_) => ({
+        ...Object.keys(_).reduce(
+          (y, I) => (y[I] = !1, y),
+          {}
+        ),
+        [i]: !_[i]
+      }) : (_) => ({ ..._, [i]: !_[i] }));
+    }, f = N(
+      () => /* @__PURE__ */ b("span", { className: "flex flex-grow justify-between", children: [
+        /* @__PURE__ */ b("span", { className: "accordion-item__header__left flex gap-4", children: [
+          o,
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: "accordion-item__header-label font-sans",
+              ...e,
+              children: t
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("span", { className: "accordion-item__header__right flex gap-4", children: n })
+      ] }),
+      [t, e, n, o]
+    );
+    return /* @__PURE__ */ b(
+      "button",
+      {
+        className: h(
+          "flex h-12 w-full items-center justify-between gap-4 p-0 px-4",
+          s ? "bg-white/12 pointer-events-none cursor-default text-white/50" : "cursor-pointer bg-transparent text-white",
+          "accordion-item__header"
+        ),
+        onClick: x(m),
+        ...u,
+        children: [
+          f,
+          /* @__PURE__ */ r(
+            g,
+            {
+              htmlAttributes: p,
+              expandIcon: c,
+              isExpanded: l
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+w.displayName = "AccordionItemHeader";
+const H = A(
+  ({
+    id: t,
+    label: o,
+    body: n,
+    preIcon: c,
+    postIcon: s,
+    expandIcon: l,
+    disabled: d,
+    bodyHtmlAttributes: m,
+    htmlAttributes: p,
+    expandIconHtmlAttributes: u,
+    itemHeaderHtmlAttributes: e,
+    itemHeaderLabelHtmlAttributes: a,
+    isExpanded: x,
+    isOnlyOneExpand: f,
+    setItemDictionary: i
+  }) => /* @__PURE__ */ b(
+    "div",
+    {
+      className: h(
+        "w-full bg-gray-900 shadow-[0px_2px_1px_-1px_#00000033,0px_1px_1px_0px_#00000024,0px_1px_3px_0px_#0000001f] transition-[margin] duration-150 ease-in-out will-change-[margin]",
+        x ? "my-4" : "my-0",
+        "not-first:border-t not-first:border-gray-200 first:mt-0 last:mb-0",
+        "accordion-item"
+      ),
+      ...p,
+      children: [
+        /* @__PURE__ */ r(
+          w,
+          {
+            label: o,
+            preIcon: c,
+            postIcon: s,
+            expandIcon: l,
+            disabled: d,
+            isExpanded: x,
+            isOnlyOneExpand: f,
+            id: t,
+            expandIconHtmlAttributes: u,
+            htmlAttributes: e,
+            labelHtmlAttributes: a,
+            setItemDictionary: i
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: h(
+              "overflow-hidden px-4 transition-all duration-150 ease-in-out will-change-auto",
+              x ? "accordion-item__content--isExpanded max-h-[200vh] pb-4 pt-4 opacity-100" : "accordion-item__content--isExpanded max-h-0 pb-0 pt-0 opacity-0",
+              "accordion-item__content"
+            ),
+            ...m,
+            children: n
+          }
+        )
+      ]
+    }
+  )
+);
+H.displayName = "AccordionItem";
+const S = ({
+  items: t,
+  isOnlyOneExpand: o = !1,
+  expandIds: n,
+  preIcon: c = null,
+  postIcon: s = null,
+  expandIcon: l = null,
+  disabled: d = !1,
+  htmlAttributes: m
+}) => {
+  const [p, u] = j(
+    () => n ? n.reduce((e, a) => (e[a] = !0, e), {}) : {}
+  );
+  return /* @__PURE__ */ r("div", { className: "accordion text-white", ...m, children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ r(
+    H,
+    {
+      id: e.id,
+      label: e.label,
+      body: e.body,
+      preIcon: c ?? e.preIcon,
+      postIcon: s ?? e.postIcon,
+      expandIcon: l ?? e.expandIcon,
+      disabled: d || e.disabled,
+      bodyHtmlAttributes: e.bodyHtmlAttributes,
+      htmlAttributes: e.htmlAttributes,
+      expandIconHtmlAttributes: e.expandIconHtmlAttributes,
+      itemHeaderHtmlAttributes: e.itemHeaderHtmlAttributes,
+      itemHeaderLabelHtmlAttributes: e.itemHeaderLabelHtmlAttributes,
+      isExpanded: e.id ? !!p[e.id] : !1,
+      isOnlyOneExpand: o,
+      setItemDictionary: u
+    },
+    e.id
+  )) });
+};
+export {
+  S as Accordion
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@purr-react-tailwindcss/components.accordion",
+  "version": "0.0.5",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.10",
+    "@purr-react-tailwindcss/components.icon": "0.0.6",
+    "@purr-react-styled-components/utils.helpers": "0.0.6"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}