@tamagui/demos 1.89.0-1706360676826 → 1.89.0

package/src/DialogDemo.tsx

@@ -1,5 +1,4 @@
 import { X } from '@tamagui/lucide-icons'
-import { useState } from 'react'
 import {
   Adapt,
   Button,
@@ -21,15 +20,8 @@ export function DialogDemo() {
 }
 
 function DialogInstance() {
-  const [open, setOpen] = useState(false)
-
   return (
-    <Dialog
-      modal
-      onOpenChange={(open) => {
-        setOpen(open)
-      }}
-    >
+    <Dialog modal>
       <Dialog.Trigger asChild>
         <Button>Show Dialog</Button>
       </Dialog.Trigger>
@@ -50,7 +42,7 @@ function DialogInstance() {
       <Dialog.Portal>
         <Dialog.Overlay
           key="overlay"
-          animation="quick"
+          animation="slow"
           opacity={0.5}
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
@@ -62,7 +54,7 @@ function DialogInstance() {
           key="content"
           animateOnly={['transform', 'opacity']}
           animation={[
-            'quick',
+            'quicker',
             {
               opacity: {
                 overshootClamping: true,

package/src/SelectDemo.tsx

@@ -6,19 +6,19 @@ import { LinearGradient } from 'tamagui/linear-gradient'
 
 export function SelectDemo() {
   return (
-    <YStack space>
-      <XStack ai="center" space>
-        <Label f={1} fb={0}>
+    <YStack gap="$4">
+      <XStack ai="center" gap="$4">
+        <Label htmlFor="select-demo-1" f={1} miw={80}>
           Custom
         </Label>
-        <SelectDemoItem />
+        <SelectDemoItem id="select-demo-1" />
       </XStack>
 
-      <XStack ai="center" space>
-        <Label f={1} fb={0}>
+      <XStack ai="center" gap="$4">
+        <Label htmlFor="select-demo-2" f={1} miw={80}>
           Native
         </Label>
-        <SelectDemoItem native />
+        <SelectDemoItem id="select-demo-2" native />
       </XStack>
     </YStack>
   )
@@ -28,13 +28,7 @@ export function SelectDemoItem(props: SelectProps) {
   const [val, setVal] = useState('apple')
 
   return (
-    <Select
-      id="food"
-      value={val}
-      onValueChange={setVal}
-      disablePreventBodyScroll
-      {...props}
-    >
+    <Select value={val} onValueChange={setVal} disablePreventBodyScroll {...props}>
       <Select.Trigger width={220} iconAfter={ChevronDown}>
         <Select.Value placeholder="Something" />
       </Select.Trigger>

package/src/SwitchDemo.tsx

@@ -3,23 +3,19 @@ import { Label, Separator, Switch, XStack, YStack, styled } from 'tamagui'
 
 export function SwitchDemo() {
   return (
-    <YStack width={200} alignItems="center" space="$3">
-      <XStack space="$3" $xs={{ flexDirection: 'column' }}>
+    <YStack width={200} alignItems="center" gap="$3">
+      <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
         <SwitchWithLabel size="$2" />
         <SwitchWithLabel size="$2" defaultChecked />
       </XStack>
-      <XStack space="$3" $xs={{ flexDirection: 'column' }}>
+      <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
         <SwitchWithLabel size="$3" />
         <SwitchWithLabel size="$3" defaultChecked />
       </XStack>
-      <XStack space="$3" $xs={{ flexDirection: 'column' }}>
+      <XStack gap="$3" $xs={{ flexDirection: 'column' }}>
         <SwitchWithLabel size="$4" />
         <SwitchWithLabel size="$4" defaultChecked />
       </XStack>
-      <XStack space="$3" $xs={{ flexDirection: 'column' }}>
-        <SwitchWithLabel size="$5" />
-        <SwitchWithLabel size="$5" defaultChecked />
-      </XStack>
     </YStack>
   )
 }
@@ -27,7 +23,7 @@ export function SwitchDemo() {
 export function SwitchWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {
   const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ''}}`
   return (
-    <XStack width={200} alignItems="center" space="$4">
+    <XStack width={200} alignItems="center" gap="$4">
       <Label
         paddingRight="$0"
         minWidth={90}

package/src/SwitchHeadlessDemo.tsx

@@ -0,0 +1,73 @@
+import type { SwitchProps as SwitchHeadlessProps } from '@tamagui/switch-headless'
+import { useSwitch } from '@tamagui/switch-headless'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+import type { View } from 'react-native'
+import { Animated, Pressable } from 'react-native'
+import { Label, XStack, YStack } from 'tamagui'
+
+export function SwitchHeadlessDemo() {
+  return (
+    <YStack width={200} alignItems="center" space="$3">
+      <XStack space="$3" alignItems="center">
+        <Label htmlFor="headless">Headless</Label>
+        <HeadlessSwitch defaultChecked id="headless" />
+      </XStack>
+    </YStack>
+  )
+}
+
+const HeadlessSwitch = forwardRef<View, SwitchHeadlessProps>((props, ref) => {
+  const [checked, setChecked] = useState(props.defaultChecked || false)
+  const { switchProps, switchRef, bubbleInput } = useSwitch(
+    props,
+    [checked, setChecked],
+    ref
+  )
+
+  const animation = useRef(new Animated.Value(checked ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(animation, {
+      toValue: checked ? 1 : 0,
+      duration: 100,
+      useNativeDriver: true,
+    }).start()
+  }, [checked])
+
+  return (
+    <>
+      <Pressable
+        style={{
+          width: 40,
+          height: 20,
+          borderRadius: 100,
+          backgroundColor: checked ? 'lightblue' : 'silver',
+        }}
+        ref={switchRef}
+        {...switchProps}
+      >
+        <Animated.View
+          style={[
+            {
+              backgroundColor: 'black',
+              borderRadius: 100,
+              width: 20,
+              height: 20,
+            },
+            {
+              transform: [
+                {
+                  translateX: animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 20],
+                  }),
+                },
+              ],
+            },
+          ]}
+        />
+      </Pressable>
+      {bubbleInput}
+    </>
+  )
+})

package/src/SwitchUnstyledDemo.tsx

@@ -0,0 +1,63 @@
+import { Stack, styled } from '@tamagui/core'
+import { SwitchStyledContext, createSwitch } from '@tamagui/switch'
+import { Label, XStack, YStack } from 'tamagui'
+
+const Frame = styled(Stack, {
+  context: SwitchStyledContext,
+  width: 40,
+  height: 20,
+  borderRadius: 20,
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: 'lightblue',
+      },
+      false: {
+        backgroundColor: 'silver',
+      },
+    },
+  } as const,
+  defaultVariants: {
+    checked: false,
+  },
+})
+
+const Thumb = styled(Stack, {
+  context: SwitchStyledContext,
+  width: 20,
+  height: 20,
+  backgroundColor: 'black',
+  borderRadius: 20,
+
+  variants: {
+    checked: {
+      true: {
+        opacity: 0.8,
+      },
+      false: {
+        opacity: 0.5,
+      },
+    },
+  } as const,
+})
+
+// TODO: remove ts-ignores
+export const Switch = createSwitch({
+  // @ts-ignore
+  Frame,
+  // @ts-ignore
+  Thumb,
+})
+
+export function SwitchUnstyledDemo() {
+  return (
+    <YStack width={200} alignItems="center" space="$3">
+      <XStack space="$3" alignItems="center">
+        <Label htmlFor="unstyled-switch">Unstyled</Label>
+        <Switch defaultChecked id="unstyled-switch">
+          <Switch.Thumb animation="quick" />
+        </Switch>
+      </XStack>
+    </YStack>
+  )
+}

package/src/ThemeBuilderDemo.tsx

@@ -5,23 +5,23 @@ export function ThemeBuilderDemo() {
   return (
     <YStack fullscreen ov="hidden">
       <XStack mah={200} y={-100} x={-50} rotate="-10deg">
-        <Col y={35} bc="$color9" />
-        <Col size="$8" y={30} bc="$color7" />
-        <Col size="$6" y={-50} bc="$color5" />
-        <Col size="$4" bc="$color3" />
-        <Col size="$2" bc="$color1" />
-        <Col size="$4" y={50} bc="$color3" />
-        <Col size="$6" y={80} bc="$color5" />
-        <Col size="$8" bc="$color7" />
-        <Col bc="$color9" />
-        <Col size="$8" bc="$color7" />
-        <Col size="$6" y={80} bc="$color5" />
-        <Col size="$4" y={50} bc="$color3" />
-        <Col size="$2" bc="$color1" />
-        <Col size="$4" bc="$color3" />
-        <Col size="$6" y={-50} bc="$color5" />
-        <Col size="$8" y={30} bc="$color7" />
-        <Col y={35} bc="$color9" />
+        <Col y={35} bg="$color9" />
+        <Col size="$8" y={30} bg="$color7" />
+        <Col size="$6" y={-50} bg="$color5" />
+        <Col size="$4" bg="$color3" />
+        <Col size="$2" bg="$color1" />
+        <Col size="$4" y={50} bg="$color3" />
+        <Col size="$6" y={80} bg="$color5" />
+        <Col size="$8" bg="$color7" />
+        <Col bg="$color9" />
+        <Col size="$8" bg="$color7" />
+        <Col size="$6" y={80} bg="$color5" />
+        <Col size="$4" y={50} bg="$color3" />
+        <Col size="$2" bg="$color1" />
+        <Col size="$4" bg="$color3" />
+        <Col size="$6" y={-50} bg="$color5" />
+        <Col size="$8" y={30} bg="$color7" />
+        <Col y={35} bg="$color9" />
       </XStack>
     </YStack>
   )

package/src/index.tsx

@@ -12,6 +12,8 @@ export * from './ButtonDemo'
 export * from './ThemeBuilderDemo'
 export * from './CardDemo'
 export * from './CheckboxDemo'
+export * from './CheckboxHeadlessDemo'
+export * from './CheckboxUnstyledDemo'
 export * from './ColorsDemo'
 export * from './DialogDemo'
 export * from './FormsDemo'
@@ -36,6 +38,8 @@ export * from './SliderDemo'
 export * from './SpinnerDemo'
 export * from './StacksDemo'
 export * from './SwitchDemo'
+export * from './SwitchHeadlessDemo'
+export * from './SwitchUnstyledDemo'
 export * from './TabsAdvancedDemo'
 export * from './TabsDemo'
 export * from './TextDemo'

package/types/CheckboxHeadlessDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function CheckboxHeadlessDemo(): JSX.Element;
+//# sourceMappingURL=CheckboxHeadlessDemo.d.ts.map

package/types/CheckboxHeadlessDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxHeadlessDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxHeadlessDemo.tsx"],"names":[],"mappings":";AAQA,wBAAgB,oBAAoB,gBAUnC"}

package/types/CheckboxUnstyledDemo.d.ts

@@ -0,0 +1,157 @@
+/// <reference types="react" />
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    size?: import("tamagui").SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    disabled?: boolean | undefined;
+    elevation?: number | import("tamagui").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
+    padded?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}>, "borderColor" | "outlineColor" | "shadowColor" | "native" | "display" | "x" | "y" | "perspective" | "scale" | "scaleX" | "scaleY" | "skewX" | "skewY" | "matrix" | "rotate" | "rotateY" | "rotateX" | "rotateZ" | "contain" | "touchAction" | "cursor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "pointerEvents" | "userSelect" | "space" | "spaceDirection" | "separator" | "animation" | "animateOnly" | "transformOrigin" | "backfaceVisibility" | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderCurve" | "borderEndColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderLeftColor" | "borderRadius" | "borderRightColor" | "borderStartColor" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTopColor" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "aspectRatio" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth" | "bottom" | "end" | "flex" | "flexBasis" | "flexDirection" | "rowGap" | "gap" | "columnGap" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "padding" | "paddingBottom" | "paddingEnd" | "paddingHorizontal" | "paddingLeft" | "paddingRight" | "paddingStart" | "paddingTop" | "paddingVertical" | "position" | "right" | "start" | "top" | "width" | "zIndex" | "direction" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformMatrix" | "rotation" | "translateX" | "translateY" | "children" | "style" | "hitSlop" | "id" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-labelledby" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-live" | "aria-modal" | "role" | "accessibilityLiveRegion" | "accessibilityLabelledBy" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "theme" | "target" | "asChild" | "dangerouslySetInnerHTML" | "debug" | "disabled" | "className" | "themeShallow" | "themeInverse" | "tag" | "group" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onHoverIn" | "onHoverOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onFocus" | "onBlur" | "hoverStyle" | "pressStyle" | "focusStyle" | "exitStyle" | "enterStyle" | "value" | "name" | "scaleIcon" | "checked" | "defaultChecked" | "required" | "onCheckedChange" | "labelledBy" | "scaleSize" | "sizeAdjust" | `$${string}` | `$${number}` | `$theme-${string}` | `$theme-${number}`> & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+    scaleIcon?: number | undefined;
+    scaleSize?: number | undefined;
+    sizeAdjust?: number | undefined;
+    native?: import("tamagui").NativeValue<"web"> | undefined;
+} & import("react").RefAttributes<import("tamagui").TamaguiElement>> & import("@tamagui/core").StaticComponentObject<Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    size?: import("tamagui").SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    disabled?: boolean | undefined;
+    elevation?: number | import("tamagui").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
+    padded?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}>, "borderColor" | "outlineColor" | "shadowColor" | "native" | "display" | "x" | "y" | "perspective" | "scale" | "scaleX" | "scaleY" | "skewX" | "skewY" | "matrix" | "rotate" | "rotateY" | "rotateX" | "rotateZ" | "contain" | "touchAction" | "cursor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "pointerEvents" | "userSelect" | "space" | "spaceDirection" | "separator" | "animation" | "animateOnly" | "transformOrigin" | "backfaceVisibility" | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderCurve" | "borderEndColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderLeftColor" | "borderRadius" | "borderRightColor" | "borderStartColor" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTopColor" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "aspectRatio" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth" | "bottom" | "end" | "flex" | "flexBasis" | "flexDirection" | "rowGap" | "gap" | "columnGap" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "padding" | "paddingBottom" | "paddingEnd" | "paddingHorizontal" | "paddingLeft" | "paddingRight" | "paddingStart" | "paddingTop" | "paddingVertical" | "position" | "right" | "start" | "top" | "width" | "zIndex" | "direction" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformMatrix" | "rotation" | "translateX" | "translateY" | "children" | "style" | "hitSlop" | "id" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-labelledby" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-live" | "aria-modal" | "role" | "accessibilityLiveRegion" | "accessibilityLabelledBy" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "theme" | "target" | "asChild" | "dangerouslySetInnerHTML" | "debug" | "disabled" | "className" | "themeShallow" | "themeInverse" | "tag" | "group" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onHoverIn" | "onHoverOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onFocus" | "onBlur" | "hoverStyle" | "pressStyle" | "focusStyle" | "exitStyle" | "enterStyle" | "value" | "name" | "scaleIcon" | "checked" | "defaultChecked" | "required" | "onCheckedChange" | "labelledBy" | "scaleSize" | "sizeAdjust" | `$${string}` | `$${number}` | `$theme-${string}` | `$theme-${number}`> & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+    scaleIcon?: number | undefined;
+    scaleSize?: number | undefined;
+    sizeAdjust?: number | undefined;
+    native?: import("tamagui").NativeValue<"web"> | undefined;
+}, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+    scaleIcon?: number | undefined;
+    scaleSize?: number | undefined;
+    sizeAdjust?: number | undefined;
+    native?: import("tamagui").NativeValue<"web"> | undefined;
+}, import("@tamagui/core").StackStyleBase, {
+    size?: import("tamagui").SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    disabled?: boolean | undefined;
+    elevation?: number | import("tamagui").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    hoverTheme?: boolean | undefined;
+    pressTheme?: boolean | undefined;
+    focusTheme?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: number | boolean | undefined;
+    backgrounded?: boolean | undefined;
+    radiused?: boolean | undefined;
+    padded?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}, import("@tamagui/core").StaticConfigPublic> & Omit<import("@tamagui/core").StaticConfigPublic, "staticConfig" | "extractable" | "styleable"> & {
+    __tama: [Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+        size?: import("tamagui").SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        elevation?: number | import("tamagui").SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        padded?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+    }>, "borderColor" | "outlineColor" | "shadowColor" | "native" | "display" | "x" | "y" | "perspective" | "scale" | "scaleX" | "scaleY" | "skewX" | "skewY" | "matrix" | "rotate" | "rotateY" | "rotateX" | "rotateZ" | "contain" | "touchAction" | "cursor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "pointerEvents" | "userSelect" | "space" | "spaceDirection" | "separator" | "animation" | "animateOnly" | "transformOrigin" | "backfaceVisibility" | "backgroundColor" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockStartColor" | "borderBottomColor" | "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderCurve" | "borderEndColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderLeftColor" | "borderRadius" | "borderRightColor" | "borderStartColor" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTopColor" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "aspectRatio" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth" | "bottom" | "end" | "flex" | "flexBasis" | "flexDirection" | "rowGap" | "gap" | "columnGap" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "left" | "margin" | "marginBottom" | "marginEnd" | "marginHorizontal" | "marginLeft" | "marginRight" | "marginStart" | "marginTop" | "marginVertical" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "overflow" | "padding" | "paddingBottom" | "paddingEnd" | "paddingHorizontal" | "paddingLeft" | "paddingRight" | "paddingStart" | "paddingTop" | "paddingVertical" | "position" | "right" | "start" | "top" | "width" | "zIndex" | "direction" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "transform" | "transformMatrix" | "rotation" | "translateX" | "translateY" | "children" | "style" | "hitSlop" | "id" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-labelledby" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-live" | "aria-modal" | "role" | "accessibilityLiveRegion" | "accessibilityLabelledBy" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "theme" | "target" | "asChild" | "dangerouslySetInnerHTML" | "debug" | "disabled" | "className" | "themeShallow" | "themeInverse" | "tag" | "group" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onHoverIn" | "onHoverOut" | "onMouseEnter" | "onMouseLeave" | "onMouseDown" | "onMouseUp" | "onFocus" | "onBlur" | "hoverStyle" | "pressStyle" | "focusStyle" | "exitStyle" | "enterStyle" | "value" | "name" | "scaleIcon" | "checked" | "defaultChecked" | "required" | "onCheckedChange" | "labelledBy" | "scaleSize" | "sizeAdjust" | `$${string}` | `$${number}` | `$theme-${string}` | `$theme-${number}`> & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+        scaleIcon?: number | undefined;
+        scaleSize?: number | undefined;
+        sizeAdjust?: number | undefined;
+        native?: import("tamagui").NativeValue<"web"> | undefined;
+    }, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & import("@tamagui/checkbox-headless").CheckboxExtraProps & {
+        scaleIcon?: number | undefined;
+        scaleSize?: number | undefined;
+        sizeAdjust?: number | undefined;
+        native?: import("tamagui").NativeValue<"web"> | undefined;
+    }, import("@tamagui/core").StackStyleBase, {
+        size?: import("tamagui").SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        elevation?: number | import("tamagui").SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        padded?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+    }, import("@tamagui/core").StaticConfigPublic];
+} & {
+    Indicator: import("tamagui").TamaguiComponent<Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | import("tamagui").SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        padded?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+    }>, keyof import("@tamagui/core").StackStyleBase | keyof import("tamagui").StackNonStyleProps | keyof import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> | `$${string}` | `$${number}` | `$theme-${string}` | `$theme-${number}` | keyof {
+        forceMount?: boolean | undefined;
+        disablePassStyles?: boolean | undefined;
+    }> & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & {
+        forceMount?: boolean | undefined;
+        disablePassStyles?: boolean | undefined;
+    }, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & import("tamagui").StackNonStyleProps & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {}>> & {
+        forceMount?: boolean | undefined;
+        disablePassStyles?: boolean | undefined;
+    }, import("@tamagui/core").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | import("tamagui").SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        hoverTheme?: boolean | undefined;
+        pressTheme?: boolean | undefined;
+        focusTheme?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: number | boolean | undefined;
+        backgrounded?: boolean | undefined;
+        radiused?: boolean | undefined;
+        padded?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+    }, import("@tamagui/core").StaticConfigPublic>;
+};
+export declare function CheckboxUnstyledDemo(): JSX.Element;
+//# sourceMappingURL=CheckboxUnstyledDemo.d.ts.map

package/types/CheckboxUnstyledDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxUnstyledDemo.d.ts","sourceRoot":"","sources":["../src/CheckboxUnstyledDemo.tsx"],"names":[],"mappings":";AA8BA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGnB,CAAA;AAEF,wBAAgB,oBAAoB,gBAanC"}

package/types/DialogDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogDemo.d.ts","sourceRoot":"","sources":["../src/DialogDemo.tsx"],"names":[],"mappings":";AAkBA,wBAAgB,UAAU,gBAEzB"}
+{"version":3,"file":"DialogDemo.d.ts","sourceRoot":"","sources":["../src/DialogDemo.tsx"],"names":[],"mappings":";AAiBA,wBAAgB,UAAU,gBAEzB"}

package/types/SelectDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1D,wBAAgB,UAAU,gBAkBzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,eAkIhD"}
+{"version":3,"file":"SelectDemo.d.ts","sourceRoot":"","sources":["../src/SelectDemo.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1D,wBAAgB,UAAU,gBAkBzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,eA4HhD"}

package/types/SwitchDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchDemo.d.ts","sourceRoot":"","sources":["../src/SwitchDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,wBAAgB,UAAU,gBAqBzB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,eAmBpF"}
+{"version":3,"file":"SwitchDemo.d.ts","sourceRoot":"","sources":["../src/SwitchDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,wBAAgB,UAAU,gBAiBzB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,eAmBpF"}

package/types/SwitchHeadlessDemo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function SwitchHeadlessDemo(): JSX.Element;
+//# sourceMappingURL=SwitchHeadlessDemo.d.ts.map

package/types/SwitchHeadlessDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchHeadlessDemo.d.ts","sourceRoot":"","sources":["../src/SwitchHeadlessDemo.tsx"],"names":[],"mappings":";AAOA,wBAAgB,kBAAkB,gBASjC"}