@tamagui/demos 1.61.2 → 1.62.0

package/dist/jsx/SelectDemo.native.js

@@ -0,0 +1,145 @@
+import { Check, ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import {
+  Adapt,
+  Label,
+  Select,
+  Sheet,
+  XStack,
+  YStack,
+  getFontSize
+} from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+function SelectDemo() {
+  return <YStack space>
+    <XStack ai="center" space>
+      <Label f={1} fb={0}>Custom</Label>
+      <SelectDemoItem />
+    </XStack>
+    <XStack ai="center" space>
+      <Label f={1} fb={0}>Native</Label>
+      <SelectDemoItem native />
+    </XStack>
+  </YStack>;
+}
+function SelectDemoItem(props) {
+  const [val, setVal] = useState("apple");
+  return <Select id="food" value={val} onValueChange={setVal} {...props}>
+    <Select.Trigger width={220} iconAfter={ChevronDown}><Select.Value placeholder="Something" /></Select.Trigger>
+    <Adapt when="sm" platform="touch"><Sheet
+      native={!!props.native}
+      modal
+      dismissOnSnapToBottom
+      animationConfig={{
+        type: "spring",
+        damping: 20,
+        mass: 1.2,
+        stiffness: 250
+      }}
+    >
+      <Sheet.Frame><Sheet.ScrollView><Adapt.Contents /></Sheet.ScrollView></Sheet.Frame>
+      <Sheet.Overlay
+        animation="lazy"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+    </Sheet></Adapt>
+    <Select.Content zIndex={2e5}>
+      <Select.ScrollUpButton
+        alignItems="center"
+        justifyContent="center"
+        position="relative"
+        width="100%"
+        height="$3"
+      >
+        <YStack zIndex={10}><ChevronUp size={20} /></YStack>
+        <LinearGradient
+          start={[0, 0]}
+          end={[0, 1]}
+          fullscreen
+          colors={["$background", "$backgroundTransparent"]}
+          borderRadius="$4"
+        />
+      </Select.ScrollUpButton>
+      <Select.Viewport
+        minWidth={200}
+      >
+        <Select.Group>
+          <Select.Label>Fruits</Select.Label>
+          {
+            /* for longer lists memoizing these is useful */
+          }
+          {useMemo(
+            () => items.map((item, i) => <Select.Item
+              index={i}
+              key={item.name}
+              value={item.name.toLowerCase()}
+            >
+              <Select.ItemText>{item.name}</Select.ItemText>
+              <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
+            </Select.Item>),
+            [items]
+          )}
+        </Select.Group>
+        {
+          /* Native gets an extra icon */
+        }
+        {props.native && <YStack
+          position="absolute"
+          right={0}
+          top={0}
+          bottom={0}
+          alignItems="center"
+          justifyContent="center"
+          width="$4"
+          pointerEvents="none"
+        ><ChevronDown size={getFontSize(props.size ?? "$true")} /></YStack>}
+      </Select.Viewport>
+      <Select.ScrollDownButton
+        alignItems="center"
+        justifyContent="center"
+        position="relative"
+        width="100%"
+        height="$3"
+      >
+        <YStack zIndex={10}><ChevronDown size={20} /></YStack>
+        <LinearGradient
+          start={[0, 0]}
+          end={[0, 1]}
+          fullscreen
+          colors={["$backgroundTransparent", "$background"]}
+          borderRadius="$4"
+        />
+      </Select.ScrollDownButton>
+    </Select.Content>
+  </Select>;
+}
+const items = [
+  { name: "Apple" },
+  { name: "Pear" },
+  { name: "Blackberry" },
+  { name: "Peach" },
+  { name: "Apricot" },
+  { name: "Melon" },
+  { name: "Honeydew" },
+  { name: "Starfruit" },
+  { name: "Blueberry" },
+  { name: "Raspberry" },
+  { name: "Strawberry" },
+  { name: "Mango" },
+  { name: "Pineapple" },
+  { name: "Lime" },
+  { name: "Lemon" },
+  { name: "Coconut" },
+  { name: "Guava" },
+  { name: "Papaya" },
+  { name: "Orange" },
+  { name: "Grape" },
+  { name: "Jackfruit" },
+  { name: "Durian" }
+];
+export {
+  SelectDemo,
+  SelectDemoItem
+};
+//# sourceMappingURL=SelectDemo.js.map

package/dist/jsx/SelectDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/SeparatorDemo.native.js

@@ -0,0 +1,19 @@
+import { Paragraph, Separator, XStack, YStack } from "tamagui";
+function SeparatorDemo() {
+  return <YStack width="100%" maxWidth={300} marginHorizontal={15}>
+    <Paragraph fontWeight="800">Tamagui</Paragraph>
+    <Paragraph>A cross-platform component library.</Paragraph>
+    <Separator marginVertical={15} />
+    <XStack height={20} alignItems="center">
+      <Paragraph>Blog</Paragraph>
+      <Separator alignSelf="stretch" vertical marginHorizontal={15} />
+      <Paragraph>Docs</Paragraph>
+      <Separator alignSelf="stretch" vertical marginHorizontal={15} />
+      <Paragraph>Source</Paragraph>
+    </XStack>
+  </YStack>;
+}
+export {
+  SeparatorDemo
+};
+//# sourceMappingURL=SeparatorDemo.js.map

package/dist/jsx/SeparatorDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SeparatorDemo.tsx"],
+  "mappings": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,MAAM,OAAO,UAAU,KAAK,kBAAkB;AAAA,IACpD,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,gBAAgB,IAAI;AAAA,IAC/B,CAAC,OAAO,QAAQ,IAAI,WAAW;AAAA,MAC7B,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
+  "names": []
+}

