@tamagui/demos 1.27.2 → 1.27.3

package/dist/esm/TokensDemo.mjs

@@ -1,87 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { getConfig } from "@tamagui/core";
-import { useState } from "react";
-import { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from "tamagui";
-const sections = [
-  {
-    name: `Size`,
-    key: `size`
-  },
-  {
-    name: `Space`,
-    key: "space"
-  },
-  {
-    name: `Space (-)`,
-    key: `spaceNegative`
-  },
-  {
-    name: `Radius`,
-    key: `radius`
-  }
-];
-function TokensDemo() {
-  const [section, setSection] = useState("size");
-  return /* @__PURE__ */ jsxs(YStack, { space: true, children: [
-    /* @__PURE__ */ jsx(XGroup, { alignItems: "center", alignSelf: "center", children: sections.map(({ name, key }) => {
-      return /* @__PURE__ */ jsx(XGroup.Item, { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "$3",
-          theme: section === key ? "active" : null,
-          fontFamily: "$silkscreen",
-          onPress: () => setSection(key),
-          children: name
-        }
-      ) }, key);
-    }) }),
-    (section === "size" || section === "spaceNegative" || section === "space" || section === "radius") && /* @__PURE__ */ jsx(SizeSection, { section })
-  ] });
-}
-function SizeSection({ section }) {
-  const allTokens = getConfig().tokens;
-  const tokens = allTokens[section.startsWith("space") ? "space" : section];
-  const st = Object.keys(tokens).sort((a, b) => parseFloat(a) > parseFloat(b) ? 1 : -1);
-  const spaceTokens = st.filter((t) => parseFloat(t) >= 0);
-  const spaceTokensNegative = st.filter((t) => parseFloat(t) < 0).sort((a, b) => parseFloat(a) > parseFloat(b) ? -1 : 1);
-  return /* @__PURE__ */ jsxs(YStack, { flex: 1, space: true, children: [
-    /* @__PURE__ */ jsx(H2, { children: "Sizes" }),
-    /* @__PURE__ */ jsx(YStack, { width: "100%", space: "$2", separator: /* @__PURE__ */ jsx(Separator, {}), children: (section === "spaceNegative" ? spaceTokensNegative : spaceTokens).map(
-      (token) => {
-        var _a, _b, _c, _d, _e;
-        return /* @__PURE__ */ jsxs(XStack, { width: "100%", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(YStack, { width: "25%", children: /* @__PURE__ */ jsxs(H3, { size: "$6", children: [
-            "$",
-            token
-          ] }) }),
-          /* @__PURE__ */ jsx(YStack, { width: "20%", children: /* @__PURE__ */ jsxs(H4, { size: "$5", children: [
-            (_a = tokens[token]) == null ? void 0 : _a.val,
-            "px"
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            Square,
-            {
-              size: (_b = tokens[token]) == null ? void 0 : _b.val,
-              backgroundColor: "$color5",
-              ...section === "spaceNegative" && {
-                backgroundColor: "$red5",
-                size: -((_c = tokens[spaceTokensNegative.find(
-                  (t) => parseFloat(t) === -parseFloat(token)
-                ) ?? token]) == null ? void 0 : _c.val)
-              },
-              ...section === "radius" && {
-                // @ts-ignore
-                size: (_d = allTokens.size[token]) == null ? void 0 : _d.val,
-                borderRadius: (_e = tokens[token]) == null ? void 0 : _e.val
-              }
-            }
-          )
-        ] }, token);
-      }
-    ) })
-  ] });
-}
-export {
-  TokensDemo
-};
-//# sourceMappingURL=TokensDemo.mjs.map

package/dist/esm/TooltipDemo.mjs

@@ -1,68 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Circle
-} from "@tamagui/lucide-icons";
-import {
-  Button,
-  Paragraph,
-  Theme,
-  Tooltip,
-  TooltipGroup,
-  XStack,
-  YStack
-} from "tamagui";
-function TooltipDemo() {
-  return /* @__PURE__ */ jsx(TooltipGroup, { delay: { open: 3e3, close: 100 }, children: /* @__PURE__ */ jsxs(YStack, { space: "$2", alignSelf: "center", children: [
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
-      /* @__PURE__ */ jsx(Demo, { groupId: "0", placement: "top-end", Icon: Circle }),
-      /* @__PURE__ */ jsx(Demo, { groupId: "1", placement: "top", Icon: ChevronUp }),
-      /* @__PURE__ */ jsx(Demo, { groupId: "2", placement: "top-start", Icon: Circle })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
-      /* @__PURE__ */ jsx(Demo, { groupId: "3", placement: "left", Icon: ChevronLeft }),
-      /* @__PURE__ */ jsx(YStack, { flex: 1 }),
-      /* @__PURE__ */ jsx(Demo, { groupId: "4", placement: "right", Icon: ChevronRight })
-    ] }),
-    /* @__PURE__ */ jsxs(XStack, { space: "$2", children: [
-      /* @__PURE__ */ jsx(Demo, { groupId: "5", placement: "bottom-end", Icon: Circle }),
-      /* @__PURE__ */ jsx(Demo, { groupId: "6", placement: "bottom", Icon: ChevronDown }),
-      /* @__PURE__ */ jsx(Demo, { groupId: "7", placement: "bottom-start", Icon: Circle })
-    ] })
-  ] }) });
-}
-function Demo({ Icon, ...props }) {
-  return /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
-    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Button, { icon: Icon, circular: true }) }),
-    /* @__PURE__ */ jsx(Theme, { inverse: true, children: /* @__PURE__ */ jsxs(
-      Tooltip.Content,
-      {
-        enterStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
-        exitStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 },
-        scale: 1,
-        x: 0,
-        y: 0,
-        opacity: 1,
-        animation: [
-          "quick",
-          {
-            opacity: {
-              overshootClamping: true
-            }
-          }
-        ],
-        children: [
-          /* @__PURE__ */ jsx(Tooltip.Arrow, {}),
-          /* @__PURE__ */ jsx(Paragraph, { size: "$2", lineHeight: "$1", children: "Hello world" })
-        ]
-      }
-    ) })
-  ] });
-}
-export {
-  TooltipDemo
-};
-//# sourceMappingURL=TooltipDemo.mjs.map

