@tamagui/demos 1.88.13 → 1.88.14

package/dist/jsx/CheckboxHeadlessDemo.mjs

@@ -0,0 +1,50 @@
+import { useCheckbox } from "@tamagui/checkbox-headless";
+import { Check, Minus } from "@tamagui/lucide-icons";
+import { forwardRef, useState } from "react";
+import { Pressable } from "react-native-web";
+import { Label, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckboxHeadlessDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    width: 200,
+    alignItems: "center",
+    space: "$3",
+    children: /* @__PURE__ */jsxs(XStack, {
+      space: "$3",
+      alignItems: "center",
+      children: [/* @__PURE__ */jsx(HeadlessCheckbox, {
+        defaultChecked: "indeterminate",
+        id: "headless"
+      }), /* @__PURE__ */jsx(Label, {
+        htmlFor: "headless",
+        children: "Headless"
+      })]
+    })
+  });
+}
+const HeadlessCheckbox = forwardRef((props, ref) => {
+  const [checked, setChecked] = useState(props.defaultChecked || !1),
+    {
+      checkboxProps,
+      bubbleInput
+    } = useCheckbox(props, [checked, setChecked], ref);
+  return /* @__PURE__ */jsxs(Pressable, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 4,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: checked === !0 ? "lightblue" : "silver"
+    },
+    ...checkboxProps,
+    children: [checked === "indeterminate" && /* @__PURE__ */jsx(Minus, {
+      width: 18,
+      height: 18
+    }), checked === !0 && /* @__PURE__ */jsx(Check, {
+      width: 18,
+      height: 18
+    }), bubbleInput]
+  });
+});
+export { CheckboxHeadlessDemo };

package/dist/jsx/CheckboxUnstyledDemo.mjs

@@ -0,0 +1,53 @@
+import { createCheckbox } from "@tamagui/checkbox";
+import { Stack, styled } from "@tamagui/core";
+import { Check } from "@tamagui/lucide-icons";
+import { Label, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Frame = styled(Stack, {
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    borderRadius: 5,
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      checked: {
+        indeterminate: {},
+        true: {
+          backgroundColor: "$color5"
+        },
+        false: {
+          backgroundColor: "$color3"
+        }
+      }
+    },
+    defaultVariants: {
+      checked: !1
+    }
+  }),
+  Indicator = styled(Stack, {}),
+  Checkbox = createCheckbox({
+    Frame,
+    Indicator
+  });
+function CheckboxUnstyledDemo() {
+  return /* @__PURE__ */jsx(YStack, {
+    width: 200,
+    alignItems: "center",
+    gap: "$3",
+    children: /* @__PURE__ */jsxs(XStack, {
+      gap: "$3",
+      alignItems: "center",
+      children: [/* @__PURE__ */jsx(Checkbox, {
+        defaultChecked: !0,
+        id: "unstyled",
+        children: /* @__PURE__ */jsx(Checkbox.Indicator, {
+          children: /* @__PURE__ */jsx(Check, {})
+        })
+      }), /* @__PURE__ */jsx(Label, {
+        htmlFor: "unstyled",
+        children: "Unstyled"
+      })]
+    })
+  });
+}
+export { Checkbox, CheckboxUnstyledDemo };

package/dist/jsx/ColorsDemo.mjs

