@orbe-agro/client-core 5.5.2 → 5.5.8

package/dist/@ecme/views/ui-components/data-display/Badge/CountOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountOverflow.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/CountOverflow.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\nimport Badge from '@/components/ui/Badge'\nimport { HiOutlineUser } from 'react-icons/hi'\n\nconst CountOverflow = () => {\n    return (\n        <div className=\"flex\">\n            <Badge className=\"mr-5\" content={10} maxCount={9}>\n                <Avatar icon={<HiOutlineUser />} />\n            </Badge>\n            <Badge className=\"mr-4\" content={100}>\n                <Avatar icon={<HiOutlineUser />} />\n            </Badge>\n        </div>\n    )\n}\n\nexport default CountOverflow\n"],"names":[],"mappings":";;;;;AAIA,MAAM,gBAAgB,MAAM;AAEpB,SAAA,qBAAC,OAAI,EAAA,WAAU,QACX,UAAA;AAAA,IAAA,oBAAC,OAAM,EAAA,WAAU,QAAO,SAAS,IAAI,UAAU,GAC3C,UAAA,oBAAC,QAAO,EAAA,MAAO,oBAAA,eAAA,CAAc,CAAA,EAAI,CAAA,GACrC;AAAA,IACC,oBAAA,OAAA,EAAM,WAAU,QAAO,SAAS,KAC7B,UAAC,oBAAA,QAAA,EAAO,MAAM,oBAAC,eAAc,CAAA,CAAA,EAAA,CAAI,EACrC,CAAA;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"CountOverflow.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/CountOverflow.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\nimport Badge from '@/components/ui/Badge'\nimport { HiOutlineUser } from 'react-icons/hi'\n\nconst CountOverflow = () => {\n    return (\n        <div className=\"flex\">\n            <Badge className=\"mr-5\" content={10} maxCount={9}>\n                <Avatar icon={<HiOutlineUser />} />\n            </Badge>\n            <Badge className=\"mr-4\" content={100}>\n                <Avatar icon={<HiOutlineUser />} />\n            </Badge>\n        </div>\n    )\n}\n\nexport default CountOverflow\n"],"names":[],"mappings":";;;;;AAIA,MAAM,gBAAgB,MAAM;AACxB,SACI,qBAAC,OAAA,EAAI,WAAU,QACX,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAM,WAAU,QAAO,SAAS,IAAI,UAAU,GAC3C,UAAA,oBAAC,QAAA,EAAO,MAAM,oBAAC,eAAA,CAAA,CAAc,GAAI,GACrC;AAAA,IACA,oBAAC,OAAA,EAAM,WAAU,QAAO,SAAS,KAC7B,UAAA,oBAAC,QAAA,EAAO,MAAM,oBAAC,eAAA,CAAA,CAAc,EAAA,CAAI,EAAA,CACrC;AAAA,EAAA,GACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Badge/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/Dot.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\nimport Badge from '@/components/ui/Badge'\nimport { HiOutlineUser } from 'react-icons/hi'\n\nconst Dot = () => {\n    return (\n        <div className=\"flex\">\n            <Badge className=\"mr-4\">\n                <Avatar icon={<HiOutlineUser />} />\n            </Badge>\n        </div>\n    )\n}\n\nexport default Dot\n"],"names":[],"mappings":";;;;;AAIA,MAAM,MAAM,MAAM;AACd,SACK,oBAAA,OAAA,EAAI,WAAU,QACX,8BAAC,OAAM,EAAA,WAAU,QACb,UAAA,oBAAC,UAAO,MAAM,oBAAC,eAAc,EAAA,EAAA,CAAI,EACrC,CAAA,GACJ;AAER;"}
+{"version":3,"file":"Dot.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/Dot.tsx"],"sourcesContent":["import Avatar from '@/components/ui/Avatar'\nimport Badge from '@/components/ui/Badge'\nimport { HiOutlineUser } from 'react-icons/hi'\n\nconst Dot = () => {\n    return (\n        <div className=\"flex\">\n            <Badge className=\"mr-4\">\n                <Avatar icon={<HiOutlineUser />} />\n            </Badge>\n        </div>\n    )\n}\n\nexport default Dot\n"],"names":[],"mappings":";;;;;AAIA,MAAM,MAAM,MAAM;AACd,SACI,oBAAC,OAAA,EAAI,WAAU,QACX,8BAAC,OAAA,EAAM,WAAU,QACb,UAAA,oBAAC,UAAO,MAAM,oBAAC,eAAA,EAAc,EAAA,CAAI,GACrC,GACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Badge/Inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/Inline.tsx"],"sourcesContent":["import Badge from '@/components/ui/Badge'\n\nconst Inline = () => {\n    return (\n        <div className=\"flex items-center\">\n            <Badge className=\"mr-4\" />\n            <Badge className=\"mr-4\" content={9} />\n            <Badge className=\"mr-4\" content={99} />\n            <Badge content={'New'} />\n        </div>\n    )\n}\n\nexport default Inline\n"],"names":[],"mappings":";;;AAEA,MAAM,SAAS,MAAM;AAEb,SAAA,qBAAC,OAAI,EAAA,WAAU,qBACX,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAM,WAAU,OAAO,CAAA;AAAA,IACvB,oBAAA,OAAA,EAAM,WAAU,QAAO,SAAS,GAAG;AAAA,IACnC,oBAAA,OAAA,EAAM,WAAU,QAAO,SAAS,IAAI;AAAA,IACrC,oBAAC,OAAM,EAAA,SAAS,MAAO,CAAA;AAAA,EAAA,GAC3B;AAER;"}
+{"version":3,"file":"Inline.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/Inline.tsx"],"sourcesContent":["import Badge from '@/components/ui/Badge'\n\nconst Inline = () => {\n    return (\n        <div className=\"flex items-center\">\n            <Badge className=\"mr-4\" />\n            <Badge className=\"mr-4\" content={9} />\n            <Badge className=\"mr-4\" content={99} />\n            <Badge content={'New'} />\n        </div>\n    )\n}\n\nexport default Inline\n"],"names":[],"mappings":";;;AAEA,MAAM,SAAS,MAAM;AACjB,SACI,qBAAC,OAAA,EAAI,WAAU,qBACX,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAM,WAAU,OAAA,CAAO;AAAA,IACxB,oBAAC,OAAA,EAAM,WAAU,QAAO,SAAS,GAAG;AAAA,IACpC,oBAAC,OAAA,EAAM,WAAU,QAAO,SAAS,IAAI;AAAA,IACrC,oBAAC,OAAA,EAAM,SAAS,MAAA,CAAO;AAAA,EAAA,GAC3B;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/index.tsx"],"sourcesContent":["import DemoLayout from '@/components/docs/DemoLayout'\n\n// Demo\nimport Basic from './Basic'\nimport CountOverflow from './CountOverflow'\nimport Dot from './Dot'\nimport Inline from './Inline'\nimport Color from './Color'\n\nconst mdPath = 'Badge'\n\nconst demoHeader = {\n    title: 'Badge',\n    desc: `Badges often used to highlight an item's status to notify the user.`,\n}\n\nconst demos = [\n    {\n        mdName: 'Basic',\n        mdPath: mdPath,\n        title: 'Basic',\n        desc: `Badge <code>content</code> prop accept both <code>string</code> & <code>number</code> type.`,\n        component: <Basic />,\n    },\n    {\n        mdName: 'CountOverflow',\n        mdPath: mdPath,\n        title: 'Count Overflow',\n        desc: `Badge will display the <code>maxCount</code> prop number, if the content number is larger than the <code>maxCount</code> prop number.`,\n        component: <CountOverflow />,\n    },\n    {\n        mdName: 'Dot',\n        mdPath: mdPath,\n        title: 'Dot',\n        desc: `Badge will display as dot if without <code>content</code> prop.`,\n        component: <Dot />,\n    },\n    {\n        mdName: 'Inline',\n        mdPath: mdPath,\n        title: 'Inline',\n        desc: `Display Badge inline by leaving <code>children</code> empty.`,\n        component: <Inline />,\n    },\n    {\n        mdName: 'Color',\n        mdPath: mdPath,\n        title: 'Color',\n        desc: `Badge can have different color by setting color value via <code>backgroundColor</code> & <code>textColor</code>.`,\n        component: <Color />,\n    },\n]\n\nconst demoApi = [\n    {\n        component: 'Badge',\n        api: [\n            {\n                propName: 'content',\n                type: `<code>string</code> | <code>number</code>`,\n                default: `-`,\n                desc: 'Content to show in badge',\n            },\n            {\n                propName: 'maxCount',\n                type: `<code>number</code>`,\n                default: `<code>99</code>`,\n                desc: 'Max number to show',\n            },\n            {\n                propName: 'innerClass',\n                type: `<code>string</code>`,\n                default: `-`,\n                desc: 'Class for badge inner',\n            },\n            {\n                propName: 'badgeStyle',\n                type: `<code>object</code>`,\n                default: `-`,\n                desc: 'Custom styling for Badge',\n            },\n        ],\n    },\n]\n\nconst Badge = () => {\n    return <DemoLayout header={demoHeader} demos={demos} api={demoApi} />\n}\n\nexport default Badge\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAS;AAEf,MAAM,aAAa;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACV;AAEA,MAAM,QAAQ;AAAA,EACV;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAM,CAAA,CAAA;AAAA,EACtB;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,eAAc,CAAA,CAAA;AAAA,EAC9B;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,KAAI,CAAA,CAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,QAAO,CAAA,CAAA;AAAA,EACvB;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAM,CAAA,CAAA;AAAA,EAAA;AAE1B;AAEA,MAAM,UAAU;AAAA,EACZ;AAAA,IACI,WAAW;AAAA,IACX,KAAK;AAAA,MACD;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACV;AAAA,EACJ;AAER;AAEA,MAAM,QAAQ,MAAM;AAChB,6BAAQ,YAAW,EAAA,QAAQ,YAAY,OAAc,KAAK,SAAS;AACvE;"}
+{"version":3,"file":"index.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Badge/index.tsx"],"sourcesContent":["import DemoLayout from '@/components/docs/DemoLayout'\n\n// Demo\nimport Basic from './Basic'\nimport CountOverflow from './CountOverflow'\nimport Dot from './Dot'\nimport Inline from './Inline'\nimport Color from './Color'\n\nconst mdPath = 'Badge'\n\nconst demoHeader = {\n    title: 'Badge',\n    desc: `Badges often used to highlight an item's status to notify the user.`,\n}\n\nconst demos = [\n    {\n        mdName: 'Basic',\n        mdPath: mdPath,\n        title: 'Basic',\n        desc: `Badge <code>content</code> prop accept both <code>string</code> & <code>number</code> type.`,\n        component: <Basic />,\n    },\n    {\n        mdName: 'CountOverflow',\n        mdPath: mdPath,\n        title: 'Count Overflow',\n        desc: `Badge will display the <code>maxCount</code> prop number, if the content number is larger than the <code>maxCount</code> prop number.`,\n        component: <CountOverflow />,\n    },\n    {\n        mdName: 'Dot',\n        mdPath: mdPath,\n        title: 'Dot',\n        desc: `Badge will display as dot if without <code>content</code> prop.`,\n        component: <Dot />,\n    },\n    {\n        mdName: 'Inline',\n        mdPath: mdPath,\n        title: 'Inline',\n        desc: `Display Badge inline by leaving <code>children</code> empty.`,\n        component: <Inline />,\n    },\n    {\n        mdName: 'Color',\n        mdPath: mdPath,\n        title: 'Color',\n        desc: `Badge can have different color by setting color value via <code>backgroundColor</code> & <code>textColor</code>.`,\n        component: <Color />,\n    },\n]\n\nconst demoApi = [\n    {\n        component: 'Badge',\n        api: [\n            {\n                propName: 'content',\n                type: `<code>string</code> | <code>number</code>`,\n                default: `-`,\n                desc: 'Content to show in badge',\n            },\n            {\n                propName: 'maxCount',\n                type: `<code>number</code>`,\n                default: `<code>99</code>`,\n                desc: 'Max number to show',\n            },\n            {\n                propName: 'innerClass',\n                type: `<code>string</code>`,\n                default: `-`,\n                desc: 'Class for badge inner',\n            },\n            {\n                propName: 'badgeStyle',\n                type: `<code>object</code>`,\n                default: `-`,\n                desc: 'Custom styling for Badge',\n            },\n        ],\n    },\n]\n\nconst Badge = () => {\n    return <DemoLayout header={demoHeader} demos={demos} api={demoApi} />\n}\n\nexport default Badge\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAS;AAEf,MAAM,aAAa;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACV;AAEA,MAAM,QAAQ;AAAA,EACV;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAA,CAAA,CAAM;AAAA,EAAA;AAAA,EAEtB;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,eAAA,CAAA,CAAc;AAAA,EAAA;AAAA,EAE9B;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,KAAA,CAAA,CAAI;AAAA,EAAA;AAAA,EAEpB;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,QAAA,CAAA,CAAO;AAAA,EAAA;AAAA,EAEvB;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAA,CAAA,CAAM;AAAA,EAAA;AAE1B;AAEA,MAAM,UAAU;AAAA,EACZ;AAAA,IACI,WAAW;AAAA,IACX,KAAK;AAAA,MACD;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACV;AAAA,EACJ;AAER;AAEA,MAAM,QAAQ,MAAM;AAChB,6BAAQ,YAAA,EAAW,QAAQ,YAAY,OAAc,KAAK,SAAS;AACvE;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/Basic.js.map

@@ -1 +1 @@
-{"version":3,"file":"Basic.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/Basic.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst Basic = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar value={value} onChange={setValue} />\n        </div>\n    )\n}\n\nexport default Basic\n"],"names":[],"mappings":";;;;AAGA,MAAM,QAAQ,MAAM;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAGhD,SAAA,oBAAC,SAAI,WAAU,sCACX,8BAAC,UAAS,EAAA,OAAc,UAAU,SAAA,CAAU,EAChD,CAAA;AAER;"}
+{"version":3,"file":"Basic.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/Basic.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst Basic = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar value={value} onChange={setValue} />\n        </div>\n    )\n}\n\nexport default Basic\n"],"names":[],"mappings":";;;;AAGA,MAAM,QAAQ,MAAM;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,SACI,oBAAC,SAAI,WAAU,sCACX,8BAAC,UAAA,EAAS,OAAc,UAAU,SAAA,CAAU,EAAA,CAChD;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/CustomRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomRender.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/CustomRender.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\nimport Badge from '@/components/ui/Badge'\n\nconst CustomRender = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar\n                value={value}\n                dayClassName={(date, { selected }) => {\n                    if (date.getDate() === 12 && !selected) {\n                        return 'text-red-600'\n                    }\n\n                    if (selected) {\n                        return 'text-white'\n                    }\n\n                    return 'text-gray-700 dark:text-gray-200'\n                }}\n                dayStyle={(date, { selected, outOfMonth }) => {\n                    if (date.getDate() === 18 && !selected) {\n                        return { color: '#15c39a' }\n                    }\n\n                    if (outOfMonth) {\n                        return {\n                            opacity: 0,\n                            pointerEvents: 'none',\n                            cursor: 'default',\n                        }\n                    }\n\n                    return {}\n                }}\n                renderDay={(date) => {\n                    const day = date.getDate()\n\n                    if (day !== 12) {\n                        return <span>{day}</span>\n                    }\n\n                    return (\n                        <span className=\"relative flex justify-center items-center w-full h-full\">\n                            {day}\n                            <Badge\n                                className=\"absolute bottom-1\"\n                                innerClass=\"h-1 w-1\"\n                            />\n                        </span>\n                    )\n                }}\n                onChange={setValue}\n            />\n        </div>\n    )\n}\n\nexport default CustomRender\n"],"names":[],"mappings":";;;;;;AAIA,MAAM,eAAe,MAAM;AACvB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAGhD,SAAA,oBAAC,OAAI,EAAA,WAAU,sCACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,cAAc,CAAC,MAAM,EAAE,eAAe;AAClC,YAAI,KAAK,QAAA,MAAc,MAAM,CAAC,UAAU;AAC7B,iBAAA;AAAA,QAAA;AAGX,YAAI,UAAU;AACH,iBAAA;AAAA,QAAA;AAGJ,eAAA;AAAA,MACX;AAAA,MACA,UAAU,CAAC,MAAM,EAAE,UAAU,iBAAiB;AAC1C,YAAI,KAAK,QAAA,MAAc,MAAM,CAAC,UAAU;AAC7B,iBAAA,EAAE,OAAO,UAAU;AAAA,QAAA;AAG9B,YAAI,YAAY;AACL,iBAAA;AAAA,YACH,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,UACZ;AAAA,QAAA;AAGJ,eAAO,CAAC;AAAA,MACZ;AAAA,MACA,WAAW,CAAC,SAAS;AACX,cAAA,MAAM,KAAK,QAAQ;AAEzB,YAAI,QAAQ,IAAI;AACL,iBAAA,oBAAC,UAAM,UAAI,IAAA,CAAA;AAAA,QAAA;AAIlB,eAAA,qBAAC,QAAK,EAAA,WAAU,2DACX,UAAA;AAAA,UAAA;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,YAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,GACJ;AAAA,MAER;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EAAA,GAElB;AAER;"}
+{"version":3,"file":"CustomRender.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/CustomRender.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\nimport Badge from '@/components/ui/Badge'\n\nconst CustomRender = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar\n                value={value}\n                dayClassName={(date, { selected }) => {\n                    if (date.getDate() === 12 && !selected) {\n                        return 'text-red-600'\n                    }\n\n                    if (selected) {\n                        return 'text-white'\n                    }\n\n                    return 'text-gray-700 dark:text-gray-200'\n                }}\n                dayStyle={(date, { selected, outOfMonth }) => {\n                    if (date.getDate() === 18 && !selected) {\n                        return { color: '#15c39a' }\n                    }\n\n                    if (outOfMonth) {\n                        return {\n                            opacity: 0,\n                            pointerEvents: 'none',\n                            cursor: 'default',\n                        }\n                    }\n\n                    return {}\n                }}\n                renderDay={(date) => {\n                    const day = date.getDate()\n\n                    if (day !== 12) {\n                        return <span>{day}</span>\n                    }\n\n                    return (\n                        <span className=\"relative flex justify-center items-center w-full h-full\">\n                            {day}\n                            <Badge\n                                className=\"absolute bottom-1\"\n                                innerClass=\"h-1 w-1\"\n                            />\n                        </span>\n                    )\n                }}\n                onChange={setValue}\n            />\n        </div>\n    )\n}\n\nexport default CustomRender\n"],"names":[],"mappings":";;;;;;AAIA,MAAM,eAAe,MAAM;AACvB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,SACI,oBAAC,OAAA,EAAI,WAAU,sCACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,cAAc,CAAC,MAAM,EAAE,eAAe;AAClC,YAAI,KAAK,QAAA,MAAc,MAAM,CAAC,UAAU;AACpC,iBAAO;AAAA,QACX;AAEA,YAAI,UAAU;AACV,iBAAO;AAAA,QACX;AAEA,eAAO;AAAA,MACX;AAAA,MACA,UAAU,CAAC,MAAM,EAAE,UAAU,iBAAiB;AAC1C,YAAI,KAAK,QAAA,MAAc,MAAM,CAAC,UAAU;AACpC,iBAAO,EAAE,OAAO,UAAA;AAAA,QACpB;AAEA,YAAI,YAAY;AACZ,iBAAO;AAAA,YACH,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,UAAA;AAAA,QAEhB;AAEA,eAAO,CAAA;AAAA,MACX;AAAA,MACA,WAAW,CAAC,SAAS;AACjB,cAAM,MAAM,KAAK,QAAA;AAEjB,YAAI,QAAQ,IAAI;AACZ,iBAAO,oBAAC,UAAM,UAAA,IAAA,CAAI;AAAA,QACtB;AAEA,eACI,qBAAC,QAAA,EAAK,WAAU,2DACX,UAAA;AAAA,UAAA;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,YAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QACf,GACJ;AAAA,MAER;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EAAA,GAElB;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/DisableOutOfPeriodDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisableOutOfPeriodDate.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/DisableOutOfPeriodDate.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\nimport dayjs from 'dayjs'\n\nconst Basic = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    const dateGap = 7\n\n    // Only able to select previos & future 7 days start from today\n    const minDate = dayjs(new Date())\n        .subtract(dateGap, 'day')\n        .startOf('day')\n        .toDate()\n    const maxDate = dayjs(new Date()).add(dateGap, 'day').toDate()\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar\n                value={value}\n                minDate={minDate}\n                maxDate={maxDate}\n                onChange={setValue}\n            />\n        </div>\n    )\n}\n\nexport default Basic\n"],"names":[],"mappings":";;;;;AAIA,MAAM,QAAQ,MAAM;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,QAAM,UAAU;AAGhB,QAAM,UAAU,MAAU,oBAAA,KAAM,CAAA,EAC3B,SAAS,SAAS,KAAK,EACvB,QAAQ,KAAK,EACb,OAAO;AACN,QAAA,UAAU,MAAM,oBAAI,KAAM,CAAA,EAAE,IAAI,SAAS,KAAK,EAAE,OAAO;AAGzD,SAAA,oBAAC,OAAI,EAAA,WAAU,sCACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EAAA,GAElB;AAER;"}
+{"version":3,"file":"DisableOutOfPeriodDate.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/DisableOutOfPeriodDate.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\nimport dayjs from 'dayjs'\n\nconst Basic = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    const dateGap = 7\n\n    // Only able to select previos & future 7 days start from today\n    const minDate = dayjs(new Date())\n        .subtract(dateGap, 'day')\n        .startOf('day')\n        .toDate()\n    const maxDate = dayjs(new Date()).add(dateGap, 'day').toDate()\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar\n                value={value}\n                minDate={minDate}\n                maxDate={maxDate}\n                onChange={setValue}\n            />\n        </div>\n    )\n}\n\nexport default Basic\n"],"names":[],"mappings":";;;;;AAIA,MAAM,QAAQ,MAAM;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,QAAM,UAAU;AAGhB,QAAM,UAAU,MAAM,oBAAI,KAAA,CAAM,EAC3B,SAAS,SAAS,KAAK,EACvB,QAAQ,KAAK,EACb,OAAA;AACL,QAAM,UAAU,MAAM,oBAAI,KAAA,CAAM,EAAE,IAAI,SAAS,KAAK,EAAE,OAAA;AAEtD,SACI,oBAAC,OAAA,EAAI,WAAU,sCACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EAAA,GAElB;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/DisabledCertainDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisabledCertainDate.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/DisabledCertainDate.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst DisabledCertainDate = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    const disableCertainDate = (date: Date) => {\n        const banDate = [7, 15, 21]\n        return banDate.includes(date.getDate())\n    }\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar\n                value={value}\n                disableDate={disableCertainDate}\n                onChange={setValue}\n            />\n        </div>\n    )\n}\n\nexport default DisabledCertainDate\n"],"names":[],"mappings":";;;;AAGA,MAAM,sBAAsB,MAAM;AAC9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAE9C,QAAA,qBAAqB,CAAC,SAAe;AACvC,UAAM,UAAU,CAAC,GAAG,IAAI,EAAE;AAC1B,WAAO,QAAQ,SAAS,KAAK,QAAA,CAAS;AAAA,EAC1C;AAGI,SAAA,oBAAC,OAAI,EAAA,WAAU,sCACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,aAAa;AAAA,MACb,UAAU;AAAA,IAAA;AAAA,EAAA,GAElB;AAER;"}
+{"version":3,"file":"DisabledCertainDate.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/DisabledCertainDate.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst DisabledCertainDate = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    const disableCertainDate = (date: Date) => {\n        const banDate = [7, 15, 21]\n        return banDate.includes(date.getDate())\n    }\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar\n                value={value}\n                disableDate={disableCertainDate}\n                onChange={setValue}\n            />\n        </div>\n    )\n}\n\nexport default DisabledCertainDate\n"],"names":[],"mappings":";;;;AAGA,MAAM,sBAAsB,MAAM;AAC9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,QAAM,qBAAqB,CAAC,SAAe;AACvC,UAAM,UAAU,CAAC,GAAG,IAAI,EAAE;AAC1B,WAAO,QAAQ,SAAS,KAAK,QAAA,CAAS;AAAA,EAC1C;AAEA,SACI,oBAAC,OAAA,EAAI,WAAU,sCACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,aAAa;AAAA,MACb,UAAU;AAAA,IAAA;AAAA,EAAA,GAElB;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/MultipleDateView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultipleDateView.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/MultipleDateView.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst MultipleDateView = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    return (\n        <div className=\"overflow-x-auto \">\n            <div className=\"w-[584px] mx-auto\">\n                <Calendar value={value} dateViewCount={2} onChange={setValue} />\n            </div>\n        </div>\n    )\n}\n\nexport default MultipleDateView\n"],"names":[],"mappings":";;;;AAGA,MAAM,mBAAmB,MAAM;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,6BACK,OAAI,EAAA,WAAU,oBACX,UAAA,oBAAC,SAAI,WAAU,qBACX,UAAC,oBAAA,UAAA,EAAS,OAAc,eAAe,GAAG,UAAU,SAAA,CAAU,EAClE,CAAA,GACJ;AAER;"}
+{"version":3,"file":"MultipleDateView.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/MultipleDateView.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst MultipleDateView = () => {\n    const [value, setValue] = useState<Date | null>(null)\n\n    return (\n        <div className=\"overflow-x-auto \">\n            <div className=\"w-[584px] mx-auto\">\n                <Calendar value={value} dateViewCount={2} onChange={setValue} />\n            </div>\n        </div>\n    )\n}\n\nexport default MultipleDateView\n"],"names":[],"mappings":";;;;AAGA,MAAM,mBAAmB,MAAM;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,IAAI;AAEpD,6BACK,OAAA,EAAI,WAAU,oBACX,UAAA,oBAAC,SAAI,WAAU,qBACX,UAAA,oBAAC,UAAA,EAAS,OAAc,eAAe,GAAG,UAAU,SAAA,CAAU,GAClE,GACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/MultipleSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultipleSelection.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/MultipleSelection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst MultipleSelection = () => {\n    const [value, setValue] = useState<Date[]>([])\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar multipleSelection value={value} onChange={setValue} />\n        </div>\n    )\n}\n\nexport default MultipleSelection\n"],"names":[],"mappings":";;;;AAGA,MAAM,oBAAoB,MAAM;AAC5B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAA,CAAE;AAGzC,SAAA,oBAAC,OAAI,EAAA,WAAU,sCACX,UAAA,oBAAC,UAAS,EAAA,mBAAiB,MAAC,OAAc,UAAU,SAAU,CAAA,GAClE;AAER;"}
+{"version":3,"file":"MultipleSelection.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/MultipleSelection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Calendar from '@/components/ui/Calendar'\n\nconst MultipleSelection = () => {\n    const [value, setValue] = useState<Date[]>([])\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <Calendar multipleSelection value={value} onChange={setValue} />\n        </div>\n    )\n}\n\nexport default MultipleSelection\n"],"names":[],"mappings":";;;;AAGA,MAAM,oBAAoB,MAAM;AAC5B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAA,CAAE;AAE7C,SACI,oBAAC,OAAA,EAAI,WAAU,sCACX,UAAA,oBAAC,UAAA,EAAS,mBAAiB,MAAC,OAAc,UAAU,SAAA,CAAU,GAClE;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/Range.tsx"],"sourcesContent":["import { useState } from 'react'\nimport RangeCalendar from '@/components/ui/RangeCalendar'\nimport dayjs from 'dayjs'\n\nconst Range = () => {\n    const [value, setValue] = useState<[Date | null, Date | null]>([\n        new Date(),\n        dayjs(new Date()).add(5, 'days').toDate(),\n    ])\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <RangeCalendar value={value} onChange={setValue} />\n        </div>\n    )\n}\n\nexport default Range\n"],"names":[],"mappings":";;;;;AAIA,MAAM,QAAQ,MAAM;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqC;AAAA,wBACvD,KAAK;AAAA,IACT,0BAAU,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO;AAAA,EAAA,CAC3C;AAGG,SAAA,oBAAC,SAAI,WAAU,sCACX,8BAAC,eAAc,EAAA,OAAc,UAAU,SAAA,CAAU,EACrD,CAAA;AAER;"}
+{"version":3,"file":"Range.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/Range.tsx"],"sourcesContent":["import { useState } from 'react'\nimport RangeCalendar from '@/components/ui/RangeCalendar'\nimport dayjs from 'dayjs'\n\nconst Range = () => {\n    const [value, setValue] = useState<[Date | null, Date | null]>([\n        new Date(),\n        dayjs(new Date()).add(5, 'days').toDate(),\n    ])\n\n    return (\n        <div className=\"md:w-[280px] max-w-[280px] mx-auto\">\n            <RangeCalendar value={value} onChange={setValue} />\n        </div>\n    )\n}\n\nexport default Range\n"],"names":[],"mappings":";;;;;AAIA,MAAM,QAAQ,MAAM;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqC;AAAA,wBACvD,KAAA;AAAA,IACJ,0BAAU,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,OAAA;AAAA,EAAO,CAC3C;AAED,SACI,oBAAC,SAAI,WAAU,sCACX,8BAAC,eAAA,EAAc,OAAc,UAAU,SAAA,CAAU,EAAA,CACrD;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/index.tsx"],"sourcesContent":["import DemoLayout from '@/components/docs/DemoLayout'\n\n// Demo\nimport Basic from './Basic'\nimport Range from './Range'\nimport CustomRender from './CustomRender'\nimport DisabledCertainDate from './DisabledCertainDate'\nimport DisableOutOfPeriodDate from './DisableOutOfPeriodDate'\nimport MultipleDateView from './MultipleDateView'\nimport MultipleSelection from './MultipleSelection'\n\nconst mdPath = 'Calendar'\n\nconst demoHeader = {\n    title: 'Calendar',\n    desc: 'Calendar component is used for categorize content with a keyword.',\n}\n\nconst demos = [\n    {\n        mdName: 'Basic',\n        mdPath: mdPath,\n        title: 'Basic',\n        desc: `Basic usage of Calendar.`,\n        component: <Basic />,\n    },\n    {\n        mdName: 'Range',\n        mdPath: mdPath,\n        title: 'Range',\n        desc: `RangeCalendar have similar behavior with Calendar, but it able to select start and end date.`,\n        component: <Range />,\n    },\n    {\n        mdName: 'CustomRender',\n        mdPath: mdPath,\n        title: 'Custom render',\n        desc: `You can render custom day elements or apply styles & className to days with these <code>dayStyle</code>, <code>dayClassName</code> & <code>renderDay</code> props.`,\n        component: <CustomRender />,\n    },\n    {\n        mdName: 'DisabledCertainDate',\n        mdPath: mdPath,\n        title: 'Disabled certain date',\n        desc: `Disabled part of dates by using <code>disabledDate</code> prop callback.`,\n        component: <DisabledCertainDate />,\n    },\n    {\n        mdName: 'DisableOutOfPeriodDate',\n        mdPath: mdPath,\n        title: 'Disable out of period date',\n        desc: `Setting <code>minDate</code> & <code>maxDate</code> props to limit available date within a period.`,\n        component: <DisableOutOfPeriodDate />,\n    },\n    {\n        mdName: 'MultipleDateView',\n        mdPath: mdPath,\n        title: 'Multiple date view',\n        desc: `Calender or RangeCalendar can have mutiple date view by setting <code>dateViewCount</code> more than <code>1</code>.`,\n        component: <MultipleDateView />,\n    },\n    {\n        mdName: 'MultipleSelection',\n        mdPath: mdPath,\n        title: 'Multiple selection',\n        desc: `Calendar component allow multiple dates selection by setting <code>multipleSelection</code> props`,\n        component: <MultipleSelection />,\n    },\n]\n\nconst demoApi = [\n    {\n        component: 'Calendar',\n        api: [\n            {\n                propName: 'dateViewCount',\n                type: `<code>number</code>`,\n                default: `<code>1</code>`,\n                desc: 'Amount of date view display in picker',\n            },\n            {\n                propName: 'dayClassName',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string</code>`,\n                default: `-`,\n                desc: 'Apply className to days based on argument',\n            },\n            {\n                propName: 'dayStyle',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties</code>`,\n                default: `-`,\n                desc: 'Apply style to days based on argument',\n            },\n            {\n                propName: 'defaultMonth',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Default month for uncontrolled DatePickerRange',\n            },\n            {\n                propName: 'defaultView',\n                type: `<code>'date'</code> | <code>'month'</code> | <code>'year'</code> `,\n                default: `<code>'date'</code>`,\n                desc: 'Default DatePickerRange view',\n            },\n            {\n                propName: 'disabledDate',\n                type: `<code>(date: Date) => boolean</code>`,\n                default: `-`,\n                desc: 'Specify the date that cannot be selected',\n            },\n            {\n                propName: 'disableOutOfMonth',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to disable days that out of given month',\n            },\n            {\n                propName: 'enableHeaderLabel',\n                type: `<code>boolean</code>`,\n                default: `<code>true</code>`,\n                desc: 'Whether to disable header label to trigger view change',\n            },\n            {\n                propName: 'firstDayOfWeek',\n                type: `<code>'sunday'</code> | <code>'monday'</code>`,\n                default: `<code>'monday'</code>`,\n                desc: 'First day of week',\n            },\n            {\n                propName: 'hideOutOfMonthDates',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide days that out of given month',\n            },\n            {\n                propName: 'hideWeekdays',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide week days',\n            },\n            {\n                propName: 'isDateFirstInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as first in a range',\n            },\n            {\n                propName: 'isDateInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date in a range',\n            },\n            {\n                propName: 'isDateLastInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as last in a range',\n            },\n            {\n                propName: 'labelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'~'</code>`,\n                desc: 'Seperator between date display on input',\n            },\n            {\n                propName: 'locale',\n                type: `<a href=\"https://github.com/iamkun/dayjs/tree/dev/src/locale\" target=\"_blank\" rel=\"noopener noreferrer\"><code>dayjs locale</code></a>`,\n                default: `<code>en</code>`,\n                desc: 'DatePickerRange locale',\n            },\n            {\n                propName: 'maxDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Maximum date to select',\n            },\n            {\n                propName: 'minDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Minimum  date to select',\n            },\n            {\n                propName: 'monthLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Month label format',\n            },\n            {\n                propName: 'onChange',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is selected',\n            },\n            {\n                propName: 'onDayMouseEnter',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is hovered',\n            },\n            {\n                propName: 'paginateBy',\n                type: `<code>number</code>`,\n                default: `<code>dateViewCount</code> | <code>1</code>`,\n                desc: 'Paginate by count of view',\n            },\n            {\n                propName: 'preventFocus',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Prevent focusing upon click',\n            },\n            {\n                propName: 'range',\n                type: `<code>[Date | null, Date | null]</code>`,\n                default: `-`,\n                desc: 'Highlight given date range',\n            },\n            {\n                propName: 'renderDay',\n                type: `<code>(date: Date) => ReactNode</code>`,\n                default: `<code>false</code>`,\n                desc: 'Render custome day element based on the given params',\n            },\n            {\n                propName: 'value',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Value of calender (Controlled)',\n            },\n            {\n                propName: 'weekdayLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'dd'</code>`,\n                desc: 'Format for weekday display',\n            },\n            {\n                propName: 'weekendDays',\n                type: `<code>number[]</code>`,\n                default: `<code>[0, 6]</code>`,\n                desc: 'Indicate the days of weekend',\n            },\n            {\n                propName: 'yearLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Year label format',\n            },\n        ],\n    },\n    {\n        component: 'RangeCalendar',\n        api: [\n            {\n                propName: 'dateViewCount',\n                type: `<code>number</code>`,\n                default: `<code>1</code>`,\n                desc: 'Amount of date view display in picker',\n            },\n            {\n                propName: 'dayClassName',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string</code>`,\n                default: `-`,\n                desc: 'Apply className to days based on argument',\n            },\n            {\n                propName: 'dayStyle',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties</code>`,\n                default: `-`,\n                desc: 'Apply style to days based on argument',\n            },\n            {\n                propName: 'defaultMonth',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Default month for uncontrolled DatePickerRange',\n            },\n            {\n                propName: 'defaultView',\n                type: `<code>'date'</code> | <code>'month'</code> | <code>'year'</code> `,\n                default: `<code>'date'</code>`,\n                desc: 'Default DatePickerRange view',\n            },\n            {\n                propName: 'disabledDate',\n                type: `<code>(date: Date) => boolean</code>`,\n                default: `-`,\n                desc: 'Specify the date that cannot be selected',\n            },\n            {\n                propName: 'disableOutOfMonth',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to disable days that out of given month',\n            },\n            {\n                propName: 'enableHeaderLabel',\n                type: `<code>boolean</code>`,\n                default: `<code>true</code>`,\n                desc: 'Whether to disable header label to trigger view change',\n            },\n            {\n                propName: 'firstDayOfWeek',\n                type: `<code>'sunday'</code> | <code>'monday'</code>`,\n                default: `<code>'monday'</code>`,\n                desc: 'First day of week',\n            },\n            {\n                propName: 'hideOutOfMonthDates',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide days that out of given month',\n            },\n            {\n                propName: 'hideWeekdays',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide week days',\n            },\n            {\n                propName: 'isDateFirstInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as first in a range',\n            },\n            {\n                propName: 'isDateInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date in a range',\n            },\n            {\n                propName: 'isDateLastInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as last in a range',\n            },\n            {\n                propName: 'labelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'~'</code>`,\n                desc: 'Seperator between date display on input',\n            },\n            {\n                propName: 'locale',\n                type: `<a href=\"https://github.com/iamkun/dayjs/tree/dev/src/locale\" target=\"_blank\" rel=\"noopener noreferrer\"><code>dayjs locale</code></a>`,\n                default: `<code>en</code>`,\n                desc: 'DatePickerRange locale',\n            },\n            {\n                propName: 'maxDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Maximum date to select',\n            },\n            {\n                propName: 'minDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Minimum  date to select',\n            },\n            {\n                propName: 'monthLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Month label format',\n            },\n            {\n                propName: 'onChange',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is selected',\n            },\n            {\n                propName: 'onDayMouseEnter',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is hovered',\n            },\n            {\n                propName: 'paginateBy',\n                type: `<code>number</code>`,\n                default: `<code>dateViewCount</code> | <code>1</code>`,\n                desc: 'Paginate by count of view',\n            },\n            {\n                propName: 'preventFocus',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Prevent focusing upon click',\n            },\n            {\n                propName: 'range',\n                type: `<code>[Date | null, Date | null]</code>`,\n                default: `-`,\n                desc: 'Highlight given date range',\n            },\n            {\n                propName: 'renderDay',\n                type: `<code>(date: Date) => ReactNode</code>`,\n                default: `<code>false</code>`,\n                desc: 'Render custome day element based on the given params',\n            },\n            {\n                propName: 'singleDate',\n                type: `<code>boolean</code> `,\n                default: `<code>false</code>`,\n                desc: 'Only one date can be selected',\n            },\n            {\n                propName: 'value',\n                type: `<code>[Date | null, Date | null]</code>`,\n                default: `-`,\n                desc: 'Value of calender (Controlled)',\n            },\n            {\n                propName: 'weekdayLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'dd'</code>`,\n                desc: 'Format for weekday display',\n            },\n            {\n                propName: 'weekendDays',\n                type: `<code>number[]</code>`,\n                default: `<code>[0, 6]</code>`,\n                desc: 'Indicate the days of weekend',\n            },\n            {\n                propName: 'yearLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Year label format',\n            },\n        ],\n    },\n]\n\nconst Calendar = () => {\n    return <DemoLayout header={demoHeader} demos={demos} api={demoApi} />\n}\n\nexport default Calendar\n"],"names":["DisableOutOfPeriodDate"],"mappings":";;;;;;;;;AAWA,MAAM,SAAS;AAEf,MAAM,aAAa;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACV;AAEA,MAAM,QAAQ;AAAA,EACV;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAM,CAAA,CAAA;AAAA,EACtB;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAM,CAAA,CAAA;AAAA,EACtB;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,cAAa,CAAA,CAAA;AAAA,EAC7B;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,qBAAoB,CAAA,CAAA;AAAA,EACpC;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAYA,SAAuB,CAAA,CAAA;AAAA,EACvC;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,kBAAiB,CAAA,CAAA;AAAA,EACjC;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,mBAAkB,CAAA,CAAA;AAAA,EAAA;AAEtC;AAEA,MAAM,UAAU;AAAA,EACZ;AAAA,IACI,WAAW;AAAA,IACX,KAAK;AAAA,MACD;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACV;AAAA,EAER;AAAA,EACA;AAAA,IACI,WAAW;AAAA,IACX,KAAK;AAAA,MACD;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACV;AAAA,EACJ;AAER;AAEA,MAAM,WAAW,MAAM;AACnB,6BAAQ,YAAW,EAAA,QAAQ,YAAY,OAAc,KAAK,SAAS;AACvE;"}
+{"version":3,"file":"index.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Calendar/index.tsx"],"sourcesContent":["import DemoLayout from '@/components/docs/DemoLayout'\n\n// Demo\nimport Basic from './Basic'\nimport Range from './Range'\nimport CustomRender from './CustomRender'\nimport DisabledCertainDate from './DisabledCertainDate'\nimport DisableOutOfPeriodDate from './DisableOutOfPeriodDate'\nimport MultipleDateView from './MultipleDateView'\nimport MultipleSelection from './MultipleSelection'\n\nconst mdPath = 'Calendar'\n\nconst demoHeader = {\n    title: 'Calendar',\n    desc: 'Calendar component is used for categorize content with a keyword.',\n}\n\nconst demos = [\n    {\n        mdName: 'Basic',\n        mdPath: mdPath,\n        title: 'Basic',\n        desc: `Basic usage of Calendar.`,\n        component: <Basic />,\n    },\n    {\n        mdName: 'Range',\n        mdPath: mdPath,\n        title: 'Range',\n        desc: `RangeCalendar have similar behavior with Calendar, but it able to select start and end date.`,\n        component: <Range />,\n    },\n    {\n        mdName: 'CustomRender',\n        mdPath: mdPath,\n        title: 'Custom render',\n        desc: `You can render custom day elements or apply styles & className to days with these <code>dayStyle</code>, <code>dayClassName</code> & <code>renderDay</code> props.`,\n        component: <CustomRender />,\n    },\n    {\n        mdName: 'DisabledCertainDate',\n        mdPath: mdPath,\n        title: 'Disabled certain date',\n        desc: `Disabled part of dates by using <code>disabledDate</code> prop callback.`,\n        component: <DisabledCertainDate />,\n    },\n    {\n        mdName: 'DisableOutOfPeriodDate',\n        mdPath: mdPath,\n        title: 'Disable out of period date',\n        desc: `Setting <code>minDate</code> & <code>maxDate</code> props to limit available date within a period.`,\n        component: <DisableOutOfPeriodDate />,\n    },\n    {\n        mdName: 'MultipleDateView',\n        mdPath: mdPath,\n        title: 'Multiple date view',\n        desc: `Calender or RangeCalendar can have mutiple date view by setting <code>dateViewCount</code> more than <code>1</code>.`,\n        component: <MultipleDateView />,\n    },\n    {\n        mdName: 'MultipleSelection',\n        mdPath: mdPath,\n        title: 'Multiple selection',\n        desc: `Calendar component allow multiple dates selection by setting <code>multipleSelection</code> props`,\n        component: <MultipleSelection />,\n    },\n]\n\nconst demoApi = [\n    {\n        component: 'Calendar',\n        api: [\n            {\n                propName: 'dateViewCount',\n                type: `<code>number</code>`,\n                default: `<code>1</code>`,\n                desc: 'Amount of date view display in picker',\n            },\n            {\n                propName: 'dayClassName',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string</code>`,\n                default: `-`,\n                desc: 'Apply className to days based on argument',\n            },\n            {\n                propName: 'dayStyle',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties</code>`,\n                default: `-`,\n                desc: 'Apply style to days based on argument',\n            },\n            {\n                propName: 'defaultMonth',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Default month for uncontrolled DatePickerRange',\n            },\n            {\n                propName: 'defaultView',\n                type: `<code>'date'</code> | <code>'month'</code> | <code>'year'</code> `,\n                default: `<code>'date'</code>`,\n                desc: 'Default DatePickerRange view',\n            },\n            {\n                propName: 'disabledDate',\n                type: `<code>(date: Date) => boolean</code>`,\n                default: `-`,\n                desc: 'Specify the date that cannot be selected',\n            },\n            {\n                propName: 'disableOutOfMonth',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to disable days that out of given month',\n            },\n            {\n                propName: 'enableHeaderLabel',\n                type: `<code>boolean</code>`,\n                default: `<code>true</code>`,\n                desc: 'Whether to disable header label to trigger view change',\n            },\n            {\n                propName: 'firstDayOfWeek',\n                type: `<code>'sunday'</code> | <code>'monday'</code>`,\n                default: `<code>'monday'</code>`,\n                desc: 'First day of week',\n            },\n            {\n                propName: 'hideOutOfMonthDates',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide days that out of given month',\n            },\n            {\n                propName: 'hideWeekdays',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide week days',\n            },\n            {\n                propName: 'isDateFirstInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as first in a range',\n            },\n            {\n                propName: 'isDateInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date in a range',\n            },\n            {\n                propName: 'isDateLastInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as last in a range',\n            },\n            {\n                propName: 'labelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'~'</code>`,\n                desc: 'Seperator between date display on input',\n            },\n            {\n                propName: 'locale',\n                type: `<a href=\"https://github.com/iamkun/dayjs/tree/dev/src/locale\" target=\"_blank\" rel=\"noopener noreferrer\"><code>dayjs locale</code></a>`,\n                default: `<code>en</code>`,\n                desc: 'DatePickerRange locale',\n            },\n            {\n                propName: 'maxDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Maximum date to select',\n            },\n            {\n                propName: 'minDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Minimum  date to select',\n            },\n            {\n                propName: 'monthLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Month label format',\n            },\n            {\n                propName: 'onChange',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is selected',\n            },\n            {\n                propName: 'onDayMouseEnter',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is hovered',\n            },\n            {\n                propName: 'paginateBy',\n                type: `<code>number</code>`,\n                default: `<code>dateViewCount</code> | <code>1</code>`,\n                desc: 'Paginate by count of view',\n            },\n            {\n                propName: 'preventFocus',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Prevent focusing upon click',\n            },\n            {\n                propName: 'range',\n                type: `<code>[Date | null, Date | null]</code>`,\n                default: `-`,\n                desc: 'Highlight given date range',\n            },\n            {\n                propName: 'renderDay',\n                type: `<code>(date: Date) => ReactNode</code>`,\n                default: `<code>false</code>`,\n                desc: 'Render custome day element based on the given params',\n            },\n            {\n                propName: 'value',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Value of calender (Controlled)',\n            },\n            {\n                propName: 'weekdayLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'dd'</code>`,\n                desc: 'Format for weekday display',\n            },\n            {\n                propName: 'weekendDays',\n                type: `<code>number[]</code>`,\n                default: `<code>[0, 6]</code>`,\n                desc: 'Indicate the days of weekend',\n            },\n            {\n                propName: 'yearLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Year label format',\n            },\n        ],\n    },\n    {\n        component: 'RangeCalendar',\n        api: [\n            {\n                propName: 'dateViewCount',\n                type: `<code>number</code>`,\n                default: `<code>1</code>`,\n                desc: 'Amount of date view display in picker',\n            },\n            {\n                propName: 'dayClassName',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string</code>`,\n                default: `-`,\n                desc: 'Apply className to days based on argument',\n            },\n            {\n                propName: 'dayStyle',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties</code>`,\n                default: `-`,\n                desc: 'Apply style to days based on argument',\n            },\n            {\n                propName: 'defaultMonth',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Default month for uncontrolled DatePickerRange',\n            },\n            {\n                propName: 'defaultView',\n                type: `<code>'date'</code> | <code>'month'</code> | <code>'year'</code> `,\n                default: `<code>'date'</code>`,\n                desc: 'Default DatePickerRange view',\n            },\n            {\n                propName: 'disabledDate',\n                type: `<code>(date: Date) => boolean</code>`,\n                default: `-`,\n                desc: 'Specify the date that cannot be selected',\n            },\n            {\n                propName: 'disableOutOfMonth',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to disable days that out of given month',\n            },\n            {\n                propName: 'enableHeaderLabel',\n                type: `<code>boolean</code>`,\n                default: `<code>true</code>`,\n                desc: 'Whether to disable header label to trigger view change',\n            },\n            {\n                propName: 'firstDayOfWeek',\n                type: `<code>'sunday'</code> | <code>'monday'</code>`,\n                default: `<code>'monday'</code>`,\n                desc: 'First day of week',\n            },\n            {\n                propName: 'hideOutOfMonthDates',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide days that out of given month',\n            },\n            {\n                propName: 'hideWeekdays',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Whether to hide week days',\n            },\n            {\n                propName: 'isDateFirstInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as first in a range',\n            },\n            {\n                propName: 'isDateInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date in a range',\n            },\n            {\n                propName: 'isDateLastInRange',\n                type: `<code>(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean</code>`,\n                default: `-`,\n                desc: 'Highlight date as last in a range',\n            },\n            {\n                propName: 'labelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'~'</code>`,\n                desc: 'Seperator between date display on input',\n            },\n            {\n                propName: 'locale',\n                type: `<a href=\"https://github.com/iamkun/dayjs/tree/dev/src/locale\" target=\"_blank\" rel=\"noopener noreferrer\"><code>dayjs locale</code></a>`,\n                default: `<code>en</code>`,\n                desc: 'DatePickerRange locale',\n            },\n            {\n                propName: 'maxDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Maximum date to select',\n            },\n            {\n                propName: 'minDate',\n                type: `<code>Date</code>`,\n                default: `-`,\n                desc: 'Minimum  date to select',\n            },\n            {\n                propName: 'monthLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Month label format',\n            },\n            {\n                propName: 'onChange',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is selected',\n            },\n            {\n                propName: 'onDayMouseEnter',\n                type: `<code>function(date: Date)</code> `,\n                default: `-`,\n                desc: 'Callback when date is hovered',\n            },\n            {\n                propName: 'paginateBy',\n                type: `<code>number</code>`,\n                default: `<code>dateViewCount</code> | <code>1</code>`,\n                desc: 'Paginate by count of view',\n            },\n            {\n                propName: 'preventFocus',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Prevent focusing upon click',\n            },\n            {\n                propName: 'range',\n                type: `<code>[Date | null, Date | null]</code>`,\n                default: `-`,\n                desc: 'Highlight given date range',\n            },\n            {\n                propName: 'renderDay',\n                type: `<code>(date: Date) => ReactNode</code>`,\n                default: `<code>false</code>`,\n                desc: 'Render custome day element based on the given params',\n            },\n            {\n                propName: 'singleDate',\n                type: `<code>boolean</code> `,\n                default: `<code>false</code>`,\n                desc: 'Only one date can be selected',\n            },\n            {\n                propName: 'value',\n                type: `<code>[Date | null, Date | null]</code>`,\n                default: `-`,\n                desc: 'Value of calender (Controlled)',\n            },\n            {\n                propName: 'weekdayLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'dd'</code>`,\n                desc: 'Format for weekday display',\n            },\n            {\n                propName: 'weekendDays',\n                type: `<code>number[]</code>`,\n                default: `<code>[0, 6]</code>`,\n                desc: 'Indicate the days of weekend',\n            },\n            {\n                propName: 'yearLabelFormat',\n                type: `<code>string</code>`,\n                default: `<code>'YYYY'</code>`,\n                desc: 'Year label format',\n            },\n        ],\n    },\n]\n\nconst Calendar = () => {\n    return <DemoLayout header={demoHeader} demos={demos} api={demoApi} />\n}\n\nexport default Calendar\n"],"names":["DisableOutOfPeriodDate"],"mappings":"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"}

