@tamagui/demos 1.14.0 → 1.14.2

package/dist/jsx/TabsAdvancedDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n          borderColor=\"$color3\"\n          borderBottomWidth=\"$0.5\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
-  "mappings": "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",
-  "names": ["useState", "AnimatePresence", "Button", "H5", "SizableText", "Stack", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "x", "tabState", "setTabState", "setCurrentTab", "currentTab", "setIntentIndicator", "intentAt", "setActiveIndicator", "activeAt", "prevActiveAt", "direction", "enterVariant", "exitVariant", "handleOnInteraction", "type", "layout", "TabsRovingIndicator", "AnimatedYStack"]
+  "mappings": "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",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsAdvancedDemo.mjs

@@ -1,2 +1,220 @@
-import{useState as B}from"react";import{AnimatePresence as $,Button as H,H5 as M,SizableText as S,Stack as j,Tabs as T,XStack as E,YStack as V,styled as Y}from"tamagui";const F=["background","underline"],N={background:"Background Indicator",underline:"Underline Indicator"},J=()=>{const[n,v]=B(0),p=F[n];return<>{p==="underline"?<U/>:<O/>}<E ai="center"space pos="absolute"b="$3"l="$4"$xxs={{dsp:"none"}}><H size="$2"onPress={()=>v(I=>(I+1)%F.length)}>{N[p]}</H></E></>},O=()=>{const[n,v]=B({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),p=e=>v({...n,currentTab:e}),I=e=>v({...n,intentAt:e}),R=e=>v({...n,prevActiveAt:n.activeAt,activeAt:e}),{activeAt:t,intentAt:x,prevActiveAt:h,currentTab:A}=n,g=(()=>!t||!h||t.x===h.x?0:t.x>h.x?-1:1)(),P=g===1?"isLeft":g===-1?"isRight":"defaultFade",z=g===1?"isRight":g===-1?"isLeft":"defaultFade",m=(e,C)=>{e==="select"?R(C):I(C)};return<T value={A}onValueChange={p}orientation="horizontal"size="$4"padding="$2"height={150}flexDirection="column"activationMode="manual"backgroundColor="$background"borderRadius="$4"position="relative"><V><$>{x&&<L borderRadius="$4"width={x.width}height={x.height}x={x.x}y={x.y}/>}</$><$>{t&&<L borderRadius="$4"theme="active"width={t.width}height={t.height}x={t.x}y={t.y}/>}</$><T.List disablePassBorderRadius loop={!1}aria-label="Manage your account"space="$2"backgroundColor="transparent"><T.Tab unstyled value="tab1"onInteraction={m}><S>Profile</S></T.Tab><T.Tab unstyled value="tab2"onInteraction={m}><S>Connections</S></T.Tab><T.Tab unstyled value="tab3"onInteraction={m}><S>Notifications</S></T.Tab></T.List></V><$ exitBeforeEnter enterVariant={P}exitVariant={z}><D key={A}animation="100ms"x={0}opacity={1}flex={1}><T.Content value={A}forceMount flex={1}justifyContent="center"><M textAlign="center">{A}</M></T.Content></D></$></T>},U=()=>{const[n,v]=B({activeAt:null,currentTab:"tab1",intentAt:null,prevActiveAt:null}),p=e=>v({...n,currentTab:e}),I=e=>v({...n,intentAt:e}),R=e=>v({...n,prevActiveAt:n.activeAt,activeAt:e}),{activeAt:t,intentAt:x,prevActiveAt:h,currentTab:A}=n,g=(()=>!t||!h||t.x===h.x?0:t.x>h.x?-1:1)(),P=g===1?"isLeft":g===-1?"isRight":"defaultFade",z=g===1?"isRight":g===-1?"isLeft":"defaultFade",m=(e,C)=>{e==="select"?R(C):I(C)};return<T value={A}onValueChange={p}orientation="horizontal"size="$4"height={150}flexDirection="column"activationMode="manual"backgroundColor="$background"borderRadius="$4"><V><$>{x&&<L width={x.width}height="$0.5"x={x.x}bottom={0}/>}</$><$>{t&&<L theme="active"active width={t.width}height="$0.5"x={t.x}bottom={0}/>}</$><T.List disablePassBorderRadius loop={!1}aria-label="Manage your account"borderBottomLeftRadius={0}borderBottomRightRadius={0}paddingBottom="$1.5"borderColor="$color3"borderBottomWidth="$0.5"backgroundColor="transparent"><T.Tab unstyled padding="$5"value="tab1"onInteraction={m}><S>Profile</S></T.Tab><T.Tab unstyled padding="$5"value="tab2"onInteraction={m}><S>Connections</S></T.Tab><T.Tab unstyled padding="$5"value="tab3"onInteraction={m}><S>Notifications</S></T.Tab></T.List></V><$ exitBeforeEnter enterVariant={P}exitVariant={z}><D key={A}animation="100ms"x={0}opacity={1}flex={1}><T.Content value={A}forceMount flex={1}justifyContent="center"><M textAlign="center">{A}</M></T.Content></D></$></T>},L=Y(j,{position:"absolute",backgroundColor:"$color5",opacity:.7,animation:"100ms",enterStyle:{opacity:0},exitStyle:{opacity:0},variants:{active:{true:{backgroundColor:"$color8",opacity:.6}}}}),D=Y(V,{variants:{isLeft:{true:{x:-25,opacity:0}},isRight:{true:{x:25,opacity:0}},defaultFade:{true:{opacity:0}}}});export{J as TabsAdvancedDemo};
+import { useState } from "react";
+import {
+  AnimatePresence,
+  Button,
+  H5,
+  SizableText,
+  Stack,
+  Tabs,
+  XStack,
+  YStack,
+  styled
+} from "tamagui";
+const demos = ["background", "underline"];
+const demosTitle = {
+  background: "Background Indicator",
+  underline: "Underline Indicator"
+};
+const TabsAdvancedDemo = () => {
+  const [demoIndex, setDemoIndex] = useState(0);
+  const demo = demos[demoIndex];
+  return <>
+    {demo === "underline" ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}
+    <XStack ai="center" space pos="absolute" b="$3" l="$4" $xxs={{ dsp: "none" }}><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demosTitle[demo]}</Button></XStack>
+  </>;
+};
+const TabsAdvancedBackground = () => {
+  const [tabState, setTabState] = useState({
+    activeAt: null,
+    currentTab: "tab1",
+    intentAt: null,
+    prevActiveAt: null
+  });
+  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
+  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
+  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0;
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1;
+  })();
+  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
+  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
+  const handleOnInteraction = (type, layout) => {
+    if (type === "select") {
+      setActiveIndicator(layout);
+    } else {
+      setIntentIndicator(layout);
+    }
+  };
+  return <Tabs
+    value={currentTab}
+    onValueChange={setCurrentTab}
+    orientation="horizontal"
+    size="$4"
+    padding="$2"
+    height={150}
+    flexDirection="column"
+    activationMode="manual"
+    backgroundColor="$background"
+    borderRadius="$4"
+    position="relative"
+  >
+    <YStack>
+      <AnimatePresence>{intentAt && <TabsRovingIndicator
+        borderRadius="$4"
+        width={intentAt.width}
+        height={intentAt.height}
+        x={intentAt.x}
+        y={intentAt.y}
+      />}</AnimatePresence>
+      <AnimatePresence>{activeAt && <TabsRovingIndicator
+        borderRadius="$4"
+        theme="active"
+        width={activeAt.width}
+        height={activeAt.height}
+        x={activeAt.x}
+        y={activeAt.y}
+      />}</AnimatePresence>
+      <Tabs.List
+        disablePassBorderRadius
+        loop={false}
+        aria-label="Manage your account"
+        space="$2"
+        backgroundColor="transparent"
+      >
+        <Tabs.Tab unstyled value="tab1" onInteraction={handleOnInteraction}><SizableText>Profile</SizableText></Tabs.Tab>
+        <Tabs.Tab unstyled value="tab2" onInteraction={handleOnInteraction}><SizableText>Connections</SizableText></Tabs.Tab>
+        <Tabs.Tab unstyled value="tab3" onInteraction={handleOnInteraction}><SizableText>Notifications</SizableText></Tabs.Tab>
+      </Tabs.List>
+    </YStack>
+    <AnimatePresence
+      exitBeforeEnter
+      enterVariant={enterVariant}
+      exitVariant={exitVariant}
+    ><AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}><Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center"><H5 textAlign="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
+  </Tabs>;
+};
+const TabsAdvancedUnderline = () => {
+  const [tabState, setTabState] = useState({
+    activeAt: null,
+    currentTab: "tab1",
+    intentAt: null,
+    prevActiveAt: null
+  });
+  const setCurrentTab = (currentTab2) => setTabState({ ...tabState, currentTab: currentTab2 });
+  const setIntentIndicator = (intentAt2) => setTabState({ ...tabState, intentAt: intentAt2 });
+  const setActiveIndicator = (activeAt2) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt: activeAt2 });
+  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0;
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1;
+  })();
+  const enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade";
+  const exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade";
+  const handleOnInteraction = (type, layout) => {
+    if (type === "select") {
+      setActiveIndicator(layout);
+    } else {
+      setIntentIndicator(layout);
+    }
+  };
+  return <Tabs
+    value={currentTab}
+    onValueChange={setCurrentTab}
+    orientation="horizontal"
+    size="$4"
+    height={150}
+    flexDirection="column"
+    activationMode="manual"
+    backgroundColor="$background"
+    borderRadius="$4"
+  >
+    <YStack>
+      <AnimatePresence>{intentAt && <TabsRovingIndicator
+        width={intentAt.width}
+        height="$0.5"
+        x={intentAt.x}
+        bottom={0}
+      />}</AnimatePresence>
+      <AnimatePresence>{activeAt && <TabsRovingIndicator
+        theme="active"
+        active
+        width={activeAt.width}
+        height="$0.5"
+        x={activeAt.x}
+        bottom={0}
+      />}</AnimatePresence>
+      <Tabs.List
+        disablePassBorderRadius
+        loop={false}
+        aria-label="Manage your account"
+        borderBottomLeftRadius={0}
+        borderBottomRightRadius={0}
+        paddingBottom="$1.5"
+        borderColor="$color3"
+        borderBottomWidth="$0.5"
+        backgroundColor="transparent"
+      >
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab1"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Profile</SizableText></Tabs.Tab>
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab2"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Connections</SizableText></Tabs.Tab>
+        <Tabs.Tab
+          unstyled
+          padding="$5"
+          value="tab3"
+          onInteraction={handleOnInteraction}
+        ><SizableText>Notifications</SizableText></Tabs.Tab>
+      </Tabs.List>
+    </YStack>
+    <AnimatePresence
+      exitBeforeEnter
+      enterVariant={enterVariant}
+      exitVariant={exitVariant}
+    ><AnimatedYStack key={currentTab} animation="100ms" x={0} opacity={1} flex={1}><Tabs.Content value={currentTab} forceMount flex={1} justifyContent="center"><H5 textAlign="center">{currentTab}</H5></Tabs.Content></AnimatedYStack></AnimatePresence>
+  </Tabs>;
+};
+const TabsRovingIndicator = styled(Stack, {
+  position: "absolute",
+  backgroundColor: "$color5",
+  opacity: 0.7,
+  animation: "100ms",
+  enterStyle: {
+    opacity: 0
+  },
+  exitStyle: {
+    opacity: 0
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "$color8",
+        opacity: 0.6
+      }
+    }
+  }
+});
+const AnimatedYStack = styled(YStack, {
+  variants: {
+    isLeft: { true: { x: -25, opacity: 0 } },
+    isRight: { true: { x: 25, opacity: 0 } },
+    defaultFade: { true: { opacity: 0 } }
+  }
+});
+export {
+  TabsAdvancedDemo
+};
 //# sourceMappingURL=TabsAdvancedDemo.mjs.map

