@tamagui/demos 1.10.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/TabsAdvancedDemo.js +6 -6
- package/dist/cjs/TabsAdvancedDemo.js.map +1 -1
- package/dist/cjs/ToggleGroupDemo.js +1 -1
- package/dist/cjs/ToggleGroupDemo.js.map +2 -2
- package/dist/esm/TabsAdvancedDemo.js +6 -6
- package/dist/esm/TabsAdvancedDemo.js.map +1 -1
- package/dist/esm/TabsAdvancedDemo.mjs +6 -6
- package/dist/esm/TabsAdvancedDemo.mjs.map +1 -1
- package/dist/esm/ToggleGroupDemo.js +1 -1
- package/dist/esm/ToggleGroupDemo.js.map +2 -2
- package/dist/esm/ToggleGroupDemo.mjs +1 -1
- package/dist/esm/ToggleGroupDemo.mjs.map +2 -2
- package/dist/jsx/TabsAdvancedDemo.js +6 -6
- package/dist/jsx/TabsAdvancedDemo.js.map +1 -1
- package/dist/jsx/TabsAdvancedDemo.mjs +6 -6
- package/dist/jsx/TabsAdvancedDemo.mjs.map +1 -1
- package/dist/jsx/ToggleGroupDemo.js +1 -1
- package/dist/jsx/ToggleGroupDemo.js.map +2 -2
- package/dist/jsx/ToggleGroupDemo.mjs +1 -1
- package/dist/jsx/ToggleGroupDemo.mjs.map +2 -2
- package/package.json +17 -17
- package/src/TabsAdvancedDemo.tsx +6 -6
- package/src/ToggleGroupDemo.tsx +1 -1
|
@@ -26,7 +26,7 @@ var import_react = require("react");
|
|
|
26
26
|
var import_tamagui = require("tamagui");
|
|
27
27
|
const TabsAdvancedDemo = () => {
|
|
28
28
|
const [currentTab, setCurrentTab] = (0, import_react.useState)("tab1");
|
|
29
|
-
const [
|
|
29
|
+
const [intentIndicator, setIntentIndicator] = (0, import_react.useState)(null);
|
|
30
30
|
const [selectIndicator, setSelectIndicator] = (0, import_react.useState)(null);
|
|
31
31
|
const prevSelectionIndicatorLayout = (0, import_react.useRef)(null);
|
|
32
32
|
const handleUpdateSelectionIndicator = (newSize) => {
|
|
@@ -70,13 +70,13 @@ const TabsAdvancedDemo = () => {
|
|
|
70
70
|
overflow: "visible",
|
|
71
71
|
pb: "$1.5",
|
|
72
72
|
children: [
|
|
73
|
-
|
|
73
|
+
intentIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
74
|
TabsRovingIndicator,
|
|
75
75
|
{
|
|
76
|
-
width:
|
|
77
|
-
height:
|
|
78
|
-
x:
|
|
79
|
-
y:
|
|
76
|
+
width: intentIndicator.width,
|
|
77
|
+
height: intentIndicator.height,
|
|
78
|
+
x: intentIndicator.x,
|
|
79
|
+
y: intentIndicator.y
|
|
80
80
|
}
|
|
81
81
|
),
|
|
82
82
|
selectIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [
|
|
4
|
+
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n // Layout of the trigger user selected\n const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectIndicator\n setSelectIndicator(newSize)\n }\n\n /**\n * -1: from left\n * 0: n/a\n * 1: from right\n */\n const direction = (() => {\n if (\n !selectIndicator ||\n !prevSelectionIndicatorLayout.current ||\n selectIndicator.x === prevSelectionIndicatorLayout.current.x\n ) {\n return 0\n }\n return selectIndicator.x > prevSelectionIndicatorLayout.current.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: TabsTriggerProps['onInteraction'] = (type, layout) => {\n if (type === 'select') {\n handleUpdateSelectionIndicator(layout)\n } else {\n setIntentIndicator(layout)\n }\n }\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"horizontal\"\n br=\"$4\"\n size=\"$3\"\n p=\"$2\"\n height={150}\n flexDirection=\"column\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n <Tabs.List\n loop={false}\n aria-label=\"Manage your account\"\n disablePassBorderRadius\n overflow=\"visible\"\n pb=\"$1.5\"\n >\n {intentIndicator && (\n <TabsRovingIndicator\n width={intentIndicator.width}\n height={intentIndicator.height}\n x={intentIndicator.x}\n y={intentIndicator.y}\n />\n )}\n\n {selectIndicator && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width={selectIndicator.width}\n height=\"$0.25\"\n x={selectIndicator.x}\n borderRadius={0}\n bottom={-3}\n />\n )}\n\n <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\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} o={1} f={1}>\n <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n <H5 ta=\"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: 1,\n animation: '100ms',\n borderRadius: '$4',\n\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\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"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEQ;AAtER,mBAAiC;AACjC,qBAUO;AAEA,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,MAAM;AAGnD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAkC,IAAI;AAGpF,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAkC,IAAI;AACpF,QAAM,mCAA+B,qBAAgC,IAAI;AAEzE,QAAM,iCAAiC,CAAC,YAAqC;AAC3E,iCAA6B,UAAU;AACvC,uBAAmB,OAAO;AAAA,EAC5B;AAOA,QAAM,aAAa,MAAM;AACvB,QACE,CAAC,mBACD,CAAC,6BAA6B,WAC9B,gBAAgB,MAAM,6BAA6B,QAAQ,GAC3D;AACA,aAAO;AAAA,IACT;AACA,WAAO,gBAAgB,IAAI,6BAA6B,QAAQ,IAAI,KAAK;AAAA,EAC3E,GAAG;AAEH,QAAM,eACJ,cAAc,IAAI,WAAW,cAAc,KAAK,YAAY;AAC9D,QAAM,cACJ,cAAc,IAAI,YAAY,cAAc,KAAK,WAAW;AAE9D,QAAM,sBAAyD,CAAC,MAAM,WAAW;AAC/E,QAAI,SAAS,UAAU;AACrB,qCAA+B,MAAM;AAAA,IACvC,OAAO;AACL,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,IAAG;AAAA,MACH,MAAK;AAAA,MACL,GAAE;AAAA,MACF,QAAQ;AAAA,MACR,eAAc;AAAA,MACd,gBAAe;AAAA,MAEf;AAAA,oDAAC,yBAAO,aAAY,WAAU,mBAAkB,QAC9C;AAAA,UAAC,oBAAK;AAAA,UAAL;AAAA,YACC,MAAM;AAAA,YACN,cAAW;AAAA,YACX,yBAAuB;AAAA,YACvB,UAAS;AAAA,YACT,IAAG;AAAA,YAEF;AAAA,iCACC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,gBAAgB;AAAA,kBACvB,QAAQ,gBAAgB;AAAA,kBACxB,GAAG,gBAAgB;AAAA,kBACnB,GAAG,gBAAgB;AAAA;AAAA,cACrB;AAAA,cAGD,mBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAM;AAAA,kBACN,OAAO,gBAAgB;AAAA,kBACvB,QAAO;AAAA,kBACP,GAAG,gBAAgB;AAAA,kBACnB,cAAc;AAAA,kBACd,QAAQ;AAAA;AAAA,cACV;AAAA,cAGF,4CAAC,oBAAK,SAAL,EAAa,OAAM,QAAO,eAAe,qBACxC,sDAAC,8BAAY,qBAAO,GACtB;AAAA,cACA,4CAAC,oBAAK,SAAL,EAAa,OAAM,QAAO,eAAe,qBACxC,sDAAC,8BAAY,yBAAW,GAC1B;AAAA,cACA,4CAAC,oBAAK,SAAL,EAAa,OAAM,QAAO,eAAe,qBACxC,sDAAC,8BAAY,2BAAa,GAC5B;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,iBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEA,sDAAC,kBAAgC,WAAU,SAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAChE,sDAAC,oBAAK,SAAL,EAAa,OAAO,YAAY,YAAU,MAAC,GAAG,GAAG,IAAG,UACnD,sDAAC,qBAAG,IAAG,UAAU,sBAAW,GAC9B,KAHmB,UAIrB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,0BAAsB,uBAAO,sBAAO;AAAA,EACxC,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,qBAAiB,uBAAO,uBAAQ;AAAA,EACpC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,IACvC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,EAAE;AAAA,IACvC,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;AAAA,EACtC;AACF,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,7 +54,7 @@ function ToggleGroupComponent(props) {
|
|
|
54
54
|
id,
|
|
55
55
|
type: props.type,
|
|
56
56
|
size: props.size,
|
|
57
|
-
disableDeactivation: props.type === "single",
|
|
57
|
+
disableDeactivation: props.type === "single" ? true : void 0,
|
|
58
58
|
children: [
|
|
59
59
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignLeft, {}) }),
|
|
60
60
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.AlignCenter, {}) }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\"}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAmD;AACnD,qBAA+D;AAExD,SAAS,kBAAkB;AAChC,SACE,6CAAC,yBAAO,IAAG,UAAS,OAAM,OACxB;AAAA,iDAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,6CAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\" ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAmD;AACnD,qBAA+D;AAExD,SAAS,kBAAkB;AAChC,SACE,6CAAC,yBAAO,IAAG,UAAS,OAAM,OACxB;AAAA,iDAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,6CAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,4CAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,oDAAC,wBAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,0DAAC,2BAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,sDAAC,iCAAU,GACb;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,sDAAC,mCAAY,GACf;AAAA,cACA,4CAAC,2BAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,sDAAC,kCAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
} from "tamagui";
|
|
12
12
|
const TabsAdvancedDemo = () => {
|
|
13
13
|
const [currentTab, setCurrentTab] = useState("tab1");
|
|
14
|
-
const [
|
|
14
|
+
const [intentIndicator, setIntentIndicator] = useState(null);
|
|
15
15
|
const [selectIndicator, setSelectIndicator] = useState(null);
|
|
16
16
|
const prevSelectionIndicatorLayout = useRef(null);
|
|
17
17
|
const handleUpdateSelectionIndicator = (newSize) => {
|
|
@@ -55,13 +55,13 @@ const TabsAdvancedDemo = () => {
|
|
|
55
55
|
overflow: "visible",
|
|
56
56
|
pb: "$1.5",
|
|
57
57
|
children: [
|
|
58
|
-
|
|
58
|
+
intentIndicator && /* @__PURE__ */ jsx(
|
|
59
59
|
TabsRovingIndicator,
|
|
60
60
|
{
|
|
61
|
-
width:
|
|
62
|
-
height:
|
|
63
|
-
x:
|
|
64
|
-
y:
|
|
61
|
+
width: intentIndicator.width,
|
|
62
|
+
height: intentIndicator.height,
|
|
63
|
+
x: intentIndicator.x,
|
|
64
|
+
y: intentIndicator.y
|
|
65
65
|
}
|
|
66
66
|
),
|
|
67
67
|
selectIndicator && /* @__PURE__ */ jsx(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [
|
|
4
|
+
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n // Layout of the trigger user selected\n const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectIndicator\n setSelectIndicator(newSize)\n }\n\n /**\n * -1: from left\n * 0: n/a\n * 1: from right\n */\n const direction = (() => {\n if (\n !selectIndicator ||\n !prevSelectionIndicatorLayout.current ||\n selectIndicator.x === prevSelectionIndicatorLayout.current.x\n ) {\n return 0\n }\n return selectIndicator.x > prevSelectionIndicatorLayout.current.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: TabsTriggerProps['onInteraction'] = (type, layout) => {\n if (type === 'select') {\n handleUpdateSelectionIndicator(layout)\n } else {\n setIntentIndicator(layout)\n }\n }\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"horizontal\"\n br=\"$4\"\n size=\"$3\"\n p=\"$2\"\n height={150}\n flexDirection=\"column\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n <Tabs.List\n loop={false}\n aria-label=\"Manage your account\"\n disablePassBorderRadius\n overflow=\"visible\"\n pb=\"$1.5\"\n >\n {intentIndicator && (\n <TabsRovingIndicator\n width={intentIndicator.width}\n height={intentIndicator.height}\n x={intentIndicator.x}\n y={intentIndicator.y}\n />\n )}\n\n {selectIndicator && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width={selectIndicator.width}\n height=\"$0.25\"\n x={selectIndicator.x}\n borderRadius={0}\n bottom={-3}\n />\n )}\n\n <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\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} o={1} f={1}>\n <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n <H5 ta=\"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: 1,\n animation: '100ms',\n borderRadius: '$4',\n\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
} from "tamagui";
|
|
12
12
|
const TabsAdvancedDemo = () => {
|
|
13
13
|
const [currentTab, setCurrentTab] = useState("tab1");
|
|
14
|
-
const [
|
|
14
|
+
const [intentIndicator, setIntentIndicator] = useState(null);
|
|
15
15
|
const [selectIndicator, setSelectIndicator] = useState(null);
|
|
16
16
|
const prevSelectionIndicatorLayout = useRef(null);
|
|
17
17
|
const handleUpdateSelectionIndicator = (newSize) => {
|
|
@@ -55,13 +55,13 @@ const TabsAdvancedDemo = () => {
|
|
|
55
55
|
overflow: "visible",
|
|
56
56
|
pb: "$1.5",
|
|
57
57
|
children: [
|
|
58
|
-
|
|
58
|
+
intentIndicator && /* @__PURE__ */ jsx(
|
|
59
59
|
TabsRovingIndicator,
|
|
60
60
|
{
|
|
61
|
-
width:
|
|
62
|
-
height:
|
|
63
|
-
x:
|
|
64
|
-
y:
|
|
61
|
+
width: intentIndicator.width,
|
|
62
|
+
height: intentIndicator.height,
|
|
63
|
+
x: intentIndicator.x,
|
|
64
|
+
y: intentIndicator.y
|
|
65
65
|
}
|
|
66
66
|
),
|
|
67
67
|
selectIndicator && /* @__PURE__ */ jsx(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [
|
|
4
|
+
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n // Layout of the trigger user selected\n const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectIndicator\n setSelectIndicator(newSize)\n }\n\n /**\n * -1: from left\n * 0: n/a\n * 1: from right\n */\n const direction = (() => {\n if (\n !selectIndicator ||\n !prevSelectionIndicatorLayout.current ||\n selectIndicator.x === prevSelectionIndicatorLayout.current.x\n ) {\n return 0\n }\n return selectIndicator.x > prevSelectionIndicatorLayout.current.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: TabsTriggerProps['onInteraction'] = (type, layout) => {\n if (type === 'select') {\n handleUpdateSelectionIndicator(layout)\n } else {\n setIntentIndicator(layout)\n }\n }\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"horizontal\"\n br=\"$4\"\n size=\"$3\"\n p=\"$2\"\n height={150}\n flexDirection=\"column\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n <Tabs.List\n loop={false}\n aria-label=\"Manage your account\"\n disablePassBorderRadius\n overflow=\"visible\"\n pb=\"$1.5\"\n >\n {intentIndicator && (\n <TabsRovingIndicator\n width={intentIndicator.width}\n height={intentIndicator.height}\n x={intentIndicator.x}\n y={intentIndicator.y}\n />\n )}\n\n {selectIndicator && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width={selectIndicator.width}\n height=\"$0.25\"\n x={selectIndicator.x}\n borderRadius={0}\n bottom={-3}\n />\n )}\n\n <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\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} o={1} f={1}>\n <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n <H5 ta=\"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: 1,\n animation: '100ms',\n borderRadius: '$4',\n\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ function ToggleGroupComponent(props) {
|
|
|
31
31
|
id,
|
|
32
32
|
type: props.type,
|
|
33
33
|
size: props.size,
|
|
34
|
-
disableDeactivation: props.type === "single",
|
|
34
|
+
disableDeactivation: props.type === "single" ? true : void 0,
|
|
35
35
|
children: [
|
|
36
36
|
/* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
|
|
37
37
|
/* @__PURE__ */ jsx(ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\"}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\" ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -31,7 +31,7 @@ function ToggleGroupComponent(props) {
|
|
|
31
31
|
id,
|
|
32
32
|
type: props.type,
|
|
33
33
|
size: props.size,
|
|
34
|
-
disableDeactivation: props.type === "single",
|
|
34
|
+
disableDeactivation: props.type === "single" ? true : void 0,
|
|
35
35
|
children: [
|
|
36
36
|
/* @__PURE__ */ jsx(ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", children: /* @__PURE__ */ jsx(AlignLeft, {}) }),
|
|
37
37
|
/* @__PURE__ */ jsx(ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", children: /* @__PURE__ */ jsx(AlignCenter, {}) }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\"}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\" ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAMM,SACE,KADF;AANN,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,OACxB;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,cAAa;AAAA,MACvE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,cAAa;AAAA,OAC3E;AAAA,IACA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,wBAAqB,MAAK,UAAS,MAAK,MAAK,aAAY,YAAW;AAAA,MACrE,oBAAC,wBAAqB,MAAK,YAAW,MAAK,MAAK,aAAY,YAAW;AAAA,OACzE;AAAA,KACF;AAEJ;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,MAC5D,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAM;AAAA,MAEN;AAAA,4BAAC,SAAM,IAAG,MAAM,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IACtD,gBAAM,SAAS,WAAW,WAAW,YACxC;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB;AAAA,YACA,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,YACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA,YAEtD;AAAA,kCAAC,YAAY,MAAZ,EAAiB,OAAM,QAAO,cAAW,gBACxC,8BAAC,aAAU,GACb;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,UAAS,cAAW,kBAC1C,8BAAC,eAAY,GACf;AAAA,cACA,oBAAC,YAAY,MAAZ,EAAiB,OAAM,SAAQ,cAAW,iBACzC,8BAAC,cAAW,GACd;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "tamagui";
|
|
11
11
|
const TabsAdvancedDemo = () => {
|
|
12
12
|
const [currentTab, setCurrentTab] = useState("tab1");
|
|
13
|
-
const [
|
|
13
|
+
const [intentIndicator, setIntentIndicator] = useState(null);
|
|
14
14
|
const [selectIndicator, setSelectIndicator] = useState(null);
|
|
15
15
|
const prevSelectionIndicatorLayout = useRef(null);
|
|
16
16
|
const handleUpdateSelectionIndicator = (newSize) => {
|
|
@@ -50,11 +50,11 @@ const TabsAdvancedDemo = () => {
|
|
|
50
50
|
overflow="visible"
|
|
51
51
|
pb="$1.5"
|
|
52
52
|
>
|
|
53
|
-
{
|
|
54
|
-
width={
|
|
55
|
-
height={
|
|
56
|
-
x={
|
|
57
|
-
y={
|
|
53
|
+
{intentIndicator && <TabsRovingIndicator
|
|
54
|
+
width={intentIndicator.width}
|
|
55
|
+
height={intentIndicator.height}
|
|
56
|
+
x={intentIndicator.x}
|
|
57
|
+
y={intentIndicator.y}
|
|
58
58
|
/>}
|
|
59
59
|
{selectIndicator && <TabsRovingIndicator
|
|
60
60
|
theme="active"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [
|
|
4
|
+
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n // Layout of the trigger user selected\n const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectIndicator\n setSelectIndicator(newSize)\n }\n\n /**\n * -1: from left\n * 0: n/a\n * 1: from right\n */\n const direction = (() => {\n if (\n !selectIndicator ||\n !prevSelectionIndicatorLayout.current ||\n selectIndicator.x === prevSelectionIndicatorLayout.current.x\n ) {\n return 0\n }\n return selectIndicator.x > prevSelectionIndicatorLayout.current.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: TabsTriggerProps['onInteraction'] = (type, layout) => {\n if (type === 'select') {\n handleUpdateSelectionIndicator(layout)\n } else {\n setIntentIndicator(layout)\n }\n }\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"horizontal\"\n br=\"$4\"\n size=\"$3\"\n p=\"$2\"\n height={150}\n flexDirection=\"column\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n <Tabs.List\n loop={false}\n aria-label=\"Manage your account\"\n disablePassBorderRadius\n overflow=\"visible\"\n pb=\"$1.5\"\n >\n {intentIndicator && (\n <TabsRovingIndicator\n width={intentIndicator.width}\n height={intentIndicator.height}\n x={intentIndicator.x}\n y={intentIndicator.y}\n />\n )}\n\n {selectIndicator && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width={selectIndicator.width}\n height=\"$0.25\"\n x={selectIndicator.x}\n borderRadius={0}\n bottom={-3}\n />\n )}\n\n <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\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} o={1} f={1}>\n <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n <H5 ta=\"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: 1,\n animation: '100ms',\n borderRadius: '$4',\n\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "tamagui";
|
|
11
11
|
const TabsAdvancedDemo = () => {
|
|
12
12
|
const [currentTab, setCurrentTab] = useState("tab1");
|
|
13
|
-
const [
|
|
13
|
+
const [intentIndicator, setIntentIndicator] = useState(null);
|
|
14
14
|
const [selectIndicator, setSelectIndicator] = useState(null);
|
|
15
15
|
const prevSelectionIndicatorLayout = useRef(null);
|
|
16
16
|
const handleUpdateSelectionIndicator = (newSize) => {
|
|
@@ -50,11 +50,11 @@ const TabsAdvancedDemo = () => {
|
|
|
50
50
|
overflow="visible"
|
|
51
51
|
pb="$1.5"
|
|
52
52
|
>
|
|
53
|
-
{
|
|
54
|
-
width={
|
|
55
|
-
height={
|
|
56
|
-
x={
|
|
57
|
-
y={
|
|
53
|
+
{intentIndicator && <TabsRovingIndicator
|
|
54
|
+
width={intentIndicator.width}
|
|
55
|
+
height={intentIndicator.height}
|
|
56
|
+
x={intentIndicator.x}
|
|
57
|
+
y={intentIndicator.y}
|
|
58
58
|
/>}
|
|
59
59
|
{selectIndicator && <TabsRovingIndicator
|
|
60
60
|
theme="active"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TabsAdvancedDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [
|
|
4
|
+
"sourcesContent": ["import { useRef, useState } from 'react'\nimport {\n AnimatePresence,\n H5,\n SizableText,\n Stack,\n TabTriggerLayout,\n Tabs,\n TabsTriggerProps,\n YStack,\n styled,\n} from 'tamagui'\n\nexport const TabsAdvancedDemo = () => {\n const [currentTab, setCurrentTab] = useState('tab1')\n\n // Layout of the trigger user might intend to select (hovering / focusing)\n const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)\n\n // Layout of the trigger user selected\n const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)\n const prevSelectionIndicatorLayout = useRef<TabTriggerLayout | null>(null)\n\n const handleUpdateSelectionIndicator = (newSize: TabTriggerLayout | null) => {\n prevSelectionIndicatorLayout.current = selectIndicator\n setSelectIndicator(newSize)\n }\n\n /**\n * -1: from left\n * 0: n/a\n * 1: from right\n */\n const direction = (() => {\n if (\n !selectIndicator ||\n !prevSelectionIndicatorLayout.current ||\n selectIndicator.x === prevSelectionIndicatorLayout.current.x\n ) {\n return 0\n }\n return selectIndicator.x > prevSelectionIndicatorLayout.current.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: TabsTriggerProps['onInteraction'] = (type, layout) => {\n if (type === 'select') {\n handleUpdateSelectionIndicator(layout)\n } else {\n setIntentIndicator(layout)\n }\n }\n\n return (\n <Tabs\n value={currentTab}\n onValueChange={setCurrentTab}\n orientation=\"horizontal\"\n br=\"$4\"\n size=\"$3\"\n p=\"$2\"\n height={150}\n flexDirection=\"column\"\n activationMode=\"manual\"\n >\n <YStack borderColor=\"$color3\" borderBottomWidth=\"$0.5\">\n <Tabs.List\n loop={false}\n aria-label=\"Manage your account\"\n disablePassBorderRadius\n overflow=\"visible\"\n pb=\"$1.5\"\n >\n {intentIndicator && (\n <TabsRovingIndicator\n width={intentIndicator.width}\n height={intentIndicator.height}\n x={intentIndicator.x}\n y={intentIndicator.y}\n />\n )}\n\n {selectIndicator && (\n <TabsRovingIndicator\n theme=\"active\"\n active\n width={selectIndicator.width}\n height=\"$0.25\"\n x={selectIndicator.x}\n borderRadius={0}\n bottom={-3}\n />\n )}\n\n <Tabs.Trigger value=\"tab1\" onInteraction={handleOnInteraction}>\n <SizableText>Profile</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab2\" onInteraction={handleOnInteraction}>\n <SizableText>Connections</SizableText>\n </Tabs.Trigger>\n <Tabs.Trigger value=\"tab3\" onInteraction={handleOnInteraction}>\n <SizableText>Notifications</SizableText>\n </Tabs.Trigger>\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} o={1} f={1}>\n <Tabs.Content value={currentTab} forceMount f={1} jc=\"center\">\n <H5 ta=\"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: 1,\n animation: '100ms',\n borderRadius: '$4',\n\n variants: {\n active: {\n true: {\n backgroundColor: '$color8',\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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,7 +26,7 @@ function ToggleGroupComponent(props) {
|
|
|
26
26
|
id={id}
|
|
27
27
|
type={props.type}
|
|
28
28
|
size={props.size}
|
|
29
|
-
disableDeactivation={props.type === "single"}
|
|
29
|
+
disableDeactivation={props.type === "single" ? true : void 0}
|
|
30
30
|
>
|
|
31
31
|
<ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
|
|
32
32
|
<ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\"}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\" ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,7 +26,7 @@ function ToggleGroupComponent(props) {
|
|
|
26
26
|
id={id}
|
|
27
27
|
type={props.type}
|
|
28
28
|
size={props.size}
|
|
29
|
-
disableDeactivation={props.type === "single"}
|
|
29
|
+
disableDeactivation={props.type === "single" ? true : void 0}
|
|
30
30
|
>
|
|
31
31
|
<ToggleGroup.Item value="left" aria-label="Left aligned"><AlignLeft /></ToggleGroup.Item>
|
|
32
32
|
<ToggleGroup.Item value="center" aria-label="Center aligned"><AlignCenter /></ToggleGroup.Item>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroupDemo.tsx"],
|
|
4
|
-
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\"}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n return (\n <XStack ai=\"center\" space=\"$10\">\n <YStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n </YStack>\n <XStack ai=\"center\" space=\"$6\">\n <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n </XStack>\n </XStack>\n )\n}\n\nfunction ToggleGroupComponent(props: {\n size: SizeTokens\n type: 'single' | 'multiple'\n orientation: 'vertical' | 'horizontal'\n}) {\n const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n return (\n <XStack\n flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n ai=\"center\"\n jc=\"center\"\n space=\"$4\"\n >\n <Label pr=\"$0\" jc=\"flex-end\" size={props.size} htmlFor={id}>\n {props.type === 'single' ? 'Single' : 'Multiple'}\n </Label>\n {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n <ToggleGroup\n orientation={props.orientation}\n id={id}\n type={props.type}\n size={props.size}\n disableDeactivation={props.type === \"single\" ? true : undefined}\n >\n <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n <AlignLeft />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n <AlignCenter />\n </ToggleGroup.Item>\n <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n <AlignRight />\n </ToggleGroup.Item>\n </ToggleGroup>\n </XStack>\n )\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,MACxB,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC;AAWL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,GAAG,KAAM,GAAG,WAAW,MAAM,MAAM,MAAM,SAAS,KACtD,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -28,28 +28,28 @@
|
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@tamagui/avatar": "1.10.
|
|
32
|
-
"@tamagui/button": "1.10.
|
|
33
|
-
"@tamagui/config": "1.10.
|
|
34
|
-
"@tamagui/core": "1.10.
|
|
35
|
-
"@tamagui/list-item": "1.10.
|
|
36
|
-
"@tamagui/logo": "1.10.
|
|
37
|
-
"@tamagui/menu": "1.10.
|
|
38
|
-
"@tamagui/popover": "1.10.
|
|
39
|
-
"@tamagui/progress": "1.10.
|
|
40
|
-
"@tamagui/radio-group": "1.10.
|
|
41
|
-
"@tamagui/select": "1.10.
|
|
42
|
-
"@tamagui/sheet": "1.10.
|
|
43
|
-
"@tamagui/slider": "1.10.
|
|
44
|
-
"@tamagui/stacks": "1.10.
|
|
45
|
-
"tamagui": "1.10.
|
|
31
|
+
"@tamagui/avatar": "1.10.1",
|
|
32
|
+
"@tamagui/button": "1.10.1",
|
|
33
|
+
"@tamagui/config": "1.10.1",
|
|
34
|
+
"@tamagui/core": "1.10.1",
|
|
35
|
+
"@tamagui/list-item": "1.10.1",
|
|
36
|
+
"@tamagui/logo": "1.10.1",
|
|
37
|
+
"@tamagui/menu": "1.10.1",
|
|
38
|
+
"@tamagui/popover": "1.10.1",
|
|
39
|
+
"@tamagui/progress": "1.10.1",
|
|
40
|
+
"@tamagui/radio-group": "1.10.1",
|
|
41
|
+
"@tamagui/select": "1.10.1",
|
|
42
|
+
"@tamagui/sheet": "1.10.1",
|
|
43
|
+
"@tamagui/slider": "1.10.1",
|
|
44
|
+
"@tamagui/stacks": "1.10.1",
|
|
45
|
+
"tamagui": "1.10.1"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "*",
|
|
49
49
|
"react-dom": "*"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "1.10.
|
|
52
|
+
"@tamagui/build": "1.10.1",
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|
package/src/TabsAdvancedDemo.tsx
CHANGED
|
@@ -15,7 +15,7 @@ export const TabsAdvancedDemo = () => {
|
|
|
15
15
|
const [currentTab, setCurrentTab] = useState('tab1')
|
|
16
16
|
|
|
17
17
|
// Layout of the trigger user might intend to select (hovering / focusing)
|
|
18
|
-
const [
|
|
18
|
+
const [intentIndicator, setIntentIndicator] = useState<TabTriggerLayout | null>(null)
|
|
19
19
|
|
|
20
20
|
// Layout of the trigger user selected
|
|
21
21
|
const [selectIndicator, setSelectIndicator] = useState<TabTriggerLayout | null>(null)
|
|
@@ -75,12 +75,12 @@ export const TabsAdvancedDemo = () => {
|
|
|
75
75
|
overflow="visible"
|
|
76
76
|
pb="$1.5"
|
|
77
77
|
>
|
|
78
|
-
{
|
|
78
|
+
{intentIndicator && (
|
|
79
79
|
<TabsRovingIndicator
|
|
80
|
-
width={
|
|
81
|
-
height={
|
|
82
|
-
x={
|
|
83
|
-
y={
|
|
80
|
+
width={intentIndicator.width}
|
|
81
|
+
height={intentIndicator.height}
|
|
82
|
+
x={intentIndicator.x}
|
|
83
|
+
y={intentIndicator.y}
|
|
84
84
|
/>
|
|
85
85
|
)}
|
|
86
86
|
|
package/src/ToggleGroupDemo.tsx
CHANGED
|
@@ -39,7 +39,7 @@ function ToggleGroupComponent(props: {
|
|
|
39
39
|
id={id}
|
|
40
40
|
type={props.type}
|
|
41
41
|
size={props.size}
|
|
42
|
-
disableDeactivation={props.type === "single"}
|
|
42
|
+
disableDeactivation={props.type === "single" ? true : undefined}
|
|
43
43
|
>
|
|
44
44
|
<ToggleGroup.Item value="left" aria-label="Left aligned">
|
|
45
45
|
<AlignLeft />
|