package/dist/@ecme/views/ui-components/data-display/Cards/Basic.js.map

@@ -1 +1 @@
-{"version":3,"file":"Basic.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/Basic.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\n\nconst Basic = () => {\n    return (\n        <div>\n            <Card>\n                <h5>Card title</h5>\n                <p>\n                    Some quick example text to build on the card title and make\n                    up the bulk of the card&apos;s content.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default Basic\n"],"names":[],"mappings":";;;AAEA,MAAM,QAAQ,MAAM;AAEZ,SAAA,oBAAC,OACG,EAAA,UAAA,qBAAC,MACG,EAAA,UAAA;AAAA,IAAA,oBAAC,QAAG,UAAU,aAAA,CAAA;AAAA,IACd,oBAAC,OAAE,UAGH,iGAAA,CAAA;AAAA,EAAA,EAAA,CACJ,EACJ,CAAA;AAER;"}
+{"version":3,"file":"Basic.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/Basic.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\n\nconst Basic = () => {\n    return (\n        <div>\n            <Card>\n                <h5>Card title</h5>\n                <p>\n                    Some quick example text to build on the card title and make\n                    up the bulk of the card&apos;s content.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default Basic\n"],"names":[],"mappings":";;;AAEA,MAAM,QAAQ,MAAM;AAChB,SACI,oBAAC,OAAA,EACG,UAAA,qBAAC,MAAA,EACG,UAAA;AAAA,IAAA,oBAAC,QAAG,UAAA,aAAA,CAAU;AAAA,IACd,oBAAC,OAAE,UAAA,iGAAA,CAGH;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/BorderLess.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderLess.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/BorderLess.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\n\nconst BorderLess = () => {\n    return (\n        <div>\n            <Card bordered={false}>\n                <h5>Card title</h5>\n                <p>\n                    Some quick example text to build on the card title and make\n                    up the bulk of the card&apos;s content.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default BorderLess\n"],"names":[],"mappings":";;;AAEA,MAAM,aAAa,MAAM;AACrB,SACK,oBAAA,OAAA,EACG,UAAC,qBAAA,MAAA,EAAK,UAAU,OACZ,UAAA;AAAA,IAAA,oBAAC,QAAG,UAAU,aAAA,CAAA;AAAA,IACd,oBAAC,OAAE,UAGH,iGAAA,CAAA;AAAA,EAAA,EAAA,CACJ,EACJ,CAAA;AAER;"}
+{"version":3,"file":"BorderLess.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/BorderLess.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\n\nconst BorderLess = () => {\n    return (\n        <div>\n            <Card bordered={false}>\n                <h5>Card title</h5>\n                <p>\n                    Some quick example text to build on the card title and make\n                    up the bulk of the card&apos;s content.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default BorderLess\n"],"names":[],"mappings":";;;AAEA,MAAM,aAAa,MAAM;AACrB,SACI,oBAAC,OAAA,EACG,UAAA,qBAAC,MAAA,EAAK,UAAU,OACZ,UAAA;AAAA,IAAA,oBAAC,QAAG,UAAA,aAAA,CAAU;AAAA,IACd,oBAAC,OAAE,UAAA,iGAAA,CAGH;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/Clickable.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\n\nconst Clickable = () => {\n    return (\n        <div className=\"max-w-xs\">\n            <Card\n                clickable\n                className=\"hover:shadow-lg transition duration-150 ease-in-out\"\n                onClick={(e) => console.log('Card Clickable', e)}\n            >\n                <h5>Card title</h5>\n                <p className=\"mt-2\">\n                    Some quick example text to build on the card title and make\n                    up the bulk of the card&apos;s content.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default Clickable\n"],"names":[],"mappings":";;;AAEA,MAAM,YAAY,MAAM;AAEhB,SAAA,oBAAC,OAAI,EAAA,WAAU,YACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAS,CAAC,MAAM,QAAQ,IAAI,kBAAkB,CAAC;AAAA,MAE/C,UAAA;AAAA,QAAA,oBAAC,QAAG,UAAU,aAAA,CAAA;AAAA,QACb,oBAAA,KAAA,EAAE,WAAU,QAAO,UAGpB,iGAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"Clickable.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/Clickable.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\n\nconst Clickable = () => {\n    return (\n        <div className=\"max-w-xs\">\n            <Card\n                clickable\n                className=\"hover:shadow-lg transition duration-150 ease-in-out\"\n                onClick={(e) => console.log('Card Clickable', e)}\n            >\n                <h5>Card title</h5>\n                <p className=\"mt-2\">\n                    Some quick example text to build on the card title and make\n                    up the bulk of the card&apos;s content.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default Clickable\n"],"names":[],"mappings":";;;AAEA,MAAM,YAAY,MAAM;AACpB,SACI,oBAAC,OAAA,EAAI,WAAU,YACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAS,CAAC,MAAM,QAAQ,IAAI,kBAAkB,CAAC;AAAA,MAE/C,UAAA;AAAA,QAAA,oBAAC,QAAG,UAAA,aAAA,CAAU;AAAA,QACd,oBAAC,KAAA,EAAE,WAAU,QAAO,UAAA,iGAAA,CAGpB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/ExtraClass.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtraClass.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/ExtraClass.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\n\nconst ExtraClass = () => {\n    const cardFooter = (\n        <div className=\"flex\">\n            <Button size=\"sm\" className=\"ltr:mr-2 rtl:ml-2\">\n                Save\n            </Button>\n            <Button size=\"sm\" variant=\"solid\">\n                New Post\n            </Button>\n        </div>\n    )\n\n    return (\n        <div>\n            <Card\n                header={{\n                    content: <span>Card Header</span>,\n                    className: 'font-semibold text-lg text-indigo-600',\n                }}\n                footer={{\n                    content: cardFooter,\n                    className: 'flex justify-end',\n                }}\n                bodyClass=\"text-center\"\n            >\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the industry\n                    standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a\n                    type specimen book. It has survived not only five centuries,\n                    but also the leap into electronic typesetting, remaining\n                    essentially unchanged. It was popularised in the 1960s with\n                    the release of Letraset sheets containing Lorem Ipsum\n                    passages, and more recently with desktop publishing software\n                    like Aldus PageMaker including versions of Lorem Ipsum\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default ExtraClass\n"],"names":[],"mappings":";;;;;AAGA,MAAM,aAAa,MAAM;AACrB,QAAM,aACF,qBAAC,OAAI,EAAA,WAAU,QACX,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAK,MAAK,WAAU,qBAAoB,UAEhD,QAAA;AAAA,wBACC,QAAO,EAAA,MAAK,MAAK,SAAQ,SAAQ,UAElC,WAAA,CAAA;AAAA,EAAA,GACJ;AAGJ,6BACK,OACG,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,QACJ,SAAU,oBAAA,QAAA,EAAK,UAAW,cAAA,CAAA;AAAA,QAC1B,WAAW;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,MACf;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,oBAAC,OAAE,UAWH,8jBAAA,CAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"ExtraClass.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/ExtraClass.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\n\nconst ExtraClass = () => {\n    const cardFooter = (\n        <div className=\"flex\">\n            <Button size=\"sm\" className=\"ltr:mr-2 rtl:ml-2\">\n                Save\n            </Button>\n            <Button size=\"sm\" variant=\"solid\">\n                New Post\n            </Button>\n        </div>\n    )\n\n    return (\n        <div>\n            <Card\n                header={{\n                    content: <span>Card Header</span>,\n                    className: 'font-semibold text-lg text-indigo-600',\n                }}\n                footer={{\n                    content: cardFooter,\n                    className: 'flex justify-end',\n                }}\n                bodyClass=\"text-center\"\n            >\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the industry\n                    standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a\n                    type specimen book. It has survived not only five centuries,\n                    but also the leap into electronic typesetting, remaining\n                    essentially unchanged. It was popularised in the 1960s with\n                    the release of Letraset sheets containing Lorem Ipsum\n                    passages, and more recently with desktop publishing software\n                    like Aldus PageMaker including versions of Lorem Ipsum\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default ExtraClass\n"],"names":[],"mappings":";;;;;AAGA,MAAM,aAAa,MAAM;AACrB,QAAM,aACF,qBAAC,OAAA,EAAI,WAAU,QACX,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAK,MAAK,WAAU,qBAAoB,UAAA,QAEhD;AAAA,wBACC,QAAA,EAAO,MAAK,MAAK,SAAQ,SAAQ,UAAA,WAAA,CAElC;AAAA,EAAA,GACJ;AAGJ,6BACK,OAAA,EACG,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,QACJ,SAAS,oBAAC,QAAA,EAAK,UAAA,cAAA,CAAW;AAAA,QAC1B,WAAW;AAAA,MAAA;AAAA,MAEf,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEf,WAAU;AAAA,MAEV,UAAA,oBAAC,OAAE,UAAA,8jBAAA,CAWH;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/HeaderFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderFooter.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/HeaderFooter.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\nimport { HiCheckCircle } from 'react-icons/hi'\n\nconst HeaderFooter = () => {\n    const headerExtraContent = (\n        <span className=\"flex items-center\">\n            <span className=\"mr-1 font-semibold\">Status:</span>\n            <span className=\"text-emerald-500 text-xl\">\n                <HiCheckCircle />\n            </span>\n        </span>\n    )\n\n    const cardFooter = (\n        <div className=\"flex justify-end\">\n            <Button size=\"sm\" className=\"ltr:mr-2 rtl:ml-2\">\n                Save\n            </Button>\n            <Button size=\"sm\" variant=\"solid\">\n                New Post\n            </Button>\n        </div>\n    )\n\n    return (\n        <div>\n            <Card\n                header={{\n                    content: 'Card Header',\n                    extra: headerExtraContent,\n                }}\n                footer={{\n                    content: cardFooter,\n                }}\n            >\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the\n                    industry&apos;s standard dummy text ever since the 1500s,\n                    when an unknown printer took a galley of type and scrambled\n                    it to make a type specimen book. It has survived not only\n                    five centuries, but also the leap into electronic\n                    typesetting, remaining essentially unchanged. It was\n                    popularised in the 1960s with the release of Letraset sheets\n                    containing Lorem Ipsum passages, and more recently with\n                    desktop publishing software like Aldus PageMaker including\n                    versions of Lorem Ipsum\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default HeaderFooter\n"],"names":[],"mappings":";;;;;;AAIA,MAAM,eAAe,MAAM;AACvB,QAAM,qBACF,qBAAC,QAAK,EAAA,WAAU,qBACZ,UAAA;AAAA,IAAC,oBAAA,QAAA,EAAK,WAAU,sBAAqB,UAAO,WAAA;AAAA,wBAC3C,QAAK,EAAA,WAAU,4BACZ,UAAA,oBAAC,iBAAc,EACnB,CAAA;AAAA,EAAA,GACJ;AAGJ,QAAM,aACF,qBAAC,OAAI,EAAA,WAAU,oBACX,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAK,MAAK,WAAU,qBAAoB,UAEhD,QAAA;AAAA,wBACC,QAAO,EAAA,MAAK,MAAK,SAAQ,SAAQ,UAElC,WAAA,CAAA;AAAA,EAAA,GACJ;AAGJ,6BACK,OACG,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACJ,SAAS;AAAA,MACb;AAAA,MAEA,UAAA,oBAAC,OAAE,UAYH,gkBAAA,CAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"HeaderFooter.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/HeaderFooter.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\nimport { HiCheckCircle } from 'react-icons/hi'\n\nconst HeaderFooter = () => {\n    const headerExtraContent = (\n        <span className=\"flex items-center\">\n            <span className=\"mr-1 font-semibold\">Status:</span>\n            <span className=\"text-emerald-500 text-xl\">\n                <HiCheckCircle />\n            </span>\n        </span>\n    )\n\n    const cardFooter = (\n        <div className=\"flex justify-end\">\n            <Button size=\"sm\" className=\"ltr:mr-2 rtl:ml-2\">\n                Save\n            </Button>\n            <Button size=\"sm\" variant=\"solid\">\n                New Post\n            </Button>\n        </div>\n    )\n\n    return (\n        <div>\n            <Card\n                header={{\n                    content: 'Card Header',\n                    extra: headerExtraContent,\n                }}\n                footer={{\n                    content: cardFooter,\n                }}\n            >\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the\n                    industry&apos;s standard dummy text ever since the 1500s,\n                    when an unknown printer took a galley of type and scrambled\n                    it to make a type specimen book. It has survived not only\n                    five centuries, but also the leap into electronic\n                    typesetting, remaining essentially unchanged. It was\n                    popularised in the 1960s with the release of Letraset sheets\n                    containing Lorem Ipsum passages, and more recently with\n                    desktop publishing software like Aldus PageMaker including\n                    versions of Lorem Ipsum\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default HeaderFooter\n"],"names":[],"mappings":";;;;;;AAIA,MAAM,eAAe,MAAM;AACvB,QAAM,qBACF,qBAAC,QAAA,EAAK,WAAU,qBACZ,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,sBAAqB,UAAA,WAAO;AAAA,wBAC3C,QAAA,EAAK,WAAU,4BACZ,UAAA,oBAAC,iBAAc,EAAA,CACnB;AAAA,EAAA,GACJ;AAGJ,QAAM,aACF,qBAAC,OAAA,EAAI,WAAU,oBACX,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAK,MAAK,WAAU,qBAAoB,UAAA,QAEhD;AAAA,wBACC,QAAA,EAAO,MAAK,MAAK,SAAQ,SAAQ,UAAA,WAAA,CAElC;AAAA,EAAA,GACJ;AAGJ,6BACK,OAAA,EACG,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,MAEX,QAAQ;AAAA,QACJ,SAAS;AAAA,MAAA;AAAA,MAGb,UAAA,oBAAC,OAAE,UAAA,gkBAAA,CAYH;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/HeaderFooterBorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderFooterBorder.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/HeaderFooterBorder.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\n\nconst HeaderFooterBorder = () => {\n    const cardFooter = (\n        <div className=\"flex\">\n            <Button size=\"sm\" className=\"ltr:mr-2 rtl:ml-2\">\n                Save\n            </Button>\n            <Button size=\"sm\" variant=\"solid\">\n                New Post\n            </Button>\n        </div>\n    )\n\n    return (\n        <div>\n            <Card\n                header={{\n                    content: 'Card Header',\n                    bordered: false,\n                }}\n                footer={{\n                    content: cardFooter,\n                    bordered: false,\n                }}\n            >\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the\n                    industry&apos;s standard dummy text ever since the 1500s,\n                    when an unknown printer took a galley of type and scrambled\n                    it to make a type specimen book. It has survived not only\n                    five centuries, but also the leap into electronic\n                    typesetting, remaining essentially unchanged. It was\n                    popularised in the 1960s with the release of Letraset sheets\n                    containing Lorem Ipsum passages, and more recently with\n                    desktop publishing software like Aldus PageMaker including\n                    versions of Lorem Ipsum\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default HeaderFooterBorder\n"],"names":[],"mappings":";;;;;AAGA,MAAM,qBAAqB,MAAM;AAC7B,QAAM,aACF,qBAAC,OAAI,EAAA,WAAU,QACX,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAK,MAAK,WAAU,qBAAoB,UAEhD,QAAA;AAAA,wBACC,QAAO,EAAA,MAAK,MAAK,SAAQ,SAAQ,UAElC,WAAA,CAAA;AAAA,EAAA,GACJ;AAGJ,6BACK,OACG,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA,oBAAC,OAAE,UAYH,gkBAAA,CAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"HeaderFooterBorder.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/HeaderFooterBorder.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Button from '@/components/ui/Button'\n\nconst HeaderFooterBorder = () => {\n    const cardFooter = (\n        <div className=\"flex\">\n            <Button size=\"sm\" className=\"ltr:mr-2 rtl:ml-2\">\n                Save\n            </Button>\n            <Button size=\"sm\" variant=\"solid\">\n                New Post\n            </Button>\n        </div>\n    )\n\n    return (\n        <div>\n            <Card\n                header={{\n                    content: 'Card Header',\n                    bordered: false,\n                }}\n                footer={{\n                    content: cardFooter,\n                    bordered: false,\n                }}\n            >\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the\n                    industry&apos;s standard dummy text ever since the 1500s,\n                    when an unknown printer took a galley of type and scrambled\n                    it to make a type specimen book. It has survived not only\n                    five centuries, but also the leap into electronic\n                    typesetting, remaining essentially unchanged. It was\n                    popularised in the 1960s with the release of Letraset sheets\n                    containing Lorem Ipsum passages, and more recently with\n                    desktop publishing software like Aldus PageMaker including\n                    versions of Lorem Ipsum\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default HeaderFooterBorder\n"],"names":[],"mappings":";;;;;AAGA,MAAM,qBAAqB,MAAM;AAC7B,QAAM,aACF,qBAAC,OAAA,EAAI,WAAU,QACX,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAK,MAAK,WAAU,qBAAoB,UAAA,QAEhD;AAAA,wBACC,QAAA,EAAO,MAAK,MAAK,SAAQ,SAAQ,UAAA,WAAA,CAElC;AAAA,EAAA,GACJ;AAGJ,6BACK,OAAA,EACG,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,MAGd,UAAA,oBAAC,OAAE,UAAA,gkBAAA,CAYH;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/Media.js.map

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/Media.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Avatar from '@/components/ui/Avatar'\n\nconst HeaderFooterBorder = () => {\n    const cardFooter = (\n        <div className=\"flex items-center\">\n            <Avatar\n                size={30}\n                className=\"mr-2\"\n                shape=\"circle\"\n                src=\"/img/avatars/thumb-1.jpg\"\n            />\n            <span>\n                <h6 className=\"text-sm\">Kristen Fisher</h6>\n                <span className=\"text-xs\">Sep 23, 2021</span>\n            </span>\n        </div>\n    )\n\n    const cardHeader = (\n        <div className=\"rounded-tl-lg rounded-tr-lg overflow-hidden\">\n            <img src=\"/img/others/img-1.jpg\" alt=\"card header\" />\n        </div>\n    )\n\n    return (\n        <div className=\"max-w-xs\">\n            <Card\n                clickable\n                className=\"hover:shadow-lg transition duration-150 ease-in-out dark:border dark:border-gray-600 dark:border-solid\"\n                header={{\n                    content: cardHeader,\n                    bordered: false,\n                    className: 'p-0',\n                }}\n                footer={{\n                    content: cardFooter,\n                    bordered: false,\n                }}\n            >\n                <span className=\"text-emerald-600 font-semibold\">\n                    Life Style\n                </span>\n                <h4 className=\"font-bold my-3\">Use the modern rules</h4>\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the industry.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default HeaderFooterBorder\n"],"names":[],"mappings":";;;;AAGA,MAAM,qBAAqB,MAAM;AAC7B,QAAM,aACF,qBAAC,OAAI,EAAA,WAAU,qBACX,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAU;AAAA,QACV,OAAM;AAAA,QACN,KAAI;AAAA,MAAA;AAAA,IACR;AAAA,yBACC,QACG,EAAA,UAAA;AAAA,MAAC,oBAAA,MAAA,EAAG,WAAU,WAAU,UAAc,kBAAA;AAAA,MACrC,oBAAA,QAAA,EAAK,WAAU,WAAU,UAAY,eAAA,CAAA;AAAA,IAAA,EAC1C,CAAA;AAAA,EAAA,GACJ;AAGE,QAAA,aACD,oBAAA,OAAA,EAAI,WAAU,+CACX,UAAC,oBAAA,OAAA,EAAI,KAAI,yBAAwB,KAAI,cAAc,CAAA,GACvD;AAIA,SAAA,oBAAC,OAAI,EAAA,WAAU,YACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,QAAA,EAAK,WAAU,kCAAiC,UAEjD,cAAA;AAAA,QACC,oBAAA,MAAA,EAAG,WAAU,kBAAiB,UAAoB,wBAAA;AAAA,QACnD,oBAAC,OAAE,UAGH,gHAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"Media.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/Media.tsx"],"sourcesContent":["import Card from '@/components/ui/Card'\nimport Avatar from '@/components/ui/Avatar'\n\nconst HeaderFooterBorder = () => {\n    const cardFooter = (\n        <div className=\"flex items-center\">\n            <Avatar\n                size={30}\n                className=\"mr-2\"\n                shape=\"circle\"\n                src=\"/img/avatars/thumb-1.jpg\"\n            />\n            <span>\n                <h6 className=\"text-sm\">Kristen Fisher</h6>\n                <span className=\"text-xs\">Sep 23, 2021</span>\n            </span>\n        </div>\n    )\n\n    const cardHeader = (\n        <div className=\"rounded-tl-lg rounded-tr-lg overflow-hidden\">\n            <img src=\"/img/others/img-1.jpg\" alt=\"card header\" />\n        </div>\n    )\n\n    return (\n        <div className=\"max-w-xs\">\n            <Card\n                clickable\n                className=\"hover:shadow-lg transition duration-150 ease-in-out dark:border dark:border-gray-600 dark:border-solid\"\n                header={{\n                    content: cardHeader,\n                    bordered: false,\n                    className: 'p-0',\n                }}\n                footer={{\n                    content: cardFooter,\n                    bordered: false,\n                }}\n            >\n                <span className=\"text-emerald-600 font-semibold\">\n                    Life Style\n                </span>\n                <h4 className=\"font-bold my-3\">Use the modern rules</h4>\n                <p>\n                    Lorem Ipsum is simply dummy text of the printing and\n                    typesetting industry. Lorem Ipsum has been the industry.\n                </p>\n            </Card>\n        </div>\n    )\n}\n\nexport default HeaderFooterBorder\n"],"names":[],"mappings":";;;;AAGA,MAAM,qBAAqB,MAAM;AAC7B,QAAM,aACF,qBAAC,OAAA,EAAI,WAAU,qBACX,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAU;AAAA,QACV,OAAM;AAAA,QACN,KAAI;AAAA,MAAA;AAAA,IAAA;AAAA,yBAEP,QAAA,EACG,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,WAAU,UAAA,kBAAc;AAAA,MACtC,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CAC1C;AAAA,EAAA,GACJ;AAGJ,QAAM,aACF,oBAAC,OAAA,EAAI,WAAU,+CACX,UAAA,oBAAC,OAAA,EAAI,KAAI,yBAAwB,KAAI,cAAA,CAAc,GACvD;AAGJ,SACI,oBAAC,OAAA,EAAI,WAAU,YACX,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MAAA;AAAA,MAEf,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,kCAAiC,UAAA,cAEjD;AAAA,QACA,oBAAC,MAAA,EAAG,WAAU,kBAAiB,UAAA,wBAAoB;AAAA,QACnD,oBAAC,OAAE,UAAA,gHAAA,CAGH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/index.tsx"],"sourcesContent":["import DemoLayout from '@/components/docs/DemoLayout'\n\n// Demo\nimport Basic from './Basic'\nimport HeaderFooter from './HeaderFooter'\nimport HeaderFooterBorder from './HeaderFooterBorder'\nimport BorderLess from './BorderLess'\nimport ExtraClass from './ExtraClass'\nimport Clickable from './Clickable'\nimport Media from './Media'\n\nconst mdPath = 'Cards'\n\nconst demoHeader = {\n    title: 'Cards',\n    desc: 'Card can be used to container a groups of related content.',\n}\n\nconst demos = [\n    {\n        mdName: 'Basic',\n        mdPath: mdPath,\n        title: 'Basic',\n        desc: `Basic usage of Card`,\n        component: <Basic />,\n    },\n    {\n        mdName: 'HeaderFooter',\n        mdPath: mdPath,\n        title: 'Header & Footer',\n        desc: `Card can set header & footer via <code>header</code> & <code>footer</code> props.`,\n        component: <HeaderFooter />,\n    },\n    {\n        mdName: 'HeaderFooterBorder',\n        mdPath: mdPath,\n        title: 'Header & Footer Border',\n        desc: `Header & footer seperator can disabled by setting <code>headerBorder</code> & <code>footerBorder</code> to <code>false</code>.`,\n        component: <HeaderFooterBorder />,\n    },\n    {\n        mdName: 'BorderLess',\n        mdPath: mdPath,\n        title: 'Borderless',\n        desc: `Display Card without border (with shadow).`,\n        component: <BorderLess />,\n    },\n    {\n        mdName: 'ExtraClass',\n        mdPath: mdPath,\n        title: 'Extra Class',\n        desc: `Extra class can be apply via <code>bodyClass</code>, <code>headerClass</code> & <code>footerClass</code> to correspond section.`,\n        component: <ExtraClass />,\n    },\n    {\n        mdName: 'Clickable',\n        mdPath: mdPath,\n        title: 'Clickable',\n        desc: `Set <code>click</code> prop to <code>true</code> to make cursor become pointer.`,\n        component: <Clickable />,\n    },\n    {\n        mdName: 'Media',\n        mdPath: mdPath,\n        title: 'Media',\n        desc: ``,\n        component: <Media />,\n    },\n]\n\nconst demoApi = [\n    {\n        component: 'Card',\n        api: [\n            {\n                propName: 'header',\n                type: `<code>{ content?: string | ReactNode, className?: string, bordered?: boolean, extra?: string | ReactNode }</code>`,\n                default: `-`,\n                desc: 'Card header config',\n            },\n            {\n                propName: 'footer',\n                type: `<code>{ content?: string | ReactNode, className?: string, bordered?: boolean }</code>`,\n                default: `-`,\n                desc: 'Card footer config',\n            },\n            {\n                propName: 'bordered',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Display Card with border (without shadow)',\n            },\n            {\n                propName: 'clickable',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Make cursor become pointer upon hover',\n            },\n            {\n                propName: 'bodyClass',\n                type: `<code>string</code>`,\n                default: `-`,\n                desc: 'Apply class to card body',\n            },\n            {\n                propName: 'onClick',\n                type: `<code>(e: MouseEvent) => void</code>`,\n                default: `<code>-</code>`,\n                desc: 'Callback when Card is clicked',\n            },\n        ],\n    },\n]\n\nconst Cards = () => {\n    return <DemoLayout header={demoHeader} demos={demos} api={demoApi} />\n}\n\nexport default Cards\n"],"names":["Media"],"mappings":";;;;;;;;;AAWA,MAAM,SAAS;AAEf,MAAM,aAAa;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACV;AAEA,MAAM,QAAQ;AAAA,EACV;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAM,CAAA,CAAA;AAAA,EACtB;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,cAAa,CAAA,CAAA;AAAA,EAC7B;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,oBAAmB,CAAA,CAAA;AAAA,EACnC;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,YAAW,CAAA,CAAA;AAAA,EAC3B;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,YAAW,CAAA,CAAA;AAAA,EAC3B;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,WAAU,CAAA,CAAA;AAAA,EAC1B;AAAA,EACA;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAYA,sBAAM,CAAA,CAAA;AAAA,EAAA;AAE1B;AAEA,MAAM,UAAU;AAAA,EACZ;AAAA,IACI,WAAW;AAAA,IACX,KAAK;AAAA,MACD;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MACV;AAAA,MACA;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACV;AAAA,EACJ;AAER;AAEA,MAAM,QAAQ,MAAM;AAChB,6BAAQ,YAAW,EAAA,QAAQ,YAAY,OAAc,KAAK,SAAS;AACvE;"}
+{"version":3,"file":"index.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Cards/index.tsx"],"sourcesContent":["import DemoLayout from '@/components/docs/DemoLayout'\n\n// Demo\nimport Basic from './Basic'\nimport HeaderFooter from './HeaderFooter'\nimport HeaderFooterBorder from './HeaderFooterBorder'\nimport BorderLess from './BorderLess'\nimport ExtraClass from './ExtraClass'\nimport Clickable from './Clickable'\nimport Media from './Media'\n\nconst mdPath = 'Cards'\n\nconst demoHeader = {\n    title: 'Cards',\n    desc: 'Card can be used to container a groups of related content.',\n}\n\nconst demos = [\n    {\n        mdName: 'Basic',\n        mdPath: mdPath,\n        title: 'Basic',\n        desc: `Basic usage of Card`,\n        component: <Basic />,\n    },\n    {\n        mdName: 'HeaderFooter',\n        mdPath: mdPath,\n        title: 'Header & Footer',\n        desc: `Card can set header & footer via <code>header</code> & <code>footer</code> props.`,\n        component: <HeaderFooter />,\n    },\n    {\n        mdName: 'HeaderFooterBorder',\n        mdPath: mdPath,\n        title: 'Header & Footer Border',\n        desc: `Header & footer seperator can disabled by setting <code>headerBorder</code> & <code>footerBorder</code> to <code>false</code>.`,\n        component: <HeaderFooterBorder />,\n    },\n    {\n        mdName: 'BorderLess',\n        mdPath: mdPath,\n        title: 'Borderless',\n        desc: `Display Card without border (with shadow).`,\n        component: <BorderLess />,\n    },\n    {\n        mdName: 'ExtraClass',\n        mdPath: mdPath,\n        title: 'Extra Class',\n        desc: `Extra class can be apply via <code>bodyClass</code>, <code>headerClass</code> & <code>footerClass</code> to correspond section.`,\n        component: <ExtraClass />,\n    },\n    {\n        mdName: 'Clickable',\n        mdPath: mdPath,\n        title: 'Clickable',\n        desc: `Set <code>click</code> prop to <code>true</code> to make cursor become pointer.`,\n        component: <Clickable />,\n    },\n    {\n        mdName: 'Media',\n        mdPath: mdPath,\n        title: 'Media',\n        desc: ``,\n        component: <Media />,\n    },\n]\n\nconst demoApi = [\n    {\n        component: 'Card',\n        api: [\n            {\n                propName: 'header',\n                type: `<code>{ content?: string | ReactNode, className?: string, bordered?: boolean, extra?: string | ReactNode }</code>`,\n                default: `-`,\n                desc: 'Card header config',\n            },\n            {\n                propName: 'footer',\n                type: `<code>{ content?: string | ReactNode, className?: string, bordered?: boolean }</code>`,\n                default: `-`,\n                desc: 'Card footer config',\n            },\n            {\n                propName: 'bordered',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Display Card with border (without shadow)',\n            },\n            {\n                propName: 'clickable',\n                type: `<code>boolean</code>`,\n                default: `<code>false</code>`,\n                desc: 'Make cursor become pointer upon hover',\n            },\n            {\n                propName: 'bodyClass',\n                type: `<code>string</code>`,\n                default: `-`,\n                desc: 'Apply class to card body',\n            },\n            {\n                propName: 'onClick',\n                type: `<code>(e: MouseEvent) => void</code>`,\n                default: `<code>-</code>`,\n                desc: 'Callback when Card is clicked',\n            },\n        ],\n    },\n]\n\nconst Cards = () => {\n    return <DemoLayout header={demoHeader} demos={demos} api={demoApi} />\n}\n\nexport default Cards\n"],"names":["Media"],"mappings":";;;;;;;;;AAWA,MAAM,SAAS;AAEf,MAAM,aAAa;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACV;AAEA,MAAM,QAAQ;AAAA,EACV;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,OAAA,CAAA,CAAM;AAAA,EAAA;AAAA,EAEtB;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,cAAA,CAAA,CAAa;AAAA,EAAA;AAAA,EAE7B;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,oBAAA,CAAA,CAAmB;AAAA,EAAA;AAAA,EAEnC;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,YAAA,CAAA,CAAW;AAAA,EAAA;AAAA,EAE3B;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,YAAA,CAAA,CAAW;AAAA,EAAA;AAAA,EAE3B;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAY,WAAA,CAAA,CAAU;AAAA,EAAA;AAAA,EAE1B;AAAA,IACI,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,MAAM;AAAA,IACN,+BAAYA,sBAAA,CAAA,CAAM;AAAA,EAAA;AAE1B;AAEA,MAAM,UAAU;AAAA,EACZ;AAAA,IACI,WAAW;AAAA,IACX,KAAK;AAAA,MACD;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,MAEV;AAAA,QACI,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACV;AAAA,EACJ;AAER;AAEA,MAAM,QAAQ,MAAM;AAChB,6BAAQ,YAAA,EAAW,QAAQ,YAAY,OAAc,KAAK,SAAS;AACvE;"}

