@studiocubics/components 0.0.13 → 0.0.15

package/dist/Display/IdentityDisplay/IdentityDisplay.d.ts

@@ -1,6 +1,6 @@
 import type { PolymorphicComponentProps, PolymorphicComponentType } from "@studiocubics/types";
 import { type ElementType, type ComponentProps, type ReactNode } from "react";
-import { type UseRippleProps } from "../../Misc/_index";
+import { type UseRippleProps } from "../../Misc/Ripple/Ripple";
 interface IdentityDisplayBaseProps {
     profileName: ReactNode;
     role?: ReactNode;

package/dist/Display/IdentityDisplay/IdentityDisplay.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as e,jsx as i}from"react/jsx-runtime";import"react";import{cn as t}from"@studiocubics/utils";import r from"./IdentityDisplay.module.css.js";import{useRipple as s,eventWithRipple as l}from"../../Misc/Ripple/Ripple.js";import"@studiocubics/hooks";function a(a){const{as:c,className:o,profileName:p,role:m,profileImage:n,desc:d,variant:f="full",onClick:h,onTouchStart:g,alt:u="Alt text missing",slotProps:y,ref:N,...k}=a,v={image:y?.image??{},ripple:y?.ripple??{}},b=c??"div",j=!!a.onClick||!!a.href,{rippleElements:x,createRipple:C}=s(v.ripple),I={className:t(o,r.root,r[f],j?r.clickable:""),onTouchStart:l(C,g),onClick:l(C,h),ref:N,..."a"===b?{href:a.href}:{},...k};return e(b,{...I,children:[j&&x,e("div",{className:r.main,children:[n&&i("div",{...v.image,className:t(r.image,v.image?.className),children:i("img",{src:n,alt:"string"==typeof p?p:u,width:48,height:48})}),e("div",{className:r.details,children:[p&&("string"==typeof p?i("h4",{children:p}):p),m&&("string"==typeof m?i("p",{children:m}):m)]})]}),d&&("string"==typeof d?i("p",{className:r.desc,children:d}):d)]})}a.displayName="IdentityDisplay";const c=a;export{c as IdentityDisplay};
+"use client";import{jsxs as e,jsx as i}from"react/jsx-runtime";import"react";import{cn as r}from"@studiocubics/utils";import t from"./IdentityDisplay.module.css.js";import{useRipple as l,eventWithRipple as s}from"../../Misc/Ripple/Ripple.js";function a(a){const{as:c,className:o,profileName:p,role:m,profileImage:n,desc:d,variant:f="full",onClick:h,onTouchStart:g,alt:u="Alt text missing",slotProps:y,ref:N,...v}=a,k={image:y?.image??{},ripple:y?.ripple??{}},j=c??"div",x=!!a.onClick||!!a.href,{rippleElements:C,createRipple:I}=l(k.ripple),R={className:r(o,t.root,t[f],x?t.clickable:""),onTouchStart:s(I,g),onClick:s(I,h),ref:N,..."a"===j?{href:a.href}:{},...v};return e(j,{...R,children:[x&&C,e("div",{className:t.main,children:[n&&i("div",{...k.image,className:r(t.image,k.image?.className),children:i("img",{src:n,alt:"string"==typeof p?p:u,width:48,height:48})}),e("div",{className:t.details,children:[p&&("string"==typeof p?i("h4",{children:p}):p),m&&("string"==typeof m?i("p",{children:m}):m)]})]}),d&&("string"==typeof d?i("p",{className:t.desc,children:d}):d)]})}a.displayName="IdentityDisplay";const c=a;export{c as IdentityDisplay};
 //# sourceMappingURL=IdentityDisplay.js.map

package/dist/Display/IdentityDisplay/IdentityDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"IdentityDisplay.js","sources":["../../../src/Display/IdentityDisplay/IdentityDisplay.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  PolymorphicComponentProps,\n  PolymorphicComponentType,\n} from \"@studiocubics/types\";\nimport { type ElementType, type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./IdentityDisplay.module.css\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/_index\";\n\ninterface IdentityDisplayBaseProps {\n  profileName: ReactNode;\n  role?: ReactNode;\n  desc?: ReactNode;\n  alt?: string;\n  profileImage?: string | null;\n  variant?: \"compact\" | \"full\" | \"square\" | \"image-only\";\n  href?: ComponentProps<\"a\">[\"href\"];\n  slotProps?: {\n    image?: ComponentProps<\"div\">;\n    ripple?: UseRippleProps;\n  };\n}\n\nconst defaultElement = \"div\";\ntype DefaultELement = typeof defaultElement;\n\nexport type IdentityDisplayProps<C extends ElementType = DefaultELement> =\n  PolymorphicComponentProps<C, IdentityDisplayBaseProps>;\n\nfunction IdentityDisplayBase<C extends ElementType = DefaultELement>(\n  props: IdentityDisplayProps<C>\n) {\n  const {\n    as,\n    className,\n    profileName,\n    role,\n    profileImage,\n    desc,\n    variant = \"full\",\n    onClick,\n    onTouchStart,\n    alt = \"Alt text missing\",\n    slotProps: _slotProps,\n    ref,\n    ...restProps\n  } = props;\n  const slotProps = {\n    image: _slotProps?.image ?? {},\n    ripple: _slotProps?.ripple ?? {},\n  };\n  const Component = (as ?? defaultElement) as ElementType;\n  const clickable = !!props.onClick || !!props.href;\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n\n  const componentProps = {\n    className: cn(\n      className,\n      styles.root,\n      styles[variant],\n      clickable ? styles.clickable : \"\"\n    ),\n    onTouchStart: eventWithRipple(createRipple, onTouchStart),\n    onClick: eventWithRipple(createRipple, onClick),\n\n    ref,\n    ...(Component === \"a\" ? { href: props.href } : {}),\n    ...restProps,\n  };\n\n  return (\n    <Component {...componentProps}>\n      {clickable && rippleElements}\n      <div className={styles.main}>\n        {profileImage && (\n          <div\n            {...slotProps.image}\n            className={cn(styles.image, slotProps.image?.className)}\n          >\n            <img\n              src={profileImage}\n              alt={typeof profileName == \"string\" ? profileName : alt}\n              width={48}\n              height={48}\n            />\n          </div>\n        )}\n        <div className={styles.details}>\n          {profileName &&\n            (typeof profileName == \"string\" ? (\n              <h4>{profileName}</h4>\n            ) : (\n              profileName\n            ))}\n          {role && (typeof role == \"string\" ? <p>{role}</p> : role)}\n        </div>\n      </div>\n      {desc &&\n        (typeof desc == \"string\" ? (\n          <p className={styles.desc}>{desc}</p>\n        ) : (\n          desc\n        ))}\n    </Component>\n  );\n}\nIdentityDisplayBase.displayName = \"IdentityDisplay\";\n\n// Type assertion to make it polymorphic\nexport const IdentityDisplay = IdentityDisplayBase as PolymorphicComponentType<\n  IdentityDisplayBaseProps,\n  DefaultELement\n>;\n"],"names":["IdentityDisplayBase","props","as","className","profileName","role","profileImage","desc","variant","onClick","onTouchStart","alt","slotProps","_slotProps","ref","restProps","image","ripple","Component","clickable","href","rippleElements","createRipple","useRipple","componentProps","cn","styles","root","eventWithRipple","_jsxs","main","children","_jsx","src","width","height","details","displayName","IdentityDisplay"],"mappings":"8QAmCA,SAASA,EACPC,GAEA,MAAMC,GACJA,EAAEC,UACFA,EAASC,YACTA,EAAWC,KACXA,EAAIC,aACJA,EAAYC,KACZA,EAAIC,QACJA,EAAU,OAAMC,QAChBA,EAAOC,aACPA,EAAYC,IACZA,EAAM,mBACNC,UAAWC,EAAUC,IACrBA,KACGC,GACDd,EACEW,EAAY,CAChBI,MAAOH,GAAYG,OAAS,CAAA,EAC5BC,OAAQJ,GAAYI,QAAU,CAAA,GAE1BC,EAAahB,GA5BE,MA6BfiB,IAAclB,EAAMQ,WAAaR,EAAMmB,MACvCC,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUX,EAAUK,QAEvDO,EAAiB,CACrBrB,UAAWsB,EACTtB,EACAuB,EAAOC,KACPD,EAAOlB,GACPW,EAAYO,EAAOP,UAAY,IAEjCT,aAAckB,EAAgBN,EAAcZ,GAC5CD,QAASmB,EAAgBN,EAAcb,GAEvCK,SACkB,MAAdI,EAAoB,CAAEE,KAAMnB,EAAMmB,MAAS,MAC5CL,GAGL,OACEc,EAACX,EAAS,IAAKM,YACZL,GAAaE,EACdQ,SAAK1B,UAAWuB,EAAOI,KAAIC,SAAA,CACxBzB,GACC0B,YACMpB,EAAUI,MACdb,UAAWsB,EAAGC,EAAOV,MAAOJ,EAAUI,OAAOb,WAAU4B,SAEvDC,EAAA,MAAA,CACEC,IAAK3B,EACLK,IAA2B,iBAAfP,EAA0BA,EAAcO,EACpDuB,MAAO,GACPC,OAAQ,OAIdN,SAAK1B,UAAWuB,EAAOU,kBACpBhC,IACwB,iBAAfA,EACN4B,EAAA,KAAA,CAAAD,SAAK3B,IAAiB,GAIzBC,IAAwB,iBAARA,EAAmB2B,EAAA,IAAA,CAAAD,SAAI1B,IAAYA,SAGvDE,IACiB,iBAARA,EACNyB,EAAA,IAAA,CAAG7B,UAAWuB,EAAOnB,KAAIwB,SAAGxB,IAAS,KAM/C,CACAP,EAAoBqC,YAAc,kBAG3B,MAAMC,EAAkBtC"}
+{"version":3,"file":"IdentityDisplay.js","sources":["../../../src/Display/IdentityDisplay/IdentityDisplay.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  PolymorphicComponentProps,\n  PolymorphicComponentType,\n} from \"@studiocubics/types\";\nimport { type ElementType, type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./IdentityDisplay.module.css\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\n\ninterface IdentityDisplayBaseProps {\n  profileName: ReactNode;\n  role?: ReactNode;\n  desc?: ReactNode;\n  alt?: string;\n  profileImage?: string | null;\n  variant?: \"compact\" | \"full\" | \"square\" | \"image-only\";\n  href?: ComponentProps<\"a\">[\"href\"];\n  slotProps?: {\n    image?: ComponentProps<\"div\">;\n    ripple?: UseRippleProps;\n  };\n}\n\nconst defaultElement = \"div\";\ntype DefaultELement = typeof defaultElement;\n\nexport type IdentityDisplayProps<C extends ElementType = DefaultELement> =\n  PolymorphicComponentProps<C, IdentityDisplayBaseProps>;\n\nfunction IdentityDisplayBase<C extends ElementType = DefaultELement>(\n  props: IdentityDisplayProps<C>,\n) {\n  const {\n    as,\n    className,\n    profileName,\n    role,\n    profileImage,\n    desc,\n    variant = \"full\",\n    onClick,\n    onTouchStart,\n    alt = \"Alt text missing\",\n    slotProps: _slotProps,\n    ref,\n    ...restProps\n  } = props;\n  const slotProps = {\n    image: _slotProps?.image ?? {},\n    ripple: _slotProps?.ripple ?? {},\n  };\n  const Component = (as ?? defaultElement) as ElementType;\n  const clickable = !!props.onClick || !!props.href;\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n\n  const componentProps = {\n    className: cn(\n      className,\n      styles.root,\n      styles[variant],\n      clickable ? styles.clickable : \"\",\n    ),\n    onTouchStart: eventWithRipple(createRipple, onTouchStart),\n    onClick: eventWithRipple(createRipple, onClick),\n\n    ref,\n    ...(Component === \"a\" ? { href: props.href } : {}),\n    ...restProps,\n  };\n\n  return (\n    <Component {...componentProps}>\n      {clickable && rippleElements}\n      <div className={styles.main}>\n        {profileImage && (\n          <div\n            {...slotProps.image}\n            className={cn(styles.image, slotProps.image?.className)}\n          >\n            <img\n              src={profileImage}\n              alt={typeof profileName == \"string\" ? profileName : alt}\n              width={48}\n              height={48}\n            />\n          </div>\n        )}\n        <div className={styles.details}>\n          {profileName &&\n            (typeof profileName == \"string\" ? (\n              <h4>{profileName}</h4>\n            ) : (\n              profileName\n            ))}\n          {role && (typeof role == \"string\" ? <p>{role}</p> : role)}\n        </div>\n      </div>\n      {desc &&\n        (typeof desc == \"string\" ? (\n          <p className={styles.desc}>{desc}</p>\n        ) : (\n          desc\n        ))}\n    </Component>\n  );\n}\nIdentityDisplayBase.displayName = \"IdentityDisplay\";\n\n// Type assertion to make it polymorphic\nexport const IdentityDisplay = IdentityDisplayBase as PolymorphicComponentType<\n  IdentityDisplayBaseProps,\n  DefaultELement\n>;\n"],"names":["IdentityDisplayBase","props","as","className","profileName","role","profileImage","desc","variant","onClick","onTouchStart","alt","slotProps","_slotProps","ref","restProps","image","ripple","Component","clickable","href","rippleElements","createRipple","useRipple","componentProps","cn","styles","root","eventWithRipple","_jsxs","main","children","_jsx","src","width","height","details","displayName","IdentityDisplay"],"mappings":"kPAmCA,SAASA,EACPC,GAEA,MAAMC,GACJA,EAAEC,UACFA,EAASC,YACTA,EAAWC,KACXA,EAAIC,aACJA,EAAYC,KACZA,EAAIC,QACJA,EAAU,OAAMC,QAChBA,EAAOC,aACPA,EAAYC,IACZA,EAAM,mBACNC,UAAWC,EAAUC,IACrBA,KACGC,GACDd,EACEW,EAAY,CAChBI,MAAOH,GAAYG,OAAS,CAAA,EAC5BC,OAAQJ,GAAYI,QAAU,CAAA,GAE1BC,EAAahB,GA5BE,MA6BfiB,IAAclB,EAAMQ,WAAaR,EAAMmB,MACvCC,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUX,EAAUK,QAEvDO,EAAiB,CACrBrB,UAAWsB,EACTtB,EACAuB,EAAOC,KACPD,EAAOlB,GACPW,EAAYO,EAAOP,UAAY,IAEjCT,aAAckB,EAAgBN,EAAcZ,GAC5CD,QAASmB,EAAgBN,EAAcb,GAEvCK,SACkB,MAAdI,EAAoB,CAAEE,KAAMnB,EAAMmB,MAAS,MAC5CL,GAGL,OACEc,EAACX,EAAS,IAAKM,YACZL,GAAaE,EACdQ,SAAK1B,UAAWuB,EAAOI,KAAIC,SAAA,CACxBzB,GACC0B,YACMpB,EAAUI,MACdb,UAAWsB,EAAGC,EAAOV,MAAOJ,EAAUI,OAAOb,WAAU4B,SAEvDC,EAAA,MAAA,CACEC,IAAK3B,EACLK,IAA2B,iBAAfP,EAA0BA,EAAcO,EACpDuB,MAAO,GACPC,OAAQ,OAIdN,SAAK1B,UAAWuB,EAAOU,kBACpBhC,IACwB,iBAAfA,EACN4B,EAAA,KAAA,CAAAD,SAAK3B,IAAiB,GAIzBC,IAAwB,iBAARA,EAAmB2B,EAAA,IAAA,CAAAD,SAAI1B,IAAYA,SAGvDE,IACiB,iBAARA,EACNyB,EAAA,IAAA,CAAG7B,UAAWuB,EAAOnB,KAAIwB,SAAGxB,IAAS,KAM/C,CACAP,EAAoBqC,YAAc,kBAG3B,MAAMC,EAAkBtC"}