@@ -0,0 +1,97 @@
+import { H2, Paragraph, Separator, Square, XStack, YStack, getTokens, getVariableValue } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red"];
+function ColorsDemo() {
+  const colors = getTokens({
+      prefixed: !1
+    }).color,
+    [colorsLight, colorsDark] = [getColors(colors), getColors(colors, !0)];
+  return /* @__PURE__ */jsxs(YStack, {
+    marginTop: "$4",
+    space: "$8",
+    children: [/* @__PURE__ */jsx(ColorsRow, {
+      title: "Light",
+      colors: colorsLight
+    }), /* @__PURE__ */jsx(Separator, {}), /* @__PURE__ */jsx(ColorsRow, {
+      title: "Dark",
+      colors: colorsDark
+    })]
+  });
+}
+function ColorsRow({
+  title,
+  colors
+}) {
+  return /* @__PURE__ */jsxs(YStack, {
+    space: !0,
+    $sm: {
+      space: "$2"
+    },
+    children: [/* @__PURE__ */jsx(H2, {
+      size: "$2",
+      children: title
+    }), /* @__PURE__ */jsxs(XStack, {
+      space: !0,
+      alignSelf: "center",
+      children: [/* @__PURE__ */jsxs(YStack, {
+        space: !0,
+        $sm: {
+          space: "$2"
+        },
+        alignSelf: "center",
+        children: [colors.map((group, index) => /* @__PURE__ */jsx(XStack, {
+          space: "$2",
+          children: group.map(color => /* @__PURE__ */jsx(Square, {
+            borderRadius: "$2",
+            size: "$4",
+            height: "$4",
+            borderWidth: 1,
+            backgroundColor: getVariableValue(color),
+            borderColor: "$color7",
+            $sm: {
+              size: "$2"
+            },
+            $xs: {
+              size: "$1"
+            }
+          }, `${color.key}${index}`))
+        }, index)), /* @__PURE__ */jsx(XStack, {
+          space: "$2",
+          alignSelf: "center",
+          children: new Array(13).fill(0).slice(1).map((_, index) => /* @__PURE__ */jsx(Paragraph, {
+            color: "$color10",
+            textAlign: "center",
+            width: "$4",
+            $sm: {
+              width: "$2"
+            },
+            $xs: {
+              width: "$1"
+            },
+            children: index
+          }, index))
+        })]
+      }), /* @__PURE__ */jsx(YStack, {
+        space: "$4",
+        marginTop: "$2",
+        children: colorGroups.map(name => /* @__PURE__ */jsx(Paragraph, {
+          theme: name,
+          color: "$color10",
+          height: "$4",
+          rotate: "-10deg",
+          $sm: {
+            height: "$2"
+          },
+          $xs: {
+            height: "$1"
+          },
+          children: name
+        }, name))
+      })]
+    })]
+  });
+}
+function getColors(colors, dark = !1) {
+  return colorGroups.map(group => Object.keys(colors).filter(color => color.startsWith(group) && (dark ? color.endsWith("Dark") : !color.endsWith("Dark"))).map(key => colors[key]));
+}
+export { ColorsDemo };

package/dist/jsx/DialogDemo.mjs