package/dist/@ecme/views/ui-components/data-display/Table/Compact.js.map

@@ -1 +1 @@
-{"version":3,"file":"Compact.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/Compact.tsx"],"sourcesContent":["import Table from '@/components/ui/Table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst Compact = () => {\n    return (\n        <div>\n            <Table compact>\n                <THead>\n                    <Tr>\n                        <Th>Company</Th>\n                        <Th>Contact</Th>\n                        <Th>Country</Th>\n                    </Tr>\n                </THead>\n                <TBody>\n                    <Tr>\n                        <Td>Alfreds Futterkiste</Td>\n                        <Td>Maria Anders</Td>\n                        <Td>Germany</Td>\n                    </Tr>\n                    <Tr>\n                        <Td>Centro comercial Moctezuma</Td>\n                        <Td>Francisco Chang</Td>\n                        <Td>Mexico</Td>\n                    </Tr>\n                    <Tr>\n                        <Td>Ernst Handel</Td>\n                        <Td>Roland Mendel</Td>\n                        <Td>Austria</Td>\n                    </Tr>\n                </TBody>\n            </Table>\n        </div>\n    )\n}\n\nexport default Compact\n"],"names":[],"mappings":";;AAEA,MAAM,EAAE,IAAI,IAAI,IAAI,OAAO,MAAU,IAAA;AAErC,MAAM,UAAU,MAAM;AAClB,SACK,oBAAA,OAAA,EACG,UAAC,qBAAA,OAAA,EAAM,SAAO,MACV,UAAA;AAAA,IAAC,oBAAA,OAAA,EACG,+BAAC,IACG,EAAA,UAAA;AAAA,MAAA,oBAAC,MAAG,UAAO,UAAA,CAAA;AAAA,MACX,oBAAC,MAAG,UAAO,UAAA,CAAA;AAAA,MACX,oBAAC,MAAG,UAAO,UAAA,CAAA;AAAA,IAAA,EAAA,CACf,EACJ,CAAA;AAAA,yBACC,OACG,EAAA,UAAA;AAAA,MAAA,qBAAC,IACG,EAAA,UAAA;AAAA,QAAA,oBAAC,MAAG,UAAmB,sBAAA,CAAA;AAAA,QACvB,oBAAC,MAAG,UAAY,eAAA,CAAA;AAAA,QAChB,oBAAC,MAAG,UAAO,UAAA,CAAA;AAAA,MAAA,GACf;AAAA,2BACC,IACG,EAAA,UAAA;AAAA,QAAA,oBAAC,MAAG,UAA0B,6BAAA,CAAA;AAAA,QAC9B,oBAAC,MAAG,UAAe,kBAAA,CAAA;AAAA,QACnB,oBAAC,MAAG,UAAM,SAAA,CAAA;AAAA,MAAA,GACd;AAAA,2BACC,IACG,EAAA,UAAA;AAAA,QAAA,oBAAC,MAAG,UAAY,eAAA,CAAA;AAAA,QAChB,oBAAC,MAAG,UAAa,gBAAA,CAAA;AAAA,QACjB,oBAAC,MAAG,UAAO,UAAA,CAAA;AAAA,MAAA,EACf,CAAA;AAAA,IAAA,EACJ,CAAA;AAAA,EAAA,EAAA,CACJ,EACJ,CAAA;AAER;"}
+{"version":3,"file":"Compact.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/Compact.tsx"],"sourcesContent":["import Table from '@/components/ui/Table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst Compact = () => {\n    return (\n        <div>\n            <Table compact>\n                <THead>\n                    <Tr>\n                        <Th>Company</Th>\n                        <Th>Contact</Th>\n                        <Th>Country</Th>\n                    </Tr>\n                </THead>\n                <TBody>\n                    <Tr>\n                        <Td>Alfreds Futterkiste</Td>\n                        <Td>Maria Anders</Td>\n                        <Td>Germany</Td>\n                    </Tr>\n                    <Tr>\n                        <Td>Centro comercial Moctezuma</Td>\n                        <Td>Francisco Chang</Td>\n                        <Td>Mexico</Td>\n                    </Tr>\n                    <Tr>\n                        <Td>Ernst Handel</Td>\n                        <Td>Roland Mendel</Td>\n                        <Td>Austria</Td>\n                    </Tr>\n                </TBody>\n            </Table>\n        </div>\n    )\n}\n\nexport default Compact\n"],"names":[],"mappings":";;AAEA,MAAM,EAAE,IAAI,IAAI,IAAI,OAAO,UAAU;AAErC,MAAM,UAAU,MAAM;AAClB,SACI,oBAAC,OAAA,EACG,UAAA,qBAAC,OAAA,EAAM,SAAO,MACV,UAAA;AAAA,IAAA,oBAAC,OAAA,EACG,+BAAC,IAAA,EACG,UAAA;AAAA,MAAA,oBAAC,MAAG,UAAA,UAAA,CAAO;AAAA,MACX,oBAAC,MAAG,UAAA,UAAA,CAAO;AAAA,MACX,oBAAC,MAAG,UAAA,UAAA,CAAO;AAAA,IAAA,EAAA,CACf,EAAA,CACJ;AAAA,yBACC,OAAA,EACG,UAAA;AAAA,MAAA,qBAAC,IAAA,EACG,UAAA;AAAA,QAAA,oBAAC,MAAG,UAAA,sBAAA,CAAmB;AAAA,QACvB,oBAAC,MAAG,UAAA,eAAA,CAAY;AAAA,QAChB,oBAAC,MAAG,UAAA,UAAA,CAAO;AAAA,MAAA,GACf;AAAA,2BACC,IAAA,EACG,UAAA;AAAA,QAAA,oBAAC,MAAG,UAAA,6BAAA,CAA0B;AAAA,QAC9B,oBAAC,MAAG,UAAA,kBAAA,CAAe;AAAA,QACnB,oBAAC,MAAG,UAAA,SAAA,CAAM;AAAA,MAAA,GACd;AAAA,2BACC,IAAA,EACG,UAAA;AAAA,QAAA,oBAAC,MAAG,UAAA,eAAA,CAAY;AAAA,QAChB,oBAAC,MAAG,UAAA,gBAAA,CAAa;AAAA,QACjB,oBAAC,MAAG,UAAA,UAAA,CAAO;AAAA,MAAA,EAAA,CACf;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Table/DragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDrop.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/DragAndDrop.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport Table from '@/components/ui/Table'\nimport {\n    flexRender,\n    getCoreRowModel,\n    useReactTable,\n} from '@tanstack/react-table'\nimport { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'\nimport { MdDragIndicator } from 'react-icons/md'\nimport { data10 } from './data'\nimport type { Person } from './data'\nimport type { ColumnDef } from '@tanstack/react-table'\nimport type { DropResult } from '@hello-pangea/dnd'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst DragAndDrop = () => {\n    const [data, setData] = useState(data10)\n\n    const reorderData = (startIndex: number, endIndex: number) => {\n        const newData = [...data]\n        const [movedRow] = newData.splice(startIndex, 1)\n        newData.splice(endIndex, 0, movedRow)\n        setData(newData)\n    }\n\n    const handleDragEnd = (result: DropResult) => {\n        const { source, destination } = result\n        if (!destination) return\n        reorderData(source.index, destination.index)\n    }\n\n    const columns: ColumnDef<Person>[] = useMemo(\n        () => [\n            {\n                id: 'dragger',\n                header: '',\n                accessorKey: 'dragger',\n                cell: (props) => (\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    <span {...(props as any).dragHandleProps}>\n                        <MdDragIndicator />\n                    </span>\n                ),\n            },\n            { header: 'First Name', accessorKey: 'firstName' },\n            { header: 'Last Name', accessorKey: 'lastName' },\n            { header: 'Email', accessorKey: 'email' },\n        ],\n        [],\n    )\n\n    const table = useReactTable({\n        data,\n        columns,\n        getCoreRowModel: getCoreRowModel(),\n    })\n\n    // Note: Drag & drop will not work in React.StrictMode(Development)\n    return (\n        <Table className=\"w-full\">\n            <THead>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <Tr key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                            return (\n                                <Th key={header.id} colSpan={header.colSpan}>\n                                    {flexRender(\n                                        header.column.columnDef.header,\n                                        header.getContext(),\n                                    )}\n                                </Th>\n                            )\n                        })}\n                    </Tr>\n                ))}\n            </THead>\n            <DragDropContext onDragEnd={handleDragEnd}>\n                <Droppable droppableId=\"table-body\">\n                    {(provided) => (\n                        <TBody\n                            ref={provided.innerRef}\n                            {...provided.droppableProps}\n                        >\n                            {table.getRowModel().rows.map((row) => {\n                                return (\n                                    <Draggable\n                                        key={row.id}\n                                        draggableId={row.id}\n                                        index={row.index}\n                                    >\n                                        {(provided, snapshot) => {\n                                            const { style } =\n                                                provided.draggableProps\n                                            return (\n                                                <Tr\n                                                    ref={provided.innerRef}\n                                                    className={\n                                                        snapshot.isDragging\n                                                            ? 'table'\n                                                            : ''\n                                                    }\n                                                    style={style}\n                                                    {...provided.draggableProps}\n                                                    {...provided.dragHandleProps}\n                                                >\n                                                    {row\n                                                        .getVisibleCells()\n                                                        .map((cell) => {\n                                                            return (\n                                                                <Td\n                                                                    key={\n                                                                        cell.id\n                                                                    }\n                                                                >\n                                                                    {flexRender(\n                                                                        cell\n                                                                            .column\n                                                                            .columnDef\n                                                                            .cell,\n                                                                        cell.getContext(),\n                                                                    )}\n                                                                </Td>\n                                                            )\n                                                        })}\n                                                </Tr>\n                                            )\n                                        }}\n                                    </Draggable>\n                                )\n                            })}\n                            {provided.placeholder}\n                        </TBody>\n                    )}\n                </Droppable>\n            </DragDropContext>\n        </Table>\n    )\n}\n\nexport default DragAndDrop\n"],"names":["provided"],"mappings":";;;;;;;AAcA,MAAM,EAAE,IAAI,IAAI,IAAI,OAAO,MAAU,IAAA;AAErC,MAAM,cAAc,MAAM;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM;AAEjC,QAAA,cAAc,CAAC,YAAoB,aAAqB;AACpD,UAAA,UAAU,CAAC,GAAG,IAAI;AACxB,UAAM,CAAC,QAAQ,IAAI,QAAQ,OAAO,YAAY,CAAC;AACvC,YAAA,OAAO,UAAU,GAAG,QAAQ;AACpC,YAAQ,OAAO;AAAA,EACnB;AAEM,QAAA,gBAAgB,CAAC,WAAuB;AACpC,UAAA,EAAE,QAAQ,YAAA,IAAgB;AAChC,QAAI,CAAC,YAAa;AACN,gBAAA,OAAO,OAAO,YAAY,KAAK;AAAA,EAC/C;AAEA,QAAM,UAA+B;AAAA,IACjC,MAAM;AAAA,MACF;AAAA,QACI,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,MAAM,CAAC;AAAA;AAAA,8BAEF,QAAM,EAAA,GAAI,MAAc,iBACrB,UAAA,oBAAC,mBAAgB,EACrB,CAAA;AAAA;AAAA,MAER;AAAA,MACA,EAAE,QAAQ,cAAc,aAAa,YAAY;AAAA,MACjD,EAAE,QAAQ,aAAa,aAAa,WAAW;AAAA,MAC/C,EAAE,QAAQ,SAAS,aAAa,QAAQ;AAAA,IAC5C;AAAA,IACA,CAAA;AAAA,EACJ;AAEA,QAAM,QAAQ,cAAc;AAAA,IACxB;AAAA,IACA;AAAA,IACA,iBAAiB,gBAAgB;AAAA,EAAA,CACpC;AAIG,SAAA,qBAAC,OAAM,EAAA,WAAU,UACb,UAAA;AAAA,IAAA,oBAAC,OACI,EAAA,UAAA,MAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC1B,oBAAC,IACI,EAAA,UAAA,YAAY,QAAQ,IAAI,CAAC,WAAW;AACjC,aACK,oBAAA,IAAA,EAAmB,SAAS,OAAO,SAC/B,UAAA;AAAA,QACG,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,WAAW;AAAA,MAAA,EACtB,GAJK,OAAO,EAKhB;AAAA,IAEP,CAAA,KAVI,YAAY,EAWrB,CACH,EACL,CAAA;AAAA,IACA,oBAAC,mBAAgB,WAAW,eACxB,8BAAC,WAAU,EAAA,aAAY,cAClB,UAAA,CAAC,aACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,SAAS;AAAA,QACb,GAAG,SAAS;AAAA,QAEZ,UAAA;AAAA,UAAA,MAAM,YAAY,EAAE,KAAK,IAAI,CAAC,QAAQ;AAE/B,mBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEG,aAAa,IAAI;AAAA,gBACjB,OAAO,IAAI;AAAA,gBAEV,UAAA,CAACA,WAAU,aAAa;AACf,wBAAA,EAAE,UACJA,UAAS;AAET,yBAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,KAAKA,UAAS;AAAA,sBACd,WACI,SAAS,aACH,UACA;AAAA,sBAEV;AAAA,sBACC,GAAGA,UAAS;AAAA,sBACZ,GAAGA,UAAS;AAAA,sBAEZ,UACI,IAAA,gBACA,EAAA,IAAI,CAAC,SAAS;AAEP,+BAAA;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BAKI,UAAA;AAAA,8BACG,KACK,OACA,UACA;AAAA,8BACL,KAAK,WAAW;AAAA,4BAAA;AAAA,0BACpB;AAAA,0BATI,KAAK;AAAA,wBAUb;AAAA,sBAEP,CAAA;AAAA,oBAAA;AAAA,kBACT;AAAA,gBAAA;AAAA,cAER;AAAA,cAxCK,IAAI;AAAA,YAyCb;AAAA,UAAA,CAEP;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,OAGtB,EACJ,CAAA;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DragAndDrop.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/DragAndDrop.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport Table from '@/components/ui/Table'\nimport {\n    flexRender,\n    getCoreRowModel,\n    useReactTable,\n} from '@tanstack/react-table'\nimport { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'\nimport { MdDragIndicator } from 'react-icons/md'\nimport { data10 } from './data'\nimport type { Person } from './data'\nimport type { ColumnDef } from '@tanstack/react-table'\nimport type { DropResult } from '@hello-pangea/dnd'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst DragAndDrop = () => {\n    const [data, setData] = useState(data10)\n\n    const reorderData = (startIndex: number, endIndex: number) => {\n        const newData = [...data]\n        const [movedRow] = newData.splice(startIndex, 1)\n        newData.splice(endIndex, 0, movedRow)\n        setData(newData)\n    }\n\n    const handleDragEnd = (result: DropResult) => {\n        const { source, destination } = result\n        if (!destination) return\n        reorderData(source.index, destination.index)\n    }\n\n    const columns: ColumnDef<Person>[] = useMemo(\n        () => [\n            {\n                id: 'dragger',\n                header: '',\n                accessorKey: 'dragger',\n                cell: (props) => (\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    <span {...(props as any).dragHandleProps}>\n                        <MdDragIndicator />\n                    </span>\n                ),\n            },\n            { header: 'First Name', accessorKey: 'firstName' },\n            { header: 'Last Name', accessorKey: 'lastName' },\n            { header: 'Email', accessorKey: 'email' },\n        ],\n        [],\n    )\n\n    const table = useReactTable({\n        data,\n        columns,\n        getCoreRowModel: getCoreRowModel(),\n    })\n\n    // Note: Drag & drop will not work in React.StrictMode(Development)\n    return (\n        <Table className=\"w-full\">\n            <THead>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <Tr key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                            return (\n                                <Th key={header.id} colSpan={header.colSpan}>\n                                    {flexRender(\n                                        header.column.columnDef.header,\n                                        header.getContext(),\n                                    )}\n                                </Th>\n                            )\n                        })}\n                    </Tr>\n                ))}\n            </THead>\n            <DragDropContext onDragEnd={handleDragEnd}>\n                <Droppable droppableId=\"table-body\">\n                    {(provided) => (\n                        <TBody\n                            ref={provided.innerRef}\n                            {...provided.droppableProps}\n                        >\n                            {table.getRowModel().rows.map((row) => {\n                                return (\n                                    <Draggable\n                                        key={row.id}\n                                        draggableId={row.id}\n                                        index={row.index}\n                                    >\n                                        {(provided, snapshot) => {\n                                            const { style } =\n                                                provided.draggableProps\n                                            return (\n                                                <Tr\n                                                    ref={provided.innerRef}\n                                                    className={\n                                                        snapshot.isDragging\n                                                            ? 'table'\n                                                            : ''\n                                                    }\n                                                    style={style}\n                                                    {...provided.draggableProps}\n                                                    {...provided.dragHandleProps}\n                                                >\n                                                    {row\n                                                        .getVisibleCells()\n                                                        .map((cell) => {\n                                                            return (\n                                                                <Td\n                                                                    key={\n                                                                        cell.id\n                                                                    }\n                                                                >\n                                                                    {flexRender(\n                                                                        cell\n                                                                            .column\n                                                                            .columnDef\n                                                                            .cell,\n                                                                        cell.getContext(),\n                                                                    )}\n                                                                </Td>\n                                                            )\n                                                        })}\n                                                </Tr>\n                                            )\n                                        }}\n                                    </Draggable>\n                                )\n                            })}\n                            {provided.placeholder}\n                        </TBody>\n                    )}\n                </Droppable>\n            </DragDropContext>\n        </Table>\n    )\n}\n\nexport default DragAndDrop\n"],"names":["provided"],"mappings":";;;;;;;AAcA,MAAM,EAAE,IAAI,IAAI,IAAI,OAAO,UAAU;AAErC,MAAM,cAAc,MAAM;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM;AAEvC,QAAM,cAAc,CAAC,YAAoB,aAAqB;AAC1D,UAAM,UAAU,CAAC,GAAG,IAAI;AACxB,UAAM,CAAC,QAAQ,IAAI,QAAQ,OAAO,YAAY,CAAC;AAC/C,YAAQ,OAAO,UAAU,GAAG,QAAQ;AACpC,YAAQ,OAAO;AAAA,EACnB;AAEA,QAAM,gBAAgB,CAAC,WAAuB;AAC1C,UAAM,EAAE,QAAQ,YAAA,IAAgB;AAChC,QAAI,CAAC,YAAa;AAClB,gBAAY,OAAO,OAAO,YAAY,KAAK;AAAA,EAC/C;AAEA,QAAM,UAA+B;AAAA,IACjC,MAAM;AAAA,MACF;AAAA,QACI,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,MAAM,CAAC;AAAA;AAAA,8BAEF,QAAA,EAAM,GAAI,MAAc,iBACrB,UAAA,oBAAC,mBAAgB,EAAA,CACrB;AAAA;AAAA,MAAA;AAAA,MAGR,EAAE,QAAQ,cAAc,aAAa,YAAA;AAAA,MACrC,EAAE,QAAQ,aAAa,aAAa,WAAA;AAAA,MACpC,EAAE,QAAQ,SAAS,aAAa,QAAA;AAAA,IAAQ;AAAA,IAE5C,CAAA;AAAA,EAAC;AAGL,QAAM,QAAQ,cAAc;AAAA,IACxB;AAAA,IACA;AAAA,IACA,iBAAiB,gBAAA;AAAA,EAAgB,CACpC;AAGD,SACI,qBAAC,OAAA,EAAM,WAAU,UACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EACI,UAAA,MAAM,gBAAA,EAAkB,IAAI,CAAC,gBAC1B,oBAAC,IAAA,EACI,UAAA,YAAY,QAAQ,IAAI,CAAC,WAAW;AACjC,aACI,oBAAC,IAAA,EAAmB,SAAS,OAAO,SAC/B,UAAA;AAAA,QACG,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,WAAA;AAAA,MAAW,EACtB,GAJK,OAAO,EAKhB;AAAA,IAER,CAAC,EAAA,GAVI,YAAY,EAWrB,CACH,EAAA,CACL;AAAA,IACA,oBAAC,mBAAgB,WAAW,eACxB,8BAAC,WAAA,EAAU,aAAY,cAClB,UAAA,CAAC,aACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK,SAAS;AAAA,QACb,GAAG,SAAS;AAAA,QAEZ,UAAA;AAAA,UAAA,MAAM,YAAA,EAAc,KAAK,IAAI,CAAC,QAAQ;AACnC,mBACI;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEG,aAAa,IAAI;AAAA,gBACjB,OAAO,IAAI;AAAA,gBAEV,UAAA,CAACA,WAAU,aAAa;AACrB,wBAAM,EAAE,UACJA,UAAS;AACb,yBACI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,KAAKA,UAAS;AAAA,sBACd,WACI,SAAS,aACH,UACA;AAAA,sBAEV;AAAA,sBACC,GAAGA,UAAS;AAAA,sBACZ,GAAGA,UAAS;AAAA,sBAEZ,UAAA,IACI,gBAAA,EACA,IAAI,CAAC,SAAS;AACX,+BACI;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BAKI,UAAA;AAAA,8BACG,KACK,OACA,UACA;AAAA,8BACL,KAAK,WAAA;AAAA,4BAAW;AAAA,0BACpB;AAAA,0BATI,KAAK;AAAA,wBAAA;AAAA,sBAYrB,CAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAGjB;AAAA,cAAA;AAAA,cAxCK,IAAI;AAAA,YAAA;AAAA,UA2CrB,CAAC;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGtB,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/dist/@ecme/views/ui-components/data-display/Table/Editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/Editable.tsx"],"sourcesContent":["import { useMemo, useEffect, useState, useRef, useCallback } from 'react'\nimport Table from '@/components/ui/Table'\nimport Input from '@/components/ui/Input'\nimport {\n    useReactTable,\n    getCoreRowModel,\n    getFilteredRowModel,\n    getPaginationRowModel,\n    flexRender,\n} from '@tanstack/react-table'\nimport { data10 } from './data'\nimport type { Person } from './data'\nimport type { ColumnDef, CellContext, RowData } from '@tanstack/react-table'\n\ndeclare module '@tanstack/react-table' {\n    interface TableMeta<TData extends RowData> {\n        updateData: (\n            rowIndex: number,\n            columnId: string,\n            value: unknown,\n            dataPlaceHolder?: TData,\n        ) => void\n    }\n}\n\ntype EditablePerson = Person\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst EditableCell = ({\n    getValue,\n    row: { index },\n    column: { id },\n    table,\n}: CellContext<EditablePerson, unknown>) => {\n    const initialValue = getValue()\n    // We need to keep and update the state of the cell normally\n    const [value, setValue] = useState(initialValue)\n\n    // When the input is blurred, we'll call our table meta's updateData function\n    const onBlur = () => {\n        table.options.meta?.updateData(index, id, value)\n    }\n\n    // If the initialValue is changed external, sync it up with our state\n    useEffect(() => {\n        setValue(initialValue)\n    }, [initialValue])\n\n    return (\n        <Input\n            className=\"border-transparent bg-transparent hover:border-gray-300 focus:bg-white\"\n            size=\"sm\"\n            value={value as string}\n            onChange={(e) => setValue(e.target.value)}\n            onBlur={onBlur}\n        />\n    )\n}\n\nconst defaultColumn: Partial<ColumnDef<EditablePerson>> = {\n    cell: EditableCell,\n}\n\nfunction useSkipper() {\n    const shouldSkipRef = useRef(true)\n    const shouldSkip = shouldSkipRef.current\n\n    // Wrap a function with this to skip a pagination reset temporarily\n    const skip = useCallback(() => {\n        shouldSkipRef.current = false\n    }, [])\n\n    useEffect(() => {\n        shouldSkipRef.current = true\n    })\n\n    return [shouldSkip, skip]\n}\n\nfunction Editable() {\n    const columns = useMemo(\n        () => [\n            { header: 'First Name', accessorKey: 'firstName' },\n            { header: 'Last Name', accessorKey: 'lastName' },\n            { header: 'Email', accessorKey: 'email' },\n        ],\n        [],\n    )\n\n    const [data, setData] = useState(() => data10)\n\n    const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper()\n\n    const table = useReactTable({\n        data,\n        columns,\n        defaultColumn,\n        getCoreRowModel: getCoreRowModel(),\n        getFilteredRowModel: getFilteredRowModel(),\n        getPaginationRowModel: getPaginationRowModel(),\n        autoResetPageIndex: autoResetPageIndex as boolean,\n        // Provide our updateData function to our table meta\n        meta: {\n            updateData: (\n                rowIndex: number,\n                columnId: string,\n                value: unknown,\n            ) => {\n                // Skip age index reset until after next rerender\n                if (typeof skipAutoResetPageIndex === 'function') {\n                    skipAutoResetPageIndex()\n                }\n                setData((old) =>\n                    old.map((row, index) => {\n                        if (index === rowIndex) {\n                            return {\n                                ...old[rowIndex],\n                                [columnId]: value,\n                            }\n                        }\n                        return row\n                    }),\n                )\n            },\n        },\n    })\n\n    return (\n        <>\n            <Table>\n                <THead>\n                    {table.getHeaderGroups().map((headerGroup) => (\n                        <Tr key={headerGroup.id}>\n                            {headerGroup.headers.map((header) => {\n                                return (\n                                    <Th\n                                        key={header.id}\n                                        colSpan={header.colSpan}\n                                    >\n                                        {flexRender(\n                                            header.column.columnDef.header,\n                                            header.getContext(),\n                                        )}\n                                    </Th>\n                                )\n                            })}\n                        </Tr>\n                    ))}\n                </THead>\n                <TBody>\n                    {table.getRowModel().rows.map((row) => {\n                        return (\n                            <Tr key={row.id}>\n                                {row.getVisibleCells().map((cell) => {\n                                    return (\n                                        <Td key={cell.id}>\n                                            {flexRender(\n                                                cell.column.columnDef.cell,\n                                                cell.getContext(),\n                                            )}\n                                        </Td>\n                                    )\n                                })}\n                            </Tr>\n                        )\n                    })}\n                </TBody>\n            </Table>\n        </>\n    )\n}\n\nexport default Editable\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Editable.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/Editable.tsx"],"sourcesContent":["import { useMemo, useEffect, useState, useRef, useCallback } from 'react'\nimport Table from '@/components/ui/Table'\nimport Input from '@/components/ui/Input'\nimport {\n    useReactTable,\n    getCoreRowModel,\n    getFilteredRowModel,\n    getPaginationRowModel,\n    flexRender,\n} from '@tanstack/react-table'\nimport { data10 } from './data'\nimport type { Person } from './data'\nimport type { ColumnDef, CellContext, RowData } from '@tanstack/react-table'\n\ndeclare module '@tanstack/react-table' {\n    interface TableMeta<TData extends RowData> {\n        updateData: (\n            rowIndex: number,\n            columnId: string,\n            value: unknown,\n            dataPlaceHolder?: TData,\n        ) => void\n    }\n}\n\ntype EditablePerson = Person\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst EditableCell = ({\n    getValue,\n    row: { index },\n    column: { id },\n    table,\n}: CellContext<EditablePerson, unknown>) => {\n    const initialValue = getValue()\n    // We need to keep and update the state of the cell normally\n    const [value, setValue] = useState(initialValue)\n\n    // When the input is blurred, we'll call our table meta's updateData function\n    const onBlur = () => {\n        table.options.meta?.updateData(index, id, value)\n    }\n\n    // If the initialValue is changed external, sync it up with our state\n    useEffect(() => {\n        setValue(initialValue)\n    }, [initialValue])\n\n    return (\n        <Input\n            className=\"border-transparent bg-transparent hover:border-gray-300 focus:bg-white\"\n            size=\"sm\"\n            value={value as string}\n            onChange={(e) => setValue(e.target.value)}\n            onBlur={onBlur}\n        />\n    )\n}\n\nconst defaultColumn: Partial<ColumnDef<EditablePerson>> = {\n    cell: EditableCell,\n}\n\nfunction useSkipper() {\n    const shouldSkipRef = useRef(true)\n    const shouldSkip = shouldSkipRef.current\n\n    // Wrap a function with this to skip a pagination reset temporarily\n    const skip = useCallback(() => {\n        shouldSkipRef.current = false\n    }, [])\n\n    useEffect(() => {\n        shouldSkipRef.current = true\n    })\n\n    return [shouldSkip, skip]\n}\n\nfunction Editable() {\n    const columns = useMemo(\n        () => [\n            { header: 'First Name', accessorKey: 'firstName' },\n            { header: 'Last Name', accessorKey: 'lastName' },\n            { header: 'Email', accessorKey: 'email' },\n        ],\n        [],\n    )\n\n    const [data, setData] = useState(() => data10)\n\n    const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper()\n\n    const table = useReactTable({\n        data,\n        columns,\n        defaultColumn,\n        getCoreRowModel: getCoreRowModel(),\n        getFilteredRowModel: getFilteredRowModel(),\n        getPaginationRowModel: getPaginationRowModel(),\n        autoResetPageIndex: autoResetPageIndex as boolean,\n        // Provide our updateData function to our table meta\n        meta: {\n            updateData: (\n                rowIndex: number,\n                columnId: string,\n                value: unknown,\n            ) => {\n                // Skip age index reset until after next rerender\n                if (typeof skipAutoResetPageIndex === 'function') {\n                    skipAutoResetPageIndex()\n                }\n                setData((old) =>\n                    old.map((row, index) => {\n                        if (index === rowIndex) {\n                            return {\n                                ...old[rowIndex],\n                                [columnId]: value,\n                            }\n                        }\n                        return row\n                    }),\n                )\n            },\n        },\n    })\n\n    return (\n        <>\n            <Table>\n                <THead>\n                    {table.getHeaderGroups().map((headerGroup) => (\n                        <Tr key={headerGroup.id}>\n                            {headerGroup.headers.map((header) => {\n                                return (\n                                    <Th\n                                        key={header.id}\n                                        colSpan={header.colSpan}\n                                    >\n                                        {flexRender(\n                                            header.column.columnDef.header,\n                                            header.getContext(),\n                                        )}\n                                    </Th>\n                                )\n                            })}\n                        </Tr>\n                    ))}\n                </THead>\n                <TBody>\n                    {table.getRowModel().rows.map((row) => {\n                        return (\n                            <Tr key={row.id}>\n                                {row.getVisibleCells().map((cell) => {\n                                    return (\n                                        <Td key={cell.id}>\n                                            {flexRender(\n                                                cell.column.columnDef.cell,\n                                                cell.getContext(),\n                                            )}\n                                        </Td>\n                                    )\n                                })}\n                            </Tr>\n                        )\n                    })}\n                </TBody>\n            </Table>\n        </>\n    )\n}\n\nexport default Editable\n"],"names":[],"mappings":"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"}