package/dist/esm/UpdateThemeDemo.mjs

@@ -1,56 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as Config from "@tamagui/config";
-import { addTheme, updateTheme } from "@tamagui/theme";
-import { useState } from "react";
-import {
-  Button,
-  Square,
-  Theme,
-  XStack,
-  YStack,
-  getVariableValue,
-  useForceUpdate,
-  useIsomorphicLayoutEffect
-} from "tamagui";
-const colors = Config.config.tokens.color;
-const colorKeys = Object.keys(colors);
-function UpdateThemeDemo() {
-  const [theme, setTheme] = useState();
-  const update = useForceUpdate();
-  useIsomorphicLayoutEffect(() => {
-    addTheme({
-      name: "custom",
-      insertCSS: true,
-      theme: {
-        color: "red",
-        color2: "blue"
-      }
-    });
-    setTheme("custom");
-  }, []);
-  return /* @__PURE__ */ jsxs(YStack, { alignItems: "center", space: true, children: [
-    /* @__PURE__ */ jsx(XStack, { gap: "$5", children: /* @__PURE__ */ jsx(Theme, { name: theme ?? null, children: /* @__PURE__ */ jsx(Square, { borderRadius: "$8", size: 100, backgroundColor: "$color" }) }) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onPress: () => {
-          const randomColor = getVariableValue(
-            colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]
-          );
-          updateTheme({
-            name: "custom",
-            theme: {
-              color: randomColor
-            }
-          });
-          update();
-        },
-        children: "Set to random color"
-      }
-    )
-  ] });
-}
-export {
-  UpdateThemeDemo
-};
-//# sourceMappingURL=UpdateThemeDemo.mjs.map

package/dist/esm/conf.mjs

@@ -1,5 +0,0 @@
-import { config as config2 } from "@tamagui/config";
-export {
-  config2 as config
-};
-//# sourceMappingURL=conf.mjs.map

package/dist/esm/index.mjs