@@ -0,0 +1,136 @@
+import { X } from "@tamagui/lucide-icons";
+import { useState } from "react";
+import { Adapt, Button, Dialog, Fieldset, Input, Label, Paragraph, Sheet, TooltipSimple, Unspaced, XStack } from "tamagui";
+import { SelectDemoItem } from "./SelectDemo.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DialogDemo() {
+  return /* @__PURE__ */jsx(DialogInstance, {});
+}
+function DialogInstance() {
+  const [open, setOpen] = useState(!1);
+  return /* @__PURE__ */jsxs(Dialog, {
+    modal: !0,
+    onOpenChange: open2 => {
+      setOpen(open2);
+    },
+    children: [/* @__PURE__ */jsx(Dialog.Trigger, {
+      asChild: !0,
+      children: /* @__PURE__ */jsx(Button, {
+        children: "Show Dialog"
+      })
+    }), /* @__PURE__ */jsx(Adapt, {
+      when: "sm",
+      platform: "touch",
+      children: /* @__PURE__ */jsxs(Sheet, {
+        animation: "medium",
+        zIndex: 2e5,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        children: [/* @__PURE__ */jsx(Sheet.Frame, {
+          padding: "$4",
+          gap: "$4",
+          children: /* @__PURE__ */jsx(Adapt.Contents, {})
+        }), /* @__PURE__ */jsx(Sheet.Overlay, {
+          animation: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */jsxs(Dialog.Portal, {
+      children: [/* @__PURE__ */jsx(Dialog.Overlay, {
+        animation: "quick",
+        opacity: 0.5,
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }, "overlay"), /* @__PURE__ */jsxs(Dialog.Content, {
+        bordered: !0,
+        elevate: !0,
+        animateOnly: ["transform", "opacity"],
+        animation: ["quick", {
+          opacity: {
+            overshootClamping: !0
+          }
+        }],
+        enterStyle: {
+          x: 0,
+          y: -20,
+          opacity: 0,
+          scale: 0.9
+        },
+        exitStyle: {
+          x: 0,
+          y: 10,
+          opacity: 0,
+          scale: 0.95
+        },
+        gap: "$4",
+        children: [/* @__PURE__ */jsx(Dialog.Title, {
+          children: "Edit profile"
+        }), /* @__PURE__ */jsx(Dialog.Description, {
+          children: "Make changes to your profile here. Click save when you're done."
+        }), /* @__PURE__ */jsxs(Fieldset, {
+          gap: "$4",
+          horizontal: !0,
+          children: [/* @__PURE__ */jsx(Label, {
+            width: 160,
+            justifyContent: "flex-end",
+            htmlFor: "name",
+            children: "Name"
+          }), /* @__PURE__ */jsx(Input, {
+            flex: 1,
+            id: "name",
+            defaultValue: "Nate Wienert"
+          })]
+        }), /* @__PURE__ */jsxs(Fieldset, {
+          gap: "$4",
+          horizontal: !0,
+          children: [/* @__PURE__ */jsx(Label, {
+            width: 160,
+            justifyContent: "flex-end",
+            htmlFor: "username",
+            children: /* @__PURE__ */jsx(TooltipSimple, {
+              label: "Pick your favorite",
+              placement: "bottom-start",
+              children: /* @__PURE__ */jsx(Paragraph, {
+                children: "Food"
+              })
+            })
+          }), /* @__PURE__ */jsx(SelectDemoItem, {})]
+        }), /* @__PURE__ */jsxs(XStack, {
+          alignSelf: "flex-end",
+          gap: "$4",
+          children: [/* @__PURE__ */jsx(DialogInstance, {}), /* @__PURE__ */jsx(Dialog.Close, {
+            displayWhenAdapted: !0,
+            asChild: !0,
+            children: /* @__PURE__ */jsx(Button, {
+              theme: "active",
+              "aria-label": "Close",
+              children: "Save changes"
+            })
+          })]
+        }), /* @__PURE__ */jsx(Unspaced, {
+          children: /* @__PURE__ */jsx(Dialog.Close, {
+            asChild: !0,
+            children: /* @__PURE__ */jsx(Button, {
+              position: "absolute",
+              top: "$3",
+              right: "$3",
+              size: "$2",
+              circular: !0,
+              icon: X
+            })
+          })
+        })]
+      }, "content")]
+    })]
+  });
+}
+export { DialogDemo };

package/dist/jsx/FormsDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/FormsDemo.tsx"],
-  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAAe;AAelD,SAWE,KAXF;AAbG,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,mBAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC,GAGT;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,KAAI;AAAA,MACJ,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,IAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AAEpC,SAAS,QAAQ,MAAM,IAAI,eAAe;AAetC,SAWE,KAXF;AAbG,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,mBAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC,GAGT;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,KAAI;AAAA,MACJ,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,IAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/FormsDemo.mjs

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { Button, Form, H4, Spinner } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormsDemo(props) {
+  const [status, setStatus] = useState("off");
+  return useEffect(() => {
+    if (status === "submitting") {
+      const timer = setTimeout(() => setStatus("off"), 2e3);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [status]), /* @__PURE__ */jsxs(Form, {
+    alignItems: "center",
+    minWidth: 300,
+    gap: "$2",
+    onSubmit: () => setStatus("submitting"),
+    borderWidth: 1,
+    borderRadius: "$4",
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    padding: "$8",
+    children: [/* @__PURE__ */jsx(H4, {
+      children: status[0].toUpperCase() + status.slice(1)
+    }), /* @__PURE__ */jsx(Form.Trigger, {
+      asChild: !0,
+      disabled: status !== "off",
+      children: /* @__PURE__ */jsx(Button, {
+        icon: status === "submitting" ? () => /* @__PURE__ */jsx(Spinner, {}) : void 0,
+        children: "Submit"
+      })
+    })]
+  });
+}
+export { FormsDemo };

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/FormsDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC,kBACpC,iBAAsD,oBAelD;AAbG,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6C,KAAK;AAE9E,qCAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC,GAGT;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,KAAI;AAAA,MACJ,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,oDAAC,qBAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,4CAAC,oBAAK,SAAL,EAAa,SAAO,IAAC,UAAU,WAAW,OACzC,sDAAC,yBAAO,MAAM,WAAW,eAAe,MAAM,4CAAC,0BAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC,kBAEpC,iBAA0C,oBAetC;AAbG,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6C,KAAK;AAE9E,qCAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC,GAGT;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,KAAI;AAAA,MACJ,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,oDAAC,qBAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,4CAAC,oBAAK,SAAL,EAAa,SAAO,IAAC,UAAU,WAAW,OACzC,sDAAC,yBAAO,MAAM,WAAW,eAAe,MAAM,4CAAC,0BAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/jsx/Grid.mjs

@@ -0,0 +1,37 @@
+import { isWeb } from "@tamagui/core";
+import { XStack } from "@tamagui/stacks";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+function Grid({
+  children,
+  columns,
+  itemMinWidth = 200,
+  gap
+}) {
+  if (isWeb) return /* @__PURE__ */jsx("div", {
+    style: {
+      gap,
+      display: "grid",
+      justifyContent: "stretch",
+      // gridTemplateRows: 'repeat(4, 1fr)',
+      gridTemplateColumns: `repeat( auto-fit, minmax(${itemMinWidth}px, 1fr) )`
+      // gridTemplateColumns: '1fr 1fr',
+    },
+
+    children
+  });
+  const childrenList = React.Children.toArray(children);
+  return /* @__PURE__ */jsx(XStack, {
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    children: childrenList.map((child, i) => child ? /* @__PURE__ */jsx(XStack, {
+      flex: 1,
+      minWidth: itemMinWidth,
+      marginRight: gap,
+      marginBottom: gap,
+      children: child
+    }, i) : null)
+  });
+}
+export { Grid };

package/dist/jsx/GroupDemo.mjs

@@ -0,0 +1,61 @@
+import { Activity, Airplay } from "@tamagui/lucide-icons";
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GroupDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    padding: "$3",
+    space: "$2",
+    alignItems: "center",
+    children: [/* @__PURE__ */jsxs(Group, {
+      orientation: "horizontal",
+      children: [/* @__PURE__ */jsx(Group.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          children: "First"
+        })
+      }), /* @__PURE__ */jsx(Group.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          children: "Second"
+        })
+      }), /* @__PURE__ */jsx(Group.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          children: "Third"
+        })
+      })]
+    }), /* @__PURE__ */jsxs(XGroup, {
+      size: "$3",
+      $gtSm: {
+        size: "$5"
+      },
+      children: [/* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          icon: Activity,
+          children: "First"
+        })
+      }), /* @__PURE__ */jsx(XGroup.Item, {
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          icon: Airplay,
+          children: "Second"
+        })
+      })]
+    }), /* @__PURE__ */jsxs(YGroup, {
+      separator: /* @__PURE__ */jsx(Separator, {}),
+      children: [/* @__PURE__ */jsx(YGroup.Item, {
+        children: /* @__PURE__ */jsx(ListItem, {
+          title: "First"
+        })
+      }), /* @__PURE__ */jsx(YGroup.Item, {
+        children: /* @__PURE__ */jsx(ListItem, {
+          title: "Second",
+          subTitle: "Second subtitle"
+        })
+      }), /* @__PURE__ */jsx(YGroup.Item, {
+        children: /* @__PURE__ */jsx(ListItem, {
+          children: "Third"
+        })
+      })]
+    })]
+  });
+}
+export { GroupDemo };

