npm - @ahrowe/ui - Versions diffs - 0.33.0 → 0.35.0 - Mend

@ahrowe/ui 0.33.0 → 0.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (566) hide show

package/dist/esm/common/card/CardMedia.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"./card.module.mjs";import"react";import{jsx as t}from"react/jsx-runtime";function n({src:n=``,alt:r=``}){return t(`img`,{className:e.cardMedia,src:n,alt:r})}export{n as default};
+"use client";import e from"./card.module.mjs";import"react";import{jsx as t}from"react/jsx-runtime";function n({src:n=``,alt:r=``}){return t(`img`,{className:e.cardMedia,src:n,alt:r})}export{n as default};
 //# sourceMappingURL=CardMedia.mjs.map

package/dist/esm/common/card/CardMedia.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardMedia.mjs","names":[],"sources":["../../../../package/common/card/CardMedia.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { CardMediaProps } from './card.types';\nimport styles from './card.module.pcss';\n\nfunction CardMedia({ src = '', alt = '' }: CardMediaProps) {\n return <img className={styles.cardMedia} src={src} alt={alt} />;\n}\n\nexport default CardMedia;\n"],"mappings":"~~uFAKA~~,SAAS,EAAU,CAAE,MAAM,GAAI,MAAM,IAAsB,CACzD,OAAO,EAAC,MAAD,CAAK,UAAW,EAAO,UAAgB,MAAU,KAAM,CAAA,CAChE"}
1	+ {"version":3,"file":"CardMedia.mjs","names":[],"sources":["../../../../package/common/card/CardMedia.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { CardMediaProps } from './card.types';\nimport styles from './card.module.pcss';\n\nfunction CardMedia({ src = '', alt = '' }: CardMediaProps) {\n return <img className={styles.cardMedia} src={src} alt={alt} />;\n}\n\nexport default CardMedia;\n"],"mappings":"oGAKA,SAAS,EAAU,CAAE,MAAM,GAAI,MAAM,IAAsB,CACzD,OAAO,EAAC,MAAD,CAAK,UAAW,EAAO,UAAgB,MAAU,KAAM,CAAA,CAChE"}

package/dist/esm/common/card/card.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`card_w-6Ki`,t=`card-clip_eZ8-1`,n=`card-padding_X2-q-`,r=`card-gaps_jhYkx`,i=`card-style-elevated_exvMB`,a=`card-style-outlined_PxZZA`,o=`card-style-filled_2nhAY`,s=`card-interactable_az2lE`,c=`card-hover_fdS-X`,l=`cardHeader_HfIlm`,u=`cardHeader-thumbnail_rFw-N`,d=`cardHeader-actions_awD46`,f=`cardHeader-titles_CAUU3`,p=`cardHeader-titles-main_Z834V`,m=`cardHeader-titles-main-container_1j-od`,h=`cardHeader-titles-sub_2X08b`,g=`cardMedia_GZJQF`,_=`cardActions_uYu-0`,v={card:e,"card-clip":`card-clip_eZ8-1`,cardClip:t,"card-padding":`card-padding_X2-q-`,cardPadding:n,"card-gaps":`card-gaps_jhYkx`,cardGaps:r,"card-style-elevated":`card-style-elevated_exvMB`,cardStyleElevated:i,"card-style-outlined":`card-style-outlined_PxZZA`,cardStyleOutlined:a,"card-style-filled":`card-style-filled_2nhAY`,cardStyleFilled:o,"card-interactable":`card-interactable_az2lE`,cardInteractable:s,"card-hover":`card-hover_fdS-X`,cardHover:c,cardHeader:l,"cardHeader-thumbnail":`cardHeader-thumbnail_rFw-N`,cardHeaderThumbnail:u,"cardHeader-actions":`cardHeader-actions_awD46`,cardHeaderActions:d,"cardHeader-titles":`cardHeader-titles_CAUU3`,cardHeaderTitles:f,"cardHeader-titles-main":`cardHeader-titles-main_Z834V`,cardHeaderTitlesMain:p,"cardHeader-titles-main-container":`cardHeader-titles-main-container_1j-od`,cardHeaderTitlesMainContainer:m,"cardHeader-titles-sub":`cardHeader-titles-sub_2X08b`,cardHeaderTitlesSub:h,cardMedia:g,cardActions:_};export{e as card,_ as cardActions,t as cardClip,r as cardGaps,l as cardHeader,d as cardHeaderActions,u as cardHeaderThumbnail,f as cardHeaderTitles,p as cardHeaderTitlesMain,m as cardHeaderTitlesMainContainer,h as cardHeaderTitlesSub,c as cardHover,s as cardInteractable,g as cardMedia,n as cardPadding,i as cardStyleElevated,o as cardStyleFilled,a as cardStyleOutlined,v as default};
+"use client";var e=`card_w-6Ki`,t=`card-clip_eZ8-1`,n=`card-padding_X2-q-`,r=`card-gaps_jhYkx`,i=`card-style-elevated_exvMB`,a=`card-style-outlined_PxZZA`,o=`card-style-filled_2nhAY`,s=`card-interactable_az2lE`,c=`card-hover_fdS-X`,l=`cardHeader_HfIlm`,u=`cardHeader-thumbnail_rFw-N`,d=`cardHeader-actions_awD46`,f=`cardHeader-titles_CAUU3`,p=`cardHeader-titles-main_Z834V`,m=`cardHeader-titles-main-container_1j-od`,h=`cardHeader-titles-sub_2X08b`,g=`cardMedia_GZJQF`,_=`cardActions_uYu-0`,v={card:e,"card-clip":`card-clip_eZ8-1`,cardClip:t,"card-padding":`card-padding_X2-q-`,cardPadding:n,"card-gaps":`card-gaps_jhYkx`,cardGaps:r,"card-style-elevated":`card-style-elevated_exvMB`,cardStyleElevated:i,"card-style-outlined":`card-style-outlined_PxZZA`,cardStyleOutlined:a,"card-style-filled":`card-style-filled_2nhAY`,cardStyleFilled:o,"card-interactable":`card-interactable_az2lE`,cardInteractable:s,"card-hover":`card-hover_fdS-X`,cardHover:c,cardHeader:l,"cardHeader-thumbnail":`cardHeader-thumbnail_rFw-N`,cardHeaderThumbnail:u,"cardHeader-actions":`cardHeader-actions_awD46`,cardHeaderActions:d,"cardHeader-titles":`cardHeader-titles_CAUU3`,cardHeaderTitles:f,"cardHeader-titles-main":`cardHeader-titles-main_Z834V`,cardHeaderTitlesMain:p,"cardHeader-titles-main-container":`cardHeader-titles-main-container_1j-od`,cardHeaderTitlesMainContainer:m,"cardHeader-titles-sub":`cardHeader-titles-sub_2X08b`,cardHeaderTitlesSub:h,cardMedia:g,cardActions:_};export{e as card,_ as cardActions,t as cardClip,r as cardGaps,l as cardHeader,d as cardHeaderActions,u as cardHeaderThumbnail,f as cardHeaderTitles,p as cardHeaderTitlesMain,m as cardHeaderTitlesMainContainer,h as cardHeaderTitlesSub,c as cardHover,s as cardInteractable,g as cardMedia,n as cardPadding,i as cardStyleElevated,o as cardStyleFilled,a as cardStyleOutlined,v as default};
 //# sourceMappingURL=card.module.mjs.map

