npm - @magiclabs/ui-components - Versions diffs - 1.22.2 → 1.23.0 - Mend

@magiclabs/ui-components 1.22.2 → 1.23.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 (17) hide show

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),h=require("@styled/jsx");require("../feedback/progress-bar.js");var v=require("@styled/tokens"),I=require("../icons/ico-caret-down.js"),K=require("../icons/ico-caret-up.js"),V=require("../icons/ico-checkmark.js"),M=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var T=require("../feedback/tooltip.js"),y=require("react-aria");const E={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:()=>{}}),R=({value:o,label:s,size:b="lg",isFocused:k})=>{const{selectedOption:d,setSelectedOption:p}=r.useContext(P),a=d?.value===o,i=E[b],q=r.useCallback(()=>{p({value:o,label:s})},[p,o,s]);return t.jsxs(h.HStack,{py:1.5,gap:2,bg:a?"brand.base":k?"brand.lightest":"",_hover:a?{}:{bg:"brand.lightest"},onClick:q,style:{paddingLeft:i.width,paddingRight:i.width},children:[t.jsx(h.Box,{style:{width:i.width},children:a&&t.jsx(V.default,{width:i.check,height:i.check,color:v.token("colors.surface.primary")})}),t.jsx(j.default,{size:b,styles:{fontWeight:500,color:v.token(`colors.${a?"surface":"text"}.primary`)},children:s})]})},A=({children:o,onSelect:s,label:b,placeholder:k="Select one",selectedValue:d,size:p="lg",tooltipContent:a,disabled:i,viewMax:q=5,...F})=>{const[f,x]=r.useState(!1),[l,m]=r.useState(null),w=r.useRef(null),C=r.useRef(null),u=E[p],H=q*u.mult+1,W=r.useCallback(()=>{x(e=>!e),f||(m(null),setTimeout(()=>{var e;return(e=C.current)===null||e===void 0?void 0:e.focus()}))},[f]),B=r.useCallback(e=>{s(e.value),x(!1)},[s]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(n=>n.props.value===d);return e?e.props.label:k},[d,o]),{buttonProps:L}=y.useButton({...F,isDisabled:i,onPress:W},w),{focusProps:N,isFocusVisible:_}=y.useFocusRing(),{keyboardProps:$}=y.useKeyboard({onKeyDown:e=>{var n,c;if(!f)return;let g=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?m(r.Children.count(o)-1):(g=l>0?l-1:r.Children.count(o)-1,m(g));break;case"ArrowDown":e.preventDefault(),l===null?m(0):(g=l<r.Children.count(o)-1?l+1:0,m(g));break;case"Enter":if(e.preventDefault(),(n=w.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&s(O.props.value)}break;case"Escape":x(!1),(c=w.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=C.current)===null||c===void 0)&&c.contains(n.target)||x(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(P.Provider,{value:{selectedOption:{value:d??"",label:S},setSelectedOption:B},children:t.jsxs(h.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[t.jsxs(h.HStack,{gap:2,opacity:i?.3:"",transition:"all linear 120ms",children:[b&&t.jsx(j.default,{size:"sm",styles:{fontWeight:500},children:b}),a&&t.jsx(T.default,{isDisabled:i,content:a,children:t.jsx(M.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:w,...y.mergeProps(L,N,$),children:[t.jsxs(h.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{size:p,styles:{color:v.token(`colors.text.${d?"primary":"tertiary"}`)},children:S}),f?t.jsx(K.default,{width:u.caret,height:u.caret,color:v.token("colors.brand.base")}):t.jsx(I.default,{width:u.caret,height:u.caret,color:v.token("colors.brand.base")})]}),f&&t.jsx(h.Box,{ref:C,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:`${H}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};R.displayName="DropdownOption",A.displayName="DropdownSelector",exports.DropdownOption=R,exports.DropdownSelector=A;
+"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var z=require("@styled/css"),b=require("@styled/jsx");require("../feedback/progress-bar.js");var v=require("@styled/tokens"),I=require("../icons/ico-caret-down.js"),K=require("../icons/ico-caret-up.js"),V=require("../icons/ico-checkmark.js"),M=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var j=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var T=require("../feedback/tooltip.js"),y=require("react-aria");const E={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:()=>{}}),R=({value:o,label:a,size:d="lg",isFocused:k})=>{const{selectedOption:h,setSelectedOption:p}=r.useContext(P),s=h?.value===o,i=E[d],q=r.useCallback(()=>{p({value:o,label:a})},[p,o,a]);return t.jsxs(b.HStack,{py:1.5,gap:2,bg:s?"brand.base":k?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:q,style:{paddingLeft:i.width,paddingRight:i.width},children:[t.jsx(b.Box,{style:{width:i.width},children:s&&t.jsx(V.default,{width:i.check,height:i.check,color:v.token("colors.surface.primary")})}),t.jsx(j.default,{size:d,styles:{fontWeight:500,color:v.token(`colors.${s?"surface":"text"}.primary`)},children:a})]})},A=({children:o,onSelect:a,label:d,placeholder:k="Select one",selectedValue:h,size:p="lg",tooltipContent:s,disabled:i,viewMax:q=5,...F})=>{const[f,x]=r.useState(!1),[l,m]=r.useState(null),w=r.useRef(null),C=r.useRef(null),u=E[p],H=q*u.mult+1,W=r.useCallback(()=>{x(e=>!e),f||(m(null),setTimeout(()=>{var e;return(e=C.current)===null||e===void 0?void 0:e.focus()}))},[f]),B=r.useCallback(e=>{a(e.value),x(!1)},[a]),S=r.useMemo(()=>{const e=r.Children.toArray(o).find(n=>n.props.value===h);return e?e.props.label:k},[h,o]),{buttonProps:L}=y.useButton({...F,isDisabled:i,onPress:W},w),{focusProps:N,isFocusVisible:_}=y.useFocusRing(),{keyboardProps:$}=y.useKeyboard({onKeyDown:e=>{var n,c;if(!f)return;let g=l;const D=r.Children.toArray(o);switch(e.key){case"ArrowUp":e.preventDefault(),l===null?m(r.Children.count(o)-1):(g=l>0?l-1:r.Children.count(o)-1,m(g));break;case"ArrowDown":e.preventDefault(),l===null?m(0):(g=l<r.Children.count(o)-1?l+1:0,m(g));break;case"Enter":if(e.preventDefault(),(n=w.current)===null||n===void 0||n.focus(),l===null)return;if(l>=0&&l<D.length){const O=D[l];O&&a(O.props.value)}break;case"Escape":x(!1),(c=w.current)===null||c===void 0||c.focus();break}}});return r.useEffect(()=>{const e=n=>{var c;!((c=C.current)===null||c===void 0)&&c.contains(n.target)||x(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(P.Provider,{value:{selectedOption:{value:h??"",label:S},setSelectedOption:B},children:t.jsxs(b.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[(d||s)&&t.jsxs(b.HStack,{gap:2,opacity:i?.3:"",transition:"all linear 120ms",children:[d&&t.jsx(j.default,{size:"sm",styles:{fontWeight:500},children:d}),s&&t.jsx(T.default,{isDisabled:i,content:s,children:t.jsx(M.default,{className:z.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:z.css({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:w,...y.mergeProps(L,N,$),children:[t.jsxs(b.HStack,{w:"full",p:4,justifyContent:"space-between",style:{height:u.height},children:[t.jsx(j.default,{size:p,styles:{color:v.token(`colors.text.${h?"primary":"tertiary"}`)},children:S}),f?t.jsx(K.default,{width:u.caret,height:u.caret,color:v.token("colors.brand.base")}):t.jsx(I.default,{width:u.caret,height:u.caret,color:v.token("colors.brand.base")})]}),f&&t.jsx(b.Box,{ref:C,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:`${H}rem`,top:u.top},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(o,(e,n)=>r.cloneElement(e,{isFocused:n===l,size:p}))})]})]})})};R.displayName="DropdownOption",A.displayName="DropdownSelector",exports.DropdownOption=R,exports.DropdownSelector=A;
 //# 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}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\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 }: 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: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.surface.primary')} />\n )}\n </Box>\n <Text size={size} styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\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 ...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 <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\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 size={size} styles={{ color: token(`colors.text.${selectedValue ? 'primary' : '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 }),\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","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 { 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}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\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 }: 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: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.surface.primary')} />\n )}\n </Box>\n <Text size={size} styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\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 ...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 gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} 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 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 size={size} styles={{ color: token(`colors.text.${selectedValue ? 'primary' : '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 }),\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","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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"}

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

@@ -1,2 +1,2 @@
-"use strict";var l=require("react/jsx-runtime"),C=require("@styled/css"),h=require("@styled/jsx"),j=require("create-slots"),e=require("react"),x=require("react-aria");const y=e.createContext({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}}}),k=j.createSlot(({children:a,...u})=>l.jsx(h.Flex,{alignItems:"center",justifyContent:"center",children:e.Children.map(a,i=>e.cloneElement(i,u))})),S=a=>{const{children:u,onChange:i,selectedTab:o,size:f="md"}=a,[t,c]=e.useState(o),r=e.useRef({}),n=e.useRef(),[g,d]=e.useState({transform:"translateX(4px)",width:"",height:""});e.useEffect(()=>{o!==void 0&&c(o)},[o]),e.useEffect(()=>(n.current||(n.current=new ResizeObserver(()=>{const{offsetLeft:s,clientWidth:b,clientHeight:p}=r.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${p}px`})})),n.current.observe(r.current[t]),()=>{n.current&&r.current[t]&&n.current.unobserve(r.current[t])}),[]),e.useEffect(()=>{if(t&&r.current[t]){const{offsetLeft:s,clientWidth:b,clientHeight:p}=r.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${p}px`})}},[t,f]);const m=e.useCallback(s=>{c(s),i(s)},[c,i]);return l.jsxs(h.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(h.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:{...g}}),l.jsx(y.Provider,{value:{currentTab:t,setCurrentTab:m,size:f,tabRefs:r},children:u})]})},w=e.forwardRef((a,u)=>{const{label:i,id:o}=a,{currentTab:f,setCurrentTab:t,tabRefs:c,size:r}=e.useContext(y),n=f===o,g=r==="sm"?8:r==="md"?10:13,d=r==="sm"?16:20,m=e.useRef(null),s=u||m;e.useEffect(()=>{typeof s=="object"&&c.current&&(c.current[o]=s.current)},[o]);const b=e.useCallback(()=>{t(o)},[t,o]),{buttonProps:p,isPressed:R}=x.useButton({onPress:b},s),{hoverProps:T}=x.useHover({}),{isFocusVisible:P,focusProps:z}=x.useFocusRing();return j.createHost(a.children,q=>{const v=q.get(k);return l.jsx("button",{className:C.css({display:"flex",justifyContent:"center",alignItems:"center",h:g,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:n?"text.primary":"text.secondary",fontSize:r,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:P?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:n?"background 0s":"background 0.2s ease",_hover:{bg:n?"transparent":"ink.20",_dark:{bg:n?"transparent":"slate.1"}}}),ref:s,...x.mergeProps(p,T,z),children:l.jsxs(h.Flex,{opacity:R&&!n?.5:1,align:"center",justify:"center",children:[v&&{...v,props:{...v.props,className:C.css({mr:1,color:n?"text.primary":"text.secondary"}),width:d,height:d}},i]})})})}),$=Object.assign(w,{Icon:k});w.displayName="Tab",S.displayName="SegmentedControl",exports.SegmentedControl=S,exports.Tab=$;
+"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;
 //# 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}\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}>({\n currentTab: undefined,\n setCurrentTab: () => {},\n tabRefs: { current: {} },\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' } = 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 }}>\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 } = 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({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\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 _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 >\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","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 { 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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"}

package/dist/cjs/styles/semantic-tokens.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=require("@pandacss/dev");const a=r.defineSemanticTokens.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"var(--sky-lightest, {colors.sky.10})",_dark:"var(--sky-lightest-dark, {colors.sky.30/8})"}},lighter:{value:{base:"var(--sky-lighter, {colors.sky.30})",_dark:"var(--sky-lighter-dark, {colors.sky.30})"}},base:{value:{base:"var(--sky-base, {colors.sky.50})",_dark:"var(--sky-base-dark, {colors.sky.30})"}},darker:{value:{base:"var(--sky-darker, {colors.sky.70})",_dark:"var(--sky-darker-dark, {colors.sky.30)"}},darkest:{value:{base:"var(--sky-darkest, {colors.sky.90})",_dark:"var(--sky-darkest-dark, {colors.sky.30})"}}}});exports.semanticColors=a;
+"use strict";var r=require("@pandacss/dev");const a=r.defineSemanticTokens.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});exports.semanticColors=a;
 //# sourceMappingURL=semantic-tokens.js.map

package/dist/cjs/styles/semantic-tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: {\n value: {\n base: '~~var(--sky-lightest,~~ {colors.sky.10})'~~,\n~~ _dark: '~~var(--sky-lightest-dark,~~ {colors.sky.30/8})'~~,\n~~ }~~,\n~~ },\n lighter: {\n value: {\n base: '~~var(--sky-lighter,~~ {colors.sky.30})'~~,\n~~ _dark: '~~var(--sky-lighter-dark,~~ {colors.sky.30})'~~,\n~~ }~~,\n~~ },\n base: {\n value: {\n base: '~~var(--sky-base,~~ {colors.sky.50})'~~,\n~~ _dark: '~~var(--sky-base-dark,~~ {colors.sky.30})'~~,\n~~ }~~,\n~~ },\n darker: {\n value: {\n base: '~~var(--sky-darker,~~ {colors.sky.70})'~~,\n~~ _dark: '~~var(--sky-darker-dark,~~ {colors.sky.30)'~~,\n~~ }~~,\n~~ },\n darkest: {\n value: {\n base: '~~var(--sky-darkest,~~ {colors.sky.90})'~~,\n~~ _dark: '~~var(--sky-darkest-dark,~~ {colors.sky.30})'~~,\n~~ }~~,\n~~ },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"4CAEO,MAAMA,EAAiBC,EAAqB,qBAAA,OAAO,CACxD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,iDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,CACF,EACD,KAAM,CACJ,QAAS,CACP,MAAO,CACL,KAAM,uCACN,MAAO,0CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,wCACN,MAAO,8CACR,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,gDACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,kDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,6CACN,MAAO,kDACR,CACF,CACF,EACD,MAAO,CACL,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,kDACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,iDACR,CACF,EACD,KAAM,CACJ,MAAO,CACL,KAAM,uCACN,MAAO,2CACR,CACF,EACD,OAAQ,CACN,MAAO,CACL,KAAM,yCACN,MAAO,6CACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,8CACR,CACF,CACF,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,QAAS,CACP,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,UAAW,CACT,SAAU,~~CACR~~,MAAO,~~CACL~~,KAAM,~~uCACN~~,MAAO,~~6CACR~~,~~CACF~~,~~EACD,~~QAAS,~~CACP~~,MAAO,~~CACL~~,KAAM,~~sCACN~~,MAAO,~~0CACR~~,~~CACF~~,~~EACD,~~KAAM,~~CACJ~~,MAAO,~~CACL~~,KAAM,~~mCACN~~,MAAO,~~uCACR~~,~~CACF~~,~~EACD,~~OAAQ,~~CACN~~,MAAO,~~CACL~~,KAAM,~~qCACN~~,MAAO,~~wCACR~~,~~CACF~~,~~EACD,~~QAAS,~~CACP~~,MAAO,~~CACL~~,KAAM,~~sCACN~~,MAAO,~~0CACR~~,~~CACF~~,CACF,~~CACF,~~CAAA"}
1	+ {"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: { value: { base: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n lighter: { value: { base: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n base: { value: { base: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darker: { value: { base: '{colors.sky.70}', _dark: '{colors.sky.30}' } },\n darkest: { value: { base: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"4CAEO,MAAMA,EAAiBC,EAAqB,qBAAA,OAAO,CACxD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,iDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,CACF,EACD,KAAM,CACJ,QAAS,CACP,MAAO,CACL,KAAM,uCACN,MAAO,0CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,wCACN,MAAO,8CACR,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,gDACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,kDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,6CACN,MAAO,kDACR,CACF,CACF,EACD,MAAO,CACL,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,kDACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,iDACR,CACF,EACD,KAAM,CACJ,MAAO,CACL,KAAM,uCACN,MAAO,2CACR,CACF,EACD,OAAQ,CACN,MAAO,CACL,KAAM,yCACN,MAAO,6CACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,8CACR,CACF,CACF,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,QAAS,CACP,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,UAAW,CACT,SAAU,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,oBAAuB,EAC5E,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACzE,KAAM,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACtE,OAAQ,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACxE,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,CAC1E,CACF,CAAA"}

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

@@ -1,2 +1,2 @@
-import{jsxs as b,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{css as W}from"@styled/css";import{HStack as C,Box as j,VStack as U}from"@styled/jsx";import"../feedback/progress-bar.js";import{token as g}from"@styled/tokens";import Y from"../icons/ico-caret-down.js";import q from"../icons/ico-caret-up.js";import G from"../icons/ico-checkmark.js";import J from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import D from"./text.js";import"./portal.js";import{createContext as Q,useContext as X,useCallback as O,useState as A,useRef as F,useMemo as Z,Children as p,useEffect as ee,cloneElement as te}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import re from"../feedback/tooltip.js";import{useButton as oe,useFocusRing as le,useKeyboard as ie,mergeProps as ne}from"react-aria";const L={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}},N=Q({selectedOption:null,setSelectedOption:()=>{}}),R=({value:r,label:n,size:m="lg",isFocused:x})=>{const{selectedOption:u,setSelectedOption:d}=X(N),s=u?.value===r,l=L[m],k=O(()=>{d({value:r,label:n})},[d,r,n]);return b(C,{py:1.5,gap:2,bg:s?"brand.base":x?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:l.width,paddingRight:l.width},children:[o(j,{style:{width:l.width},children:s&&o(G,{width:l.check,height:l.check,color:g("colors.surface.primary")})}),o(D,{size:m,styles:{fontWeight:500,color:g(`colors.${s?"surface":"text"}.primary`)},children:n})]})},_=({children:r,onSelect:n,label:m,placeholder:x="Select one",selectedValue:u,size:d="lg",tooltipContent:s,disabled:l,viewMax:k=5,...B})=>{const[h,w]=A(!1),[t,f]=A(null),y=F(null),S=F(null),a=L[d],H=k*a.mult+1,I=O(()=>{w(e=>!e),h||(f(null),setTimeout(()=>{var e;return(e=S.current)===null||e===void 0?void 0:e.focus()}))},[h]),K=O(e=>{n(e.value),w(!1)},[n]),z=Z(()=>{const e=p.toArray(r).find(i=>i.props.value===u);return e?e.props.label:x},[u,r]),{buttonProps:V}=oe({...B,isDisabled:l,onPress:I},y),{focusProps:M,isFocusVisible:T}=le(),{keyboardProps:$}=ie({onKeyDown:e=>{var i,c;if(!h)return;let v=t;const E=p.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?f(p.count(r)-1):(v=t>0?t-1:p.count(r)-1,f(v));break;case"ArrowDown":e.preventDefault(),t===null?f(0):(v=t<p.count(r)-1?t+1:0,f(v));break;case"Enter":if(e.preventDefault(),(i=y.current)===null||i===void 0||i.focus(),t===null)return;if(t>=0&&t<E.length){const P=E[t];P&&n(P.props.value)}break;case"Escape":w(!1),(c=y.current)===null||c===void 0||c.focus();break}}});return ee(()=>{const e=i=>{var c;!((c=S.current)===null||c===void 0)&&c.contains(i.target)||w(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(N.Provider,{value:{selectedOption:{value:u??"",label:z},setSelectedOption:K},children:b(U,{gap:2,w:"full",alignItems:"flex-start",children:[b(C,{gap:2,opacity:l?.3:"",transition:"all linear 120ms",children:[m&&o(D,{size:"sm",styles:{fontWeight:500},children:m}),s&&o(re,{isDisabled:l,content:s,children:o(J,{className:W({w:4,h:4,color:"neutral.primary"})})})]}),b("button",{className:W({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:T?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:y,...ne(V,M,$),children:[b(C,{w:"full",p:4,justifyContent:"space-between",style:{height:a.height},children:[o(D,{size:d,styles:{color:g(`colors.text.${u?"primary":"tertiary"}`)},children:z}),h?o(q,{width:a.caret,height:a.caret,color:g("colors.brand.base")}):o(Y,{width:a.caret,height:a.caret,color:g("colors.brand.base")})]}),h&&o(j,{ref:S,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:`${H}rem`,top:a.top},overflowY:"auto",outline:"none",zIndex:"max",children:p.map(r,(e,i)=>te(e,{isFocused:i===t,size:d}))})]})]})})};R.displayName="DropdownOption",_.displayName="DropdownSelector";export{R as DropdownOption,_ as DropdownSelector};
+import{jsxs as b,jsx as o}from"react/jsx-runtime";import"../feedback/callout.js";import{css as W}from"@styled/css";import{HStack as C,Box as $,VStack as U}from"@styled/jsx";import"../feedback/progress-bar.js";import{token as g}from"@styled/tokens";import Y from"../icons/ico-caret-down.js";import q from"../icons/ico-caret-up.js";import G from"../icons/ico-checkmark.js";import J from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import D from"./text.js";import"./portal.js";import{createContext as Q,useContext as X,useCallback as O,useState as j,useRef as A,useMemo as Z,Children as m,useEffect as ee,cloneElement as te}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import re from"../feedback/tooltip.js";import{useButton as oe,useFocusRing as le,useKeyboard as ie,mergeProps as ne}from"react-aria";const F={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}},L=Q({selectedOption:null,setSelectedOption:()=>{}}),N=({value:r,label:s,size:d="lg",isFocused:x})=>{const{selectedOption:p,setSelectedOption:u}=X(L),n=p?.value===r,l=F[d],k=O(()=>{u({value:r,label:s})},[u,r,s]);return b(C,{py:1.5,gap:2,bg:n?"brand.base":x?"brand.lightest":"",_hover:n?{}:{bg:"brand.lightest"},onClick:k,style:{paddingLeft:l.width,paddingRight:l.width},children:[o($,{style:{width:l.width},children:n&&o(G,{width:l.check,height:l.check,color:g("colors.surface.primary")})}),o(D,{size:d,styles:{fontWeight:500,color:g(`colors.${n?"surface":"text"}.primary`)},children:s})]})},R=({children:r,onSelect:s,label:d,placeholder:x="Select one",selectedValue:p,size:u="lg",tooltipContent:n,disabled:l,viewMax:k=5,..._})=>{const[h,w]=j(!1),[t,f]=j(null),y=A(null),S=A(null),a=F[u],B=k*a.mult+1,H=O(()=>{w(e=>!e),h||(f(null),setTimeout(()=>{var e;return(e=S.current)===null||e===void 0?void 0:e.focus()}))},[h]),I=O(e=>{s(e.value),w(!1)},[s]),z=Z(()=>{const e=m.toArray(r).find(i=>i.props.value===p);return e?e.props.label:x},[p,r]),{buttonProps:K}=oe({..._,isDisabled:l,onPress:H},y),{focusProps:V,isFocusVisible:M}=le(),{keyboardProps:T}=ie({onKeyDown:e=>{var i,c;if(!h)return;let v=t;const E=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),t===null?f(m.count(r)-1):(v=t>0?t-1:m.count(r)-1,f(v));break;case"ArrowDown":e.preventDefault(),t===null?f(0):(v=t<m.count(r)-1?t+1:0,f(v));break;case"Enter":if(e.preventDefault(),(i=y.current)===null||i===void 0||i.focus(),t===null)return;if(t>=0&&t<E.length){const P=E[t];P&&s(P.props.value)}break;case"Escape":w(!1),(c=y.current)===null||c===void 0||c.focus();break}}});return ee(()=>{const e=i=>{var c;!((c=S.current)===null||c===void 0)&&c.contains(i.target)||w(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),o(L.Provider,{value:{selectedOption:{value:p??"",label:z},setSelectedOption:I},children:b(U,{gap:2,w:"full",alignItems:"flex-start",children:[(d||n)&&b(C,{gap:2,opacity:l?.3:"",transition:"all linear 120ms",children:[d&&o(D,{size:"sm",styles:{fontWeight:500},children:d}),n&&o(re,{isDisabled:l,content:n,children:o(J,{className:W({w:4,h:4,color:"neutral.primary"})})})]}),b("button",{className:W({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:M?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:y,...ne(K,V,T),children:[b(C,{w:"full",p:4,justifyContent:"space-between",style:{height:a.height},children:[o(D,{size:u,styles:{color:g(`colors.text.${p?"primary":"tertiary"}`)},children:z}),h?o(q,{width:a.caret,height:a.caret,color:g("colors.brand.base")}):o(Y,{width:a.caret,height:a.caret,color:g("colors.brand.base")})]}),h&&o($,{ref:S,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:`${B}rem`,top:a.top},overflowY:"auto",outline:"none",zIndex:"max",children:m.map(r,(e,i)=>te(e,{isFocused:i===t,size:u}))})]})]})})};N.displayName="DropdownOption",R.displayName="DropdownSelector";export{N as DropdownOption,R as DropdownSelector};
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/es/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}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\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 }: 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: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.surface.primary')} />\n )}\n </Box>\n <Text size={size} styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\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 ...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 <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} content={tooltipContent}>\n <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n </Tooltip>\n )}\n </HStack>\n\n <button\n className={css({\n w: 'full',\n h: 'fit-content',\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 size={size} styles={{ color: token(`colors.text.${selectedValue ? 'primary' : '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 }),\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","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 { 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}\n\nexport interface DropdownOptionProps {\n value: string;\n label: string;\n isFocused?: boolean;\n size?: DropdownSelectorProps['size'];\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 }: 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: 'brand.lightest' } : {}}\n onClick={handleSelectOption}\n style={{ paddingLeft: sizeProps.width, paddingRight: sizeProps.width }}\n >\n <Box style={{ width: sizeProps.width }}>\n {isSelected && (\n <IcoCheckmark width={sizeProps.check} height={sizeProps.check} color={token('colors.surface.primary')} />\n )}\n </Box>\n <Text size={size} styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\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 ...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 gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n {label && (\n <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n {label}\n </Text>\n )}\n\n {tooltipContent && (\n <Tooltip isDisabled={disabled} 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 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 size={size} styles={{ color: token(`colors.text.${selectedValue ? 'primary' : '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 }),\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","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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"}

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

@@ -1,2 +1,2 @@
-import{jsx as b,jsxs as C}from"react/jsx-runtime";import{css as v}from"@styled/css";import{Flex as x,Box as I}from"@styled/jsx";import{createSlot as N,createHost as W}from"create-slots";import{createContext as F,Children as X,cloneElement as B,forwardRef as E,useContext as L,useRef as y,useEffect as m,useCallback as k,useState as w}from"react";import{useButton as O,useHover as V,useFocusRing as q,mergeProps as A}from"react-aria";const S=F({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}}}),T=N(({children:s,...c})=>b(x,{alignItems:"center",justifyContent:"center",children:X.map(s,i=>B(i,c))})),j=s=>{const{children:c,onChange:i,selectedTab:o,size:p="md"}=s,[e,a]=w(o),t=y({}),r=y(),[f,l]=w({transform:"translateX(4px)",width:"",height:""});m(()=>{o!==void 0&&a(o)},[o]),m(()=>(r.current||(r.current=new ResizeObserver(()=>{const{offsetLeft:n,clientWidth:u,clientHeight:d}=t.current[e];l({transform:`translateX(${n}px)`,width:`${u}px`,height:`${d}px`})})),r.current.observe(t.current[e]),()=>{r.current&&t.current[e]&&r.current.unobserve(t.current[e])}),[]),m(()=>{if(e&&t.current[e]){const{offsetLeft:n,clientWidth:u,clientHeight:d}=t.current[e];l({transform:`translateX(${n}px)`,width:`${u}px`,height:`${d}px`})}},[e,p]);const h=k(n=>{a(n),i(n)},[a,i]);return C(x,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[b(I,{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:{...f}}),b(S.Provider,{value:{currentTab:e,setCurrentTab:h,size:p,tabRefs:t},children:c})]})},P=E((s,c)=>{const{label:i,id:o}=s,{currentTab:p,setCurrentTab:e,tabRefs:a,size:t}=L(S),r=p===o,f=t==="sm"?8:t==="md"?10:13,l=t==="sm"?16:20,h=y(null),n=c||h;m(()=>{typeof n=="object"&&a.current&&(a.current[o]=n.current)},[o]);const u=k(()=>{e(o)},[e,o]),{buttonProps:d,isPressed:R}=O({onPress:u},n),{hoverProps:z}=V({}),{isFocusVisible:$,focusProps:_}=q();return W(s.children,H=>{const g=H.get(T);return b("button",{className:v({display:"flex",justifyContent:"center",alignItems:"center",h:f,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:r?"text.primary":"text.secondary",fontSize:t,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:$?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:r?"background 0s":"background 0.2s ease",_hover:{bg:r?"transparent":"ink.20",_dark:{bg:r?"transparent":"slate.1"}}}),ref:n,...A(d,z,_),children:C(x,{opacity:R&&!r?.5:1,align:"center",justify:"center",children:[g&&{...g,props:{...g.props,className:v({mr:1,color:r?"text.primary":"text.secondary"}),width:l,height:l}},i]})})})}),D=Object.assign(P,{Icon:T});P.displayName="Tab",j.displayName="SegmentedControl";export{j as SegmentedControl,D as Tab};
+import{jsx as f,jsxs as v}from"react/jsx-runtime";import{css as k}from"@styled/css";import{Flex as y,Box as N}from"@styled/jsx";import{createSlot as W,createHost as E}from"create-slots";import{createContext as F,Children as X,cloneElement as B,forwardRef as L,useContext as O,useRef as C,useEffect as m,useCallback as w,useState as S}from"react";import{useButton as D,useHover as V,useFocusRing as q,mergeProps as A}from"react-aria";const T=F({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),j=W(({children:i,...l})=>f(y,{alignItems:"center",justifyContent:"center",children:X.map(i,a=>B(a,l))})),P=i=>{const{children:l,onChange:a,selectedTab:n,size:p="md",disabled:b=!1}=i,[e,o]=S(n),s=C({}),t=C(),[h,c]=S({transform:"translateX(4px)",width:"",height:""});m(()=>{n!==void 0&&o(n)},[n]),m(()=>(t.current||(t.current=new ResizeObserver(()=>{const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})})),t.current.observe(s.current[e]),()=>{t.current&&s.current[e]&&t.current.unobserve(s.current[e])}),[]),m(()=>{if(e&&s.current[e]){const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})}},[e,p]);const g=w(r=>{o(r),a(r)},[o,a]);return v(y,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[f(N,{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:{...h}}),f(T.Provider,{value:{currentTab:e,setCurrentTab:g,size:p,tabRefs:s,disabled:b},children:l})]})},R=L((i,l)=>{const{label:a,id:n}=i,{currentTab:p,setCurrentTab:b,tabRefs:e,size:o,disabled:s}=O(T),t=p===n,h=o==="sm"?8:o==="md"?10:13,c=o==="sm"?16:20,g=C(null),r=l||g;m(()=>{typeof r=="object"&&e.current&&(e.current[n]=r.current)},[n]);const d=w(()=>{b(n)},[b,n]),{buttonProps:u,isPressed:z}=D({onPress:d,isDisabled:s},r),{hoverProps:$}=V({}),{isFocusVisible:_,focusProps:H}=q();return E(i.children,I=>{const x=I.get(j);return f("button",{className:k({display:"flex",justifyContent:"center",alignItems:"center",h,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:t?"text.primary":"text.secondary",fontSize:o,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:_?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:t?"background 0s":"background 0.2s ease",_disabled:{opacity:"0.3",pointerEvents:"none"},_hover:{bg:t?"transparent":"ink.20",_dark:{bg:t?"transparent":"slate.1"}}}),ref:r,...A(u,$,H),disabled:s,children:v(y,{opacity:z&&!t?.5:1,align:"center",justify:"center",children:[x&&{...x,props:{...x.props,className:k({mr:1,color:t?"text.primary":"text.secondary"}),width:c,height:c}},a]})})})}),G=Object.assign(R,{Icon:j});R.displayName="Tab",P.displayName="SegmentedControl";export{P as SegmentedControl,G as Tab};
 //# sourceMappingURL=segmented-control.js.map

package/dist/es/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}\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}>({\n currentTab: undefined,\n setCurrentTab: () => {},\n tabRefs: { current: {} },\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' } = 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 }}>\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 } = 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({ onPress: handlePress }, ref as React.RefObject<HTMLButtonElement>);\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 _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 >\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","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 { 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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"}

package/dist/es/styles/semantic-tokens.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineSemanticTokens as r}from"@pandacss/dev";const a=r.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"var(--sky-lightest, {colors.sky.10})",_dark:"var(--sky-lightest-dark, {colors.sky.30/8})"}},lighter:{value:{base:"var(--sky-lighter, {colors.sky.30})",_dark:"var(--sky-lighter-dark, {colors.sky.30})"}},base:{value:{base:"var(--sky-base, {colors.sky.50})",_dark:"var(--sky-base-dark, {colors.sky.30})"}},darker:{value:{base:"var(--sky-darker, {colors.sky.70})",_dark:"var(--sky-darker-dark, {colors.sky.30)"}},darkest:{value:{base:"var(--sky-darkest, {colors.sky.90})",_dark:"var(--sky-darkest-dark, {colors.sky.30})"}}}});export{a as semanticColors};
+import{defineSemanticTokens as r}from"@pandacss/dev";const a=r.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});export{a as semanticColors};
 //# sourceMappingURL=semantic-tokens.js.map