package/dist/jsx/HeadingsDemo.mjs

@@ -0,0 +1,21 @@
+import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HeadingsDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    alignSelf: "center",
+    children: [/* @__PURE__ */jsx(H1, {
+      children: "Heading 1"
+    }), /* @__PURE__ */jsx(H2, {
+      children: "Heading 2"
+    }), /* @__PURE__ */jsx(H3, {
+      children: "Heading 3"
+    }), /* @__PURE__ */jsx(H4, {
+      children: "Heading 4"
+    }), /* @__PURE__ */jsx(H5, {
+      children: "Heading 5"
+    }), /* @__PURE__ */jsx(H6, {
+      children: "Heading 6"
+    })]
+  });
+}
+export { HeadingsDemo };

package/dist/jsx/ImageDemo.mjs

@@ -0,0 +1,12 @@
+import { Image } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+function ImageDemo() {
+  return /* @__PURE__ */jsx(Image, {
+    source: {
+      uri: "https://placekitten.com/200/300",
+      width: 200,
+      height: 300
+    }
+  });
+}
+export { ImageDemo };

package/dist/jsx/InputsDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/InputsDemo.tsx"],
-  "mappings": "AAAA,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAIhE,SAQE,KARF;AAFG,SAAS,aAAa;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAS;AAAA,MACT,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MAER;AAAA,4BAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,YAAS,aAAY,yBAAwB;AAAA;AAAA;AAAA,EAChD;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,IAAI,OAAO;AAAA,IACxE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
+  "mappings": "AACA,SAAS,QAAQ,OAAO,UAAU,QAAQ,cAAc;AAIpD,SAQE,KARF;AAFG,SAAS,aAAa;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAS;AAAA,MACT,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MAER;AAAA,4BAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,QACrB,oBAAC,YAAS,aAAY,yBAAwB;AAAA;AAAA;AAAA,EAChD;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,IAAI,OAAO;AAAA,IACxE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
   "names": []
 }