package/dist/esm/common/card/card.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n border: 1px solid transparent;\n box-sizing: border-box;\n\n &-clip {\n overflow: hidden;\n }\n\n &-padding {\n padding: 1em;\n }\n\n &-gaps {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-s);\n }\n\n &-style {\n &-elevated {\n background: var(--background-card-elevated, var(--background-accent-light));\n box-shadow: var(--card-shadow);\n }\n\n &-outlined {\n background: var(--background-card-outlined, transparent);\n border-color: var(--border-color);\n }\n\n &-filled {\n background: var(--background-card-filled, var(--background-accent));\n }\n }\n\n &-interactable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-hover {\n transition:\n transform 0.15s ease,\n box-shadow 0.15s ease,\n filter 0.3s ease;\n\n &:hover {\n transform: translateY(-2px);\n background: var(--background-accent);\n }\n }\n}\n\n.cardHeader {\n display: flex;\n gap: 1em;\n align-items: center;\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 2.5em;\n height: 2.5em;\n background: rgb(0 0 0 / 8%);\n border-radius: 50%;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n gap: var(--spacing-s);\n flex-wrap: wrap;\n flex-shrink: 1;\n align-items: center;\n justify-content: flex-end;\n }\n\n &-titles {\n display: flex;\n flex-flow: column;\n flex: 1;\n gap: 0.25em;\n overflow: hidden;\n\n &-main {\n font-size: 1.125em;\n font-weight: 600;\n min-width: 3ch;\n flex-shrink: 100000;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-m);\n justify-content: space-between;\n }\n }\n\n &-sub {\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n/* Pulled out to the card's own edges, so these must stay twice and once .card-padding above. */\n.cardMedia {\n width: calc(100% + 2em);\n margin: 0 -1em;\n}\n\n.cardActions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n border: 1px solid transparent;\n box-sizing: border-box;\n\n &-clip {\n overflow: hidden;\n }\n\n &-padding {\n padding: 1em;\n }\n\n &-gaps {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-s);\n }\n\n &-style {\n &-elevated {\n background: var(--background-card-elevated, var(--background-accent-light));\n box-shadow: var(--card-shadow);\n }\n\n &-outlined {\n background: var(--background-card-outlined, transparent);\n border-color: var(--border-color);\n }\n\n &-filled {\n background: var(--background-card-filled, var(--background-accent));\n }\n }\n\n &-interactable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-hover {\n transition:\n transform 0.15s ease,\n box-shadow 0.15s ease,\n filter 0.3s ease;\n\n &:hover {\n transform: translateY(-2px);\n background: var(--background-accent);\n }\n }\n}\n\n.cardHeader {\n display: flex;\n gap: 1em;\n align-items: center;\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 2.5em;\n height: 2.5em;\n background: rgb(0 0 0 / 8%);\n border-radius: 50%;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n gap: var(--spacing-s);\n flex-wrap: wrap;\n flex-shrink: 1;\n align-items: center;\n justify-content: flex-end;\n }\n\n &-titles {\n display: flex;\n flex-flow: column;\n flex: 1;\n gap: 0.25em;\n overflow: hidden;\n\n &-main {\n font-size: 1.125em;\n font-weight: 600;\n min-width: 3ch;\n flex-shrink: 100000;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-m);\n justify-content: space-between;\n }\n }\n\n &-sub {\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n/* Pulled out to the card's own edges, so these must stay twice and once .card-padding above. /\n.cardMedia {\n width: calc(100% + 2em);\n margin: 0 -1em;\n}\n\n.cardActions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n}\n\n/ The lift on hover is the only motion here; the shadow and border it transitions alongside stay. */\n@media (prefers-reduced-motion: reduce) {\n .card-hover:hover {\n transform: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/card/card.types.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=function(e){return e.Elevated=`elevated`,e.Outlined=`outlined`,e.Filled=`filled`,e}({});export{e as CardStyleType};
+"use client";var e=function(e){return e.Elevated=`elevated`,e.Outlined=`outlined`,e.Filled=`filled`,e}({});export{e as CardStyleType};
 //# sourceMappingURL=card.types.mjs.map

package/dist/esm/common/card/card.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.types.mjs","names":[],"sources":["../../../../package/common/card/card.types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonStyleType } from '../button/button.types';\nimport type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum CardStyleType {\n Elevated = 'elevated',\n Outlined = 'outlined',\n Filled = 'filled',\n}\n\n// `tabIndex` is omitted only because this component's version also accepts `null`.\nexport type CardSlots = 'root' \| 'content';\n\nexport interface CardProps extends Omit<HtmlProps, 'tabIndex'> {\n className?: string \| undefined;\n children?: ReactNode;\n styleType?: CardStyleType;\n onClick?: () => void;\n tabIndex?: number \| null;\n hoverEffect?: boolean;\n style?: React.CSSProperties;\n autoGap?: boolean;\n clip?: boolean;\n /** Classes for the inner elements. See `CardSlots`. /\n classNames?: SlotClassNames<CardSlots>;\n /* Inline styles for the inner elements. See `CardSlots`. /\n styles?: SlotStyles<CardSlots>;\n}\n\nexport type CardHeaderAction = IconAction;\n\nexport interface CardHeaderProps {\n className?: string;\n title?: ReactNode;\n subTitle?: ReactNode;\n /* URL string → rendered as background-image. Any other ReactNode → rendered inside the thumbnail div. /\n thumbnail?: string \| ReactNode;\n actions?: CardHeaderAction[] \| ReactNode;\n}\n\nexport interface CardMediaProps {\n src?: string;\n alt?: string;\n}\n\nexport interface CardContentProps {\n children?: ReactNode;\n}\n\nexport interface CardAction {\n id?: string;\n label?: string;\n styleType?: ButtonStyleType;\n onClick?: () => void;\n}\n\nexport interface CardActionsProps {\n className?: string;\n /* Renders a Button for each action object. Pass `children` for custom content instead. */\n actions?: CardAction[];\n children?: ReactNode;\n}\n"],"mappings":"~~AAKA~~,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,SAAA,WACA,EAAA,SAAA,WACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"card.types.mjs","names":[],"sources":["../../../../package/common/card/card.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { ReactNode } from 'react';\nimport type { ButtonStyleType } from '../button/button.types';\nimport type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum CardStyleType {\n Elevated = 'elevated',\n Outlined = 'outlined',\n Filled = 'filled',\n}\n\n// `tabIndex` is omitted only because this component's version also accepts `null`.\nexport type CardSlots = 'root' \| 'content';\n\nexport interface CardProps extends Omit<HtmlProps, 'tabIndex'> {\n className?: string \| undefined;\n children?: ReactNode;\n styleType?: CardStyleType;\n onClick?: () => void;\n tabIndex?: number \| null;\n hoverEffect?: boolean;\n style?: React.CSSProperties;\n autoGap?: boolean;\n clip?: boolean;\n /** Ref to the root element. /\n ref?: React.Ref<HTMLDivElement>;\n /* Classes for the inner elements. See `CardSlots`. /\n classNames?: SlotClassNames<CardSlots>;\n /* Inline styles for the inner elements. See `CardSlots`. /\n styles?: SlotStyles<CardSlots>;\n}\n\nexport type CardHeaderAction = IconAction;\n\nexport interface CardHeaderProps {\n className?: string;\n title?: ReactNode;\n subTitle?: ReactNode;\n /* URL string → rendered as background-image. Any other ReactNode → rendered inside the thumbnail div. /\n thumbnail?: string \| ReactNode;\n actions?: CardHeaderAction[] \| ReactNode;\n}\n\nexport interface CardMediaProps {\n src?: string;\n alt?: string;\n}\n\nexport interface CardContentProps {\n children?: ReactNode;\n}\n\nexport interface CardAction {\n id?: string;\n label?: string;\n styleType?: ButtonStyleType;\n onClick?: () => void;\n}\n\nexport interface CardActionsProps {\n className?: string;\n /* Renders a Button for each action object. Pass `children` for custom content instead. */\n actions?: CardAction[];\n children?: ReactNode;\n}\n"],"mappings":"aAMA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,SAAA,WACA,EAAA,SAAA,WACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/carousel/carousel.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"./carousel.module.mjs";import a,{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as d,jsxs as f}from"react/jsx-runtime";var p=10,re=.2,ie={previous:`Previous slide`,next:`Next slide`,slides:`Slides`,goToSlide:e=>`Go to slide ${e}`};function m(m){let{children:ae,currentIndex:_,defaultIndex:oe=0,onChange:se=()=>{},loop:ce=!0,autoPlay:v=!1,autoPlayInterval:y=4e3,pauseOnHover:le=!0,showArrows:ue=!0,showDots:de=!0,swipeable:fe=!0,lazyRender:pe=!1,adaptiveHeight:b=!1,className:me,style:he,classNames:x,styles:S,labels:ge,...C}=e(`Carousel`,m),w=t(`Carousel`,ge,ie),_e=a.useId(),T=a.Children.toArray(ae),E=T.length,D=ce&&E>1,O=+!!D,k=D?[T[E-1],...T,T[0]]:T,A=_!==void 0,[ve,ye]=l(()=>g(oe,E,D)),j=g(A?_:ve,E,D),[M,N]=l(j+O),[be,P]=l(!0),F=c(j),[xe,I]=l(!1),[Se,L]=l(!1),[Ce,R]=l(!1),z=c(null),B=c(null),V=c(null),H=k.length>0?100/k.length:100;s(()=>{let e=F.current;if(F.current=j,e===j)return;let t=k.length-1,n=M;D&&M===0?n=E:D&&M===t&&(n=1);let r=D&&e===E-1&&j===0,i=D&&e===0&&j===E-1,a;a=r?n+1:i?n-1:j+O;let o=B.current;n!==M&&o&&(o.style.transition=`none`,o.style.transform=h(n,0,H),o.offsetWidth,o.style.transition=``),P(!0),N(a)},[j]);let[U,we]=l(()=>({min:j+O-1,max:j+O+1})),Te=Math.min(U.min,M-1),Ee=Math.max(U.max,M+1),[De,Oe]=l(void 0);s(()=>{if(!b)return;let e=B.current?.children[M];if(!e)return;let t=()=>Oe(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,M,E]),s(()=>{let e=V.current,t=e?.children[j];e&&t&&(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[j,E]);function W(e){let t=g(e,E,D);A||ye(t),se(t)}function G(){!D&&j>=E-1||W(j+1)}function K(){!D&&j<=0||W(j-1)}function ke(e){e.target===e.currentTarget&&(we({min:M-1,max:M+1}),D&&(M===0?(P(!1),N(E)):M===k.length-1&&(P(!1),N(1))))}let q=v&&le,J=xe||Se||Ce;o(()=>{if(!v||E<=1||J)return;let e=setInterval(G,y);return()=>clearInterval(e)},[v,y,J,j,E]);let Y=c(null);function Ae(e){!fe||E<=1||(Y.current={startX:e.clientX,startY:e.clientY,width:z.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function je(e){let t=Y.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<p&&Math.abs(r)<p)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),R(!0),P(!1)}t.offsetPercent=n/t.width*100,B.current&&(B.current.style.transform=h(M,t.offsetPercent,H))}function X(){let e=Y.current;if(Y.current=null,!e||!e.axisLocked){R(!1);return}P(!0),R(!1),B.current&&(B.current.style.transition=``,B.current.style.transform=h(M,0,H)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?G():K())}function Me(e){e.defaultPrevented||B.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),K()):e.key===`ArrowRight`&&(e.preventDefault(),G()))}function Ne(e){let t=null;if(e.key===`ArrowLeft`?t=j-1:e.key===`ArrowRight`?t=j+1:e.key===`Home`?t=0:e.key===`End`&&(t=E-1),t===null)return;e.preventDefault();let n=g(t,E,D);W(n),(V.current?.children[n])?.focus()}let Pe=de&&E>1,Fe=e=>`${_e}-dot-${e}`,Z=e=>`${_e}-slide-${e}`,Ie=C[`aria-label`]!==void 0||C[`aria-labelledby`]!==void 0;function Le(e){return Pe?{id:Z(e),role:`tabpanel`,"aria-labelledby":Fe(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${E}`}}let Q=!D&&j<=0,$=!D&&j>=E-1,Re=h(M,0,H);return f(`div`,{...C,ref:z,role:Ie?`region`:`group`,"aria-roledescription":`carousel`,className:u(i.carousel,b&&i.carouselAdaptive,x?.root,me),style:{height:b?De:void 0,...he,...S?.root},onMouseEnter:q?()=>I(!0):void 0,onMouseLeave:q?()=>I(!1):void 0,onFocus:q?()=>L(!0):void 0,onBlur:q?()=>L(!1):void 0,onKeyDown:Me,children:[d(`div`,{ref:B,className:u(i.carouselTrack,b&&i.carouselTrackAdaptive,x?.track),style:{width:`${k.length*100}%`,transform:Re,transition:be?void 0:`none`,...S?.track},"aria-live":v?`off`:`polite`,onTransitionEnd:ke,onPointerDown:Ae,onPointerMove:je,onPointerUp:X,onPointerCancel:X,children:k.map((e,t)=>{let n=D&&(t===0||t===k.length-1),r=t-O,a=!n&&r===j,o=!pe||t>=Te&&t<=Ee;return d(`div`,{...n?{}:Le(r),className:u(i.carouselSlide,x?.slide),style:{width:`${100/k.length}%`,...S?.slide},inert:!a||void 0,children:o?e:null},`carousel-slide-${t}`)})}),ue&&E>1&&f(ne,{children:[d(r,{icon:ee,title:w.previous,"aria-label":w.previous,"aria-disabled":Q||void 0,onClick:()=>!Q&&K(),className:u(i.carouselPrevButton,Q&&i.carouselButtonDisabled,x?.prevButton),style:S?.prevButton}),d(r,{icon:te,title:w.next,"aria-label":w.next,"aria-disabled":$||void 0,onClick:()=>!$&&G(),className:u(i.carouselNextButton,$&&i.carouselButtonDisabled,x?.nextButton),style:S?.nextButton})]}),Pe&&d(`div`,{ref:V,role:`tablist`,"aria-label":w.slides,className:u(i.carouselDots,x?.dots),style:S?.dots,onKeyDown:Ne,children:T.map((e,t)=>d(n,{id:Fe(t),role:`tab`,"aria-label":w.goToSlide(t+1),"aria-selected":t===j,"aria-controls":Z(t),tabIndex:t===j?0:-1,onClick:()=>W(t),className:u(i.carouselDot,t===j&&i.carouselDotActive,x?.dot),style:S?.dot},`carousel-dot-${t}`))})]})}function h(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function g(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{m as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../interactableDiv/index.mjs";import r from"../actionIcon/actionIcon.mjs";import i from"./carousel.module.mjs";import a,{useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as d,jsxs as f}from"react/jsx-runtime";var p=10,re=.2,ie={previous:`Previous slide`,next:`Next slide`,slides:`Slides`,goToSlide:e=>`Go to slide ${e}`};function m(m){let{children:ae,currentIndex:_,defaultIndex:oe=0,onChange:se=()=>{},loop:ce=!0,autoPlay:v=!1,autoPlayInterval:y=4e3,pauseOnHover:le=!0,showArrows:ue=!0,showDots:de=!0,swipeable:fe=!0,lazyRender:pe=!1,adaptiveHeight:b=!1,className:me,style:he,classNames:x,styles:S,labels:ge,...C}=e(`Carousel`,m),w=t(`Carousel`,ge,ie),_e=a.useId(),T=a.Children.toArray(ae),E=T.length,D=ce&&E>1,O=+!!D,k=D?[T[E-1],...T,T[0]]:T,A=_!==void 0,[ve,ye]=l(()=>g(oe,E,D)),j=g(A?_:ve,E,D),[M,N]=l(j+O),[be,P]=l(!0),F=c(j),[xe,I]=l(!1),[Se,L]=l(!1),[Ce,R]=l(!1),z=c(null),B=c(null),V=c(null),H=k.length>0?100/k.length:100;s(()=>{let e=F.current;if(F.current=j,e===j)return;let t=k.length-1,n=M;D&&M===0?n=E:D&&M===t&&(n=1);let r=D&&e===E-1&&j===0,i=D&&e===0&&j===E-1,a;a=r?n+1:i?n-1:j+O;let o=B.current;n!==M&&o&&(o.style.transition=`none`,o.style.transform=h(n,0,H),o.offsetWidth,o.style.transition=``),P(!0),N(a)},[j]);let[U,we]=l(()=>({min:j+O-1,max:j+O+1})),Te=Math.min(U.min,M-1),Ee=Math.max(U.max,M+1),[De,Oe]=l(void 0);s(()=>{if(!b)return;let e=B.current?.children[M];if(!e)return;let t=()=>Oe(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,M,E]),s(()=>{let e=V.current,t=e?.children[j];e&&t&&(e.scrollLeft=t.offsetLeft-(e.clientWidth-t.offsetWidth)/2)},[j,E]);function W(e){let t=g(e,E,D);A||ye(t),se(t)}function G(){!D&&j>=E-1||W(j+1)}function K(){!D&&j<=0||W(j-1)}function ke(e){e.target===e.currentTarget&&(we({min:M-1,max:M+1}),D&&(M===0?(P(!1),N(E)):M===k.length-1&&(P(!1),N(1))))}let q=v&&le,J=xe||Se||Ce;o(()=>{if(!v||E<=1||J)return;let e=setInterval(G,y);return()=>clearInterval(e)},[v,y,J,j,E]);let Y=c(null);function Ae(e){!fe||E<=1||(Y.current={startX:e.clientX,startY:e.clientY,width:z.current?.getBoundingClientRect().width||1,axisLocked:!1,active:!0,offsetPercent:0})}function je(e){let t=Y.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<p&&Math.abs(r)<p)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,e.currentTarget.setPointerCapture?.(e.pointerId),R(!0),P(!1)}t.offsetPercent=n/t.width*100,B.current&&(B.current.style.transform=h(M,t.offsetPercent,H))}function X(){let e=Y.current;if(Y.current=null,!e||!e.axisLocked){R(!1);return}P(!0),R(!1),B.current&&(B.current.style.transition=``,B.current.style.transform=h(M,0,H)),Math.abs(e.offsetPercent)>=re*100&&(e.offsetPercent<0?G():K())}function Me(e){e.defaultPrevented||B.current?.contains(e.target)||(e.key===`ArrowLeft`?(e.preventDefault(),K()):e.key===`ArrowRight`&&(e.preventDefault(),G()))}function Ne(e){let t=null;if(e.key===`ArrowLeft`?t=j-1:e.key===`ArrowRight`?t=j+1:e.key===`Home`?t=0:e.key===`End`&&(t=E-1),t===null)return;e.preventDefault();let n=g(t,E,D);W(n),(V.current?.children[n])?.focus()}let Pe=de&&E>1,Fe=e=>`${_e}-dot-${e}`,Z=e=>`${_e}-slide-${e}`,Ie=C[`aria-label`]!==void 0||C[`aria-labelledby`]!==void 0;function Le(e){return Pe?{id:Z(e),role:`tabpanel`,"aria-labelledby":Fe(e)}:{id:Z(e),role:`group`,"aria-roledescription":`slide`,"aria-label":`${e+1} of ${E}`}}let Q=!D&&j<=0,$=!D&&j>=E-1,Re=h(M,0,H);return f(`div`,{...C,ref:z,role:Ie?`region`:`group`,"aria-roledescription":`carousel`,className:u(i.carousel,b&&i.carouselAdaptive,x?.root,me),style:{height:b?De:void 0,...he,...S?.root},onMouseEnter:q?()=>I(!0):void 0,onMouseLeave:q?()=>I(!1):void 0,onFocus:q?()=>L(!0):void 0,onBlur:q?()=>L(!1):void 0,onKeyDown:Me,children:[d(`div`,{ref:B,className:u(i.carouselTrack,b&&i.carouselTrackAdaptive,x?.track),style:{width:`${k.length*100}%`,transform:Re,transition:be?void 0:`none`,...S?.track},"aria-live":v?`off`:`polite`,onTransitionEnd:ke,onPointerDown:Ae,onPointerMove:je,onPointerUp:X,onPointerCancel:X,children:k.map((e,t)=>{let n=D&&(t===0||t===k.length-1),r=t-O,a=!n&&r===j,o=!pe||t>=Te&&t<=Ee;return d(`div`,{...n?{}:Le(r),className:u(i.carouselSlide,x?.slide),style:{width:`${100/k.length}%`,...S?.slide},inert:!a||void 0,children:o?e:null},`carousel-slide-${t}`)})}),ue&&E>1&&f(ne,{children:[d(r,{icon:ee,title:w.previous,"aria-label":w.previous,"aria-disabled":Q||void 0,onClick:()=>!Q&&K(),className:u(i.carouselPrevButton,Q&&i.carouselButtonDisabled,x?.prevButton),style:S?.prevButton}),d(r,{icon:te,title:w.next,"aria-label":w.next,"aria-disabled":$||void 0,onClick:()=>!$&&G(),className:u(i.carouselNextButton,$&&i.carouselButtonDisabled,x?.nextButton),style:S?.nextButton})]}),Pe&&d(`div`,{ref:V,role:`tablist`,"aria-label":w.slides,className:u(i.carouselDots,x?.dots),style:S?.dots,onKeyDown:Ne,children:T.map((e,t)=>d(n,{id:Fe(t),role:`tab`,"aria-label":w.goToSlide(t+1),"aria-selected":t===j,"aria-controls":Z(t),tabIndex:t===j?0:-1,onClick:()=>W(t),className:u(i.carouselDot,t===j&&i.carouselDotActive,x?.dot),style:S?.dot},`carousel-dot-${t}`))})]})}function h(e,t,n){return`translateX(calc(${-e*n}% + ${n/100*t}%))`}function g(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{m as default};
 //# sourceMappingURL=carousel.mjs.map

package/dist/esm/common/carousel/carousel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { CarouselLabels, CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nconst DEFAULT_LABELS: Required<CarouselLabels> = {\n previous: 'Previous slide',\n next: 'Next slide',\n slides: 'Slides',\n goToSlide: (slide) => `Go to slide ${slide}`,\n};\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n labels,\n ...rest\n } = useComponentDefaults('Carousel', props);\n const text = useLabels('Carousel', labels, DEFAULT_LABELS);\n\n const instanceId = React.useId();\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n const dotsRef = useRef<HTMLDivElement>(null);\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n useLayoutEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n // before that has to animate from the normalised position rather than the clone.\n const lastExtendedIndex = extendedSlides.length - 1;\n let fromIndex = displayIndex;\n if (canLoop && displayIndex === 0) fromIndex = count;\n else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n let target: number;\n if (forwardWrap) target = fromIndex + 1;\n else if (backwardWrap) target = fromIndex - 1;\n else target = realIndex + offset;\n\n // Written straight to the node: the normalised position has to reach style recalculation on its\n // own, or it and the animated position collapse into one jump with no transition.\n const track = trackRef.current;\n if (fromIndex !== displayIndex && track) {\n track.style.transition = 'none';\n track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n void track.offsetWidth;\n track.style.transition = '';\n }\n\n setTransitionEnabled(true);\n setDisplayIndex(target);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const [contentHeight, setContentHeight] = useState<number \| undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) return;\n const slideElement = trackRef.current?.children[displayIndex] as HTMLElement \| undefined;\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n // scroll the page along with it.\n useLayoutEffect(() => {\n const strip = dotsRef.current;\n const dot = strip?.children[realIndex] as HTMLElement \| undefined;\n if (!strip \|\| !dot) return;\n strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n }, [realIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n const tracksPointerPause = autoPlay && pauseOnHover;\n const isPaused = hovered \|\| focused \|\| dragging;\n useEffect(() => {\n if (!autoPlay \|\| count <= 1 \|\| isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n // A drag follows the pointer through the node, not through state: a render per move event would\n // rebuild every slide and dot for something only the track's transform sees.\n const dragRef = useRef<{\n startX: number;\n startY: number;\n width: number;\n axisLocked: boolean;\n active: boolean;\n offsetPercent: number;\n } \| null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable \|\| count <= 1) return;\n dragRef.current = {\n startX: event.clientX,\n startY: event.clientY,\n // Measured once: measuring per move would force a layout between the transform writes.\n width: containerRef.current?.getBoundingClientRect().width \|\| 1,\n axisLocked: false,\n active: true,\n offsetPercent: 0,\n };\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag \|\| !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n // capturing earlier would swallow every click meant for a button inside a slide.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n drag.offsetPercent = (deltaX / drag.width) * 100;\n if (trackRef.current) {\n trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n }\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag \|\| !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n setTransitionEnabled(true);\n setDragging(false);\n\n // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n // drag that changes no index would otherwise strand the track off-screen. One that does change\n // it overwrites this in the same tick, and still animates on from where the pointer left off.\n if (trackRef.current) {\n trackRef.current.style.transition = '';\n trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n }\n\n if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n if (drag.offsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n // own handling below.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.defaultPrevented \|\| trackRef.current?.contains(event.target as Node)) return;\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n let next: number \| null = null;\n if (event.key === 'ArrowLeft') next = realIndex - 1;\n else if (event.key === 'ArrowRight') next = realIndex + 1;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = count - 1;\n if (next === null) return;\n\n event.preventDefault();\n const clamped = clampIndex(next, count, canLoop);\n goToIndex(clamped);\n // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n (dotsRef.current?.children[clamped] as HTMLElement \| undefined)?.focus();\n }\n\n // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n // plain slides rather than as panels.\n const hasTabs = showDots && count > 1;\n const dotId = (index: number) => `${instanceId}-dot-${index}`;\n const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n const isNamed = rest['aria-label'] !== undefined \|\| rest['aria-labelledby'] !== undefined;\n\n function slideSemantics(index: number) {\n if (hasTabs) {\n return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n }\n return {\n id: slideId(index),\n role: 'group',\n 'aria-roledescription': 'slide',\n 'aria-label': `${index + 1} of ${count}`,\n };\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role={isNamed ? 'region' : 'group'}\n aria-roledescription='carousel'\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n ref={trackRef}\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n aria-live={autoPlay ? 'off' : 'polite'}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 \|\| idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender \|\| (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title={text.previous}\n aria-label={text.previous}\n aria-disabled={isPrevDisabled \|\| undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(\n styles.carouselPrevButton,\n isPrevDisabled && styles.carouselButtonDisabled,\n classNames?.prevButton,\n )}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title={text.next}\n aria-label={text.next}\n aria-disabled={isNextDisabled \|\| undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(\n styles.carouselNextButton,\n isNextDisabled && styles.carouselButtonDisabled,\n classNames?.nextButton,\n )}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {hasTabs && (\n <div\n ref={dotsRef}\n role='tablist'\n aria-label={text.slides}\n className={cx(styles.carouselDots, classNames?.dots)}\n style={slotStyles?.dots}\n onKeyDown={handleDotsKeyDown}\n >\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n id={dotId(index)}\n role='tab'\n aria-label={text.goToSlide(index + 1)}\n aria-selected={index === realIndex}\n aria-controls={slideId(index)}\n // One tab stop for the whole set, arrow keys inside it.\n tabIndex={index === realIndex ? 0 : -1}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { CarouselLabels, CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nconst DEFAULT_LABELS: Required<CarouselLabels> = {\n previous: 'Previous slide',\n next: 'Next slide',\n slides: 'Slides',\n goToSlide: (slide) => `Go to slide ${slide}`,\n};\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n labels,\n ...rest\n } = useComponentDefaults('Carousel', props);\n const text = useLabels('Carousel', labels, DEFAULT_LABELS);\n\n const instanceId = React.useId();\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trackRef = useRef<HTMLDivElement>(null);\n const dotsRef = useRef<HTMLDivElement>(null);\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n\n useLayoutEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n // A wrap parks the track on a clone until transitionEnd swaps it back, so a change arriving\n // before that has to animate from the normalised position rather than the clone.\n const lastExtendedIndex = extendedSlides.length - 1;\n let fromIndex = displayIndex;\n if (canLoop && displayIndex === 0) fromIndex = count;\n else if (canLoop && displayIndex === lastExtendedIndex) fromIndex = 1;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n let target: number;\n if (forwardWrap) target = fromIndex + 1;\n else if (backwardWrap) target = fromIndex - 1;\n else target = realIndex + offset;\n\n // Written straight to the node: the normalised position has to reach style recalculation on its\n // own, or it and the animated position collapse into one jump with no transition.\n const track = trackRef.current;\n if (fromIndex !== displayIndex && track) {\n track.style.transition = 'none';\n track.style.transform = buildTrackTransform(fromIndex, 0, slideWidthPercent);\n void track.offsetWidth;\n track.style.transition = '';\n }\n\n setTransitionEnabled(true);\n setDisplayIndex(target);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const [contentHeight, setContentHeight] = useState<number \| undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) return;\n const slideElement = trackRef.current?.children[displayIndex] as HTMLElement \| undefined;\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n // Keeps the selected dot in view. Written as `scrollLeft` because `scrollIntoView` is free to\n // scroll the page along with it.\n useLayoutEffect(() => {\n const strip = dotsRef.current;\n const dot = strip?.children[realIndex] as HTMLElement \| undefined;\n if (!strip \|\| !dot) return;\n strip.scrollLeft = dot.offsetLeft - (strip.clientWidth - dot.offsetWidth) / 2;\n }, [realIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n // Hover and focus only ever pause the timer, so without one they are not worth tracking.\n const tracksPointerPause = autoPlay && pauseOnHover;\n const isPaused = hovered \|\| focused \|\| dragging;\n useEffect(() => {\n if (!autoPlay \|\| count <= 1 \|\| isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n // A drag follows the pointer through the node, not through state: a render per move event would\n // rebuild every slide and dot for something only the track's transform sees.\n const dragRef = useRef<{\n startX: number;\n startY: number;\n width: number;\n axisLocked: boolean;\n active: boolean;\n offsetPercent: number;\n } \| null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable \|\| count <= 1) return;\n dragRef.current = {\n startX: event.clientX,\n startY: event.clientY,\n // Measured once: measuring per move would force a layout between the transform writes.\n width: containerRef.current?.getBoundingClientRect().width \|\| 1,\n axisLocked: false,\n active: true,\n offsetPercent: 0,\n };\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag \|\| !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n // Never on pointerdown: a captured pointer sends its `click` to the capture target too, so\n // capturing earlier would swallow every click meant for a button inside a slide.\n event.currentTarget.setPointerCapture?.(event.pointerId);\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n drag.offsetPercent = (deltaX / drag.width) * 100;\n if (trackRef.current) {\n trackRef.current.style.transform = buildTrackTransform(displayIndex, drag.offsetPercent, slideWidthPercent);\n }\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag \|\| !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n setTransitionEnabled(true);\n setDragging(false);\n\n // React never saw the dragged transform, so it has to be handed back by hand, and always: a\n // drag that changes no index would otherwise strand the track off-screen. One that does change\n // it overwrites this in the same tick, and still animates on from where the pointer left off.\n if (trackRef.current) {\n trackRef.current.style.transition = '';\n trackRef.current.style.transform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n }\n\n if (Math.abs(drag.offsetPercent) >= DRAG_COMMIT_RATIO * 100) {\n if (drag.offsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n // Arrow keys belong to the carousel's own controls, never to the slides: a text field or a\n // scrollable region in a slide has to keep its own. `defaultPrevented` leaves the dots to their\n // own handling below.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.defaultPrevented \|\| trackRef.current?.contains(event.target as Node)) return;\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n function handleDotsKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n let next: number \| null = null;\n if (event.key === 'ArrowLeft') next = realIndex - 1;\n else if (event.key === 'ArrowRight') next = realIndex + 1;\n else if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = count - 1;\n if (next === null) return;\n\n event.preventDefault();\n const clamped = clampIndex(next, count, canLoop);\n goToIndex(clamped);\n // The selected dot is the one holding the tab stop, so focus has to travel with the selection.\n (dotsRef.current?.children[clamped] as HTMLElement \| undefined)?.focus();\n }\n\n // The dots are the APG tablist over the slides. Without them the slides describe themselves as\n // plain slides rather than as panels.\n const hasTabs = showDots && count > 1;\n const dotId = (index: number) => `${instanceId}-dot-${index}`;\n const slideId = (index: number) => `${instanceId}-slide-${index}`;\n\n // An unnamed landmark is worse than none, so the carousel is only a region once it has a name.\n const isNamed = rest['aria-label'] !== undefined \|\| rest['aria-labelledby'] !== undefined;\n\n function slideSemantics(index: number) {\n if (hasTabs) {\n return { id: slideId(index), role: 'tabpanel', 'aria-labelledby': dotId(index) };\n }\n return {\n id: slideId(index),\n role: 'group',\n 'aria-roledescription': 'slide',\n 'aria-label': `${index + 1} of ${count}`,\n };\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const trackTransform = buildTrackTransform(displayIndex, 0, slideWidthPercent);\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role={isNamed ? 'region' : 'group'}\n aria-roledescription='carousel'\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: adaptiveHeight ? contentHeight : undefined, ...style, ...slotStyles?.root }}\n onMouseEnter={tracksPointerPause ? () => setHovered(true) : undefined}\n onMouseLeave={tracksPointerPause ? () => setHovered(false) : undefined}\n onFocus={tracksPointerPause ? () => setFocused(true) : undefined}\n onBlur={tracksPointerPause ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n ref={trackRef}\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n aria-live={autoPlay ? 'off' : 'polite'}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 \|\| idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender \|\| (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n {...(isClonePosition ? {} : slideSemantics(logicalIndex))}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title={text.previous}\n aria-label={text.previous}\n aria-disabled={isPrevDisabled \|\| undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(\n styles.carouselPrevButton,\n isPrevDisabled && styles.carouselButtonDisabled,\n classNames?.prevButton,\n )}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title={text.next}\n aria-label={text.next}\n aria-disabled={isNextDisabled \|\| undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(\n styles.carouselNextButton,\n isNextDisabled && styles.carouselButtonDisabled,\n classNames?.nextButton,\n )}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {hasTabs && (\n <div\n ref={dotsRef}\n role='tablist'\n aria-label={text.slides}\n className={cx(styles.carouselDots, classNames?.dots)}\n style={slotStyles?.dots}\n onKeyDown={handleDotsKeyDown}\n >\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n id={dotId(index)}\n role='tab'\n aria-label={text.goToSlide(index + 1)}\n aria-selected={index === realIndex}\n aria-controls={slideId(index)}\n // One tab stop for the whole set, arrow keys inside it.\n tabIndex={index === realIndex ? 0 : -1}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction buildTrackTransform(position: number, dragPercent: number, slideWidthPercent: number): string {\n return `translateX(calc(${-position * slideWidthPercent}% + ${dragPercent * (slideWidthPercent / 100)}%))`;\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}

package/dist/esm/common/carousel/carousel.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`carousel_-oOBA`,t=`carousel-adaptive_i4I4U`,n=`carousel-track_tmtQz`,r=`carousel-trackAdaptive_Qzc0j`,i=`carousel-slide_Qpgjn`,a=`carousel-prevButton_P9QsH`,o=`carousel-nextButton_FgVo7`,s=`carousel-buttonDisabled_rGyW-`,c=`carousel-dots_xyfSx`,l=`carousel-dot_kPnww`,u=`carousel-dot-active_f9EJ1`,d={carousel:e,"carousel-adaptive":`carousel-adaptive_i4I4U`,carouselAdaptive:t,"carousel-track":`carousel-track_tmtQz`,carouselTrack:n,"carousel-trackAdaptive":`carousel-trackAdaptive_Qzc0j`,carouselTrackAdaptive:r,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:i,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:a,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:o,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:s,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:c,"carousel-dot":`carousel-dot_kPnww`,carouselDot:l,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:u};export{e as carousel,t as carouselAdaptive,s as carouselButtonDisabled,l as carouselDot,u as carouselDotActive,c as carouselDots,o as carouselNextButton,a as carouselPrevButton,i as carouselSlide,n as carouselTrack,r as carouselTrackAdaptive,d as default};
+"use client";var e=`carousel_-oOBA`,t=`carousel-adaptive_i4I4U`,n=`carousel-track_tmtQz`,r=`carousel-trackAdaptive_Qzc0j`,i=`carousel-slide_Qpgjn`,a=`carousel-prevButton_P9QsH`,o=`carousel-nextButton_FgVo7`,s=`carousel-buttonDisabled_rGyW-`,c=`carousel-dots_xyfSx`,l=`carousel-dot_kPnww`,u=`carousel-dot-active_f9EJ1`,d={carousel:e,"carousel-adaptive":`carousel-adaptive_i4I4U`,carouselAdaptive:t,"carousel-track":`carousel-track_tmtQz`,carouselTrack:n,"carousel-trackAdaptive":`carousel-trackAdaptive_Qzc0j`,carouselTrackAdaptive:r,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:i,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:a,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:o,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:s,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:c,"carousel-dot":`carousel-dot_kPnww`,carouselDot:l,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:u};export{e as carousel,t as carouselAdaptive,s as carouselButtonDisabled,l as carouselDot,u as carouselDotActive,c as carouselDots,o as carouselNextButton,a as carouselPrevButton,i as carouselSlide,n as carouselTrack,r as carouselTrackAdaptive,d as default};
 //# sourceMappingURL=carousel.module.mjs.map

package/dist/esm/common/checkbox/checkbox.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loading/spinnerLoading/index.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x,height:S,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:{...x?{"--checkbox-size":x}:null,...h},onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,"aria-disabled":g||void 0,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{className:r.checkboxLoadingBox,style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...T?{"--checkbox-fill":T}:null,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loading/spinnerLoading/index.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x,height:S,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:{...x?{"--checkbox-size":x}:null,...h},onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,"aria-disabled":g||void 0,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{className:r.checkboxLoadingBox,style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...T?{"--checkbox-fill":T}:null,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
 //# sourceMappingURL=checkbox.mjs.map

package/dist/esm/common/checkbox/checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n const {\n label = '',\n selected = false,\n onToggle = () => {},\n className = '',\n style,\n disabled = false,\n lineHeight = '',\n title = '',\n tabIndex = 0,\n cursorDefault = false,\n width,\n height,\n formValidator = null,\n children = null,\n background = null,\n isLoading = false,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Checkbox', props);\n const rippleRef = useRef<{ addRipple: () => void }>(null);\n const [, forceUpdate] = useState(0);\n\n useEffect(() => {\n if (!formValidator) return;\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n function handleToggle(event?: React.MouseEvent \| React.KeyboardEvent) {\n if (disabled \|\| isLoading) return;\n rippleRef.current?.addRipple();\n if (formValidator) {\n formValidator.set(!formValidator.value);\n }\n onToggle(!selected, event);\n }\n\n const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n return (\n <div\n {...rest}\n className={cx(\n styles.checkbox,\n {\n [styles.checkboxDisabled]: disabled,\n [styles.checkboxPointer]: !cursorDefault,\n },\n className,\n )}\n /* Through the variable, so the border and the spinner follow width too, not just the box. */\n style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n onClick={handleToggle}\n onKeyPress={(e) => {\n if (e.key === 'Enter') handleToggle(e);\n }}\n role='checkbox'\n aria-checked={currSelected}\n aria-disabled={disabled \|\| undefined}\n tabIndex={tabIndex}\n >\n <div\n title={title}\n className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n style={slotStyles?.icon}\n >\n {isLoading ? (\n <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n </div>\n ) : (\n <div\n style={{\n width,\n height,\n ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n ...slotStyles?.checkmark,\n }}\n className={cx(\n styles.checkboxCheckmark,\n currSelected && styles.checkboxCheckmarkChecked,\n classNames?.checkmark,\n )}\n >\n <Ripple\n ref={rippleRef}\n manualOnly\n overflowHidden={false}\n rippleAnimationLength={0.3}\n rippleBackground='radial-gradient(transparent, var(--primary-color))'\n />\n <svg\n strokeLinejoin='round'\n strokeLinecap='round'\n xmlns='http://www.w3.org/2000/svg'\n viewBox='-0.5 -1.5 4 2.6'\n >\n <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n </svg>\n </div>\n )}\n </div>\n <div className={classNames?.label} style={{ lineHeight: lineHeight \|\| '100%', ...slotStyles?.label }}>\n {children \|\| label}\n </div>\n </div>\n );\n}\n\nexport default Checkbox;\n"],"mappings":"~~sVASA~~,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GACjB,WAnBZ,SAAA,CAqBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAChE,SAAA,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EAXF,SAAA,CAaE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAER,SAAA,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}
1	+ {"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n const {\n label = '',\n selected = false,\n onToggle = () => {},\n className = '',\n style,\n disabled = false,\n lineHeight = '',\n title = '',\n tabIndex = 0,\n cursorDefault = false,\n width,\n height,\n formValidator = null,\n children = null,\n background = null,\n isLoading = false,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Checkbox', props);\n const rippleRef = useRef<{ addRipple: () => void }>(null);\n const [, forceUpdate] = useState(0);\n\n useEffect(() => {\n if (!formValidator) return;\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n function handleToggle(event?: React.MouseEvent \| React.KeyboardEvent) {\n if (disabled \|\| isLoading) return;\n rippleRef.current?.addRipple();\n if (formValidator) {\n formValidator.set(!formValidator.value);\n }\n onToggle(!selected, event);\n }\n\n const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n return (\n <div\n {...rest}\n className={cx(\n styles.checkbox,\n {\n [styles.checkboxDisabled]: disabled,\n [styles.checkboxPointer]: !cursorDefault,\n },\n className,\n )}\n /* Through the variable, so the border and the spinner follow width too, not just the box. */\n style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n onClick={handleToggle}\n onKeyPress={(e) => {\n if (e.key === 'Enter') handleToggle(e);\n }}\n role='checkbox'\n aria-checked={currSelected}\n aria-disabled={disabled \|\| undefined}\n tabIndex={tabIndex}\n >\n <div\n title={title}\n className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n style={slotStyles?.icon}\n >\n {isLoading ? (\n <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n </div>\n ) : (\n <div\n style={{\n width,\n height,\n ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n ...slotStyles?.checkmark,\n }}\n className={cx(\n styles.checkboxCheckmark,\n currSelected && styles.checkboxCheckmarkChecked,\n classNames?.checkmark,\n )}\n >\n <Ripple\n ref={rippleRef}\n manualOnly\n overflowHidden={false}\n rippleAnimationLength={0.3}\n rippleBackground='radial-gradient(transparent, var(--primary-color))'\n />\n <svg\n strokeLinejoin='round'\n strokeLinecap='round'\n xmlns='http://www.w3.org/2000/svg'\n viewBox='-0.5 -1.5 4 2.6'\n >\n <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n </svg>\n </div>\n )}\n </div>\n <div className={classNames?.label} style={{ lineHeight: lineHeight \|\| '100%', ...slotStyles?.label }}>\n {children \|\| label}\n </div>\n </div>\n );\n}\n\nexport default Checkbox;\n"],"mappings":"mWASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GACjB,WAnBZ,SAAA,CAqBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAChE,SAAA,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EAXF,SAAA,CAaE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAER,SAAA,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}

package/dist/esm/common/checkbox/checkbox.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-loading-spinner_XzXt4`,a=`checkbox-pointer_XnO8e`,o=`checkbox-disabled_ML2rR`,s=`checkbox-checkmark_Xclv9`,c=`checkbox-checkmark-checked_mD4FI`,l={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-box":`checkbox-loading-box_XBIHw`,checkboxLoadingBox:r,"checkbox-loading-spinner":`checkbox-loading-spinner_XzXt4`,checkboxLoadingSpinner:i,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:a,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:o,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:s,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:c};export{e as checkbox,s as checkboxCheckmark,c as checkboxCheckmarkChecked,o as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxLoadingSpinner,a as checkboxPointer,l as default};
+"use client";var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-loading-spinner_XzXt4`,a=`checkbox-pointer_XnO8e`,o=`checkbox-disabled_ML2rR`,s=`checkbox-checkmark_Xclv9`,c=`checkbox-checkmark-checked_mD4FI`,l={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-box":`checkbox-loading-box_XBIHw`,checkboxLoadingBox:r,"checkbox-loading-spinner":`checkbox-loading-spinner_XzXt4`,checkboxLoadingSpinner:i,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:a,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:o,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:s,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:c};export{e as checkbox,s as checkboxCheckmark,c as checkboxCheckmarkChecked,o as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxLoadingSpinner,a as checkboxPointer,l as default};
 //# sourceMappingURL=checkbox.module.mjs.map

package/dist/esm/common/checkbox/checkbox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n --custom-checkbox-size: var(--checkbox-size, 1.375em);\n --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: var(--custom-checkbox-gap);\n margin: -1px;\n border: 1px solid transparent;\n width: fit-content;\n\n /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-\n per corner on the position this occupies, and unlike border-radius itself, custom properties\n inherit through any nesting depth, reaching descendants a plain ancestor selector can't. /\n --checkmark-radius: var(--group-radius-tl, var(--default-border-radius))\n var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n var(--group-radius-bl, var(--default-border-radius));\n\n &-icon {\n color: var(--text-on-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background-color: var(--light-background-color);\n width: fit-content;\n height: fit-content;\n }\n\n &-loading {\n background: transparent;\n\n /* The spinner fills its box, so the box has to carry the checkmark's own size. /\n &-box {\n width: var(--custom-checkbox-size);\n height: var(--custom-checkbox-size);\n }\n\n &-spinner {\n width: 100%;\n height: 100%;\n }\n }\n\n &-pointer {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--focus-border-color, var(--primary-color));\n border-radius: 6px;\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-checkmark {\n width: var(--custom-checkbox-size);\n height: var(--custom-checkbox-size);\n border: 0.1125em solid var(--border-color);\n border-radius: var(--checkmark-radius);\n position: relative;\n\n / The tick only. The fill is the box's own background below, which is what keeps the\n checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n padding: 0.125em;\n stroke: var(--text-on-primary);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n transition:\n transform 0.1s,\n stroke-dashoffset 0.4s;\n transition-delay: 0s, 0.2s;\n transform: scale(0);\n }\n\n &-checked {\n background: var(--checkbox-fill, var(--primary-color));\n border-color: var(--checkbox-fill, var(--primary-color));\n\n svg {\n stroke-dashoffset: 0;\n transform: scale(1);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n --custom-checkbox-size: var(--checkbox-size, 1.375em);\n --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: var(--custom-checkbox-gap);\n margin: -1px;\n border: 1px solid transparent;\n width: fit-content;\n\n /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-\n per corner on the position this occupies, and unlike border-radius itself, custom properties\n inherit through any nesting depth, reaching descendants a plain ancestor selector can't. /\n --checkmark-radius: var(--group-radius-tl, var(--default-border-radius))\n var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n var(--group-radius-bl, var(--default-border-radius));\n\n &-icon {\n color: var(--text-on-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background-color: var(--light-background-color);\n width: fit-content;\n height: fit-content;\n }\n\n &-loading {\n background: transparent;\n\n /* The spinner fills its box, so the box has to carry the checkmark's own size. /\n &-box {\n width: var(--custom-checkbox-size);\n height: var(--custom-checkbox-size);\n }\n\n &-spinner {\n width: 100%;\n height: 100%;\n }\n }\n\n &-pointer {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--focus-border-color, var(--primary-color));\n border-radius: 6px;\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-checkmark {\n width: var(--custom-checkbox-size);\n height: var(--custom-checkbox-size);\n border: 0.1125em solid var(--border-color);\n border-radius: var(--checkmark-radius);\n position: relative;\n\n / The tick only. The fill is the box's own background below, which is what keeps the\n checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n svg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n padding: 0.125em;\n stroke: var(--text-on-primary);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n transition:\n transform 0.1s,\n stroke-dashoffset 0.4s;\n transition-delay: 0s, 0.2s;\n transform: scale(0);\n }\n\n &-checked {\n background: var(--checkbox-fill, var(--primary-color));\n border-color: var(--checkbox-fill, var(--primary-color));\n\n svg {\n stroke-dashoffset: 0;\n transform: scale(1);\n }\n }\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox-checkmark svg {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/chip/chip.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import n from"../ripple/ripple.mjs";import{isSelfActivation as r}from"../utils/activationKey.mjs";import i from"../interactableDiv/index.mjs";import a from"../actionIcon/actionIcon.mjs";import{ChipStyleType as o}from"./chip.types.mjs";import s from"./chip.module.mjs";import{useMemo as c,useRef as l}from"react";import u from"classnames";import{faXmarkCircle as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={default:s.chipStyleDefault,primary:s.chipStylePrimary,info:s.chipStyleInfo,warn:s.chipStyleWarn,error:s.chipStyleError},h={remove:`Remove`};function g(g){let{className:_=``,thumbnail:v=``,text:y=``,styleType:b=o.Default,showRemoveIcon:x=!1,labels:S,onClick:C,onRemove:w,style:T,classNames:E,styles:D,...O}=e(`Chip`,g),k=t(`Chip`,S,h),A=l(null);function j(e){C&&r(e)&&A.current?.addRipple()}let M=c(()=>{if(typeof v==`string`&&v.startsWith(`http`))return v},[v]);return f(i,{...O,className:u(s.chip,m[b],C&&s.chipClickable,_,E?.root),style:{...T,...D?.root},onClick:C,onKeyDown:j,children:f(n,{ref:A,disabled:!C,style:{borderRadius:`inherit`},children:p(`div`,{className:u(s.chipInner,E?.inner),style:D?.inner,children:[v&&f(`div`,{className:u(s.chipThumbnail,E?.thumbnail),style:{...M?{backgroundImage:`url(${M})`}:{},...D?.thumbnail},children:!M&&v}),f(`div`,{className:u(s.chipText,E?.text),style:D?.text,children:y}),x&&f(a,{icon:d,className:E?.removeIcon,style:D?.removeIcon,"aria-label":k.remove,onClick:e=>{e.stopPropagation(),w?.()}})]})})})}export{g as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{isSelfActivation as n}from"../utils/activationKey.mjs";import r from"../ripple/ripple.mjs";import i from"../interactableDiv/index.mjs";import a from"../actionIcon/actionIcon.mjs";import{ChipStyleType as o}from"./chip.types.mjs";import s from"./chip.module.mjs";import{useMemo as c,useRef as l}from"react";import u from"classnames";import{faXmarkCircle as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={default:s.chipStyleDefault,primary:s.chipStylePrimary,info:s.chipStyleInfo,warn:s.chipStyleWarn,error:s.chipStyleError},h={remove:`Remove`};function g(g){let{className:_=``,thumbnail:v=``,text:y=``,styleType:b=o.Default,showRemoveIcon:x=!1,labels:S,onClick:C,onRemove:w,style:T,classNames:E,styles:D,...O}=e(`Chip`,g),k=t(`Chip`,S,h),A=l(null);function j(e){C&&n(e)&&A.current?.addRipple()}let M=c(()=>{if(typeof v==`string`&&v.startsWith(`http`))return v},[v]);return f(i,{...O,className:u(s.chip,m[b],C&&s.chipClickable,_,E?.root),style:{...T,...D?.root},onClick:C,onKeyDown:j,children:f(r,{ref:A,disabled:!C,style:{borderRadius:`inherit`},children:p(`div`,{className:u(s.chipInner,E?.inner),style:D?.inner,children:[v&&f(`div`,{className:u(s.chipThumbnail,E?.thumbnail),style:{...M?{backgroundImage:`url(${M})`}:{},...D?.thumbnail},children:!M&&v}),f(`div`,{className:u(s.chipText,E?.text),style:D?.text,children:y}),x&&f(a,{icon:d,className:E?.removeIcon,style:D?.removeIcon,"aria-label":k.remove,onClick:e=>{e.stopPropagation(),w?.()}})]})})})}export{g as default};
 //# sourceMappingURL=chip.mjs.map

package/dist/esm/common/chip/chip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport type { ChipLabels } from './chip.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n default: styles.chipStyleDefault,\n primary: styles.chipStylePrimary,\n info: styles.chipStyleInfo,\n warn: styles.chipStyleWarn,\n error: styles.chipStyleError,\n};\n\nconst DEFAULT_LABELS: Required<ChipLabels> = {\n remove: 'Remove',\n};\n\nfunction Chip(props: ChipProps) {\n const {\n className = '',\n thumbnail = '',\n text = '',\n styleType = ChipStyleType.Default,\n showRemoveIcon = false,\n labels,\n onClick,\n onRemove,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Chip', props);\n const resolvedLabels = useLabels('Chip', labels, DEFAULT_LABELS);\n const rippleRef = useRef<RippleHandle>(null);\n\n // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n // listener never sees it.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (onClick && isSelfActivation(event)) rippleRef.current?.addRipple();\n }\n\n const thumbnailUrl = useMemo(() => {\n if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n return undefined;\n }, [thumbnail]);\n\n return (\n <InteractableDiv\n {...rest}\n className={cx(\n styles.chip,\n CLASS_BY_STYLE[styleType],\n onClick && styles.chipClickable,\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n onClick={onClick}\n onKeyDown={handleKeyDown}\n >\n <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n <div className={cx(styles.chipInner, classNames?.inner)} style={slotStyles?.inner}>\n {thumbnail && (\n <div\n className={cx(styles.chipThumbnail, classNames?.thumbnail)}\n style={{\n ...(thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}),\n ...slotStyles?.thumbnail,\n }}\n >\n {!thumbnailUrl && thumbnail}\n </div>\n )}\n <div className={cx(styles.chipText, classNames?.text)} style={slotStyles?.text}>\n {text}\n </div>\n {showRemoveIcon && (\n <ActionIcon\n icon={faXmarkCircle}\n className={classNames?.removeIcon}\n style={slotStyles?.removeIcon}\n aria-label={resolvedLabels.remove}\n onClick={(e) => {\n e.stopPropagation();\n onRemove?.();\n }}\n />\n )}\n </div>\n </Ripple>\n </InteractableDiv>\n );\n}\n\nexport default Chip;\n"],"mappings":"~~olBAeA~~,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEM,EAAuC,CAC3C,OAAQ,QACV,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,SACA,UACA,WACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,EAAU,OAAQ,EAAQ,CAAc,EACzD,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAW,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,CACvE,CAEA,IAAM,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAe,GACf,GAAW,EAAO,cAClB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAC9B,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,KAAK,EAAG,MAAO,GAAY,MAA5E,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,SAAS,EACzD,MAAO,CACL,GAAI,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAClE,GAAG,GAAY,SACjB,EAEC,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,SAAU,GAAY,IAAI,EAAG,MAAO,GAAY,KACvE,SAAA,CACE,CAAA,EACJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,WACvB,MAAO,GAAY,WACnB,aAAY,EAAe,OAC3B,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}
1	+ {"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport InteractableDiv from '../interactableDiv';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport type { ChipLabels } from './chip.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n default: styles.chipStyleDefault,\n primary: styles.chipStylePrimary,\n info: styles.chipStyleInfo,\n warn: styles.chipStyleWarn,\n error: styles.chipStyleError,\n};\n\nconst DEFAULT_LABELS: Required<ChipLabels> = {\n remove: 'Remove',\n};\n\nfunction Chip(props: ChipProps) {\n const {\n className = '',\n thumbnail = '',\n text = '',\n styleType = ChipStyleType.Default,\n showRemoveIcon = false,\n labels,\n onClick,\n onRemove,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Chip', props);\n const resolvedLabels = useLabels('Chip', labels, DEFAULT_LABELS);\n const rippleRef = useRef<RippleHandle>(null);\n\n // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n // listener never sees it.\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (onClick && isSelfActivation(event)) rippleRef.current?.addRipple();\n }\n\n const thumbnailUrl = useMemo(() => {\n if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n return undefined;\n }, [thumbnail]);\n\n return (\n <InteractableDiv\n {...rest}\n className={cx(\n styles.chip,\n CLASS_BY_STYLE[styleType],\n onClick && styles.chipClickable,\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n onClick={onClick}\n onKeyDown={handleKeyDown}\n >\n <Ripple ref={rippleRef} disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n <div className={cx(styles.chipInner, classNames?.inner)} style={slotStyles?.inner}>\n {thumbnail && (\n <div\n className={cx(styles.chipThumbnail, classNames?.thumbnail)}\n style={{\n ...(thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}),\n ...slotStyles?.thumbnail,\n }}\n >\n {!thumbnailUrl && thumbnail}\n </div>\n )}\n <div className={cx(styles.chipText, classNames?.text)} style={slotStyles?.text}>\n {text}\n </div>\n {showRemoveIcon && (\n <ActionIcon\n icon={faXmarkCircle}\n className={classNames?.removeIcon}\n style={slotStyles?.removeIcon}\n aria-label={resolvedLabels.remove}\n onClick={(e) => {\n e.stopPropagation();\n onRemove?.();\n }}\n />\n )}\n </div>\n </Ripple>\n </InteractableDiv>\n );\n}\n\nexport default Chip;\n"],"mappings":"imBAeA,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEM,EAAuC,CAC3C,OAAQ,QACV,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,SACA,UACA,WACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,EAAU,OAAQ,EAAQ,CAAc,EACzD,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAW,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,CACvE,CAEA,IAAM,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAe,GACf,GAAW,EAAO,cAClB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAC9B,UACT,UAAW,EAEX,SAAA,EAAC,EAAD,CAAQ,IAAK,EAAW,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,EAC3E,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,UAAW,GAAY,KAAK,EAAG,MAAO,GAAY,MAA5E,SAAA,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,SAAS,EACzD,MAAO,CACL,GAAI,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAClE,GAAG,GAAY,SACjB,EAEC,SAAA,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,SAAU,GAAY,IAAI,EAAG,MAAO,GAAY,KACvE,SAAA,CACE,CAAA,EACJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,UAAW,GAAY,WACvB,MAAO,GAAY,WACnB,aAAY,EAAe,OAC3B,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,IAAW,CACb,CACD,CAAA,CAEA,GACC,CAAA,CACO,CAAA,CAErB"}

package/dist/esm/common/chip/chip.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`chip_rCTMl`,t=`chip-clickable_WTVjG`,n=`chip-style-default_ppCDx`,r=`chip-style-primary_oyE85`,i=`chip-style-info_GNJrm`,a=`chip-style-warn_Jx3LU`,o=`chip-style-error_-Npvg`,s=`chip-inner_mfo-w`,c=`chip-text_d1juf`,l=`chip-thumbnail_-A7eU`,u=`chip-container_oNNmF`,d=`chip-container-inline_11QHw`,f={chip:e,"chip-clickable":`chip-clickable_WTVjG`,chipClickable:t,"chip-style-default":`chip-style-default_ppCDx`,chipStyleDefault:n,"chip-style-primary":`chip-style-primary_oyE85`,chipStylePrimary:r,"chip-style-info":`chip-style-info_GNJrm`,chipStyleInfo:i,"chip-style-warn":`chip-style-warn_Jx3LU`,chipStyleWarn:a,"chip-style-error":`chip-style-error_-Npvg`,chipStyleError:o,"chip-inner":`chip-inner_mfo-w`,chipInner:s,"chip-text":`chip-text_d1juf`,chipText:c,"chip-thumbnail":`chip-thumbnail_-A7eU`,chipThumbnail:l,"chip-container":`chip-container_oNNmF`,chipContainer:u,"chip-container-inline":`chip-container-inline_11QHw`,chipContainerInline:d};export{e as chip,t as chipClickable,u as chipContainer,d as chipContainerInline,s as chipInner,n as chipStyleDefault,o as chipStyleError,i as chipStyleInfo,r as chipStylePrimary,a as chipStyleWarn,c as chipText,l as chipThumbnail,f as default};
+"use client";var e=`chip_rCTMl`,t=`chip-clickable_WTVjG`,n=`chip-style-default_ppCDx`,r=`chip-style-primary_oyE85`,i=`chip-style-info_GNJrm`,a=`chip-style-warn_Jx3LU`,o=`chip-style-error_-Npvg`,s=`chip-inner_mfo-w`,c=`chip-text_d1juf`,l=`chip-thumbnail_-A7eU`,u=`chip-container_oNNmF`,d=`chip-container-inline_11QHw`,f={chip:e,"chip-clickable":`chip-clickable_WTVjG`,chipClickable:t,"chip-style-default":`chip-style-default_ppCDx`,chipStyleDefault:n,"chip-style-primary":`chip-style-primary_oyE85`,chipStylePrimary:r,"chip-style-info":`chip-style-info_GNJrm`,chipStyleInfo:i,"chip-style-warn":`chip-style-warn_Jx3LU`,chipStyleWarn:a,"chip-style-error":`chip-style-error_-Npvg`,chipStyleError:o,"chip-inner":`chip-inner_mfo-w`,chipInner:s,"chip-text":`chip-text_d1juf`,chipText:c,"chip-thumbnail":`chip-thumbnail_-A7eU`,chipThumbnail:l,"chip-container":`chip-container_oNNmF`,chipContainer:u,"chip-container-inline":`chip-container-inline_11QHw`,chipContainerInline:d};export{e as chip,t as chipClickable,u as chipContainer,d as chipContainerInline,s as chipInner,n as chipStyleDefault,o as chipStyleError,i as chipStyleInfo,r as chipStylePrimary,a as chipStyleWarn,c as chipText,l as chipThumbnail,f as default};
 //# sourceMappingURL=chip.module.mjs.map

package/dist/esm/common/chip/chip.types.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=function(e){return e.Default=`default`,e.Primary=`primary`,e.Info=`info`,e.Warn=`warn`,e.Error=`error`,e}({});export{e as ChipStyleType};
+"use client";var e=function(e){return e.Default=`default`,e.Primary=`primary`,e.Info=`info`,e.Warn=`warn`,e.Error=`error`,e}({});export{e as ChipStyleType};
 //# sourceMappingURL=chip.types.mjs.map

package/dist/esm/common/chip/chip.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\n\nexport enum ChipStyleType {\n Default = 'default',\n Primary = 'primary',\n Info = 'info',\n Warn = 'warn',\n Error = 'error',\n}\n\n/** Text Chip renders of its own, for translating it. /\nexport interface ChipLabels {\n /* The remove button, read out by screen readers (default `Remove`). /\n remove?: string;\n}\n\nexport type ChipSlots = 'root' \| 'inner' \| 'thumbnail' \| 'text' \| 'removeIcon';\n\nexport interface ChipProps extends HtmlProps {\n className?: string;\n text?: string;\n thumbnail?: React.ReactNode;\n styleType?: ChipStyleType;\n showRemoveIcon?: boolean;\n /* Accessible name for the remove button. Default `'Remove'`. /\n onClick?: () => void;\n onRemove?: () => void;\n /* Overrides the text Chip renders of its own. Merged per key. /\n labels?: ChipLabels;\n /* Classes for the inner elements. See `ChipSlots`. /\n classNames?: SlotClassNames<ChipSlots>;\n /* Inline styles for the inner elements. See `ChipSlots`. */\n styles?: SlotStyles<ChipSlots>;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n className?: string;\n children?: React.ReactNode;\n inline?: boolean;\n}\n"],"mappings":"~~AAEA~~,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"chip.types.mjs","names":[],"sources":["../../../../package/common/chip/chip.types.ts"],"sourcesContent":["import type { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';\n\nexport enum ChipStyleType {\n Default = 'default',\n Primary = 'primary',\n Info = 'info',\n Warn = 'warn',\n Error = 'error',\n}\n\n/** Text Chip renders of its own, for translating it. /\nexport interface ChipLabels {\n /* The remove button, read out by screen readers (default `Remove`). /\n remove?: string;\n}\n\nexport type ChipSlots = 'root' \| 'inner' \| 'thumbnail' \| 'text' \| 'removeIcon';\n\nexport interface ChipProps extends HtmlProps {\n className?: string;\n text?: string;\n thumbnail?: React.ReactNode;\n styleType?: ChipStyleType;\n showRemoveIcon?: boolean;\n /* Accessible name for the remove button. Default `'Remove'`. /\n onClick?: () => void;\n onRemove?: () => void;\n /* Overrides the text Chip renders of its own. Merged per key. /\n labels?: ChipLabels;\n /* Classes for the inner elements. See `ChipSlots`. /\n classNames?: SlotClassNames<ChipSlots>;\n /* Inline styles for the inner elements. See `ChipSlots`. */\n styles?: SlotStyles<ChipSlots>;\n}\n\nexport interface ChipContainerProps extends HtmlProps {\n className?: string;\n children?: React.ReactNode;\n inline?: boolean;\n}\n"],"mappings":"aAEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/chip/chipContainer.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"./chip.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r({className:r=void 0,children:i=null,inline:a=!1,...o}){return n(`div`,{...o,className:t(e.chipContainer,a&&e.chipContainerInline,r),children:i})}export{r as default};
+"use client";import e from"./chip.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r({className:r=void 0,children:i=null,inline:a=!1,...o}){return n(`div`,{...o,className:t(e.chipContainer,a&&e.chipContainerInline,r),children:i})}export{r as default};
 //# sourceMappingURL=chipContainer.mjs.map

package/dist/esm/common/chip/chipContainer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chipContainer.mjs","names":[],"sources":["../../../../package/common/chip/chipContainer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { ChipContainerProps } from './chip.types';\nimport styles from './chip.module.pcss';\n\nfunction ChipContainer({\n className = undefined,\n children = null,\n inline = false,\n ...rest\n}: ChipContainerProps): ReactElement {\n return (\n <div {...rest} className={cx(styles.chipContainer, inline && styles.chipContainerInline, className)}>\n {children}\n </div>\n );\n}\n\nexport default ChipContainer;\n"],"mappings":"~~mGAMA~~,SAAS,EAAc,CACrB,YAAY,IAAA,GACZ,WAAW,KACX,SAAS,GACT,GAAG,GACgC,CACnC,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,cAAe,GAAU,EAAO,oBAAqB,CAAS,EAC/F,UACE,CAAA,CAET"}
1	+ {"version":3,"file":"chipContainer.mjs","names":[],"sources":["../../../../package/common/chip/chipContainer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { ChipContainerProps } from './chip.types';\nimport styles from './chip.module.pcss';\n\nfunction ChipContainer({\n className = undefined,\n children = null,\n inline = false,\n ...rest\n}: ChipContainerProps): ReactElement {\n return (\n <div {...rest} className={cx(styles.chipContainer, inline && styles.chipContainerInline, className)}>\n {children}\n </div>\n );\n}\n\nexport default ChipContainer;\n"],"mappings":"gHAMA,SAAS,EAAc,CACrB,YAAY,IAAA,GACZ,WAAW,KACX,SAAS,GACT,GAAG,GACgC,CACnC,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,cAAe,GAAU,EAAO,oBAAqB,CAAS,EAC/F,UACE,CAAA,CAET"}

package/dist/esm/common/colorPicker/colorPicker.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../interactableDiv/index.mjs";import{Align as n}from"../floatingMenu/floatingMenu.types.mjs";import r from"../floatingMenu/floatingMenu.mjs";import i from"../input/input.mjs";import{toHex as a}from"./toHex.mjs";import o from"./colorPicker.module.mjs";import{useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEyeDropper as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m=typeof window<`u`&&`EyeDropper`in window;async function h(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function g(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function _(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:parseInt(e.slice(7,9),16)/255*100}:{hex6:e.slice(0,7),alpha:100}}function v(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function y(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function b(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o*=60,o<0&&(o+=360));let s=i===0?0:a/i*100,c=i*100;return{h:o,s,v:c}}function x(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function S({hex:e,onChange:t,useInputComponent:n=!1,className:r,style:a}){let[s,u]=c(e),[d,p]=c(e);e!==d&&(p(e),u(e));function m(e){u(e);let n=e.startsWith(`#`)?e:`#${e}`;g(n)&&t(n)}function h(){g(s.startsWith(`#`)?s:`#${s}`)||u(e)}return n?f(i,{value:s,onChange:e=>m(e),onBlur:h}):f(`input`,{type:`text`,value:s,onChange:e=>m(e.target.value),onBlur:h,className:l(o.hexInput,r),style:a,spellCheck:!1})}function C({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:a,onAlphaChange:c,showInput:g=!0,showAlpha:y=!1,labels:C,classNames:w,styles:T}){let E=s(null);function D(e){let t=E.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function O(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=D(e);a(t,n);let r=e=>{let{s:t,v:n}=D(e);a(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function k(e){let{hex6:t,alpha:n}=_(e),{h:r,s:o,v:s}=b(t);i(r),a(o,s),y&&c(n)}let A=x(e,t,n),j=y?v(A,r,!0):A;return p(`div`,{className:l(o.panel,w?.panel),style:T?.panel,children:[p(`div`,{ref:E,className:l(o.gradientArea,w?.gradient),style:{"--hue":e,...T?.gradient},onPointerDown:O,children:[f(`div`,{className:o.gradientOverlay}),f(`div`,{className:o.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),f(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:l(o.hueSlider,w?.hueSlider),style:T?.hueSlider}),y&&f(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>c(Number(e.target.value)),className:l(o.alphaSlider,w?.alphaSlider),style:{"--alpha-color":A,...T?.alphaSlider}}),(g||m)&&p(`div`,{className:o.hexRow,children:[g&&f(S,{hex:j,onChange:k,className:w?.hexInput,style:T?.hexInput}),m&&f(`button`,{type:`button`,className:l(o.eyeDropperButton,w?.eyeDropper),style:T?.eyeDropper,onClick:async()=>{let e=await h();e&&k(e)},"aria-label":C.pickFromScreen,children:f(u,{icon:d})})]})]})}var w=`#3b82f6`,T={pickFromScreen:`Pick color from screen`};function E({className:i,value:u=w,onChange:d,showInput:m=!1,showAlpha:h=!1,inline:g=!1,labels:E,style:D,classNames:O,styles:k,...A}){let j=e(`ColorPicker`,E,T),[M,N]=c(!1),{hex6:P,alpha:F}=_(a(u)??w),I=b(P),[L,R]=c({h:I.h,s:I.s,v:I.v,a:F}),z=s(L),[B,V]=c(u);if(u!==B){V(u);let{hex6:e,alpha:t}=_(a(u)??w);if(e!==x(L.h,L.s,L.v)||t!==L.a){let n=b(e);R({h:n.h,s:n.s,v:n.v,a:t})}}let{h:H,s:U,v:W,a:G}=L;function K(e,t,n,r){d?.(v(x(e,t,n),r,h))}function q(e){z.current.h=e,R(t=>({...t,h:e})),K(e,z.current.s,z.current.v,z.current.a)}function J(e,t){z.current.s=e,z.current.v=t,R(n=>({...n,s:e,v:t})),K(z.current.h,e,t,z.current.a)}function Y(e){z.current.a=e,R(t=>({...t,a:e})),K(z.current.h,z.current.s,z.current.v,e)}let X=x(H,U,W),Z=h?y(X,G):X,Q=v(X,G,h),$={hue:H,sat:U,val:W,alpha:G,onHueChange:q,onSVChange:J,onAlphaChange:Y,showAlpha:h,labels:j,classNames:O,styles:k};return g?f(`div`,{...A,className:l(o.colorPicker,i,O?.root),style:{...D,...k?.root},children:f(C,{...$,showInput:m})}):p(`div`,{...A,className:l(o.colorPicker,i),children:[f(r,{isOpen:M,onOpenChange:N,dontCloseOnChildClick:!0,align:n.Left,content:f(C,{...$}),children:p(t,{className:l(o.swatch,O?.swatch),style:k?.swatch,children:[f(`div`,{className:o.swatchFill,style:{background:Z}}),f(`span`,{className:o.swatchHex,children:Q})]})}),m&&f(S,{hex:Q,onChange:e=>d?.(e),useInputComponent:!0})]})}export{E as default};
+"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../interactableDiv/index.mjs";import{PopoverAlign as n,PopoverPlacement as r}from"../popover/popover.types.mjs";import i from"../popover/popover.mjs";import a from"../input/input.mjs";import{toHex as o}from"./toHex.mjs";import s from"./colorPicker.module.mjs";import{useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as d}from"@fortawesome/react-fontawesome";import{faEyeDropper as f}from"@fortawesome/free-solid-svg-icons";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h=typeof window<`u`&&`EyeDropper`in window;async function g(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function _(e){return Math.max(0,Math.min(100,e))}function v(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function y(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:parseInt(e.slice(7,9),16)/255*100}:{hex6:e.slice(0,7),alpha:100}}function b(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function x(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function S(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o*=60,o<0&&(o+=360));let s=i===0?0:a/i*100,c=i*100;return{h:o,s,v:c}}function C(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function w({hex:e,onChange:t,useInputComponent:n=!1,className:r,style:i}){let[o,c]=l(e),[d,f]=l(e);e!==d&&(f(e),c(e));function m(e){c(e);let n=e.startsWith(`#`)?e:`#${e}`;v(n)&&t(n)}function h(){v(o.startsWith(`#`)?o:`#${o}`)||c(e)}return n?p(a,{value:o,onChange:e=>m(e),onBlur:h}):p(`input`,{type:`text`,value:o,onChange:e=>m(e.target.value),onBlur:h,className:u(s.hexInput,r),style:i,spellCheck:!1})}function T({hue:e,sat:t,val:n,alpha:r,onHueChange:i,onSVChange:a,onAlphaChange:o,showInput:l=!0,showAlpha:v=!1,labels:x,classNames:T,styles:E}){let D=c(null);function O(e){let t=D.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function k(e){let r=e.shiftKey?10:1,i=t,o=n;switch(e.key){case`ArrowLeft`:i-=r;break;case`ArrowRight`:i+=r;break;case`ArrowUp`:o+=r;break;case`ArrowDown`:o-=r;break;case`Home`:i=0;break;case`End`:i=100;break;case`PageUp`:o=100;break;case`PageDown`:o=0;break;default:return}e.preventDefault(),a(_(i),_(o))}function A(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=O(e);a(t,n);let r=e=>{let{s:t,v:n}=O(e);a(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function j(e){let{hex6:t,alpha:n}=y(e),{h:r,s,v:c}=S(t);i(r),a(s,c),v&&o(n)}let M=C(e,t,n),N=v?b(M,r,!0):M;return m(`div`,{className:u(s.panel,T?.panel),style:E?.panel,children:[m(`div`,{ref:D,role:`slider`,tabIndex:0,"aria-label":x.saturationAndBrightness,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(t),"aria-valuetext":x.saturationAndBrightnessValue(Math.round(t),Math.round(n)),className:u(s.gradientArea,T?.gradient),style:{"--hue":e,...E?.gradient},onPointerDown:A,onKeyDown:k,children:[p(`div`,{className:s.gradientOverlay}),p(`div`,{className:s.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),p(`input`,{type:`range`,min:0,max:359,value:Math.round(e),onChange:e=>i(Number(e.target.value)),className:u(s.hueSlider,T?.hueSlider),style:E?.hueSlider}),v&&p(`input`,{type:`range`,min:0,max:100,value:Math.round(r),onChange:e=>o(Number(e.target.value)),className:u(s.alphaSlider,T?.alphaSlider),style:{"--alpha-color":M,...E?.alphaSlider}}),(l||h)&&m(`div`,{className:s.hexRow,children:[l&&p(w,{hex:N,onChange:j,className:T?.hexInput,style:E?.hexInput}),h&&p(`button`,{type:`button`,className:u(s.eyeDropperButton,T?.eyeDropper),style:E?.eyeDropper,onClick:async()=>{let e=await g();e&&j(e)},"aria-label":x.pickFromScreen,children:p(d,{icon:f})})]})]})}var E=`#3b82f6`,D={pickFromScreen:`Pick color from screen`,saturationAndBrightness:`Saturation and brightness`,saturationAndBrightnessValue:(e,t)=>`${e}% saturation, ${t}% brightness`};function O({className:a,value:d=E,onChange:f,showInput:h=!1,showAlpha:g=!1,inline:_=!1,labels:v,style:O,classNames:k,styles:A,...j}){let M=e(`ColorPicker`,v,D),[N,P]=l(!1),{hex6:F,alpha:I}=y(o(d)??E),L=S(F),[R,z]=l({h:L.h,s:L.s,v:L.v,a:I}),B=c(R),[V,H]=l(d);if(d!==V){H(d);let{hex6:e,alpha:t}=y(o(d)??E);if(e!==C(R.h,R.s,R.v)||t!==R.a){let n=S(e);z({h:n.h,s:n.s,v:n.v,a:t})}}let{h:U,s:W,v:G,a:K}=R;function q(e,t,n,r){f?.(b(C(e,t,n),r,g))}function J(e){B.current.h=e,z(t=>({...t,h:e})),q(e,B.current.s,B.current.v,B.current.a)}function Y(e,t){B.current.s=e,B.current.v=t,z(n=>({...n,s:e,v:t})),q(B.current.h,e,t,B.current.a)}function X(e){B.current.a=e,z(t=>({...t,a:e})),q(B.current.h,B.current.s,B.current.v,e)}let Z=C(U,W,G),ee=g?x(Z,K):Z,Q=b(Z,K,g),$={hue:U,sat:W,val:G,alpha:K,onHueChange:J,onSVChange:Y,onAlphaChange:X,showAlpha:g,labels:M,classNames:k,styles:A};return _?p(`div`,{...j,className:u(s.colorPicker,a,k?.root),style:{...O,...A?.root},children:p(T,{...$,showInput:h})}):m(`div`,{...j,className:u(s.colorPicker,a),children:[p(i,{isOpen:N,onOpenChange:P,placement:r.Bottom,align:n.Start,constrainWidth:!1,content:p(T,{...$}),children:m(t,{role:`button`,tabIndex:0,"aria-haspopup":`dialog`,"aria-expanded":N,className:u(s.swatch,k?.swatch),style:A?.swatch,children:[p(`div`,{className:s.swatchFill,style:{background:ee}}),p(`span`,{className:s.swatchHex,children:Q})]})}),h&&p(w,{hex:Q,onChange:e=>f?.(e),useInputComponent:!0})]})}export{O as default};
 //# sourceMappingURL=colorPicker.mjs.map

package/dist/esm/common/colorPicker/colorPicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerLabels, ColorPickerProps, ColorPickerSlots } from './colorPicker.types';\nimport type { SlotClassNames, SlotStyles } from '../types/slots.types';\nimport { useLabels } from '../configProvider';\n// Aliased: `hsvToHex` has a local `toHex` that formats one channel byte, which is a\n// different job from normalising a whole CSS colour.\nimport { toHex as cssToHex } from './toHex';\n\nimport styles from './colorPicker.module.pcss';\n\ninterface EyeDropperConstructor {\n new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string \| null> {\n const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n if (!EyeDropperCtor) return null;\n try {\n const result = await new EyeDropperCtor().open();\n return result.sRGBHex;\n } catch {\n return null; // user cancelled or picker failed\n }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction isValidHex(s: string): boolean {\n return /^#[0-9a-fA-F]{6}$/.test(s) \|\| /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. /\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n return {\n hex6: hex.slice(0, 7),\n alpha: (parseInt(hex.slice(7, 9), 16) / 255) 100,\n };\n }\n return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n * Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. /\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n if (!showAlpha \|\| alpha >= 100) return hex6;\n const a = Math.round((alpha / 100) 255)\n .toString(16)\n .padStart(2, '0');\n return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n const r = parseInt(hex6.slice(1, 3), 16);\n const g = parseInt(hex6.slice(3, 5), 16);\n const b = parseInt(hex6.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n const r = parseInt(hex6.slice(1, 3), 16) / 255;\n const g = parseInt(hex6.slice(3, 5), 16) / 255;\n const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = ((g - b) / delta) % 6;\n else if (max === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n h = 60;\n if (h < 0) h += 360;\n }\n\n // Deliberately unrounded: hsvToHex rounds once, at the byte. Rounding here too costs up to a\n // unit per channel, so a value handed in would come back out changed (#3b82f6 -> #3b82f5).\n const s = max === 0 ? 0 : (delta / max) 100;\n const v = max * 100;\n\n return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n const sv = s / 100;\n const vv = v / 100;\n const c = vv * sv;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vv - c;\n\n let r = 0,\n g = 0,\n b = 0;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n const toHex = (n: number) =>\n Math.round((n + m) * 255)\n .toString(16)\n .padStart(2, '0');\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n className?: string;\n style?: React.CSSProperties;\n hex: string;\n onChange: (hex: string) => void;\n useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false, className, style }: HexInputProps): ReactElement {\n const [draft, setDraft] = useState(hex);\n\n const [prevHex, setPrevHex] = useState(hex);\n if (hex !== prevHex) {\n setPrevHex(hex);\n setDraft(hex);\n }\n\n function handleChange(raw: string) {\n setDraft(raw);\n const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n if (isValidHex(normalized)) onChange(normalized);\n }\n\n function handleBlur() {\n const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n if (!isValidHex(normalized)) setDraft(hex);\n }\n\n if (useInputComponent) {\n return <Input value={draft} onChange={(value: string) => handleChange(value)} onBlur={handleBlur} />;\n }\n\n return (\n <input\n type='text'\n value={draft}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={handleBlur}\n className={cx(styles.hexInput, className)}\n style={style}\n spellCheck={false}\n />\n );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n hue: number;\n sat: number;\n val: number;\n alpha: number;\n onHueChange: (h: number) => void;\n onSVChange: (s: number, v: number) => void;\n onAlphaChange: (a: number) => void;\n showInput?: boolean;\n showAlpha?: boolean;\n labels: Required<ColorPickerLabels>;\n classNames?: SlotClassNames<ColorPickerSlots>;\n styles?: SlotStyles<ColorPickerSlots>;\n}\n\nfunction PickerPanel({\n hue,\n sat,\n val,\n alpha,\n onHueChange,\n onSVChange,\n onAlphaChange,\n showInput = true,\n showAlpha = false,\n labels,\n classNames,\n styles: slotStyles,\n}: PickerPanelProps): ReactElement {\n const gradientRef = useRef<HTMLDivElement>(null);\n\n function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n const rect = gradientRef.current!.getBoundingClientRect();\n const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n return { s: x * 100, v: (1 - y) * 100 };\n }\n\n // Pointer Events (not mouse events) so dragging works for touch/pen too.\n function onGradientPointerDown(e: React.PointerEvent) {\n e.currentTarget.setPointerCapture(e.pointerId);\n const { s, v } = getSVFromEvent(e);\n onSVChange(s, v);\n\n const onMove = (ev: PointerEvent) => {\n const { s, v } = getSVFromEvent(ev);\n onSVChange(s, v);\n };\n const onUp = () => {\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n }\n\n function onHexChange(normalized: string) {\n const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n const { h, s, v } = hexToHsv(hex6);\n onHueChange(h);\n onSVChange(s, v);\n if (showAlpha) onAlphaChange(parsedAlpha);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n return (\n <div className={cx(styles.panel, classNames?.panel)} style={slotStyles?.panel}>\n <div\n ref={gradientRef}\n className={cx(styles.gradientArea, classNames?.gradient)}\n style={{ '--hue': hue, ...slotStyles?.gradient } as React.CSSProperties}\n onPointerDown={onGradientPointerDown}\n >\n <div className={styles.gradientOverlay} />\n <div className={styles.cursor} style={{ left: `${sat}%`, top: `${100 - val}%` }} />\n </div>\n\n <input\n type='range'\n min={0}\n max={359}\n value={Math.round(hue)}\n onChange={(e) => onHueChange(Number(e.target.value))}\n className={cx(styles.hueSlider, classNames?.hueSlider)}\n style={slotStyles?.hueSlider}\n />\n\n {showAlpha && (\n <input\n type='range'\n min={0}\n max={100}\n value={Math.round(alpha)}\n onChange={(e) => onAlphaChange(Number(e.target.value))}\n className={cx(styles.alphaSlider, classNames?.alphaSlider)}\n style={{ '--alpha-color': hex6, ...slotStyles?.alphaSlider } as React.CSSProperties}\n />\n )}\n\n {(showInput \|\| eyeDropperSupported) && (\n <div className={styles.hexRow}>\n {showInput && (\n <HexInput\n hex={hexInputValue}\n onChange={onHexChange}\n className={classNames?.hexInput}\n style={slotStyles?.hexInput}\n />\n )}\n {eyeDropperSupported && (\n <button\n type='button'\n className={cx(styles.eyeDropperButton, classNames?.eyeDropper)}\n style={slotStyles?.eyeDropper}\n onClick={async () => {\n const hex = await pickColorFromScreen();\n if (hex) onHexChange(hex);\n }}\n aria-label={labels.pickFromScreen}\n >\n <FontAwesomeIcon icon={faEyeDropper} />\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nconst DEFAULT_LABELS: Required<ColorPickerLabels> = {\n pickFromScreen: 'Pick color from screen',\n};\n\nfunction ColorPicker({\n className,\n value = DEFAULT_COLOR,\n onChange,\n showInput = false,\n showAlpha = false,\n inline = false,\n labels,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: ColorPickerProps): ReactElement {\n const text = useLabels('ColorPicker', labels, DEFAULT_LABELS);\n const [isOpen, setIsOpen] = useState(false);\n\n const initSafe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n const initHsv = hexToHsv(initHex6);\n\n // Single state object so hue survives when saturation/value hit 0\n // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n // Ref mirrors state so drag callbacks never read stale closure values.\n const cur = useRef(hsva);\n\n // Sync from external prop changes: \"derive state during render\" pattern\n // avoids setState-in-effect. We compare the incoming hex against what our\n // current state produces — if they match, the change came from us and we skip.\n const [prevValue, setPrevValue] = useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n const safe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n if (incomingHex6 !== currentHex6 \|\| incomingA !== hsva.a) {\n const hsv = hexToHsv(incomingHex6);\n const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n setHsva(next);\n }\n }\n\n const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n function emit(h: number, s: number, v: number, a: number) {\n onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n }\n\n function handleHueChange(h: number) {\n cur.current.h = h;\n setHsva((prev) => ({ ...prev, h }));\n emit(h, cur.current.s, cur.current.v, cur.current.a);\n }\n\n function handleSVChange(s: number, v: number) {\n cur.current.s = s;\n cur.current.v = v;\n setHsva((prev) => ({ ...prev, s, v }));\n emit(cur.current.h, s, v, cur.current.a);\n }\n\n function handleAlphaChange(a: number) {\n cur.current.a = a;\n setHsva((prev) => ({ ...prev, a }));\n emit(cur.current.h, cur.current.s, cur.current.v, a);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n const displayValue = buildValue(hex6, alpha, showAlpha);\n\n const pickerPanelProps: PickerPanelProps = {\n hue,\n sat,\n val,\n alpha,\n onHueChange: handleHueChange,\n onSVChange: handleSVChange,\n onAlphaChange: handleAlphaChange,\n showAlpha,\n labels: text,\n classNames,\n styles: slotStyles,\n };\n\n if (inline) {\n return (\n <div\n {...rest}\n className={cx(styles.colorPicker, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <PickerPanel {...pickerPanelProps} showInput={showInput} />\n </div>\n );\n }\n\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n dontCloseOnChildClick\n align={Align.Left}\n content={<PickerPanel {...pickerPanelProps} />}\n >\n <InteractableDiv className={cx(styles.swatch, classNames?.swatch)} style={slotStyles?.swatch}>\n <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n <span className={styles.swatchHex}>{displayValue}</span>\n </InteractableDiv>\n </FloatingMenu>\n\n {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n </div>\n );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}
1	+ {"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport Popover from 'components/common/popover';\nimport Input from 'components/common/input';\nimport { PopoverAlign, PopoverPlacement } from 'components/common/popover/popover.types';\nimport type { ColorPickerLabels, ColorPickerProps, ColorPickerSlots } from './colorPicker.types';\nimport type { SlotClassNames, SlotStyles } from '../types/slots.types';\nimport { useLabels } from '../configProvider';\n// Aliased: `hsvToHex` has a local `toHex` that formats one channel byte, which is a\n// different job from normalising a whole CSS colour.\nimport { toHex as cssToHex } from './toHex';\n\nimport styles from './colorPicker.module.pcss';\n\ninterface EyeDropperConstructor {\n new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string \| null> {\n const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n if (!EyeDropperCtor) return null;\n try {\n const result = await new EyeDropperCtor().open();\n return result.sRGBHex;\n } catch {\n return null; // user cancelled or picker failed\n }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction clampPercent(n: number): number {\n return Math.max(0, Math.min(100, n));\n}\n\nfunction isValidHex(s: string): boolean {\n return /^#[0-9a-fA-F]{6}$/.test(s) \|\| /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. /\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n return {\n hex6: hex.slice(0, 7),\n alpha: (parseInt(hex.slice(7, 9), 16) / 255) 100,\n };\n }\n return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n * Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. /\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n if (!showAlpha \|\| alpha >= 100) return hex6;\n const a = Math.round((alpha / 100) 255)\n .toString(16)\n .padStart(2, '0');\n return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n const r = parseInt(hex6.slice(1, 3), 16);\n const g = parseInt(hex6.slice(3, 5), 16);\n const b = parseInt(hex6.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n const r = parseInt(hex6.slice(1, 3), 16) / 255;\n const g = parseInt(hex6.slice(3, 5), 16) / 255;\n const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = ((g - b) / delta) % 6;\n else if (max === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n h = 60;\n if (h < 0) h += 360;\n }\n\n // Deliberately unrounded: hsvToHex rounds once, at the byte. Rounding here too costs up to a\n // unit per channel, so a value handed in would come back out changed (#3b82f6 -> #3b82f5).\n const s = max === 0 ? 0 : (delta / max) 100;\n const v = max * 100;\n\n return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n const sv = s / 100;\n const vv = v / 100;\n const c = vv * sv;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vv - c;\n\n let r = 0,\n g = 0,\n b = 0;\n if (h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n const toHex = (n: number) =>\n Math.round((n + m) * 255)\n .toString(16)\n .padStart(2, '0');\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n className?: string;\n style?: React.CSSProperties;\n hex: string;\n onChange: (hex: string) => void;\n useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false, className, style }: HexInputProps): ReactElement {\n const [draft, setDraft] = useState(hex);\n\n const [prevHex, setPrevHex] = useState(hex);\n if (hex !== prevHex) {\n setPrevHex(hex);\n setDraft(hex);\n }\n\n function handleChange(raw: string) {\n setDraft(raw);\n const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n if (isValidHex(normalized)) onChange(normalized);\n }\n\n function handleBlur() {\n const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n if (!isValidHex(normalized)) setDraft(hex);\n }\n\n if (useInputComponent) {\n return <Input value={draft} onChange={(value: string) => handleChange(value)} onBlur={handleBlur} />;\n }\n\n return (\n <input\n type='text'\n value={draft}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={handleBlur}\n className={cx(styles.hexInput, className)}\n style={style}\n spellCheck={false}\n />\n );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n hue: number;\n sat: number;\n val: number;\n alpha: number;\n onHueChange: (h: number) => void;\n onSVChange: (s: number, v: number) => void;\n onAlphaChange: (a: number) => void;\n showInput?: boolean;\n showAlpha?: boolean;\n labels: Required<ColorPickerLabels>;\n classNames?: SlotClassNames<ColorPickerSlots>;\n styles?: SlotStyles<ColorPickerSlots>;\n}\n\nfunction PickerPanel({\n hue,\n sat,\n val,\n alpha,\n onHueChange,\n onSVChange,\n onAlphaChange,\n showInput = true,\n showAlpha = false,\n labels,\n classNames,\n styles: slotStyles,\n}: PickerPanelProps): ReactElement {\n const gradientRef = useRef<HTMLDivElement>(null);\n\n function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n const rect = gradientRef.current!.getBoundingClientRect();\n const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n return { s: x * 100, v: (1 - y) * 100 };\n }\n\n function onGradientKeyDown(e: React.KeyboardEvent) {\n const step = e.shiftKey ? 10 : 1;\n let s = sat;\n let v = val;\n switch (e.key) {\n case 'ArrowLeft':\n s -= step;\n break;\n case 'ArrowRight':\n s += step;\n break;\n case 'ArrowUp':\n v += step;\n break;\n case 'ArrowDown':\n v -= step;\n break;\n case 'Home':\n s = 0;\n break;\n case 'End':\n s = 100;\n break;\n case 'PageUp':\n v = 100;\n break;\n case 'PageDown':\n v = 0;\n break;\n default:\n return;\n }\n e.preventDefault();\n onSVChange(clampPercent(s), clampPercent(v));\n }\n\n // Pointer Events (not mouse events) so dragging works for touch/pen too.\n function onGradientPointerDown(e: React.PointerEvent) {\n e.currentTarget.setPointerCapture(e.pointerId);\n const { s, v } = getSVFromEvent(e);\n onSVChange(s, v);\n\n const onMove = (ev: PointerEvent) => {\n const { s, v } = getSVFromEvent(ev);\n onSVChange(s, v);\n };\n const onUp = () => {\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n }\n\n function onHexChange(normalized: string) {\n const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n const { h, s, v } = hexToHsv(hex6);\n onHueChange(h);\n onSVChange(s, v);\n if (showAlpha) onAlphaChange(parsedAlpha);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n return (\n <div className={cx(styles.panel, classNames?.panel)} style={slotStyles?.panel}>\n {/* Two axes on one control, which ARIA has no role for. `slider` on the\n horizontal axis is the closest fit, with both numbers in `aria-valuetext`. /}\n <div\n ref={gradientRef}\n role='slider'\n tabIndex={0}\n aria-label={labels.saturationAndBrightness}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={Math.round(sat)}\n aria-valuetext={labels.saturationAndBrightnessValue(Math.round(sat), Math.round(val))}\n className={cx(styles.gradientArea, classNames?.gradient)}\n style={{ '--hue': hue, ...slotStyles?.gradient } as React.CSSProperties}\n onPointerDown={onGradientPointerDown}\n onKeyDown={onGradientKeyDown}\n >\n <div className={styles.gradientOverlay} />\n <div className={styles.cursor} style={{ left: `${sat}%`, top: `${100 - val}%` }} />\n </div>\n\n <input\n type='range'\n min={0}\n max={359}\n value={Math.round(hue)}\n onChange={(e) => onHueChange(Number(e.target.value))}\n className={cx(styles.hueSlider, classNames?.hueSlider)}\n style={slotStyles?.hueSlider}\n />\n\n {showAlpha && (\n <input\n type='range'\n min={0}\n max={100}\n value={Math.round(alpha)}\n onChange={(e) => onAlphaChange(Number(e.target.value))}\n className={cx(styles.alphaSlider, classNames?.alphaSlider)}\n style={{ '--alpha-color': hex6, ...slotStyles?.alphaSlider } as React.CSSProperties}\n />\n )}\n\n {(showInput \|\| eyeDropperSupported) && (\n <div className={styles.hexRow}>\n {showInput && (\n <HexInput\n hex={hexInputValue}\n onChange={onHexChange}\n className={classNames?.hexInput}\n style={slotStyles?.hexInput}\n />\n )}\n {eyeDropperSupported && (\n <button\n type='button'\n className={cx(styles.eyeDropperButton, classNames?.eyeDropper)}\n style={slotStyles?.eyeDropper}\n onClick={async () => {\n const hex = await pickColorFromScreen();\n if (hex) onHexChange(hex);\n }}\n aria-label={labels.pickFromScreen}\n >\n <FontAwesomeIcon icon={faEyeDropper} />\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nconst DEFAULT_LABELS: Required<ColorPickerLabels> = {\n pickFromScreen: 'Pick color from screen',\n saturationAndBrightness: 'Saturation and brightness',\n saturationAndBrightnessValue: (saturation, brightness) => `${saturation}% saturation, ${brightness}% brightness`,\n};\n\nfunction ColorPicker({\n className,\n value = DEFAULT_COLOR,\n onChange,\n showInput = false,\n showAlpha = false,\n inline = false,\n labels,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: ColorPickerProps): ReactElement {\n const text = useLabels('ColorPicker', labels, DEFAULT_LABELS);\n const [isOpen, setIsOpen] = useState(false);\n\n const initSafe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n const initHsv = hexToHsv(initHex6);\n\n // Single state object so hue survives when saturation/value hit 0\n // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n // Ref mirrors state so drag callbacks never read stale closure values.\n const cur = useRef(hsva);\n\n // Sync from external prop changes: \"derive state during render\" pattern\n // avoids setState-in-effect. We compare the incoming hex against what our\n // current state produces — if they match, the change came from us and we skip.\n const [prevValue, setPrevValue] = useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n const safe = cssToHex(value) ?? DEFAULT_COLOR;\n const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n if (incomingHex6 !== currentHex6 \|\| incomingA !== hsva.a) {\n const hsv = hexToHsv(incomingHex6);\n const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n setHsva(next);\n }\n }\n\n const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n function emit(h: number, s: number, v: number, a: number) {\n onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n }\n\n function handleHueChange(h: number) {\n cur.current.h = h;\n setHsva((prev) => ({ ...prev, h }));\n emit(h, cur.current.s, cur.current.v, cur.current.a);\n }\n\n function handleSVChange(s: number, v: number) {\n cur.current.s = s;\n cur.current.v = v;\n setHsva((prev) => ({ ...prev, s, v }));\n emit(cur.current.h, s, v, cur.current.a);\n }\n\n function handleAlphaChange(a: number) {\n cur.current.a = a;\n setHsva((prev) => ({ ...prev, a }));\n emit(cur.current.h, cur.current.s, cur.current.v, a);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n const displayValue = buildValue(hex6, alpha, showAlpha);\n\n const pickerPanelProps: PickerPanelProps = {\n hue,\n sat,\n val,\n alpha,\n onHueChange: handleHueChange,\n onSVChange: handleSVChange,\n onAlphaChange: handleAlphaChange,\n showAlpha,\n labels: text,\n classNames,\n styles: slotStyles,\n };\n\n if (inline) {\n return (\n <div\n {...rest}\n className={cx(styles.colorPicker, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <PickerPanel {...pickerPanelProps} showInput={showInput} />\n </div>\n );\n }\n\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <Popover\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n placement={PopoverPlacement.Bottom}\n align={PopoverAlign.Start}\n // The panel sets its own 224px width.\n constrainWidth={false}\n content={<PickerPanel {...pickerPanelProps} />}\n >\n {/ The click handler is on Popover's wrapper, so `InteractableDiv` would\n give the swatch neither a tab stop nor a role of its own. */}\n <InteractableDiv\n role='button'\n tabIndex={0}\n aria-haspopup='dialog'\n aria-expanded={isOpen}\n className={cx(styles.swatch, classNames?.swatch)}\n style={slotStyles?.swatch}\n >\n <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n <span className={styles.swatchHex}>{displayValue}</span>\n </InteractableDiv>\n </Popover>\n\n {showInput && <HexInput hex={displayValue} onChange={(v) => onChange?.(v)} useInputComponent />}\n </div>\n );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/dist/esm/common/colorPicker/colorPicker.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`colorPicker_Ts3an`,t=`swatch_NW78g`,n=`swatchHex_j7-i5`,r=`swatchFill_oNtHf`,i=`panel_WXEvY`,a=`gradientArea_qEZim`,o=`gradientOverlay_ZQybe`,s=`cursor_m67Lm`,c=`hueSlider_k3Knb`,l=`alphaSlider_OT2sD`,u=`hexRow_L4bZU`,d=`hexInput_zQw4s`,f=`eyeDropperButton_dOyRX`,p={colorPicker:e,swatch:t,swatchHex:n,swatchFill:r,panel:i,gradientArea:a,gradientOverlay:o,cursor:s,hueSlider:c,alphaSlider:l,hexRow:u,hexInput:d,eyeDropperButton:f};export{l as alphaSlider,e as colorPicker,s as cursor,p as default,f as eyeDropperButton,a as gradientArea,o as gradientOverlay,d as hexInput,u as hexRow,c as hueSlider,i as panel,t as swatch,r as swatchFill,n as swatchHex};
+"use client";var e=`colorPicker_Ts3an`,t=`swatch_NW78g`,n=`swatchHex_j7-i5`,r=`swatchFill_oNtHf`,i=`panel_WXEvY`,a=`gradientArea_qEZim`,o=`gradientOverlay_ZQybe`,s=`cursor_m67Lm`,c=`hueSlider_k3Knb`,l=`alphaSlider_OT2sD`,u=`hexRow_L4bZU`,d=`hexInput_zQw4s`,f=`eyeDropperButton_dOyRX`,p={colorPicker:e,swatch:t,swatchHex:n,swatchFill:r,panel:i,gradientArea:a,gradientOverlay:o,cursor:s,hueSlider:c,alphaSlider:l,hexRow:u,hexInput:d,eyeDropperButton:f};export{l as alphaSlider,e as colorPicker,s as cursor,p as default,f as eyeDropperButton,a as gradientArea,o as gradientOverlay,d as hexInput,u as hexRow,c as hueSlider,i as panel,t as swatch,r as swatchFill,n as swatchHex};
 //# sourceMappingURL=colorPicker.module.mjs.map