npm - @ahrowe/ui - Versions diffs - 0.42.0 → 0.44.0 - Mend

@ahrowe/ui 0.42.0 → 0.44.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 (332) hide show

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":"~~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"}
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 Loader from '../loader';\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 aria-busy={isLoading \|\| rest['aria-busy'] \|\| 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 {/ Hidden: a checkbox takes its name from its content, and would be read as \"Loading <label>\". */}\n <Loader size='100%' aria-hidden />\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":"oVASA,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,GAC3B,YAAW,GAAa,EAAK,cAAgB,IAAA,GACnC,WApBZ,SAAA,CAsBE,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,EAEhE,SAAA,EAAC,EAAD,CAAQ,KAAK,OAAO,cAAA,EAAa,CAAA,CAC9B,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 @@
-"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};
+"use client";var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-pointer_XnO8e`,a=`checkbox-disabled_ML2rR`,o=`checkbox-checkmark_Xclv9`,s=`checkbox-checkmark-checked_mD4FI`,c={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-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:i,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:a,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:o,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:s};export{e as checkbox,o as checkboxCheckmark,s as checkboxCheckmarkChecked,a as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxPointer,c 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\n@media (prefers-reduced-motion: reduce) {\n .checkbox-checkmark svg {\n transition: none;\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\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 @@
-"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};
+"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{ThemeColor as r}from"../themeProvider/color.types.mjs";import{toneProps as i,useToneCheck as a}from"../styles/tone.mjs";import o from"../ripple/ripple.mjs";import s from"../actionIcon/actionIcon.mjs";import c from"../interactableDiv/index.mjs";import{ChipStyleType as l}from"./chip.types.mjs";import u from"./chip.module.mjs";import{useMemo as d,useRef as f}from"react";import p from"classnames";import{faXmarkCircle as m}from"@fortawesome/free-solid-svg-icons";import{jsx as h,jsxs as g}from"react/jsx-runtime";var _={filled:u.chipStyleFilled,light:u.chipStyleLight,outlined:u.chipStyleOutlined},v={remove:`Remove`};function y(y){let{className:b=``,thumbnail:x=``,text:S=``,styleType:C=l.Light,color:w=r.Neutral,showRemoveIcon:T=!1,labels:E,onClick:D,onRemove:O,style:k,classNames:A,styles:j,...M}=e(`Chip`,y),N=t(`Chip`,E,v),P=f(null),F=i(w);a(`Chip`,[w]);function I(e){D&&n(e)&&P.current?.addRipple()}let L=d(()=>{if(typeof x==`string`&&x.startsWith(`http`))return x},[x]);return h(c,{...M,className:p(u.chip,F.className,_[C],D&&u.chipClickable,b,A?.root),style:{...F.style,...k,...j?.root},onClick:D,onKeyDown:I,children:h(o,{ref:P,disabled:!D,style:{borderRadius:`inherit`},children:g(`div`,{className:p(u.chipInner,A?.inner),style:j?.inner,children:[x&&h(`div`,{className:p(u.chipThumbnail,A?.thumbnail),style:{...L?{backgroundImage:`url(${L})`}:{},...j?.thumbnail},children:!L&&x}),h(`div`,{className:p(u.chipText,A?.text),style:j?.text,children:S}),T&&h(s,{icon:m,className:A?.removeIcon,style:j?.removeIcon,"aria-label":N.remove,onClick:e=>{e.stopPropagation(),O?.()}})]})})})}export{y 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":"~~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"}
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';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n filled: styles.chipStyleFilled,\n light: styles.chipStyleLight,\n outlined: styles.chipStyleOutlined,\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.Light,\n color = ThemeColor.Neutral,\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 const tone = toneProps(color);\n useToneCheck('Chip', [color]);\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 tone.className,\n CLASS_BY_STYLE[styleType],\n onClick && styles.chipClickable,\n className,\n classNames?.root,\n )}\n style={{ ...tone.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":"guBAiBA,IAAM,EAAgD,CACpD,OAAQ,EAAO,gBACf,MAAO,EAAO,eACd,SAAU,EAAO,iBACnB,EAEM,EAAuC,CAC3C,OAAQ,QACV,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,MAC1B,QAAQ,EAAW,QACnB,iBAAiB,GACjB,SACA,UACA,WACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,EAAU,OAAQ,EAAQ,CAAc,EACzD,EAAY,EAAqB,IAAI,EACrC,EAAO,EAAU,CAAK,EAC5B,EAAa,OAAQ,CAAC,CAAK,CAAC,EAI5B,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,EAAK,UACL,EAAe,GACf,GAAW,EAAO,cAClB,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,EAAO,GAAG,GAAY,IAAK,EAC7C,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 @@
-"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};
+"use client";var e=`chip_rCTMl`,t=`chip-clickable_WTVjG`,n=`chip-style-filled_gYANL`,r=`chip-style-light_5J4XG`,i=`chip-style-outlined_JFI-K`,a=`chip-inner_mfo-w`,o=`chip-text_d1juf`,s=`chip-thumbnail_-A7eU`,c=`chip-container_oNNmF`,l=`chip-container-inline_11QHw`,u={chip:e,"chip-clickable":`chip-clickable_WTVjG`,chipClickable:t,"chip-style-filled":`chip-style-filled_gYANL`,chipStyleFilled:n,"chip-style-light":`chip-style-light_5J4XG`,chipStyleLight:r,"chip-style-outlined":`chip-style-outlined_JFI-K`,chipStyleOutlined:i,"chip-inner":`chip-inner_mfo-w`,chipInner:a,"chip-text":`chip-text_d1juf`,chipText:o,"chip-thumbnail":`chip-thumbnail_-A7eU`,chipThumbnail:s,"chip-container":`chip-container_oNNmF`,chipContainer:c,"chip-container-inline":`chip-container-inline_11QHw`,chipContainerInline:l};export{e as chip,t as chipClickable,c as chipContainer,l as chipContainerInline,a as chipInner,n as chipStyleFilled,r as chipStyleLight,i as chipStyleOutlined,o as chipText,s as chipThumbnail,u as default};
 //# sourceMappingURL=chip.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n ~~background: rgb(0 0 0 / 8%);\n~~ border-radius: 99999px;\n width: fit-content;\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-style {\n &-~~default~~ {\n background: ~~rgb(0 0 0 / 8%);\n color:~~ var(--~~text~~-~~color~~);\n }\n~~\n &-primary {\n~~ ~~background: var(--primary-color);\n\n~~ /* Must follow the shorthand above, which resets background-image. /\n background-image: var(--~~primary~~-gradient~~, none~~);\n color: var(--~~text~~-~~on-primary~~);\n }\n\n &-~~info~~ {\n background: var(--~~info~~-~~lighter~~);\n color: var(--~~info~~-~~color~~);\n }\n\n ~~&-warn~~ ~~{\n background:~~ ~~var(--warn-lighter);\n color:~~ ~~var(--warn-color);\~~n ~~}\n\n~~ &-~~error~~ {\n ~~background~~: var(--~~error~~-~~lighter~~);\n color: var(--~~error~~-~~color~~);\n }\n }\n\n &-inner {\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 4px 8px;\n\n & > {\n white-space: nowrap;\n }\n }\n\n &-text {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n height: 18px;\n background: rgb(0 0 0 / 8%);\n border-radius: 18px;\n overflow: hidden;\n background-size: cover;\n }\n\n &-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n\n &-inline {\n flex-wrap: nowrap;\n overflow: auto;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n border-radius: 99999px;\n width: fit-content;\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-style {\n &-filled {\n background: var(--tone-fill);\n\n /* Must follow the shorthand above, which resets background-image. /\n background-image: var(--tone-gradient);\n color: var(--tone-contrast);\n }\n\n &-light {\n background: var(--tone-light);\n color: var(--tone-text);\n }\n\n / An inset shadow rather than a border, so an outlined chip is exactly as big as the rest. /\n &-outlined {\n box-shadow: inset 0 0 0 1px var(--tone-outline);\n color: var(--tone-text);\n }\n }\n\n &-inner {\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 4px 8px;\n\n & > {\n white-space: nowrap;\n }\n }\n\n &-text {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n height: 18px;\n background: rgb(0 0 0 / 8%);\n border-radius: 18px;\n overflow: hidden;\n background-size: cover;\n }\n\n &-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n\n &-inline {\n flex-wrap: nowrap;\n overflow: auto;\n }\n }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-"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};
+"use client";var e=function(e){return e.Filled=`filled`,e.Light=`light`,e.Outlined=`outlined`,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';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/** How much the chip stands out. Independent of its colour. /\nexport enum ChipStyleType {\n /* Solid fill. /\n Filled = 'filled',\n /* A light tint of the colour behind text in the colour. The default. /\n Light = 'light',\n /* Border and text in the colour, no fill. /\n Outlined = 'outlined',\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 /* A `ThemeColor` (default `Neutral`) or any CSS colour, such as `'var(--brand)'`. /\n color?: ColorValue;\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":"aAIA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,MAAA,QAEA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA"}

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n /* The swatch sits inline beside a label, so it tracks the text. The panel below deliberately\n does not: its layout is fixed and it holds up fine at a large base font. /\n --custom-swatch-size: var(--swatch-size, 2em);\n\n display: flex;\n align-items: center;\n gap: 0.5em;\n\n / The visible swatch (below) is nested inside a Popover trigger, not this root — 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 --swatch-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\n.swatch {\n width: var(--custom-swatch-size);\n height: var(--custom-swatch-size);\n border-radius: var(--swatch-radius);\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n flex-shrink: 0;\n box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);\n\n /* checkerboard so transparency is visible /\n background-image:\n linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size: 0.5em 0.5em;\n background-position:\n 0 0,\n 0 0.25em,\n 0.25em -0.25em,\n -0.25em 0;\n\n / Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n only be judged against a fixed neutral. Theming it would make a swatch read differently\n in every theme. /\n background-color: white;\n\n &:hover {\n & .swatchHex {\n opacity: 1;\n }\n }\n}\n\n.swatchFill {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n}\n\n.swatchHex {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.5em;\n font-family: var(--monospace-font, monospace);\n\n / White on a fixed scrim, not on the theme: the label sits over the swatch's own colour,\n which the theme does not control. /\n background: rgb(0 0 0 / 55%);\n color: white;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.15s;\n user-select: none;\n pointer-events: none;\n z-index: 1;\n}\n\n.panel {\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 224px;\n}\n\n.gradientArea {\n width: 200px;\n height: 160px;\n position: relative;\n cursor: crosshair;\n border-radius: 4px;\n overflow: hidden;\n touch-action: none;\n background: linear-gradient(to right, white, hsl(calc(var(--hue) 1deg) 100% 50%));\n\n /* Outside the box: a ring drawn inside would sit on the colours being picked. /\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n}\n\n.gradientOverlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 3px rgb(0 0 0 / 50%);\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1;\n}\n\n.hueSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background: linear-gradient(\n to right,\n hsl(0deg 100% 50%),\n hsl(60deg 100% 50%),\n hsl(120deg 100% 50%),\n hsl(180deg 100% 50%),\n hsl(240deg 100% 50%),\n hsl(300deg 100% 50%),\n hsl(360deg 100% 50%)\n );\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n / The thumb, not the track, which `outline: none` above dropped the default ring\n from. Two rules rather than one list: an engine that does not know one of these\n pseudo-elements throws out the whole selector, which is why the thumb rules\n above are split too. /\n &:focus-visible::-webkit-slider-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n\n &:focus-visible::-moz-range-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n}\n\n.alphaSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n / checkerboard base so transparency is visible under the gradient /\n background-image:\n linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #bbb 25%, transparent 25%),\n linear-gradient(-45deg, #bbb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bbb 75%),\n linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size:\n 100% 100%,\n 8px 8px,\n 8px 8px,\n 8px 8px,\n 8px 8px;\n background-position:\n 0 0,\n 0 0,\n 0 4px,\n 4px -4px,\n -4px 0;\n\n / Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n only be judged against a fixed neutral. Theming it would make a swatch read differently\n in every theme. /\n background-color: white;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n / The thumb, not the track, which `outline: none` above dropped the default ring\n from. Two rules rather than one list: an engine that does not know one of these\n pseudo-elements throws out the whole selector, which is why the thumb rules\n above are split too. */\n &:focus-visible::-webkit-slider-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n\n &:focus-visible::-moz-range-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n}\n\n.hexRow {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.hexInput {\n width: 100%;\n padding: 5px 8px;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n background: var(--input-background);\n color: var(--text-color);\n font-size: var(--default-font-size);\n font-family: monospace;\n box-sizing: border-box;\n outline: none;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n}\n\n~~.eyeDropperButton~~ ~~{\n display:~~ ~~flex;\n align-items:~~ ~~center;\n justify-content:~~ ~~center;\n flex-shrink:~~ ~~0;\n width:~~ ~~28px;\n height:~~ ~~28px;\n padding:~~ ~~0;\n border-radius:~~ ~~var(--default-border-radius);\n border:~~ ~~1px~~ ~~solid~~ ~~var(--border-color);\~~n ~~background:~~ ~~var(--input-background);\~~n ~~color: var(--text~~-~~color);\n cursor~~: ~~pointer~~;\n ~~-webkit-tap-highlight-color~~: ~~transparent~~;\n\n ~~&:hover {\n border-color~~: ~~var(--primary-color)~~;\n ~~color: var(--primary-color);\n~~ }\n~~}\n~~"],"mappings":""}
1	+ {"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n /* The swatch sits inline beside a label, so it tracks the text. The panel below deliberately\n does not: its layout is fixed and it holds up fine at a large base font. /\n --custom-swatch-size: var(--swatch-size, 2em);\n\n display: flex;\n align-items: center;\n gap: 0.5em;\n\n / The visible swatch (below) is nested inside a Popover trigger, not this root — 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 --swatch-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\n.swatch {\n width: var(--custom-swatch-size);\n height: var(--custom-swatch-size);\n border-radius: var(--swatch-radius);\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n flex-shrink: 0;\n box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);\n\n /* checkerboard so transparency is visible /\n background-image:\n linear-gradient(45deg, #bbb 25%, transparent 25%), linear-gradient(-45deg, #bbb 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #bbb 75%), linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size: 0.5em 0.5em;\n background-position:\n 0 0,\n 0 0.25em,\n 0.25em -0.25em,\n -0.25em 0;\n\n / Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n only be judged against a fixed neutral. Theming it would make a swatch read differently\n in every theme. /\n background-color: white;\n\n &:hover {\n & .swatchHex {\n opacity: 1;\n }\n }\n}\n\n.swatchFill {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n}\n\n.swatchHex {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.5em;\n font-family: var(--monospace-font, monospace);\n\n / White on a fixed scrim, not on the theme: the label sits over the swatch's own colour,\n which the theme does not control. /\n background: rgb(0 0 0 / 55%);\n color: white;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.15s;\n user-select: none;\n pointer-events: none;\n z-index: 1;\n}\n\n.panel {\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 224px;\n}\n\n.gradientArea {\n width: 200px;\n height: 160px;\n position: relative;\n cursor: crosshair;\n border-radius: 4px;\n overflow: hidden;\n touch-action: none;\n background: linear-gradient(to right, white, hsl(calc(var(--hue) 1deg) 100% 50%));\n\n /* Outside the box: a ring drawn inside would sit on the colours being picked. /\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n}\n\n.gradientOverlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 3px rgb(0 0 0 / 50%);\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1;\n}\n\n.hueSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background: linear-gradient(\n to right,\n hsl(0deg 100% 50%),\n hsl(60deg 100% 50%),\n hsl(120deg 100% 50%),\n hsl(180deg 100% 50%),\n hsl(240deg 100% 50%),\n hsl(300deg 100% 50%),\n hsl(360deg 100% 50%)\n );\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n / The thumb, not the track, which `outline: none` above dropped the default ring\n from. Two rules rather than one list: an engine that does not know one of these\n pseudo-elements throws out the whole selector, which is why the thumb rules\n above are split too. /\n &:focus-visible::-webkit-slider-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n\n &:focus-visible::-moz-range-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n}\n\n.alphaSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n / checkerboard base so transparency is visible under the gradient /\n background-image:\n linear-gradient(to right, transparent, var(--alpha-color)), linear-gradient(45deg, #bbb 25%, transparent 25%),\n linear-gradient(-45deg, #bbb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bbb 75%),\n linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size:\n 100% 100%,\n 8px 8px,\n 8px 8px,\n 8px 8px,\n 8px 8px;\n background-position:\n 0 0,\n 0 0,\n 0 4px,\n 4px -4px,\n -4px 0;\n\n / Deliberately not a theme colour: this is the transparency checkerboard, and alpha can\n only be judged against a fixed neutral. Theming it would make a swatch read differently\n in every theme. /\n background-color: white;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n / The thumb, not the track, which `outline: none` above dropped the default ring\n from. Two rules rather than one list: an engine that does not know one of these\n pseudo-elements throws out the whole selector, which is why the thumb rules\n above are split too. /\n &:focus-visible::-webkit-slider-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n\n &:focus-visible::-moz-range-thumb {\n box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 35%, transparent);\n }\n}\n\n.hexRow {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.hexInput {\n width: 100%;\n padding: 5px 8px;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n background: var(--input-background);\n color: var(--text-color);\n font-size: var(--default-font-size);\n font-family: monospace;\n box-sizing: border-box;\n outline: none;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n}\n\n/ Two classes, to outrank ActionIcon's own box whichever stylesheet loads first. */\n.hexRow .eyeDropperButton {\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ButtonStyleType as n}from"../button/button.types.mjs";import r from"../actionButtons/actionButtons.mjs";import i from"../modal/modal.mjs";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c={submit:`Confirm`,cancel:`Cancel`};function l(l){let{children:u=null,className:d=``,onClose:f=()=>{},onConfirm:p=()=>{},title:m,content:h=null,isOpen:g=void 0,labels:_,isDelete:v=!1,actionButtonsProps:y={},style:b,...x}=e(`ConfirmModal`,l),S=t(`ConfirmModal`,_,c),[C,w]=a(!1),[T,E]=a(!1);function D(e=!1){w(!1),f(e)}async function O(){E(!0);try{await p(),D(!0)}catch{}finally{E(!1)}}let k=o(i,{title:m,isOpen:g===void 0?C:g,onClose:()=>D(),className:u?void 0:d,footer:o(r,{onClose:()=>D(),onSubmit:O,labels:{submit:S.submit,cancel:S.cancel},submitButtonStyle:v?n.Delete:void 0,isSubmitButtonLoading:T,noMargin:!0,...y}),children:h});return u?s(`div`,{...x,className:d,style:b,children:[o(`span`,{onClick:()=>w(!0),children:u}),k]}):k}export{l as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import r from"../actionButtons/actionButtons.mjs";import i from"../modal/modal.mjs";import{useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c={submit:`Confirm`,cancel:`Cancel`};function l(l){let{children:u=null,className:d=``,onClose:f=()=>{},onConfirm:p=()=>{},title:m,content:h=null,isOpen:g=void 0,labels:_,isDelete:v=!1,actionButtonsProps:y={},style:b,...x}=e(`ConfirmModal`,l),S=t(`ConfirmModal`,_,c),[C,w]=a(!1),[T,E]=a(!1);function D(e=!1){w(!1),f(e)}async function O(){E(!0);try{await p(),D(!0)}catch{}finally{E(!1)}}let k=o(i,{title:m,isOpen:g===void 0?C:g,onClose:()=>D(),className:u?void 0:d,footer:o(r,{onClose:()=>D(),onSubmit:O,labels:{submit:S.submit,cancel:S.cancel},submitButtonColor:v?n.Error:void 0,isSubmitButtonLoading:T,noMargin:!0,...y}),children:h});return u?s(`div`,{...x,className:d,style:b,children:[o(`span`,{onClick:()=>w(!0),children:u}),k]}):k}export{l as default};
 //# sourceMappingURL=confirmModal.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"confirmModal.mjs","names":[],"sources":["../../../../package/common/confirmModal/confirmModal.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\n\nimport Modal from '../modal';\nimport { ActionButtons } from '../actionButtons';\nimport { ~~ButtonStyleType~~ } from '../~~button~~';\nimport { ~~useComponentDefaults~~, ~~useLabels~~ } from '~~../configProvider~~';\nimport ~~type~~ { ~~ConfirmModalLabels,~~ ~~ConfirmModalProps~~ } from '~~./confirmModal~~.types';\n\nconst DEFAULT_LABELS: Required<ConfirmModalLabels> = {\n submit: 'Confirm',\n cancel: 'Cancel',\n};\n\nfunction ConfirmModal(props: ConfirmModalProps): ReactElement {\n const {\n children = null,\n className = '',\n onClose = () => {},\n onConfirm = () => {},\n title,\n content = null,\n isOpen: propIsOpen = undefined,\n labels,\n isDelete = false,\n actionButtonsProps = {},\n style,\n ...rest\n } = useComponentDefaults('ConfirmModal', props);\n const text = useLabels('ConfirmModal', labels, DEFAULT_LABELS);\n const [internalOpen, setInternalOpen] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n function handleClose(didSubmit = false) {\n setInternalOpen(false);\n onClose(didSubmit);\n }\n\n async function handleConfirm() {\n setIsSubmitting(true);\n try {\n await onConfirm();\n handleClose(true);\n } catch {\n // Nothing is awaiting this handler, so a rejection would surface as an unhandled one.\n // The dialog staying open is the signal that the action did not go through; reporting\n // the failure itself belongs to whoever wrote `onConfirm`.\n } finally {\n setIsSubmitting(false);\n }\n }\n\n const isOpen = propIsOpen === undefined ? internalOpen : propIsOpen;\n\n const modal = (\n <Modal\n title={title}\n isOpen={isOpen}\n onClose={() => handleClose()}\n className={children ? undefined : className}\n footer={\n <ActionButtons\n onClose={() => handleClose()}\n onSubmit={handleConfirm}\n labels={{ submit: text.submit, cancel: text.cancel }}\n ~~submitButtonStyle~~={isDelete ? ~~ButtonStyleType~~.~~Delete~~ : undefined}\n isSubmitButtonLoading={isSubmitting}\n // The footer slot already supplies the gap above the buttons.\n noMargin\n {...actionButtonsProps}\n />\n }\n >\n {content}\n </Modal>\n );\n\n if (!children) return modal;\n\n return (\n <div {...rest} className={className} style={style}>\n <span onClick={() => setInternalOpen(true)}>{children}</span>\n {modal}\n </div>\n );\n}\n\nexport default ConfirmModal;\n"],"mappings":"~~+XAQA~~,IAAM,EAA+C,CACnD,OAAQ,UACR,OAAQ,QACV,EAEA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,WAAW,KACX,YAAY,GACZ,cAAgB,CAAC,EACjB,gBAAkB,CAAC,EACnB,QACA,UAAU,KACV,OAAQ,EAAa,IAAA,GACrB,SACA,WAAW,GACX,qBAAqB,CAAC,EACtB,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EACxC,EAAO,EAAU,eAAgB,EAAQ,CAAc,EACvD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAEtD,SAAS,EAAY,EAAY,GAAO,CACtC,EAAgB,EAAK,EACrB,EAAQ,CAAS,CACnB,CAEA,eAAe,GAAgB,CAC7B,EAAgB,EAAI,EACpB,GAAI,CACF,MAAM,EAAU,EAChB,EAAY,EAAI,CAClB,MAAQ,CAIR,QAAU,CACR,EAAgB,EAAK,CACvB,CACF,CAIA,IAAM,EACJ,EAAC,EAAD,CACS,QACC,OALG,IAAe,IAAA,GAAY,EAAe,EAMrD,YAAe,EAAY,EAC3B,UAAW,EAAW,IAAA,GAAY,EAClC,OACE,EAAC,EAAD,CACE,YAAe,EAAY,EAC3B,SAAU,EACV,OAAQ,CAAE,OAAQ,EAAK,OAAQ,OAAQ,EAAK,MAAO,EACnD,kBAAmB,EAAW,~~EAAgB~~,~~OAAS~~,IAAA,~~GACvD~~,sBAAuB,EAEvB,SAAA,GACA,GAAI,CACL,CAAA,EAGF,SAAA,CACI,CAAA,EAKT,OAFK,EAGH,EAAC,MAAD,CAAK,GAAI,EAAiB,YAAkB,QAA5C,SAAA,CACE,EAAC,OAAD,CAAM,YAAe,EAAgB,EAAI,EAAI,UAAe,CAAA,EAC3D,CACE,IANe,CAQxB"}
1	+ {"version":3,"file":"confirmModal.mjs","names":[],"sources":["../../../../package/common/confirmModal/confirmModal.tsx"],"sourcesContent":["import { useState, type ReactElement } from 'react';\n\nimport Modal from '../modal';\nimport { ActionButtons } from '../actionButtons';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { ConfirmModalLabels, ConfirmModalProps } from './confirmModal.types';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<ConfirmModalLabels> = {\n submit: 'Confirm',\n cancel: 'Cancel',\n};\n\nfunction ConfirmModal(props: ConfirmModalProps): ReactElement {\n const {\n children = null,\n className = '',\n onClose = () => {},\n onConfirm = () => {},\n title,\n content = null,\n isOpen: propIsOpen = undefined,\n labels,\n isDelete = false,\n actionButtonsProps = {},\n style,\n ...rest\n } = useComponentDefaults('ConfirmModal', props);\n const text = useLabels('ConfirmModal', labels, DEFAULT_LABELS);\n const [internalOpen, setInternalOpen] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n function handleClose(didSubmit = false) {\n setInternalOpen(false);\n onClose(didSubmit);\n }\n\n async function handleConfirm() {\n setIsSubmitting(true);\n try {\n await onConfirm();\n handleClose(true);\n } catch {\n // Nothing is awaiting this handler, so a rejection would surface as an unhandled one.\n // The dialog staying open is the signal that the action did not go through; reporting\n // the failure itself belongs to whoever wrote `onConfirm`.\n } finally {\n setIsSubmitting(false);\n }\n }\n\n const isOpen = propIsOpen === undefined ? internalOpen : propIsOpen;\n\n const modal = (\n <Modal\n title={title}\n isOpen={isOpen}\n onClose={() => handleClose()}\n className={children ? undefined : className}\n footer={\n <ActionButtons\n onClose={() => handleClose()}\n onSubmit={handleConfirm}\n labels={{ submit: text.submit, cancel: text.cancel }}\n submitButtonColor={isDelete ? ThemeColor.Error : undefined}\n isSubmitButtonLoading={isSubmitting}\n // The footer slot already supplies the gap above the buttons.\n noMargin\n {...actionButtonsProps}\n />\n }\n >\n {content}\n </Modal>\n );\n\n if (!children) return modal;\n\n return (\n <div {...rest} className={className} style={style}>\n <span onClick={() => setInternalOpen(true)}>{children}</span>\n {modal}\n </div>\n );\n}\n\nexport default ConfirmModal;\n"],"mappings":"gYAQA,IAAM,EAA+C,CACnD,OAAQ,UACR,OAAQ,QACV,EAEA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,WAAW,KACX,YAAY,GACZ,cAAgB,CAAC,EACjB,gBAAkB,CAAC,EACnB,QACA,UAAU,KACV,OAAQ,EAAa,IAAA,GACrB,SACA,WAAW,GACX,qBAAqB,CAAC,EACtB,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EACxC,EAAO,EAAU,eAAgB,EAAQ,CAAc,EACvD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAChD,CAAC,EAAc,GAAmB,EAAS,EAAK,EAEtD,SAAS,EAAY,EAAY,GAAO,CACtC,EAAgB,EAAK,EACrB,EAAQ,CAAS,CACnB,CAEA,eAAe,GAAgB,CAC7B,EAAgB,EAAI,EACpB,GAAI,CACF,MAAM,EAAU,EAChB,EAAY,EAAI,CAClB,MAAQ,CAIR,QAAU,CACR,EAAgB,EAAK,CACvB,CACF,CAIA,IAAM,EACJ,EAAC,EAAD,CACS,QACC,OALG,IAAe,IAAA,GAAY,EAAe,EAMrD,YAAe,EAAY,EAC3B,UAAW,EAAW,IAAA,GAAY,EAClC,OACE,EAAC,EAAD,CACE,YAAe,EAAY,EAC3B,SAAU,EACV,OAAQ,CAAE,OAAQ,EAAK,OAAQ,OAAQ,EAAK,MAAO,EACnD,kBAAmB,EAAW,EAAW,MAAQ,IAAA,GACjD,sBAAuB,EAEvB,SAAA,GACA,GAAI,CACL,CAAA,EAGF,SAAA,CACI,CAAA,EAKT,OAFK,EAGH,EAAC,MAAD,CAAK,GAAI,EAAiB,YAAkB,QAA5C,SAAA,CACE,EAAC,OAAD,CAAM,YAAe,EAAgB,EAAI,EAAI,UAAe,CAAA,EAC3D,CACE,IANe,CAQxB"}

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

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{isIconDefinition as n,renderIcon as r}from"../utils/renderIcon.mjs";import i from"../actionIcon/actionIcon.mjs";import a from"../animatedIcon/animatedIcon.mjs";import o from"../hooks/useClipboard.mjs";import s from"./copyButton.module.mjs";import c from"classnames";import{faCheck as l,faCopy as u}from"@fortawesome/free-solid-svg-icons";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";var m={copy:`Copy`,copied:`Copied`,failed:`Could not copy`};function h(h){let{value:g,timeout:_=2e3,icon:v=u,copiedIcon:y=l,onCopy:b,onError:x,onClick:S,labels:C,className:w,style:T,classNames:E,styles:D,...O}=e(`CopyButton`,h),k=t(`CopyButton`,C,m),{copy:A,copied:j,error:M}=o({timeout:_}),N=j?k.copied:k.copy,P=j?y:v,F=n(v)&&n(y)?f(a,{icon:j?y:v,classNames:{icon:E?.icon},styles:{icon:D?.icon}}):r(P,{className:E?.icon,style:D?.icon});return p(d,{children:[f(i,{...O,icon:f(d,{children:F}),title:N,"aria-label":N,className:c(s.copyButton,j&&s.copyButtonCopied,w),style:T,classNames:{root:E?.root},styles:{root:D?.root},onClick:async e=>{S?.(e),await A(g)?b?.(g):x?.()}}),f(`span`,{className:s.copyButtonStatus,role:`status`,"aria-live":`polite`,children:j?k.copied:M?k.failed:``})]})}export{h as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import{isIconDefinition as r,renderIcon as i}from"../utils/renderIcon.mjs";import a from"../actionIcon/actionIcon.mjs";import o from"../animatedIcon/animatedIcon.mjs";import s from"../hooks/useClipboard.mjs";import c from"./copyButton.module.mjs";import{faCheck as l,faCopy as u}from"@fortawesome/free-solid-svg-icons";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";var m={copy:`Copy`,copied:`Copied`,failed:`Could not copy`};function h(h){let{value:g,timeout:_=2e3,icon:v=u,copiedIcon:y=l,onCopy:b,onError:x,onClick:S,color:C,labels:w,className:T,style:E,classNames:D,styles:O,...k}=e(`CopyButton`,h),A=t(`CopyButton`,w,m),{copy:j,copied:M,error:N}=s({timeout:_}),P=M?A.copied:A.copy,F=M?y:v,I=r(v)&&r(y)?f(o,{icon:M?y:v,classNames:{icon:D?.icon},styles:{icon:O?.icon}}):i(F,{className:D?.icon,style:O?.icon});return p(d,{children:[f(a,{...k,icon:f(d,{children:I}),title:P,"aria-label":P,color:M?n.Success:C,className:T,style:E,classNames:{root:D?.root},styles:{root:O?.root},onClick:async e=>{S?.(e),await j(g)?b?.(g):x?.()}}),f(`span`,{className:c.copyButtonStatus,role:`status`,"aria-live":`polite`,children:M?A.copied:N?A.failed:``})]})}export{h as default};
 //# sourceMappingURL=copyButton.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"copyButton.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport ~~cx from 'classnames';\nimport~~ { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport AnimatedIcon from '../animatedIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isIconDefinition, renderIcon } from '../utils/renderIcon';\nimport type { CopyButtonLabels, CopyButtonProps } from './copyButton.types';\nimport styles from './copyButton.module.pcss';\n\nconst DEFAULT_LABELS: Required<CopyButtonLabels> = {\n copy: 'Copy',\n copied: 'Copied',\n failed: 'Could not copy',\n};\n\nfunction CopyButton(props: CopyButtonProps): ReactElement {\n const {\n value,\n timeout = 2000,\n icon = faCopy,\n copiedIcon = faCheck,\n onCopy,\n onError,\n onClick,\n labels,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('CopyButton', props);\n const text = useLabels('CopyButton', labels, DEFAULT_LABELS);\n const { copy, copied, error } = useClipboard({ timeout });\n\n const label = copied ? text.copied : text.copy;\n const current = copied ? copiedIcon : icon;\n const iconElement =\n isIconDefinition(icon) && isIconDefinition(copiedIcon) ? (\n <AnimatedIcon\n icon={copied ? copiedIcon : icon}\n classNames={{ icon: classNames?.icon }}\n styles={{ icon: slotStyles?.icon }}\n />\n ) : (\n renderIcon(current, { className: classNames?.icon, style: slotStyles?.icon })\n );\n\n return (\n <>\n <ActionIcon\n {...rest}\n icon={<>{iconElement}</>}\n title={label}\n aria-label={label}\n ~~className~~={~~cx(styles.copyButton,~~ copied && ~~styles~~.~~copyButtonCopied,~~ className)}\n style={style}\n classNames={{ root: classNames?.root }}\n styles={{ root: slotStyles?.root }}\n onClick={async (event) => {\n onClick?.(event);\n if (await copy(value)) onCopy?.(value);\n else onError?.();\n }}\n />\n {/* Beside the button, not in it: a live region inside ~~role=\"~~button\" is not reliably announced. */}\n <span className={styles.copyButtonStatus} role='status' aria-live='polite'>\n {copied ? text.copied : error ? text.failed : ''}\n </span>\n </>\n );\n}\n\nexport default CopyButton;\n"],"mappings":"~~ojBAYA~~,IAAM,EAA6C,CACjD,KAAM,OACN,OAAQ,SACR,OAAQ,gBACV,EAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,QACA,UAAU,IACV,OAAO,EACP,aAAa,EACb,SACA,UACA,UACA,SACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EACtC,EAAO,EAAU,aAAc,EAAQ,CAAc,EACrD,CAAE,OAAM,SAAQ,SAAU,EAAa,CAAE,SAAQ,CAAC,EAElD,EAAQ,EAAS,EAAK,OAAS,EAAK,KACpC,EAAU,EAAS,EAAa,EAChC,EACJ,EAAiB,CAAI,GAAK,EAAiB,CAAU,EACnD,EAAC,EAAD,CACE,KAAM,EAAS,EAAa,EAC5B,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,CAClC,CAAA,EAED,EAAW,EAAS,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,EAGhF,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAM,EAAA,EAAA,CAAA,SAAG,CAAc,CAAA,EACvB,MAAO,EACP,aAAY,EACZ,~~UAAW~~,~~EAAG~~,~~EAAO~~,~~WAAY~~,~~GAAU~~,~~EAAO~~,~~iBAAkB,CAAS,EACtE,~~QACP,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,EACjC,QAAS,KAAO,IAAU,CACxB,IAAU,CAAK,EACX,MAAM,EAAK,CAAK,EAAG,IAAS,CAAK,EAChC,IAAU,CACjB,CACD,CAAA,EAED,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,KAAK,SAAS,YAAU,SAC/D,SAAA,EAAS,EAAK,OAAS,EAAQ,EAAK,OAAS,EAC1C,CAAA,CACN,CAAA,CAAA,CAEN"}
1	+ {"version":3,"file":"copyButton.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport AnimatedIcon from '../animatedIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { useClipboard } from '../hooks/useClipboard';\nimport { isIconDefinition, renderIcon } from '../utils/renderIcon';\nimport type { CopyButtonLabels, CopyButtonProps } from './copyButton.types';\nimport styles from './copyButton.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<CopyButtonLabels> = {\n copy: 'Copy',\n copied: 'Copied',\n failed: 'Could not copy',\n};\n\nfunction CopyButton(props: CopyButtonProps): ReactElement {\n const {\n value,\n timeout = 2000,\n icon = faCopy,\n copiedIcon = faCheck,\n onCopy,\n onError,\n onClick,\n color,\n labels,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('CopyButton', props);\n const text = useLabels('CopyButton', labels, DEFAULT_LABELS);\n const { copy, copied, error } = useClipboard({ timeout });\n\n const label = copied ? text.copied : text.copy;\n const current = copied ? copiedIcon : icon;\n const iconElement =\n isIconDefinition(icon) && isIconDefinition(copiedIcon) ? (\n <AnimatedIcon\n icon={copied ? copiedIcon : icon}\n classNames={{ icon: classNames?.icon }}\n styles={{ icon: slotStyles?.icon }}\n />\n ) : (\n renderIcon(current, { className: classNames?.icon, style: slotStyles?.icon })\n );\n\n return (\n <>\n <ActionIcon\n {...rest}\n icon={<>{iconElement}</>}\n title={label}\n aria-label={label}\n color={copied ? ThemeColor.Success : color}\n className={className}\n style={style}\n classNames={{ root: classNames?.root }}\n styles={{ root: slotStyles?.root }}\n onClick={async (event) => {\n onClick?.(event);\n if (await copy(value)) onCopy?.(value);\n else onError?.();\n }}\n />\n {/* Beside the button, not in it: a live region inside a button is not reliably announced. */}\n <span className={styles.copyButtonStatus} role='status' aria-live='polite'>\n {copied ? text.copied : error ? text.failed : ''}\n </span>\n </>\n );\n}\n\nexport default CopyButton;\n"],"mappings":"wlBAYA,IAAM,EAA6C,CACjD,KAAM,OACN,OAAQ,SACR,OAAQ,gBACV,EAEA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,QACA,UAAU,IACV,OAAO,EACP,aAAa,EACb,SACA,UACA,UACA,QACA,SACA,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EACtC,EAAO,EAAU,aAAc,EAAQ,CAAc,EACrD,CAAE,OAAM,SAAQ,SAAU,EAAa,CAAE,SAAQ,CAAC,EAElD,EAAQ,EAAS,EAAK,OAAS,EAAK,KACpC,EAAU,EAAS,EAAa,EAChC,EACJ,EAAiB,CAAI,GAAK,EAAiB,CAAU,EACnD,EAAC,EAAD,CACE,KAAM,EAAS,EAAa,EAC5B,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,CAClC,CAAA,EAED,EAAW,EAAS,CAAE,UAAW,GAAY,KAAM,MAAO,GAAY,IAAK,CAAC,EAGhF,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAM,EAAA,EAAA,CAAA,SAAG,CAAc,CAAA,EACvB,MAAO,EACP,aAAY,EACZ,MAAO,EAAS,EAAW,QAAU,EAC1B,YACJ,QACP,WAAY,CAAE,KAAM,GAAY,IAAK,EACrC,OAAQ,CAAE,KAAM,GAAY,IAAK,EACjC,QAAS,KAAO,IAAU,CACxB,IAAU,CAAK,EACX,MAAM,EAAK,CAAK,EAAG,IAAS,CAAK,EAChC,IAAU,CACjB,CACD,CAAA,EAED,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,KAAK,SAAS,YAAU,SAC/D,SAAA,EAAS,EAAK,OAAS,EAAQ,EAAK,OAAS,EAC1C,CAAA,CACN,CAAA,CAAA,CAEN"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`copyButton_HEd1K`,t=`copyButton-copied_HL1zN`,n=`copyButton-status_QdwYf`,r={copyButton:e,"copyButton-copied":`copyButton-copied_HL1zN`,copyButtonCopied:t,"copyButton-status":`copyButton-status_QdwYf`,copyButtonStatus:n};export{e as copyButton,t as copyButtonCopied,n as copyButtonStatus,r as default};
+"use client";var e=`copyButton-status_QdwYf`,t={"copyButton-status":`copyButton-status_QdwYf`,copyButtonStatus:e};export{e as copyButtonStatus,t as default};
 //# sourceMappingURL=copyButton.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"copyButton.module.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.module.pcss"],"sourcesContent":[".copyButton ~~{\n /* As a block, AnimatedIcon's inline~~-~~block~~ ~~box sits on a text baseline and rides high. */\n display: inline-flex;\n\n &-copied~~ {\n ~~color: var(--success-color);\n~~ ~~}\n\n &-status {\n~~ position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n overflow: hidden;\n white-space: nowrap;\n }\n~~}\n~~"],"mappings":""}
1	+ {"version":3,"file":"copyButton.module.mjs","names":[],"sources":["../../../../package/common/copyButton/copyButton.module.pcss"],"sourcesContent":[".copyButton-status {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip-path: inset(50%);\n overflow: hidden;\n white-space: nowrap;\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../loading/spinnerLoading/index.mjs";import i from"../styles/sheet.module.mjs";import{PopoverAlign as ee,PopoverPlacement as te}from"../popover/popover.types.mjs";import ne from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import ie from"../tooltip/tooltip.mjs";import{edgeIndex as ae,nextIndex as oe,scrollOptionIntoView as se}from"../utils/listNavigation.mjs";import{useInfiniteScroll as ce}from"../infiniteBlock/useInfiniteScroll.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useId as le,useLayoutEffect as ue,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as de}from"@fortawesome/react-fontawesome";import{faChevronDown as fe}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var pe=500;function f(f){let{errorMessage:p=``,className:me=``,style:he,label:m=``,value:ge=``,isValid:_e=!0,tabIndex:ve=0,isRequired:ye=!1,customProps:h={},isRow:be=!1,disabled:g=!1,readOnly:_=!1,onScroll:xe=()=>Promise.resolve(),onClick:v,onChange:y,onFocus:Se=null,onBlur:Ce=null,onMouseEnter:we=null,onMouseLeave:Te=null,dropdownLabel:Ee,isDropdownListWider:b=!1,formValidator:x=null,classNames:S,styles:C,items:w=[],useMatLabelStyle:T=!0,alwaysFloatLabel:E=!1,placeholder:D=``,plainStyle:O=!1,scrollToSelected:De=!1,presentation:Oe,reactRef:ke,...Ae}=e(`Dropdown`,f),[je,Me]=c(!1),[Ne,Pe]=c(!1),[,Fe]=c(0),k=s(x),A=s(null),j=s(null),M=s(null),[Ie,Le]=c(!1),[N,P]=c(null),F=s({buffer:``,at:0}),I=le(),L=`${I}-listbox`,R=`${I}-label`,z=e=>`${I}-option-${e}`,B=!g&&!_,V=Ie&&B,{isLoading:Re,sentinelRef:ze}=ce(M,xe,!1),Be=t(),H=Oe??Be??n.Default,{isSheet:U}=ne(H);ue(()=>{let e=A.current,t=j.current;V&&!U&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[V,U]),o(()=>{if(k.current=x,!k.current)return;k.current.label=m??``,k.current.validate();let e=()=>Fe(e=>e+1);return k.current.registerOnUpdateListener(e),()=>k.current?.removeOnUpdateListener(e)},[x,m]);let W=x?x.value:ge,G=w.findIndex(e=>e.key===W);o(()=>{V&&N!==null&&se(M.current,document.getElementById(z(N)))},[V,N]);let Ve=e=>{Pe(!0),we?.(e)},He=e=>{Pe(!1),Te?.(e)},Ue=e=>{Me(!0),Se?.(e)},We=e=>{k.current&&(k.current.touched=!0),Me(!1),Ce?.(e)},Ge=()=>x?x.touched&&x.hasError():!_e||!!p,K=()=>!!(ye||x?.validators.find(e=>e.validatorId===`required`)),Ke=e=>{x?(x.set(e),y?.(x.value,h)):y?.(e,h)};function q(e){(!e||B)&&(Le(e),e?P(De&&G>=0?G:null):F.current={buffer:``,at:0})}function J(e){e.disabled||(Ke(e.key),q(!1))}let qe={isDisabled:e=>!!w[e].disabled};function Je(e){let t=Date.now(),n=t-F.current.at>pe?e:F.current.buffer+e;F.current={buffer:n,at:t};let r=n.toLowerCase(),i=w.findIndex(e=>!e.disabled&&typeof e.label==`string`&&e.label.toLowerCase().startsWith(r));i!==-1&&(V?P(i):J(w[i]))}function Ye(e){if(B){if(!V){e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `?(e.preventDefault(),q(!0)):e.key.length===1&&Je(e.key);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),P(oe(N,e.key===`ArrowDown`?1:-1,w.length,qe));else if(e.key===`Home`||e.key===`End`)e.preventDefault(),P(ae(e.key===`Home`?`first`:`last`,w.length,qe));else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=N===null?void 0:w[N];t?J(t):q(!1)}else e.key===`Escape`||e.key===`Tab`?q(!1):e.key.length===1&&Je(e.key)}}let Y=Ee,X=Ge();w.forEach(e=>{e.key===W&&(Y=e.label)});let Z=Y||W,Q=Z==null||typeof Z==`string`&&Z.trim()===``,Xe=K()?u(`span`,{className:a.requiredMark,children:`*`}):null,Ze=m&&K()?`${m} *`:m,$=je&&!_;return d(`div`,{...Ae,className:l(me,S?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!be}),style:{...he,...C?.root},onMouseEnter:Ve,onMouseLeave:He,children:[u(`div`,{children:u(re,{isOpen:V,onOpenChange:q,disabled:!B,placement:te.Bottom,align:ee.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,focusOnOpen:!1,presentation:H,classNames:{panel:a.dropdownPanel},content:u(`div`,{ref:j,className:l(!U&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:b&&!U}),children:d(`div`,{ref:M,id:L,role:`listbox`,"aria-label":m||D||void 0,className:l(a.dropdownInputList,U&&i.sheetScroll,S?.list),style:C?.list,children:[w.map((e,t)=>u(`div`,{id:z(t),role:`option`,"aria-selected":e.key===W,"aria-disabled":e.disabled||void 0,style:C?.option,className:l(a.dropdownInputListItem,S?.option,{[a.dropdownInputListItemActive]:N===t,[a.dropdownInputListItemSelected]:e.key===W,[a.dropdownInputListItemDisabled]:!!e.disabled}),onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>P(t),onClick:()=>J(e),children:e.label},e.key)),u(`div`,{ref:ze,className:a.dropdownSentinel,"aria-hidden":`true`}),Re&&u(`div`,{className:a.dropdownLoadMore,"aria-hidden":`true`,children:u(r,{className:a.dropdownLoadMoreSpinner})})]})}),children:d(`div`,{ref:A,onFocus:Ue,onBlur:We,className:l(a.dropdownInput,{[a.dropdownInputPlain]:O,[a.dropdownInputReadOnly]:_&&!g},S?.field),style:C?.field,children:[u(`button`,{tabIndex:ve,type:`button`,disabled:g,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":V,"aria-controls":L,"aria-activedescendant":V&&N!==null?z(N):void 0,"aria-labelledby":m?R:void 0,"aria-label":m?void 0:D||void 0,"aria-readonly":_||void 0,className:l(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:g,[a.dropdownInputButtonReadOnly]:_&&!g},S?.control),style:{...b?{padding:`6px`,border:`none`}:{},...C?.control},onKeyDown:Ye,onClick:v,ref:ke,children:Q?`\xA0`:Z}),u(`button`,{type:`button`,tabIndex:-1,disabled:g,"aria-hidden":`true`,className:l(a.dropdownInputButtonIcon,S?.icon),style:C?.icon,onMouseDown:e=>e.preventDefault(),onClick:v,children:!g&&!_&&u(de,{icon:fe,className:l(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:V})})}),u(`fieldset`,{className:l(a.dropdownFieldset,{[a.dropdownBorderPlain]:O,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:X,[a.dropdownBorderError]:X}),children:u(`legend`,{className:l(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:T&&(E||$||!Q)}),children:u(`span`,{children:Ze})})}),T&&m&&d(`div`,{id:R,className:l(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:E||$||!Q},S?.label),style:C?.label,children:[m,Xe]}),T&&D&&u(`div`,{className:l(a.dropdownPlaceholder,$&&!Y&&a.dropdownPlaceholderShown),children:D})]})})}),m&&!T&&d(`div`,{id:R,className:l(a.dropdownLabelText,S?.label),style:C?.label,children:[m,Xe]}),u(ie,{variant:`error`,message:x?x.getCurrentErrorMessage():p||``,isVisible:X&&(je||Ne)})]})}export{f as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../loader/loader.mjs";import i from"../styles/sheet.module.mjs";import{PopoverAlign as ee,PopoverPlacement as te}from"../popover/popover.types.mjs";import ne from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import ie from"../tooltip/tooltip.mjs";import{edgeIndex as ae,nextIndex as oe,scrollOptionIntoView as se}from"../utils/listNavigation.mjs";import{useInfiniteScroll as ce}from"../infiniteBlock/useInfiniteScroll.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useId as le,useLayoutEffect as ue,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as de}from"@fortawesome/react-fontawesome";import{faChevronDown as fe}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var pe=500;function f(f){let{errorMessage:p=``,className:me=``,style:he,label:m=``,value:ge=``,isValid:_e=!0,tabIndex:ve=0,isRequired:ye=!1,customProps:h={},isRow:be=!1,disabled:g=!1,readOnly:_=!1,onScroll:xe=()=>Promise.resolve(),onClick:v,onChange:y,onFocus:Se=null,onBlur:Ce=null,onMouseEnter:we=null,onMouseLeave:Te=null,dropdownLabel:Ee,isDropdownListWider:b=!1,formValidator:x=null,classNames:S,styles:C,items:w=[],useMatLabelStyle:T=!0,alwaysFloatLabel:E=!1,placeholder:D=``,plainStyle:O=!1,scrollToSelected:De=!1,presentation:Oe,reactRef:ke,...Ae}=e(`Dropdown`,f),[je,Me]=c(!1),[Ne,Pe]=c(!1),[,Fe]=c(0),k=s(x),A=s(null),j=s(null),M=s(null),[Ie,Le]=c(!1),[N,P]=c(null),F=s({buffer:``,at:0}),I=le(),L=`${I}-listbox`,R=`${I}-label`,z=e=>`${I}-option-${e}`,B=!g&&!_,V=Ie&&B,{isLoading:Re,sentinelRef:ze}=ce(M,xe,!1),Be=t(),H=Oe??Be??n.Default,{isSheet:U}=ne(H);ue(()=>{let e=A.current,t=j.current;V&&!U&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[V,U]),o(()=>{if(k.current=x,!k.current)return;k.current.label=m??``,k.current.validate();let e=()=>Fe(e=>e+1);return k.current.registerOnUpdateListener(e),()=>k.current?.removeOnUpdateListener(e)},[x,m]);let W=x?x.value:ge,G=w.findIndex(e=>e.key===W);o(()=>{V&&N!==null&&se(M.current,document.getElementById(z(N)))},[V,N]);let Ve=e=>{Pe(!0),we?.(e)},He=e=>{Pe(!1),Te?.(e)},Ue=e=>{Me(!0),Se?.(e)},We=e=>{k.current&&(k.current.touched=!0),Me(!1),Ce?.(e)},Ge=()=>x?x.touched&&x.hasError():!_e||!!p,K=()=>!!(ye||x?.validators.find(e=>e.validatorId===`required`)),Ke=e=>{x?(x.set(e),y?.(x.value,h)):y?.(e,h)};function q(e){(!e||B)&&(Le(e),e?P(De&&G>=0?G:null):F.current={buffer:``,at:0})}function J(e){e.disabled||(Ke(e.key),q(!1))}let qe={isDisabled:e=>!!w[e].disabled};function Je(e){let t=Date.now(),n=t-F.current.at>pe?e:F.current.buffer+e;F.current={buffer:n,at:t};let r=n.toLowerCase(),i=w.findIndex(e=>!e.disabled&&typeof e.label==`string`&&e.label.toLowerCase().startsWith(r));i!==-1&&(V?P(i):J(w[i]))}function Ye(e){if(B){if(!V){e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `?(e.preventDefault(),q(!0)):e.key.length===1&&Je(e.key);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),P(oe(N,e.key===`ArrowDown`?1:-1,w.length,qe));else if(e.key===`Home`||e.key===`End`)e.preventDefault(),P(ae(e.key===`Home`?`first`:`last`,w.length,qe));else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=N===null?void 0:w[N];t?J(t):q(!1)}else e.key===`Escape`||e.key===`Tab`?q(!1):e.key.length===1&&Je(e.key)}}let Y=Ee,X=Ge();w.forEach(e=>{e.key===W&&(Y=e.label)});let Z=Y||W,Q=Z==null||typeof Z==`string`&&Z.trim()===``,Xe=K()?u(`span`,{className:a.requiredMark,children:`*`}):null,Ze=m&&K()?`${m} *`:m,$=je&&!_;return d(`div`,{...Ae,className:l(me,S?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!be}),style:{...he,...C?.root},onMouseEnter:Ve,onMouseLeave:He,children:[u(`div`,{children:u(re,{isOpen:V,onOpenChange:q,disabled:!B,placement:te.Bottom,align:ee.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,focusOnOpen:!1,presentation:H,classNames:{panel:a.dropdownPanel},content:u(`div`,{ref:j,className:l(!U&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:b&&!U}),children:d(`div`,{ref:M,id:L,role:`listbox`,"aria-label":m||D||void 0,className:l(a.dropdownInputList,U&&i.sheetScroll,S?.list),style:C?.list,children:[w.map((e,t)=>u(`div`,{id:z(t),role:`option`,"aria-selected":e.key===W,"aria-disabled":e.disabled||void 0,style:C?.option,className:l(a.dropdownInputListItem,S?.option,{[a.dropdownInputListItemActive]:N===t,[a.dropdownInputListItemSelected]:e.key===W,[a.dropdownInputListItemDisabled]:!!e.disabled}),onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>P(t),onClick:()=>J(e),children:e.label},e.key)),u(`div`,{ref:ze,className:a.dropdownSentinel,"aria-hidden":`true`}),Re&&u(`div`,{className:a.dropdownLoadMore,"aria-hidden":`true`,children:u(r,{size:32})})]})}),children:d(`div`,{ref:A,onFocus:Ue,onBlur:We,className:l(a.dropdownInput,{[a.dropdownInputPlain]:O,[a.dropdownInputReadOnly]:_&&!g},S?.field),style:C?.field,children:[u(`button`,{tabIndex:ve,type:`button`,disabled:g,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":V,"aria-controls":L,"aria-activedescendant":V&&N!==null?z(N):void 0,"aria-labelledby":m?R:void 0,"aria-label":m?void 0:D||void 0,"aria-readonly":_||void 0,className:l(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:g,[a.dropdownInputButtonReadOnly]:_&&!g},S?.control),style:{...b?{padding:`6px`,border:`none`}:{},...C?.control},onKeyDown:Ye,onClick:v,ref:ke,children:Q?`\xA0`:Z}),u(`button`,{type:`button`,tabIndex:-1,disabled:g,"aria-hidden":`true`,className:l(a.dropdownInputButtonIcon,S?.icon),style:C?.icon,onMouseDown:e=>e.preventDefault(),onClick:v,children:!g&&!_&&u(de,{icon:fe,className:l(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:V})})}),u(`fieldset`,{className:l(a.dropdownFieldset,{[a.dropdownBorderPlain]:O,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:X,[a.dropdownBorderError]:X}),children:u(`legend`,{className:l(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:T&&(E||$||!Q)}),children:u(`span`,{children:Ze})})}),T&&m&&d(`div`,{id:R,className:l(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:E||$||!Q},S?.label),style:C?.label,children:[m,Xe]}),T&&D&&u(`div`,{className:l(a.dropdownPlaceholder,$&&!Y&&a.dropdownPlaceholderShown),children:D})]})})}),m&&!T&&d(`div`,{id:R,className:l(a.dropdownLabelText,S?.label),style:C?.label,children:[m,Xe]}),u(ie,{variant:`error`,message:x?x.getCurrentErrorMessage():p||``,isVisible:X&&(je||Ne)})]})}export{f as default};
 //# sourceMappingURL=dropdown.mjs.map