package/dist/Display/List/List.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps, type ElementType, type ReactNode } from "react";
-import { type UseRippleProps } from "../../Misc/_index";
-import { type GlassCardProps } from "../../Cards/_index";
+import { type UseRippleProps } from "../../Misc/Ripple/Ripple";
+import { type GlassCardProps } from "../../Cards/GlassCard/GlassCard";
 import type { SetState } from "@studiocubics/types";
 interface ListContextProps {
     activeListItem: HTMLLIElement | null;

package/dist/Display/List/List.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{createContext as n,useContext as o,useState as s,useRef as c,useEffect as l}from"react";import i from"./List.module.css.js";import{cn as a,mergeRefs as d}from"@studiocubics/utils";import{useRipple as m,eventWithRipple as p}from"../../Misc/Ripple/Ripple.js";import{useDisclosure as u}from"@studiocubics/hooks";import"../../Cards/Card/Card.js";import"../../Cards/CollectionItemCard/CollectionItemCard.js";import"../../Inputs/Button/Button.js";import"react-dom";import{GlassCard as h}from"../../Cards/GlassCard/GlassCard.js";const f=n(null);function C(){const e=o(f);if(!e)throw new Error("Components must be wrapped in <List/>");return e}function I(t){const{children:n,ordered:o=!1,secondary:d=!1,listData:m=[],slotProps:p={},className:u,renderMarker:C=!0,listItemProps:I={}}=t,[w,N]=s(null),k=c(null),v=c(null),b=a(i.root,u,d?i.secondary:""),y=m.length?m.map((r,t)=>e(g,{...I,...r},t)):n,L=C?e(h,{...p.marker,ref:k,className:a(i.marker,p.marker?.className)}):null,j=o?"ol":"ul";return l(()=>{if(!v.current||!k.current||!w)return;const e=()=>{if(!v.current||!k.current||!w)return;const e=k.current,r=w.getBoundingClientRect(),t=v.current.getBoundingClientRect(),n=v.current.scrollLeft,o=v.current.scrollTop;e.style.display="block",e.style.width=`${r.width}px`,e.style.height=`${r.height}px`,e.style.left=`${r.left-t.left+n}px`,e.style.top=`${r.top-t.top+o}px`};e();const r=v.current,t=new ResizeObserver(e);return t.observe(r),()=>{t.disconnect()}},[w]),e(f.Provider,{value:{activeListItem:w,setActiveListItem:N},children:r(j,{ref:v,className:b,children:[y,L]})})}function w(){return e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-down-icon lucide-chevron-down",children:e("path",{d:"m6 9 6 6 6-6"})})}function g(n){const{className:o,children:s,onTouchStart:h,onClick:f,shortened:N=!1,shortenedIcon:k="start",selected:v=!1,dropDownIcon:b=e(w,{}),color:y,startIcon:L,endIcon:j,disabled:x,childNodes:R=[],href:B,LinkComponent:D="a",slotProps:P,ref:T,...$}=n,S=P??{},{setActiveListItem:A}=C(),E=c(null),{rippleElements:G,createRipple:M}=m(S.ripple),{open:z,handleToggle:O}=u(),W=!(x||!B&&!f&&(N||!R.length)),q={className:a(o,i.listItem,N?i.shortened:"",v?i.selected:"",W?i.clickable:"",x?i.disabled:""),onTouchStart:x?void 0:p(M,h,O),onClick:x?void 0:p(M,f,O),"data-color":y,ref:d(T,E),...$},F=r(t,{children:[W&&G,L&&e("span",{...S.startIcon,className:a(i.iconContainer,"start"==k?i.primaryIcon:"",S.startIcon?.className),children:L}),e("span",{...S.content,className:a(i.content,S.content?.className),children:s}),j&&e("span",{...S.endIcon,className:a(i.iconContainer,"end"==k?i.primaryIcon:"",S.endIcon?.className),children:j}),!!R.length&&e("span",{...S.dropDownIcon,className:a(i.iconContainer,i.dropDownIcon,S.dropDownIcon?.className,z?i.openSublist:""),children:b})]});return l(()=>{E.current&&v&&A(E.current)},[v]),r(t,{children:[B?e(D,{href:B,disabled:x,...q,children:F}):e("li",{...q,children:F}),!!R.length&&!N&&z&&e(I,{secondary:!0,children:R.map((r,t)=>e(g,{...r},t))})]})}export{I as List,g as ListItem,C as useList};
+"use client";import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import{createContext as t,useContext as o,useState as s,useRef as c,useEffect as l}from"react";import i from"./List.module.css.js";import{cn as a,mergeRefs as d}from"@studiocubics/utils";import{useRipple as p,eventWithRipple as u}from"../../Misc/Ripple/Ripple.js";import{useDisclosure as m}from"@studiocubics/hooks";import{GlassCard as h}from"../../Cards/GlassCard/GlassCard.js";const f=t(null);function w(){const e=o(f);if(!e)throw new Error("Components must be wrapped in <List/>");return e}function I(n){const{children:t,ordered:o=!1,secondary:d=!1,listData:p=[],slotProps:u={},className:m,renderMarker:w=!0,listItemProps:I={}}=n,[g,k]=s(null),v=c(null),C=c(null),b=a(i.root,m,d?i.secondary:""),y=p.length?p.map((r,n)=>e(N,{...I,...r},n)):t,L=w?e(h,{...u.marker,ref:v,className:a(i.marker,u.marker?.className)}):null,x=o?"ol":"ul";return l(()=>{if(!C.current||!v.current||!g)return;const e=()=>{if(!C.current||!v.current||!g)return;const e=v.current,r=g.getBoundingClientRect(),n=C.current.getBoundingClientRect(),t=C.current.scrollLeft,o=C.current.scrollTop;e.style.display="block",e.style.width=`${r.width}px`,e.style.height=`${r.height}px`,e.style.left=`${r.left-n.left+t}px`,e.style.top=`${r.top-n.top+o}px`};e();const r=C.current,n=new ResizeObserver(e);return n.observe(r),()=>{n.disconnect()}},[g]),e(f.Provider,{value:{activeListItem:g,setActiveListItem:k},children:r(x,{ref:C,className:b,children:[y,L]})})}function g(){return e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-chevron-down-icon lucide-chevron-down",children:e("path",{d:"m6 9 6 6 6-6"})})}function N(t){const{className:o,children:s,onTouchStart:h,onClick:f,shortened:k=!1,shortenedIcon:v="start",selected:C=!1,dropDownIcon:b=e(g,{}),color:y,startIcon:L,endIcon:x,disabled:R,childNodes:j=[],href:D,LinkComponent:P="a",slotProps:T,ref:$,...B}=t,S=T??{},{setActiveListItem:A}=w(),E=c(null),{rippleElements:G,createRipple:M}=p(S.ripple),{open:z,handleToggle:O}=m(),W=!(R||!D&&!f&&(k||!j.length)),q={className:a(o,i.listItem,k?i.shortened:"",C?i.selected:"",W?i.clickable:"",R?i.disabled:""),onTouchStart:R?void 0:u(M,h,O),onClick:R?void 0:u(M,f,O),"data-color":y,ref:d($,E),...B},F=r(n,{children:[W&&G,L&&e("span",{...S.startIcon,className:a(i.iconContainer,"start"==v?i.primaryIcon:"",S.startIcon?.className),children:L}),e("span",{...S.content,className:a(i.content,S.content?.className),children:s}),x&&e("span",{...S.endIcon,className:a(i.iconContainer,"end"==v?i.primaryIcon:"",S.endIcon?.className),children:x}),!!j.length&&e("span",{...S.dropDownIcon,className:a(i.iconContainer,i.dropDownIcon,S.dropDownIcon?.className,z?i.openSublist:""),children:b})]});return l(()=>{E.current&&C&&A(E.current)},[C]),r(n,{children:[D?e(P,{href:D,disabled:R,...q,children:F}):e("li",{...q,children:F}),!!j.length&&!k&&z&&e(I,{secondary:!0,children:j.map((r,n)=>e(N,{...r},n))})]})}export{I as List,N as ListItem,w as useList};
 //# sourceMappingURL=List.js.map

package/dist/Display/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/Display/List/List.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentProps,\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styles from \"./List.module.css\";\nimport { cn, mergeRefs } from \"@studiocubics/utils\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/_index\";\nimport { useDisclosure } from \"@studiocubics/hooks\";\nimport { GlassCard, type GlassCardProps } from \"../../Cards/_index\";\nimport type { SetState } from \"@studiocubics/types\";\n\ninterface ListContextProps {\n  activeListItem: HTMLLIElement | null;\n  setActiveListItem: SetState<HTMLLIElement | null>;\n}\nexport type ListProps = {\n  ordered?: boolean;\n  className?: string;\n  secondary?: boolean;\n  renderMarker?: boolean;\n\n  slotProps?: {\n    marker?: GlassCardProps;\n  };\n} & (\n  | {\n      listData?: ListItemProps[];\n      children?: undefined;\n      listItemProps?: ListItemProps;\n    }\n  | {\n      children?: ReactNode;\n      listData?: undefined;\n      listItemProps?: undefined;\n    }\n);\n\nconst ListContext = createContext<ListContextProps | null>(null);\n\nexport function useList() {\n  const c = useContext(ListContext);\n  if (!c) throw new Error(\"Components must be wrapped in <List/>\");\n  return c;\n}\n\nexport function List(props: ListProps) {\n  const {\n    children,\n    ordered = false,\n    secondary = false,\n    listData = [],\n    slotProps = {},\n    className,\n    renderMarker = true,\n    listItemProps = {},\n  } = props;\n  const [activeListItem, setActiveListItem] =\n    useState<ListContextProps[\"activeListItem\"]>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useRef<HTMLOListElement>(null);\n\n  const rootClass = cn(\n    styles.root,\n    className,\n    secondary ? styles.secondary : \"\",\n  );\n  const body = listData.length\n    ? listData.map((ld, i) => <ListItem key={i} {...listItemProps} {...ld} />)\n    : children;\n\n  const marker = renderMarker ? (\n    <GlassCard\n      {...slotProps.marker}\n      ref={markerRef}\n      className={cn(styles.marker, slotProps.marker?.className)}\n    />\n  ) : null;\n  const Component = ordered ? \"ol\" : \"ul\";\n\n  useEffect(() => {\n    if (!rootRef.current || !markerRef.current || !activeListItem) return;\n\n    const updateMarkerPosition = () => {\n      if (!rootRef.current || !markerRef.current || !activeListItem) return;\n\n      const marker = markerRef.current;\n      const tabRect = activeListItem.getBoundingClientRect();\n      const rootRect = rootRef.current.getBoundingClientRect();\n\n      // Account for scroll offset\n      const scrollLeft = rootRef.current.scrollLeft;\n      const scrollTop = rootRef.current.scrollTop;\n\n      marker.style.display = \"block\";\n      marker.style.width = `${tabRect.width}px`;\n      marker.style.height = `${tabRect.height}px`;\n      marker.style.left = `${tabRect.left - rootRect.left + scrollLeft}px`;\n      marker.style.top = `${tabRect.top - rootRect.top + scrollTop}px`;\n    };\n\n    updateMarkerPosition();\n\n    const container = rootRef.current;\n\n    // Update marker position when container resizes\n    const resizeObserver = new ResizeObserver(updateMarkerPosition);\n    resizeObserver.observe(container);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [activeListItem]);\n  return (\n    <ListContext.Provider value={{ activeListItem, setActiveListItem }}>\n      <Component ref={rootRef} className={rootClass}>\n        {body}\n        {marker}\n      </Component>\n    </ListContext.Provider>\n  );\n}\n\nexport interface ListItemProps extends ComponentProps<\"li\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  dropDownIcon?: ReactNode;\n  selected?: boolean;\n  shortened?: boolean;\n  shortenedIcon?: \"start\" | \"end\";\n  href?: ComponentProps<\"a\">[\"href\"];\n  disabled?: boolean;\n  color?: \"primary\" | \"secondary\" | \"error\";\n  slotProps?: {\n    ripple?: UseRippleProps;\n    content?: ComponentProps<\"span\">;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    dropDownIcon?: ComponentProps<\"span\">;\n    linkComponent?: ComponentProps<\"a\">;\n  };\n  childNodes?: Array<ListItemProps>;\n  LinkComponent?: ElementType<ComponentProps<any>>;\n}\nfunction ChevronDown() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"lucide lucide-chevron-down-icon lucide-chevron-down\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  );\n}\n// Create the base component with forwardRef\nexport function ListItem(props: ListItemProps) {\n  const {\n    className,\n    children,\n    onTouchStart,\n    onClick,\n    shortened = false,\n    shortenedIcon = \"start\",\n    selected = false,\n    dropDownIcon = <ChevronDown />,\n    color,\n    startIcon,\n    endIcon,\n    disabled,\n    childNodes = [],\n    href,\n    LinkComponent = \"a\",\n    slotProps: _slotProps,\n    ref,\n    ...restProps\n  } = props;\n  const slotProps: NonNullable<ListItemProps[\"slotProps\"]> = _slotProps ?? {};\n  const { setActiveListItem } = useList();\n  const listItemRef = useRef<HTMLLIElement>(null);\n\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const { open, handleToggle } = useDisclosure();\n\n  const clickable =\n    !disabled && (!!href || !!onClick || (!shortened && !!childNodes.length));\n\n  const componentProps = {\n    className: cn(\n      className,\n      styles.listItem,\n      shortened ? styles.shortened : \"\",\n      selected ? styles.selected : \"\",\n      clickable ? styles.clickable : \"\",\n      disabled ? styles.disabled : \"\",\n    ),\n    onTouchStart: disabled\n      ? undefined\n      : eventWithRipple(createRipple, onTouchStart, handleToggle),\n    onClick: disabled\n      ? undefined\n      : eventWithRipple(createRipple, onClick, handleToggle),\n    \"data-color\": color,\n    ref: mergeRefs(ref, listItemRef),\n    ...restProps,\n  };\n\n  const body = (\n    <>\n      {clickable && rippleElements}\n      {startIcon && (\n        <span\n          {...slotProps.startIcon}\n          className={cn(\n            styles.iconContainer,\n            shortenedIcon == \"start\" ? styles.primaryIcon : \"\",\n            slotProps.startIcon?.className,\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      <span\n        {...slotProps.content}\n        className={cn(styles.content, slotProps.content?.className)}\n      >\n        {children}\n      </span>\n      {endIcon && (\n        <span\n          {...slotProps.endIcon}\n          className={cn(\n            styles.iconContainer,\n            shortenedIcon == \"end\" ? styles.primaryIcon : \"\",\n            slotProps.endIcon?.className,\n          )}\n        >\n          {endIcon}\n        </span>\n      )}\n      {!!childNodes.length && (\n        <span\n          {...slotProps.dropDownIcon}\n          className={cn(\n            styles.iconContainer,\n            styles.dropDownIcon,\n            slotProps.dropDownIcon?.className,\n            open ? styles.openSublist : \"\",\n          )}\n        >\n          {dropDownIcon}\n        </span>\n      )}\n    </>\n  );\n\n  useEffect(() => {\n    if (!listItemRef.current) return;\n    if (selected) setActiveListItem(listItemRef.current);\n  }, [selected]);\n\n  return (\n    <>\n      {href ? (\n        <LinkComponent href={href} disabled={disabled} {...componentProps}>\n          {body}\n        </LinkComponent>\n      ) : (\n        <li {...componentProps}>{body}</li>\n      )}\n      {!!childNodes.length && !shortened && open && (\n        <List secondary>\n          {childNodes.map((c, i) => (\n            <ListItem key={i} {...c} />\n          ))}\n        </List>\n      )}\n    </>\n  );\n}\n"],"names":["ListContext","createContext","useList","c","useContext","Error","List","props","children","ordered","secondary","listData","slotProps","className","renderMarker","listItemProps","activeListItem","setActiveListItem","useState","markerRef","useRef","rootRef","rootClass","cn","styles","root","body","length","map","ld","i","_jsx","ListItem","marker","GlassCard","ref","Component","useEffect","current","updateMarkerPosition","tabRect","getBoundingClientRect","rootRect","scrollLeft","scrollTop","style","display","width","height","left","top","container","resizeObserver","ResizeObserver","observe","disconnect","Provider","value","_jsxs","ChevronDown","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","onTouchStart","onClick","shortened","shortenedIcon","selected","dropDownIcon","color","startIcon","endIcon","disabled","childNodes","href","LinkComponent","_slotProps","restProps","listItemRef","rippleElements","createRipple","useRipple","ripple","open","handleToggle","useDisclosure","clickable","componentProps","listItem","undefined","eventWithRipple","mergeRefs","_Fragment","iconContainer","primaryIcon","content","openSublist"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../src/Display/List/List.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentProps,\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styles from \"./List.module.css\";\nimport { cn, mergeRefs } from \"@studiocubics/utils\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport { useDisclosure } from \"@studiocubics/hooks\";\nimport { GlassCard, type GlassCardProps } from \"../../Cards/GlassCard/GlassCard\";\nimport type { SetState } from \"@studiocubics/types\";\n\ninterface ListContextProps {\n  activeListItem: HTMLLIElement | null;\n  setActiveListItem: SetState<HTMLLIElement | null>;\n}\nexport type ListProps = {\n  ordered?: boolean;\n  className?: string;\n  secondary?: boolean;\n  renderMarker?: boolean;\n\n  slotProps?: {\n    marker?: GlassCardProps;\n  };\n} & (\n  | {\n      listData?: ListItemProps[];\n      children?: undefined;\n      listItemProps?: ListItemProps;\n    }\n  | {\n      children?: ReactNode;\n      listData?: undefined;\n      listItemProps?: undefined;\n    }\n);\n\nconst ListContext = createContext<ListContextProps | null>(null);\n\nexport function useList() {\n  const c = useContext(ListContext);\n  if (!c) throw new Error(\"Components must be wrapped in <List/>\");\n  return c;\n}\n\nexport function List(props: ListProps) {\n  const {\n    children,\n    ordered = false,\n    secondary = false,\n    listData = [],\n    slotProps = {},\n    className,\n    renderMarker = true,\n    listItemProps = {},\n  } = props;\n  const [activeListItem, setActiveListItem] =\n    useState<ListContextProps[\"activeListItem\"]>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useRef<HTMLOListElement>(null);\n\n  const rootClass = cn(\n    styles.root,\n    className,\n    secondary ? styles.secondary : \"\",\n  );\n  const body = listData.length\n    ? listData.map((ld, i) => <ListItem key={i} {...listItemProps} {...ld} />)\n    : children;\n\n  const marker = renderMarker ? (\n    <GlassCard\n      {...slotProps.marker}\n      ref={markerRef}\n      className={cn(styles.marker, slotProps.marker?.className)}\n    />\n  ) : null;\n  const Component = ordered ? \"ol\" : \"ul\";\n\n  useEffect(() => {\n    if (!rootRef.current || !markerRef.current || !activeListItem) return;\n\n    const updateMarkerPosition = () => {\n      if (!rootRef.current || !markerRef.current || !activeListItem) return;\n\n      const marker = markerRef.current;\n      const tabRect = activeListItem.getBoundingClientRect();\n      const rootRect = rootRef.current.getBoundingClientRect();\n\n      // Account for scroll offset\n      const scrollLeft = rootRef.current.scrollLeft;\n      const scrollTop = rootRef.current.scrollTop;\n\n      marker.style.display = \"block\";\n      marker.style.width = `${tabRect.width}px`;\n      marker.style.height = `${tabRect.height}px`;\n      marker.style.left = `${tabRect.left - rootRect.left + scrollLeft}px`;\n      marker.style.top = `${tabRect.top - rootRect.top + scrollTop}px`;\n    };\n\n    updateMarkerPosition();\n\n    const container = rootRef.current;\n\n    // Update marker position when container resizes\n    const resizeObserver = new ResizeObserver(updateMarkerPosition);\n    resizeObserver.observe(container);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [activeListItem]);\n  return (\n    <ListContext.Provider value={{ activeListItem, setActiveListItem }}>\n      <Component ref={rootRef} className={rootClass}>\n        {body}\n        {marker}\n      </Component>\n    </ListContext.Provider>\n  );\n}\n\nexport interface ListItemProps extends ComponentProps<\"li\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  dropDownIcon?: ReactNode;\n  selected?: boolean;\n  shortened?: boolean;\n  shortenedIcon?: \"start\" | \"end\";\n  href?: ComponentProps<\"a\">[\"href\"];\n  disabled?: boolean;\n  color?: \"primary\" | \"secondary\" | \"error\";\n  slotProps?: {\n    ripple?: UseRippleProps;\n    content?: ComponentProps<\"span\">;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    dropDownIcon?: ComponentProps<\"span\">;\n    linkComponent?: ComponentProps<\"a\">;\n  };\n  childNodes?: Array<ListItemProps>;\n  LinkComponent?: ElementType<ComponentProps<any>>;\n}\nfunction ChevronDown() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"lucide lucide-chevron-down-icon lucide-chevron-down\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  );\n}\n// Create the base component with forwardRef\nexport function ListItem(props: ListItemProps) {\n  const {\n    className,\n    children,\n    onTouchStart,\n    onClick,\n    shortened = false,\n    shortenedIcon = \"start\",\n    selected = false,\n    dropDownIcon = <ChevronDown />,\n    color,\n    startIcon,\n    endIcon,\n    disabled,\n    childNodes = [],\n    href,\n    LinkComponent = \"a\",\n    slotProps: _slotProps,\n    ref,\n    ...restProps\n  } = props;\n  const slotProps: NonNullable<ListItemProps[\"slotProps\"]> = _slotProps ?? {};\n  const { setActiveListItem } = useList();\n  const listItemRef = useRef<HTMLLIElement>(null);\n\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const { open, handleToggle } = useDisclosure();\n\n  const clickable =\n    !disabled && (!!href || !!onClick || (!shortened && !!childNodes.length));\n\n  const componentProps = {\n    className: cn(\n      className,\n      styles.listItem,\n      shortened ? styles.shortened : \"\",\n      selected ? styles.selected : \"\",\n      clickable ? styles.clickable : \"\",\n      disabled ? styles.disabled : \"\",\n    ),\n    onTouchStart: disabled\n      ? undefined\n      : eventWithRipple(createRipple, onTouchStart, handleToggle),\n    onClick: disabled\n      ? undefined\n      : eventWithRipple(createRipple, onClick, handleToggle),\n    \"data-color\": color,\n    ref: mergeRefs(ref, listItemRef),\n    ...restProps,\n  };\n\n  const body = (\n    <>\n      {clickable && rippleElements}\n      {startIcon && (\n        <span\n          {...slotProps.startIcon}\n          className={cn(\n            styles.iconContainer,\n            shortenedIcon == \"start\" ? styles.primaryIcon : \"\",\n            slotProps.startIcon?.className,\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      <span\n        {...slotProps.content}\n        className={cn(styles.content, slotProps.content?.className)}\n      >\n        {children}\n      </span>\n      {endIcon && (\n        <span\n          {...slotProps.endIcon}\n          className={cn(\n            styles.iconContainer,\n            shortenedIcon == \"end\" ? styles.primaryIcon : \"\",\n            slotProps.endIcon?.className,\n          )}\n        >\n          {endIcon}\n        </span>\n      )}\n      {!!childNodes.length && (\n        <span\n          {...slotProps.dropDownIcon}\n          className={cn(\n            styles.iconContainer,\n            styles.dropDownIcon,\n            slotProps.dropDownIcon?.className,\n            open ? styles.openSublist : \"\",\n          )}\n        >\n          {dropDownIcon}\n        </span>\n      )}\n    </>\n  );\n\n  useEffect(() => {\n    if (!listItemRef.current) return;\n    if (selected) setActiveListItem(listItemRef.current);\n  }, [selected]);\n\n  return (\n    <>\n      {href ? (\n        <LinkComponent href={href} disabled={disabled} {...componentProps}>\n          {body}\n        </LinkComponent>\n      ) : (\n        <li {...componentProps}>{body}</li>\n      )}\n      {!!childNodes.length && !shortened && open && (\n        <List secondary>\n          {childNodes.map((c, i) => (\n            <ListItem key={i} {...c} />\n          ))}\n        </List>\n      )}\n    </>\n  );\n}\n"],"names":["ListContext","createContext","useList","c","useContext","Error","List","props","children","ordered","secondary","listData","slotProps","className","renderMarker","listItemProps","activeListItem","setActiveListItem","useState","markerRef","useRef","rootRef","rootClass","cn","styles","root","body","length","map","ld","i","_jsx","ListItem","marker","GlassCard","ref","Component","useEffect","current","updateMarkerPosition","tabRect","getBoundingClientRect","rootRect","scrollLeft","scrollTop","style","display","width","height","left","top","container","resizeObserver","ResizeObserver","observe","disconnect","Provider","value","_jsxs","ChevronDown","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","onTouchStart","onClick","shortened","shortenedIcon","selected","dropDownIcon","color","startIcon","endIcon","disabled","childNodes","href","LinkComponent","_slotProps","restProps","listItemRef","rippleElements","createRipple","useRipple","ripple","open","handleToggle","useDisclosure","clickable","componentProps","listItem","undefined","eventWithRipple","mergeRefs","_Fragment","iconContainer","primaryIcon","content","openSublist"],"mappings":"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"}

package/dist/Display/Toast/Toaster.d.ts

@@ -1,6 +1,4 @@
 import type { PositionStringEdge } from "@studiocubics/types";
-import { type ComponentProps } from "react";
-export declare function CloseIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
 export interface ToasterProps {
     defaultPosition?: PositionStringEdge;
     /**

package/dist/Display/Toast/Toaster.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as s,useEffect as i}from"react";import"../../Cards/Card/Card.js";import"../../Cards/CollectionItemCard/CollectionItemCard.js";import"@studiocubics/hooks";import{Button as r}from"../../Inputs/Button/Button.js";import"react-dom";import"@studiocubics/utils";import{GlassCard as e}from"../../Cards/GlassCard/GlassCard.js";import"../../Inputs/Checkbox/CheckboxProvider.js";import"../InputErrors/InputErrors.js";import"../Accordion/Accordion.js";import"../Chip/Chip.js";import"../IdentityDisplay/IdentityDisplay.js";import"../Kbd/buttonList.js";import"../List/List.js";import{subscribe as n,dismiss as a,addDismissInterceptor as d}from"./toast.js";import p from"./Toaster.module.css.js";function m(s){const{width:i=24,height:r=i,...e}=s;return o("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:i,height:r,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]})}function c(o){const{defaultPosition:r="top right",peekGap:e=12,exitDuration:a=200,maxToastCount:m=5}=o,[c,l]=s([]),[h,C]=s(new Set);return i(()=>n(l,m),[]),i(()=>{d((t,o)=>{C(s=>{if(s.has(t))return s;const i=new Set(s).add(t);return setTimeout(()=>{o(),C(o=>{const s=new Set(o);return s.delete(t),s})},a),i})})},[a]),t("div",{className:p.root,children:c.map((o,s)=>t(u,{toast:o,defaultPosition:r,dismissing:h,peekGap:e,toasts:c,index:s},o.id))})}function u({toast:i,defaultPosition:n,dismissing:d,peekGap:c,toasts:u,index:l}){const[h,C]=(i.position??n).split(" "),[j,f]=s(!1);return console.log({toast:i}),o(e,{className:p.toast,"data-pos-y":h,"data-pos-x":C,"data-color":i.color,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),"data-dismissing":d.has(i.id)?"":void 0,style:{"--peek":l*c+"px",zIndex:j?u.length+1:void 0},children:[t("span",{children:i.message}),t(r,{size:"sm",square:!0,onClick:()=>a(i.id),children:t(m,{})})]},i.id)}export{m as CloseIcon,c as Toaster};
+"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as e,useEffect as s}from"react";import{GlassCard as i}from"../../Cards/GlassCard/GlassCard.js";import{Button as n}from"../../Inputs/Button/Button.js";import{subscribe as r,dismiss as a,addDismissInterceptor as d}from"./toast.js";import l from"./Toaster.module.css.js";function p(e){const{width:s=24,height:i=s,...n}=e;return o("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...n,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:s,height:i,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]})}function u(o){const{defaultPosition:i="top right",peekGap:n=12,exitDuration:a=200,maxToastCount:p=5}=o,[u,c]=e([]),[h,f]=e(new Set);return s(()=>r(c,p),[]),s(()=>{d((t,o)=>{f(e=>{if(e.has(t))return e;const s=new Set(e).add(t);return setTimeout(()=>{o(),f(o=>{const e=new Set(o);return e.delete(t),e})},a),s})})},[a]),t("div",{className:l.root,children:u.map((o,e)=>t(m,{toast:o,defaultPosition:i,dismissing:h,peekGap:n,toasts:u,index:e},o.id))})}function m({toast:s,defaultPosition:r,dismissing:d,peekGap:u,toasts:m,index:c}){const[h,f]=(s.position??r).split(" "),[g,x]=e(!1);return console.log({toast:s}),o(i,{className:l.toast,"data-pos-y":h,"data-pos-x":f,"data-color":s.color,onMouseEnter:()=>x(!0),onMouseLeave:()=>x(!1),"data-dismissing":d.has(s.id)?"":void 0,style:{"--peek":c*u+"px",zIndex:g?m.length+1:void 0},children:[t("span",{children:s.message}),t(n,{size:"sm",square:!0,onClick:()=>a(s.id),children:t(p,{})})]},s.id)}export{u as Toaster};
 //# sourceMappingURL=Toaster.js.map

package/dist/Display/Toast/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../src/Display/Toast/Toaster.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PositionStringEdge } from \"@studiocubics/types\";\nimport {\n  type ComponentProps,\n  useState,\n  useEffect,\n  type CSSProperties,\n} from \"react\";\nimport { GlassCard } from \"../../Cards/_index\";\nimport { Button } from \"../../Inputs/_index\";\nimport { type Toast, addDismissInterceptor, dismiss, subscribe } from \"./toast\";\nimport styles from \"./Toaster.module.css\";\n\nexport function CloseIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport interface ToasterProps {\n  defaultPosition?: PositionStringEdge;\n  /**\n   * Gap between each toast in px\n   * @default 8\n   */\n  peekGap?: number;\n  /**\n   * Duration of exit animation in ms\n   * @default 200\n   */\n  exitDuration?: number;\n  /**\n   * @default 5\n   */\n  maxToastCount?: number;\n}\n\nexport function Toaster(props: ToasterProps) {\n  const {\n    defaultPosition: defaultPosition = \"top right\",\n    peekGap = 12,\n    exitDuration = 200,\n    maxToastCount = 5,\n  } = props;\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  // Track which toast IDs are currently playing their exit animation\n  const [dismissing, setDismissing] = useState<Set<string>>(new Set());\n\n  useEffect(() => {\n    return subscribe(setToasts, maxToastCount);\n  }, []);\n\n  useEffect(() => {\n    // Register interceptor so all dismiss() calls (auto + manual) go through exit animation\n    addDismissInterceptor((id, confirm) => {\n      // No-op if already animating out\n      setDismissing((prev) => {\n        if (prev.has(id)) return prev;\n        const next = new Set(prev).add(id);\n        setTimeout(() => {\n          confirm();\n          setDismissing((p) => {\n            const n = new Set(p);\n            n.delete(id);\n            return n;\n          });\n        }, exitDuration);\n        return next;\n      });\n    });\n  }, [exitDuration]);\n\n  return (\n    <div className={styles.root}>\n      {toasts.map((t, i) => (\n        <ToastComponent\n          key={t.id}\n          toast={t}\n          defaultPosition={defaultPosition}\n          dismissing={dismissing}\n          peekGap={peekGap}\n          toasts={toasts}\n          index={i}\n        />\n      ))}\n    </div>\n  );\n}\nfunction ToastComponent({\n  toast,\n  defaultPosition,\n  dismissing,\n  peekGap,\n  toasts,\n  index,\n}: {\n  toast: Toast;\n  defaultPosition: PositionStringEdge;\n  dismissing: Set<string>;\n  peekGap: number;\n  toasts: Toast[];\n  index: number;\n}) {\n  const [y, x] = (toast.position ?? defaultPosition).split(\" \");\n  const [isHovering, setIsHovering] = useState(false);\n  console.log({ toast });\n\n  return (\n    <GlassCard\n      key={toast.id}\n      className={styles.toast}\n      data-pos-y={y}\n      data-pos-x={x}\n      data-color={toast.color}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      data-dismissing={dismissing.has(toast.id) ? \"\" : undefined}\n      style={\n        {\n          \"--peek\": `${index * peekGap}px`,\n          zIndex: isHovering ? toasts.length + 1 : undefined,\n        } as CSSProperties\n      }\n    >\n      <span>{toast.message}</span>\n      {/* dismiss() goes through interceptor → exit animation → confirmDismiss */}\n      <Button size=\"sm\" square onClick={() => dismiss(toast.id)}>\n        <CloseIcon />\n      </Button>\n    </GlassCard>\n  );\n}\n"],"names":["CloseIcon","props","width","height","rest","_jsxs","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","xmlns","viewBox","children","_jsx","d","Toaster","defaultPosition","peekGap","exitDuration","maxToastCount","toasts","setToasts","useState","dismissing","setDismissing","Set","useEffect","subscribe","addDismissInterceptor","id","confirm","prev","has","next","add","setTimeout","p","n","delete","className","styles","root","map","t","i","ToastComponent","toast","index","y","x","position","split","isHovering","setIsHovering","console","log","GlassCard","color","onMouseEnter","onMouseLeave","undefined","style","zIndex","length","message","Button","size","square","onClick","dismiss"],"mappings":"wvBAcM,SAAUA,EAAUC,GACxB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,EAAA,MAAA,CACEC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,WACXN,EACJO,MAAM,6BACNC,QAAQ,YACRV,MAAOA,EACPC,OAAQA,EAAMU,SAAA,CAEdC,UAAMC,EAAE,eACRD,EAAA,OAAA,CAAMC,EAAE,iBAGd,CAoBM,SAAUC,EAAQf,GACtB,MACEgB,gBAAiBA,EAAkB,YAAWC,QAC9CA,EAAU,GAAEC,aACZA,EAAe,IAAGC,cAClBA,EAAgB,GACdnB,GACGoB,EAAQC,GAAaC,EAAkB,KAEvCC,EAAYC,GAAiBF,EAAsB,IAAIG,KA0B9D,OAxBAC,EAAU,IACDC,EAAUN,EAAWF,GAC3B,IAEHO,EAAU,KAERE,EAAsB,CAACC,EAAIC,KAEzBN,EAAeO,IACb,GAAIA,EAAKC,IAAIH,GAAK,OAAOE,EACzB,MAAME,EAAO,IAAIR,IAAIM,GAAMG,IAAIL,GAS/B,OARAM,WAAW,KACTL,IACAN,EAAeY,IACb,MAAMC,EAAI,IAAIZ,IAAIW,GAElB,OADAC,EAAEC,OAAOT,GACFQ,KAERnB,GACIe,OAGV,CAACf,IAGFL,EAAA,MAAA,CAAK0B,UAAWC,EAAOC,KAAI7B,SACxBQ,EAAOsB,IAAI,CAACC,EAAGC,IACd/B,EAACgC,EAAc,CAEbC,MAAOH,EACP3B,gBAAiBA,EACjBO,WAAYA,EACZN,QAASA,EACTG,OAAQA,EACR2B,MAAOH,GANFD,EAAEd,MAWjB,CACA,SAASgB,GAAeC,MACtBA,EAAK9B,gBACLA,EAAeO,WACfA,EAAUN,QACVA,EAAOG,OACPA,EAAM2B,MACNA,IASA,MAAOC,EAAGC,IAAMH,EAAMI,UAAYlC,GAAiBmC,MAAM,MAClDC,EAAYC,GAAiB/B,GAAS,GAG7C,OAFAgC,QAAQC,IAAI,CAAET,UAGZ1C,EAACoD,EAAS,CAERjB,UAAWC,EAAOM,MAAK,aACXE,EAAC,aACDC,eACAH,EAAMW,MAClBC,aAAc,IAAML,GAAc,GAClCM,aAAc,IAAMN,GAAc,GAAM,kBACvB9B,EAAWS,IAAIc,EAAMjB,IAAM,QAAK+B,EACjDC,MACE,CACE,SAAad,EAAQ9B,EAAX,KACV6C,OAAQV,EAAahC,EAAO2C,OAAS,OAAIH,GACzBhD,SAAA,CAGpBC,mBAAOiC,EAAMkB,UAEbnD,EAACoD,EAAM,CAACC,KAAK,KAAKC,QAAM,EAACC,QAAS,IAAMC,EAAQvB,EAAMjB,IAAGjB,SACvDC,EAACd,EAAS,CAAA,OAlBP+C,EAAMjB,GAsBjB"}
+{"version":3,"file":"Toaster.js","sources":["../../../src/Display/Toast/Toaster.tsx"],"sourcesContent":["\"use client\";\n\nimport type { PositionStringEdge } from \"@studiocubics/types\";\nimport {\n  type ComponentProps,\n  useState,\n  useEffect,\n  type CSSProperties,\n} from \"react\";\nimport { GlassCard } from \"../../Cards/GlassCard/GlassCard\";\nimport { Button } from \"../../Inputs/Button/Button\";\nimport { type Toast, addDismissInterceptor, dismiss, subscribe } from \"./toast\";\nimport styles from \"./Toaster.module.css\";\n\nfunction CloseIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport interface ToasterProps {\n  defaultPosition?: PositionStringEdge;\n  /**\n   * Gap between each toast in px\n   * @default 8\n   */\n  peekGap?: number;\n  /**\n   * Duration of exit animation in ms\n   * @default 200\n   */\n  exitDuration?: number;\n  /**\n   * @default 5\n   */\n  maxToastCount?: number;\n}\n\nexport function Toaster(props: ToasterProps) {\n  const {\n    defaultPosition: defaultPosition = \"top right\",\n    peekGap = 12,\n    exitDuration = 200,\n    maxToastCount = 5,\n  } = props;\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  // Track which toast IDs are currently playing their exit animation\n  const [dismissing, setDismissing] = useState<Set<string>>(new Set());\n\n  useEffect(() => {\n    return subscribe(setToasts, maxToastCount);\n  }, []);\n\n  useEffect(() => {\n    // Register interceptor so all dismiss() calls (auto + manual) go through exit animation\n    addDismissInterceptor((id, confirm) => {\n      // No-op if already animating out\n      setDismissing((prev) => {\n        if (prev.has(id)) return prev;\n        const next = new Set(prev).add(id);\n        setTimeout(() => {\n          confirm();\n          setDismissing((p) => {\n            const n = new Set(p);\n            n.delete(id);\n            return n;\n          });\n        }, exitDuration);\n        return next;\n      });\n    });\n  }, [exitDuration]);\n\n  return (\n    <div className={styles.root}>\n      {toasts.map((t, i) => (\n        <ToastComponent\n          key={t.id}\n          toast={t}\n          defaultPosition={defaultPosition}\n          dismissing={dismissing}\n          peekGap={peekGap}\n          toasts={toasts}\n          index={i}\n        />\n      ))}\n    </div>\n  );\n}\nfunction ToastComponent({\n  toast,\n  defaultPosition,\n  dismissing,\n  peekGap,\n  toasts,\n  index,\n}: {\n  toast: Toast;\n  defaultPosition: PositionStringEdge;\n  dismissing: Set<string>;\n  peekGap: number;\n  toasts: Toast[];\n  index: number;\n}) {\n  const [y, x] = (toast.position ?? defaultPosition).split(\" \");\n  const [isHovering, setIsHovering] = useState(false);\n  console.log({ toast });\n\n  return (\n    <GlassCard\n      key={toast.id}\n      className={styles.toast}\n      data-pos-y={y}\n      data-pos-x={x}\n      data-color={toast.color}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      data-dismissing={dismissing.has(toast.id) ? \"\" : undefined}\n      style={\n        {\n          \"--peek\": `${index * peekGap}px`,\n          zIndex: isHovering ? toasts.length + 1 : undefined,\n        } as CSSProperties\n      }\n    >\n      <span>{toast.message}</span>\n      {/* dismiss() goes through interceptor → exit animation → confirmDismiss */}\n      <Button size=\"sm\" square onClick={() => dismiss(toast.id)}>\n        <CloseIcon />\n      </Button>\n    </GlassCard>\n  );\n}\n"],"names":["CloseIcon","props","width","height","rest","_jsxs","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","xmlns","viewBox","children","_jsx","d","Toaster","defaultPosition","peekGap","exitDuration","maxToastCount","toasts","setToasts","useState","dismissing","setDismissing","Set","useEffect","subscribe","addDismissInterceptor","id","confirm","prev","has","next","add","setTimeout","p","n","delete","className","styles","root","map","t","i","ToastComponent","toast","index","y","x","position","split","isHovering","setIsHovering","console","log","GlassCard","color","onMouseEnter","onMouseLeave","undefined","style","zIndex","length","message","Button","size","square","onClick","dismiss"],"mappings":"2VAcA,SAASA,EAAUC,GACjB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,EAAA,MAAA,CACEC,KAAK,OACLC,OAAO,eACPC,YAAY,IACZC,cAAc,QACdC,eAAe,WACXN,EACJO,MAAM,6BACNC,QAAQ,YACRV,MAAOA,EACPC,OAAQA,EAAMU,SAAA,CAEdC,UAAMC,EAAE,eACRD,EAAA,OAAA,CAAMC,EAAE,iBAGd,CAoBM,SAAUC,EAAQf,GACtB,MACEgB,gBAAiBA,EAAkB,YAAWC,QAC9CA,EAAU,GAAEC,aACZA,EAAe,IAAGC,cAClBA,EAAgB,GACdnB,GACGoB,EAAQC,GAAaC,EAAkB,KAEvCC,EAAYC,GAAiBF,EAAsB,IAAIG,KA0B9D,OAxBAC,EAAU,IACDC,EAAUN,EAAWF,GAC3B,IAEHO,EAAU,KAERE,EAAsB,CAACC,EAAIC,KAEzBN,EAAeO,IACb,GAAIA,EAAKC,IAAIH,GAAK,OAAOE,EACzB,MAAME,EAAO,IAAIR,IAAIM,GAAMG,IAAIL,GAS/B,OARAM,WAAW,KACTL,IACAN,EAAeY,IACb,MAAMC,EAAI,IAAIZ,IAAIW,GAElB,OADAC,EAAEC,OAAOT,GACFQ,KAERnB,GACIe,OAGV,CAACf,IAGFL,EAAA,MAAA,CAAK0B,UAAWC,EAAOC,KAAI7B,SACxBQ,EAAOsB,IAAI,CAACC,EAAGC,IACd/B,EAACgC,EAAc,CAEbC,MAAOH,EACP3B,gBAAiBA,EACjBO,WAAYA,EACZN,QAASA,EACTG,OAAQA,EACR2B,MAAOH,GANFD,EAAEd,MAWjB,CACA,SAASgB,GAAeC,MACtBA,EAAK9B,gBACLA,EAAeO,WACfA,EAAUN,QACVA,EAAOG,OACPA,EAAM2B,MACNA,IASA,MAAOC,EAAGC,IAAMH,EAAMI,UAAYlC,GAAiBmC,MAAM,MAClDC,EAAYC,GAAiB/B,GAAS,GAG7C,OAFAgC,QAAQC,IAAI,CAAET,UAGZ1C,EAACoD,EAAS,CAERjB,UAAWC,EAAOM,MAAK,aACXE,EAAC,aACDC,eACAH,EAAMW,MAClBC,aAAc,IAAML,GAAc,GAClCM,aAAc,IAAMN,GAAc,GAAM,kBACvB9B,EAAWS,IAAIc,EAAMjB,IAAM,QAAK+B,EACjDC,MACE,CACE,SAAad,EAAQ9B,EAAX,KACV6C,OAAQV,EAAahC,EAAO2C,OAAS,OAAIH,GACzBhD,SAAA,CAGpBC,mBAAOiC,EAAMkB,UAEbnD,EAACoD,EAAM,CAACC,KAAK,KAAKC,QAAM,EAACC,QAAS,IAAMC,EAAQvB,EAAMjB,IAAGjB,SACvDC,EAACd,EAAS,CAAA,OAlBP+C,EAAMjB,GAsBjB"}

package/dist/Forms/ConfirmationForm/ConfirmationForm.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import { type ButtonProps } from "../../Inputs/Button/Button";
 export interface ConfirmationFormProps extends ComponentProps<"form"> {
     formTitle?: string;
@@ -6,7 +6,10 @@ export interface ConfirmationFormProps extends ComponentProps<"form"> {
     variant?: "danger" | "info";
     confirmText?: string;
     cancelText?: string;
+    statusText?: ReactNode;
+    error?: string;
     disabled?: boolean;
+    color?: "primary" | "secondary" | "error";
     size?: "sm" | "md" | "lg";
     slotProps?: {
         confirmButton?: ButtonProps;

package/dist/Forms/ConfirmationForm/ConfirmationForm.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import n from"./ConfirmationForm.module.css.js";import{cn as o}from"@studiocubics/utils";import{Button as e}from"../../Inputs/Button/Button.js";function r(r){const{onCancel:a,formTitle:c,variant:s="info",confirmText:d="Confirm",cancelText:l="Cancel",disabled:m,size:u="md",slotProps:f={},className:p,children:b,...h}=r;return t("form",{"aria-disabled":m,className:o(n.root,p,n[`size_${u}`],n[s]),...h,children:[i("h4",{children:c}),b,t("div",{className:n.actions,children:[i(e,{variant:"danger"==s?"contained":"text",disabled:m,type:"button",onClick:()=>a?.(),size:f.cancelButton?.size||u,...f.cancelButton,children:l}),i(e,{disabled:m,variant:"danger"==s?"text":"contained",color:"danger"==s?"error":void 0,type:"submit",size:f.confirmButton?.size||u,...f.confirmButton,children:d})]})]})}export{r as ConfirmationForm};
+"use client";import{jsxs as r,jsx as t}from"react/jsx-runtime";import e from"./ConfirmationForm.module.css.js";import{cn as o}from"@studiocubics/utils";import{Button as n}from"../../Inputs/Button/Button.js";function i(i){const{onCancel:a,formTitle:c,variant:s="info",confirmText:l="Confirm",cancelText:d="Cancel",statusText:m,disabled:u,size:f="md",error:h,slotProps:p={},className:b,children:x,color:B,...v}=i;return r("form",{"aria-disabled":u,className:o(e.root,b,e[s],h?e.error:""),"data-size":f,"data-color":B,...v,children:[t("h4",{children:c}),x,r("div",{className:e.actions,children:[t("div",{className:e.status,children:h??m}),t(n,{variant:"danger"==s?"contained":"text",color:"danger"==s?"error":B,disabled:u,type:"button",onClick:()=>a?.(),size:f,...p.cancelButton,children:p.cancelButton?.children??d}),t(n,{disabled:u,variant:"danger"==s?"text":"contained",color:"danger"==s?"error":B,type:"submit",size:f,...p.confirmButton,children:p.confirmButton?.children??l})]})]})}export{i as ConfirmationForm};
 //# sourceMappingURL=ConfirmationForm.js.map

package/dist/Forms/ConfirmationForm/ConfirmationForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationForm.js","sources":["../../../src/Forms/ConfirmationForm/ConfirmationForm.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport styles from \"./ConfirmationForm.module.css\";\nimport { cn } from \"@studiocubics/utils\";\nimport { Button, type ButtonProps } from \"../../Inputs/Button/Button\";\nexport interface ConfirmationFormProps extends ComponentProps<\"form\"> {\n  formTitle?: string;\n  onCancel?: () => void;\n  variant?: \"danger\" | \"info\";\n  confirmText?: string;\n  cancelText?: string;\n  disabled?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  slotProps?: {\n    confirmButton?: ButtonProps;\n    cancelButton?: ButtonProps;\n  };\n}\nexport function ConfirmationForm(props: ConfirmationFormProps) {\n  const {\n    onCancel,\n    formTitle,\n    variant = \"info\",\n    confirmText = \"Confirm\",\n    cancelText = \"Cancel\",\n    disabled,\n    size = \"md\",\n    slotProps = {},\n    className,\n    children,\n    ...rest\n  } = props;\n  return (\n    <form\n      aria-disabled={disabled}\n      className={cn(\n        styles.root,\n        className,\n        styles[`size_${size}`],\n        styles[variant],\n      )}\n      {...rest}\n    >\n      <h4>{formTitle}</h4>\n      {children}\n      <div className={styles.actions}>\n        <Button\n          variant={variant == \"danger\" ? \"contained\" : \"text\"}\n          disabled={disabled}\n          type=\"button\"\n          onClick={() => onCancel?.()}\n          size={slotProps.cancelButton?.size || size}\n          {...slotProps.cancelButton}\n        >\n          {cancelText}\n        </Button>\n        <Button\n          disabled={disabled}\n          variant={variant == \"danger\" ? \"text\" : \"contained\"}\n          color={variant == \"danger\" ? \"error\" : undefined}\n          type=\"submit\"\n          size={slotProps.confirmButton?.size || size}\n          {...slotProps.confirmButton}\n        >\n          {confirmText}\n        </Button>\n      </div>\n    </form>\n  );\n}\n"],"names":["ConfirmationForm","props","onCancel","formTitle","variant","confirmText","cancelText","disabled","size","slotProps","className","children","rest","_jsxs","cn","styles","root","_jsx","actions","Button","type","onClick","cancelButton","color","undefined","confirmButton"],"mappings":"kMAiBM,SAAUA,EAAiBC,GAC/B,MAAMC,SACJA,EAAQC,UACRA,EAASC,QACTA,EAAU,OAAMC,YAChBA,EAAc,UAASC,WACvBA,EAAa,SAAQC,SACrBA,EAAQC,KACRA,EAAO,KAAIC,UACXA,EAAY,CAAA,EAAEC,UACdA,EAASC,SACTA,KACGC,GACDX,EACJ,OACEY,EAAA,OAAA,CAAA,gBACiBN,EACfG,UAAWI,EACTC,EAAOC,KACPN,EACAK,EAAO,QAAQP,KACfO,EAAOX,OAELQ,YAEJK,EAAA,KAAA,CAAAN,SAAKR,IACJQ,EACDE,EAAA,MAAA,CAAKH,UAAWK,EAAOG,QAAOP,SAAA,CAC5BM,EAACE,EAAM,CACLf,QAAoB,UAAXA,EAAsB,YAAc,OAC7CG,SAAUA,EACVa,KAAK,SACLC,QAAS,IAAMnB,MACfM,KAAMC,EAAUa,cAAcd,MAAQA,KAClCC,EAAUa,aAAYX,SAEzBL,IAEHW,EAACE,EAAM,CACLZ,SAAUA,EACVH,QAAoB,UAAXA,EAAsB,OAAS,YACxCmB,MAAkB,UAAXnB,EAAsB,aAAUoB,EACvCJ,KAAK,SACLZ,KAAMC,EAAUgB,eAAejB,MAAQA,KACnCC,EAAUgB,uBAEbpB,SAKX"}
+{"version":3,"file":"ConfirmationForm.js","sources":["../../../src/Forms/ConfirmationForm/ConfirmationForm.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport styles from \"./ConfirmationForm.module.css\";\nimport { cn } from \"@studiocubics/utils\";\nimport { Button, type ButtonProps } from \"../../Inputs/Button/Button\";\nexport interface ConfirmationFormProps extends ComponentProps<\"form\"> {\n  formTitle?: string;\n  onCancel?: () => void;\n  variant?: \"danger\" | \"info\";\n  confirmText?: string;\n  cancelText?: string;\n  statusText?: ReactNode;\n  error?: string;\n  disabled?: boolean;\n  color?: \"primary\" | \"secondary\" | \"error\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  slotProps?: {\n    confirmButton?: ButtonProps;\n    cancelButton?: ButtonProps;\n  };\n}\nexport function ConfirmationForm(props: ConfirmationFormProps) {\n  const {\n    onCancel,\n    formTitle,\n    variant = \"info\",\n    confirmText = \"Confirm\",\n    cancelText = \"Cancel\",\n    statusText,\n    disabled,\n    size = \"md\",\n    error,\n    slotProps = {},\n    className,\n    children,\n    color,\n    ...rest\n  } = props;\n  return (\n    <form\n      aria-disabled={disabled}\n      className={cn(\n        styles.root,\n        className,\n        styles[variant],\n        error ? styles.error : \"\",\n      )}\n      data-size={size}\n      data-color={color}\n      {...rest}\n    >\n      <h4>{formTitle}</h4>\n      {children}\n      <div className={styles.actions}>\n        <div className={styles.status}>{error ?? statusText}</div>\n        <Button\n          variant={variant == \"danger\" ? \"contained\" : \"text\"}\n          color={variant == \"danger\" ? \"error\" : color}\n          disabled={disabled}\n          type=\"button\"\n          onClick={() => onCancel?.()}\n          size={size}\n          {...slotProps.cancelButton}\n        >\n          {slotProps.cancelButton?.children ?? cancelText}\n        </Button>\n        <Button\n          disabled={disabled}\n          variant={variant == \"danger\" ? \"text\" : \"contained\"}\n          color={variant == \"danger\" ? \"error\" : color}\n          type=\"submit\"\n          size={size}\n          {...slotProps.confirmButton}\n        >\n          {slotProps.confirmButton?.children ?? confirmText}\n        </Button>\n      </div>\n    </form>\n  );\n}\n"],"names":["ConfirmationForm","props","onCancel","formTitle","variant","confirmText","cancelText","statusText","disabled","size","error","slotProps","className","children","color","rest","_jsxs","cn","styles","root","_jsx","actions","status","Button","type","onClick","cancelButton","confirmButton"],"mappings":"+MAsBM,SAAUA,EAAiBC,GAC/B,MAAMC,SACJA,EAAQC,UACRA,EAASC,QACTA,EAAU,OAAMC,YAChBA,EAAc,UAASC,WACvBA,EAAa,SAAQC,WACrBA,EAAUC,SACVA,EAAQC,KACRA,EAAO,KAAIC,MACXA,EAAKC,UACLA,EAAY,CAAA,EAAEC,UACdA,EAASC,SACTA,EAAQC,MACRA,KACGC,GACDd,EACJ,OACEe,EAAA,OAAA,CAAA,gBACiBR,EACfI,UAAWK,EACTC,EAAOC,KACPP,EACAM,EAAOd,GACPM,EAAQQ,EAAOR,MAAQ,IACxB,YACUD,eACCK,KACRC,EAAIF,SAAA,CAERO,EAAA,KAAA,CAAAP,SAAKV,IACJU,EACDG,EAAA,MAAA,CAAKJ,UAAWM,EAAOG,QAAOR,SAAA,CAC5BO,SAAKR,UAAWM,EAAOI,gBAASZ,GAASH,IACzCa,EAACG,EAAM,CACLnB,QAAoB,UAAXA,EAAsB,YAAc,OAC7CU,MAAkB,UAAXV,EAAsB,QAAUU,EACvCN,SAAUA,EACVgB,KAAK,SACLC,QAAS,IAAMvB,MACfO,KAAMA,KACFE,EAAUe,aAAYb,SAEzBF,EAAUe,cAAcb,UAAYP,IAEvCc,EAACG,EAAM,CACLf,SAAUA,EACVJ,QAAoB,UAAXA,EAAsB,OAAS,YACxCU,MAAkB,UAAXV,EAAsB,QAAUU,EACvCU,KAAK,SACLf,KAAMA,KACFE,EAAUgB,cAAad,SAE1BF,EAAUgB,eAAed,UAAYR,SAKhD"}

package/dist/Forms/ConfirmationForm/ConfirmationForm.module.css.js

@@ -1,2 +1,2 @@
-var o={root:"ConfirmationForm-module_root__ltcoI",danger:"ConfirmationForm-module_danger__C1MyS",actions:"ConfirmationForm-module_actions__TSHEJ",size_sm:"ConfirmationForm-module_size_sm__0xJZd",size_md:"ConfirmationForm-module_size_md__ABTKZ",size_lg:"ConfirmationForm-module_size_lg__uqxZX"};export{o as default};
+var o={root:"ConfirmationForm-module_root__ltcoI",error:"ConfirmationForm-module_error__no9D0",status:"ConfirmationForm-module_status__N5gJB",actions:"ConfirmationForm-module_actions__TSHEJ"};export{o as default};
 //# sourceMappingURL=ConfirmationForm.module.css.js.map

package/dist/Inputs/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps, type ReactElement } from "react";
-import { type UseRippleProps } from "../../Misc/_index";
+import { type UseRippleProps } from "../../Misc/Ripple/Ripple";
 export interface CheckboxProps extends Omit<ComponentProps<"input">, "onChange" | "type" | "size"> {
     label?: string;
     checked?: boolean;
@@ -21,7 +21,7 @@ export interface CheckboxProps extends Omit<ComponentProps<"input">, "onChange"
      */
     skipGroup?: boolean;
     size?: "sm" | "md" | "lg";
-    color?: "primary" | "secondary" | "tertiary";
+    color?: "primary" | "secondary" | "error";
     htmlSize?: ComponentProps<"input">["size"];
 }
 export declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/Checkbox/Checkbox.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useContext as t,useState as o,useRef as i,useEffect as n}from"react";import{CheckboxGroupContext as c}from"./CheckboxProvider.js";import{cn as a}from"@studiocubics/utils";import s from"./Checkbox.module.css.js";import{useRipple as l,eventWithRipple as d}from"../../Misc/Ripple/Ripple.js";import"@studiocubics/hooks";function m(m){const{label:u,checked:k,indeterminate:b=!1,skipGroup:f,checkedIcon:w,indeterminateIcon:g,slotProps:v={},"aria-label":N,onChange:x,onTouchStart:C,onClick:j,htmlSize:W,id:z,size:L="md",color:M="default",...S}=m,R=t(c),[B]=o(()=>z??String(Math.random())),[I,P]=o(!1),T=i(null),y=i(!1),{rippleElements:E,createRipple:F}=l(),G=R&&!f?R.values[B]??!1:k??I;return n(()=>{!R||f||y.current||(y.current=!0,R.register(B))},[R,f,B]),n(()=>{T.current&&(T.current.indeterminate=b)},[b]),e("div",{...v.root,className:a(s.root,v.root?.className),"data-color":M,"data-size":L,children:[e("div",{...v.inputWrapper,className:a(s.inputWrapper,v.inputWrapper?.className),children:[E,r("input",{ref:T,type:"checkbox",checked:G,"aria-checked":G??!1,"aria-label":N||u,onChange:e=>{const r=e.target.checked;R&&!f?R.update(B,r):P(r),x?.(e,r)},id:z,onTouchStart:d(F,C),onClick:d(F,j),size:W,...S}),e("span",{children:[w??r(p,{checked:G}),g??r(h,{indeterminate:b})]})]}),u&&r("label",{...v.label,htmlFor:z??u,className:a(v.label?.className,s.label),children:u})]})}function p(e){const{checked:t,className:o,...i}=e;return r("svg",{...i,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",className:a(t?s.show:s.hide,s.checked,o),children:r("path",{d:"M5 13 9 17l10 -9"})})}function h(e){const{indeterminate:t,className:o,...i}=e;return r("svg",{...i,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",className:a(t?s.show:s.hide,s.indeterminate,o),stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:r("path",{d:"M5 12h14"})})}export{m as Checkbox};
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useContext as t,useMemo as o,useState as n,useRef as i,useEffect as c}from"react";import{CheckboxGroupContext as a}from"./CheckboxProvider.js";import{cn as s,toCamelCase as l}from"@studiocubics/utils";import d from"./Checkbox.module.css.js";import{useRipple as m,eventWithRipple as p}from"../../Misc/Ripple/Ripple.js";function h(h){const{label:w,checked:b,indeterminate:f=!1,skipGroup:g,checkedIcon:v,indeterminateIcon:N,slotProps:x={},"aria-label":C,onChange:j,onTouchStart:W,onClick:z,htmlSize:L,id:M,size:S="md",color:R,...B}=h,I=t(a),P=o(()=>M??String(Math.random()),[M]),[T,y]=n(!1),E=i(null),F=i(!1),{rippleElements:G,createRipple:q}=m(),A=I&&!g?I.values[P]??!1:b??T;return c(()=>{!I||g||F.current||(F.current=!0,I.register(P))},[I,g,P]),c(()=>{E.current&&(E.current.indeterminate=f)},[f]),e("div",{...x.root,className:s(d.root,x.root?.className),"data-color":R,"data-size":S,children:[e("div",{...x.inputWrapper,className:s(d.inputWrapper,x.inputWrapper?.className),children:[G,r("input",{...B,ref:E,id:M??l(w),type:"checkbox",checked:A,"aria-checked":A??!1,"aria-label":C??w,onChange:e=>{const r=e.target.checked;I&&!g?I.update(P,r):y(r),j?.(e,r)},onTouchStart:p(q,W),onClick:p(q,z),size:L}),e("span",{children:[v??r(u,{checked:A}),N??r(k,{indeterminate:f})]})]}),w&&r("label",{...x.label,htmlFor:M??l(w),className:s(x.label?.className,d.label),children:w})]})}function u(e){const{checked:t,className:o,...n}=e;return r("svg",{...n,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",className:s(t?d.show:d.hide,d.checked,o),children:r("path",{d:"M5 13 9 17l10 -9"})})}function k(e){const{indeterminate:t,className:o,...n}=e;return r("svg",{...n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",className:s(t?d.show:d.hide,d.indeterminate,o),stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:r("path",{d:"M5 12h14"})})}export{h as Checkbox};
 //# sourceMappingURL=Checkbox.js.map