package/dist/jsx/ShapesDemo.native.js

@@ -0,0 +1,11 @@
+import { Circle, Square, XStack } from "tamagui";
+function ShapesDemo() {
+  return <XStack padding="$2" space="$4">
+    <Square size={100} backgroundColor="$color" elevation="$4" />
+    <Circle size={100} backgroundColor="$color" elevation="$4" />
+  </XStack>;
+}
+export {
+  ShapesDemo
+};
+//# sourceMappingURL=ShapesDemo.js.map

package/dist/jsx/ShapesDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ShapesDemo.tsx"],
+  "mappings": "AAAA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,IAC3D,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,EAC7D,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/SheetDemo.js

@@ -1,25 +1,13 @@
 import { ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
 import { Sheet } from "@tamagui/sheet";
 import { useState } from "react";
-import { Button, H1, H2, Input, Paragraph, XStack, YStack } from "tamagui";
-const spModes = ["percent", "constant", "fit", "mixed"];
-const SheetDemo = () => {
-  const [position, setPosition] = useState(0);
-  const [open, setOpen] = useState(false);
-  const [modal, setModal] = useState(true);
-  const [innerOpen, setInnerOpen] = useState(false);
-  const [snapPointsMode, setSnapPointsMode] = useState("percent");
-  const [mixedFitDemo, setMixedFitDemo] = useState(false);
-  const isPercent = snapPointsMode === "percent";
-  const isConstant = snapPointsMode === "constant";
-  const isFit = snapPointsMode === "fit";
-  const isMixed = snapPointsMode === "mixed";
-  const hasFit = isFit || isMixed && mixedFitDemo;
-  const snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+import { Button, H2, Input, Paragraph, XStack, YStack } from "tamagui";
+const spModes = ["percent", "constant", "fit", "mixed"], SheetDemo = () => {
+  const [position, setPosition] = useState(0), [open, setOpen] = useState(!1), [modal, setModal] = useState(!0), [innerOpen, setInnerOpen] = useState(!1), [snapPointsMode, setSnapPointsMode] = useState("percent"), [mixedFitDemo, setMixedFitDemo] = useState(!1), isPercent = snapPointsMode === "percent", isConstant = snapPointsMode === "constant", isFit = snapPointsMode === "fit", isMixed = snapPointsMode === "mixed", hasFit = isFit || isMixed && mixedFitDemo, snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
   return <>
     <YStack space>
       <XStack space $sm={{ flexDirection: "column", alignItems: "center" }}>
-        <Button onPress={() => setOpen(true)}>Open</Button>
+        <Button onPress={() => setOpen(!0)}>Open</Button>
         <Button onPress={() => setModal((x) => !x)}>{modal ? "Type: Modal" : "Type: Inline"}</Button>
         <Button
           onPress={() => setSnapPointsMode(
@@ -40,7 +28,7 @@ const SheetDemo = () => {
       position={position}
       onPositionChange={setPosition}
       zIndex={1e5}
-      animation="bouncy"
+      animation="medium"
     >
       <Sheet.Overlay
         animation="lazy"
@@ -49,7 +37,7 @@ const SheetDemo = () => {
       />
       <Sheet.Handle />
       <Sheet.Frame padding="$4" justifyContent="center" alignItems="center" space="$5">
-        <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(false)} />
+        <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(!1)} />
         <Input width={200} />
         {modal && isPercent && <>
           <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
@@ -57,7 +45,7 @@ const SheetDemo = () => {
             size="$6"
             circular
             icon={ChevronUp}
-            onPress={() => setInnerOpen(true)}
+            onPress={() => setInnerOpen(!0)}
           />
         </>}
       </Sheet.Frame>
@@ -65,21 +53,24 @@ const SheetDemo = () => {
   </>;
 };
 function InnerSheet(props) {
-  return <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
-    <Sheet.Overlay />
+  return <Sheet animation="medium" modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
+    <Sheet.Overlay
+      animation="medium"
+      enterStyle={{ opacity: 0 }}
+      exitStyle={{ opacity: 0 }}
+    />
     <Sheet.Handle />
-    <Sheet.Frame flex={1} justifyContent="center" alignItems="center" space="$5"><Sheet.ScrollView padding="$4" space>
+    <Sheet.Frame flex={1} justifyContent="center" alignItems="center" space="$5"><Sheet.ScrollView><YStack p="$5" gap="$8">
       <Button
-        size="$8"
+        size="$6"
         circular
         alignSelf="center"
         icon={ChevronDown}
-        onPress={() => props.onOpenChange?.(false)}
+        onPress={() => props.onOpenChange?.(!1)}
       />
-      <H1>Hello world</H1>
-      <H2>You can scroll me</H2>
-      {[1, 2, 3].map((i) => <Paragraph key={i} size="$10">Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.</Paragraph>)}
-    </Sheet.ScrollView></Sheet.Frame>
+      <H2>Hello world</H2>
+      {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => <Paragraph key={i} size="$8">Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.</Paragraph>)}
+    </YStack></Sheet.ScrollView></Sheet.Frame>
   </Sheet>;
 }
 export {

package/dist/jsx/SheetDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/SheetDemo.native.js

@@ -0,0 +1,79 @@
+import { ChevronDown, ChevronUp } from "@tamagui/lucide-icons";
+import { Sheet } from "@tamagui/sheet";
+import { useState } from "react";
+import { Button, H2, Input, Paragraph, XStack, YStack } from "tamagui";
+const spModes = ["percent", "constant", "fit", "mixed"], SheetDemo = () => {
+  const [position, setPosition] = useState(0), [open, setOpen] = useState(!1), [modal, setModal] = useState(!0), [innerOpen, setInnerOpen] = useState(!1), [snapPointsMode, setSnapPointsMode] = useState("percent"), [mixedFitDemo, setMixedFitDemo] = useState(!1), isPercent = snapPointsMode === "percent", isConstant = snapPointsMode === "constant", isFit = snapPointsMode === "fit", isMixed = snapPointsMode === "mixed", hasFit = isFit || isMixed && mixedFitDemo, snapPoints = isPercent ? [85, 50, 25] : isConstant ? [256, 190] : isFit ? void 0 : mixedFitDemo ? ["fit", 110] : ["80%", 256, 190];
+  return <>
+    <YStack space>
+      <XStack space $sm={{ flexDirection: "column", alignItems: "center" }}>
+        <Button onPress={() => setOpen(!0)}>Open</Button>
+        <Button onPress={() => setModal((x) => !x)}>{modal ? "Type: Modal" : "Type: Inline"}</Button>
+        <Button
+          onPress={() => setSnapPointsMode(
+            (prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]
+          )}
+        >{`Mode: ${{ percent: "Percentage", constant: "Constant", fit: "Fit", mixed: "Mixed" }[snapPointsMode]}`}</Button>
+      </XStack>
+      {isMixed ? <Button onPress={() => setMixedFitDemo((x) => !x)}>{`Snap Points: ${JSON.stringify(snapPoints)}`}</Button> : <XStack paddingVertical="$2.5" justifyContent="center"><Paragraph>{`Snap Points: ${isFit ? "(none)" : JSON.stringify(snapPoints)}`}</Paragraph></XStack>}
+    </YStack>
+    <Sheet
+      forceRemoveScrollEnabled={open}
+      modal={modal}
+      open={open}
+      onOpenChange={setOpen}
+      snapPoints={snapPoints}
+      snapPointsMode={snapPointsMode}
+      dismissOnSnapToBottom
+      position={position}
+      onPositionChange={setPosition}
+      zIndex={1e5}
+      animation="medium"
+    >
+      <Sheet.Overlay
+        animation="lazy"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+      <Sheet.Handle />
+      <Sheet.Frame padding="$4" justifyContent="center" alignItems="center" space="$5">
+        <Button size="$6" circular icon={ChevronDown} onPress={() => setOpen(!1)} />
+        <Input width={200} />
+        {modal && isPercent && <>
+          <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />
+          <Button
+            size="$6"
+            circular
+            icon={ChevronUp}
+            onPress={() => setInnerOpen(!0)}
+          />
+        </>}
+      </Sheet.Frame>
+    </Sheet>
+  </>;
+};
+function InnerSheet(props) {
+  return <Sheet animation="medium" modal snapPoints={[90]} dismissOnSnapToBottom {...props}>
+    <Sheet.Overlay
+      animation="medium"
+      enterStyle={{ opacity: 0 }}
+      exitStyle={{ opacity: 0 }}
+    />
+    <Sheet.Handle />
+    <Sheet.Frame flex={1} justifyContent="center" alignItems="center" space="$5"><Sheet.ScrollView><YStack p="$5" gap="$8">
+      <Button
+        size="$6"
+        circular
+        alignSelf="center"
+        icon={ChevronDown}
+        onPress={() => props.onOpenChange?.(!1)}
+      />
+      <H2>Hello world</H2>
+      {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => <Paragraph key={i} size="$8">Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.</Paragraph>)}
+    </YStack></Sheet.ScrollView></Sheet.Frame>
+  </Sheet>;
+}
+export {
+  SheetDemo
+};
+//# sourceMappingURL=SheetDemo.js.map

package/dist/jsx/SheetDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SheetDemo.tsx"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/SliderDemo.native.js

@@ -0,0 +1,18 @@
+import { Slider, XStack } from "tamagui";
+function SliderDemo() {
+  return <XStack height={200} alignItems="center" space="$8">
+    <SimpleSlider height={200} orientation="vertical" />
+    <SimpleSlider width={200} />
+  </XStack>;
+}
+function SimpleSlider({ children, ...props }) {
+  return <Slider defaultValue={[50]} max={100} step={1} {...props}>
+    <Slider.Track><Slider.TrackActive /></Slider.Track>
+    <Slider.Thumb index={0} circular elevate />
+    {children}
+  </Slider>;
+}
+export {
+  SliderDemo
+};
+//# sourceMappingURL=SliderDemo.js.map

package/dist/jsx/SliderDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SliderDemo.tsx"],
+  "mappings": "AAAA,SAAS,QAAqB,cAAc;AAErC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,WAAW,SAAS,MAAM;AAAA,IAC7C,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
+  "names": []
+}

package/dist/jsx/SpinnerDemo.native.js

@@ -0,0 +1,11 @@
+import { Spinner, YStack } from "tamagui";
+function SpinnerDemo() {
+  return <YStack padding="$3" space="$4" alignItems="center">
+    <Spinner size="small" color="$green10" />
+    <Spinner size="large" color="$orange10" />
+  </YStack>;
+}
+export {
+  SpinnerDemo
+};
+//# sourceMappingURL=SpinnerDemo.js.map

package/dist/jsx/SpinnerDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SpinnerDemo.tsx"],
+  "mappings": "AAAA,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
+  "names": []
+}

package/dist/jsx/StacksDemo.native.js

@@ -0,0 +1,60 @@
+import { XStack, YStack, ZStack } from "tamagui";
+function StacksDemo() {
+  return <XStack maxWidth={250} padding="$2" alignSelf="center" space>
+    <YStack
+      flex={1}
+      space="$2"
+      borderWidth={2}
+      borderColor="$color"
+      borderRadius="$4"
+      padding="$2"
+    >
+      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+    </YStack>
+    <XStack
+      flex={1}
+      space="$2"
+      borderWidth={2}
+      borderColor="$color"
+      borderRadius="$4"
+      padding="$2"
+    >
+      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+      <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
+    </XStack>
+    <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>
+      <YStack
+        fullscreen
+        borderRadius="$4"
+        padding="$2"
+        borderColor="$color"
+        borderWidth={2}
+      />
+      <YStack
+        borderColor="$color"
+        fullscreen
+        y={10}
+        x={10}
+        borderWidth={2}
+        borderRadius="$4"
+        padding="$2"
+      />
+      <YStack
+        borderColor="$color"
+        fullscreen
+        y={20}
+        x={20}
+        borderWidth={2}
+        borderRadius="$4"
+        padding="$2"
+      />
+    </ZStack>
+  </XStack>;
+}
+export {
+  StacksDemo
+};
+//# sourceMappingURL=StacksDemo.js.map

package/dist/jsx/StacksDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/StacksDemo.tsx"],
+  "mappings": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,UAAU,KAAK,QAAQ,KAAK,UAAU,SAAS;AAAA,IACrD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MACA,CAAC;AAAA,QACC,YAAY;AAAA,QACZ;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,MACA,CAAC;AAAA,QACC,YAAY;AAAA,QACZ;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EA1BC;AAAA,EA2BH,EAtDC;AAwDL;",
+  "names": []
+}

package/dist/jsx/SwitchDemo.native.js

@@ -0,0 +1,40 @@
+import { Label, Separator, Switch, XStack, YStack } from "tamagui";
+function SwitchDemo() {
+  return <YStack width={200} alignItems="center" space="$3">
+    <XStack space="$3" $xs={{ flexDirection: "column" }}>
+      <SwitchWithLabel size="$2" />
+      <SwitchWithLabel size="$2" defaultChecked />
+    </XStack>
+    <XStack space="$3" $xs={{ flexDirection: "column" }}>
+      <SwitchWithLabel size="$3" />
+      <SwitchWithLabel size="$3" defaultChecked />
+    </XStack>
+    <XStack space="$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>;
+}
+function SwitchWithLabel(props) {
+  const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ""}}`;
+  return <XStack width={200} alignItems="center" space="$4">
+    <Label
+      paddingRight="$0"
+      minWidth={90}
+      justifyContent="flex-end"
+      size={props.size}
+      htmlFor={id}
+    >Accept</Label>
+    <Separator minHeight={20} vertical />
+    <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}><Switch.Thumb animation="quick" /></Switch>
+  </XStack>;
+}
+export {
+  SwitchDemo,
+  SwitchWithLabel
+};
+//# sourceMappingURL=SwitchDemo.js.map

package/dist/jsx/SwitchDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/SwitchDemo.tsx"],
+  "mappings": "AAAA,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,IAID,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,IAID,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,IAID,CAAC,OAAO,MAAM,KAAK,KAAK,EAAE,eAAe,SAAS;AAAA,MAChD,CAAC,gBAAgB,KAAK,KAAK;AAAA,MAC3B,CAAC,gBAAgB,KAAK,KAAK,eAAe;AAAA,IAC5C,EAHC;AAAA,EAIH,EAjBC;AAmBL;AAEO,SAAS,gBAAgB,OAAuD;AACrF,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,CAAC,IAAI,MAAM,kBAAkB,EAAE;AACjF,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,MAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACtD,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
+  "names": []
+}