package/dist/jsx/InputsDemo.mjs

@@ -0,0 +1,36 @@
+import { Button, Input, TextArea, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputsDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    width: 200,
+    minHeight: 250,
+    overflow: "hidden",
+    space: "$2",
+    margin: "$3",
+    padding: "$2",
+    children: [/* @__PURE__ */jsx(InputDemo, {
+      size: "$2"
+    }), /* @__PURE__ */jsx(InputDemo, {
+      size: "$3"
+    }), /* @__PURE__ */jsx(InputDemo, {
+      size: "$4"
+    }), /* @__PURE__ */jsx(TextArea, {
+      placeholder: "Enter your details..."
+    })]
+  });
+}
+function InputDemo(props) {
+  return /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    space: "$2",
+    children: [/* @__PURE__ */jsx(Input, {
+      flex: 1,
+      size: props.size,
+      placeholder: `Size ${props.size}...`
+    }), /* @__PURE__ */jsx(Button, {
+      size: props.size,
+      children: "Go"
+    })]
+  });
+}
+export { InputsDemo };

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/InputsDemo.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoE,oBAIhE;AAFG,SAAS,aAAa;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAS;AAAA,MACT,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MAER;AAAA,oDAAC,aAAU,MAAK,MAAK;AAAA,QACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,QACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,QACrB,4CAAC,2BAAS,aAAY,yBAAwB;AAAA;AAAA;AAAA,EAChD;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,gDAAC,wBAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,IAAI,OAAO;AAAA,IACxE,4CAAC,yBAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAwD,oBAIpD;AAFG,SAAS,aAAa;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAS;AAAA,MACT,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MAER;AAAA,oDAAC,aAAU,MAAK,MAAK;AAAA,QACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,QACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,QACrB,4CAAC,2BAAS,aAAY,yBAAwB;AAAA;AAAA;AAAA,EAChD;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,gDAAC,wBAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,IAAI,OAAO;AAAA,IACxE,4CAAC,yBAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
   "names": []
 }

package/dist/jsx/LabelDemo.mjs

@@ -0,0 +1,36 @@
+import { Input, Label, Switch, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LabelDemo() {
+  return /* @__PURE__ */jsxs(YStack, {
+    padding: "$3",
+    minWidth: 300,
+    space: "$4",
+    children: [/* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      space: "$4",
+      children: [/* @__PURE__ */jsx(Label, {
+        width: 90,
+        htmlFor: "name",
+        children: "Name"
+      }), /* @__PURE__ */jsx(Input, {
+        flex: 1,
+        id: "name",
+        defaultValue: "Nate Wienert"
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      space: "$4",
+      children: [/* @__PURE__ */jsx(Label, {
+        width: 90,
+        htmlFor: "notify",
+        children: "Notifications"
+      }), /* @__PURE__ */jsx(Switch, {
+        id: "notify",
+        children: /* @__PURE__ */jsx(Switch.Thumb, {
+          animation: "quick"
+        })
+      })]
+    })]
+  });
+}
+export { LabelDemo };

package/dist/jsx/LinearGradientDemo.mjs

@@ -0,0 +1,24 @@
+import { XStack } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LinearGradientDemo() {
+  return /* @__PURE__ */jsxs(XStack, {
+    space: !0,
+    children: [/* @__PURE__ */jsx(LinearGradient, {
+      width: "$6",
+      height: "$6",
+      borderRadius: "$4",
+      colors: ["$red10", "$yellow10"],
+      start: [0, 1],
+      end: [0, 0]
+    }), /* @__PURE__ */jsx(LinearGradient, {
+      width: "$6",
+      height: "$6",
+      borderRadius: "$4",
+      colors: ["$background", "$color"],
+      start: [1, 1],
+      end: [0, 0]
+    })]
+  });
+}
+export { LinearGradientDemo };