@magiclabs/ui-components 1.13.2 → 1.13.3
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.
- package/dist/cjs/components/primitives/segmented-control.js +1 -1
- package/dist/cjs/components/primitives/segmented-control.js.map +1 -1
- package/dist/es/components/primitives/segmented-control.js +1 -1
- package/dist/es/components/primitives/segmented-control.js.map +1 -1
- package/dist/panda.buildinfo.json +1 -1
- package/dist/types/components/primitives/segmented-control.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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=$;
|
|
2
2
|
//# sourceMappingURL=segmented-control.js.map
|
|
@@ -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 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 {\n children: React.ReactNode;\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 [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 (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, width 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","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":"uKAiCA,MAAMA,EAA0BC,EAK7B,cAAA,CACD,WAAY,OACZ,cAAe,IAAK,CAAA,EACpB,QAAS,CAAE,QAAS,CAAI,CAAA,CACzB,CAAA,EAEKC,EAAOC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE3CC,EAAAA,IAACC,EAAI,KAAA,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAS,SAAA,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEYM,EAAoBN,GAAgC,CAC/D,KAAM,CAAE,SAAAD,EAAU,SAAAQ,EAAU,YAAAC,EAAa,KAAAC,EAAO,IAAM,EAAGT,EACnD,CAACU,EAAYC,CAAa,EAAIC,EAAAA,SAASJ,CAAW,EAClDK,EAAUC,EAAAA,OAAoD,CAAE,CAAA,EAChE,CAACC,EAAgBC,CAAiB,EAAIJ,EAAAA,SAAS,CAAE,UAAW,kBAAmB,MAAO,GAAI,OAAQ,EAAI,CAAA,EAE5GK,EAAU,UAAA,IAAK,CACTT,IAAgB,QAClBG,EAAcH,CAAW,CAE7B,EAAG,CAACA,CAAW,CAAC,EAEhBS,EAAU,UAAA,IAAK,CACb,GAAIP,GAAcG,EAAQ,QAAQH,CAAU,EAAG,CAC7C,KAAM,CAAE,WAAAQ,EAAY,YAAAC,EAAa,aAAAC,CAAY,EAAKP,EAAQ,QAAQH,CAAU,EAC5EM,EAAkB,CAChB,UAAW,cAAcE,CAAU,MACnC,MAAO,GAAGC,CAAW,KACrB,OAAQ,GAAGC,CAAY,IACxB,CAAA,CACH,CACF,EAAG,CAACV,EAAYD,CAAI,CAAC,EAErB,MAAMY,EAAeC,EAAAA,YAClBC,GAAc,CACbZ,EAAcY,CAAE,EAChBhB,EAASgB,CAAE,CACb,EACA,CAACZ,EAAeJ,CAAQ,CAAC,EAG3B,OACEiB,EAAAA,KAACtB,EAAI,KAAA,CACH,EAAE,OACF,KAAK,UACL,EAAG,EACH,QAAQ,OACR,GAAG,SACH,MAAO,CAAE,GAAI,SAAS,eACX,oBACX,SAAS,WAAU,SAAA,CAEnBD,EAACwB,IAAAA,MAAG,CACF,SAAS,WACT,GAAG,QACH,MAAO,CAAE,GAAI,WACb,UAAU,sCACV,WAAW,uCACX,QAAQ,UACR,GAAI,GACJ,MAAO,CAAE,GAAGV,EACZ,CAAA,EACFd,EAAAA,IAACN,EAAwB,UAAS,MAAO,CAAE,WAAAe,EAAY,cAAeW,EAAc,KAAAZ,EAAM,QAAAI,CAAO,WAC9Fd,CAAQ,CAAA,CACwB,CAC9B,CAAA,CAEX,EAEM2B,EAAeC,EAAAA,WAAwC,CAAC3B,EAAO4B,IAAgB,CACnF,KAAM,CAAE,MAAAC,EAAO,GAAAN,CAAI,EAAGvB,EAChB,CAAE,WAAAU,EAAY,cAAAC,EAAe,QAAAE,EAAS,KAAAJ,CAAI,EAAKqB,EAAWnC,WAAAA,CAAuB,EAEjFoC,EAAarB,IAAea,EAC5BS,EAASvB,IAAS,KAAO,EAAIA,IAAS,KAAO,GAAK,GAClDwB,EAAWxB,IAAS,KAAO,GAAK,GAEhCyB,EAAcpB,SAA0B,IAAI,EAC5CqB,EAAMP,GAAgBM,EAE5BjB,YAAU,IAAK,CACT,OAAOkB,GAAQ,UAAYtB,EAAQ,UACrCA,EAAQ,QAAQU,CAAE,EAAIY,EAAI,QAE9B,EAAG,CAACZ,CAAE,CAAC,EAEP,MAAMa,EAAcd,EAAAA,YAAY,IAAK,CACnCX,EAAcY,CAAE,CAClB,EAAG,CAACZ,EAAeY,CAAE,CAAC,EAEhB,CAAE,YAAAc,EAAa,UAAAC,CAAS,EAAKC,EAAAA,UAAU,CAAE,QAASH,CAAW,EAAID,CAAyC,EAC1G,CAAE,WAAAK,CAAY,EAAGC,WAAS,CAAA,CAAE,EAC5B,CAAE,eAAAC,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OAAOC,EAAAA,WAAW7C,EAAM,SAAU8C,GAAQ,CACxC,MAAMC,EAAOD,EAAM,IAAIjD,CAAI,EAE3B,OACEI,EAAAA,IAAA,SAAA,CACE,UAAW+C,MAAI,CACb,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,EAAGhB,EACH,EAAG,OACH,QAAS,SACT,OAAQ,EACR,OAAQ,UACR,MAAOD,EAAa,eAAiB,iBACrC,SAAUtB,EACV,WAAY,WACZ,WAAY,SACZ,GAAI,cACJ,aAAciC,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,WAAYX,EAAa,gBAAkB,uBAC3C,OAAQ,CACN,GAAIA,EAAa,cAAgB,SACjC,MAAO,CAAE,GAAIA,EAAa,cAAgB,SAAW,CACtD,CACF,CAAA,EACD,IAAKI,EACD,GAAAc,aAAWZ,EAAaG,EAAYG,CAAU,EAAC,SAEnDnB,EAAAA,KAACtB,OAAI,CAAC,QAASoC,GAAa,CAACP,EAAa,GAAM,EAAG,MAAM,SAAS,QAAQ,SAAQ,SAAA,CAC/EgB,GAAQ,CACP,GAAGA,EACH,MAAO,CACL,GAAGA,EAAK,MACR,UAAWC,EAAAA,IAAI,CAAE,GAAI,EAAG,MAAOjB,EAAa,eAAiB,iBAAkB,EAC/E,MAAOE,EACP,OAAQA,CACT,CACF,EACAJ,CAAK,CAAA,CAAA,CAED,CAAA,CAEb,CAAC,CACH,CAAC,EAEYqB,EAAM,OAAO,OAAOxB,EAAc,CAC7C,KAAA7B,CACD,CAAA,EAED6B,EAAa,YAAc,MAC3BpB,EAAiB,YAAc"}
|
|
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 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 {\n children: React.ReactNode;\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,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=segmented-control.js.map
|
|
@@ -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 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 {\n children: React.ReactNode;\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 [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 (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, width 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","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 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 {\n children: React.ReactNode;\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 +1 @@
|
|
|
1
|
-
{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease, width 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","width]___[value:4","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
|
|
1
|
+
{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:hidden","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","flexDirection]___[value:column","gap]___[value:2","textAlign]___[value:left","textAlign]___[value:right","opacity]___[value:0.3","fontWeight]___[value:medium","fontSize]___[value:xl","transition]___[value:all linear 120ms","width]___[value:100%","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","backgroundColor]___[value:transparent","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","outlineColor]___[value:brand.base]___[cond:_focus","outlineStyle]___[value:solid]___[cond:_focus","outlineWidth]___[value:thick]___[cond:_focus","outlineOffset]___[value:0.5]___[cond:_focus","height]___[value:10","borderColor]___[value:negative.base","paddingLeft]___[value:11","paddingRight]___[value:11","paddingLeft]___[value:9","paddingRight]___[value:9","position]___[value:absolute","top]___[value:50%","transform]___[value:translateY(-50%)","transition]___[value:opacity linear 120ms","left]___[value:3","right]___[value:3","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","alignItems]___[value:flex-start","gap]___[value:1.5","width]___[value:16","width]___[value:20","height]___[value:16","height]___[value:20","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingBlock]___[value:2","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","borderColor]___[value:neutral.primary]___[cond:_hover","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","background]___[value:neutral.quaternary","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","borderRadius]___[value:lg","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","alignItems]___[value:flex-end","minHeight]___[value:20","outlineOffset]___[value:1","strokeWidth]___[value:2.5","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","height]___[value:8","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","width]___[value:4","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","justifyContent]___[value:space-around","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","color]___[value:positive.darker","color]___[value:text.tertiary","fontVariant]___[value:no-contextual","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:1","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAiD,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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;;
|
|
1
|
+
{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAWN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAiD,MAAM,YAAY,CAAC;AAE5F,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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"}
|