package/dist/Inputs/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/Inputs/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentProps,\n  type ReactElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CheckboxGroupContext } from \"./CheckboxProvider\";\n\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./Checkbox.module.css\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/_index\";\n\nexport interface CheckboxProps\n  extends Omit<ComponentProps<\"input\">, \"onChange\" | \"type\" | \"size\"> {\n  label?: string;\n  checked?: boolean;\n  indeterminate?: boolean;\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n  ) => void;\n  checkedIcon?: ReactElement<\n    Required<Pick<CheckboxProps, \"checked\">> & ComponentProps<\"svg\">\n  >;\n  indeterminateIcon?: ReactElement<\n    Required<Pick<CheckboxProps, \"indeterminate\">> & ComponentProps<\"svg\">\n  >;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: ComponentProps<\"p\">;\n  };\n  /**\n   * Skips registering with provider\n   */\n  skipGroup?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  color?: \"primary\" | \"secondary\" | \"tertiary\";\n  htmlSize?: ComponentProps<\"input\">[\"size\"];\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const {\n    label,\n    checked,\n    indeterminate = false,\n    skipGroup,\n    checkedIcon,\n    indeterminateIcon,\n    slotProps = {},\n    \"aria-label\": ariaLabel,\n    onChange,\n    onTouchStart,\n    onClick,\n    htmlSize,\n    id,\n    size = \"md\",\n    color = \"default\",\n    ...inputProps\n  } = props;\n  const group = useContext(CheckboxGroupContext);\n  // Stable key: use provided id or fall back to auto-incremented index\n  const [groupId] = useState<string>(() => id ?? String(Math.random()));\n  const [selfChecked, setSelfChecked] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isRegistered = useRef(false);\n\n  const { rippleElements, createRipple } = useRipple();\n\n  const isChecked =\n    group && !skipGroup\n      ? (group.values[groupId] ?? false)\n      : (checked ?? selfChecked);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const next = e.target.checked;\n    if (group && !skipGroup) {\n      group.update(groupId, next);\n    } else {\n      setSelfChecked(next);\n    }\n    onChange?.(e, next);\n  };\n\n  // Register with group if present\n  useEffect(() => {\n    if (!group || skipGroup || isRegistered.current) return;\n    isRegistered.current = true;\n    group.register(groupId);\n  }, [group, skipGroup, groupId]);\n\n  // Set indeterminate state\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(styles.root, slotProps.root?.className)}\n      data-color={color}\n      data-size={size}\n    >\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(styles.inputWrapper, slotProps.inputWrapper?.className)}\n      >\n        {rippleElements}\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          checked={isChecked}\n          aria-checked={isChecked ?? false}\n          aria-label={ariaLabel || label}\n          onChange={handleChange}\n          id={id}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          size={htmlSize}\n          {...inputProps}\n        />\n        <span>\n          {checkedIcon ?? <CheckboxCheckedIcon checked={isChecked} />}\n          {indeterminateIcon ?? (\n            <CheckboxIndeterminateIcon indeterminate={indeterminate} />\n          )}\n        </span>\n      </div>\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id ?? label}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n}\n\nfunction CheckboxCheckedIcon(\n  props: Required<Pick<CheckboxProps, \"checked\">> & ComponentProps<\"svg\">,\n) {\n  const { checked, className, ...rest } = props;\n  return (\n    <svg\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(\n        checked ? styles.show : styles.hide,\n        styles.checked,\n        className,\n      )}\n    >\n      <path d=\"M5 13 9 17l10 -9\" />\n    </svg>\n  );\n}\n\nfunction CheckboxIndeterminateIcon(\n  props: Required<Pick<CheckboxProps, \"indeterminate\">> & ComponentProps<\"svg\">,\n) {\n  const { indeterminate, className, ...rest } = props;\n  return (\n    <svg\n      {...rest}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\n        indeterminate ? styles.show : styles.hide,\n        styles.indeterminate,\n        className,\n      )}\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n"],"names":["Checkbox","props","label","checked","indeterminate","skipGroup","checkedIcon","indeterminateIcon","slotProps","ariaLabel","onChange","onTouchStart","onClick","htmlSize","id","size","color","inputProps","group","useContext","CheckboxGroupContext","groupId","useState","String","Math","random","selfChecked","setSelfChecked","inputRef","useRef","isRegistered","rippleElements","createRipple","useRipple","isChecked","values","useEffect","current","register","_jsxs","root","className","cn","styles","children","inputWrapper","_jsx","ref","type","e","next","target","update","eventWithRipple","CheckboxCheckedIcon","CheckboxIndeterminateIcon","htmlFor","rest","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","show","hide","d"],"mappings":"kYAqDM,SAAUA,EAASC,GACvB,MAAMC,MACJA,EAAKC,QACLA,EAAOC,cACPA,GAAgB,EAAKC,UACrBA,EAASC,YACTA,EAAWC,kBACXA,EAAiBC,UACjBA,EAAY,CAAA,EACZ,aAAcC,EAASC,SACvBA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,SACPA,EAAQC,GACRA,EAAEC,KACFA,EAAO,KAAIC,MACXA,EAAQ,aACLC,GACDhB,EACEiB,EAAQC,EAAWC,IAElBC,GAAWC,EAAiB,IAAMR,GAAMS,OAAOC,KAAKC,YACpDC,EAAaC,GAAkBL,GAAS,GAEzCM,EAAWC,EAAyB,MACpCC,EAAeD,GAAO,IAEtBE,eAAEA,EAAcC,aAAEA,GAAiBC,IAEnCC,EACJhB,IAAUb,EACLa,EAAMiB,OAAOd,KAAY,EACzBlB,GAAWuB,EA0BlB,OAbAU,EAAU,MACHlB,GAASb,GAAayB,EAAaO,UACxCP,EAAaO,SAAU,EACvBnB,EAAMoB,SAASjB,KACd,CAACH,EAAOb,EAAWgB,IAGtBe,EAAU,KACJR,EAASS,UACXT,EAASS,QAAQjC,cAAgBA,IAElC,CAACA,IAGFmC,EAAA,MAAA,IACM/B,EAAUgC,KACdC,UAAWC,EAAGC,EAAOH,KAAMhC,EAAUgC,MAAMC,wBAC/BzB,EAAK,YACND,EAAI6B,SAAA,CAEfL,YACM/B,EAAUqC,aACdJ,UAAWC,EAAGC,EAAOE,aAAcrC,EAAUqC,cAAcJ,WAAUG,SAAA,CAEpEb,EACDe,EAAA,QAAA,CACEC,IAAKnB,EACLoB,KAAK,WACL7C,QAAS+B,EAAS,eACJA,IAAa,EAAK,aACpBzB,GAAaP,EACzBQ,SA1CcuC,IACpB,MAAMC,EAAOD,EAAEE,OAAOhD,QAClBe,IAAUb,EACZa,EAAMkC,OAAO/B,EAAS6B,GAEtBvB,EAAeuB,GAEjBxC,IAAWuC,EAAGC,IAoCRpC,GAAIA,EACJH,aAAc0C,EAAgBrB,EAAcrB,GAC5CC,QAASyC,EAAgBrB,EAAcpB,GACvCG,KAAMF,KACFI,IAENsB,EAAA,OAAA,CAAAK,SAAA,CACGtC,GAAewC,EAACQ,EAAmB,CAACnD,QAAS+B,IAC7C3B,GACCuC,EAACS,EAAyB,CAACnD,cAAeA,UAI/CF,GACC4C,EAAA,QAAA,IACMtC,EAAUN,MACdsD,QAAS1C,GAAMZ,EACfuC,UAAWC,EAAGlC,EAAUN,OAAOuC,UAAWE,EAAOzC,OAAM0C,SAEtD1C,MAKX,CAEA,SAASoD,EACPrD,GAEA,MAAME,QAAEA,EAAOsC,UAAEA,KAAcgB,GAASxD,EACxC,OACE6C,EAAA,MAAA,IACMW,EACJC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QACfvB,UAAWC,EACTvC,EAAUwC,EAAOsB,KAAOtB,EAAOuB,KAC/BvB,EAAOxC,QACPsC,GACDG,SAEDE,EAAA,OAAA,CAAMqB,EAAE,sBAGd,CAEA,SAASZ,EACPtD,GAEA,MAAMG,cAAEA,EAAaqC,UAAEA,KAAcgB,GAASxD,EAC9C,OACE6C,EAAA,MAAA,IACMW,EACJE,QAAQ,YACRD,MAAM,6BACNjB,UAAWC,EACTtC,EAAgBuC,EAAOsB,KAAOtB,EAAOuB,KACrCvB,EAAOvC,cACPqC,GAEFoB,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QAAOpB,SAEtBE,EAAA,OAAA,CAAMqB,EAAE,cAGd"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/Inputs/Checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ComponentProps,\n  type ReactElement,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { CheckboxGroupContext } from \"./CheckboxProvider\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport styles from \"./Checkbox.module.css\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\n\nexport interface CheckboxProps\n  extends Omit<ComponentProps<\"input\">, \"onChange\" | \"type\" | \"size\"> {\n  label?: string;\n  checked?: boolean;\n  indeterminate?: boolean;\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n  ) => void;\n  checkedIcon?: ReactElement<\n    Required<Pick<CheckboxProps, \"checked\">> & ComponentProps<\"svg\">\n  >;\n  indeterminateIcon?: ReactElement<\n    Required<Pick<CheckboxProps, \"indeterminate\">> & ComponentProps<\"svg\">\n  >;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: ComponentProps<\"p\">;\n  };\n  /**\n   * Skips registering with provider\n   */\n  skipGroup?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  color?: \"primary\" | \"secondary\" | \"error\";\n  htmlSize?: ComponentProps<\"input\">[\"size\"];\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const {\n    label,\n    checked,\n    indeterminate = false,\n    skipGroup,\n    checkedIcon,\n    indeterminateIcon,\n    slotProps = {},\n    \"aria-label\": ariaLabel,\n    onChange,\n    onTouchStart,\n    onClick,\n    htmlSize,\n    id,\n    size = \"md\",\n    color,\n    ...rest\n  } = props;\n  const group = useContext(CheckboxGroupContext);\n  // Stable key: use provided id or fall back to auto-incremented index\n  const groupId = useMemo(() => id ?? String(Math.random()), [id]);\n  const [selfChecked, setSelfChecked] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isRegistered = useRef(false);\n\n  const { rippleElements, createRipple } = useRipple();\n\n  const isChecked =\n    group && !skipGroup\n      ? (group.values[groupId] ?? false)\n      : (checked ?? selfChecked);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const next = e.target.checked;\n    if (group && !skipGroup) {\n      group.update(groupId, next);\n    } else {\n      setSelfChecked(next);\n    }\n    onChange?.(e, next);\n  };\n\n  // Register with group if present\n  useEffect(() => {\n    if (!group || skipGroup || isRegistered.current) return;\n    isRegistered.current = true;\n    group.register(groupId);\n  }, [group, skipGroup, groupId]);\n\n  // Set indeterminate state\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(styles.root, slotProps.root?.className)}\n      data-color={color}\n      data-size={size}\n    >\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(styles.inputWrapper, slotProps.inputWrapper?.className)}\n      >\n        {rippleElements}\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id ?? toCamelCase(label)}\n          type=\"checkbox\"\n          checked={isChecked}\n          aria-checked={isChecked ?? false}\n          aria-label={ariaLabel ?? label}\n          onChange={handleChange}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          size={htmlSize}\n        />\n        <span>\n          {checkedIcon ?? <CheckboxCheckedIcon checked={isChecked} />}\n          {indeterminateIcon ?? (\n            <CheckboxIndeterminateIcon indeterminate={indeterminate} />\n          )}\n        </span>\n      </div>\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id ?? toCamelCase(label)}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n}\n\nfunction CheckboxCheckedIcon(\n  props: Required<Pick<CheckboxProps, \"checked\">> & ComponentProps<\"svg\">,\n) {\n  const { checked, className, ...rest } = props;\n  return (\n    <svg\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(\n        checked ? styles.show : styles.hide,\n        styles.checked,\n        className,\n      )}\n    >\n      <path d=\"M5 13 9 17l10 -9\" />\n    </svg>\n  );\n}\n\nfunction CheckboxIndeterminateIcon(\n  props: Required<Pick<CheckboxProps, \"indeterminate\">> & ComponentProps<\"svg\">,\n) {\n  const { indeterminate, className, ...rest } = props;\n  return (\n    <svg\n      {...rest}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\n        indeterminate ? styles.show : styles.hide,\n        styles.indeterminate,\n        className,\n      )}\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n"],"names":["Checkbox","props","label","checked","indeterminate","skipGroup","checkedIcon","indeterminateIcon","slotProps","ariaLabel","onChange","onTouchStart","onClick","htmlSize","id","size","color","rest","group","useContext","CheckboxGroupContext","groupId","useMemo","String","Math","random","selfChecked","setSelfChecked","useState","inputRef","useRef","isRegistered","rippleElements","createRipple","useRipple","isChecked","values","useEffect","current","register","_jsxs","root","className","cn","styles","inputWrapper","children","_jsx","ref","toCamelCase","type","e","next","target","update","eventWithRipple","CheckboxCheckedIcon","CheckboxIndeterminateIcon","htmlFor","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","show","hide","d"],"mappings":"oYAsDM,SAAUA,EAASC,GACvB,MAAMC,MACJA,EAAKC,QACLA,EAAOC,cACPA,GAAgB,EAAKC,UACrBA,EAASC,YACTA,EAAWC,kBACXA,EAAiBC,UACjBA,EAAY,CAAA,EACZ,aAAcC,EAASC,SACvBA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,SACPA,EAAQC,GACRA,EAAEC,KACFA,EAAO,KAAIC,MACXA,KACGC,GACDhB,EACEiB,EAAQC,EAAWC,GAEnBC,EAAUC,EAAQ,IAAMR,GAAMS,OAAOC,KAAKC,UAAW,CAACX,KACrDY,EAAaC,GAAkBC,GAAS,GAEzCC,EAAWC,EAAyB,MACpCC,EAAeD,GAAO,IAEtBE,eAAEA,EAAcC,aAAEA,GAAiBC,IAEnCC,EACJjB,IAAUb,EACLa,EAAMkB,OAAOf,KAAY,EACzBlB,GAAWuB,EA0BlB,OAbAW,EAAU,MACHnB,GAASb,GAAa0B,EAAaO,UACxCP,EAAaO,SAAU,EACvBpB,EAAMqB,SAASlB,KACd,CAACH,EAAOb,EAAWgB,IAGtBgB,EAAU,KACJR,EAASS,UACXT,EAASS,QAAQlC,cAAgBA,IAElC,CAACA,IAGFoC,EAAA,MAAA,IACMhC,EAAUiC,KACdC,UAAWC,EAAGC,EAAOH,KAAMjC,EAAUiC,MAAMC,WAAU,aACzC1B,EAAK,YACND,YAEXyB,EAAA,MAAA,IACMhC,EAAUqC,aACdH,UAAWC,EAAGC,EAAOC,aAAcrC,EAAUqC,cAAcH,WAAUI,SAAA,CAEpEd,EACDe,EAAA,QAAA,IACM9B,EACJ+B,IAAKnB,EACLf,GAAIA,GAAMmC,EAAY/C,GACtBgD,KAAK,WACL/C,QAASgC,iBACKA,IAAa,EAAK,aACpB1B,GAAaP,EACzBQ,SA5CcyC,IACpB,MAAMC,EAAOD,EAAEE,OAAOlD,QAClBe,IAAUb,EACZa,EAAMoC,OAAOjC,EAAS+B,GAEtBzB,EAAeyB,GAEjB1C,IAAWyC,EAAGC,IAsCRzC,aAAc4C,EAAgBtB,EAActB,GAC5CC,QAAS2C,EAAgBtB,EAAcrB,GACvCG,KAAMF,IAER2B,EAAA,OAAA,CAAAM,SAAA,CACGxC,GAAeyC,EAACS,EAAmB,CAACrD,QAASgC,IAC7C5B,GACCwC,EAACU,EAAyB,CAACrD,cAAeA,UAI/CF,GACC6C,cACMvC,EAAUN,MACdwD,QAAS5C,GAAMmC,EAAY/C,GAC3BwC,UAAWC,EAAGnC,EAAUN,OAAOwC,UAAWE,EAAO1C,OAAM4C,SAEtD5C,MAKX,CAEA,SAASsD,EACPvD,GAEA,MAAME,QAAEA,EAAOuC,UAAEA,KAAczB,GAAShB,EACxC,OACE8C,EAAA,MAAA,IACM9B,EACJ0C,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QACfvB,UAAWC,EACTxC,EAAUyC,EAAOsB,KAAOtB,EAAOuB,KAC/BvB,EAAOzC,QACPuC,GACDI,SAEDC,EAAA,OAAA,CAAMqB,EAAE,sBAGd,CAEA,SAASX,EACPxD,GAEA,MAAMG,cAAEA,EAAasC,UAAEA,KAAczB,GAAShB,EAC9C,OACE8C,EAAA,MAAA,IACM9B,EACJ2C,QAAQ,YACRD,MAAM,6BACNjB,UAAWC,EACTvC,EAAgBwC,EAAOsB,KAAOtB,EAAOuB,KACrCvB,EAAOxC,cACPsC,GAEFoB,OAAO,eACPC,YAAY,MACZC,cAAc,QACdC,eAAe,QAAOnB,SAEtBC,EAAA,OAAA,CAAMqB,EAAE,cAGd"}