@@ -1,48 +0,0 @@
-export * from "./AlertDialogDemo";
-export * from "./AnimationsDemo";
-export * from "./AnimationsEnterDemo";
-export * from "./AnimationsHoverDemo";
-export * from "./AnimationsTimingDemo";
-export * from "./AnimationsPresenceDemo";
-export * from "./AvatarDemo";
-export * from "./ButtonDemo";
-export * from "./ButtonNewDemo";
-export * from "./CardDemo";
-export * from "./DialogDemo";
-export * from "./AddThemeDemo";
-export * from "./UpdateThemeDemo";
-export * from "./ReplaceThemeDemo";
-export * from "./FormsDemo";
-export * from "./InputsDemo";
-export * from "./GroupDemo";
-export * from "./HeadingsDemo";
-export * from "./ImageDemo";
-export * from "./LabelDemo";
-export * from "./LinearGradientDemo";
-export * from "./ListItemDemo";
-export * from "./LucideIconsDemo";
-export * from "./PopoverDemo";
-export * from "./ProgressDemo";
-export * from "./RadioGroupDemo";
-export * from "./SelectDemo";
-export * from "./SeparatorDemo";
-export * from "./ShapesDemo";
-export * from "./ScrollViewDemo";
-export * from "./SheetDemo";
-export * from "./SliderDemo";
-export * from "./SpinnerDemo";
-export * from "./StacksDemo";
-export * from "./SwitchDemo";
-export * from "./CheckboxDemo";
-export * from "./TextDemo";
-export * from "./ThemeInverseDemo";
-export * from "./TooltipDemo";
-export * from "./ColorsDemo";
-export * from "./TokensDemo";
-export * from "./ToastDemo";
-export * from "./ToastDuplicateDemo";
-export * from "./TabsDemo";
-export * from "./TabsAdvancedDemo";
-export * from "./ToggleGroupDemo";
-export * from "./useOnIntersecting";
-//# sourceMappingURL=index.mjs.map

package/dist/esm/tamagui.config.mjs

@@ -1,6 +0,0 @@
-import { config } from "./conf";
-var tamagui_config_default = config;
-export {
-  tamagui_config_default as default
-};
-//# sourceMappingURL=tamagui.config.mjs.map

package/dist/esm/useOnIntersecting.mjs

@@ -1,68 +0,0 @@
-import { useEffect, useState } from "react";
-import { isWeb, useEvent } from "tamagui";
-function useIsIntersecting(refs, { once, ...opts } = {}) {
-  const [values, setValues] = useState([]);
-  if (isWeb) {
-    useOnIntersecting(
-      refs,
-      (entries) => {
-        const intersecting = entries.some((x) => x == null ? void 0 : x.isIntersecting);
-        if (once && !intersecting)
-          return;
-        setValues((prev) => {
-          const next = entries.map((e) => (e == null ? void 0 : e.isIntersecting) ?? false);
-          if (prev.length === next.length && prev.every((e, i) => e === next[i])) {
-            return prev;
-          }
-          return next;
-        });
-      },
-      opts
-    );
-  }
-  return Array.isArray(refs) ? values : values[0];
-}
-function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMargin } = {}, mountArgs = []) {
-  const onIntersectEvent = useEvent(incomingCbRaw);
-  useEffect(() => {
-    const refs = Array.isArray(refsIn) ? refsIn : [refsIn];
-    if (!refs.length)
-      return;
-    let dispose = null;
-    let currentEntries = [];
-    const options = {
-      threshold,
-      root,
-      rootMargin
-    };
-    const io = new IntersectionObserver((entries) => {
-      currentEntries = refs.map((ref, index) => {
-        return entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null;
-      });
-      dispose == null ? void 0 : dispose();
-      dispose = onIntersectEvent(currentEntries) || null;
-    }, options);
-    for (const ref of refs) {
-      if (ref.current) {
-        io.observe(ref.current);
-      }
-    }
-    return () => {
-      dispose == null ? void 0 : dispose();
-      io.disconnect();
-    };
-  }, [
-    onIntersectEvent,
-    refsIn,
-    root,
-    rootMargin,
-    threshold,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ...mountArgs
-  ]);
-}
-export {
-  useIsIntersecting,
-  useOnIntersecting
-};
-//# sourceMappingURL=useOnIntersecting.mjs.map

package/dist/jsx/ButtonHeadlessDemo.mjs