package/dist/jsx/TabsAdvancedDemo.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n          borderColor=\"$color3\"\n          borderBottomWidth=\"$0.5\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
-  "mappings": "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",
-  "names": ["useState", "AnimatePresence", "Button", "H5", "SizableText", "Stack", "Tabs", "XStack", "YStack", "styled", "demos", "demosTitle", "TabsAdvancedDemo", "demoIndex", "setDemoIndex", "demo", "TabsAdvancedUnderline", "TabsAdvancedBackground", "x", "tabState", "setTabState", "setCurrentTab", "currentTab", "setIntentIndicator", "intentAt", "setActiveIndicator", "activeAt", "prevActiveAt", "direction", "enterVariant", "exitVariant", "handleOnInteraction", "type", "layout", "TabsRovingIndicator", "AnimatedYStack"]
+  "mappings": "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",
+  "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsDemo.js

@@ -1,2 +1,106 @@
-import{useState as B}from"react";import{Button as D,H5 as C,Separator as P,SizableText as $,Tabs as T,XStack as I,YStack as N}from"tamagui";const k=["horizontal","vertical"],V={horizontal:"Horizontal",vertical:"Vertical"};function Y(){const[H,w]=B(0),R=k[H];return<N paddingHorizontal="$4"position="unset">{R==="horizontal"?<A/>:<F/>}<I alignItems="center"space position="absolute"bottom="$3"left="$4"$xxs={{display:"none"}}><D size="$2"onPress={()=>w(L=>(L+1)%k.length)}>{V[R]}</D></I></N>}const A=()=><T defaultValue="tab1"orientation="horizontal"flexDirection="column"width={400}height={150}borderRadius="$4"borderWidth="$0.25"overflow="hidden"borderColor="$borderColor"><T.List separator={<P vertical/>}disablePassBorderRadius="bottom"aria-label="Manage your account"><T.Tab flex={1}value="tab1"><$ fontFamily="$body">Profile</$></T.Tab><T.Tab flex={1}value="tab2"><$ fontFamily="$body">Connections</$></T.Tab><T.Tab flex={1}value="tab3"><$ fontFamily="$body">Notifications</$></T.Tab></T.List><P/><S value="tab1"><C>Profile</C></S><S value="tab2"><C>Connections</C></S><S value="tab3"><C>Notifications</C></S></T>,F=()=><T defaultValue="tab1"flexDirection="row"orientation="vertical"width={400}borderRadius="$4"borderWidth="$0.25"overflow="hidden"borderColor="$borderColor"><T.List disablePassBorderRadius="end"aria-label="Manage your account"separator={<P/>}><T.Tab value="tab1"><$>Profile</$></T.Tab><T.Tab value="tab2"><$>Connections</$></T.Tab><T.Tab value="tab3"><$>Notifications</$></T.Tab></T.List><P vertical/><S value="tab1"><C textAlign="center">Profile</C></S><S value="tab2"><C textAlign="center">Connections</C></S><S value="tab3"><C textAlign="center">Notifications</C></S></T>,S=H=><T.Content backgroundColor="$background"key="tab3"padding="$2"alignItems="center"justifyContent="center"flex={1}borderColor="$background"borderRadius="$2"borderTopLeftRadius={0}borderTopRightRadius={0}borderWidth="$2"{...H}>{H.children}</T.Content>;export{Y as TabsDemo};
+import { useState } from "react";
+import {
+  Button,
+  H5,
+  Separator,
+  SizableText,
+  Tabs,
+  XStack,
+  YStack
+} from "tamagui";
+const demos = ["horizontal", "vertical"];
+const demosTitle = {
+  horizontal: "Horizontal",
+  vertical: "Vertical"
+};
+function TabsDemo() {
+  const [demoIndex, setDemoIndex] = useState(0);
+  const demo = demos[demoIndex];
+  return (
+    // web only fix for position relative
+    <YStack paddingHorizontal="$4" position="unset">
+      {demo === "horizontal" ? <HorizontalTabs /> : <VerticalTabs />}
+      <XStack
+        alignItems="center"
+        space
+        position="absolute"
+        bottom="$3"
+        left="$4"
+        $xxs={{ display: "none" }}
+      ><Button size="$2" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>{demosTitle[demo]}</Button></XStack>
+    </YStack>
+  );
+}
+const HorizontalTabs = () => {
+  return <Tabs
+    defaultValue="tab1"
+    orientation="horizontal"
+    flexDirection="column"
+    width={400}
+    height={150}
+    borderRadius="$4"
+    borderWidth="$0.25"
+    overflow="hidden"
+    borderColor="$borderColor"
+  >
+    <Tabs.List
+      separator={<Separator vertical />}
+      disablePassBorderRadius="bottom"
+      aria-label="Manage your account"
+    >
+      <Tabs.Tab flex={1} value="tab1"><SizableText fontFamily="$body">Profile</SizableText></Tabs.Tab>
+      <Tabs.Tab flex={1} value="tab2"><SizableText fontFamily="$body">Connections</SizableText></Tabs.Tab>
+      <Tabs.Tab flex={1} value="tab3"><SizableText fontFamily="$body">Notifications</SizableText></Tabs.Tab>
+    </Tabs.List>
+    <Separator />
+    <TabsContent value="tab1"><H5>Profile</H5></TabsContent>
+    <TabsContent value="tab2"><H5>Connections</H5></TabsContent>
+    <TabsContent value="tab3"><H5>Notifications</H5></TabsContent>
+  </Tabs>;
+};
+const VerticalTabs = () => {
+  return <Tabs
+    defaultValue="tab1"
+    flexDirection="row"
+    orientation="vertical"
+    width={400}
+    borderRadius="$4"
+    borderWidth="$0.25"
+    overflow="hidden"
+    borderColor="$borderColor"
+  >
+    <Tabs.List
+      disablePassBorderRadius="end"
+      aria-label="Manage your account"
+      separator={<Separator />}
+    >
+      <Tabs.Tab value="tab1"><SizableText>Profile</SizableText></Tabs.Tab>
+      <Tabs.Tab value="tab2"><SizableText>Connections</SizableText></Tabs.Tab>
+      <Tabs.Tab value="tab3"><SizableText>Notifications</SizableText></Tabs.Tab>
+    </Tabs.List>
+    <Separator vertical />
+    <TabsContent value="tab1"><H5 textAlign="center">Profile</H5></TabsContent>
+    <TabsContent value="tab2"><H5 textAlign="center">Connections</H5></TabsContent>
+    <TabsContent value="tab3"><H5 textAlign="center">Notifications</H5></TabsContent>
+  </Tabs>;
+};
+const TabsContent = (props) => {
+  return <Tabs.Content
+    backgroundColor="$background"
+    key="tab3"
+    padding="$2"
+    alignItems="center"
+    justifyContent="center"
+    flex={1}
+    borderColor="$background"
+    borderRadius="$2"
+    borderTopLeftRadius={0}
+    borderTopRightRadius={0}
+    borderWidth="$2"
+    {...props}
+  >{props.children}</Tabs.Content>;
+};
+export {
+  TabsDemo
+};
 //# sourceMappingURL=TabsDemo.js.map