package/dist/Inputs/CloseButton/CloseButton.d.ts

@@ -1,4 +1,2 @@
-import type { ComponentProps } from "react";
 import { type ButtonProps } from "../Button/Button";
-export declare function CloseIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
 export declare function CloseButton(props: Omit<ButtonProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/CloseButton/CloseButton.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Button as r}from"../Button/Button.js";import{cn as e}from"@studiocubics/utils";import n from"./CloseButton.module.css.js";function s(r){const{width:e=24,height:n=e,...s}=r;return o("svg",{fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",...s,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:e,height:n,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]})}function i(o){const{className:i,...u}=o;return t(r,{square:!0,className:e(n.root,i),...u,children:t(s,{})})}export{i as CloseButton,s as CloseIcon};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Button as r}from"../Button/Button.js";import{cn as e}from"@studiocubics/utils";import n from"./CloseButton.module.css.js";function s(r){const{width:e=24,height:n=e,...s}=r;return o("svg",{fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",...s,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:e,height:n,children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]})}function i(o){const{className:i,...u}=o;return t(r,{square:!0,className:e(n.root,i),...u,children:t(s,{})})}export{i as CloseButton};
 //# sourceMappingURL=CloseButton.js.map

package/dist/Inputs/CloseButton/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.js","sources":["../../../src/Inputs/CloseButton/CloseButton.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./CloseButton.module.css\";\n\nexport function CloseIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport function CloseButton(props: Omit<ButtonProps, \"children\">) {\n  const { className, ...rest } = props;\n  return (\n    <Button square className={cn(styles.root, className)} {...rest}>\n      <CloseIcon />\n    </Button>\n  );\n}\n"],"names":["CloseIcon","props","width","height","rest","_jsxs","fill","stroke","xmlns","viewBox","children","_jsx","d","CloseButton","className","Button","square","cn","styles","root"],"mappings":"mLAKM,SAAUA,EAAUC,GACxB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,SACEC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,0BACC,WACZH,EACJI,MAAM,6BACNC,QAAQ,YACRP,MAAOA,EACPC,OAAQA,EAAMO,SAAA,CAEdC,EAAA,OAAA,CAAMC,EAAE,eACRD,EAAA,OAAA,CAAMC,EAAE,iBAGd,CAEM,SAAUC,EAAYZ,GAC1B,MAAMa,UAAEA,KAAcV,GAASH,EAC/B,OACEU,EAACI,EAAM,CAACC,UAAOF,UAAWG,EAAGC,EAAOC,KAAML,MAAgBV,EAAIM,SAC5DC,EAACX,EAAS,CAAA,IAGhB"}
+{"version":3,"file":"CloseButton.js","sources":["../../../src/Inputs/CloseButton/CloseButton.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { cn } from \"@studiocubics/utils\";\nimport styles from \"./CloseButton.module.css\";\n\nfunction CloseIcon(props: ComponentProps<\"svg\">) {\n  const { width = 24, height = width, ...rest } = props;\n  return (\n    <svg\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...rest}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport function CloseButton(props: Omit<ButtonProps, \"children\">) {\n  const { className, ...rest } = props;\n  return (\n    <Button square className={cn(styles.root, className)} {...rest}>\n      <CloseIcon />\n    </Button>\n  );\n}\n"],"names":["CloseIcon","props","width","height","rest","_jsxs","fill","stroke","xmlns","viewBox","children","_jsx","d","CloseButton","className","Button","square","cn","styles","root"],"mappings":"mLAKA,SAASA,EAAUC,GACjB,MAAMC,MAAEA,EAAQ,GAAEC,OAAEA,EAASD,KAAUE,GAASH,EAChD,OACEI,SACEC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,0BACC,WACZH,EACJI,MAAM,6BACNC,QAAQ,YACRP,MAAOA,EACPC,OAAQA,EAAMO,SAAA,CAEdC,EAAA,OAAA,CAAMC,EAAE,eACRD,EAAA,OAAA,CAAMC,EAAE,iBAGd,CAEM,SAAUC,EAAYZ,GAC1B,MAAMa,UAAEA,KAAcV,GAASH,EAC/B,OACEU,EAACI,EAAM,CAACC,UAAOF,UAAWG,EAAGC,EAAOC,KAAML,MAAgBV,EAAIM,SAC5DC,EAACX,EAAS,CAAA,IAGhB"}

