alope-ui 1.2.15 → 1.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Spinner/Spinner.d.ts +9 -0
- package/dist/main.cjs +9 -9
- package/dist/main.js +49 -5
- package/package.json +1 -1
|
@@ -12,12 +12,21 @@ declare const SpinnerColor: {
|
|
|
12
12
|
info: string;
|
|
13
13
|
secondary: string;
|
|
14
14
|
};
|
|
15
|
+
declare const LabelPosition: {
|
|
16
|
+
right: string;
|
|
17
|
+
left: string;
|
|
18
|
+
bottom: string;
|
|
19
|
+
top: string;
|
|
20
|
+
};
|
|
15
21
|
export type SpinnerProps = {
|
|
16
22
|
size?: keyof typeof SpinnerSize;
|
|
17
23
|
color?: keyof typeof SpinnerColor;
|
|
18
24
|
className?: string;
|
|
25
|
+
labelClassName?: string;
|
|
19
26
|
duration?: number;
|
|
20
27
|
thickness?: number | undefined;
|
|
28
|
+
label?: React.ReactNode;
|
|
29
|
+
labelPosition?: keyof typeof LabelPosition;
|
|
21
30
|
};
|
|
22
31
|
export declare const Spinner: React.FC<SpinnerProps>;
|
|
23
32
|
export {};
|
package/dist/main.cjs
CHANGED
|
@@ -22,11 +22,11 @@ case"right":return{left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft
|
|
|
22
22
|
return m?e.jsx(e.Fragment,{children:t}):e.jsxs("div",{className:"relative inline-block group",onMouseEnter:()=>b(!0),onMouseLeave:()=>{void 0!==i&&c?.(!1),b(!1)},children:[t,e.jsxs("div",{className:a.cn(`absolute text-white text-[.70rem] font-medium tracking-tight rounded py-1 px-2 z-10 transition-all ${d}`,g?"opacity-100 visible":"opacity-0 invisible"),style:h,children:[s,o&&e.jsx("div",{className:`absolute w-2 h-2 ${d}`,style:(()=>{switch(n){case"top":default:return{bottom:"-4px",left:"50%",transform:"translateX(-50%) rotate(45deg)"}
|
|
23
23
|
case"bottom":return{top:"-4px",left:"50%",transform:"translateX(-50%) rotate(225deg)"}
|
|
24
24
|
case"left":return{right:"-4px",top:"50%",transform:"translateY(-50%) rotate(135deg)"}
|
|
25
|
-
case"right":return{left:"-4px",top:"50%",transform:"translateY(-50%) rotate(-45deg)"}}})()})]})]})},Z={primary:"bg-primary-30 dark:bg-primary-dark-30 hover:[&::-webkit-slider-thumb]:transition-all hover:[&::-webkit-slider-thumb]:duration-300 [&::-webkit-slider-thumb]:outline-5 hover:[&::-webkit-slider-thumb]:outline-10 [&::-webkit-slider-thumb]:outline-primary-30 [&::-webkit-slider-thumb]:bg-primary dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:outline-primary-30 dark:[&::-webkit-slider-thumb]:outline-primary-dark-30",error:"bg-error-30 dark:bg-error-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-error-30 [&::-webkit-slider-thumb]:bg-error dark:[&::-webkit-slider-thumb]:bg-error-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-error-dark-30",warning:"bg-warning-30 dark:bg-warning-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-warning-30 [&::-webkit-slider-thumb]:bg-warning dark:[&::-webkit-slider-thumb]:bg-warning-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-warning-dark-30",success:"bg-success-30 dark:bg-success-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-success-30 [&::-webkit-slider-thumb]:bg-success dark:[&::-webkit-slider-thumb]:bg-success-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-success-dark-30",info:"bg-info-30 dark:bg-info-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-info-30 [&::-webkit-slider-thumb]:bg-info dark:[&::-webkit-slider-thumb]:bg-info-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-info-dark-30",secondary:"bg-secondary dark:bg-secondary-dark [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-secondary [&::-webkit-slider-thumb]:bg-secondary-700 dark:[&::-webkit-slider-thumb]:bg-secondary-dark-700 dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-secondary-dark"},K={sm:"h-1 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",md:"h-2 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",lg:"h-3 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",xl:"h-4 [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6"},_={sm:"h-4 w-4 border-2",md:"h-6 w-6 border-3",lg:"h-8 w-8 border-4"},J={primary:"border-primary dark:border-primary-dark",error:"border-error dark:border-error-dark",warning:"border-warning dark:border-warning-dark",success:"border-success dark:border-success-dark",info:"border-info dark:border-info-dark",secondary:"border-secondary dark:border-secondary-dark"},Q={sm:"text-sm py-[5px] px-2",md:"text-base py-2 px-4",lg:"text-lg py-3 px-6"},
|
|
25
|
+
case"right":return{left:"-4px",top:"50%",transform:"translateY(-50%) rotate(-45deg)"}}})()})]})]})},Z={primary:"bg-primary-30 dark:bg-primary-dark-30 hover:[&::-webkit-slider-thumb]:transition-all hover:[&::-webkit-slider-thumb]:duration-300 [&::-webkit-slider-thumb]:outline-5 hover:[&::-webkit-slider-thumb]:outline-10 [&::-webkit-slider-thumb]:outline-primary-30 [&::-webkit-slider-thumb]:bg-primary dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:outline-primary-30 dark:[&::-webkit-slider-thumb]:outline-primary-dark-30",error:"bg-error-30 dark:bg-error-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-error-30 [&::-webkit-slider-thumb]:bg-error dark:[&::-webkit-slider-thumb]:bg-error-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-error-dark-30",warning:"bg-warning-30 dark:bg-warning-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-warning-30 [&::-webkit-slider-thumb]:bg-warning dark:[&::-webkit-slider-thumb]:bg-warning-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-warning-dark-30",success:"bg-success-30 dark:bg-success-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-success-30 [&::-webkit-slider-thumb]:bg-success dark:[&::-webkit-slider-thumb]:bg-success-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-success-dark-30",info:"bg-info-30 dark:bg-info-dark-30 [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-info-30 [&::-webkit-slider-thumb]:bg-info dark:[&::-webkit-slider-thumb]:bg-info-dark dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-info-dark-30",secondary:"bg-secondary dark:bg-secondary-dark [&::-webkit-slider-thumb]:outline-5 [&::-webkit-slider-thumb]:outline-secondary [&::-webkit-slider-thumb]:bg-secondary-700 dark:[&::-webkit-slider-thumb]:bg-secondary-dark-700 dark:[&::-webkit-slider-thumb]:outline-5 dark:[&::-webkit-slider-thumb]:outline-secondary-dark"},K={sm:"h-1 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",md:"h-2 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",lg:"h-3 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",xl:"h-4 [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6"},_={sm:"h-4 w-4 border-2",md:"h-6 w-6 border-3",lg:"h-8 w-8 border-4"},J={primary:"border-primary dark:border-primary-dark",error:"border-error dark:border-error-dark",warning:"border-warning dark:border-warning-dark",success:"border-success dark:border-success-dark",info:"border-info dark:border-info-dark",secondary:"border-secondary dark:border-secondary-dark"},Q={sm:"text-xs",md:"text-sm",lg:"text-base"},ee={right:"flex-row",left:"flex-row-reverse",bottom:"flex-col",top:"flex-col-reverse"},re={sm:"text-sm py-[5px] px-2",md:"text-base py-2 px-4",lg:"text-lg py-3 px-6"},ae={line:{wrapper:"border-b border-secondary dark:border-secondary-dark",button:"whitespace-nowrap py-4 px-1 font-medium text-sm",active:"border-primary text-primary dark:text-primary-30 transition-all duration-300 ease-in-out",inactive:"border-transparent text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark-700"},solid:{wrapper:"rounded-md p-1",button:"whitespace-nowrap py-2 px-4 font-medium text-sm rounded-md",active:"bg-indigo-100 dark:bg-indigo-200 text-primary dark:text-primary-dark transition-all duration-300 ease-in-out",inactive:"text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark-700"},subtle:{wrapper:"rounded-md bg-transparent p-1",button:"whitespace-nowrap py-2 px-4 font-medium text-sm",active:"text-white transition-all duration-300 ease-in-out z-10",inactive:"bg-transparent text-primary dark:text-primary-30 hover:text-primary-700"},inline:{wrapper:"border border-primary rounded-t-md border-b dark:border-primary-dark-30",button:"whitespace-nowrap py-2 px-4 font-medium text-sm z-10",active:"text-white transition-all duration-300 ease-in-out",inactive:"text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark"},outline:{wrapper:"border border-primary dark:border-primary-dark-30 rounded-md p-1",button:"whitespace-nowrap py-2 px-4 font-medium text-sm rounded-md",active:"bg-indigo-100 dark:bg-indigo-200 text-primary dark:text-primary-dark transition-all duration-300 ease-in-out",inactive:"text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary-dark"},plain:{wrapper:"",button:"whitespace-nowrap py-2 px-4 font-medium text-sm",active:"text-primary dark:text-primary-30 transition-all duration-300 ease-in-out",inactive:"text-gray-500 hover:text-secondary-700 dark:text-white dark:hover:text-secondary"}},te={line:"absolute bottom-0 h-1 bg-primary dark:bg-primary-30 transition-all duration-300 ease-in-out",solid:"absolute bottom-0 h-1 bg-primary transition-all duration-300 ease-in-out",subtle:"absolute bottom-0 h-full bg-primary rounded-md transition-all duration-300 ease-in-out",inline:"absolute bottom-0 h-full bg-primary border-t border-r border-l border-primary-700 rounded-tl-md rounded-tr-md transition-all duration-300 ease-in-out",outline:"absolute bottom-0 h-1 bg-primary transition-all duration-300 ease-in-out",plain:""},se={success:"bg-success dark:bg-success-dark",info:"bg-info dark:bg-info-dark",error:"bg-error dark:bg-error-dark",warning:"bg-warning dark:bg-warning-dark",primary:"bg-primary dark:bg-primary-dark",default:"bg-secondary-700 dark:bg-secondary-dark"},oe={success:"border-success dark:border-success-dark md:before:border-success md:before:dark:border-success-dark",info:"border-info dark:border-info-dark md:before:border-info md:before:dark:border-info-dark",error:"border-error dark:border-error-dark md:before:border-error md:before:dark:border-error-dark",warning:"border-warning dark:border-warning-dark md:before:border-warning md:before:dark:border-warning-dark",primary:"border-primary dark:border-primary-dark md:before:border-primary md:before:dark:border-primary-dark",default:"border-secondary-700 dark:border-secondary-dark md:before:border-secondary md:before:dark:border-secondary-dark"},ne=({position:t="left",lineColor:s="default",children:o})=>{const n=r.Children.map(o,e=>r.isValidElement(e)?r.cloneElement(e,{position:t}):e),l=oe[s]
|
|
26
26
|
return e.jsx("ol",{className:a.cn("relative",{"border-s-2":"left"===t,"border-e-2":"right"===t,"border-s-2 md:border-s-0 md:before:content-[''] md:before:absolute md:before:top-0 md:before:left-1/2 md:before:h-full md:before:border-s-2 md:before:border-secondary md:before:dark:border-secondary-dark":"split"===t},l),children:n})}
|
|
27
|
-
|
|
27
|
+
ne.Item=({title:r,time:t,children:s,dotColor:o="default",icon:n,position:l})=>{const d=se[o]
|
|
28
28
|
return e.jsxs("li",{className:a.cn("mb-5",{"ms-8":"left"===l,"me-8 text-end":"right"===l,"ms-4 md:w-1/2 ps-4 md:odd:pe-8 md:odd:ms-0 md:odd:text-end md:even:ps-8 md:even:ms-auto":"split"===l}),children:[n?e.jsx("div",{className:a.cn("flex items-center justify-center absolute w-10 h-10 rounded-full mt-1.5 outline outline-white dark:outline-secondary",d,{"-start-[20px]":"left"===l||"split"===l&&"md:hidden","-end-[21px]":"right"===l,"-start-[21px] md:start-1/2 md:-ms-[19px]":"split"===l}),children:n}):e.jsx("div",{className:a.cn("absolute w-3 h-3 rounded-full mt-1.5 outline outline-white dark:outline-secondary",d,{"-start-[7px]":"left"===l||"split"===l&&"md:hidden","-end-[7px]":"right"===l,"-start-[7.1px] md:start-1/2 md:-ms-[4.7px]":"split"===l})}),e.jsx("time",{className:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-secondary-dark",children:t}),e.jsx("h3",{className:"text-lg font-semibold text-gray-900 dark:text-white",children:r}),e.jsx("p",{className:"mb-4 text-base font-normal text-secondary-foreground dark:text-secondary-foreground-dark",children:s})]})}
|
|
29
|
-
const
|
|
29
|
+
const le={primary:"peer-checked:bg-primary dark:peer-checked:bg-primary-dark",error:"peer-checked:bg-error dark:peer-checked:bg-error-dark",warning:"peer-checked:bg-warning dark:peer-checked:bg-warning-dark",success:"peer-checked:bg-success dark:peer-checked:bg-success-dark",info:"peer-checked:bg-info dark:peer-checked:bg-info-dark",secondary:"peer-checked:bg-secondary dark:peer-checked:bg-secondary-dark"},de={stadium:"rounded-full after:rounded-full",rounded:"rounded-md after:rounded-sm"},ie={sm:"w-9 h-5 after:h-4 after:w-4 after:start-[2px] after:top-[2px] peer-checked:after:translate-x-[16px]",md:"w-11 h-6 after:h-5 after:w-5 after:start-[2px] after:top-[2px] peer-checked:after:translate-x-[20px]",lg:"w-14 h-7 after:h-6 after:w-6 after:start-[2px] after:top-[2px] peer-checked:after:translate-x-[28px]"}
|
|
30
30
|
exports.Accordion=({data:t,openIndex:s,single:o=!0,onToggleItem:n,icon:l,className:d,labelClassName:i,labelContainerClassName:c,descriptionClassName:m,...u})=>{const p=void 0!==s&&void 0!==n,[x,b]=r.useState([]),g=p?Array.isArray(s)?s:null!=s?[s]:[]:x
|
|
31
31
|
return e.jsx("div",{className:a.cn("space-y-2",d),...u,children:t.map((r,t)=>{const s=g.includes(t)
|
|
32
32
|
return e.jsxs("div",{className:a.cn("border border-gray-300 dark:border-white/20 rounded-md overflow-hidden",c),children:[e.jsxs("button",{onClick:()=>(e=>{const r=g.includes(e),a=o?r?[]:[e]:r?g.filter(r=>r!==e):[...g,e]
|
|
@@ -35,7 +35,7 @@ return g?e.jsxs("div",{id:"alopeAlert",className:a.cn("flex gap-2 p-4 rounded-md
|
|
|
35
35
|
return e.jsxs("div",{className:a.cn("flex items-center",n),children:[l.map((r,t)=>e.jsx("div",{className:a.cn(0!==t&&o),children:e.jsx(u,{...r,size:s})},t)),d>0&&e.jsxs("div",{className:a.cn("flex items-center justify-center bg-secondary dark:bg-secondary-dark font-medium",o,"sm"===s&&"w-8 h-8 text-xs rounded-full","md"===s&&"w-12 h-12 text-sm rounded-full","lg"===s&&"w-16 h-16 text-base rounded-full"),children:["+",d]})]})},exports.Badge=({children:r,variant:t="default",position:s="top-right",isAbsolute:o=!1,className:n,icon:l})=>{const d=p[t],i=o?x[s]:""
|
|
36
36
|
return e.jsxs("span",{className:a.cn("inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold",d,i,n),children:[l&&e.jsx("span",{className:"mr-1",children:l}),r]})},exports.BottomNavbar=({children:a,className:t,value:s,onChangeValue:o})=>e.jsx("div",{className:`fixed bottom-0 left-0 z-50 w-full bg-white border-t border-secondary dark:bg-gray-800 dark:border-secondary-dark-700 ${t??""}`,children:e.jsx("div",{className:"flex items-center justify-center h-full max-w-lg md:max-w-md mx-auto font-medium",children:r.Children.map(a,e=>r.isValidElement(e)&&e.type===b?r.cloneElement(e,{selectedValue:s,onChangeValue:o}):(process.env.NODE_ENV,null))})}),exports.BottomNavbarAction=b,exports.Breadcrumb=({data:r,labelClassName:s,currentLinkClassName:o,linkClassName:n,separatorClassName:l,separator:d=">"})=>e.jsx("nav",{"aria-label":"breadcrumb",children:e.jsx("ol",{className:"flex flex-wrap gap-2 text-gray-600",children:r.map((i,c)=>{const m=null===i.path||c===r.length-1
|
|
37
37
|
return e.jsxs("li",{className:"flex items-center",children:[!m&&i.path?e.jsxs(t.Link,{to:i.path,className:a.cn("hover:underline text-primary dark:text-primary-dark-30 flex items-center text-sm",s,n),children:[i.icon&&e.jsx("span",{className:"mr-1",children:i.icon}),i.label]}):e.jsxs("span",{className:a.cn("font-semibold dark:text-white flex items-center text-sm",s,o),children:[i.icon&&e.jsx("span",{className:"mr-1",children:i.icon}),i.label]}),!m&&e.jsx("span",{className:a.cn("mx-2 font-semibold dark:text-white",l),children:d})]},c)})})}),exports.Button=({children:r,onClick:s,size:o="md",to:n,type:l="button",disabled:d=!1,variant:i="solid",variantType:c="primary",borderType:m="regular",fullWidth:u=!1,prefixIcon:p,suffixIcon:x,className:b})=>{const k=h[m],y=f(i,c),w=g[o]||"",v=d?"opacity-50 cursor-not-allowed":"cursor-pointer",N=u?"w-full":""
|
|
38
|
-
return n?e.jsxs(t.Link,{to:n,className:a.cn("inline-flex items-center justify-center transition-all duration-[170ms] hover:scale-[98%]",y,w,v,N,k,b),children:[p&&e.jsx("span",{className:"mr-2",children:p}),r,x&&e.jsx("span",{className:"ml-2",children:x})]}):e.jsxs("button",{disabled:d,type:l,onClick:s,className:a.cn("inline-flex items-center justify-center transition-all duration-[170ms] hover:scale-[98%]",y,w,v,N,k,b),children:[p&&e.jsx("span",{className:"mr-2",children:p}),r,x&&e.jsx("span",{className:"ml-2",children:x})]})},exports.ButtonVariantsMap=k,exports.Card=({title:r,description:t,image:s,onClick:o,footer:n,horizontal:l=!1,size:d="md",containerClassName:i,descriptionClassName:c,imageClassName:m,titleClassName:u,ribbonClassName:p,ribbon:x,children:b})=>e.jsx("div",{onClick:o,className:a.cn("relative bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer overflow-hidden dark:border dark:bg-gray-800 dark:border-gray-700",l?"flex flex-col md:flex-row":"flex flex-col",{sm:"max-w-xs",md:"max-w-sm",lg:"max-w-md",full:"w-full"}[d]||d,i),children:b??e.jsxs(e.Fragment,{children:[s?"string"==typeof s?e.jsx("img",{src:s,alt:r,className:a.cn("object-cover w-full h-48 md:h-full",l?"md:w-[40%]":"w-full",m)}):e.jsx("div",{className:a.cn("w-full h-48 md:h-full",l?"md:w-[40%]":"w-full",m),children:s}):null,e.jsxs("div",{className:"p-4 flex flex-col justify-between flex-1",children:[x&&e.jsx("span",{className:a.cn("bg-red-500 text-white py-1 absolute text-[10px] md:text-xs w-[150px] text-center z-10",l?"top-3 -left-[50px] -rotate-45":"top-3 -right-[50px] rotate-45",p),children:x}),e.jsxs("div",{children:[r&&e.jsx("h3",{className:a.cn("text-lg font-semibold text-gray-800 line-clamp-1 dark:text-white",u),children:r}),t&&e.jsx("p",{className:a.cn("mt-2 text-secondary-700
|
|
38
|
+
return n?e.jsxs(t.Link,{to:n,className:a.cn("inline-flex items-center justify-center transition-all duration-[170ms] hover:scale-[98%]",y,w,v,N,k,b),children:[p&&e.jsx("span",{className:"mr-2",children:p}),r,x&&e.jsx("span",{className:"ml-2",children:x})]}):e.jsxs("button",{disabled:d,type:l,onClick:s,className:a.cn("inline-flex items-center justify-center transition-all duration-[170ms] hover:scale-[98%]",y,w,v,N,k,b),children:[p&&e.jsx("span",{className:"mr-2",children:p}),r,x&&e.jsx("span",{className:"ml-2",children:x})]})},exports.ButtonVariantsMap=k,exports.Card=({title:r,description:t,image:s,onClick:o,footer:n,horizontal:l=!1,size:d="md",containerClassName:i,descriptionClassName:c,imageClassName:m,titleClassName:u,ribbonClassName:p,ribbon:x,children:b})=>e.jsx("div",{onClick:o,className:a.cn("relative bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer overflow-hidden dark:border dark:bg-gray-800 dark:border-gray-700",l?"flex flex-col md:flex-row":"flex flex-col",{sm:"max-w-xs",md:"max-w-sm",lg:"max-w-md",full:"w-full"}[d]||d,i),children:b??e.jsxs(e.Fragment,{children:[s?"string"==typeof s?e.jsx("img",{src:s,alt:r,className:a.cn("object-cover w-full h-48 md:h-full",l?"md:w-[40%]":"w-full",m)}):e.jsx("div",{className:a.cn("w-full h-48 md:h-full",l?"md:w-[40%]":"w-full",m),children:s}):null,e.jsxs("div",{className:"p-4 flex flex-col justify-between flex-1",children:[x&&e.jsx("span",{className:a.cn("bg-red-500 text-white py-1 absolute text-[10px] md:text-xs w-[150px] text-center z-10",l?"top-3 -left-[50px] -rotate-45":"top-3 -right-[50px] rotate-45",p),children:x}),e.jsxs("div",{children:[r&&e.jsx("h3",{className:a.cn("text-lg font-semibold text-gray-800 line-clamp-1 dark:text-white",u),children:r}),t&&e.jsx("p",{className:a.cn("mt-2 text-secondary-700 text-sm mb-2 line-clamp-3 dark:text-secondary-dark",c),children:t})]}),n&&e.jsx("div",{className:"mt-2",children:n})]})]})}),exports.CheckboxInput=y,exports.CodeInput=({id:t,label:s,length:o,value:n,disabled:l,labelClassName:d,name:i,onCodeChange:c,inputSize:m="md",...u})=>{const p=r.useRef([]),x=N[m],b=e=>{const r=p.current.map(e=>e?.value||"").join("")
|
|
39
39
|
c&&c(r),p.current[e]?.value&&e<o-1&&p.current[e+1]?.focus()}
|
|
40
40
|
return e.jsxs("div",{className:"flex flex-col gap-2",children:[s&&e.jsx("label",{htmlFor:t||i,className:a.cn("block text-sm font-medium mb-1 dark:text-white",d),children:s}),e.jsx("div",{className:"flex gap-2",onPaste:e=>{e.preventDefault(),e.clipboardData.getData("text").slice(0,o).split("").forEach((e,r)=>{p.current[r]&&(p.current[r].value=e,b(r))})},children:Array.from({length:o},(r,t)=>e.jsx("input",{ref:e=>{p.current[t]=e},type:"text",disabled:l,value:n?.[t],maxLength:1,onChange:()=>b(t),onKeyDown:e=>((e,r)=>{"Backspace"===e.key&&!p.current[r]?.value&&r>0&&p.current[r-1]?.focus()})(e,t),onFocus:()=>(e=>{const r=(()=>{for(let e=0;e<o;e++)if(!p.current[e]?.value)return e
|
|
41
41
|
return-1})();-1!==r&&r<e&&p.current[r]?.focus()})(t),className:a.cn("text-center border rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary border-secondary dark:text-white dark:placeholder:text-white",x,{"bg-secondary/40 cursor-not-allowed ":l}),...u},t))})]})},exports.Collection=function({data:r,title:t,className:s,wrapperClassName:o,children:n,suffixIcon:l,activeItem:d,onChangeActive:i}){return e.jsxs("div",{className:a.cn("p-3 border border-secondary-700 inline-block dark:border-secondary-dark-700 rounded-md dark:text-white",s),children:[t&&e.jsx("h2",{className:"text-lg font-semibold mb-4",children:t}),r.length>0?e.jsx("ul",{className:a.cn("space-y-3",o),children:r.map((r,t)=>{const s=r.id===d
|
|
@@ -106,19 +106,19 @@ return e.jsxs("div",{className:"w-full p-4 relative overflow-x-clip",children:[o
|
|
|
106
106
|
return{left:`calc(${100*r}% + ${r*-v+v/2}px)`,opacity:k?1:0,pointerEvents:"none"}})(),children:e.jsx(U,{text:String(c),isOpen:k,placement:"top",children:e.jsx("div",{})})}),e.jsx("input",{disabled:l,type:"range",id:t||"slider-range",min:n,max:d,step:i,value:c,onChange:p,onMouseDown:()=>f(!0),className:a.cn("w-full rounded-full appearance-none cursor-pointer dark:bg-gray-700","transition-all duration-300 ease-in-out",w,"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:appearance-none","[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:appearance-none",y,{[Z.secondary]:l,"bg-secondary opacity-50":l})}),(()=>{if(!u||Number(i)<=1)return null
|
|
107
107
|
const r=Number(d)-Number(n),t=Math.floor(r/Number(i)),s=Array.from({length:t+1},(r,s)=>{const o=s/t*100
|
|
108
108
|
return e.jsx("div",{className:a.cn("absolute top-1/2 -translate-y-1/2 w-[2px] h-2 rounded-full",y),style:{left:`${o}%`}},s)})
|
|
109
|
-
return e.jsx("div",{className:"absolute top-full mt-2 -left-0.5 -right-0.5 h-2 me-[11px] ms-[9px]",children:s})})()]}),g,e.jsx("div",{className:"w-32",children:e.jsx(j,{min:n,max:d,step:i,type:Number(c)<=0?"text":"number",value:Number(c)<=0?"":c,onChange:p})})]})]})},exports.Spinner=({color:r="primary",size:t="md",className:s,duration:
|
|
110
|
-
return e.
|
|
109
|
+
return e.jsx("div",{className:"absolute top-full mt-2 -left-0.5 -right-0.5 h-2 me-[11px] ms-[9px]",children:s})})()]}),g,e.jsx("div",{className:"w-32",children:e.jsx(j,{min:n,max:d,step:i,type:Number(c)<=0?"text":"number",value:Number(c)<=0?"":c,onChange:p})})]})]})},exports.Spinner=({color:r="primary",size:t="md",className:s,labelClassName:o,duration:n=1e3,thickness:l,label:d,labelPosition:i="right"})=>{const c=J[r],m=_[t],u=Q[t],p=ee[i],x=`${n}ms`,b=l?`${l}px`:void 0,g=e.jsx("span",{role:"status","aria-label":"string"==typeof d?d:"Loading",className:a.cn(m,c,"inline-block shrink-0 rounded-full animate-spin",s,"border-t-transparent dark:border-t-transparent"),style:{animationDuration:x,borderWidth:b}})
|
|
110
|
+
return d?e.jsxs("div",{className:a.cn("inline-flex items-center justify-center gap-2",p),children:[g,e.jsx("span",{className:a.cn(u,"text-gray-700 dark:text-gray-200 font-medium",o),children:d})]}):g},exports.Table=function({columns:r,data:t,striped:s=!1,stripeColor:o,hoverable:n=!0,headerClassName:l,dataColumnClassName:d,dataRowClassName:i,customEmptyData:c,tableClassName:m,captionClassName:u,containerClassName:p,size:x="md",caption:b,captionPosition:g="bottom",stickyHeader:h=!1,selectable:k=!1,onSelectionChange:f,selectedRows:w=[]}){const v=re[x],N=t.length>0&&w.length===t.length,j=w.length>0&&w.length<t.length
|
|
111
111
|
return e.jsxs("div",{className:a.cn("overflow-x-auto w-full",h&&"max-h-[400px] overflow-y-auto",p),children:[b&&"top"===g&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mb-1 dark:text-white",u),children:b}),e.jsxs("table",{className:a.cn("relative min-w-full outline outline-gray-200 dark:outline-gray-600",v,m),children:[e.jsx("thead",{className:a.cn("dark:bg-gray-700 dark:text-white",l),children:e.jsxs("tr",{children:[k&&e.jsx("th",{className:a.cn("px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",v,h&&"sticky top-0 bg-secondary dark:bg-gray-700 z-10",l),children:e.jsx(y,{checked:N,indeterminate:j,onChange:e=>{e.target.checked?f?.(t):f?.([])}})}),r.map((r,t)=>e.jsx("th",{className:a.cn("px-4 py-2 text-left text-sm border-b dark:border-b-secondary-700",v,h&&"sticky top-0 bg-secondary dark:bg-gray-700 z-10",l),children:r.header},t))]})}),e.jsx("tbody",{className:"dark:bg-gray-800 dark:text-white",children:t.length>0?t.map((t,l)=>e.jsxs("tr",{className:a.cn("transition-colors",s&&l%2!=0&&(o??"bg-gray-300 dark:bg-gray-700"),n&&"hover:bg-gray-200 dark:hover:bg-gray-200",i),children:[k&&e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",d,v),children:e.jsx(y,{checked:w.some(e=>e.id===t.id),onChange:()=>(e=>{const r=w.some(r=>r.id===e.id)
|
|
112
|
-
f?.(r?w.filter(r=>r.id!==e.id):[...w,e])})(t)})}),r.map((r,n)=>e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",d,v),children:r.render?r.render(t[r.accessor],t):String(t[r.accessor])},n))]},t.id??l)):e.jsx("tr",{children:e.jsx("td",{colSpan:r.length+(k?1:0),className:a.cn("px-4 py-6 text-center",v),children:c??"Tidak ada data."})})})]}),b&&"bottom"===g&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mt-1 dark:text-white",u),children:b})]})},exports.Tabs=({tabs:t,fitted:s,variant:o="line",wrapperClassName:n,buttonClassName:l,activeClassName:d,inactiveClassName:i,activeTab:c,onTabChange:m})=>{const[u,p]=r.useState(0),x=void 0!==c&&void 0!==m,b=x?c:u,g=
|
|
112
|
+
f?.(r?w.filter(r=>r.id!==e.id):[...w,e])})(t)})}),r.map((r,n)=>e.jsx("td",{className:a.cn("px-4 py-2 border-b border-secondary-700 dark:border-secondary-dark-700",(s||o)&&"border-none",d,v),children:r.render?r.render(t[r.accessor],t):String(t[r.accessor])},n))]},t.id??l)):e.jsx("tr",{children:e.jsx("td",{colSpan:r.length+(k?1:0),className:a.cn("px-4 py-6 text-center",v),children:c??"Tidak ada data."})})})]}),b&&"bottom"===g&&e.jsx("p",{className:a.cn("text-center text-sm font-medium mt-1 dark:text-white",u),children:b})]})},exports.Tabs=({tabs:t,fitted:s,variant:o="line",wrapperClassName:n,buttonClassName:l,activeClassName:d,inactiveClassName:i,activeTab:c,onTabChange:m})=>{const[u,p]=r.useState(0),x=void 0!==c&&void 0!==m,b=x?c:u,g=ae[o],h=te[o],k=r.useRef([]),f=r.useRef(null)
|
|
113
113
|
return r.useEffect(()=>{!x&&b>=t.length&&p(Math.max(0,t.length-1))},[t,b,x]),r.useEffect(()=>{const e=k.current[b],r=f.current
|
|
114
114
|
if(e&&r){const a=e.offsetLeft,t=e.offsetWidth
|
|
115
115
|
r.style.transform=`translateX(${a}px)`,r.style.width=`${t}px`,e.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})}},[b,t]),e.jsxs("div",{children:[e.jsx("div",{className:a.cn("relative",g.wrapper,n),children:e.jsxs("nav",{className:"relative -mb-px flex space-x-2 overflow-x-auto scroll-smooth","aria-label":"Tabs",children:[t.map((r,t)=>{const o=a.cn("hover:cursor-pointer",s&&"flex-1",g.button,l,b===t?a.cn(g.active,d):a.cn(g.inactive,i),r.disabled&&"hover:cursor-not-allowed cursor-not-allowed opacity-50")
|
|
116
116
|
return r.link?e.jsx("a",{href:r.disabled?void 0:r.link,ref:e=>{k.current[t]=e},className:o,"aria-disabled":r.disabled,onClick:e=>r.disabled&&e.preventDefault(),children:r.label},r.label):e.jsx("button",{ref:e=>{k.current[t]=e},onClick:()=>(e=>{x?m(e):p(e)})(t),disabled:r.disabled,className:o,children:r.label},r.label)}),e.jsx("div",{ref:f,className:a.cn(h),style:{width:0,transform:"translateX(0px)"}})]})}),e.jsx("div",{className:"mt-4",children:t[b]?.content})]})},exports.TextInput=j,exports.Textarea=({label:t,id:s,name:o,error:n,autoResize:l=!1,customClassName:d,...i})=>{const c=r.useRef(null),m=()=>{const e=c.current
|
|
117
117
|
e&&(e.style.height="auto",e.style.height=`${e.scrollHeight}px`)}
|
|
118
|
-
return r.useEffect(()=>{l&&m()},[]),e.jsxs("div",{children:[t&&e.jsx("label",{htmlFor:s||o,className:"inline-block text-sm font-medium mb-1 dark:text-white",children:t}),e.jsx("textarea",{id:s||o,name:o,rows:l?1:5,ref:c,onInput:m,className:a.cn("overflow-hidden bg-gray-50 w-full block px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm border-secondary min-h-[58px] max-h-[10rem]","dark:bg-gray-800 dark:border-secondary-dark dark:text-white dark:placeholder:text-gray-400",l?"resize-none":"resize",n&&"border-error dark:border-error-dark",i.disabled&&"bg-secondary/40 cursor-not-allowed",d),...i}),n&&e.jsx("p",{className:"mt-1 text-sm text-red-600 dark:text-red-500",children:n})]})},exports.Timeline=
|
|
118
|
+
return r.useEffect(()=>{l&&m()},[]),e.jsxs("div",{children:[t&&e.jsx("label",{htmlFor:s||o,className:"inline-block text-sm font-medium mb-1 dark:text-white",children:t}),e.jsx("textarea",{id:s||o,name:o,rows:l?1:5,ref:c,onInput:m,className:a.cn("overflow-hidden bg-gray-50 w-full block px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm border-secondary min-h-[58px] max-h-[10rem]","dark:bg-gray-800 dark:border-secondary-dark dark:text-white dark:placeholder:text-gray-400",l?"resize-none":"resize",n&&"border-error dark:border-error-dark",i.disabled&&"bg-secondary/40 cursor-not-allowed",d),...i}),n&&e.jsx("p",{className:"mt-1 text-sm text-red-600 dark:text-red-500",children:n})]})},exports.Timeline=ne,exports.ToastProvider=({children:a})=>{const[t,s]=r.useState([]),o=Object.keys(V)
|
|
119
119
|
return e.jsxs(W.Provider,{value:{addToast:({title:e,message:r,type:a,variant:t,icon:o,onClose:n,position:l="bottomRight"})=>{const d=Date.now()
|
|
120
120
|
s(s=>[...s,{title:e,id:d,message:r,type:a,variant:t,icon:o,onClose:n,position:l}])}},children:[a,o.map(r=>e.jsx("div",{className:`fixed z-50 ${V[r]}`,children:t.filter(e=>e.position===r).map(r=>e.jsx(P,{title:r.title,message:r.message,type:r.type,variant:r.variant,icon:r.icon,position:r.position,onClose:()=>{return e=r.id,void s(r=>r.filter(r=>r.id!==e))
|
|
121
121
|
var e}},r.id))},r))]})},exports.Toggle=({variant:r="primary",customSize:t="md",thumbShape:s="stadium",label:o,wrapperClassName:n,labelClassName:l,...d})=>{const i=["relative","bg-secondary-700 dark:bg-secondary-dark-700","peer-checked:after:translate-x-full","rtl:peer-checked:after:-translate-x-full","peer-checked:after:border-white","after:absolute","after:bg-white","after:transition-colors","after:transition-transform","duration-500"].filter(Boolean).join(" "),c=["inline-flex items-center cursor-pointer"].filter(Boolean).join(" ")
|
|
122
|
-
return e.jsxs("label",{className:a.cn(c,n,d.disabled&&"cursor-not-allowed"),children:[e.jsx("input",{type:"checkbox",value:"",className:"sr-only peer",...d}),e.jsx("div",{className:a.cn(i,
|
|
122
|
+
return e.jsxs("label",{className:a.cn(c,n,d.disabled&&"cursor-not-allowed"),children:[e.jsx("input",{type:"checkbox",value:"",className:"sr-only peer",...d}),e.jsx("div",{className:a.cn(i,ie[t],le[r],de[s],d.disabled&&"opacity-50 cursor-not-allowed")}),o&&e.jsx("span",{className:a.cn("ms-3 text-sm font-medium dark:text-white",l),children:o})]})},exports.Tooltip=U,exports.getVariantClasses=f,exports.useToast=()=>{const e=r.useContext(W)
|
|
123
123
|
if(!e)throw new Error("useToast must be used within a ToastProvider")
|
|
124
124
|
return e}
|
package/dist/main.js
CHANGED
|
@@ -543,7 +543,7 @@ const Card = ({
|
|
|
543
543
|
"p",
|
|
544
544
|
{
|
|
545
545
|
className: cn(
|
|
546
|
-
"mt-2 text-secondary-700
|
|
546
|
+
"mt-2 text-secondary-700 text-sm mb-2 line-clamp-3 dark:text-secondary-dark",
|
|
547
547
|
descriptionClassName
|
|
548
548
|
),
|
|
549
549
|
children: description
|
|
@@ -2718,30 +2718,74 @@ const SpinnerColor = {
|
|
|
2718
2718
|
info: "border-info dark:border-info-dark",
|
|
2719
2719
|
secondary: "border-secondary dark:border-secondary-dark"
|
|
2720
2720
|
};
|
|
2721
|
+
const SpinnerTextSize = {
|
|
2722
|
+
sm: "text-xs",
|
|
2723
|
+
md: "text-sm",
|
|
2724
|
+
lg: "text-base"
|
|
2725
|
+
};
|
|
2726
|
+
const LabelPosition = {
|
|
2727
|
+
right: "flex-row",
|
|
2728
|
+
left: "flex-row-reverse",
|
|
2729
|
+
bottom: "flex-col",
|
|
2730
|
+
top: "flex-col-reverse"
|
|
2731
|
+
};
|
|
2721
2732
|
const Spinner = ({
|
|
2722
2733
|
color = "primary",
|
|
2723
2734
|
size = "md",
|
|
2724
2735
|
className: customClassName,
|
|
2736
|
+
labelClassName,
|
|
2725
2737
|
duration = 1e3,
|
|
2726
|
-
thickness
|
|
2738
|
+
thickness,
|
|
2739
|
+
label,
|
|
2740
|
+
labelPosition = "right"
|
|
2727
2741
|
}) => {
|
|
2728
2742
|
const spinnerColor = SpinnerColor[color];
|
|
2729
2743
|
const spinnerSize = SpinnerSize[size];
|
|
2744
|
+
const spinnerTextSize = SpinnerTextSize[size];
|
|
2745
|
+
const positionClass = LabelPosition[labelPosition];
|
|
2730
2746
|
const animationDuration = `${duration}ms`;
|
|
2731
|
-
const borderWidth = thickness
|
|
2732
|
-
|
|
2747
|
+
const borderWidth = thickness ? `${thickness}px` : void 0;
|
|
2748
|
+
const spinnerElement = /* @__PURE__ */ jsx(
|
|
2733
2749
|
"span",
|
|
2734
2750
|
{
|
|
2751
|
+
role: "status",
|
|
2752
|
+
"aria-label": typeof label === "string" ? label : "Loading",
|
|
2735
2753
|
className: cn(
|
|
2736
2754
|
spinnerSize,
|
|
2737
2755
|
spinnerColor,
|
|
2738
|
-
|
|
2756
|
+
"inline-block shrink-0 rounded-full animate-spin",
|
|
2739
2757
|
customClassName,
|
|
2740
2758
|
"border-t-transparent dark:border-t-transparent"
|
|
2741
2759
|
),
|
|
2742
2760
|
style: { animationDuration, borderWidth }
|
|
2743
2761
|
}
|
|
2744
2762
|
);
|
|
2763
|
+
if (!label) {
|
|
2764
|
+
return spinnerElement;
|
|
2765
|
+
}
|
|
2766
|
+
return /* @__PURE__ */ jsxs(
|
|
2767
|
+
"div",
|
|
2768
|
+
{
|
|
2769
|
+
className: cn(
|
|
2770
|
+
"inline-flex items-center justify-center gap-2",
|
|
2771
|
+
positionClass
|
|
2772
|
+
),
|
|
2773
|
+
children: [
|
|
2774
|
+
spinnerElement,
|
|
2775
|
+
/* @__PURE__ */ jsx(
|
|
2776
|
+
"span",
|
|
2777
|
+
{
|
|
2778
|
+
className: cn(
|
|
2779
|
+
spinnerTextSize,
|
|
2780
|
+
"text-gray-700 dark:text-gray-200 font-medium",
|
|
2781
|
+
labelClassName
|
|
2782
|
+
),
|
|
2783
|
+
children: label
|
|
2784
|
+
}
|
|
2785
|
+
)
|
|
2786
|
+
]
|
|
2787
|
+
}
|
|
2788
|
+
);
|
|
2745
2789
|
};
|
|
2746
2790
|
const TableSize = {
|
|
2747
2791
|
sm: "text-sm py-[5px] px-2",
|