@@ -1,92 +0,0 @@
-import { ButtonBase } from "@tamagui/button";
-import { getButtonSized } from "@tamagui/get-button-sized";
-import { Activity, Airplay } from "@tamagui/lucide-icons";
-import {
-  XGroup,
-  XStack,
-  YStack,
-  getFontSize,
-  styled,
-  withStaticProperties
-} from "tamagui";
-const ButtonFrame = styled(ButtonBase, {
-  tag: "button",
-  justifyContent: "center",
-  alignItems: "center",
-  flexWrap: "nowrap",
-  flexDirection: "row",
-  cursor: "pointer",
-  hoverTheme: true,
-  pressTheme: true,
-  backgrounded: true,
-  borderWidth: 1,
-  borderColor: "$borderColor",
-  pressStyle: {
-    borderColor: "$borderColorPress"
-  },
-  focusStyle: {
-    outlineColor: "$borderColorFocus",
-    outlineStyle: "solid",
-    outlineWidth: 2
-  },
-  variants: {
-    size: {
-      "...size": getButtonSized
-    },
-    active: {
-      true: {
-        hoverStyle: {
-          backgroundColor: "$background"
-        }
-      }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none",
-        opacity: 0.5
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$true"
-  }
-});
-const TextFrame = styled(ButtonBase.Text, {
-  // ... your styles
-});
-const Button = withStaticProperties(ButtonFrame, {
-  Text: TextFrame,
-  Icon: ButtonBase.Icon
-});
-const SimpleButton = ButtonFrame.styleable((props, ref) => {
-  const { color, icon: Icon, iconAfter: IconAfter, size = "$3", ...buttonProps } = props;
-  const fontSize = getFontSize(size);
-  const iconSize = fontSize * 2;
-  return <Button ref={ref} size={size} {...buttonProps}>
-    {Icon && <Button.Icon size={iconSize}><Icon /></Button.Icon>}
-    <Button.Text color={color} size={props.size}>{props.children}</Button.Text>
-    {IconAfter && <Button.Icon size={iconSize}><IconAfter /></Button.Icon>}
-  </Button>;
-});
-function ButtonHeadlessDemo(props) {
-  return <YStack padding="$3" space="$3" {...props}>
-    <SimpleButton>Plain</SimpleButton>
-    <SimpleButton alignSelf="center" size="$6" space="$3" icon={Airplay}>Large</SimpleButton>
-    <XStack space="$2" justifyContent="center">
-      <SimpleButton size="$3" theme="alt2">Alt2</SimpleButton>
-      <SimpleButton size="$3" theme="yellow">Yellow</SimpleButton>
-    </XStack>
-    <XStack space="$2">
-      <SimpleButton themeInverse size="$3">Small Inverse</SimpleButton>
-      <SimpleButton size="$3" space="$1.5" iconAfter={Activity}>After</SimpleButton>
-    </XStack>
-    <XGroup>
-      <XGroup.Item><SimpleButton width="50%" size="$2" disabled>disabled</SimpleButton></XGroup.Item>
-      <XGroup.Item><SimpleButton width="50%" size="$2" chromeless>chromeless</SimpleButton></XGroup.Item>
-    </XGroup>
-  </YStack>;
-}
-export {
-  ButtonHeadlessDemo
-};
-//# sourceMappingURL=ButtonHeadlessDemo.mjs.map

package/dist/jsx/ButtonSimpleDemo.mjs

@@ -1,24 +0,0 @@
-import { Activity, Airplay } from "@tamagui/lucide-icons";
-import { Button, XGroup, XStack, YStack } from "tamagui";
-function ButtonSimpleDemo(props) {
-  return <YStack padding="$3" space="$3" {...props}>
-    <Button>Plain</Button>
-    <Button alignSelf="center" icon={Airplay} size="$6">Large</Button>
-    <XStack space="$2" justifyContent="center">
-      <Button size="$3" theme="alt2">Alt2</Button>
-      <Button size="$3" theme="yellow">Yellow</Button>
-    </XStack>
-    <XStack space="$2">
-      <Button themeInverse size="$3">Small Inverse</Button>
-      <Button iconAfter={Activity} size="$3">After</Button>
-    </XStack>
-    <XGroup>
-      <XGroup.Item><Button width="50%" size="$2" disabled opacity={0.5}>disabled</Button></XGroup.Item>
-      <XGroup.Item><Button width="50%" size="$2" chromeless>chromeless</Button></XGroup.Item>
-    </XGroup>
-  </YStack>;
-}
-export {
-  ButtonSimpleDemo
-};
-//# sourceMappingURL=ButtonSimpleDemo.mjs.map