@tamagui/switch 1.0.1-beta.158 → 1.0.1-beta.161
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/Switch.js.map +1 -1
- package/dist/esm/Switch.js.map +1 -1
- package/dist/jsx/Switch.js.map +1 -1
- package/package.json +9 -9
- package/src/Switch.tsx +2 -2
- package/types/Switch.d.ts +137 -137
package/dist/cjs/Switch.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Switch.tsx"],
|
|
4
|
-
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
4
|
+
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwEQ;AArER,gCAA4B;AAC5B,0BAAgC;AAChC,kBASO;AACP,4BAAgD;AAChD,uBAAkC;AAClC,mBAAgC;AAChC,oBAAuC;AACvC,oCAAqC;AACrC,YAAuB;AAGvB,MAAM,cAAc;AAGpB,MAAM,kBAAkB,CAAC,QAAoB,KAAK,UAAM,kCAAiB,qBAAQ,GAAG,CAAC,IAAI,IAAI;AAC7F,MAAM,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI;AAEnE,MAAM,oBAAgB,0CAAmB,WAAW;AACpD,MAAM,CAAC,mBAAmB,IAAI;AACvB,MAAM,oBAAoB,cAAc;AAE/C,MAAM,CAAC,gBAAgB,gBAAgB,IAAI,oBAIxC,WAAW;AAMd,MAAM,aAAa;AAEZ,MAAM,uBAAmB,oBAAO,8BAAgB;AAAA,EACrD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,SAAS;AAAA,QACnB,QAAQ,gBAAgB,GAAG;AAAA,QAC3B,OAAO,gBAAgB,GAAG;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAIM,MAAM,cAAc,iBAAiB;AAAA,EAC1C,MAAM;AAAA,IACJ,CAAC,OAAgD,iBAAiB;AAChE,YAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,YAAM,EAAE,MAAM,UAAU,QAAQ,IAAI,iBAAiB,YAAY,aAAa;AAC9E,aACE,4CAAC;AAAA,QACC;AAAA,QACA,cAAY,SAAS,OAAO;AAAA,QAC5B,iBAAe,WAAW,KAAK;AAAA,QAC9B,GAAG;AAAA,QACJ,GACE,cACI,8BAAiB,eAAe,IAAI,CAAC,QAAI,8BAAiB,gBAAgB,IAAI,CAAC,IAC/E;AAAA,QAEN,KAAK;AAAA,OACP;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,kBAAc,oBAAO,sBAAQ;AAAA,EACxC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA,EAEjB,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,aAAS,kBAAK,gBAAgB,GAAG,GAAG,KAAK,CAAC;AAChD,cAAM,YAAQ,kBAAK,eAAe,GAAG,GAAG,KAAK,CAAC;AAC9C,eAAO;AAAA,UACL;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAcM,MAAM,aAAS;AAAA,EACpB,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,CAAC,OAA2C,iBAAiB;AAC3D,cAAM;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,UACA,OAAO;AAAA,aACJ;AAAA,QACL,IAAI;AACJ,cAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AACzE,cAAM,mBAAe,qCAAgB,cAAc,CAAC,SAAS,UAAU,IAAW,CAAC;AACnF,cAAM,cAAU,8BAAgB,MAAM;AACtC,cAAM,aAAa,kBAAkB;AACrC,cAAM,mCAAmC,MAAM,OAAO,KAAK;AAE3D,cAAM,gBAAgB,oBAAS,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI,OAAQ;AAClF,cAAM,CAAC,UAAU,OAAO,UAAU,QAAI,oDAAqB;AAAA,UACzD,MAAM;AAAA,UACN,aAAa,kBAAkB;AAAA,UAC/B,UAAU;AAAA,QACZ,CAAC;AAED,YAAI,CAAC,mBAAO;AAEV,gBAAM,UAAU,MAAM;AACpB,gBAAI,CAAC,MAAM;AAAI;AACf,uBAAO,oCAAkB,MAAM,IAAI;AAAA,cACjC,OAAO,MAAM;AACX,2BAAW,CAAC,MAAM,CAAC,CAAC;AAAA,cACtB;AAAA,YACF,CAAC;AAAA,UACH,GAAG,CAAC,MAAM,IAAI,UAAU,CAAC;AAAA,QAC3B;AAEA,eACE,6CAAC;AAAA,UAAe,OAAO;AAAA,UAAe;AAAA,UAAkB;AAAA,UAAoB;AAAA,UAC1E;AAAA,wDAAC;AAAA,cACC;AAAA,cAEA,MAAK;AAAA,cACL,gBAAc;AAAA,cACd,mBAAiB;AAAA,cACjB,iBAAe;AAAA,cACf,cAAY,SAAS,OAAO;AAAA,cAC5B,iBAAe,WAAW,KAAK;AAAA,cAC/B;AAAA,cACA,OAAO,UAAU,WAAW;AAAA,cAC5B,cAAY;AAAA,cAEZ,UAAU,WAAW,SAAY;AAAA,cAEjC;AAAA,cACC,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,SAAS,CAAC,UAAU;AAxMlC;AAyMgB,4BAAM,YAAN,+BAAgB;AAChB,2BAAW,CAAC,gBAAgB,CAAC,WAAW;AACxC,oBAAI,qBAAS,eAAe;AAC1B,mDAAiC,UAAU,MAAM,qBAAqB;AAItE,sBAAI,CAAC,iCAAiC;AAAS,0BAAM,gBAAgB;AAAA,gBACvE;AAAA,cACF;AAAA,aACF;AAAA,YACC,qBAAS,iBACR,4CAAC;AAAA,cACC,SAAS;AAAA,cACT,SAAS,CAAC,iCAAiC;AAAA,cAC3C;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAIA,OAAO,EAAE,WAAW,oBAAoB;AAAA,aAC1C;AAAA;AAAA,SAEJ;AAAA,MAEJ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,EACT;AACF;AAYA,MAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,SAAS,UAAU,SAAS,WAAW,IAAI;AAC5D,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,kBAAc,uCAAY,OAAO;AAIvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO,yBAAyB,YAAY,SAAS;AACxE,UAAM,aAAa,WAAW;AAC9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,iBAAW,KAAK,OAAO,OAAO;AAC9B,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,4CAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAW;AAAA,IACX,gBAAgB;AAAA,IACf,GAAG;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,GAAG,MAAM;AAAA,MAET,UAAU;AAAA,MACV,eAAe;AAAA,MACf,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,GACF;AAEJ;AAEA,SAAS,SAAS,SAAkB;AAClC,SAAO,UAAU,YAAY;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Switch.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Switch.tsx"],
|
|
4
|
-
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
4
|
+
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
5
5
|
"mappings": "AAwEQ,cA6GE,YA7GF;AArER,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAsB,0BAA0B;AAChD,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB,cAAc;AACvC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAGvB,MAAM,cAAc;AAGpB,MAAM,kBAAkB,CAAC,QAAoB,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,IAAI;AAC7F,MAAM,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI;AAEnE,MAAM,gBAAgB,mBAAmB,WAAW;AACpD,MAAM,CAAC,mBAAmB,IAAI;AACvB,MAAM,oBAAoB,cAAc;AAE/C,MAAM,CAAC,gBAAgB,gBAAgB,IAAI,oBAIxC,WAAW;AAMd,MAAM,aAAa;AAEZ,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EACrD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,SAAS;AAAA,QACnB,QAAQ,gBAAgB,GAAG;AAAA,QAC3B,OAAO,gBAAgB,GAAG;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAIM,MAAM,cAAc,iBAAiB;AAAA,EAC1C,MAAM;AAAA,IACJ,CAAC,OAAgD,iBAAiB;AAChE,YAAM,EAAE,kBAAkB,WAAW,IAAI;AACzC,YAAM,EAAE,MAAM,UAAU,QAAQ,IAAI,iBAAiB,YAAY,aAAa;AAC9E,aACE,oBAAC;AAAA,QACC;AAAA,QACA,cAAY,SAAS,OAAO;AAAA,QAC5B,iBAAe,WAAW,KAAK;AAAA,QAC9B,GAAG;AAAA,QACJ,GACE,UACI,iBAAiB,eAAe,IAAI,CAAC,IAAI,iBAAiB,gBAAgB,IAAI,CAAC,IAC/E;AAAA,QAEN,KAAK;AAAA,OACP;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,YAAY,cAAc;AAMnB,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA,EAEjB,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,SAAS,KAAK,gBAAgB,GAAG,GAAG,KAAK,CAAC;AAChD,cAAM,QAAQ,KAAK,eAAe,GAAG,GAAG,KAAK,CAAC;AAC9C,eAAO;AAAA,UACL;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAcM,MAAM,SAAS;AAAA,EACpB,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,CAAC,OAA2C,iBAAiB;AAC3D,cAAM;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,UACA,OAAO;AAAA,aACJ;AAAA,QACL,IAAI;AACJ,cAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AACzE,cAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAW,CAAC;AACnF,cAAM,UAAU,gBAAgB,MAAM;AACtC,cAAM,aAAa,kBAAkB;AACrC,cAAM,mCAAmC,MAAM,OAAO,KAAK;AAE3D,cAAM,gBAAgB,QAAS,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI,OAAQ;AAClF,cAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,UACzD,MAAM;AAAA,UACN,aAAa,kBAAkB;AAAA,UAC/B,UAAU;AAAA,QACZ,CAAC;AAED,YAAI,CAAC,OAAO;AAEV,gBAAM,UAAU,MAAM;AACpB,gBAAI,CAAC,MAAM;AAAI;AACf,mBAAO,kBAAkB,MAAM,IAAI;AAAA,cACjC,OAAO,MAAM;AACX,2BAAW,CAAC,MAAM,CAAC,CAAC;AAAA,cACtB;AAAA,YACF,CAAC;AAAA,UACH,GAAG,CAAC,MAAM,IAAI,UAAU,CAAC;AAAA,QAC3B;AAEA,eACE,qBAAC;AAAA,UAAe,OAAO;AAAA,UAAe;AAAA,UAAkB;AAAA,UAAoB;AAAA,UAC1E;AAAA,gCAAC;AAAA,cACC;AAAA,cAEA,MAAK;AAAA,cACL,gBAAc;AAAA,cACd,mBAAiB;AAAA,cACjB,iBAAe;AAAA,cACf,cAAY,SAAS,OAAO;AAAA,cAC5B,iBAAe,WAAW,KAAK;AAAA,cAC/B;AAAA,cACA,OAAO,UAAU,WAAW;AAAA,cAC5B,cAAY;AAAA,cAEZ,UAAU,WAAW,SAAY;AAAA,cAEjC;AAAA,cACC,GAAG;AAAA,cACJ,KAAK;AAAA,cACL,SAAS,CAAC,UAAU;AAxMlC;AAyMgB,4BAAM,YAAN,+BAAgB;AAChB,2BAAW,CAAC,gBAAgB,CAAC,WAAW;AACxC,oBAAI,SAAS,eAAe;AAC1B,mDAAiC,UAAU,MAAM,qBAAqB;AAItE,sBAAI,CAAC,iCAAiC;AAAS,0BAAM,gBAAgB;AAAA,gBACvE;AAAA,cACF;AAAA,aACF;AAAA,YACC,SAAS,iBACR,oBAAC;AAAA,cACC,SAAS;AAAA,cACT,SAAS,CAAC,iCAAiC;AAAA,cAC3C;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAIA,OAAO,EAAE,WAAW,oBAAoB;AAAA,aAC1C;AAAA;AAAA,SAEJ;AAAA,MAEJ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,OAAO;AAAA,EACT;AACF;AAYA,MAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,SAAS,UAAU,SAAS,WAAW,IAAI;AAC5D,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO,yBAAyB,YAAY,SAAS;AACxE,UAAM,aAAa,WAAW;AAC9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,iBAAW,KAAK,OAAO,OAAO;AAC9B,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,oBAAC;AAAA,IACC,MAAK;AAAA,IACL,eAAW;AAAA,IACX,gBAAgB;AAAA,IACf,GAAG;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,GAAG,MAAM;AAAA,MAET,UAAU;AAAA,MACV,eAAe;AAAA,MACf,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,GACF;AAEJ;AAEA,SAAS,SAAS,SAAkB;AAClC,SAAO,UAAU,YAAY;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Switch.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Switch.tsx"],
|
|
4
|
-
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n },\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
4
|
+
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n calc,\n getSize,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n backgroundColor: '$background',\n borderRadius: 1000,\n\n variants: {\n size: {\n '...size': (val) => ({\n height: getSwitchHeight(val),\n width: getSwitchHeight(val),\n }),\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, ...thumbProps } = props\n const { size, disabled, checked } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n return (\n <SwitchThumbFrame\n size={size}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: 'Switch',\n tag: 'button',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n\n variants: {\n size: {\n '...size': (val) => {\n const height = calc(getSwitchHeight(val), '+', 4)\n const width = calc(getSwitchWidth(val), '+', 4)\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$4',\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n <SwitchFrame\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/switch",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.161",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -24,13 +24,13 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
27
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/focusable": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/label": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
27
|
+
"@tamagui/compose-refs": "^1.0.1-beta.161",
|
|
28
|
+
"@tamagui/core": "^1.0.1-beta.161",
|
|
29
|
+
"@tamagui/create-context": "^1.0.1-beta.161",
|
|
30
|
+
"@tamagui/focusable": "^1.0.1-beta.161",
|
|
31
|
+
"@tamagui/label": "^1.0.1-beta.161",
|
|
32
|
+
"@tamagui/stacks": "^1.0.1-beta.161",
|
|
33
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.161"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "*",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"react-native": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
41
|
+
"@tamagui/build": "^1.0.1-beta.161",
|
|
42
42
|
"@types/react-native": "^0.69.2",
|
|
43
43
|
"react": "*",
|
|
44
44
|
"react-dom": "*",
|
package/src/Switch.tsx
CHANGED
|
@@ -55,7 +55,7 @@ export const SwitchThumbFrame = styled(ThemeableStack, {
|
|
|
55
55
|
width: getSwitchHeight(val),
|
|
56
56
|
}),
|
|
57
57
|
},
|
|
58
|
-
},
|
|
58
|
+
} as const,
|
|
59
59
|
|
|
60
60
|
defaultVariants: {
|
|
61
61
|
size: '$4',
|
|
@@ -117,7 +117,7 @@ export const SwitchFrame = styled(XStack, {
|
|
|
117
117
|
}
|
|
118
118
|
},
|
|
119
119
|
},
|
|
120
|
-
},
|
|
120
|
+
} as const,
|
|
121
121
|
|
|
122
122
|
defaultVariants: {
|
|
123
123
|
size: '$4',
|
package/types/Switch.d.ts
CHANGED
|
@@ -6,151 +6,151 @@ export declare const SwitchThumbFrame: import("@tamagui/core").TamaguiComponent<
|
|
|
6
6
|
readonly fullscreen?: boolean | undefined;
|
|
7
7
|
readonly elevation?: SizeTokens | undefined;
|
|
8
8
|
} & {
|
|
9
|
-
fontFamily?: unknown;
|
|
10
|
-
backgrounded?: boolean | undefined;
|
|
11
|
-
radiused?: boolean | undefined;
|
|
12
|
-
hoverTheme?: boolean | undefined;
|
|
13
|
-
pressTheme?: boolean | undefined;
|
|
14
|
-
focusTheme?: boolean | undefined;
|
|
15
|
-
circular?: boolean | undefined;
|
|
16
|
-
padded?: boolean | undefined;
|
|
17
|
-
elevate?: boolean | undefined;
|
|
18
|
-
bordered?: number | boolean | undefined;
|
|
19
|
-
transparent?: boolean | undefined;
|
|
20
|
-
chromeless?: boolean | "all" | undefined;
|
|
9
|
+
readonly fontFamily?: unknown;
|
|
10
|
+
readonly backgrounded?: boolean | undefined;
|
|
11
|
+
readonly radiused?: boolean | undefined;
|
|
12
|
+
readonly hoverTheme?: boolean | undefined;
|
|
13
|
+
readonly pressTheme?: boolean | undefined;
|
|
14
|
+
readonly focusTheme?: boolean | undefined;
|
|
15
|
+
readonly circular?: boolean | undefined;
|
|
16
|
+
readonly padded?: boolean | undefined;
|
|
17
|
+
readonly elevate?: boolean | undefined;
|
|
18
|
+
readonly bordered?: number | boolean | undefined;
|
|
19
|
+
readonly transparent?: boolean | undefined;
|
|
20
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
21
21
|
}, "size"> & {
|
|
22
|
-
size?: SizeTokens | undefined;
|
|
22
|
+
readonly size?: SizeTokens | undefined;
|
|
23
23
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
24
24
|
readonly fullscreen?: boolean | undefined;
|
|
25
25
|
readonly elevation?: SizeTokens | undefined;
|
|
26
26
|
} & {
|
|
27
|
-
fontFamily?: unknown;
|
|
28
|
-
backgrounded?: boolean | undefined;
|
|
29
|
-
radiused?: boolean | undefined;
|
|
30
|
-
hoverTheme?: boolean | undefined;
|
|
31
|
-
pressTheme?: boolean | undefined;
|
|
32
|
-
focusTheme?: boolean | undefined;
|
|
33
|
-
circular?: boolean | undefined;
|
|
34
|
-
padded?: boolean | undefined;
|
|
35
|
-
elevate?: boolean | undefined;
|
|
36
|
-
bordered?: number | boolean | undefined;
|
|
37
|
-
transparent?: boolean | undefined;
|
|
38
|
-
chromeless?: boolean | "all" | undefined;
|
|
27
|
+
readonly fontFamily?: unknown;
|
|
28
|
+
readonly backgrounded?: boolean | undefined;
|
|
29
|
+
readonly radiused?: boolean | undefined;
|
|
30
|
+
readonly hoverTheme?: boolean | undefined;
|
|
31
|
+
readonly pressTheme?: boolean | undefined;
|
|
32
|
+
readonly focusTheme?: boolean | undefined;
|
|
33
|
+
readonly circular?: boolean | undefined;
|
|
34
|
+
readonly padded?: boolean | undefined;
|
|
35
|
+
readonly elevate?: boolean | undefined;
|
|
36
|
+
readonly bordered?: number | boolean | undefined;
|
|
37
|
+
readonly transparent?: boolean | undefined;
|
|
38
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
39
39
|
}, "size"> & {
|
|
40
|
-
size?: SizeTokens | undefined;
|
|
40
|
+
readonly size?: SizeTokens | undefined;
|
|
41
41
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
42
42
|
readonly fullscreen?: boolean | undefined;
|
|
43
43
|
readonly elevation?: SizeTokens | undefined;
|
|
44
44
|
} & {
|
|
45
|
-
fontFamily?: unknown;
|
|
46
|
-
backgrounded?: boolean | undefined;
|
|
47
|
-
radiused?: boolean | undefined;
|
|
48
|
-
hoverTheme?: boolean | undefined;
|
|
49
|
-
pressTheme?: boolean | undefined;
|
|
50
|
-
focusTheme?: boolean | undefined;
|
|
51
|
-
circular?: boolean | undefined;
|
|
52
|
-
padded?: boolean | undefined;
|
|
53
|
-
elevate?: boolean | undefined;
|
|
54
|
-
bordered?: number | boolean | undefined;
|
|
55
|
-
transparent?: boolean | undefined;
|
|
56
|
-
chromeless?: boolean | "all" | undefined;
|
|
45
|
+
readonly fontFamily?: unknown;
|
|
46
|
+
readonly backgrounded?: boolean | undefined;
|
|
47
|
+
readonly radiused?: boolean | undefined;
|
|
48
|
+
readonly hoverTheme?: boolean | undefined;
|
|
49
|
+
readonly pressTheme?: boolean | undefined;
|
|
50
|
+
readonly focusTheme?: boolean | undefined;
|
|
51
|
+
readonly circular?: boolean | undefined;
|
|
52
|
+
readonly padded?: boolean | undefined;
|
|
53
|
+
readonly elevate?: boolean | undefined;
|
|
54
|
+
readonly bordered?: number | boolean | undefined;
|
|
55
|
+
readonly transparent?: boolean | undefined;
|
|
56
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
57
57
|
}, "size"> & {
|
|
58
|
-
size?: SizeTokens | undefined;
|
|
58
|
+
readonly size?: SizeTokens | undefined;
|
|
59
59
|
}>>, import("@tamagui/core").TamaguiElement, import("@tamagui/core").StackPropsBase, {
|
|
60
60
|
readonly fullscreen?: boolean | undefined;
|
|
61
61
|
readonly elevation?: SizeTokens | undefined;
|
|
62
62
|
} & {
|
|
63
|
-
fontFamily?: unknown;
|
|
64
|
-
backgrounded?: boolean | undefined;
|
|
65
|
-
radiused?: boolean | undefined;
|
|
66
|
-
hoverTheme?: boolean | undefined;
|
|
67
|
-
pressTheme?: boolean | undefined;
|
|
68
|
-
focusTheme?: boolean | undefined;
|
|
69
|
-
circular?: boolean | undefined;
|
|
70
|
-
padded?: boolean | undefined;
|
|
71
|
-
elevate?: boolean | undefined;
|
|
72
|
-
bordered?: number | boolean | undefined;
|
|
73
|
-
transparent?: boolean | undefined;
|
|
74
|
-
chromeless?: boolean | "all" | undefined;
|
|
63
|
+
readonly fontFamily?: unknown;
|
|
64
|
+
readonly backgrounded?: boolean | undefined;
|
|
65
|
+
readonly radiused?: boolean | undefined;
|
|
66
|
+
readonly hoverTheme?: boolean | undefined;
|
|
67
|
+
readonly pressTheme?: boolean | undefined;
|
|
68
|
+
readonly focusTheme?: boolean | undefined;
|
|
69
|
+
readonly circular?: boolean | undefined;
|
|
70
|
+
readonly padded?: boolean | undefined;
|
|
71
|
+
readonly elevate?: boolean | undefined;
|
|
72
|
+
readonly bordered?: number | boolean | undefined;
|
|
73
|
+
readonly transparent?: boolean | undefined;
|
|
74
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
75
75
|
} & {
|
|
76
|
-
size?: SizeTokens | undefined;
|
|
76
|
+
readonly size?: SizeTokens | undefined;
|
|
77
77
|
}>;
|
|
78
78
|
export declare type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>;
|
|
79
79
|
export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
80
80
|
readonly fullscreen?: boolean | undefined;
|
|
81
81
|
readonly elevation?: SizeTokens | undefined;
|
|
82
82
|
} & {
|
|
83
|
-
fontFamily?: unknown;
|
|
84
|
-
backgrounded?: boolean | undefined;
|
|
85
|
-
radiused?: boolean | undefined;
|
|
86
|
-
hoverTheme?: boolean | undefined;
|
|
87
|
-
pressTheme?: boolean | undefined;
|
|
88
|
-
focusTheme?: boolean | undefined;
|
|
89
|
-
circular?: boolean | undefined;
|
|
90
|
-
padded?: boolean | undefined;
|
|
91
|
-
elevate?: boolean | undefined;
|
|
92
|
-
bordered?: number | boolean | undefined;
|
|
93
|
-
transparent?: boolean | undefined;
|
|
94
|
-
chromeless?: boolean | "all" | undefined;
|
|
83
|
+
readonly fontFamily?: unknown;
|
|
84
|
+
readonly backgrounded?: boolean | undefined;
|
|
85
|
+
readonly radiused?: boolean | undefined;
|
|
86
|
+
readonly hoverTheme?: boolean | undefined;
|
|
87
|
+
readonly pressTheme?: boolean | undefined;
|
|
88
|
+
readonly focusTheme?: boolean | undefined;
|
|
89
|
+
readonly circular?: boolean | undefined;
|
|
90
|
+
readonly padded?: boolean | undefined;
|
|
91
|
+
readonly elevate?: boolean | undefined;
|
|
92
|
+
readonly bordered?: number | boolean | undefined;
|
|
93
|
+
readonly transparent?: boolean | undefined;
|
|
94
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
95
95
|
}, "size"> & {
|
|
96
|
-
size?: SizeTokens | undefined;
|
|
96
|
+
readonly size?: SizeTokens | undefined;
|
|
97
97
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
98
98
|
readonly fullscreen?: boolean | undefined;
|
|
99
99
|
readonly elevation?: SizeTokens | undefined;
|
|
100
100
|
} & {
|
|
101
|
-
fontFamily?: unknown;
|
|
102
|
-
backgrounded?: boolean | undefined;
|
|
103
|
-
radiused?: boolean | undefined;
|
|
104
|
-
hoverTheme?: boolean | undefined;
|
|
105
|
-
pressTheme?: boolean | undefined;
|
|
106
|
-
focusTheme?: boolean | undefined;
|
|
107
|
-
circular?: boolean | undefined;
|
|
108
|
-
padded?: boolean | undefined;
|
|
109
|
-
elevate?: boolean | undefined;
|
|
110
|
-
bordered?: number | boolean | undefined;
|
|
111
|
-
transparent?: boolean | undefined;
|
|
112
|
-
chromeless?: boolean | "all" | undefined;
|
|
101
|
+
readonly fontFamily?: unknown;
|
|
102
|
+
readonly backgrounded?: boolean | undefined;
|
|
103
|
+
readonly radiused?: boolean | undefined;
|
|
104
|
+
readonly hoverTheme?: boolean | undefined;
|
|
105
|
+
readonly pressTheme?: boolean | undefined;
|
|
106
|
+
readonly focusTheme?: boolean | undefined;
|
|
107
|
+
readonly circular?: boolean | undefined;
|
|
108
|
+
readonly padded?: boolean | undefined;
|
|
109
|
+
readonly elevate?: boolean | undefined;
|
|
110
|
+
readonly bordered?: number | boolean | undefined;
|
|
111
|
+
readonly transparent?: boolean | undefined;
|
|
112
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
113
113
|
}, "size"> & {
|
|
114
|
-
size?: SizeTokens | undefined;
|
|
114
|
+
readonly size?: SizeTokens | undefined;
|
|
115
115
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
116
116
|
readonly fullscreen?: boolean | undefined;
|
|
117
117
|
readonly elevation?: SizeTokens | undefined;
|
|
118
118
|
} & {
|
|
119
|
-
fontFamily?: unknown;
|
|
120
|
-
backgrounded?: boolean | undefined;
|
|
121
|
-
radiused?: boolean | undefined;
|
|
122
|
-
hoverTheme?: boolean | undefined;
|
|
123
|
-
pressTheme?: boolean | undefined;
|
|
124
|
-
focusTheme?: boolean | undefined;
|
|
125
|
-
circular?: boolean | undefined;
|
|
126
|
-
padded?: boolean | undefined;
|
|
127
|
-
elevate?: boolean | undefined;
|
|
128
|
-
bordered?: number | boolean | undefined;
|
|
129
|
-
transparent?: boolean | undefined;
|
|
130
|
-
chromeless?: boolean | "all" | undefined;
|
|
119
|
+
readonly fontFamily?: unknown;
|
|
120
|
+
readonly backgrounded?: boolean | undefined;
|
|
121
|
+
readonly radiused?: boolean | undefined;
|
|
122
|
+
readonly hoverTheme?: boolean | undefined;
|
|
123
|
+
readonly pressTheme?: boolean | undefined;
|
|
124
|
+
readonly focusTheme?: boolean | undefined;
|
|
125
|
+
readonly circular?: boolean | undefined;
|
|
126
|
+
readonly padded?: boolean | undefined;
|
|
127
|
+
readonly elevate?: boolean | undefined;
|
|
128
|
+
readonly bordered?: number | boolean | undefined;
|
|
129
|
+
readonly transparent?: boolean | undefined;
|
|
130
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
131
131
|
}, "size"> & {
|
|
132
|
-
size?: SizeTokens | undefined;
|
|
132
|
+
readonly size?: SizeTokens | undefined;
|
|
133
133
|
}>> & React.RefAttributes<HTMLSpanElement>>;
|
|
134
134
|
export declare const SwitchFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
135
135
|
readonly fullscreen?: boolean | undefined;
|
|
136
136
|
readonly elevation?: SizeTokens | undefined;
|
|
137
137
|
}, "size"> & {
|
|
138
|
-
size?: SizeTokens | undefined;
|
|
138
|
+
readonly size?: SizeTokens | undefined;
|
|
139
139
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
140
140
|
readonly fullscreen?: boolean | undefined;
|
|
141
141
|
readonly elevation?: SizeTokens | undefined;
|
|
142
142
|
}, "size"> & {
|
|
143
|
-
size?: SizeTokens | undefined;
|
|
143
|
+
readonly size?: SizeTokens | undefined;
|
|
144
144
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
145
145
|
readonly fullscreen?: boolean | undefined;
|
|
146
146
|
readonly elevation?: SizeTokens | undefined;
|
|
147
147
|
}, "size"> & {
|
|
148
|
-
size?: SizeTokens | undefined;
|
|
148
|
+
readonly size?: SizeTokens | undefined;
|
|
149
149
|
}>>, import("@tamagui/core").TamaguiElement, import("@tamagui/core").StackPropsBase, {
|
|
150
150
|
readonly fullscreen?: boolean | undefined;
|
|
151
151
|
readonly elevation?: SizeTokens | undefined;
|
|
152
152
|
} & {
|
|
153
|
-
size?: SizeTokens | undefined;
|
|
153
|
+
readonly size?: SizeTokens | undefined;
|
|
154
154
|
}>;
|
|
155
155
|
declare type SwitchButtonProps = GetProps<typeof SwitchFrame>;
|
|
156
156
|
export declare type SwitchProps = SwitchButtonProps & {
|
|
@@ -166,17 +166,17 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<import("react-
|
|
|
166
166
|
readonly fullscreen?: boolean | undefined;
|
|
167
167
|
readonly elevation?: SizeTokens | undefined;
|
|
168
168
|
}, "size"> & {
|
|
169
|
-
size?: SizeTokens | undefined;
|
|
169
|
+
readonly size?: SizeTokens | undefined;
|
|
170
170
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
171
171
|
readonly fullscreen?: boolean | undefined;
|
|
172
172
|
readonly elevation?: SizeTokens | undefined;
|
|
173
173
|
}, "size"> & {
|
|
174
|
-
size?: SizeTokens | undefined;
|
|
174
|
+
readonly size?: SizeTokens | undefined;
|
|
175
175
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
176
176
|
readonly fullscreen?: boolean | undefined;
|
|
177
177
|
readonly elevation?: SizeTokens | undefined;
|
|
178
178
|
}, "size"> & {
|
|
179
|
-
size?: SizeTokens | undefined;
|
|
179
|
+
readonly size?: SizeTokens | undefined;
|
|
180
180
|
}>> & {
|
|
181
181
|
labeledBy?: string | undefined;
|
|
182
182
|
name?: string | undefined;
|
|
@@ -190,56 +190,56 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<import("react-
|
|
|
190
190
|
readonly fullscreen?: boolean | undefined;
|
|
191
191
|
readonly elevation?: SizeTokens | undefined;
|
|
192
192
|
} & {
|
|
193
|
-
fontFamily?: unknown;
|
|
194
|
-
backgrounded?: boolean | undefined;
|
|
195
|
-
radiused?: boolean | undefined;
|
|
196
|
-
hoverTheme?: boolean | undefined;
|
|
197
|
-
pressTheme?: boolean | undefined;
|
|
198
|
-
focusTheme?: boolean | undefined;
|
|
199
|
-
circular?: boolean | undefined;
|
|
200
|
-
padded?: boolean | undefined;
|
|
201
|
-
elevate?: boolean | undefined;
|
|
202
|
-
bordered?: number | boolean | undefined;
|
|
203
|
-
transparent?: boolean | undefined;
|
|
204
|
-
chromeless?: boolean | "all" | undefined;
|
|
193
|
+
readonly fontFamily?: unknown;
|
|
194
|
+
readonly backgrounded?: boolean | undefined;
|
|
195
|
+
readonly radiused?: boolean | undefined;
|
|
196
|
+
readonly hoverTheme?: boolean | undefined;
|
|
197
|
+
readonly pressTheme?: boolean | undefined;
|
|
198
|
+
readonly focusTheme?: boolean | undefined;
|
|
199
|
+
readonly circular?: boolean | undefined;
|
|
200
|
+
readonly padded?: boolean | undefined;
|
|
201
|
+
readonly elevate?: boolean | undefined;
|
|
202
|
+
readonly bordered?: number | boolean | undefined;
|
|
203
|
+
readonly transparent?: boolean | undefined;
|
|
204
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
205
205
|
}, "size"> & {
|
|
206
|
-
size?: SizeTokens | undefined;
|
|
206
|
+
readonly size?: SizeTokens | undefined;
|
|
207
207
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
208
208
|
readonly fullscreen?: boolean | undefined;
|
|
209
209
|
readonly elevation?: SizeTokens | undefined;
|
|
210
210
|
} & {
|
|
211
|
-
fontFamily?: unknown;
|
|
212
|
-
backgrounded?: boolean | undefined;
|
|
213
|
-
radiused?: boolean | undefined;
|
|
214
|
-
hoverTheme?: boolean | undefined;
|
|
215
|
-
pressTheme?: boolean | undefined;
|
|
216
|
-
focusTheme?: boolean | undefined;
|
|
217
|
-
circular?: boolean | undefined;
|
|
218
|
-
padded?: boolean | undefined;
|
|
219
|
-
elevate?: boolean | undefined;
|
|
220
|
-
bordered?: number | boolean | undefined;
|
|
221
|
-
transparent?: boolean | undefined;
|
|
222
|
-
chromeless?: boolean | "all" | undefined;
|
|
211
|
+
readonly fontFamily?: unknown;
|
|
212
|
+
readonly backgrounded?: boolean | undefined;
|
|
213
|
+
readonly radiused?: boolean | undefined;
|
|
214
|
+
readonly hoverTheme?: boolean | undefined;
|
|
215
|
+
readonly pressTheme?: boolean | undefined;
|
|
216
|
+
readonly focusTheme?: boolean | undefined;
|
|
217
|
+
readonly circular?: boolean | undefined;
|
|
218
|
+
readonly padded?: boolean | undefined;
|
|
219
|
+
readonly elevate?: boolean | undefined;
|
|
220
|
+
readonly bordered?: number | boolean | undefined;
|
|
221
|
+
readonly transparent?: boolean | undefined;
|
|
222
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
223
223
|
}, "size"> & {
|
|
224
|
-
size?: SizeTokens | undefined;
|
|
224
|
+
readonly size?: SizeTokens | undefined;
|
|
225
225
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
|
|
226
226
|
readonly fullscreen?: boolean | undefined;
|
|
227
227
|
readonly elevation?: SizeTokens | undefined;
|
|
228
228
|
} & {
|
|
229
|
-
fontFamily?: unknown;
|
|
230
|
-
backgrounded?: boolean | undefined;
|
|
231
|
-
radiused?: boolean | undefined;
|
|
232
|
-
hoverTheme?: boolean | undefined;
|
|
233
|
-
pressTheme?: boolean | undefined;
|
|
234
|
-
focusTheme?: boolean | undefined;
|
|
235
|
-
circular?: boolean | undefined;
|
|
236
|
-
padded?: boolean | undefined;
|
|
237
|
-
elevate?: boolean | undefined;
|
|
238
|
-
bordered?: number | boolean | undefined;
|
|
239
|
-
transparent?: boolean | undefined;
|
|
240
|
-
chromeless?: boolean | "all" | undefined;
|
|
229
|
+
readonly fontFamily?: unknown;
|
|
230
|
+
readonly backgrounded?: boolean | undefined;
|
|
231
|
+
readonly radiused?: boolean | undefined;
|
|
232
|
+
readonly hoverTheme?: boolean | undefined;
|
|
233
|
+
readonly pressTheme?: boolean | undefined;
|
|
234
|
+
readonly focusTheme?: boolean | undefined;
|
|
235
|
+
readonly circular?: boolean | undefined;
|
|
236
|
+
readonly padded?: boolean | undefined;
|
|
237
|
+
readonly elevate?: boolean | undefined;
|
|
238
|
+
readonly bordered?: number | boolean | undefined;
|
|
239
|
+
readonly transparent?: boolean | undefined;
|
|
240
|
+
readonly chromeless?: boolean | "all" | undefined;
|
|
241
241
|
}, "size"> & {
|
|
242
|
-
size?: SizeTokens | undefined;
|
|
242
|
+
readonly size?: SizeTokens | undefined;
|
|
243
243
|
}>> & React.RefAttributes<HTMLSpanElement>>;
|
|
244
244
|
};
|
|
245
245
|
export {};
|