npm - @magiclabs/ui-components - Versions diffs - 1.52.1 → 2.0.0 - Mend

@magiclabs/ui-components 1.52.1 → 2.0.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 (1474) hide show

package/dist/cjs/components/primitives/dropdown-selector.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),j=require("@styled/tokens"),U=require("../icons/ico-caret-down.js"),V=require("../icons/ico-caret-up.js"),M=require("../icons/ico-checkmark.js"),T=require("../icons/ico-question-circle-fill.js"),r=require("react"),m=require("@styled/jsx"),z=require("@styled/css");require("../feedback/callout.js"),require("../feedback/progress-bar.js"),require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var S=require("./text.js");require("./portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js");var Q=require("../feedback/tooltip.js"),y=require("react-aria");const H={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},P=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),A=({value:n,label:a,size:d="lg",isFocused:k,optionHoverColor:h})=>{const{selectedOption:v,setSelectedOption:p}=r.useContext(P),i=v?.value===n,s=H[d],C=r.useCallback(()=>{p({value:n,label:a})},[p,n,a]);return t.jsxs(m.HStack,{py:1.5,gap:2,bg:i?"brand.base":k?"brand.lightest":"",_hover:i?{}:{bg:h||"brand.lightest"},onClick:C,style:{paddingLeft:s.width,paddingRight:s.width},children:[t.jsx(m.Box,{style:{minWidth:s.width},children:i&&t.jsx(M.default,{width:s.check,height:s.check,color:j.token("colors.text.quaternary")})}),t.jsx(S.default,{size:d,fontWeight:"medium",fontColor:i?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},W=({children:n,onSelect:a,label:d,placeholder:k="Select one",selectedValue:h,size:v="lg",tooltipContent:p,disabled:i,viewMax:s=5,optionHoverColor:C,...F})=>{const[f,x]=r.useState(!1),[o,b]=r.useState(null),g=r.useRef(null),q=r.useRef(null),u=H[v],R=s*u.mult+1,B=r.useCallback(()=>{x(e=>!e),f||(b(null),setTimeout(()=>{var e;return(e=q.current)===null||e===void 0?void 0:e.focus()}))},[f]),L=r.useCallback(e=>{a(e.value),x(!1)},[a]),D=r.useMemo(()=>{const e=r.Children.toArray(n).find(l=>l.props.value===h);return e?e.props.label:k},[h,n]),{buttonProps:N}=y.useButton({...F,isDisabled:i,onPress:B},g),{focusProps:_,isFocusVisible:I}=y.useFocusRing(),{keyboardProps:K}=y.useKeyboard({onKeyDown:e=>{var l,c;if(!f)return;let w=o;const O=r.Children.toArray(n);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?b(r.Children.count(n)-1):(w=o>0?o-1:r.Children.count(n)-1,b(w));break;case"ArrowDown":e.preventDefault(),o===null?b(0):(w=o<r.Children.count(n)-1?o+1:0,b(w));break;case"Enter":if(e.preventDefault(),(l=g.current)===null||l===void 0||l.focus(),o===null)return;if(o>=0&&o<O.length){const E=O[o];E&&a(E.props.value)}break;case"Escape":x(!1),(c=g.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=l=>{var c;!((c=q.current)===null||c===void 0)&&c.contains(l.target)||x(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(P.Provider,{value:{selectedOption:{value:h??"",label:D},setSelectedOption:L},children:t.jsxs(m.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||p)&&t.jsxs(m.HStack,{gap:2,pointerEvents:i?"none":"auto",opacity:i?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(S.default,{size:"sm",fontWeight:"medium",children:d}),p&&t.jsx(Q.default,{content:p,children:t.jsx(T.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",bg:"surface.primary",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:I?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:g,...y.mergeProps(N,_,K),children:[t.jsxs(m.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(S.default,{truncate:!0,size:v,fontColor:h?"text.primary":"text.tertiary",children:D}),f?t.jsx(V.default,{width:u.caret,height:u.caret,color:j.token("colors.brand.base")}):t.jsx(U.default,{width:u.caret,height:u.caret,color:j.token("colors.brand.base")})]}),f&&t.jsx(m.Box,{ref:q,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${R}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(n,(e,l)=>r.cloneElement(e,{isFocused:l===o,size:v,optionHoverColor:C}))})]})]})})};A.displayName="DropdownOption",W.displayName="DropdownSelector",exports.DropdownOption=A,exports.DropdownSelector=W;
+"use strict";var t=require("react/jsx-runtime"),I=require("../icons/ico-caret-down.js"),M=require("../icons/ico-caret-up.js"),T=require("../icons/ico-checkmark.js"),U=require("../icons/ico-question-circle-fill.js"),r=require("react"),j=require("../../lib/cn.js");require("../feedback/callout.js"),require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var D=require("./text.js");require("./portal.js"),require("../../hooks/useToast.js");var V=require("../feedback/tooltip.js"),C=require("react-aria");const z={sm:{caret:16,check:14,height:"2.625rem",top:48,width:"0.75rem",mult:2.25},md:{caret:17,check:15,height:"2.8125rem",top:52,width:"0.85rem",mult:2.25},lg:{caret:18,check:16,height:"3rem",top:55,width:"1rem",mult:2.5}},E=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),A=({value:n,label:a,size:d="lg",isFocused:q,optionHoverColor:p})=>{const{selectedOption:m,setSelectedOption:h}=r.useContext(E),i=m?.value===n,s=z[d],b=r.useCallback(()=>{h({value:n,label:a})},[h,n,a]);return t.jsxs("div",{className:j.cn("flex flex-row items-center py-1.5 gap-2",i?"bg-brand-base":q?"bg-brand-lightest":"",!i&&`hover:bg-${p||"brand-lightest"}`),role:"option",tabIndex:0,"aria-selected":i,onClick:b,onKeyDown:x=>{(x.key==="Enter"||x.key===" ")&&b()},style:{paddingLeft:s.width,paddingRight:s.width},children:[t.jsx("div",{style:{minWidth:s.width},children:i&&t.jsx(T.default,{width:s.check,height:s.check,color:"var(--color-text-quaternary)"})}),t.jsx(D.default,{size:d,fontWeight:"medium",fontColor:i?"text.quaternary":"text.primary",styles:{textAlign:"left"},children:a})]})},F=({children:n,onSelect:a,label:d,placeholder:q="Select one",selectedValue:p,size:m="lg",tooltipContent:h,disabled:i,viewMax:s=5,optionHoverColor:b,...x})=>{const[v,w]=r.useState(!1),[l,f]=r.useState(null),g=r.useRef(null),k=r.useRef(null),u=z[m],P=s*u.mult+1,R=r.useCallback(()=>{w(e=>!e),v||(f(null),setTimeout(()=>{var e;return(e=k.current)===null||e===void 0?void 0:e.focus()}))},[v]),_=r.useCallback(e=>{a(e.value),w(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(n).find(o=>o.props.value===p);return e?e.props.label:q},[p,n]),{buttonProps:H}=C.useButton({...x,isDisabled:i,onPress:R},g),{focusProps:K,isFocusVisible:L}=C.useFocusRing(),{keyboardProps:W}=C.useKeyboard({onKeyDown:e=>{var o,c;if(!v)return;let y=l;const N=r.Children.toArray(n);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?f(r.Children.count(n)-1):(y=l>0?l-1:r.Children.count(n)-1,f(y));break;case"ArrowDown":e.preventDefault(),l===null?f(0):(y=l<r.Children.count(n)-1?l+1:0,f(y));break;case"Enter":if(e.preventDefault(),(o=g.current)===null||o===void 0||o.focus(),l===null)return;if(l>=0&&l<N.length){const O=N[l];O&&a(O.props.value)}break;case"Escape":w(!1),(c=g.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=o=>{var c;!((c=k.current)===null||c===void 0)&&c.contains(o.target)||w(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(E.Provider,{value:{selectedOption:{value:p??"",label:S},setSelectedOption:_},children:t.jsxs("div",{className:"flex flex-col gap-2 w-full items-start",children:[(d||h)&&t.jsxs("div",{className:j.cn("flex flex-row items-center gap-2 transition-all duration-[120ms] linear",i?"pointer-events-none opacity-30":"pointer-events-auto"),children:[d&&t.jsx(D.default,{size:"sm",fontWeight:"medium",children:d}),h&&t.jsx(V.default,{content:h,children:t.jsx(U.default,{className:"w-4 h-4 text-neutral-primary"})})]}),t.jsxs("button",{className:j.cn("w-full h-fit bg-surface-primary border border-neutral-secondary rounded-xl transition-all duration-[120ms] linear relative cursor-pointer hover:border-neutral-primary disabled:opacity-30 disabled:pointer-events-none outline-offset-[0.125rem]",L?"outline outline-brand-base outline-thick":"outline-none"),ref:g,...C.mergeProps(H,K,W),children:[t.jsxs("div",{className:"flex flex-row items-center w-full p-4 justify-between",style:{height:u.height},children:[t.jsx(D.default,{truncate:!0,size:m,fontColor:p?"text.primary":"text.tertiary",children:S}),v?t.jsx(M.default,{width:u.caret,height:u.caret,color:"var(--color-brand-base)"}):t.jsx(I.default,{width:u.caret,height:u.caret,color:"var(--color-brand-base)"})]}),v&&t.jsx("div",{ref:k,tabIndex:-1,className:"py-2 bg-surface-primary absolute w-full rounded-input shadow-[4px_8px_20px_0px_rgba(0,0,0,0.15)] overflow-y-auto outline-none z-max",style:{maxHeight:`${P}rem`,top:u.top},children:r.Children.map(n,(e,o)=>r.cloneElement(e,{isFocused:o===l,size:m,optionHoverColor:b}))})]})]})})};A.displayName="DropdownOption",F.displayName="DropdownSelector",exports.DropdownOption=A,exports.DropdownSelector=F;
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/cjs/components/primitives/dropdown-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' \| 'md' \| 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\n optionHoverColor?: string;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n optionHoverColor?: string;\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData \| null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused, optionHoverColor }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <HStack\n py={1.5}\n gap={2}\n bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n _hover={!isSelected ? { bg: optionHoverColor \|\| 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.text.quaternary')} />\n )}\n </Box>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </HStack>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n optionHoverColor,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n {(label \|\| tooltipContent) && (\n <HStack\n gap={2}\n pointerEvents={disabled ? 'none' : 'auto'}\n opacity={disabled ? 0.3 : ''}\n transition={'all linear 120ms'}\n >\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n )}\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\n bg: 'surface.primary',\n borderWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 'xl',\n transition: 'all linear 120ms',\n position: 'relative',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _hover: { borderColor: 'neutral.primary' },\n _disabled: { opacity: 0.3, pointerEvents: 'none' },\n })}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <HStack w=\"full\" p={4} justifyContent=\"space-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={token('colors.brand.base')} />\n )}\n </HStack>\n\n {isOpen && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n py={2}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n overflowY=\"auto\"\n outline=\"none\"\n zIndex=\"max\"\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n optionHoverColor,\n }),\n )}\n </Box>\n )}\n </button>\n </VStack>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","optionHoverColor","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport {\n Children,\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n children: ReactNode;\n onSelect: (value: string) => void;\n label?: string;\n placeholder?: string;\n selectedValue?: string;\n size?: 'sm' \| 'md' \| 'lg';\n tooltipContent?: string;\n disabled?: boolean;\n viewMax?: 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\n optionHoverColor?: string;\n}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\n optionHoverColor?: string;\n}\n\ninterface OptionData {\n value: string;\n label: string;\n}\n\nexport interface DropdownContextType {\n selectedOption: OptionData \| null;\n setSelectedOption: (option: OptionData) => void;\n}\n\nconst SIZES = {\n sm: { caret: 16, check: 14, height: '2.625rem', top: 48, width: '0.75rem', mult: 2.25 },\n md: { caret: 17, check: 15, height: '2.8125rem', top: 52, width: '0.85rem', mult: 2.25 },\n lg: { caret: 18, check: 16, height: '3rem', top: 55, width: '1rem', mult: 2.5 },\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n selectedOption: null,\n setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, size = 'lg', isFocused, optionHoverColor }: DropdownOptionProps) => {\n const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n const isSelected = selectedOption?.value === value;\n const sizeProps = SIZES[size];\n\n const handleSelectOption = useCallback(() => {\n setSelectedOption({ value, label });\n }, [setSelectedOption, value, label]);\n\n return (\n <div\n className={cn(\n 'flex flex-row items-center py-1.5 gap-2',\n isSelected ? 'bg-brand-base' : isFocused ? 'bg-brand-lightest' : '',\n !isSelected && `hover:bg-${optionHoverColor \|\| 'brand-lightest'}`,\n )}\n role=\"option\"\n tabIndex={0}\n aria-selected={isSelected}\n onClick={handleSelectOption}\n onKeyDown={e => {\n if (e.key === 'Enter' \|\| e.key === ' ') handleSelectOption();\n }}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <div style={{ minWidth: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={'var(--color-text-quaternary)'} />\n )}\n </div>\n <Text\n size={size}\n fontWeight=\"medium\"\n fontColor={isSelected ? 'text.quaternary' : 'text.primary'}\n styles={{ textAlign: 'left' }}\n >\n {label}\n </Text>\n </div>\n );\n};\n\nexport const DropdownSelector = ({\n children,\n onSelect,\n label,\n placeholder = 'Select one',\n selectedValue,\n size = 'lg',\n tooltipContent,\n disabled,\n viewMax = 5,\n optionHoverColor,\n ...props\n}: DropdownSelectorProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const sizeProps = SIZES[size];\n const maxHeight = viewMax * sizeProps.mult + 1;\n\n const toggleDropdown = useCallback(() => {\n setIsOpen(prev => !prev);\n if (!isOpen) {\n setFocusedIndex(null);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [isOpen]);\n\n const handleSelect = useCallback(\n (option: OptionData) => {\n onSelect(option.value);\n setIsOpen(false);\n },\n [onSelect],\n );\n\n const selectedLabel = useMemo(() => {\n const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n const matchedChild = childElements.find(child => child.props.value === selectedValue);\n return matchedChild ? matchedChild.props.label : placeholder;\n }, [selectedValue, children]);\n\n const { buttonProps } = useButton(\n {\n ...props,\n isDisabled: disabled,\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: event => {\n if (!isOpen) return;\n\n let newFocusedIndex = focusedIndex;\n const childArray = Children.toArray(children);\n\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(Children.count(children) - 1);\n } else {\n newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n if (focusedIndex === null) {\n setFocusedIndex(0);\n } else {\n newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n setFocusedIndex(newFocusedIndex);\n }\n break;\n case 'Enter':\n event.preventDefault();\n buttonRef.current?.focus();\n if (focusedIndex === null) return;\n if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n if (selectedChild) {\n onSelect(selectedChild.props.value);\n }\n }\n break;\n case 'Escape':\n setIsOpen(false);\n buttonRef.current?.focus();\n break;\n default:\n break;\n }\n },\n });\n\n useEffect(() => {\n const handleClick = (event: MouseEvent) => {\n if (!dropdownRef.current?.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n return (\n <DropdownContext.Provider\n value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n >\n <div className=\"flex flex-col gap-2 w-full items-start\">\n {(label \|\| tooltipContent) && (\n <div\n className={cn(\n 'flex flex-row items-center gap-2 transition-all duration-[120ms] linear',\n disabled ? 'pointer-events-none opacity-30' : 'pointer-events-auto',\n )}\n >\n {label && (\n <Text size=\"sm\" fontWeight=\"medium\">\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip content={tooltipContent}>\n <IcoQuestionCircleFill className=\"w-4 h-4 text-neutral-primary\" />\n </Tooltip>\n )}\n </div>\n )}\n\n <button\n className={cn(\n 'w-full h-fit bg-surface-primary border border-neutral-secondary rounded-xl transition-all duration-[120ms] linear relative cursor-pointer hover:border-neutral-primary disabled:opacity-30 disabled:pointer-events-none outline-offset-[0.125rem]',\n isFocusVisible ? 'outline outline-brand-base outline-thick' : 'outline-none',\n )}\n ref={buttonRef}\n {...mergeProps(buttonProps, focusProps, keyboardProps)}\n >\n <div className=\"flex flex-row items-center w-full p-4 justify-between\" style={{ height: sizeProps.height }}>\n <Text truncate size={size} fontColor={selectedValue ? 'text.primary' : 'text.tertiary'}>\n {selectedLabel}\n </Text>\n {isOpen ? (\n <IcoCaretUp width={sizeProps.caret} height={sizeProps.caret} color={'var(--color-brand-base)'} />\n ) : (\n <IcoCaretDown width={sizeProps.caret} height={sizeProps.caret} color={'var(--color-brand-base)'} />\n )}\n </div>\n\n {isOpen && (\n <div\n ref={dropdownRef}\n tabIndex={-1}\n className=\"py-2 bg-surface-primary absolute w-full rounded-input shadow-[4px_8px_20px_0px_rgba(0,0,0,0.15)] overflow-y-auto outline-none z-max\"\n style={{ maxHeight: `${maxHeight}rem`, top: sizeProps.top }}\n >\n {Children.map(children, (child, index) =>\n cloneElement(child as ReactElement<DropdownOptionProps>, {\n isFocused: index === focusedIndex,\n size,\n optionHoverColor,\n }),\n )}\n </div>\n )}\n </button>\n </div>\n </DropdownContext.Provider>\n );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["SIZES","DropdownContext","createContext","DropdownOption","value","label","size","isFocused","optionHoverColor","selectedOption","setSelectedOption","useContext","isSelected","sizeProps","handleSelectOption","useCallback","_jsxs","cn","e","_jsx","IcoCheckmark","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","Tooltip","IcoQuestionCircleFill","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

package/dist/cjs/components/primitives/popover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),v=require("./button.js");require("./checkbox.js"),require("./dropdown-selector.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js");var ee=require("../../hooks/useToggleState.js"),re=require("@styled/css"),E=require("@styled/jsx"),te=require("@styled/patterns"),oe=require("@styled/tokens"),x=require("create-slots"),l=require("react"),f=require("react-aria");const _="bottom left",D=8,ne="hover",S=x.createSlot(({children:t})=>r.jsx(r.Fragment,{children:t})),N=x.createSlot(({children:t,...a})=>{const{onPress:s,...c}=a;return r.jsx(E.Center,{children:l.Children.map(t,i=>l.cloneElement(i,c))})}),B=x.createSlot(t=>r.jsx(v.default.LeadingIcon,{...t})),H=x.createSlot(t=>r.jsx(v.default.TrailingIcon,{...t})),M=({children:t,...a})=>x.createHost(t,s=>{var c;const{isOpen:i,defaultOpen:X,onOpenChange:Y,trigger:C=ne,iconSize:h,onPress:le,...O}=a,{isSelected:z,setSelected:P}=ee.useToggleState({isOpen:i,defaultSelected:X,onChange:Y,...a}),b=i!==void 0?i:z,o=24,n=l.useMemo(()=>({isOpen:b,open:()=>{P(!0)},close:()=>{P(!1)},setOpen(e){P(e)},toggle(){}}),[b]),L=s.getProps(S),u=l.useRef(null),{triggerProps:F,overlayProps:w}=f.useOverlayTrigger({type:"dialog"},n,u),d=l.useRef(null),{popoverProps:W,underlayProps:K}=f.usePopover({placement:a.placement||_,offset:D,popoverRef:d,triggerRef:u,...L},n),q=f.mergeProps(L,W);!((c=q?.style)===null||c===void 0)&&c.zIndex&&(q.style.zIndex=oe.token("zIndex.max"));const{className:G,...J}=q,k=l.useCallback(()=>{n.open()},[n]),y=l.useCallback(e=>{var j,T;const p=(j=u.current)===null||j===void 0?void 0:j.getBoundingClientRect(),g=(T=d.current)===null||T===void 0?void 0:T.getBoundingClientRect();if(p&&g){const Z=e.clientX>=p.left-o&&e.clientX<=p.right+o&&e.clientY>=p.top-o&&e.clientY<=p.bottom+o,$=e.clientX>=g.left-o&&e.clientX<=g.right+o&&e.clientY>=g.top-o&&e.clientY<=g.bottom+o;!Z&&!$&&n.close()}},[n]),Q=()=>{if(d.current){const e=d.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},V=e=>{e.key==="Enter"&&(e.preventDefault(),i?n.close():(n.open(),setTimeout(Q,0)))};l.useEffect(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const m=s.get(N),I=s.getProps(B),R=s.getProps(H),A=h?{height:h,width:h}:{};return r.jsxs(r.Fragment,{children:[m?r.jsx(E.Box,{display:"inline-block",ref:u,...O,children:m&&{...m,props:{...m.props,...F}}}):r.jsx(E.Box,{display:"inline-block",ref:u,children:r.jsxs(v.default,{...f.mergeProps(F,O),onKeyDown:V,onHover:()=>C==="hover"&&k(),onPress:()=>C==="click"&&k(),children:[I&&r.jsx(v.default.LeadingIcon,{...I,...A}),R&&r.jsx(v.default.TrailingIcon,{...R,...A})]})}),b&&r.jsxs(f.Overlay,{...w,children:[r.jsx("div",{...K,className:"underlay"}),r.jsx("div",{ref:d,...J,className:re.cx(te.vstack({bg:"surface.secondary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),G),children:s.get(S)})]})]})}),U=Object.assign(M,{Trigger:N,LeadingIcon:B,TrailingIcon:H,Content:S});exports.DEFAULT_OFFSET=D,exports.DEFAULT_PLACEMENT=_,exports.Popover=U,exports.PopoverHost=M,exports.default=U;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),v=require("./button.js");require("./checkbox.js"),require("./dropdown-selector.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js");var $=require("../../hooks/useToggleState.js"),ee=require("../../lib/cn.js"),f=require("create-slots"),l=require("react"),x=require("react-aria");const N="bottom left",R=8,re="hover",q=f.createSlot(({children:t})=>r.jsx(r.Fragment,{children:t})),k=f.createSlot(({children:t,...c})=>{const{onPress:s,...a}=c;return r.jsx("div",{className:"flex items-center justify-center",children:l.Children.map(t,i=>l.cloneElement(i,a))})}),D=f.createSlot(t=>r.jsx(v.default.LeadingIcon,{...t})),z=f.createSlot(t=>r.jsx(v.default.TrailingIcon,{...t})),H=({children:t,...c})=>f.createHost(t,s=>{var a;const{isOpen:i,defaultOpen:U,onOpenChange:X,trigger:S=re,iconSize:h,onPress:te,...O}=c,{isSelected:Y,setSelected:P}=$.useToggleState({isOpen:i,defaultSelected:U,onChange:X,...c}),b=i!==void 0?i:Y,n=24,o=l.useMemo(()=>({isOpen:b,open:()=>{P(!0)},close:()=>{P(!1)},setOpen(e){P(e)},toggle(){}}),[b]),L=s.getProps(q),u=l.useRef(null),{triggerProps:C,overlayProps:w}=x.useOverlayTrigger({type:"dialog"},o,u),d=l.useRef(null),{popoverProps:B,underlayProps:K}=x.usePopover({placement:c.placement||N,offset:R,popoverRef:d,triggerRef:u,...L},o),j=x.mergeProps(L,B);!((a=j?.style)===null||a===void 0)&&a.zIndex&&(j.style.zIndex="var(--zIndex-max)");const{className:G,...J}=j,F=l.useCallback(()=>{o.open()},[o]),y=l.useCallback(e=>{var T,E;const g=(T=u.current)===null||T===void 0?void 0:T.getBoundingClientRect(),p=(E=d.current)===null||E===void 0?void 0:E.getBoundingClientRect();if(g&&p){const Z=e.clientX>=g.left-n&&e.clientX<=g.right+n&&e.clientY>=g.top-n&&e.clientY<=g.bottom+n,W=e.clientX>=p.left-n&&e.clientX<=p.right+n&&e.clientY>=p.top-n&&e.clientY<=p.bottom+n;!Z&&!W&&o.close()}},[o]),Q=()=>{if(d.current){const e=d.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},V=e=>{e.key==="Enter"&&(e.preventDefault(),i?o.close():(o.open(),setTimeout(Q,0)))};l.useEffect(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const m=s.get(k),_=s.getProps(D),A=s.getProps(z),I=h?{height:h,width:h}:{};return r.jsxs(r.Fragment,{children:[m?r.jsx("div",{className:"inline-block",ref:u,...O,children:m&&{...m,props:{...m.props,...C}}}):r.jsx("div",{className:"inline-block",ref:u,children:r.jsxs(v.default,{...x.mergeProps(C,O),onKeyDown:V,onHover:()=>S==="hover"&&F(),onPress:()=>S==="click"&&F(),children:[_&&r.jsx(v.default.LeadingIcon,{..._,...I}),A&&r.jsx(v.default.TrailingIcon,{...A,...I})]})}),b&&r.jsxs(x.Overlay,{...w,children:[r.jsx("div",{...K,className:"underlay"}),r.jsx("div",{ref:d,...J,className:ee.cn("flex flex-col bg-surface-secondary p-3 gap-0 text-text-secondary border border-neutral-secondary rounded-xl shadow-[0px_4px_20px_0px_rgba(0,0,0,0.10)] max-w-52 items-start",G),children:s.get(q)})]})]})}),M=Object.assign(H,{Trigger:k,LeadingIcon:D,TrailingIcon:z,Content:q});exports.DEFAULT_OFFSET=R,exports.DEFAULT_PLACEMENT=N,exports.Popover=M,exports.PopoverHost=H,exports.default=M;
 //# sourceMappingURL=popover.js.map

package/dist/cjs/components/primitives/popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Box, Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n placement?: Placement;\n trigger?: 'click' \| 'hover';\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' \| 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst Trigger = createSlot(({ children, ...props }) => {\n const { onPress, ...restProps } = props;\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, restProps);\n })}\n </Center>\n );\n});\n\nconst LeadingIcon = createSlot(props => <Button.LeadingIcon {...props} />);\n\nconst TrailingIcon = createSlot(props => <Button.TrailingIcon {...props} />);\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isOpen, defaultOpen, onOpenChange, trigger = DEFAULT_TRIGGER, iconSize, onPress, ...restProps } = props;\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: isOpen,\n defaultSelected: defaultOpen,\n onChange: onOpenChange,\n ...props,\n });\n\n const isPopoverOpen = isOpen !== undefined ? isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen: isPopoverOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isPopoverOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: props.placement \|\| DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = token('zIndex.max');\n }\n\n const { className: contentClassName, ...restContentProps } = contentProps;\n\n const handleTrigger = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const triggerEle = slots.get(Trigger);\n const leadingIconProps = slots.getProps(LeadingIcon);\n const trailingIconProps = slots.getProps(TrailingIcon);\n const customIconSize = iconSize ? { height: iconSize, width: iconSize } : {};\n\n return (\n <>\n {triggerEle ? (\n <Box display=\"inline-block\" ref={triggerRef} {...restProps}>\n {triggerEle && { ...triggerEle, props: { ...triggerEle.props, ...triggerProps } }}\n </Box>\n ) : (\n <Box display=\"inline-block\" ref={triggerRef}>\n <Button\n {...mergeProps(triggerProps, restProps)}\n onKeyDown={handleKeyDown}\n onHover={() => trigger === 'hover' && handleTrigger()}\n onPress={() => trigger === 'click' && handleTrigger()}\n >\n {leadingIconProps && <Button.LeadingIcon {...leadingIconProps} {...customIconSize} />}\n {trailingIconProps && <Button.TrailingIcon {...trailingIconProps} {...customIconSize} />}\n </Button>\n </Box>\n )}\n {isPopoverOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...restContentProps}\n className={cx(\n vstack({\n bg: 'surface.secondary',\n p: 3,\n gap: 0,\n color: 'text.secondary',\n borderWidth: 1,\n borderColor: 'neutral.secondary',\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n maxW: 52,\n alignItems: 'start',\n }),\n contentClassName,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n Trigger,\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","Trigger","props","onPress","restProps","Center","Children","child","cloneElement","LeadingIcon","Button","TrailingIcon","PopoverHost","createHost","slots","isOpen","defaultOpen","onOpenChange","trigger","iconSize","isSelected","setOpen","useToggleState","isPopoverOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","contentClassName","restContentProps","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","triggerEle","leadingIconProps","trailingIconProps","customIconSize","_jsxs","Box","Overlay","cx","vstack","Popover"],"mappings":"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"}
1	+ {"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n Children,\n ComponentProps,\n PropsWithChildren,\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n isOpen?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n placement?: Placement;\n trigger?: 'click' \| 'hover';\n}\n\ninterface OverlayTriggerState {\n readonly isOpen: boolean;\n setOpen(isOpen: boolean): void;\n open(): void;\n close(): void;\n toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' \| 'triggerRef'> & {\n children?: ReactNode;\n state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst Trigger = createSlot(({ children, ...props }) => {\n const { onPress, ...restProps } = props;\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, restProps);\n })}\n </div>\n );\n});\n\nconst LeadingIcon = createSlot(props => <Button.LeadingIcon {...props} />);\n\nconst TrailingIcon = createSlot(props => <Button.TrailingIcon {...props} />);\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n return createHost(children, slots => {\n const { isOpen, defaultOpen, onOpenChange, trigger = DEFAULT_TRIGGER, iconSize, onPress, ...restProps } = props;\n const { isSelected, setSelected: setOpen } = useToggleState({\n isOpen: isOpen,\n defaultSelected: defaultOpen,\n onChange: onOpenChange,\n ...props,\n });\n\n const isPopoverOpen = isOpen !== undefined ? isOpen : isSelected;\n const safeZoneRadius = 24;\n\n const state = useMemo(\n () => ({\n isOpen: isPopoverOpen,\n open: () => {\n setOpen(true);\n },\n close: () => {\n setOpen(false);\n },\n setOpen(value: boolean) {\n setOpen(value);\n },\n toggle() {},\n }),\n [isPopoverOpen],\n );\n\n const popoverContentProps = slots.getProps(PopoverContent);\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n const contentRef = useRef<HTMLDivElement>(null);\n const { popoverProps, underlayProps } = usePopover(\n {\n placement: props.placement \|\| DEFAULT_PLACEMENT,\n offset: DEFAULT_OFFSET,\n popoverRef: contentRef,\n triggerRef,\n ...popoverContentProps,\n },\n state,\n );\n\n const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n // Need to override zIndex set by react-aria so popover displays over iframe\n if (contentProps?.style?.zIndex) {\n contentProps.style.zIndex = 'var(--zIndex-max)';\n }\n\n const { className: contentClassName, ...restContentProps } = contentProps;\n\n const handleTrigger = useCallback(() => {\n state.open();\n }, [state]);\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n const buttonRect = triggerRef.current?.getBoundingClientRect();\n const popoverRect = contentRef.current?.getBoundingClientRect();\n\n if (buttonRect && popoverRect) {\n const withinButtonSafeZone =\n event.clientX >= buttonRect.left - safeZoneRadius &&\n event.clientX <= buttonRect.right + safeZoneRadius &&\n event.clientY >= buttonRect.top - safeZoneRadius &&\n event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n const withinPopoverSafeZone =\n event.clientX >= popoverRect.left - safeZoneRadius &&\n event.clientX <= popoverRect.right + safeZoneRadius &&\n event.clientY >= popoverRect.top - safeZoneRadius &&\n event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n state.close();\n }\n }\n },\n [state],\n );\n\n const focusFirstInteractiveElement = () => {\n if (contentRef.current) {\n const interactiveElements = contentRef.current.querySelectorAll(\n 'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n if (interactiveElements.length > 0) {\n (interactiveElements[0] as HTMLElement).focus();\n }\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n if (isOpen) {\n state.close();\n } else {\n state.open();\n setTimeout(focusFirstInteractiveElement, 0);\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousemove', handleMouseLeave);\n return () => {\n document.removeEventListener('mousemove', handleMouseLeave);\n };\n }, [handleMouseLeave]);\n\n const triggerEle = slots.get(Trigger);\n const leadingIconProps = slots.getProps(LeadingIcon);\n const trailingIconProps = slots.getProps(TrailingIcon);\n const customIconSize = iconSize ? { height: iconSize, width: iconSize } : {};\n\n return (\n <>\n {triggerEle ? (\n <div className=\"inline-block\" ref={triggerRef} {...restProps}>\n {triggerEle && { ...triggerEle, props: { ...triggerEle.props, ...triggerProps } }}\n </div>\n ) : (\n <div className=\"inline-block\" ref={triggerRef}>\n <Button\n {...mergeProps(triggerProps, restProps)}\n onKeyDown={handleKeyDown}\n onHover={() => trigger === 'hover' && handleTrigger()}\n onPress={() => trigger === 'click' && handleTrigger()}\n >\n {leadingIconProps && <Button.LeadingIcon {...leadingIconProps} {...customIconSize} />}\n {trailingIconProps && <Button.TrailingIcon {...trailingIconProps} {...customIconSize} />}\n </Button>\n </div>\n )}\n {isPopoverOpen && (\n <Overlay {...overlayProps}>\n <div {...underlayProps} className=\"underlay\" />\n <div\n ref={contentRef}\n {...restContentProps}\n className={cn(\n 'flex flex-col bg-surface-secondary p-3 gap-0 text-text-secondary border border-neutral-secondary rounded-xl shadow-[0px_4px_20px_0px_rgba(0,0,0,0.10)] max-w-52 items-start',\n contentClassName,\n )}\n >\n {slots.get(PopoverContent)}\n </div>\n </Overlay>\n )}\n </>\n );\n });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n Trigger,\n LeadingIcon,\n TrailingIcon,\n Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","Trigger","props","onPress","restProps","Children","child","cloneElement","LeadingIcon","Button","TrailingIcon","PopoverHost","createHost","slots","isOpen","defaultOpen","onOpenChange","trigger","iconSize","isSelected","setOpen","useToggleState","isPopoverOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","contentClassName","restContentProps","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","triggerEle","leadingIconProps","trailingIconProps","customIconSize","_jsxs","Overlay","cn","Popover"],"mappings":"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"}

package/dist/cjs/components/primitives/radio.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),C=require("./text.js"),o=require("@styled/jsx"),R=require("@styled/patterns"),s=require("react"),t=require("react-aria");const b=s.createContext({selectedValue:void 0,setSelectedValue:()=>{}}),h=d=>{const{children:n,onChange:a,selectedValue:l,vertical:r}=d,u=s.useCallback(c=>{a(c)},[a]);return e.jsx(o.Flex,{direction:r?"column":"row",gap:r?5:10,role:"radiogroup",children:e.jsx(b.Provider,{value:{selectedValue:l,setSelectedValue:u},children:n})})},p=s.forwardRef((d,n)=>{const{label:a,value:l}=d,r=s.useContext(b),u=s.useRef(null),c=n||u,v=s.useCallback(()=>{r.setSelectedValue(l)},[r,l]),{hoverProps:f}=t.useHover({}),{focusProps:j,isFocusVisible:x}=t.useFocusRing(),{pressProps:m}=t.usePress({onPress:v}),i=r.selectedValue===l,g=i?0:-1;return e.jsxs("label",{className:R.flex({alignItems:"center"}),children:[e.jsx(t.VisuallyHidden,{children:e.jsx("input",{...t.mergeProps(m,j,f),ref:c,type:"radio",checked:i,tabIndex:g,readOnly:!0})}),e.jsx(o.Flex,{justifyContent:"center",alignItems:"center",borderWidth:"thick",borderColor:x||i?"brand.base":"text.tertiary",transition:"border-color 0.2s ease",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"brand.base"},cursor:"pointer",w:6,h:6,rounded:"full","aria-hidden":"true",children:i&&e.jsx(o.Circle,{size:3,bg:"brand.base"})}),e.jsx(o.Box,{ml:3,children:e.jsx(C.default,{size:"lg",fontWeight:"medium",children:a})})]})});h.displayName="RadioGroup",p.displayName="Radio",exports.Radio=p,exports.RadioGroup=h;
+"use strict";var e=require("react/jsx-runtime"),g=require("./text.js"),x=require("../../lib/cn.js"),r=require("react"),l=require("react-aria");const b=r.createContext({selectedValue:void 0,setSelectedValue:()=>{}}),h=o=>{const{children:d,onChange:i,selectedValue:s,vertical:a}=o,n=r.useCallback(u=>{i(u)},[i]);return e.jsx("div",{className:x.cn("flex",a?"flex-col gap-5":"flex-row gap-10"),role:"radiogroup",children:e.jsx(b.Provider,{value:{selectedValue:s,setSelectedValue:n},children:d})})},f=r.forwardRef((o,d)=>{const{label:i,value:s}=o,a=r.useContext(b),n=r.useRef(null),u=d||n,p=r.useCallback(()=>{a.setSelectedValue(s)},[a,s]),{hoverProps:v}=l.useHover({}),{focusProps:m,isFocusVisible:c}=l.useFocusRing(),{pressProps:j}=l.usePress({onPress:p}),t=a.selectedValue===s,R=t?0:-1;return e.jsxs("label",{className:"flex items-center",children:[e.jsx(l.VisuallyHidden,{children:e.jsx("input",{...l.mergeProps(j,m,v),ref:u,type:"radio",checked:t,tabIndex:R,readOnly:!0})}),e.jsx("div",{className:x.cn("flex justify-center items-center border-thick transition-colors duration-200 ease-in-out cursor-pointer w-6 h-6 rounded-full hover:border-brand-base",c||t?"border-brand-base":"border-text-tertiary",c?"outline outline-thick outline-brand-base outline-offset-[0.125rem]":"outline-none"),"aria-hidden":"true",children:t&&e.jsx("div",{className:"rounded-full w-3 h-3 bg-brand-base"})}),e.jsx("div",{className:"ml-3",children:e.jsx(g.default,{size:"lg",fontWeight:"medium",children:i})})]})});h.displayName="RadioGroup",f.displayName="Radio",exports.Radio=f,exports.RadioGroup=h;
 //# sourceMappingURL=radio.js.map

package/dist/cjs/components/primitives/radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { ~~Box,~~ ~~Circle, Flex~~ } from '@~~styled~~/~~jsx~~';\nimport { ~~flex } from '@styled/patterns';\nimport {~~ PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n AriaRadioGroupProps,\n AriaRadioProps,\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n onChange: (value: string) => void;\n selectedValue?: string;\n vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n label?: string;\n}\n\nconst RadioContext = createContext<{\n selectedValue: string \| undefined;\n setSelectedValue: (value: string) => void;\n}>({\n selectedValue: undefined,\n setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const { children, onChange, selectedValue, vertical } = props;\n\n const handleSelect = useCallback(\n (value: string) => {\n onChange(value);\n },\n [onChange],\n );\n\n return (\n <~~Flex~~ ~~direction~~={vertical ? '~~column~~' : 'row'} gap~~={vertical ? 5 :~~ 10} role=\"radiogroup\">\n <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n {children}\n </RadioContext.Provider>\n </~~Flex~~>\n );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n const { label, value } = props;\n const state = useContext(RadioContext);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n const handlePress = useCallback(() => {\n state.setSelectedValue(value);\n }, [state, value]);\n\n const { hoverProps } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const { pressProps } = usePress({\n onPress: handlePress,\n });\n\n const isSelected = state.selectedValue === value;\n\n const tabIndex = isSelected ? 0 : -1;\n\n return (\n <label className={flex({ ~~alignItems: '~~center~~' })}~~>\n <VisuallyHidden>\n <input\n {...mergeProps(pressProps, focusProps, hoverProps)}\n ref={ref}\n type=\"radio\"\n checked={isSelected}\n tabIndex={tabIndex}\n readOnly\n />\n </VisuallyHidden>\n <~~Flex~~\n ~~justifyContent=\"center~~\"\n ~~alignItems=\"~~center~~\"\n borderWidth=\"~~thick~~\"\~~n ~~borderColor={~~isFocusVisible \|\| isSelected ? 'brand.base' : 'text.tertiary'}\n ~~transition=\"border-color 0.2s ease\"\n outlineColor=\"brand.base\"\n outlineStyle={~~isFocusVisible ? '~~solid'~~ : ~~'none'}\n outlineWidth=\"thick\"\n outlineOffset={~~0.~~5}\n _hover={{~~ ~~borderColor~~: '~~brand.base~~' ~~}}\~~n ~~cursor=\"pointer\"\n w={6~~}\n ~~h={6}\n rounded=\"full\"\n~~ aria-hidden=\"true\"\n >\n {isSelected && <~~Circle~~ ~~size={~~3} bg~~=\"~~brand.base\" />}\n </~~Flex~~>\n <~~Box~~ ml={3}>\n <Text size=\"lg\" fontWeight=\"medium\">\n {label}\n </Text>\n </~~Box~~>\n </label>\n );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","~~Flex~~","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","~~flex","~~VisuallyHidden","mergeProps","~~Circle","Box","~~Text"],"mappings":"~~yKAwBA~~,MAAMA,EAAeC,~~EAAAA~~,~~cAGlB~~,CACD,cAAe,OACf,iBAAkB,IAAK,~~CACxB~~,CAAA,~~CAAA,~~EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAAAA,~~IAACC~~,~~EAAAA~~,~~KAAI~~,~~CAAC~~,~~UAAWL~~,~~EAAW~~,~~SAAW~~,~~MAAO~~,~~IAAKA~~,~~EAAW~~,~~EAAI~~,~~GAAI,~~KAAK,aAAY,~~SACrFI~~,~~EAACX~~,~~IAAAA~~,EAAa,~~SAAQ~~,~~CAAC~~,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,~~CAAY~~,~~WAC1EJ~~,~~CAAQ~~,CAAA,~~CAEN~~,CAAA,~~CAEX~~,EAEaS,EAAQC,~~EAAAA~~,~~WAAyC,~~CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAAA,WAAWlB,CAAY,EAE/BmB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,~~EAAAA~~,~~YAAY,~~IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAAA,SAAS,~~CAAE~~,~~CAAA,~~EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,~~iBACjC~~,CAAE,WAAAC,CAAY,EAAGC,~~EAAAA~~,~~SAAS,~~CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,~~OAAO~~,~~QAAA~~,~~CAAA~~,~~UAAWC~~,~~OAAK~~,~~CAAE~~,~~WAAY~~,~~SAAU~~,~~EAAC~~,~~SAAA~~,~~CAC9CtB~~,~~EAACuB~~,~~IAAAA~~,~~iBAAc,~~CAAA,~~SACbvB~~,~~kBACMwB~~,~~EAAAA,WAAWP,~~EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,~~SACA~~,EAAA,CAAA,~~CAAA~~,~~CAAA~~,~~EAEJpB~~,~~EAAAA~~,~~IAACC~~,EAAAA,~~KACC~~,~~CAAA~~,~~eAAe,SACf,WAAW,SACX,YAAY,QACZ,YAAac,~~GAAkBI,EAAa,~~aAAe~~,~~gBAC3D~~,~~WAAW,yBACX,aAAa,aACb,aAAcJ,~~EAAiB,~~QAAU~~,~~OACzC~~,~~aAAa~~,~~QACb~~,~~cAAe~~,~~GACf~~,~~OAAQ,CAAE,YAAa,cACvB,OAAO,UACP,EAAG,EACH,EAAG,EACH,QAAQ,OACI,cAAA,gBAEXI,~~GAAcnB,EAAAA,~~IAACyB~~,~~UAAO~~,~~KAAM~~,~~EAAG~~,~~GAAG~~,~~cAC9B~~,CAAA,~~EACPzB~~,EAAAA,~~IAAC0B~~,~~EAAAA~~,~~IAAG~~,~~CAAC~~,~~GAAI~~,~~EACP~~,~~SAAA1B~~,EAAAA,~~IAAC2B~~,~~UAAK,~~CAAA,KAAK,KAAK,WAAW,~~SACxB~~,~~SAAAtB~~,~~GAEC~~,CAAA,CAAA,CAAA,CAAA,~~CAGZ~~,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}
1	+ {"version":3,"file":"radio.js","sources":["../../../../src/components/primitives/radio.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { cn } from '@lib/cn';\nimport { PropsWithChildren, createContext, forwardRef, useCallback, useContext, useRef } from 'react';\nimport {\n AriaRadioGroupProps,\n AriaRadioProps,\n VisuallyHidden,\n mergeProps,\n useFocusRing,\n useHover,\n usePress,\n} from 'react-aria';\n\nexport interface RadioGroupProps extends AriaRadioGroupProps, PropsWithChildren {\n onChange: (value: string) => void;\n selectedValue?: string;\n vertical?: boolean;\n}\n\nexport interface RadioProps extends AriaRadioProps {\n label?: string;\n}\n\nconst RadioContext = createContext<{\n selectedValue: string \| undefined;\n setSelectedValue: (value: string) => void;\n}>({\n selectedValue: undefined,\n setSelectedValue: () => {},\n});\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n const { children, onChange, selectedValue, vertical } = props;\n\n const handleSelect = useCallback(\n (value: string) => {\n onChange(value);\n },\n [onChange],\n );\n\n return (\n <div className={cn('flex', vertical ? 'flex-col gap-5' : 'flex-row gap-10')} role=\"radiogroup\">\n <RadioContext.Provider value={{ selectedValue, setSelectedValue: handleSelect }}>\n {children}\n </RadioContext.Provider>\n </div>\n );\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {\n const { label, value } = props;\n const state = useContext(RadioContext);\n\n const internalRef = useRef<HTMLInputElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n const handlePress = useCallback(() => {\n state.setSelectedValue(value);\n }, [state, value]);\n\n const { hoverProps } = useHover({});\n const { focusProps, isFocusVisible } = useFocusRing();\n const { pressProps } = usePress({\n onPress: handlePress,\n });\n\n const isSelected = state.selectedValue === value;\n\n const tabIndex = isSelected ? 0 : -1;\n\n return (\n <label className=\"flex items-center\">\n <VisuallyHidden>\n <input\n {...mergeProps(pressProps, focusProps, hoverProps)}\n ref={ref}\n type=\"radio\"\n checked={isSelected}\n tabIndex={tabIndex}\n readOnly\n />\n </VisuallyHidden>\n <div\n className={cn(\n 'flex justify-center items-center border-thick transition-colors duration-200 ease-in-out cursor-pointer w-6 h-6 rounded-full hover:border-brand-base',\n isFocusVisible \|\| isSelected ? 'border-brand-base' : 'border-text-tertiary',\n isFocusVisible ? 'outline outline-thick outline-brand-base outline-offset-[0.125rem]' : 'outline-none',\n )}\n aria-hidden=\"true\"\n >\n {isSelected && <div className=\"rounded-full w-3 h-3 bg-brand-base\" />}\n </div>\n <div className=\"ml-3\">\n <Text size=\"lg\" fontWeight=\"medium\">\n {label}\n </Text>\n </div>\n </label>\n );\n});\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n"],"names":["RadioContext","createContext","RadioGroup","props","children","onChange","selectedValue","vertical","handleSelect","useCallback","value","_jsx","cn","Radio","forwardRef","forwardedRef","label","state","useContext","internalRef","useRef","ref","handlePress","hoverProps","useHover","focusProps","isFocusVisible","useFocusRing","pressProps","usePress","isSelected","tabIndex","_jsxs","VisuallyHidden","mergeProps","Text"],"mappings":"+IAuBA,MAAMA,EAAeC,EAGlB,cAAA,CACD,cAAe,OACf,iBAAkB,IAAK,EACxB,CAAA,EAEYC,EAAcC,GAA0B,CACnD,KAAM,CAAE,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,SAAAC,CAAQ,EAAKJ,EAElDK,EAAeC,EAAAA,YAClBC,GAAiB,CAChBL,EAASK,CAAK,CAChB,EACA,CAACL,CAAQ,CAAC,EAGZ,OACEM,EAAAA,IAAK,MAAA,CAAA,UAAWC,EAAAA,GAAG,OAAQL,EAAW,iBAAmB,iBAAiB,EAAG,KAAK,aAAY,SAC5FI,EAAAA,IAACX,EAAa,SAAS,CAAA,MAAO,CAAE,cAAAM,EAAe,iBAAkBE,CAAc,EAAA,SAC5EJ,CACqB,CAAA,CAAA,CAAA,CAG9B,EAEaS,EAAQC,aAAyC,CAACX,EAAOY,IAAgB,CACpF,KAAM,CAAE,MAAAC,EAAO,MAAAN,CAAO,EAAGP,EACnBc,EAAQC,EAAAA,WAAWlB,CAAY,EAE/BmB,EAAcC,EAAAA,OAAyB,IAAI,EAC3CC,EAAMN,GAAgBI,EAEtBG,EAAcb,cAAY,IAAK,CACnCQ,EAAM,iBAAiBP,CAAK,CAC9B,EAAG,CAACO,EAAOP,CAAK,CAAC,EAEX,CAAE,WAAAa,CAAY,EAAGC,EAAAA,SAAS,EAAE,EAC5B,CAAE,WAAAC,EAAY,eAAAC,GAAmBC,eACjC,EAAA,CAAE,WAAAC,CAAY,EAAGC,WAAS,CAC9B,QAASP,CACV,CAAA,EAEKQ,EAAab,EAAM,gBAAkBP,EAErCqB,EAAWD,EAAa,EAAI,GAElC,OACEE,gBAAO,UAAU,oBACf,SAAA,CAAArB,EAAAA,IAACsB,EAAc,eAAA,CAAA,SACbtB,MACM,QAAA,CAAA,GAAAuB,aAAWN,EAAYH,EAAYF,CAAU,EACjD,IAAKF,EACL,KAAK,QACL,QAASS,EACT,SAAUC,EACV,SAAQ,EAAA,CAAA,IAGZpB,MAAA,MAAA,CACE,UAAWC,EAAAA,GACT,uJACAc,GAAkBI,EAAa,oBAAsB,uBACrDJ,EAAiB,qEAAuE,cAAc,EACvG,cACW,OAEX,SAAAI,GAAcnB,EAAAA,IAAA,MAAA,CAAK,UAAU,oCAAuC,CAAA,CAAA,CAAA,EAEvEA,EAAAA,IAAK,MAAA,CAAA,UAAU,OAAM,SACnBA,MAACwB,EAAAA,QAAK,CAAA,KAAK,KAAK,WAAW,SAAQ,SAChCnB,CACI,CAAA,CAAA,CAAA,CACH,CACA,CAAA,CAEZ,CAAC,EAEDd,EAAW,YAAc,aACzBW,EAAM,YAAc"}

package/dist/cjs/components/primitives/segmented-control.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var l=require("react/jsx-runtime"),y=require("@styled/css"),x=require("@styled/jsx"),j=require("create-slots"),e=require("react"),g=require("react-aria");const k=e.createContext({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),S=j.createSlot(({children:i,...u})=>l.jsx(x.Flex,{alignItems:"center",justifyContent:"center",children:e.Children.map(i,c=>e.cloneElement(c,u))})),w=i=>{const{children:u,onChange:c,selectedTab:n,size:f="md",disabled:h=!1}=i,[t,o]=e.useState(n),a=e.useRef({}),r=e.useRef(),[m,d]=e.useState({transform:"translateX(4px)",width:"",height:""});e.useEffect(()=>{n!==void 0&&o(n)},[n]),e.useEffect(()=>(r.current||(r.current=new ResizeObserver(()=>{const{offsetLeft:s,clientWidth:b,clientHeight:p}=a.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${p}px`})})),r.current.observe(a.current[t]),()=>{r.current&&a.current[t]&&r.current.unobserve(a.current[t])}),[]),e.useEffect(()=>{if(t&&a.current[t]){const{offsetLeft:s,clientWidth:b,clientHeight:p}=a.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${p}px`})}},[t,f]);const v=e.useCallback(s=>{o(s),c(s)},[o,c]);return l.jsxs(x.Flex,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[l.jsx(x.Box,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease",rounded:"inherit",ml:-1,style:{...m}}),l.jsx(k.Provider,{value:{currentTab:t,setCurrentTab:v,size:f,tabRefs:a,disabled:h},children:u})]})},R=e.forwardRef((i,u)=>{const{label:c,id:n}=i,{currentTab:f,setCurrentTab:h,tabRefs:t,size:o,disabled:a}=e.useContext(k),r=f===n,m=o==="sm"?8:o==="md"?10:13,d=o==="sm"?16:20,v=e.useRef(null),s=u||v;e.useEffect(()=>{typeof s=="object"&&t.current&&(t.current[n]=s.current)},[n]);const b=e.useCallback(()=>{h(n)},[h,n]),{buttonProps:p,isPressed:T}=g.useButton({onPress:b,isDisabled:a},s),{hoverProps:P}=g.useHover({}),{isFocusVisible:z,focusProps:$}=g.useFocusRing();return j.createHost(i.children,q=>{const C=q.get(S);return l.jsx("button",{className:y.css({display:"flex",justifyContent:"center",alignItems:"center",h:m,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:r?"text.primary":"text.secondary",fontSize:o,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:z?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:r?"background 0s":"background 0.2s ease",_disabled:{opacity:"0.3",pointerEvents:"none"},_hover:{bg:r?"transparent":"ink.20",_dark:{bg:r?"transparent":"slate.1"}}}),ref:s,...g.mergeProps(p,P,$),disabled:a,children:l.jsxs(x.Flex,{opacity:T&&!r?.5:1,align:"center",justify:"center",children:[C&&{...C,props:{...C.props,className:y.css({mr:1,color:r?"text.primary":"text.secondary"}),width:d,height:d}},c]})})})}),E=Object.assign(R,{Icon:S});R.displayName="Tab",w.displayName="SegmentedControl",exports.SegmentedControl=w,exports.Tab=E;
+"use strict";var l=require("react/jsx-runtime"),y=require("../../lib/cn.js"),j=require("create-slots"),e=require("react"),m=require("react-aria");const C=e.createContext({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),k=j.createSlot(({children:o,...u})=>l.jsx("div",{className:"flex items-center justify-center",children:e.Children.map(o,c=>e.cloneElement(c,u))})),w=o=>{const{children:u,onChange:c,selectedTab:n,size:h="md",disabled:p=!1}=o,[t,i]=e.useState(n),a=e.useRef({}),r=e.useRef(),[x,d]=e.useState({transform:"translateX(4px)",width:"",height:""});e.useEffect(()=>{n!==void 0&&i(n)},[n]),e.useEffect(()=>(r.current||(r.current=new ResizeObserver(()=>{const{offsetLeft:s,clientWidth:b,clientHeight:f}=a.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${f}px`})})),r.current.observe(a.current[t]),()=>{r.current&&a.current[t]&&r.current.unobserve(a.current[t])}),[]),e.useEffect(()=>{if(t&&a.current[t]){const{offsetLeft:s,clientWidth:b,clientHeight:f}=a.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${f}px`})}},[t,h]);const g=e.useCallback(s=>{i(s),c(s)},[i,c]);return l.jsxs("div",{className:"flex w-full p-1 rounded-full bg-ink-10 dark:bg-slate-2 relative",role:"tablist","aria-label":"Segmented Control",children:[l.jsx("div",{className:"absolute bg-paper dark:bg-slate-4 shadow-[0px_4px_20px_0px_rgba(24,23,26,0.1)] transition-transform duration-200 ease-in-out rounded-[inherit] -ml-1",style:{...x}}),l.jsx(C.Provider,{value:{currentTab:t,setCurrentTab:g,size:h,tabRefs:a,disabled:p},children:u})]})},R=e.forwardRef((o,u)=>{const{label:c,id:n}=o,{currentTab:h,setCurrentTab:p,tabRefs:t,size:i,disabled:a}=e.useContext(C),r=h===n,x=i==="sm"?"h-8":i==="md"?"h-10":"h-[3.25rem]",d=i==="sm"?16:20,g=e.useRef(null),s=u||g;e.useEffect(()=>{typeof s=="object"&&t.current&&(t.current[n]=s.current)},[n]);const b=e.useCallback(()=>{p(n)},[p,n]),{buttonProps:f,isPressed:T}=m.useButton({onPress:b,isDisabled:a},s),{hoverProps:N}=m.useHover({}),{isFocusVisible:P,focusProps:S}=m.useFocusRing();return j.createHost(o.children,$=>{const v=$.get(k);return l.jsx("button",{className:y.cn("flex justify-center items-center w-full rounded-button z-0 cursor-pointer font-semibold whitespace-nowrap bg-transparent outline disabled:opacity-30 disabled:pointer-events-none",x,i==="sm"?"text-sm":i==="md"?"text-md":"text-lg",r?"text-text-primary":"text-text-secondary",P?"outline-brand-base outline-thick":"outline-transparent outline-thick",r?"transition-none":"transition-colors duration-200 ease-in-out",r?"hover:bg-transparent dark:hover:bg-transparent":"hover:bg-ink-20 dark:hover:bg-slate-1"),ref:s,...m.mergeProps(f,N,S),disabled:a,children:l.jsxs("div",{className:"flex items-center justify-center",style:{opacity:T&&!r?.5:1},children:[v&&{...v,props:{...v.props,className:y.cn("mr-1",r?"text-text-primary":"text-text-secondary"),width:d,height:d}},c]})})})}),q=Object.assign(R,{Icon:k});R.displayName="Tab",w.displayName="SegmentedControl",exports.SegmentedControl=w,exports.Tab=q;
 //# sourceMappingURL=segmented-control.js.map

package/dist/cjs/components/primitives/segmented-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { css } from '@styled/css';\nimport { Box, Flex } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n Children,\n PropsWithChildren,\n RefObject,\n cloneElement,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps extends PropsWithChildren {\n onChange: (value: string) => void;\n selectedTab: string;\n size?: 'sm' \| 'md' \| 'lg';\n disabled?: boolean;\n}\n\nexport interface TabProps extends AriaButtonProps {\n label: string;\n id: string;\n}\n\ntype TabRefs = {\n [key: string]: HTMLButtonElement \| null;\n};\n\nconst SegmentedControlContext = createContext<{\n currentTab: string \| undefined;\n setCurrentTab: (id: string) => void;\n size?: 'sm' \| 'md' \| 'lg';\n tabRefs: RefObject<TabRefs>;\n disabled: boolean;\n}>({\n currentTab: undefined,\n setCurrentTab: () => {},\n tabRefs: { current: {} },\n disabled: false,\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n const { children, onChange, selectedTab, size = 'md', disabled = false } = props;\n const [currentTab, setCurrentTab] = useState(selectedTab);\n const tabRefs = useRef<{ [key: string]: HTMLButtonElement \| null }>({});\n const observer = useRef<ResizeObserver>();\n const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n useEffect(() => {\n if (selectedTab !== undefined) {\n setCurrentTab(selectedTab);\n }\n }, [selectedTab]);\n\n useEffect(() => {\n if (!observer.current) {\n observer.current = new ResizeObserver(() => {\n const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n setIndicatorStyle({\n transform: `translateX(${offsetLeft}px)`,\n width: `${clientWidth}px`,\n height: `${clientHeight}px`,\n });\n });\n }\n\n observer.current.observe(tabRefs.current[currentTab]!);\n\n return () => {\n if (observer.current && tabRefs.current[currentTab]) {\n observer.current.unobserve(tabRefs.current[currentTab]!);\n }\n };\n }, []);\n\n useEffect(() => {\n if (currentTab && tabRefs.current[currentTab]) {\n const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n setIndicatorStyle({\n transform: `translateX(${offsetLeft}px)`,\n width: `${clientWidth}px`,\n height: `${clientHeight}px`,\n });\n }\n }, [currentTab, size]);\n\n const handleSelect = useCallback(\n (id: string) => {\n setCurrentTab(id);\n onChange(id);\n },\n [setCurrentTab, onChange],\n );\n\n return (\n <Flex\n w=\"full\"\n role=\"tablist\"\n p={1}\n rounded=\"full\"\n bg=\"ink.10\"\n _dark={{ bg: 'slate.2' }}\n aria-label=\"Segmented Control\"\n position=\"relative\"\n >\n <Box\n position=\"absolute\"\n bg=\"paper\"\n _dark={{ bg: 'slate.4' }}\n boxShadow=\"0px 4px 20px 0px {colors.ink.90/10}\"\n transition=\"transform 0.2s ease\"\n rounded=\"inherit\"\n ml={-1}\n style={{ ...indicatorStyle }}\n />\n <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs, disabled }}>\n {children}\n </SegmentedControlContext.Provider>\n </Flex>\n );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n const { label, id } = props;\n const { currentTab, setCurrentTab, tabRefs, size, disabled } = useContext(SegmentedControlContext);\n\n const isSelected = currentTab === id;\n const height = size === 'sm' ? 8 : size === 'md' ? 10 : 13;\n const iconSize = size === 'sm' ? 16 : 20;\n\n const internalRef = useRef<HTMLButtonElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n useEffect(() => {\n if (typeof ref === 'object' && tabRefs.current) {\n tabRefs.current[id] = ref.current;\n }\n }, [id]);\n\n const handlePress = useCallback(() => {\n setCurrentTab(id);\n }, [setCurrentTab, id]);\n\n const { buttonProps, isPressed } = useButton(\n { onPress: handlePress, isDisabled: disabled },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({});\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const icon = slots.get(Icon);\n\n return (\n <button\n className={css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n h: height,\n w: 'full',\n rounded: 'button',\n zIndex: 0,\n cursor: 'pointer',\n color: isSelected ? 'text.primary' : 'text.secondary',\n fontSize: size,\n fontWeight: 'semibold',\n whiteSpace: 'nowrap',\n bg: 'transparent',\n outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n transition: isSelected ? 'background 0s' : 'background 0.2s ease',\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n _hover: {\n bg: isSelected ? 'transparent' : 'ink.20',\n _dark: { bg: isSelected ? 'transparent' : 'slate.1' },\n },\n })}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n disabled={disabled}\n >\n <Flex opacity={isPressed && !isSelected ? 0.5 : 1} align=\"center\" justify=\"center\">\n {icon && {\n ...icon,\n props: {\n ...icon.props,\n className: css({ mr: 1, color: isSelected ? 'text.primary' : 'text.secondary' }),\n width: iconSize,\n height: iconSize,\n },\n }}\n {label}\n </Flex>\n </button>\n );\n });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","disabled","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","Box","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","css","mergeProps","Tab"],"mappings":"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"}
1	+ {"version":3,"file":"segmented-control.js","sources":["../../../../src/components/primitives/segmented-control.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport React, {\n Children,\n PropsWithChildren,\n RefObject,\n cloneElement,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useHover } from 'react-aria';\n\nexport interface SegmentedControlProps extends PropsWithChildren {\n onChange: (value: string) => void;\n selectedTab: string;\n size?: 'sm' \| 'md' \| 'lg';\n disabled?: boolean;\n}\n\nexport interface TabProps extends AriaButtonProps {\n label: string;\n id: string;\n}\n\ntype TabRefs = {\n [key: string]: HTMLButtonElement \| null;\n};\n\nconst SegmentedControlContext = createContext<{\n currentTab: string \| undefined;\n setCurrentTab: (id: string) => void;\n size?: 'sm' \| 'md' \| 'lg';\n tabRefs: RefObject<TabRefs>;\n disabled: boolean;\n}>({\n currentTab: undefined,\n setCurrentTab: () => {},\n tabRefs: { current: {} },\n disabled: false,\n});\n\nconst Icon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nexport const SegmentedControl = (props: SegmentedControlProps) => {\n const { children, onChange, selectedTab, size = 'md', disabled = false } = props;\n const [currentTab, setCurrentTab] = useState(selectedTab);\n const tabRefs = useRef<{ [key: string]: HTMLButtonElement \| null }>({});\n const observer = useRef<ResizeObserver>();\n const [indicatorStyle, setIndicatorStyle] = useState({ transform: 'translateX(4px)', width: '', height: '' });\n\n useEffect(() => {\n if (selectedTab !== undefined) {\n setCurrentTab(selectedTab);\n }\n }, [selectedTab]);\n\n useEffect(() => {\n if (!observer.current) {\n observer.current = new ResizeObserver(() => {\n const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n setIndicatorStyle({\n transform: `translateX(${offsetLeft}px)`,\n width: `${clientWidth}px`,\n height: `${clientHeight}px`,\n });\n });\n }\n\n observer.current.observe(tabRefs.current[currentTab]!);\n\n return () => {\n if (observer.current && tabRefs.current[currentTab]) {\n observer.current.unobserve(tabRefs.current[currentTab]!);\n }\n };\n }, []);\n\n useEffect(() => {\n if (currentTab && tabRefs.current[currentTab]) {\n const { offsetLeft, clientWidth, clientHeight } = tabRefs.current[currentTab]!;\n setIndicatorStyle({\n transform: `translateX(${offsetLeft}px)`,\n width: `${clientWidth}px`,\n height: `${clientHeight}px`,\n });\n }\n }, [currentTab, size]);\n\n const handleSelect = useCallback(\n (id: string) => {\n setCurrentTab(id);\n onChange(id);\n },\n [setCurrentTab, onChange],\n );\n\n return (\n <div\n className=\"flex w-full p-1 rounded-full bg-ink-10 dark:bg-slate-2 relative\"\n role=\"tablist\"\n aria-label=\"Segmented Control\"\n >\n <div\n className=\"absolute bg-paper dark:bg-slate-4 shadow-[0px_4px_20px_0px_rgba(24,23,26,0.1)] transition-transform duration-200 ease-in-out rounded-[inherit] -ml-1\"\n style={{ ...indicatorStyle }}\n />\n <SegmentedControlContext.Provider value={{ currentTab, setCurrentTab: handleSelect, size, tabRefs, disabled }}>\n {children}\n </SegmentedControlContext.Provider>\n </div>\n );\n};\n\nconst TabComponent = forwardRef<HTMLButtonElement, TabProps>((props, forwardedRef) => {\n const { label, id } = props;\n const { currentTab, setCurrentTab, tabRefs, size, disabled } = useContext(SegmentedControlContext);\n\n const isSelected = currentTab === id;\n const height = size === 'sm' ? 'h-8' : size === 'md' ? 'h-10' : 'h-[3.25rem]';\n const iconSize = size === 'sm' ? 16 : 20;\n\n const internalRef = useRef<HTMLButtonElement>(null);\n const ref = forwardedRef \|\| internalRef;\n\n useEffect(() => {\n if (typeof ref === 'object' && tabRefs.current) {\n tabRefs.current[id] = ref.current;\n }\n }, [id]);\n\n const handlePress = useCallback(() => {\n setCurrentTab(id);\n }, [setCurrentTab, id]);\n\n const { buttonProps, isPressed } = useButton(\n { onPress: handlePress, isDisabled: disabled },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({});\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const icon = slots.get(Icon);\n\n return (\n <button\n className={cn(\n 'flex justify-center items-center w-full rounded-button z-0 cursor-pointer font-semibold whitespace-nowrap bg-transparent outline disabled:opacity-30 disabled:pointer-events-none',\n height,\n size === 'sm' ? 'text-sm' : size === 'md' ? 'text-md' : 'text-lg',\n isSelected ? 'text-text-primary' : 'text-text-secondary',\n isFocusVisible ? 'outline-brand-base outline-thick' : 'outline-transparent outline-thick',\n isSelected ? 'transition-none' : 'transition-colors duration-200 ease-in-out',\n isSelected ? 'hover:bg-transparent dark:hover:bg-transparent' : 'hover:bg-ink-20 dark:hover:bg-slate-1',\n )}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n disabled={disabled}\n >\n <div className=\"flex items-center justify-center\" style={{ opacity: isPressed && !isSelected ? 0.5 : 1 }}>\n {icon && {\n ...icon,\n props: {\n ...icon.props,\n className: cn('mr-1', isSelected ? 'text-text-primary' : 'text-text-secondary'),\n width: iconSize,\n height: iconSize,\n },\n }}\n {label}\n </div>\n </button>\n );\n });\n});\n\nexport const Tab = Object.assign(TabComponent, {\n Icon,\n});\n\nTabComponent.displayName = 'Tab';\nSegmentedControl.displayName = 'SegmentedControl';\n"],"names":["SegmentedControlContext","createContext","Icon","createSlot","children","props","_jsx","Children","child","cloneElement","SegmentedControl","onChange","selectedTab","size","disabled","currentTab","setCurrentTab","useState","tabRefs","useRef","observer","indicatorStyle","setIndicatorStyle","useEffect","offsetLeft","clientWidth","clientHeight","handleSelect","useCallback","id","_jsxs","TabComponent","forwardRef","forwardedRef","label","useContext","isSelected","height","iconSize","internalRef","ref","handlePress","buttonProps","isPressed","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","icon","cn","mergeProps","Tab"],"mappings":"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"}

package/dist/cjs/components/primitives/switch.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),x=require("./text.js"),m=require("../../hooks/useToggleState.js"),a=require("@styled/css"),q=require("@styled/jsx"),S=require("@styled/jsx/flex"),j=require("@styled/patterns"),l=require("react"),s=require("react-aria");const n=l.forwardRef((t,o)=>{const{checked:u,disabled:c=!1,label:i,className:d,...b}=t,p=l.useRef(null),g=o||p,e=m.useToggleState({...t,isSelected:u}),{buttonProps:f}=s.useToggleButton({...b,isDisabled:c},e,g),{isFocusVisible:h,focusProps:v}=s.useFocusRing();return r.jsxs(S.Flex,{alignItems:"center",children:[i&&r.jsx(q.Box,{mr:2,children:r.jsx(x.default,{fontWeight:"medium",styles:{lineHeight:1},children:i})}),r.jsx("button",{...s.mergeProps(f,v),className:a.cx(a.css({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:h?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),d),children:r.jsx("span",{className:j.circle({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});n.displayName="Switch",exports.default=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),v=require("./text.js"),x=require("../../hooks/useToggleState.js"),a=require("../../lib/cn.js"),l=require("react"),t=require("react-aria");const n=l.forwardRef((s,o)=>{const{checked:u,disabled:c=!1,label:i,className:d,...b}=s,f=l.useRef(null),g=o||f,r=x.useToggleState({...s,isSelected:u}),{buttonProps:h}=t.useToggleButton({...b,isDisabled:c},r,g),{isFocusVisible:m,focusProps:p}=t.useFocusRing();return e.jsxs("div",{className:"flex items-center",children:[i&&e.jsx("div",{className:"mr-2",children:e.jsx(v.default,{fontWeight:"medium",styles:{lineHeight:1},children:i})}),e.jsx("button",{...t.mergeProps(h,p),className:a.cn("px-0.5 h-5 w-11 disabled:opacity-30 disabled:pointer-events-none transition-colors duration-200 ease-in-out rounded-full cursor-pointer outline outline-offset-[0.125rem]",r.isSelected?"bg-brand-base hover:bg-brand-base":"bg-neutral-primary hover:bg-ink-70 dark:hover:bg-slate-4",m?"outline-brand-base outline-thick":"outline-transparent outline-thick",d),children:e.jsx("span",{className:a.cn("block rounded-full h-4 w-4 bg-paper relative transition-[left] duration-200 ease-in-out",r.isSelected?"left-6":"left-0")})})]})});n.displayName="Switch",exports.default=n;
 //# sourceMappingURL=switch.js.map

package/dist/cjs/components/primitives/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { ~~css,~~ cx } from '@~~styled~~/~~css~~';\nimport { ~~Box } from '@styled/jsx';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport {~~ forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n className?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, className, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <~~Flex~~ ~~alignItems~~=\"center\">\n {label && (\n <~~Box~~ mr={2}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </~~Box~~>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={cx(\n ~~css({\n~~ px: 0.5~~,\n~~ h: 5~~,\n width:~~ 11~~,\n _disabled~~: ~~{\n~~ opacity: ~~0.3,\n pointerEvents~~: 'none~~',\n },\n bg:~~ ~~state.isSelected~~ ? ~~'brand.base'~~ : ~~'neutral~~.~~primary~~',\n ~~_hover: {\n bg: !~~state.isSelected ? '~~ink.70' : '~~brand.base~~',\n _dark~~: ~~{\n~~ bg~~: !state.isSelected ? 'slate.4' : '~~brand.base',\n ~~},\n~~ ~~},\n transition~~: '~~background~~-~~color~~ ~~0.2s~~ ~~ease',\n rounded~~: '~~full'~~,\n ~~outlineColor:~~ isFocusVisible ? 'brand.base' : 'transparent~~',\n outlineStyle:~~ ~~'solid',\n outlineWidth: '~~thick',\n ~~outlineOffset: 0.5,\n cursor: 'pointer',\n~~ ~~}),\n~~ className,\n )}\n >\n <span\n className={~~circle~~({\n h: 4~~,\n w:~~ ~~4,\n~~ bg~~: '~~paper~~',\n position:~~ 'relative',\n ~~left:~~ state.isSelected ? 6 : ~~0,\n transition:~~ 'left 0~~.2s ease~~',\n })}\n />\n </button>\n </~~Flex~~>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","className","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","~~Flex","~~_jsx","~~Box","~~Text","mergeProps","cx"~~,"css","circle"~~],"mappings":"~~kUAgBMA~~,~~MAAAA~~,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAY,EAAGN,EAEjEO,EAAcC,~~EAAO~~,~~OAAA~~,IAAI,EACzBC,EAAMR,GAAgBM,EAEtBG,EAAQC,~~EAAe~~,~~eAAA~~,CAAE,GAAGX,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAU,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYH,CAAU,EACvCO,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,~~EAAAA~~,~~eAEvC,~~OACEC,EAAAA,~~KAACC~~,~~OAAI~~,~~CAAC~~,~~WAAW,SACd,~~SAAA,~~CAAAd~~,~~GACCe~~,EAAAA,~~IAACC~~,~~EAAG~~,~~IAAA~~,~~CAAC~~,~~GAAI~~,~~EAAC~~,~~SACRD~~,~~EAAAA~~,~~IAACE~~,~~EAAAA~~,~~QAAI,CAAC,~~WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,~~WAC9CjB~~,CAAK,CAAA,~~CAEJ~~,~~CAAA~~,~~EAERe,EAAAA,IAAA,~~SAAA,CAAA,~~GACMG~~,~~aAAWV~~,EAAaG,CAAU,EACtC,~~UAAWQ~~,~~EACTC,GAAAA,~~EAAAA,~~IAAI,CACF,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,~~GACT,~~cAAe~~,~~MAChB,EACD,GAAId,~~EAAM,~~WAAa~~,~~aAAe~~,~~kBACtC~~,~~OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,~~EAAiB,~~aAAe~~,~~cAC9C~~,~~aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,UACT,EACDT,~~CAAS,EACV,~~SAEDc~~,cACE,~~UAAWM~~,EAAAA,~~OAAO~~,~~CAChB~~,~~EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMf,~~EAAM,WAAa,~~EAAI~~,~~EAC7B~~,~~WAAY~~,~~gBACb,~~CAAA,~~CACD,~~CAAA,CAAA,CAAA,~~CACK~~,~~CACJ,CAAA,CAEX,~~CAAC,EAEDZ,EAAO,YAAc"}
1	+ {"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cn } from '@lib/cn';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n className?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, className, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <div className=\"flex items-center\">\n {label && (\n <div className=\"mr-2\">\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </div>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={cn(\n 'px-0.5 h-5 w-11 disabled:opacity-30 disabled:pointer-events-none transition-colors duration-200 ease-in-out rounded-full cursor-pointer outline outline-offset-[0.125rem]',\n state.isSelected\n ? 'bg-brand-base hover:bg-brand-base'\n : 'bg-neutral-primary hover:bg-ink-70 dark:hover:bg-slate-4',\n isFocusVisible ? 'outline-brand-base outline-thick' : 'outline-transparent outline-thick',\n className,\n )}\n >\n <span\n className={cn(\n 'block rounded-full h-4 w-4 bg-paper relative transition-[left] duration-200 ease-in-out',\n state.isSelected ? 'left-6' : 'left-0',\n )}\n />\n </button>\n </div>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","className","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","_jsx","Text","mergeProps","cn"],"mappings":"iPAaA,MAAMA,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAY,EAAGN,EAEjEO,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtBG,EAAQC,EAAAA,eAAe,CAAE,GAAGX,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAU,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYH,CAAU,EACvCO,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,iBAEvC,OACEC,EAAAA,YAAK,UAAU,oBACZ,SAAA,CAAAb,GACCc,EAAAA,IAAK,MAAA,CAAA,UAAU,OAAM,SACnBA,MAACC,EAAK,QAAA,CAAA,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9Cf,CAAK,CAAA,IAIZc,MACM,SAAA,CAAA,GAAAE,EAAAA,WAAWR,EAAaG,CAAU,EACtC,UAAWM,EAAAA,GACT,4KACAX,EAAM,WACF,oCACA,2DACJI,EAAiB,mCAAqC,oCACtDT,CAAS,EACV,SAEDa,cACE,UAAWG,EAAAA,GACT,0FACAX,EAAM,WAAa,SAAW,QAAQ,GAGnC,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,EAEDZ,EAAO,YAAc"}

package/dist/cjs/components/primitives/text.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("react/jsx-runtime"),S=require("../../recipes/text.js"),o=require("@styled/css"),n=require("react");const d="text.primary",h=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h1",{ref:l,className:o.css({textStyle:t?"h1-scaled":"h1",color:r,...a}),style:s,children:e})),x=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h2",{ref:l,className:o.css({textStyle:t?"h2-scaled":"h2",color:r,...a}),style:s,children:e})),y=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h3",{ref:l,className:o.css({textStyle:t?"h3-scaled":"h3",color:r,...a}),style:s,children:e})),m=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h4",{ref:l,className:o.css({textStyle:t?"h4-scaled":"h4",color:r,...a}),style:s,children:e})),N=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r=d,...a},l)=>c.jsx("h5",{ref:l,className:o.css({textStyle:t?"h5-scaled":"h5",color:r,...a}),style:s,children:e})),u=n.forwardRef(({children:e,styles:s={},scale:t,fontColor:r="text.secondary",...a},l)=>c.jsx("h6",{ref:l,className:o.css({textStyle:t?"h6-scaled":"h6",color:r,...a}),style:s,children:e})),i=n.forwardRef(({children:e,styles:s={},scale:t,inline:r=!1,mono:a=!1,variant:l="text",size:H="md",truncate:j=!1,fontWeight:R,fontColor:T,...w},v)=>{const C=S.text({mono:a,variant:l,size:H,scale:t}),f={ref:v,className:o.cx(C,o.css({truncate:j,fontWeight:R??(l!=="text"?"medium":"normal"),color:T,...w})),style:s};return r?c.jsx("span",{...f,children:e}):c.jsx("p",{...f,children:e})}),p=n.forwardRef((e,s)=>c.jsx(i,{ref:s,mono:!0,...e})),q=Object.assign(i,{H1:h,H2:x,H3:y,H4:m,H5:N,H6:u,Mono:p});i.displayName="Text",h.displayName="Text.H1",x.displayName="Text.H2",y.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",p.displayName="Text.Mono",exports.default=q;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),q=require("../../recipes/text.js"),o=require("../../lib/cn.js"),n=require("react");const x={"text.primary":"text-text-primary","text.secondary":"text-text-secondary","text.tertiary":"text-text-tertiary","text.quaternary":"text-text-quaternary"},v={normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold"},f=n.forwardRef(({children:e,styles:t={},scale:r,fontColor:s="text.primary"},l)=>a.jsx("h1",{ref:l,className:o.cn(r?"text-style-h1-scaled":"text-style-h1",x[s]),style:t,children:e})),m=n.forwardRef(({children:e,styles:t={},scale:r,fontColor:s="text.primary"},l)=>a.jsx("h2",{ref:l,className:o.cn(r?"text-style-h2-scaled":"text-style-h2",x[s]),style:t,children:e})),h=n.forwardRef(({children:e,styles:t={},scale:r,fontColor:s="text.primary"},l)=>a.jsx("h3",{ref:l,className:o.cn(r?"text-style-h3-scaled":"text-style-h3",x[s]),style:t,children:e})),p=n.forwardRef(({children:e,styles:t={},scale:r,fontColor:s="text.primary"},l)=>a.jsx("h4",{ref:l,className:o.cn(r?"text-style-h4-scaled":"text-style-h4",x[s]),style:t,children:e})),u=n.forwardRef(({children:e,styles:t={},scale:r,fontColor:s="text.primary"},l)=>a.jsx("h5",{ref:l,className:o.cn(r?"text-style-h5-scaled":"text-style-h5",x[s]),style:t,children:e})),N=n.forwardRef(({children:e,styles:t={},scale:r,fontColor:s="text.secondary"},l)=>a.jsx("h6",{ref:l,className:o.cn(r?"text-style-h6-scaled":"text-style-h6",x[s]),style:t,children:e})),c=n.forwardRef(({children:e,styles:t={},scale:r,inline:s=!1,mono:l=!1,variant:i="text",size:H="md",truncate:R=!1,fontWeight:T,fontColor:d},b)=>{const w=q.text({mono:l,variant:i,size:H,scale:r}),y={ref:b,className:o.cn(w,v[T??(i!=="text"?"medium":"normal")],d&&x[d],R&&"truncate"),style:t};return s?a.jsx("span",{...y,children:e}):a.jsx("p",{...y,children:e})}),j=n.forwardRef((e,t)=>a.jsx(c,{ref:t,mono:!0,...e})),C=Object.assign(c,{H1:f,H2:m,H3:h,H4:p,H5:u,H6:N,Mono:j});c.displayName="Text",f.displayName="Text.H1",m.displayName="Text.H2",h.displayName="Text.H3",p.displayName="Text.H4",u.displayName="Text.H5",N.displayName="Text.H6",j.displayName="Text.Mono",exports.default=C;
 //# sourceMappingURL=text.js.map

package/dist/cjs/components/primitives/text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { ~~css,~~ cx } from '@~~styled~~/~~css~~';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n color?: CSSProperties['color'];\n fontWeight?: CSSProperties['fontWeight'];\n fontSize?: CSSProperties['fontSize'];\n lineHeight?: CSSProperties['lineHeight'];\n letterSpacing?: CSSProperties['letterSpacing'];\n textAlign?: CSSProperties['textAlign'];\n textDecoration?: CSSProperties['textDecoration'];\n textTransform?: CSSProperties['textTransform'];\n textWrap?: CSSProperties['textWrap'];\n maxWidth?: CSSProperties['maxWidth'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n styles?: TextStyles;\n scale?: boolean;\n fontWeight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold';\n fontColor?: 'text.primary' \| 'text.secondary' \| 'text.tertiary' \| 'text.quaternary';\n}\n\nexport interface BodyProps extends TextProps {\n inline?: boolean;\n mono?: boolean;\n variant?: 'text' \| 'error' \| 'info' \| 'success' \| 'warning';\n size?: 'xs' \| 'sm' \| 'md' \| 'lg';\n truncate?: boolean;\n}\n\nconst ~~defaultColor~~ = 'text.primary';\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = ~~defaultColor,~~ ~~...props~~ }, ref) => (\n <h1 ref={ref} className={~~css~~(~~{ textStyle:~~ scale ? 'h1-scaled' : 'h1', color~~, ...props }~~)} style={styles}>\n {children}\n </h1>\n ),\n);\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = ~~defaultColor,~~ ~~...props~~ }, ref) => (\n <h2 ref={ref} className={~~css~~(~~{ textStyle:~~ scale ? 'h2-scaled' : 'h2', color~~, ...props }~~)} style={styles}>\n {children}\n </h2>\n ),\n);\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = ~~defaultColor,~~ ~~...props~~ }, ref) => (\n <h3 ref={ref} className={~~css~~(~~{ textStyle:~~ scale ? 'h3-scaled' : 'h3', color~~, ...props }~~)} style={styles}>\n {children}\n </h3>\n ),\n);\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = ~~defaultColor,~~ ~~...props~~ }, ref) => (\n <h4 ref={ref} className={~~css~~(~~{ textStyle:~~ scale ? 'h4-scaled' : 'h4', color~~, ...props }~~)} style={styles}>\n {children}\n </h4>\n ),\n);\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = ~~defaultColor,~~ ~~...props~~ }, ref) => (\n <h5 ref={ref} className={~~css~~(~~{ textStyle:~~ scale ? 'h5-scaled' : 'h5', color~~, ...props }~~)} style={styles}>\n {children}\n </h5>\n ),\n);\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.secondary', ~~...props~~ }, ref) => (\n <h6 ref={ref} className={~~css~~(~~{ textStyle:~~ scale ? 'h6-scaled' : 'h6', color~~, ...props }~~)} style={styles}>\n {children}\n </h6>\n ),\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n (\n {\n children,\n styles = {},\n scale,\n inline = false,\n mono = false,\n variant = 'text',\n size = 'md',\n truncate = false,\n fontWeight,\n fontColor: color,\n ~~...props\n~~ },\n ref,\n ) => {\n const classStyles = text({ mono, variant, size, scale });\n const fontWeightStyle = fontWeight ?? (variant !== 'text' ? 'medium' : 'normal');\n const bodyProps = {\n ref,\n className: cx(classStyles, ~~css({ truncate~~, ~~fontWeight:~~ ~~fontWeightStyle,~~ color, ~~...props~~ })),\n style: styles,\n };\n\n if (inline) {\n return <span {...bodyProps}>{children}</span>;\n }\n\n return <p {...bodyProps}>{children}</p>;\n },\n);\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>((props, ref) => {\n return <Body ref={ref} mono {...props} />;\n});\n\nconst Text = Object.assign(Body, {\n H1: TextH1,\n H2: TextH2,\n H3: TextH3,\n H4: TextH4,\n H5: TextH5,\n H6: TextH6,\n Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["~~defaultColor~~","TextH1","forwardRef","children","styles","scale","color","~~props","~~ref","_jsx","~~css~~","TextH2","TextH3","TextH4","TextH5","TextH6","Body","inline","mono","variant","size","truncate","fontWeight","classStyles","text","bodyProps","cx","~~TextMono~~","Text"],"mappings":"~~sLAgCMA~~,MAAAA,~~EAAe~~,~~eAEfC~~,EAASC,~~aACb~~,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,GAAI,MAAAC,EAAO,UAAWC,~~EAAQN~~,~~EAAc~~,~~GAAGO,CAAO,~~EAAEC,~~IAC5EC~~,~~EAAAA~~,~~IAAA,~~KAAA,CAAI,IAAKD,EAAK,UAAWE,~~EAAI~~,~~IAAA,CAAE,UAAWL,~~EAAQ,~~YAAc~~,~~KAAM~~,~~MAAAC~~,~~EAAO,GAAGC,~~CAAK,~~CAAE~~,EAAG,~~MAAOH~~,~~EAC9F~~,~~SAAAD~~,~~CACE~~,CAAA,~~CACN~~,~~EAGGQ~~,~~EAAST~~,~~EAAAA~~,~~WACb,~~CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,GAAI,MAAAC,EAAO,UAAWC,~~EAAQN~~,~~EAAc~~,~~GAAGO~~,~~CAAO~~,~~EAAEC~~,~~IAC5EC~~,~~MAAA,~~KAAA,CAAI,IAAKD,EAAK,UAAWE,~~MAAI~~,~~CAAE~~,~~UAAWL,~~EAAQ,~~YAAc~~,~~KAAM~~,~~MAAAC~~,~~EAAO,GAAGC,~~CAAK,~~CAAE~~,EAAG,~~MAAOH~~,~~EAC9F~~,~~SAAAD~~,~~CACE~~,CAAA,~~CACN~~,~~EAGGS~~,~~EAASV~~,EAAAA,WACb,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAA~~,~~EAAI~~,MAAAC,EAAO,UAAWC,~~EAAQN~~,~~EAAc~~,~~GAAGO~~,~~CAAO~~,~~EAAEC~~,~~IAC5EC~~,~~MAAA,~~KAAA,CAAI,IAAKD,EAAK,UAAWE,EAAAA,~~IAAI~~,~~CAAE,UAAWL,~~EAAQ,~~YAAc~~,~~KAAM~~,~~MAAAC~~,~~EAAO,GAAGC,~~CAAK,~~CAAE~~,EAAG,~~MAAOH~~,~~EAC9F~~,~~SAAAD~~,~~CACE~~,CAAA,~~CACN~~,~~EAGGU~~,~~EAASX~~,~~EACb~~,~~WAAA~~,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAE~~,~~EAAE~~,MAAAC,EAAO,UAAWC,~~EAAQN~~,~~EAAc~~,~~GAAGO,CAAO,~~EAAEC,~~IAC5EC~~,~~EAAAA~~,~~IAAA,~~KAAA,CAAI,IAAKD,EAAK,UAAWE,~~EAAAA~~,~~IAAI,CAAE,UAAWL,~~EAAQ,~~YAAc~~,~~KAAM~~,~~MAAAC~~,~~EAAO,GAAGC,~~CAAK,~~CAAE~~,EAAG,~~MAAOH~~,~~EAC9F~~,~~SAAAD~~,~~CACE~~,CAAA,~~CACN~~,~~EAGGW~~,~~EAASZ~~,~~aACb~~,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~GAAI~~,MAAAC,EAAO,UAAWC,~~EAAQN~~,~~EAAc~~,~~GAAGO~~,~~CAAO~~,~~EAAEC~~,~~IAC5EC~~,~~MAAA,~~KAAA,CAAI,IAAKD,EAAK,UAAWE,~~MAAI~~,~~CAAE,UAAWL,~~EAAQ,~~YAAc~~,~~KAAM~~,~~MAAAC~~,~~EAAO,GAAGC,~~CAAK,~~CAAE~~,EAAG,~~MAAOH~~,~~EAC9F~~,~~SAAAD~~,~~CACE~~,CAAA,~~CACN~~,~~EAGGY~~,~~EAASb~~,~~EACb~~,~~WAAA~~,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAS,~~CAAE~~,~~EAAE,~~MAAAC,EAAO,UAAWC,EAAQ,~~iBAAkB~~,~~GAAGC,CAAO,~~EAAEC,~~IAChFC~~,~~EAAAA~~,IAAA,KAAA,CAAI,IAAKD,EAAK,UAAWE,EAAAA,~~IAAI~~,~~CAAE,UAAWL,~~EAAQ,~~YAAc~~,~~KAAM~~,~~MAAAC~~,~~EAAO,GAAGC,~~CAAK,~~CAAE~~,EAAG,~~MAAOH~~,~~EAC9F~~,~~SAAAD~~,~~CACE~~,CAAA,~~CACN~~,~~EAGGa~~,~~EAAOd~~,aACX,CACE,CACE,SAAAC,EACA,OAAAC,EAAS,~~CACT~~,~~EAAA~~,MAAAC,EACA,~~OAAAY~~,EAAS,GACT,KAAAC,EAAO,GACP,QAAAC,EAAU,OACV,KAAAC,EAAO,KACP,SAAAC,EAAW,GACX,WAAAC,EACA,~~UAAWhB~~,~~EACX~~,~~GAAGC,CACJ,EACDC,~~IACE,CACF,MAAMe,EAAcC,~~OAAK~~,CAAE,KAAAN,EAAM,QAAAC,EAAS,KAAAC,EAAM,~~MAAAf~~,CAAK,CAAE,~~EAEjDoB~~,EAAY,CAChB,IAAAjB,EACA,~~UAAWkB~~,~~EAAGH~~,~~GAAAA~~,~~EAAab~~,~~MAAI,CAAE,SAAAW,EAAU,WAHrBC,~~IAAeH,IAAY,OAAS,SAAW,~~UAGG~~,~~MAAAb~~,~~EAAO~~,~~GAAGC~~,CAAK,~~CAAE~~,~~CAAC~~,~~EAC1F~~,~~MAAOH~~,GAGT,~~OAAIa~~,EACKR,~~MAAU~~,OAAA,CAAA,GAAAgB,EAAY,~~SAAAtB~~,~~IAGxBM~~,~~MAAO~~,IAAA,CAAA,GAAAgB,EAAY,~~SAAAtB~~,GAC5B,CAAC,~~EAGGwB~~,~~EAAWzB~~,EAA4C,WAAA,~~CAACK~~,~~EAAOC~~,IAC5DC,EAAAA,IAACO,EAAI,CAAC,IAAKR,EAAK,KAAI,GAAA,~~GAAKD~~,CAAK,CAAA,CACtC,~~EAEKqB~~,EAAO,OAAO,OAAOZ,EAAM,CAC/B,~~GAAIf~~,EACJ,~~GAAIU~~,EACJ,GAAIC,EACJ,GAAIC,EACJ,GAAIC,EACJ,GAAIC,EACJ,~~KAAMY~~,CACP,CAAA,~~EAEDX~~,EAAK,YAAc,~~OACnBf~~,EAAO,YAAc,~~UACrBU~~,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,UACrBC,EAAO,YAAc,~~UACrBY~~,EAAS,YAAc"}
1	+ {"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { cn } from '@lib/cn';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n color?: CSSProperties['color'];\n fontWeight?: CSSProperties['fontWeight'];\n fontSize?: CSSProperties['fontSize'];\n lineHeight?: CSSProperties['lineHeight'];\n letterSpacing?: CSSProperties['letterSpacing'];\n textAlign?: CSSProperties['textAlign'];\n textDecoration?: CSSProperties['textDecoration'];\n textTransform?: CSSProperties['textTransform'];\n textWrap?: CSSProperties['textWrap'];\n maxWidth?: CSSProperties['maxWidth'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n styles?: TextStyles;\n scale?: boolean;\n fontWeight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold';\n fontColor?: 'text.primary' \| 'text.secondary' \| 'text.tertiary' \| 'text.quaternary';\n}\n\nexport interface BodyProps extends TextProps {\n inline?: boolean;\n mono?: boolean;\n variant?: 'text' \| 'error' \| 'info' \| 'success' \| 'warning';\n size?: 'xs' \| 'sm' \| 'md' \| 'lg';\n truncate?: boolean;\n}\n\nconst fontColorMap: Record<string, string> = {\n 'text.primary': 'text-text-primary',\n 'text.secondary': 'text-text-secondary',\n 'text.tertiary': 'text-text-tertiary',\n 'text.quaternary': 'text-text-quaternary',\n};\n\nconst fontWeightMap: Record<string, string> = {\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n};\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n <h1 ref={ref} className={cn(scale ? 'text-style-h1-scaled' : 'text-style-h1', fontColorMap[color])} style={styles}>\n {children}\n </h1>\n ),\n);\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n <h2 ref={ref} className={cn(scale ? 'text-style-h2-scaled' : 'text-style-h2', fontColorMap[color])} style={styles}>\n {children}\n </h2>\n ),\n);\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n <h3 ref={ref} className={cn(scale ? 'text-style-h3-scaled' : 'text-style-h3', fontColorMap[color])} style={styles}>\n {children}\n </h3>\n ),\n);\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n <h4 ref={ref} className={cn(scale ? 'text-style-h4-scaled' : 'text-style-h4', fontColorMap[color])} style={styles}>\n {children}\n </h4>\n ),\n);\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.primary' }, ref) => (\n <h5 ref={ref} className={cn(scale ? 'text-style-h5-scaled' : 'text-style-h5', fontColorMap[color])} style={styles}>\n {children}\n </h5>\n ),\n);\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(\n ({ children, styles = {}, scale, fontColor: color = 'text.secondary' }, ref) => (\n <h6 ref={ref} className={cn(scale ? 'text-style-h6-scaled' : 'text-style-h6', fontColorMap[color])} style={styles}>\n {children}\n </h6>\n ),\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n (\n {\n children,\n styles = {},\n scale,\n inline = false,\n mono = false,\n variant = 'text',\n size = 'md',\n truncate = false,\n fontWeight,\n fontColor: color,\n },\n ref,\n ) => {\n const classStyles = text({ mono, variant, size, scale });\n const fontWeightStyle = fontWeight ?? (variant !== 'text' ? 'medium' : 'normal');\n const bodyProps = {\n ref,\n className: cn(classStyles, fontWeightMap[fontWeightStyle], color && fontColorMap[color], truncate && 'truncate'),\n style: styles,\n };\n\n if (inline) {\n return <span {...bodyProps}>{children}</span>;\n }\n\n return <p {...bodyProps}>{children}</p>;\n },\n);\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>((props, ref) => {\n return <Body ref={ref} mono {...props} />;\n});\n\nconst Text = Object.assign(Body, {\n H1: TextH1,\n H2: TextH2,\n H3: TextH3,\n H4: TextH4,\n H5: TextH5,\n H6: TextH6,\n Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["fontColorMap","fontWeightMap","TextH1","forwardRef","children","styles","scale","color","ref","_jsx","cn","TextH2","TextH3","TextH4","TextH5","TextH6","Body","inline","mono","variant","size","truncate","fontWeight","classStyles","text","bodyProps","TextMono","props","Text"],"mappings":"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"}

package/dist/cjs/components/sections/verify-pincode.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),j=require("@styled/tokens"),m=require("../icons/ico-checkmark-circle-fill.js");require("react");var n=require("@styled/jsx");require("@styled/css"),require("../feedback/callout.js");var v=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var C=require("../primitives/text.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js"),require("../inputs/phone-input.js");var k=require("../inputs/pincode-input.js");require("../inputs/text-input.js");var t=require("create-slots");const u=t.createSlot(({children:r})=>r),S=r=>{const{isPending:o,isSuccess:s,onChange:a,onComplete:c,originName:q,pinLength:d,id:l,autoFocus:g,errorMessage:i,children:h}=r,p=()=>o?e.jsx(v.LoadingSpinner,{size:36,strokeWidth:4}):s?e.jsx(m.default,{color:j.token("colors.brand.base"),width:36,height:36}):e.jsx(k.PinCodeInput,{originName:q,onChange:a,pinLength:d,onComplete:c,id:l,autoFocus:g});return t.createHost(h,x=>e.jsxs(n.VStack,{gap:3,my:3,children:[e.jsx(n.Center,{height:12,children:p()}),i&&e.jsx(C.default,{variant:"error",size:"sm",styles:{textAlign:"center"},children:i}),x.get(u)]}))},y=Object.assign(S,{RetryContent:u});exports.VerifyPincode=y;
+"use strict";var e=require("react/jsx-runtime"),x=require("../icons/ico-checkmark-circle-fill.js");require("react"),require("../../lib/cn.js"),require("../feedback/callout.js");var v=require("../feedback/loading-spinner.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var p=require("../primitives/text.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../feedback/tooltip.js"),require("../inputs/phone-input.js");var f=require("../inputs/pincode-input.js");require("../inputs/text-input.js");var n=require("create-slots");const t=n.createSlot(({children:r})=>r),j=r=>{const{isPending:s,isSuccess:o,onChange:u,onComplete:a,originName:c,pinLength:l,id:d,autoFocus:q,errorMessage:i,children:g}=r,h=()=>s?e.jsx(v.LoadingSpinner,{size:36,strokeWidth:4}):o?e.jsx(x.default,{color:"var(--color-brand-base)",width:36,height:36}):e.jsx(f.PinCodeInput,{originName:c,onChange:u,pinLength:l,onComplete:a,id:d,autoFocus:q});return n.createHost(g,m=>e.jsxs("div",{className:"flex flex-col gap-3 my-3",children:[e.jsx("div",{className:"flex items-center justify-center h-12",children:h()}),i&&e.jsx(p.default,{variant:"error",size:"sm",styles:{textAlign:"center"},children:i}),m.get(t)]}))},C=Object.assign(j,{RetryContent:t});exports.VerifyPincode=C;
 //# sourceMappingURL=verify-pincode.js.map

package/dist/cjs/components/sections/verify-pincode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"verify-pincode.js","sources":["../../../../src/components/sections/verify-pincode.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { IcoCheckmarkCircleFill } from '@components/icons';\nimport { PinCodeInput, PinCodeInputProps } from '@components/inputs';\nimport { Text } from '@components/primitives';\nimport { ~~Center, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ createHost, createSlot } from 'create-slots';\n\nexport interface VerifyPincodeProps extends PinCodeInputProps {\n isPending: boolean;\n isSuccess: boolean;\n errorMessage?: string;\n children?: React.ReactNode;\n}\n\nconst RetryContent = createSlot(({ children }) => {\n return children;\n});\n\nconst VerifyPincodeHost = (props: VerifyPincodeProps) => {\n const { isPending, isSuccess, onChange, onComplete, originName, pinLength, id, autoFocus, errorMessage, children } =\n props;\n\n const renderPincodeOrStatus = () => {\n if (isPending) return <LoadingSpinner size={36} strokeWidth={4} />;\n\n if (isSuccess) return <IcoCheckmarkCircleFill color~~={token~~(~~'colors.~~brand.base')} width={36} height={36} />;\n\n return (\n <PinCodeInput\n originName={originName}\n onChange={onChange}\n pinLength={pinLength}\n onComplete={onComplete}\n id={id}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n );\n };\n\n return createHost(children, slots => {\n return (\n <~~VStack~~ gap={3} my={3}>\n <~~Center~~ ~~height={~~12}>{renderPincodeOrStatus()}</~~Center~~>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n {errorMessage}\n </Text>\n )}\n {slots.get(RetryContent)}\n </~~VStack~~>\n );\n });\n};\n\nexport const VerifyPincode = Object.assign(VerifyPincodeHost, { RetryContent });\n"],"names":["RetryContent","createSlot","children","VerifyPincodeHost","props","isPending","isSuccess","onChange","onComplete","originName","pinLength","id","autoFocus","errorMessage","renderPincodeOrStatus","_jsx","LoadingSpinner","IcoCheckmarkCircleFill","~~token","~~PinCodeInput","createHost","slots","_jsxs","~~VStack","Center","~~Text","VerifyPincode"],"mappings":"~~44BAeA~~,MAAMA,EAAeC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IACpCA,CACR,EAEKC,EAAqBC,GAA6B,CACtD,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,GAAAC,EAAI,UAAAC,EAAW,aAAAC,EAAc,SAAAX,CAAQ,EAC9GE,EAEIU,EAAwB,IACxBT,EAAkBU,EAAAA,~~IAACC~~,~~iBAAc,~~CAAC,KAAM,GAAI,YAAa,CAAC,CAAA,EAE1DV,EAAkBS,MAACE,~~EAAAA~~,~~QAAsB~~,~~CAAC~~,~~MAAOC,EAAAA,~~MAAM,~~mBAAmB~~,~~EAAG,~~MAAO,GAAI,OAAQ,~~KAGlGH~~,~~MAACI~~,~~EAAY~~,~~aAAA~~,CACX,~~WAAYV~~,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,~~OAAOQ~~,EAAAA,~~WAAWlB~~,~~EAAUmB~~,GAExBC,EAAAA,~~KAACC~~,~~SAAO~~,~~CAAA~~,~~IAAK~~,~~EAAG~~,~~GAAI~~,~~EAClB~~,~~SAAA~~,~~CAAAR~~,~~EAAAA~~,~~IAACS~~,~~EAAAA~~,~~OAAO~~,CAAA,~~OAAQ,GAAK,SAAAV,GAAuB,~~CAAA,~~EAC3CD~~,GACCE,EAAAA,~~IAACU~~,~~WAAK~~,QAAQ,QAAQ,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAU,EAAA,~~SAC5DZ~~,~~CAAY~~,CAAA,~~EAGhBQ~~,EAAM,~~IAAIrB~~,CAAY,CAAC,~~CACjB~~,CAAA,~~CAEZ~~,CACH,~~EAEa0B~~,EAAgB,OAAO,~~OAAOvB~~,EAAmB,CAAE,aAAAH,CAAY,CAAE"}
1	+ {"version":3,"file":"verify-pincode.js","sources":["../../../../src/components/sections/verify-pincode.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { IcoCheckmarkCircleFill } from '@components/icons';\nimport { PinCodeInput, PinCodeInputProps } from '@components/inputs';\nimport { Text } from '@components/primitives';\nimport { createHost, createSlot } from 'create-slots';\n\nexport interface VerifyPincodeProps extends PinCodeInputProps {\n isPending: boolean;\n isSuccess: boolean;\n errorMessage?: string;\n children?: React.ReactNode;\n}\n\nconst RetryContent = createSlot(({ children }) => {\n return children;\n});\n\nconst VerifyPincodeHost = (props: VerifyPincodeProps) => {\n const { isPending, isSuccess, onChange, onComplete, originName, pinLength, id, autoFocus, errorMessage, children } =\n props;\n\n const renderPincodeOrStatus = () => {\n if (isPending) return <LoadingSpinner size={36} strokeWidth={4} />;\n\n if (isSuccess) return <IcoCheckmarkCircleFill color=\"var(--color-brand-base)\" width={36} height={36} />;\n\n return (\n <PinCodeInput\n originName={originName}\n onChange={onChange}\n pinLength={pinLength}\n onComplete={onComplete}\n id={id}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n );\n };\n\n return createHost(children, slots => {\n return (\n <div className=\"flex flex-col gap-3 my-3\">\n <div className=\"flex items-center justify-center h-12\">{renderPincodeOrStatus()}</div>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" styles={{ textAlign: 'center' }}>\n {errorMessage}\n </Text>\n )}\n {slots.get(RetryContent)}\n </div>\n );\n });\n};\n\nexport const VerifyPincode = Object.assign(VerifyPincodeHost, { RetryContent });\n"],"names":["RetryContent","createSlot","children","VerifyPincodeHost","props","isPending","isSuccess","onChange","onComplete","originName","pinLength","id","autoFocus","errorMessage","renderPincodeOrStatus","_jsx","LoadingSpinner","IcoCheckmarkCircleFill","PinCodeInput","createHost","slots","_jsxs","Text","VerifyPincode"],"mappings":"8wBAaA,MAAMA,EAAeC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IACpCA,CACR,EAEKC,EAAqBC,GAA6B,CACtD,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,GAAAC,EAAI,UAAAC,EAAW,aAAAC,EAAc,SAAAX,CAAQ,EAC9GE,EAEIU,EAAwB,IACxBT,EAAkBU,MAACC,EAAAA,eAAc,CAAC,KAAM,GAAI,YAAa,CAAC,CAAA,EAE1DV,EAAkBS,MAACE,EAAuB,QAAA,CAAA,MAAM,0BAA0B,MAAO,GAAI,OAAQ,KAG/FF,EAAAA,IAACG,EAAAA,aAAY,CACX,WAAYT,EACZ,SAAUF,EACV,UAAWG,EACX,WAAYF,EACZ,GAAIG,EAEJ,UAAWC,CACX,CAAA,EAIN,OAAOO,EAAAA,WAAWjB,EAAUkB,GAExBC,EAAAA,YAAK,UAAU,2BACb,SAAA,CAAAN,EAAA,IAAA,MAAA,CAAK,UAAU,wCAAuC,SAAED,EAAuB,CAAA,CAAA,EAC9ED,GACCE,EAAAA,IAACO,EAAAA,QAAK,CAAA,QAAQ,QAAQ,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAU,EAAA,SAC5DT,CACI,CAAA,EAERO,EAAM,IAAIpB,CAAY,CAAC,CACpB,CAAA,CAET,CACH,EAEauB,EAAgB,OAAO,OAAOpB,EAAmB,CAAE,aAAAH,CAAY,CAAE"}

package/dist/cjs/components/utils/client-asset-logo.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),l=require("@styled/tokens"),h=require("../icons/ico-rocket-fill.js"),g=require("@styled/css"),d=require("@styled/jsx"),c=require("create-slots"),n=require("react");const u="https://assets.fortmatic.com/MagicLogos/blank.png",e="2.625rem",a=c.createSlot(({children:s,...r})=>t.jsx(d.Center,{children:n.Children.map(s,o=>n.cloneElement(o,r))})),m=s=>{const{assetUri:r}=s;return c.createHost(s.children,o=>{const i=o.get(a);return t.jsx(t.Fragment,{children:!r||r===u?i?{...i,props:{...i.props,width:e,height:e}}:t.jsx(h.default,{height:e,width:e,color:l.token("colors.brand.lighter")}):t.jsx("img",{className:g.css({height:e,width:e,overflow:"hidden"}),alt:"logo",src:r})})})},v=Object.assign(m,{PlaceholderIcon:a});exports.ClientAssetLogo=v;
+"use strict";var r=require("react/jsx-runtime"),n=require("../icons/ico-rocket-fill.js"),i=require("create-slots"),l=require("react");const h="https://assets.fortmatic.com/MagicLogos/blank.png",s="2.625rem",a=i.createSlot(({children:t,...e})=>r.jsx("div",{className:"flex items-center justify-center",children:l.Children.map(t,c=>l.cloneElement(c,e))})),g=t=>{const{assetUri:e}=t;return i.createHost(t.children,c=>{const o=c.get(a);return r.jsx(r.Fragment,{children:!e||e===h?o?{...o,props:{...o.props,width:s,height:s}}:r.jsx(n.default,{height:s,width:s,color:"var(--color-brand-lighter)"}):r.jsx("img",{className:"h-[2.625rem] w-[2.625rem] overflow-hidden",alt:"logo",src:e})})})},d=Object.assign(g,{PlaceholderIcon:a});exports.ClientAssetLogo=d;
 //# sourceMappingURL=client-asset-logo.js.map

package/dist/cjs/components/utils/client-asset-logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"client-asset-logo.js","sources":["../../../../src/components/utils/client-asset-logo.tsx"],"sourcesContent":["import { IcoRocketFill } from '@components/icons';\nimport { ~~css } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement } from 'react';\n\nconst blankLogoUrl = 'https://assets.fortmatic.com/MagicLogos/blank.png';\n\nexport interface ClientAssetLogoProps {\n assetUri: string \| null;\n children?: React.ReactNode;\n}\n\nconst iconSize = '2.625rem';\n\nconst PlaceholderIcon = createSlot(({ children, ...props }) => {\n return (\n <~~Center~~>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Center~~>\n );\n});\n\nconst Component = (props: ClientAssetLogoProps) => {\n const { assetUri } = props;\n\n return createHost(props.children, slots => {\n const placeholderIcon = slots.get(PlaceholderIcon);\n\n const renderPlaceholder = () => {\n if (placeholderIcon) {\n return { ...placeholderIcon, props: { ...placeholderIcon.props, width: iconSize, height: iconSize } };\n }\n\n return <IcoRocketFill height={iconSize} width={iconSize} color={~~token~~(~~'colors.~~brand.lighter')} />;\n };\n\n return (\n <>\n {!assetUri \|\| assetUri === blankLogoUrl ? (\n renderPlaceholder()\n ) : (\n <img className~~={css({~~ ~~height:~~ ~~iconSize, width: iconSize,~~ overflow~~: '~~hidden' ~~})}~~ alt=\"logo\" src={assetUri} />\n )}\n </>\n );\n });\n};\n\nexport const ClientAssetLogo = Object.assign(Component, { PlaceholderIcon });\n"],"names":["blankLogoUrl","iconSize","PlaceholderIcon","createSlot","children","props","_jsx","~~Center","~~Children","child","cloneElement","Component","assetUri","createHost","slots","placeholderIcon","~~IcoRocketFill~~","~~token~~","~~css","~~ClientAssetLogo"],"mappings":"~~oNAOA~~,MAAMA,EAAe,oDAOfC,EAAW,WAEXC,EAAkBC,~~aAAW~~,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEtDC,~~MAACC,~~EAAAA,~~OAAM~~,~~CAAA~~,~~SACJC~~,EAAAA,SAAS,~~IAAIJ~~,~~EAAUK~~,GACfC,eAAaD,~~EAAOJ~~,CAAK,CACjC,~~CACM~~,CAAA,~~CAEZ~~,~~EAEKM~~,~~EAAaN~~,GAA+B,CAChD,KAAM,CAAE,~~SAAAO~~,CAAU,~~EAAGP~~,EAErB,~~OAAOQ~~,~~EAAAA~~,~~WAAWR,~~EAAM,~~SAAUS~~,GAAQ,CACxC,MAAMC,EAAkBD,EAAM,~~IAAIZ~~,CAAe,EAUjD,OACEI,EAAAA,~~yBACG~~,~~CAACM~~,GAAYA,~~IAAaZ~~,~~EATzBe~~,EACK,CAAE,GAAGA,EAAiB,MAAO,CAAE,GAAGA,EAAgB,MAAO,~~MAAOd~~,EAAU,OAAQA,CAAU,CAAA,EAG9FK,~~EAAAA~~,~~IAACU~~,~~EAAa~~,~~QAAA~~,~~CAAC,~~OAAQf,EAAU,MAAOA,EAAU,~~MAAOgB~~,~~EAAAA~~,~~MAAM~~,~~sBAAsB~~,~~IAQxFX,EAAK,IAAA,MAAA,CAAA,UAAWY,MAAI,CAAE,OAAQjB,EAAU,MAAOA,EAAU,SAAU,QAAU,CAAA,EAAG,~~IAAI,OAAO,~~IAAKW~~,~~CAAY~~,CAAA,~~CAE7G~~,CAAA,~~CAEP~~,CAAC,CACH,~~EAEaO~~,EAAkB,OAAO,~~OAAOR~~,EAAW,CAAE,~~gBAAAT~~,CAAe,CAAE"}
1	+ {"version":3,"file":"client-asset-logo.js","sources":["../../../../src/components/utils/client-asset-logo.tsx"],"sourcesContent":["import { IcoRocketFill } from '@components/icons';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement } from 'react';\n\nconst blankLogoUrl = 'https://assets.fortmatic.com/MagicLogos/blank.png';\n\nexport interface ClientAssetLogoProps {\n assetUri: string \| null;\n children?: React.ReactNode;\n}\n\nconst iconSize = '2.625rem';\n\nconst PlaceholderIcon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nconst Component = (props: ClientAssetLogoProps) => {\n const { assetUri } = props;\n\n return createHost(props.children, slots => {\n const placeholderIcon = slots.get(PlaceholderIcon);\n\n const renderPlaceholder = () => {\n if (placeholderIcon) {\n return { ...placeholderIcon, props: { ...placeholderIcon.props, width: iconSize, height: iconSize } };\n }\n\n return <IcoRocketFill height={iconSize} width={iconSize} color={'var(--color-brand-lighter)'} />;\n };\n\n return (\n <>\n {!assetUri \|\| assetUri === blankLogoUrl ? (\n renderPlaceholder()\n ) : (\n <img className=\"h-[2.625rem] w-[2.625rem] overflow-hidden\" alt=\"logo\" src={assetUri} />\n )}\n </>\n );\n });\n};\n\nexport const ClientAssetLogo = Object.assign(Component, { PlaceholderIcon });\n"],"names":["blankLogoUrl","iconSize","PlaceholderIcon","createSlot","children","props","_jsx","Children","child","cloneElement","Component","assetUri","createHost","slots","placeholderIcon","_Fragment","IcoRocketFill","ClientAssetLogo"],"mappings":"sIAIA,MAAMA,EAAe,oDAOfC,EAAW,WAEXC,EAAkBC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEtDC,EAAAA,IAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,EAAAA,SAAS,IAAIH,EAAUI,GACfC,eAAaD,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAEKK,EAAaL,GAA+B,CAChD,KAAM,CAAE,SAAAM,CAAU,EAAGN,EAErB,OAAOO,aAAWP,EAAM,SAAUQ,GAAQ,CACxC,MAAMC,EAAkBD,EAAM,IAAIX,CAAe,EAUjD,OACEI,MAAAS,EAAAA,SAAA,CAAA,SACG,CAACJ,GAAYA,IAAaX,EATzBc,EACK,CAAE,GAAGA,EAAiB,MAAO,CAAE,GAAGA,EAAgB,MAAO,MAAOb,EAAU,OAAQA,CAAU,CAAA,EAG9FK,EAACU,IAAAA,UAAc,CAAA,OAAQf,EAAU,MAAOA,EAAU,MAAO,+BAQ5DK,aAAK,UAAU,4CAA4C,IAAI,OAAO,IAAKK,CAAQ,CAAA,CACpF,CAAA,CAGP,CAAC,CACH,EAEaM,EAAkB,OAAO,OAAOP,EAAW,CAAE,gBAAAR,CAAe,CAAE"}

package/dist/cjs/components/utils/qr-code.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),O=require("@styled/css"),R=require("@styled/jsx"),e=require("@styled/tokens"),b=require("react-qrcode-logo");function j({value:l,ecLevel:i="H",qrStyle:d="dots",eyeRadius:t=0,eyeColor:a=e.token("colors.ink.90"),size:n=160,logoImage:g=void 0,logoHeight:s=32,logoWidth:u=32,logoOpacity:c=1,logoPadding:v=0,logoPaddingStyle:y="square",logoOnLoad:C=void 0,removeQrCodeBehindLogo:m=!1,enableCORS:q=!1,quietZone:h=5,bgColor:k=e.token("colors.chalk"),fgColor:f=e.token("colors.ink.90"),style:L=void 0,id:o="qr-code"}){return r.jsx(R.Flex,{alignItems:"center",justifyContent:"center",className:O.css({shadow:"0.125rem 0.125rem 1.5rem {colors.ink.70/15}",overflow:"hidden",padding:1,borderRadius:"1rem"}),children:r.jsx(b.QRCode,{value:l,ecLevel:i,qrStyle:d,eyeRadius:t,eyeColor:a,size:n,logoImage:g,logoHeight:s,logoWidth:u,logoOpacity:c,logoPadding:v,logoPaddingStyle:y,logoOnLoad:C,removeQrCodeBehindLogo:m,enableCORS:q,quietZone:h,bgColor:k,fgColor:f,style:L,id:o,"data-testid":o})})}exports.default=j;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),O=require("react-qrcode-logo");function b({value:d,ecLevel:l="H",qrStyle:r="dots",eyeRadius:i=0,eyeColor:t="#18171A",size:g=160,logoImage:a=void 0,logoHeight:n=32,logoWidth:s=32,logoOpacity:u=1,logoPadding:c=0,logoPaddingStyle:v="square",logoOnLoad:y=void 0,removeQrCodeBehindLogo:m=!1,enableCORS:C=!1,quietZone:h=5,bgColor:q="#FFFFFF",fgColor:f="#18171A",style:L=void 0,id:e="qr-code"}){return o.jsx("div",{className:"flex items-center justify-center shadow-[0.125rem_0.125rem_1.5rem_rgba(119,118,122,0.15)] overflow-hidden p-1 rounded-[1rem]",children:o.jsx(O.QRCode,{value:d,ecLevel:l,qrStyle:r,eyeRadius:i,eyeColor:t,size:g,logoImage:a,logoHeight:n,logoWidth:s,logoOpacity:u,logoPadding:c,logoPaddingStyle:v,logoOnLoad:y,removeQrCodeBehindLogo:m,enableCORS:C,quietZone:h,bgColor:q,fgColor:f,style:L,id:e,"data-testid":e})})}exports.default=b;
 //# sourceMappingURL=qr-code.js.map