package/dist/@ecme/views/ui-components/data-display/Table/Expanding.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expanding.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/Expanding.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport Table from '@/components/ui/Table'\nimport {\n    useReactTable,\n    getCoreRowModel,\n    getExpandedRowModel,\n    flexRender,\n} from '@tanstack/react-table'\nimport { dataWithSubRows } from './data'\nimport { HiOutlinePlusCircle, HiOutlineMinusCircle } from 'react-icons/hi'\nimport type { PersonWithSubRow } from './data'\nimport type { ColumnDef, ExpandedState } from '@tanstack/react-table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nfunction Exapanding() {\n    const columns = useMemo<ColumnDef<PersonWithSubRow>[]>(\n        () => [\n            {\n                id: 'expander',\n                header: ({ table }) => {\n                    return (\n                        <button\n                            className=\"text-xl\"\n                            {...{\n                                onClick:\n                                    table.getToggleAllRowsExpandedHandler(),\n                            }}\n                        >\n                            {table.getIsAllRowsExpanded() ? (\n                                <HiOutlineMinusCircle />\n                            ) : (\n                                <HiOutlinePlusCircle />\n                            )}\n                        </button>\n                    )\n                },\n                cell: ({ row, getValue }) => {\n                    return (\n                        <>\n                            {row.getCanExpand() ? (\n                                <button\n                                    className=\"text-xl\"\n                                    {...{\n                                        onClick: row.getToggleExpandedHandler(),\n                                    }}\n                                >\n                                    {row.getIsExpanded() ? (\n                                        <HiOutlineMinusCircle />\n                                    ) : (\n                                        <HiOutlinePlusCircle />\n                                    )}\n                                </button>\n                            ) : null}\n                            {getValue()}\n                        </>\n                    )\n                },\n            },\n            {\n                header: 'First Name',\n                accessorKey: 'firstName',\n            },\n            {\n                header: 'Last Name',\n                accessorKey: 'lastName',\n            },\n            {\n                header: 'Age',\n                accessorKey: 'age',\n            },\n            {\n                header: 'Visits',\n                accessorKey: 'visits',\n            },\n            {\n                header: 'Status',\n                accessorKey: 'status',\n            },\n            {\n                header: 'Profile Progress',\n                accessorKey: 'progress',\n            },\n        ],\n        [],\n    )\n\n    const [data] = useState(dataWithSubRows)\n    const [expanded, setExpanded] = useState<ExpandedState>({})\n\n    const table = useReactTable({\n        data,\n        columns,\n        state: {\n            expanded,\n        },\n        onExpandedChange: setExpanded,\n        getSubRows: (row) => row.subRows,\n        getCoreRowModel: getCoreRowModel(),\n        getExpandedRowModel: getExpandedRowModel(),\n    })\n\n    return (\n        <>\n            <Table>\n                <THead>\n                    {table.getHeaderGroups().map((headerGroup) => (\n                        <Tr key={headerGroup.id}>\n                            {headerGroup.headers.map((header) => {\n                                return (\n                                    <Th\n                                        key={header.id}\n                                        colSpan={header.colSpan}\n                                    >\n                                        {flexRender(\n                                            header.column.columnDef.header,\n                                            header.getContext(),\n                                        )}\n                                    </Th>\n                                )\n                            })}\n                        </Tr>\n                    ))}\n                </THead>\n                <TBody>\n                    {table.getRowModel().rows.map((row) => {\n                        return (\n                            <Tr key={row.id}>\n                                {row.getVisibleCells().map((cell) => {\n                                    return (\n                                        <Td key={cell.id}>\n                                            {flexRender(\n                                                cell.column.columnDef.cell,\n                                                cell.getContext(),\n                                            )}\n                                        </Td>\n                                    )\n                                })}\n                            </Tr>\n                        )\n                    })}\n                </TBody>\n            </Table>\n        </>\n    )\n}\n\nexport default Exapanding\n"],"names":["table"],"mappings":";;;;;;AAaA,MAAM,EAAE,IAAI,IAAI,IAAI,OAAO,MAAU,IAAA;AAErC,SAAS,aAAa;AAClB,QAAM,UAAU;AAAA,IACZ,MAAM;AAAA,MACF;AAAA,QACI,IAAI;AAAA,QACJ,QAAQ,CAAC,EAAE,OAAAA,aAAY;AAEf,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACT,GAAG;AAAA,gBACA,SACIA,OAAM,gCAAgC;AAAA,cAC9C;AAAA,cAEC,UAAAA,OAAM,qBAAqB,wBACvB,sBAAqB,EAAA,wBAErB,qBAAoB,CAAA,CAAA;AAAA,YAAA;AAAA,UAE7B;AAAA,QAER;AAAA,QACA,MAAM,CAAC,EAAE,KAAK,eAAe;AACzB,iBAES,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,IAAI,iBACD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAU;AAAA,gBACT,GAAG;AAAA,kBACA,SAAS,IAAI,yBAAyB;AAAA,gBAC1C;AAAA,gBAEC,cAAI,cAAc,wBACd,sBAAqB,EAAA,wBAErB,qBAAoB,CAAA,CAAA;AAAA,cAAA;AAAA,YAAA,IAG7B;AAAA,YACH,SAAS;AAAA,UAAA,GACd;AAAA,QAAA;AAAA,MAGZ;AAAA,MACA;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,IAErB;AAAA,IACA,CAAA;AAAA,EACJ;AAEA,QAAM,CAAC,IAAI,IAAI,SAAS,eAAe;AACvC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,CAAA,CAAE;AAE1D,QAAM,QAAQ,cAAc;AAAA,IACxB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACH;AAAA,IACJ;AAAA,IACA,kBAAkB;AAAA,IAClB,YAAY,CAAC,QAAQ,IAAI;AAAA,IACzB,iBAAiB,gBAAgB;AAAA,IACjC,qBAAqB,oBAAoB;AAAA,EAAA,CAC5C;AAGG,SAAA,oBAAA,UAAA,EACI,+BAAC,OACG,EAAA,UAAA;AAAA,IAAA,oBAAC,OACI,EAAA,UAAA,MAAM,gBAAgB,EAAE,IAAI,CAAC,gBAC1B,oBAAC,IACI,EAAA,UAAA,YAAY,QAAQ,IAAI,CAAC,WAAW;AAE7B,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,SAAS,OAAO;AAAA,UAEf,UAAA;AAAA,YACG,OAAO,OAAO,UAAU;AAAA,YACxB,OAAO,WAAW;AAAA,UAAA;AAAA,QACtB;AAAA,QANK,OAAO;AAAA,MAOhB;AAAA,IAEP,CAAA,KAbI,YAAY,EAcrB,CACH,EACL,CAAA;AAAA,IACA,oBAAC,SACI,UAAM,MAAA,YAAA,EAAc,KAAK,IAAI,CAAC,QAAQ;AACnC,iCACK,IACI,EAAA,UAAA,IAAI,gBAAkB,EAAA,IAAI,CAAC,SAAS;AACjC,mCACK,IACI,EAAA,UAAA;AAAA,UACG,KAAK,OAAO,UAAU;AAAA,UACtB,KAAK,WAAW;AAAA,QAAA,EACpB,GAJK,KAAK,EAKd;AAAA,MAAA,CAEP,EAVI,GAAA,IAAI,EAWb;AAAA,IAAA,CAEP,EACL,CAAA;AAAA,EAAA,EAAA,CACJ,EACJ,CAAA;AAER;"}
+{"version":3,"file":"Expanding.js","sources":["../../../../../../lib/@ecme/views/ui-components/data-display/Table/Expanding.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport Table from '@/components/ui/Table'\nimport {\n    useReactTable,\n    getCoreRowModel,\n    getExpandedRowModel,\n    flexRender,\n} from '@tanstack/react-table'\nimport { dataWithSubRows } from './data'\nimport { HiOutlinePlusCircle, HiOutlineMinusCircle } from 'react-icons/hi'\nimport type { PersonWithSubRow } from './data'\nimport type { ColumnDef, ExpandedState } from '@tanstack/react-table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nfunction Exapanding() {\n    const columns = useMemo<ColumnDef<PersonWithSubRow>[]>(\n        () => [\n            {\n                id: 'expander',\n                header: ({ table }) => {\n                    return (\n                        <button\n                            className=\"text-xl\"\n                            {...{\n                                onClick:\n                                    table.getToggleAllRowsExpandedHandler(),\n                            }}\n                        >\n                            {table.getIsAllRowsExpanded() ? (\n                                <HiOutlineMinusCircle />\n                            ) : (\n                                <HiOutlinePlusCircle />\n                            )}\n                        </button>\n                    )\n                },\n                cell: ({ row, getValue }) => {\n                    return (\n                        <>\n                            {row.getCanExpand() ? (\n                                <button\n                                    className=\"text-xl\"\n                                    {...{\n                                        onClick: row.getToggleExpandedHandler(),\n                                    }}\n                                >\n                                    {row.getIsExpanded() ? (\n                                        <HiOutlineMinusCircle />\n                                    ) : (\n                                        <HiOutlinePlusCircle />\n                                    )}\n                                </button>\n                            ) : null}\n                            {getValue()}\n                        </>\n                    )\n                },\n            },\n            {\n                header: 'First Name',\n                accessorKey: 'firstName',\n            },\n            {\n                header: 'Last Name',\n                accessorKey: 'lastName',\n            },\n            {\n                header: 'Age',\n                accessorKey: 'age',\n            },\n            {\n                header: 'Visits',\n                accessorKey: 'visits',\n            },\n            {\n                header: 'Status',\n                accessorKey: 'status',\n            },\n            {\n                header: 'Profile Progress',\n                accessorKey: 'progress',\n            },\n        ],\n        [],\n    )\n\n    const [data] = useState(dataWithSubRows)\n    const [expanded, setExpanded] = useState<ExpandedState>({})\n\n    const table = useReactTable({\n        data,\n        columns,\n        state: {\n            expanded,\n        },\n        onExpandedChange: setExpanded,\n        getSubRows: (row) => row.subRows,\n        getCoreRowModel: getCoreRowModel(),\n        getExpandedRowModel: getExpandedRowModel(),\n    })\n\n    return (\n        <>\n            <Table>\n                <THead>\n                    {table.getHeaderGroups().map((headerGroup) => (\n                        <Tr key={headerGroup.id}>\n                            {headerGroup.headers.map((header) => {\n                                return (\n                                    <Th\n                                        key={header.id}\n                                        colSpan={header.colSpan}\n                                    >\n                                        {flexRender(\n                                            header.column.columnDef.header,\n                                            header.getContext(),\n                                        )}\n                                    </Th>\n                                )\n                            })}\n                        </Tr>\n                    ))}\n                </THead>\n                <TBody>\n                    {table.getRowModel().rows.map((row) => {\n                        return (\n                            <Tr key={row.id}>\n                                {row.getVisibleCells().map((cell) => {\n                                    return (\n                                        <Td key={cell.id}>\n                                            {flexRender(\n                                                cell.column.columnDef.cell,\n                                                cell.getContext(),\n                                            )}\n                                        </Td>\n                                    )\n                                })}\n                            </Tr>\n                        )\n                    })}\n                </TBody>\n            </Table>\n        </>\n    )\n}\n\nexport default Exapanding\n"],"names":["table"],"mappings":";;;;;;AAaA,MAAM,EAAE,IAAI,IAAI,IAAI,OAAO,UAAU;AAErC,SAAS,aAAa;AAClB,QAAM,UAAU;AAAA,IACZ,MAAM;AAAA,MACF;AAAA,QACI,IAAI;AAAA,QACJ,QAAQ,CAAC,EAAE,OAAAA,aAAY;AACnB,iBACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACT,GAAG;AAAA,gBACA,SACIA,OAAM,gCAAA;AAAA,cAAgC;AAAA,cAG7C,UAAAA,OAAM,qBAAA,wBACF,sBAAA,EAAqB,wBAErB,qBAAA,CAAA,CAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QAIrC;AAAA,QACA,MAAM,CAAC,EAAE,KAAK,eAAe;AACzB,iBACI,qBAAA,UAAA,EACK,UAAA;AAAA,YAAA,IAAI,iBACD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAU;AAAA,gBACT,GAAG;AAAA,kBACA,SAAS,IAAI,yBAAA;AAAA,gBAAyB;AAAA,gBAGzC,cAAI,cAAA,wBACA,sBAAA,EAAqB,wBAErB,qBAAA,CAAA,CAAoB;AAAA,cAAA;AAAA,YAAA,IAG7B;AAAA,YACH,SAAA;AAAA,UAAS,GACd;AAAA,QAER;AAAA,MAAA;AAAA,MAEJ;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,MAEjB;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,MAEjB;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,MAEjB;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,MAEjB;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,MAEjB;AAAA,QACI,QAAQ;AAAA,QACR,aAAa;AAAA,MAAA;AAAA,IACjB;AAAA,IAEJ,CAAA;AAAA,EAAC;AAGL,QAAM,CAAC,IAAI,IAAI,SAAS,eAAe;AACvC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,CAAA,CAAE;AAE1D,QAAM,QAAQ,cAAc;AAAA,IACxB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACH;AAAA,IAAA;AAAA,IAEJ,kBAAkB;AAAA,IAClB,YAAY,CAAC,QAAQ,IAAI;AAAA,IACzB,iBAAiB,gBAAA;AAAA,IACjB,qBAAqB,oBAAA;AAAA,EAAoB,CAC5C;AAED,SACI,oBAAA,UAAA,EACI,+BAAC,OAAA,EACG,UAAA;AAAA,IAAA,oBAAC,OAAA,EACI,UAAA,MAAM,gBAAA,EAAkB,IAAI,CAAC,gBAC1B,oBAAC,IAAA,EACI,UAAA,YAAY,QAAQ,IAAI,CAAC,WAAW;AACjC,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,SAAS,OAAO;AAAA,UAEf,UAAA;AAAA,YACG,OAAO,OAAO,UAAU;AAAA,YACxB,OAAO,WAAA;AAAA,UAAW;AAAA,QACtB;AAAA,QANK,OAAO;AAAA,MAAA;AAAA,IASxB,CAAC,EAAA,GAbI,YAAY,EAcrB,CACH,EAAA,CACL;AAAA,IACA,oBAAC,SACI,UAAA,MAAM,YAAA,EAAc,KAAK,IAAI,CAAC,QAAQ;AACnC,iCACK,IAAA,EACI,UAAA,IAAI,kBAAkB,IAAI,CAAC,SAAS;AACjC,mCACK,IAAA,EACI,UAAA;AAAA,UACG,KAAK,OAAO,UAAU;AAAA,UACtB,KAAK,WAAA;AAAA,QAAW,EACpB,GAJK,KAAK,EAKd;AAAA,MAER,CAAC,EAAA,GAVI,IAAI,EAWb;AAAA,IAER,CAAC,EAAA,CACL;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}