package/dist/jsx/TabsDemo.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
   "sourcesContent": ["import { useState } from 'react'\nimport {\n  Button,\n  H5,\n  Separator,\n  SizableText,\n  Tabs,\n  TabsContentProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  horizontal: 'Horizontal',\n  vertical: 'Vertical',\n}\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        separator={<Separator vertical />}\n        disablePassBorderRadius=\"bottom\"\n        aria-label=\"Manage your account\"\n      >\n        <Tabs.Tab flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator />\n      <TabsContent value=\"tab1\">\n        <H5>Profile</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab2\">\n        <H5>Connections</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab3\">\n        <H5>Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        disablePassBorderRadius=\"end\"\n        aria-label=\"Manage your account\"\n        separator={<Separator />}\n      >\n        <Tabs.Tab value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator vertical />\n      <TabsContent value=\"tab1\">\n        <H5 textAlign=\"center\">Profile</H5>\n      </TabsContent>\n      <TabsContent value=\"tab2\">\n        <H5 textAlign=\"center\">Connections</H5>\n      </TabsContent>\n      <TabsContent value=\"tab3\">\n        <H5 textAlign=\"center\">Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst TabsContent = (props: TabsContentProps) => {\n  return (\n    <Tabs.Content\n      backgroundColor=\"$background\"\n      key=\"tab3\"\n      padding=\"$2\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flex={1}\n      borderColor=\"$background\"\n      borderRadius=\"$2\"\n      borderTopLeftRadius={0}\n      borderTopRightRadius={0}\n      borderWidth=\"$2\"\n      {...props}\n    >\n      {props.children}\n    </Tabs.Content>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["useState", "Button", "H5", "Separator", "SizableText", "Tabs", "XStack", "YStack", "demos", "demosTitle", "TabsDemo", "demoIndex", "setDemoIndex", "demo", "HorizontalTabs", "VerticalTabs", "x", "TabsContent", "props"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,QAAQ,CAAC,cAAc,UAAU;AACvC,MAAM,aAAqD;AAAA,EACzD,YAAY;AAAA,EACZ,UAAU;AACZ;AAEO,SAAS,WAAW;AACzB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAE5B;AAAA;AAAA,IAEE,CAAC,OAAO,kBAAkB,KAAK,SAAU;AAAA,OACtC,SAAS,eAAe,CAAC,eAAe,KAAK,CAAC,aAAa;AAAA,MAE5D,CAAC;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,SAAS;AAAA,QACT,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM,EAAE,SAAS,OAAO;AAAA,OAExB,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,IACxE,WAAW,IAAI,EAClB,EAFC,OAGH,EAXC;AAAA,IAYH,EAfC;AAAA;AAiBL;AAEA,MAAM,iBAAiB,MAAM;AAC3B,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,IAEZ,CAAC,KAAK;AAAA,MACJ,WAAW,CAAC,UAAU,SAAS;AAAA,MAC/B,wBAAwB;AAAA,MACxB,WAAW;AAAA;AAAA,MAEX,CAAC,KAAK,IAAI,MAAM,GAAG,MAAM,OACvB,CAAC,YAAY,WAAW,QAAQ,OAAO,EAAtC,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,IAAI,MAAM,GAAG,MAAM,OACvB,CAAC,YAAY,WAAW,QAAQ,WAAW,EAA1C,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,IAAI,MAAM,GAAG,MAAM,OACvB,CAAC,YAAY,WAAW,QAAQ,aAAa,EAA5C,YACH,EAFC,KAAK;AAAA,IAGR,EAdC,KAAK;AAAA,IAeN,CAAC,UAAU;AAAA,IACX,CAAC,YAAY,MAAM,OACjB,CAAC,GAAG,OAAO,EAAV,GACH,EAFC;AAAA,IAID,CAAC,YAAY,MAAM,OACjB,CAAC,GAAG,WAAW,EAAd,GACH,EAFC;AAAA,IAID,CAAC,YAAY,MAAM,OACjB,CAAC,GAAG,aAAa,EAAhB,GACH,EAFC;AAAA,EAGH,EAtCC;AAwCL;AAEA,MAAM,eAAe,MAAM;AACzB,SACE,CAAC;AAAA,IACC,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA;AAAA,IAEZ,CAAC,KAAK;AAAA,MACJ,wBAAwB;AAAA,MACxB,WAAW;AAAA,MACX,WAAW,CAAC,UAAU;AAAA;AAAA,MAEtB,CAAC,KAAK,IAAI,MAAM,OACd,CAAC,YAAY,OAAO,EAAnB,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,IAAI,MAAM,OACd,CAAC,YAAY,WAAW,EAAvB,YACH,EAFC,KAAK;AAAA,MAGN,CAAC,KAAK,IAAI,MAAM,OACd,CAAC,YAAY,aAAa,EAAzB,YACH,EAFC,KAAK;AAAA,IAGR,EAdC,KAAK;AAAA,IAeN,CAAC,UAAU,SAAS;AAAA,IACpB,CAAC,YAAY,MAAM,OACjB,CAAC,GAAG,UAAU,SAAS,OAAO,EAA7B,GACH,EAFC;AAAA,IAGD,CAAC,YAAY,MAAM,OACjB,CAAC,GAAG,UAAU,SAAS,WAAW,EAAjC,GACH,EAFC;AAAA,IAGD,CAAC,YAAY,MAAM,OACjB,CAAC,GAAG,UAAU,SAAS,aAAa,EAAnC,GACH,EAFC;AAAA,EAGH,EAnCC;AAqCL;AAEA,MAAM,cAAc,CAAC,UAA4B;AAC/C,SACE,CAAC,KAAK;AAAA,IACJ,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,YAAY;AAAA,QACR;AAAA,IAEH,MAAM,SACT,EAfC,KAAK;AAiBV;",
+  "names": []
 }