package/dist/es/styles/semantic-tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: {\n value: {\n base: '~~var(--sky-lightest,~~ {colors.sky.10})'~~,\n~~ _dark: '~~var(--sky-lightest-dark,~~ {colors.sky.30/8})'~~,\n~~ }~~,\n~~ },\n lighter: {\n value: {\n base: '~~var(--sky-lighter,~~ {colors.sky.30})'~~,\n~~ _dark: '~~var(--sky-lighter-dark,~~ {colors.sky.30})'~~,\n~~ }~~,\n~~ },\n base: {\n value: {\n base: '~~var(--sky-base,~~ {colors.sky.50})'~~,\n~~ _dark: '~~var(--sky-base-dark,~~ {colors.sky.30})'~~,\n~~ }~~,\n~~ },\n darker: {\n value: {\n base: '~~var(--sky-darker,~~ {colors.sky.70})'~~,\n~~ _dark: '~~var(--sky-darker-dark,~~ {colors.sky.30)'~~,\n~~ }~~,\n~~ },\n darkest: {\n value: {\n base: '~~var(--sky-darkest,~~ {colors.sky.90})'~~,\n~~ _dark: '~~var(--sky-darkest-dark,~~ {colors.sky.30})'~~,\n~~ }~~,\n~~ },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"qDAEO,MAAMA,EAAiBC,EAAqB,OAAO,CACxD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,iDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,CACF,EACD,KAAM,CACJ,QAAS,CACP,MAAO,CACL,KAAM,uCACN,MAAO,0CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,wCACN,MAAO,8CACR,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,gDACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,kDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,6CACN,MAAO,kDACR,CACF,CACF,EACD,MAAO,CACL,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,kDACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,iDACR,CACF,EACD,KAAM,CACJ,MAAO,CACL,KAAM,uCACN,MAAO,2CACR,CACF,EACD,OAAQ,CACN,MAAO,CACL,KAAM,yCACN,MAAO,6CACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,8CACR,CACF,CACF,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,QAAS,CACP,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,UAAW,CACT,SAAU,~~CACR~~,MAAO,~~CACL~~,KAAM,~~uCACN~~,MAAO,~~6CACR~~,~~CACF~~,~~EACD,~~QAAS,~~CACP~~,MAAO,~~CACL~~,KAAM,~~sCACN~~,MAAO,~~0CACR~~,~~CACF~~,~~EACD,~~KAAM,~~CACJ~~,MAAO,~~CACL~~,KAAM,~~mCACN~~,MAAO,~~uCACR~~,~~CACF~~,~~EACD,~~OAAQ,~~CACN~~,MAAO,~~CACL~~,KAAM,~~qCACN~~,MAAO,~~wCACR~~,~~CACF~~,~~EACD,~~QAAS,~~CACP~~,MAAO,~~CACL~~,KAAM,~~sCACN~~,MAAO,~~0CACR~~,~~CACF~~,CACF,~~CACF,~~CAAA"}
1	+ {"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: { value: { base: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n lighter: { value: { base: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n base: { value: { base: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darker: { value: { base: '{colors.sky.70}', _dark: '{colors.sky.30}' } },\n darkest: { value: { base: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"qDAEO,MAAMA,EAAiBC,EAAqB,OAAO,CACxD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,iDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,CACF,EACD,KAAM,CACJ,QAAS,CACP,MAAO,CACL,KAAM,uCACN,MAAO,0CACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,yCACN,MAAO,+CACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,wCACN,MAAO,8CACR,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,gDACR,CACF,EACD,UAAW,CACT,MAAO,CACL,KAAM,4CACN,MAAO,kDACR,CACF,EACD,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,gDACR,CACF,EACD,WAAY,CACV,MAAO,CACL,KAAM,6CACN,MAAO,kDACR,CACF,CACF,EACD,MAAO,CACL,SAAU,CACR,MAAO,CACL,KAAM,2CACN,MAAO,kDACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,iDACR,CACF,EACD,KAAM,CACJ,MAAO,CACL,KAAM,uCACN,MAAO,2CACR,CACF,EACD,OAAQ,CACN,MAAO,CACL,KAAM,yCACN,MAAO,6CACR,CACF,EACD,QAAS,CACP,MAAO,CACL,KAAM,0CACN,MAAO,8CACR,CACF,CACF,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,SAAU,CACR,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,QAAS,CACP,SAAU,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,qBAAwB,EAC9E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC3E,KAAM,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EACxE,OAAQ,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,EAC1E,QAAS,CAAE,MAAO,CAAE,KAAM,mBAAoB,MAAO,mBAAsB,CAC5E,EACD,UAAW,CACT,SAAU,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,oBAAuB,EAC5E,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACzE,KAAM,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACtE,OAAQ,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,EACxE,QAAS,CAAE,MAAO,CAAE,KAAM,kBAAmB,MAAO,kBAAqB,CAC1E,CACF,CAAA"}

package/dist/types/components/primitives/dropdown-selector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,SAAS,EAOV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAoD,MAAM,YAAY,CAAC;AAE/F,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAaD,eAAO,MAAM,cAAc;wCAA8C,mBAAmB;;CA4B3F,CAAC;AAEF,eAAO,MAAM,gBAAgB;mHAW1B,qBAAqB;;~~CAmLvB~~,CAAC"}
1	+ {"version":3,"file":"dropdown-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,SAAS,EAOV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAoD,MAAM,YAAY,CAAC;AAE/F,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAaD,eAAO,MAAM,cAAc;wCAA8C,mBAAmB;;CA4B3F,CAAC;AAEF,eAAO,MAAM,gBAAgB;mHAW1B,qBAAqB;;CAqLvB,CAAC"}

package/dist/types/components/primitives/segmented-control.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export interface SegmentedControlProps extends PropsWithChildren {
     onChange: (value: string) => void;
     selectedTab: string;
     size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
 }
 export interface TabProps extends AriaButtonProps {
     label: string;

package/dist/types/components/primitives/segmented-control.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAiD,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;~~CAC3B~~;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;~~AA2BD~~,eAAO,MAAM,gBAAgB;YAAW,qBAAqB;;CA+E5D,CAAC;~~AA2EF~~,eAAO,MAAM,GAAG;;CAEd,CAAC"}
1	+ {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAiD,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AA6BD,eAAO,MAAM,gBAAgB;YAAW,qBAAqB;;CA+E5D,CAAC;AAgFF,eAAO,MAAM,GAAG;;CAEd,CAAC"}

package/dist/types/styles/semantic-tokens.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/semantic-tokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAwJzB~~,CAAC"}
1	+ {"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/semantic-tokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HzB,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs/ui-components",
-  "version": "1.22.2",
+  "version": "1.23.0",
   "description": "💅 A theme-able library of reusable UI components",
   "author": "Magic Labs <open-source@magic.link>",
   "repository": {