package/dist/Inputs/PasswordInput/PasswordInput.d.ts

@@ -12,7 +12,7 @@ export interface PasswordInputProps extends Omit<ComponentProps<"input">, "size"
      * Use inputSize for <input size="10"/>
      */
     size?: "sm" | "md" | "lg";
-    inputSize?: ComponentProps<"input">["size"];
+    htmlSize?: ComponentProps<"input">["size"];
     hideVisibilityToggle?: boolean;
     disableStrengthMeter?: boolean;
     disableEndIconGutters?: boolean;

package/dist/Inputs/PasswordInput/PasswordInput.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{cn as t}from"@studiocubics/utils";import{useState as s,useEffect as o}from"react";import{useRipple as n,eventWithRipple as i}from"../../Misc/Ripple/Ripple.js";import a from"./PasswordInput.module.css.js";import{InputErrors as l}from"../../Display/InputErrors/InputErrors.js";import{Button as c}from"../Button/Button.js";import{PasswordStrength as p}from"../../Display/PasswordStrength/PasswordStrength.js";import{usePasswordStrength as d,ALL_PASSWORD_TESTS as u,PASSWORD_REGEX as m}from"../../Display/PasswordStrength/usePasswordStrength.js";function h(h){const{startIcon:f,endIcon:v,label:b,error:N,fullWidth:S,hideVisibilityToggle:k=!1,disableStrengthMeter:x=!0,disableEndIconGutters:I=!1,disableStartIconGutters:j=!1,size:y="md",inputSize:C,onTouchStart:M,onClick:P,onBlur:W,slotProps:B={},className:T,...z}=h,{rippleElements:E,createRipple:G}=n(B.ripple),[L,R]=s(N&&!!N.length),[q,D]=s(!1),F=d({password:"string"==typeof h.value?h.value:void 0,requiredTests:B.passwordStrength?.requiredTests??u,disableStrengthMeter:x});return o(()=>{R(N&&!!N.length)},[N]),r("div",{...B.root,className:t(B.root?.className,a.root,a[`size_${y}`],S?a.fullWidth:void 0,L?a.errored:void 0),children:[b&&e("label",{...B.label,htmlFor:h.id||b,className:t(B.label?.className,a.label),children:b}),r("div",{...B.inputWrapper,className:t(B.inputWrapper?.className,a.inputWrapper),children:[f&&e("span",{...B.startIcon,className:t(a.iconContainer,B.startIcon?.className,j?a.disableGutters:void 0),children:f}),e("input",{type:q?"text":"password",className:t(T,a.input),onTouchStart:i(G,M),onClick:i(G,P),onBlur:r=>{R(!1),W?.(r)},pattern:x?void 0:F?.testsPassed.map(r=>{const e=m[r].ex;return e instanceof RegExp?e.source:e}).join("&"),size:C,id:b,...z}),!k&&e(c,{square:!0,size:"sm",type:"button",onClick:()=>D(!q),children:e(q?g:w,{width:24,height:24})}),v&&e("span",{...B.endIcon,className:t(a.iconContainer,B.endIcon?.className,I?a.disableGutters:void 0),children:v}),E]}),!x&&e(p,{strength:F?.strength,...B.passwordStrength}),L&&e(l,{...B.error,className:t(B.error?.className,a.errorText),error:N})]})}function g(t){return r("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}),e("circle",{cx:"12",cy:"12",r:"3"})]})}function w(t){return r("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}),e("path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242"}),e("path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}),e("path",{d:"m2 2 20 20"})]})}export{h as PasswordInput};
+"use client";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{toCamelCase as t,cn as s}from"@studiocubics/utils";import{useState as o,useEffect as n}from"react";import{useRipple as i,eventWithRipple as a}from"../../Misc/Ripple/Ripple.js";import l from"./PasswordInput.module.css.js";import{InputErrors as c}from"../../Display/InputErrors/InputErrors.js";import{Button as d}from"../Button/Button.js";import{PasswordStrength as p}from"../../Display/PasswordStrength/PasswordStrength.js";import{usePasswordStrength as u,ALL_PASSWORD_TESTS as m,PASSWORD_REGEX as h}from"../../Display/PasswordStrength/usePasswordStrength.js";function g(g){const{startIcon:v,endIcon:b,label:N,error:S,fullWidth:k,hideVisibilityToggle:x=!1,disableStrengthMeter:I=!0,disableEndIconGutters:j=!1,disableStartIconGutters:y=!1,size:C="md",htmlSize:M,onTouchStart:P,onClick:W,onBlur:B,slotProps:T={},className:z,...E}=g,{rippleElements:G,createRipple:L}=i(T.ripple),[R,q]=o(S&&!!S.length),[D,F]=o(!1),V=u({password:"string"==typeof g.value?g.value:void 0,requiredTests:T.passwordStrength?.requiredTests??m,disableStrengthMeter:I}),$=g.id??t(N);return n(()=>{q(S&&!!S.length)},[S]),r("div",{...T.root,className:s(T.root?.className,l.root,l[`size_${C}`],k?l.fullWidth:void 0,R?l.errored:void 0),children:[N&&e("label",{...T.label,htmlFor:$,className:s(T.label?.className,l.label),children:N}),r("div",{...T.inputWrapper,className:s(T.inputWrapper?.className,l.inputWrapper),children:[v&&e("span",{...T.startIcon,className:s(l.iconContainer,T.startIcon?.className,y?l.disableGutters:void 0),children:v}),e("input",{id:$,pattern:I?void 0:V?.testsPassed.map(r=>{const e=h[r].ex;return e instanceof RegExp?e.source:e}).join("&"),className:s(z,l.input),type:D?"text":"password",onTouchStart:a(L,P),onClick:a(L,W),onBlur:r=>{q(!1),B?.(r)},size:M,...E}),!x&&e(d,{square:!0,size:"sm",type:"button",onClick:()=>F(!D),children:e(D?w:f,{width:24,height:24})}),b&&e("span",{...T.endIcon,className:s(l.iconContainer,T.endIcon?.className,j?l.disableGutters:void 0),children:b}),G]}),!I&&e(p,{strength:V?.strength,...T.passwordStrength}),R&&e(c,{...T.error,className:s(T.error?.className,l.errorText),error:S})]})}function w(t){return r("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}),e("circle",{cx:"12",cy:"12",r:"3"})]})}function f(t){return r("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"}),e("path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242"}),e("path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"}),e("path",{d:"m2 2 20 20"})]})}export{g as PasswordInput};
 //# sourceMappingURL=PasswordInput.js.map

package/dist/Inputs/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/Inputs/PasswordInput/PasswordInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@studiocubics/utils\";\nimport {\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./PasswordInput.module.css\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\nimport { Button } from \"../Button/Button\";\nimport { PasswordStrength } from \"../../Display/PasswordStrength/PasswordStrength\";\nimport {\n  ALL_PASSWORD_TESTS,\n  PASSWORD_REGEX,\n  usePasswordStrength,\n  type PasswordStrengthProps,\n} from \"../../Display/PasswordStrength/usePasswordStrength\";\n\nexport interface PasswordInputProps\n  extends Omit<ComponentProps<\"input\">, \"size\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  label?: string;\n  error?: string | string[];\n  fullWidth?: boolean;\n  /**\n   * Use inputSize for <input size=\"10\"/>\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  inputSize?: ComponentProps<\"input\">[\"size\"];\n  hideVisibilityToggle?: boolean;\n  disableStrengthMeter?: boolean;\n  disableEndIconGutters?: boolean;\n  disableStartIconGutters?: boolean;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n    passwordStrength?: PasswordStrengthProps;\n  };\n}\n\nexport function PasswordInput(props: PasswordInputProps) {\n  const {\n    startIcon,\n    endIcon,\n    label,\n    error,\n    fullWidth,\n    hideVisibilityToggle = false,\n    disableStrengthMeter = true,\n    disableEndIconGutters = false,\n    disableStartIconGutters = false,\n    size = \"md\",\n    inputSize,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps = {},\n    className: inputClass,\n    ...inputProps\n  } = props;\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n  const [isVisible, setIsVisible] = useState(false);\n  const passwordStrength = usePasswordStrength({\n    password: typeof props.value == \"string\" ? props.value : undefined,\n    requiredTests:\n      slotProps.passwordStrength?.requiredTests ?? ALL_PASSWORD_TESTS,\n    disableStrengthMeter,\n  });\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        styles[`size_${size}`],\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={props.id || label}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        {startIcon && (\n          <span\n            {...slotProps.startIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.startIcon?.className,\n              disableStartIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {startIcon}\n          </span>\n        )}\n        <input\n          type={isVisible ? \"text\" : \"password\"}\n          className={cn(inputClass, styles.input)}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          pattern={\n            !disableStrengthMeter\n              ? passwordStrength?.testsPassed\n                  .map((tp) => {\n                    const regex = PASSWORD_REGEX[tp].ex;\n                    return regex instanceof RegExp ? regex.source : regex;\n                  })\n                  .join(\"&\")\n              : undefined\n          }\n          size={inputSize}\n          id={label}\n          {...inputProps}\n        />\n        {!hideVisibilityToggle && (\n          <Button\n            square\n            size=\"sm\"\n            type=\"button\"\n            onClick={() => setIsVisible(!isVisible)}\n          >\n            {isVisible ? (\n              <EyeIcon width={24} height={24} />\n            ) : (\n              <EyeOffIcon width={24} height={24} />\n            )}\n          </Button>\n        )}\n        {endIcon && (\n          <span\n            {...slotProps.endIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.endIcon?.className,\n              disableEndIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {endIcon}\n          </span>\n        )}\n        {rippleElements}\n      </div>\n      {!disableStrengthMeter && (\n        <PasswordStrength\n          strength={passwordStrength?.strength}\n          {...slotProps.passwordStrength}\n        />\n      )}\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\nfunction EyeIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  );\n}\nfunction EyeOffIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  );\n}\n"],"names":["PasswordInput","props","startIcon","endIcon","label","error","fullWidth","hideVisibilityToggle","disableStrengthMeter","disableEndIconGutters","disableStartIconGutters","size","inputSize","onTouchStart","onClick","onBlur","slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","isVisible","setIsVisible","passwordStrength","usePasswordStrength","password","value","undefined","requiredTests","ALL_PASSWORD_TESTS","useEffect","_jsxs","root","cn","styles","errored","children","_jsx","htmlFor","id","inputWrapper","iconContainer","disableGutters","type","input","eventWithRipple","e","pattern","testsPassed","map","tp","regex","PASSWORD_REGEX","ex","RegExp","source","join","Button","square","EyeIcon","EyeOffIcon","width","height","PasswordStrength","strength","InputErrors","errorText","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","cx","cy","r"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/Inputs/PasswordInput/PasswordInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport {\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport {\n  eventWithRipple,\n  useRipple,\n  type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./PasswordInput.module.css\";\nimport {\n  InputErrors,\n  type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\nimport { Button } from \"../Button/Button\";\nimport { PasswordStrength } from \"../../Display/PasswordStrength/PasswordStrength\";\nimport {\n  ALL_PASSWORD_TESTS,\n  PASSWORD_REGEX,\n  usePasswordStrength,\n  type PasswordStrengthProps,\n} from \"../../Display/PasswordStrength/usePasswordStrength\";\n\nexport interface PasswordInputProps\n  extends Omit<ComponentProps<\"input\">, \"size\"> {\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  label?: string;\n  error?: string | string[];\n  fullWidth?: boolean;\n  /**\n   * Use inputSize for <input size=\"10\"/>\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  htmlSize?: ComponentProps<\"input\">[\"size\"];\n  hideVisibilityToggle?: boolean;\n  disableStrengthMeter?: boolean;\n  disableEndIconGutters?: boolean;\n  disableStartIconGutters?: boolean;\n  slotProps?: {\n    ripple?: UseRippleProps;\n    startIcon?: ComponentProps<\"span\">;\n    endIcon?: ComponentProps<\"span\">;\n    root?: ComponentProps<\"div\">;\n    inputWrapper?: ComponentProps<\"div\">;\n    label?: ComponentProps<\"label\">;\n    error?: InputErrorsProps;\n    passwordStrength?: PasswordStrengthProps;\n  };\n}\n\nexport function PasswordInput(props: PasswordInputProps) {\n  const {\n    startIcon,\n    endIcon,\n    label,\n    error,\n    fullWidth,\n    hideVisibilityToggle = false,\n    disableStrengthMeter = true,\n    disableEndIconGutters = false,\n    disableStartIconGutters = false,\n    size = \"md\",\n    htmlSize,\n    onTouchStart,\n    onClick,\n    onBlur,\n    slotProps = {},\n    className: inputClass,\n    ...inputProps\n  } = props;\n  const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n  const [isErrored, setIsErrored] = useState(error && !!error.length);\n  const [isVisible, setIsVisible] = useState(false);\n  const passwordStrength = usePasswordStrength({\n    password: typeof props.value == \"string\" ? props.value : undefined,\n    requiredTests:\n      slotProps.passwordStrength?.requiredTests ?? ALL_PASSWORD_TESTS,\n    disableStrengthMeter,\n  });\n  const id = props.id ?? toCamelCase(label);\n\n  useEffect(() => {\n    setIsErrored(error && !!error.length);\n  }, [error]);\n\n  return (\n    <div\n      {...slotProps.root}\n      className={cn(\n        slotProps.root?.className,\n        styles.root,\n        styles[`size_${size}`],\n        fullWidth ? styles.fullWidth : undefined,\n        isErrored ? styles.errored : undefined,\n      )}\n    >\n      {label && (\n        <label\n          {...slotProps.label}\n          htmlFor={id}\n          className={cn(slotProps.label?.className, styles.label)}\n        >\n          {label}\n        </label>\n      )}\n      <div\n        {...slotProps.inputWrapper}\n        className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n      >\n        {startIcon && (\n          <span\n            {...slotProps.startIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.startIcon?.className,\n              disableStartIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {startIcon}\n          </span>\n        )}\n        <input\n          id={id}\n          pattern={\n            !disableStrengthMeter\n              ? passwordStrength?.testsPassed\n                  .map((tp) => {\n                    const regex = PASSWORD_REGEX[tp].ex;\n                    return regex instanceof RegExp ? regex.source : regex;\n                  })\n                  .join(\"&\")\n              : undefined\n          }\n          className={cn(inputClass, styles.input)}\n          type={isVisible ? \"text\" : \"password\"}\n          onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n          onClick={eventWithRipple(createRipple, onClick)}\n          onBlur={(e) => {\n            setIsErrored(false);\n            onBlur?.(e);\n          }}\n          size={htmlSize}\n          {...inputProps}\n        />\n        {!hideVisibilityToggle && (\n          <Button\n            square\n            size=\"sm\"\n            type=\"button\"\n            onClick={() => setIsVisible(!isVisible)}\n          >\n            {isVisible ? (\n              <EyeIcon width={24} height={24} />\n            ) : (\n              <EyeOffIcon width={24} height={24} />\n            )}\n          </Button>\n        )}\n        {endIcon && (\n          <span\n            {...slotProps.endIcon}\n            className={cn(\n              styles.iconContainer,\n              slotProps.endIcon?.className,\n              disableEndIconGutters ? styles.disableGutters : undefined,\n            )}\n          >\n            {endIcon}\n          </span>\n        )}\n        {rippleElements}\n      </div>\n      {!disableStrengthMeter && (\n        <PasswordStrength\n          strength={passwordStrength?.strength}\n          {...slotProps.passwordStrength}\n        />\n      )}\n      {isErrored && (\n        <InputErrors\n          {...slotProps.error}\n          className={cn(slotProps.error?.className, styles.errorText)}\n          error={error}\n        />\n      )}\n    </div>\n  );\n}\nfunction EyeIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  );\n}\nfunction EyeOffIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      {...props}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  );\n}\n"],"names":["PasswordInput","props","startIcon","endIcon","label","error","fullWidth","hideVisibilityToggle","disableStrengthMeter","disableEndIconGutters","disableStartIconGutters","size","htmlSize","onTouchStart","onClick","onBlur","slotProps","className","inputClass","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","isVisible","setIsVisible","passwordStrength","usePasswordStrength","password","value","undefined","requiredTests","ALL_PASSWORD_TESTS","id","toCamelCase","useEffect","_jsxs","root","cn","styles","errored","children","_jsx","htmlFor","inputWrapper","iconContainer","disableGutters","pattern","testsPassed","map","tp","regex","PASSWORD_REGEX","ex","RegExp","source","join","input","type","eventWithRipple","e","Button","square","EyeIcon","EyeOffIcon","width","height","PasswordStrength","strength","InputErrors","errorText","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","cx","cy","r"],"mappings":"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"}

package/dist/Inputs/SearchInput/SearchInput.d.ts

@@ -12,8 +12,4 @@ export interface SearchInputProps extends Omit<TextInputProps, "slotProps"> {
     onSearch?: (query: string) => void;
     onClear?: () => void;
 }
-export declare function SearchOpenIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
-export declare function SearchIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
-export declare function SearchCloseIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
-export declare function ClearIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
 export declare function SearchInput(props: SearchInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/Inputs/SearchInput/SearchInput.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cn as r,mergeRefs as o}from"@studiocubics/utils";import{useState as n,useRef as s}from"react";import i from"./SearchInput.module.css.js";import{Button as l}from"../Button/Button.js";import{TextInput as a}from"../TextInput/TextInput.js";function c(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"m21 21-4.3-4.3"}),t("path",{d:"M9 8.5 7 11l2 2.5"}),t("circle",{cx:"11",cy:"11",r:"8"})]})}function u(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"m21 21-4.3-4.3"}),t("circle",{cx:"11",cy:"11",r:"8"})]})}function h(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"m13 13.5 2-2.5-2-2.5"}),t("path",{d:"m21 21-4.3-4.3"}),t("circle",{cx:"11",cy:"11",r:"8"})]})}function d(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]})}function p(p){const{ref:m,className:g,size:w="sm",variant:k="default",disabled:B,disableEndIconGutters:b,disableStartIconGutters:v,disableInputGutters:f,slotProps:C={},value:x,onChange:I,onSearch:N,onClear:j,...y}=p,[z,L]=n("collapsible"==k),[W,S]=n(""),T=s(null),G=void 0!==x,E=G?x:W;return e("div",{...C.searchInputRoot,className:r(i.root,z?i.collapsed:"",C.searchInputRoot?.className),children:[String(E).trim()?t(l,{...C.clearButton,size:C.clearButton?.size||w,className:r(i.clearButton,C.clearButton?.className),disabled:C.clearButton?.disabled||z,onClick:e=>{G||S(""),C.clearButton?.onClick?.(e),j?.()},type:C.clearButton?.type||"button",children:C.clearButton?.children??t(d,{})}):t(l,{...C.searchCollapseToggle,size:C.searchCollapseToggle?.size||w,onClick:e=>{C.searchCollapseToggle?.onClick?.(e),L(!z)},disabled:C.searchCollapseToggle?.disabled||"collapsible"!=k,type:C.searchCollapseToggle?.type||"button",children:t("collapsible"==k?z?c:h:u,{})}),t(a,{type:"search",ref:o(T,m),className:r(i.input,g),size:w,disableStartIconGutters:v||z,disableEndIconGutters:b||z,disableInputGutters:f||z,disabled:B||z,value:E,onChange:e=>{G||S(e.target.value),I?.(e)},slotProps:{...C,inputWrapper:{...C.inputWrapper,className:r(C.inputWrapper?.className,z?i.inputWrapper:"")}},...y}),t(l,{...C.searchButton,size:C.searchButton?.size||w,className:r(i.searchButton,C.searchButton?.className),disabled:C.searchButton?.disabled||z||!String(E).trim(),onClick:e=>{C.searchButton?.onClick?.(e),T.current?.value&&N?.(T.current?.value)},children:C.searchButton?.children??"Search"})]})}export{d as ClearIcon,h as SearchCloseIcon,u as SearchIcon,p as SearchInput,c as SearchOpenIcon};
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cn as r,mergeRefs as o}from"@studiocubics/utils";import{useState as n,useRef as s}from"react";import i from"./SearchInput.module.css.js";import{Button as l}from"../Button/Button.js";import{TextInput as a}from"../TextInput/TextInput.js";function c(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"m21 21-4.3-4.3"}),t("path",{d:"M9 8.5 7 11l2 2.5"}),t("circle",{cx:"11",cy:"11",r:"8"})]})}function u(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"m21 21-4.3-4.3"}),t("circle",{cx:"11",cy:"11",r:"8"})]})}function h(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"m13 13.5 2-2.5-2-2.5"}),t("path",{d:"m21 21-4.3-4.3"}),t("circle",{cx:"11",cy:"11",r:"8"})]})}function d(r){const{width:o=24,height:n=o,...s}=r;return e("svg",{fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...s,xmlns:"http://www.w3.org/2000/svg",width:o,height:n,viewBox:"0 0 24 24",children:[t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"})]})}function p(p){const{ref:m,className:g,size:w="sm",variant:k="default",disabled:B,disableEndIconGutters:b,disableStartIconGutters:v,disableInputGutters:f,slotProps:C={},value:x,onChange:I,onSearch:N,onClear:j,...y}=p,[z,L]=n("collapsible"==k),[W,S]=n(""),T=s(null),G=void 0!==x,E=G?x:W;return e("div",{...C.searchInputRoot,className:r(i.root,z?i.collapsed:"",C.searchInputRoot?.className),children:[String(E).trim()?t(l,{...C.clearButton,size:C.clearButton?.size||w,className:r(i.clearButton,C.clearButton?.className),disabled:C.clearButton?.disabled||z,onClick:e=>{G||S(""),C.clearButton?.onClick?.(e),j?.()},type:C.clearButton?.type||"button",children:C.clearButton?.children??t(d,{})}):t(l,{...C.searchCollapseToggle,size:C.searchCollapseToggle?.size||w,onClick:e=>{C.searchCollapseToggle?.onClick?.(e),L(!z)},disabled:C.searchCollapseToggle?.disabled||"collapsible"!=k,type:C.searchCollapseToggle?.type||"button",children:t("collapsible"==k?z?c:h:u,{})}),t(a,{type:"search",ref:o(T,m),className:r(i.input,g),size:w,disableStartIconGutters:v||z,disableEndIconGutters:b||z,disableInputGutters:f||z,disabled:B||z,value:E,onChange:e=>{G||S(e.target.value),I?.(e)},slotProps:{...C,inputWrapper:{...C.inputWrapper,className:r(C.inputWrapper?.className,z?i.inputWrapper:"")}},...y}),t(l,{...C.searchButton,size:C.searchButton?.size||w,className:r(i.searchButton,C.searchButton?.className),disabled:C.searchButton?.disabled||z||!String(E).trim(),onClick:e=>{C.searchButton?.onClick?.(e),T.current?.value&&N?.(T.current?.value)},children:C.searchButton?.children??"Search"})]})}export{p as SearchInput};
 //# sourceMappingURL=SearchInput.js.map