@purr-react-tailwindcss/components.accordion 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +1 -0
  2. package/dist/index.d.cts +56 -0
  3. package/dist/index.d.ts +56 -0
  4. package/dist/index.js +1 -0
  5. package/package.json +4 -4
package/dist/index.cjs ADDED
@@ -0,0 +1 @@
1
+ 'use strict';var a=require('react'),g=require('clsx'),components_icon=require('@purr-react-tailwindcss/components.icon');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var a__default=/*#__PURE__*/_interopDefault(a);var g__default=/*#__PURE__*/_interopDefault(g);var b=a.memo(({expandIcon:e,isExpanded:r,htmlAttributes:o})=>a__default.default.createElement("span",{className:g__default.default("duration-250 flex h-5 w-5 items-center justify-center transition-all ease-in-out",r?"rotate-180":"","accordion-item__header__right__expand-icon"),...o},e??a__default.default.createElement(components_icon.Icon,{name:"chevron-down"})));b.displayName="AccordionItemExpandIcon";var _=a.memo(({label:e,preIcon:r,postIcon:o,expandIcon:c,disabled:s,isExpanded:m,isOnlyOneExpand:d,id:p,expandIconHtmlAttributes:l,htmlAttributes:x,labelHtmlAttributes:t,setItemDictionary:n})=>{let I=i=>()=>{n(d?u=>({...Object.keys(u).reduce((h,N)=>(h[N]=false,h),{}),[i]:!u[i]}):u=>({...u,[i]:!u[i]}));},f=a.useMemo(()=>a__default.default.createElement("span",{className:"flex flex-grow justify-between"},a__default.default.createElement("span",{className:"accordion-item__header__left flex gap-4"},r,a__default.default.createElement("span",{className:"accordion-item__header-label font-sans",...t},e)),a__default.default.createElement("span",{className:"accordion-item__header__right flex gap-4"},o)),[e,t,o,r]);return a__default.default.createElement("button",{className:g__default.default("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:I(p),...x},f,a__default.default.createElement(b,{htmlAttributes:l,expandIcon:c,isExpanded:m}))});_.displayName="AccordionItemHeader";var y=a.memo(({id:e,label:r,body:o,preIcon:c,postIcon:s,expandIcon:m,disabled:d,bodyHtmlAttributes:p,htmlAttributes:l,expandIconHtmlAttributes:x,itemHeaderHtmlAttributes:t,itemHeaderLabelHtmlAttributes:n,isExpanded:I,isOnlyOneExpand:f,setItemDictionary:i})=>a__default.default.createElement("div",{className:g__default.default("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]",I?"my-4":"my-0","not-first:border-t not-first:border-gray-200 first:mt-0 last:mb-0","accordion-item"),...l},a__default.default.createElement(_,{label:r,preIcon:c,postIcon:s,expandIcon:m,disabled:d,isExpanded:I,isOnlyOneExpand:f,id:e,expandIconHtmlAttributes:x,htmlAttributes:t,labelHtmlAttributes:n,setItemDictionary:i}),a__default.default.createElement("div",{className:g__default.default("overflow-hidden px-4 transition-all duration-150 ease-in-out will-change-auto",I?"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"),...p},o)));y.displayName="AccordionItem";var W=({items:e,isOnlyOneExpand:r=false,expandIds:o,preIcon:c=null,postIcon:s=null,expandIcon:m=null,disabled:d=false,htmlAttributes:p})=>{let[l,x]=a.useState(()=>o?o.reduce((t,n)=>(t[n]=true,t),{}):{});return a__default.default.createElement("div",{className:"accordion text-white",...p},e?.map(t=>a__default.default.createElement(y,{key:t.id,id:t.id,label:t.label,body:t.body,preIcon:c??t.preIcon,postIcon:s??t.postIcon,expandIcon:m??t.expandIcon,disabled:d||t.disabled,bodyHtmlAttributes:t.bodyHtmlAttributes,htmlAttributes:t.htmlAttributes,expandIconHtmlAttributes:t.expandIconHtmlAttributes,itemHeaderHtmlAttributes:t.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:t.itemHeaderLabelHtmlAttributes,isExpanded:t.id?!!l[t.id]:false,isOnlyOneExpand:r,setItemDictionary:x})))};exports.Accordion=W;
package/dist/index.d.cts ADDED
@@ -0,0 +1,56 @@
1
+ import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ type TItemDictionary = Record<string, boolean>;
5
+ interface IAccordionItem {
6
+ id: string;
7
+ label: string;
8
+ body: ReactNode;
9
+ preIcon?: ReactNode;
10
+ postIcon?: ReactNode;
11
+ expandIcon?: ReactNode;
12
+ disabled?: boolean;
13
+ bodyHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
14
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
15
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
16
+ itemHeaderHtmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
17
+ itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
18
+ }
19
+ interface IAccordionItemProps extends IAccordionItem {
20
+ isExpanded: boolean;
21
+ isOnlyOneExpand: boolean;
22
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
23
+ }
24
+ interface IAccordionProps {
25
+ items?: IAccordionItem[];
26
+ disabled?: boolean;
27
+ preIcon?: ReactNode;
28
+ postIcon?: ReactNode;
29
+ expandIcon?: ReactNode;
30
+ expandIds?: string[];
31
+ isOnlyOneExpand?: boolean;
32
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
33
+ }
34
+ interface IAccordionItemExpandIconProps {
35
+ expandIcon?: ReactNode;
36
+ isExpanded: boolean;
37
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
38
+ }
39
+ interface IAccordionItemHeaderProps {
40
+ label: string;
41
+ preIcon?: ReactNode;
42
+ postIcon?: ReactNode;
43
+ expandIcon?: ReactNode;
44
+ disabled?: boolean;
45
+ isExpanded: boolean;
46
+ isOnlyOneExpand: boolean;
47
+ id: string;
48
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
49
+ htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
50
+ labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
51
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
52
+ }
53
+
54
+ declare const Accordion: ({ items, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: IAccordionProps) => React.JSX.Element;
55
+
56
+ export { Accordion, type IAccordionItem, type IAccordionItemExpandIconProps, type IAccordionItemHeaderProps, type IAccordionItemProps, type IAccordionProps, type TItemDictionary };
package/dist/index.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes, Dispatch, SetStateAction } from 'react';
2
+ import { IExtendable } from '@purr-core/utils.definitions';
3
+
4
+ type TItemDictionary = Record<string, boolean>;
5
+ interface IAccordionItem {
6
+ id: string;
7
+ label: string;
8
+ body: ReactNode;
9
+ preIcon?: ReactNode;
10
+ postIcon?: ReactNode;
11
+ expandIcon?: ReactNode;
12
+ disabled?: boolean;
13
+ bodyHtmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
14
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
15
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
16
+ itemHeaderHtmlAttributes?: ButtonHTMLAttributes<HTMLButtonElement> & IExtendable;
17
+ itemHeaderLabelHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
18
+ }
19
+ interface IAccordionItemProps extends IAccordionItem {
20
+ isExpanded: boolean;
21
+ isOnlyOneExpand: boolean;
22
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
23
+ }
24
+ interface IAccordionProps {
25
+ items?: IAccordionItem[];
26
+ disabled?: boolean;
27
+ preIcon?: ReactNode;
28
+ postIcon?: ReactNode;
29
+ expandIcon?: ReactNode;
30
+ expandIds?: string[];
31
+ isOnlyOneExpand?: boolean;
32
+ htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
33
+ }
34
+ interface IAccordionItemExpandIconProps {
35
+ expandIcon?: ReactNode;
36
+ isExpanded: boolean;
37
+ htmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
38
+ }
39
+ interface IAccordionItemHeaderProps {
40
+ label: string;
41
+ preIcon?: ReactNode;
42
+ postIcon?: ReactNode;
43
+ expandIcon?: ReactNode;
44
+ disabled?: boolean;
45
+ isExpanded: boolean;
46
+ isOnlyOneExpand: boolean;
47
+ id: string;
48
+ expandIconHtmlAttributes?: HTMLAttributes<HTMLSpanElement> & IExtendable;
49
+ htmlAttributes?: HTMLAttributes<HTMLButtonElement> & IExtendable;
50
+ labelHtmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
51
+ setItemDictionary: Dispatch<SetStateAction<TItemDictionary>>;
52
+ }
53
+
54
+ declare const Accordion: ({ items, isOnlyOneExpand, expandIds, preIcon, postIcon, expandIcon, disabled, htmlAttributes, }: IAccordionProps) => React.JSX.Element;
55
+
56
+ export { Accordion, type IAccordionItem, type IAccordionItemExpandIconProps, type IAccordionItemHeaderProps, type IAccordionItemProps, type IAccordionProps, type TItemDictionary };
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ import a,{memo,useMemo,useState}from'react';import g from'clsx';import {Icon}from'@purr-react-tailwindcss/components.icon';var b=memo(({expandIcon:e,isExpanded:r,htmlAttributes:o})=>a.createElement("span",{className:g("duration-250 flex h-5 w-5 items-center justify-center transition-all ease-in-out",r?"rotate-180":"","accordion-item__header__right__expand-icon"),...o},e??a.createElement(Icon,{name:"chevron-down"})));b.displayName="AccordionItemExpandIcon";var _=memo(({label:e,preIcon:r,postIcon:o,expandIcon:c,disabled:s,isExpanded:m,isOnlyOneExpand:d,id:p,expandIconHtmlAttributes:l,htmlAttributes:x,labelHtmlAttributes:t,setItemDictionary:n})=>{let I=i=>()=>{n(d?u=>({...Object.keys(u).reduce((h,N)=>(h[N]=false,h),{}),[i]:!u[i]}):u=>({...u,[i]:!u[i]}));},f=useMemo(()=>a.createElement("span",{className:"flex flex-grow justify-between"},a.createElement("span",{className:"accordion-item__header__left flex gap-4"},r,a.createElement("span",{className:"accordion-item__header-label font-sans",...t},e)),a.createElement("span",{className:"accordion-item__header__right flex gap-4"},o)),[e,t,o,r]);return a.createElement("button",{className:g("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:I(p),...x},f,a.createElement(b,{htmlAttributes:l,expandIcon:c,isExpanded:m}))});_.displayName="AccordionItemHeader";var y=memo(({id:e,label:r,body:o,preIcon:c,postIcon:s,expandIcon:m,disabled:d,bodyHtmlAttributes:p,htmlAttributes:l,expandIconHtmlAttributes:x,itemHeaderHtmlAttributes:t,itemHeaderLabelHtmlAttributes:n,isExpanded:I,isOnlyOneExpand:f,setItemDictionary:i})=>a.createElement("div",{className:g("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]",I?"my-4":"my-0","not-first:border-t not-first:border-gray-200 first:mt-0 last:mb-0","accordion-item"),...l},a.createElement(_,{label:r,preIcon:c,postIcon:s,expandIcon:m,disabled:d,isExpanded:I,isOnlyOneExpand:f,id:e,expandIconHtmlAttributes:x,htmlAttributes:t,labelHtmlAttributes:n,setItemDictionary:i}),a.createElement("div",{className:g("overflow-hidden px-4 transition-all duration-150 ease-in-out will-change-auto",I?"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"),...p},o)));y.displayName="AccordionItem";var W=({items:e,isOnlyOneExpand:r=false,expandIds:o,preIcon:c=null,postIcon:s=null,expandIcon:m=null,disabled:d=false,htmlAttributes:p})=>{let[l,x]=useState(()=>o?o.reduce((t,n)=>(t[n]=true,t),{}):{});return a.createElement("div",{className:"accordion text-white",...p},e?.map(t=>a.createElement(y,{key:t.id,id:t.id,label:t.label,body:t.body,preIcon:c??t.preIcon,postIcon:s??t.postIcon,expandIcon:m??t.expandIcon,disabled:d||t.disabled,bodyHtmlAttributes:t.bodyHtmlAttributes,htmlAttributes:t.htmlAttributes,expandIconHtmlAttributes:t.expandIconHtmlAttributes,itemHeaderHtmlAttributes:t.itemHeaderHtmlAttributes,itemHeaderLabelHtmlAttributes:t.itemHeaderLabelHtmlAttributes,isExpanded:t.id?!!l[t.id]:false,isOnlyOneExpand:r,setItemDictionary:x})))};export{W as Accordion};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@purr-react-tailwindcss/components.accordion",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -24,9 +24,9 @@
24
24
  "typescript": "*",
25
25
  "react": "*",
26
26
  "clsx": "*",
27
- "@purr-core/utils.definitions": "0.0.11",
28
- "@purr-react-tailwindcss/components.icon": "0.0.7",
29
- "@purr-react-styled-components/utils.helpers": "0.0.7"
27
+ "@purr-core/utils.definitions": "0.0.12",
28
+ "@purr-react-styled-components/utils.helpers": "0.0.8",
29
+ "@purr-react-tailwindcss/components.icon": "0.0.8"
30
30
  },
31
31
  "author": "@DinhThienPhuc",
32
32
  "license": "ISC",