@magiclabs/ui-components 1.41.1 → 1.41.2
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/switch.js +1 -1
- package/dist/cjs/components/primitives/switch.js.map +1 -1
- package/dist/es/components/primitives/switch.js +1 -1
- package/dist/es/components/primitives/switch.js.map +1 -1
- package/dist/types/components/primitives/switch.d.ts +2 -0
- package/dist/types/components/primitives/switch.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),x=require("./text.js"),m=require("../../hooks/useToggleState.js"),a=require("@styled/css"),q=require("@styled/jsx"),S=require("@styled/jsx/flex"),j=require("@styled/patterns"),l=require("react"),s=require("react-aria");const n=l.forwardRef((t,o)=>{const{checked:u,disabled:c=!1,label:i,className:d,...b}=t,p=l.useRef(null),g=o||p,e=m.useToggleState({...t,isSelected:u}),{buttonProps:f}=s.useToggleButton({...b,isDisabled:c},e,g),{isFocusVisible:h,focusProps:v}=s.useFocusRing();return r.jsxs(S.Flex,{alignItems:"center",children:[i&&r.jsx(q.Box,{mr:2,children:r.jsx(x.default,{fontWeight:"medium",styles:{lineHeight:1},children:i})}),r.jsx("button",{...s.mergeProps(f,v),className:a.cx(a.css({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:h?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),d),children:r.jsx("span",{className:j.circle({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});n.displayName="Switch",exports.default=n;
|
|
2
2
|
//# sourceMappingURL=switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Flex alignItems=\"center\">\n {label && (\n <Box mr={2}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </Box>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n
|
|
1
|
+
{"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n className?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, className, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Flex alignItems=\"center\">\n {label && (\n <Box mr={2}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </Box>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={cx(\n css({\n px: 0.5,\n h: 5,\n width: 11,\n _disabled: {\n opacity: 0.3,\n pointerEvents: 'none',\n },\n bg: state.isSelected ? 'brand.base' : 'neutral.primary',\n _hover: {\n bg: !state.isSelected ? 'ink.70' : 'brand.base',\n _dark: {\n bg: !state.isSelected ? 'slate.4' : 'brand.base',\n },\n },\n transition: 'background-color 0.2s ease',\n rounded: 'full',\n outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n }),\n className,\n )}\n >\n <span\n className={circle({\n h: 4,\n w: 4,\n bg: 'paper',\n position: 'relative',\n left: state.isSelected ? 6 : 0,\n transition: 'left 0.2s ease',\n })}\n />\n </button>\n </Flex>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","className","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","Box","Text","mergeProps","cx","css","circle"],"mappings":"kUAgBMA,MAAAA,EAASC,EAAAA,WAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAY,EAAGN,EAEjEO,EAAcC,EAAO,OAAA,IAAI,EACzBC,EAAMR,GAAgBM,EAEtBG,EAAQC,EAAe,eAAA,CAAE,GAAGX,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAU,CAAW,EAAKC,EAAAA,gBACtB,CAAE,GAAGP,EAAY,WAAYH,CAAU,EACvCO,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,EAAAA,eAEvC,OACEC,EAAAA,KAACC,OAAI,CAAC,WAAW,SACd,SAAA,CAAAd,GACCe,EAAAA,IAACC,EAAG,IAAA,CAAC,GAAI,EAAC,SACRD,EAAAA,IAACE,EAAAA,QAAI,CAAC,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9CjB,CAAK,CAAA,CAEJ,CAAA,EAERe,EAAAA,IAAA,SAAA,CAAA,GACMG,aAAWV,EAAaG,CAAU,EACtC,UAAWQ,EACTC,GAAAA,EAAAA,IAAI,CACF,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAId,EAAM,WAAa,aAAe,kBACtC,OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,UACT,EACDT,CAAS,EACV,SAEDc,cACE,UAAWM,EAAAA,OAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMf,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDZ,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as b,jsx as t}from"react/jsx-runtime";import g from"./text.js";import{useToggleState as h}from"../../hooks/useToggleState.js";import{cx as S,css as x}from"@styled/css";import{Box as k}from"@styled/jsx";import{Flex as y}from"@styled/jsx/flex";import{circle as w}from"@styled/patterns";import{forwardRef as N,useRef as v}from"react";import{useToggleButton as B,useFocusRing as F,mergeProps as P}from"react-aria";const s=N((r,i)=>{const{checked:l,disabled:n=!1,label:o,className:a,...c}=r,d=v(null),m=i||d,e=h({...r,isSelected:l}),{buttonProps:p}=B({...c,isDisabled:n},e,m),{isFocusVisible:u,focusProps:f}=F();return b(y,{alignItems:"center",children:[o&&t(k,{mr:2,children:t(g,{fontWeight:"medium",styles:{lineHeight:1},children:o})}),t("button",{...P(p,f),className:S(x({px:.5,h:5,width:11,_disabled:{opacity:.3,pointerEvents:"none"},bg:e.isSelected?"brand.base":"neutral.primary",_hover:{bg:e.isSelected?"brand.base":"ink.70",_dark:{bg:e.isSelected?"brand.base":"slate.4"}},transition:"background-color 0.2s ease",rounded:"full",outlineColor:u?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer"}),a),children:t("span",{className:w({h:4,w:4,bg:"paper",position:"relative",left:e.isSelected?6:0,transition:"left 0.2s ease"})})})]})});s.displayName="Switch";export{s as default};
|
|
2
2
|
//# sourceMappingURL=switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Flex alignItems=\"center\">\n {label && (\n <Box mr={2}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </Box>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n
|
|
1
|
+
{"version":3,"file":"switch.js","sources":["../../../../src/components/primitives/switch.tsx"],"sourcesContent":["import Text from '@components/primitives/text';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport { Flex } from '@styled/jsx/flex';\nimport { circle } from '@styled/patterns';\nimport { forwardRef, useRef } from 'react';\nimport { mergeProps, useFocusRing, useToggleButton, type AriaToggleButtonProps } from 'react-aria';\n\nexport type SwitchProps = AriaToggleButtonProps & {\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n className?: string;\n};\n\nconst Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, forwardedRef) => {\n const { checked, disabled = false, label, className, ...otherProps } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const state = useToggleState({ ...props, isSelected: checked });\n\n const { buttonProps } = useToggleButton(\n { ...otherProps, isDisabled: disabled },\n state,\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <Flex alignItems=\"center\">\n {label && (\n <Box mr={2}>\n <Text fontWeight=\"medium\" styles={{ lineHeight: 1 }}>\n {label}\n </Text>\n </Box>\n )}\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={cx(\n css({\n px: 0.5,\n h: 5,\n width: 11,\n _disabled: {\n opacity: 0.3,\n pointerEvents: 'none',\n },\n bg: state.isSelected ? 'brand.base' : 'neutral.primary',\n _hover: {\n bg: !state.isSelected ? 'ink.70' : 'brand.base',\n _dark: {\n bg: !state.isSelected ? 'slate.4' : 'brand.base',\n },\n },\n transition: 'background-color 0.2s ease',\n rounded: 'full',\n outlineColor: isFocusVisible ? 'brand.base' : 'transparent',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n }),\n className,\n )}\n >\n <span\n className={circle({\n h: 4,\n w: 4,\n bg: 'paper',\n position: 'relative',\n left: state.isSelected ? 6 : 0,\n transition: 'left 0.2s ease',\n })}\n />\n </button>\n </Flex>\n );\n});\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"],"names":["Switch","forwardRef","props","forwardedRef","checked","disabled","label","className","otherProps","internalRef","useRef","ref","state","useToggleState","buttonProps","useToggleButton","isFocusVisible","focusProps","useFocusRing","_jsxs","Flex","_jsx","Box","Text","mergeProps","cx","css","circle"],"mappings":"saAgBMA,MAAAA,EAASC,EAA2C,CAACC,EAAOC,IAAgB,CAChF,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAW,GAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAY,EAAGN,EAEjEO,EAAcC,EAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtBG,EAAQC,EAAe,CAAE,GAAGX,EAAO,WAAYE,CAAO,CAAE,EAExD,CAAE,YAAAU,CAAW,EAAKC,EACtB,CAAE,GAAGP,EAAY,WAAYH,CAAU,EACvCO,EACAD,CAAyC,EAErC,CAAE,eAAAK,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,EAACC,EAAI,CAAC,WAAW,SACd,SAAA,CAAAd,GACCe,EAACC,EAAG,CAAC,GAAI,EAAC,SACRD,EAACE,EAAI,CAAC,WAAW,SAAS,OAAQ,CAAE,WAAY,CAAC,WAC9CjB,CAAK,CAAA,CAEJ,CAAA,EAERe,EAAA,SAAA,CAAA,GACMG,EAAWV,EAAaG,CAAU,EACtC,UAAWQ,EACTC,EAAI,CACF,GAAI,GACJ,EAAG,EACH,MAAO,GACP,UAAW,CACT,QAAS,GACT,cAAe,MAChB,EACD,GAAId,EAAM,WAAa,aAAe,kBACtC,OAAQ,CACN,GAAKA,EAAM,WAAwB,aAAX,SACxB,MAAO,CACL,GAAKA,EAAM,WAAyB,aAAZ,SACzB,CACF,EACD,WAAY,6BACZ,QAAS,OACT,aAAcI,EAAiB,aAAe,cAC9C,aAAc,QACd,aAAc,QACd,cAAe,GACf,OAAQ,UACT,EACDT,CAAS,EACV,SAEDc,UACE,UAAWM,EAAO,CAChB,EAAG,EACH,EAAG,EACH,GAAI,QACJ,SAAU,WACV,KAAMf,EAAM,WAAa,EAAI,EAC7B,WAAY,gBACb,CAAA,CACD,CAAA,CAAA,CAAA,CACK,CACJ,CAAA,CAEX,CAAC,EAEDZ,EAAO,YAAc"}
|
|
@@ -4,11 +4,13 @@ export type SwitchProps = AriaToggleButtonProps & {
|
|
|
4
4
|
checked?: boolean;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
label?: string;
|
|
7
|
+
className?: string;
|
|
7
8
|
};
|
|
8
9
|
declare const Switch: import("react").ForwardRefExoticComponent<AriaToggleButtonProps<"button"> & {
|
|
9
10
|
checked?: boolean | undefined;
|
|
10
11
|
disabled?: boolean | undefined;
|
|
11
12
|
label?: string | undefined;
|
|
13
|
+
className?: string | undefined;
|
|
12
14
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
13
15
|
export default Switch;
|
|
14
16
|
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/switch.tsx"],"names":[],"mappings":";AAOA,OAAO,EAA6C,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnG,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/switch.tsx"],"names":[],"mappings":";AAOA,OAAO,EAA6C,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnG,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,MAAM;;;;;qDAkEV,CAAC;AAIH,eAAe,MAAM,CAAC"}
|