Create primary tooltip variant (#11140)

src/view/screens/Storybook/Storybook.tsx

@@ -26,6 +26,7 @@ import {Shadows} from './Shadows'
 import {Spacing} from './Spacing'
 import {Theming} from './Theming'
 import {Toasts} from './Toasts'
+import {Tooltips} from './Tooltips'
 import {Typography} from './Typography'
 
 export default function Storybook() {
@@ -127,6 +128,7 @@ export default function Storybook() {
             <Shadows />
             <Icons />
             <Links />
+            <Tooltips />
             <Dialogs />
             <Menus />
             <Breakpoints />

src/view/screens/Storybook/Tooltips.tsx

@@ -0,0 +1,55 @@
+import {useState} from 'react'
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Tooltip from '#/components/Tooltip'
+import {H1} from '#/components/Typography'
+
+export function Tooltips() {
+  const [defaultVisible, setDefaultVisible] = useState(false)
+  const [primaryVisible, setPrimaryVisible] = useState(false)
+
+  return (
+    <View style={[a.gap_md, a.align_start]}>
+      <H1>Tooltips</H1>
+
+      <View style={[a.flex_row, a.gap_md, a.align_start]}>
+        <Tooltip.Outer
+          visible={defaultVisible}
+          onVisibleChange={setDefaultVisible}>
+          <Tooltip.Target>
+            <Button
+              color="secondary"
+              size="small"
+              label="Toggle default tooltip"
+              onPress={() => setDefaultVisible(v => !v)}>
+              <ButtonText>Default</ButtonText>
+            </Button>
+          </Tooltip.Target>
+          <Tooltip.BubbleText label="This is a default tooltip.">
+            This is a default tooltip.
+          </Tooltip.BubbleText>
+        </Tooltip.Outer>
+
+        <Tooltip.Outer
+          color="primary"
+          visible={primaryVisible}
+          onVisibleChange={setPrimaryVisible}>
+          <Tooltip.Target>
+            <Button
+              color="primary_subtle"
+              size="small"
+              label="Toggle primary tooltip"
+              onPress={() => setPrimaryVisible(v => !v)}>
+              <ButtonText>Primary</ButtonText>
+            </Button>
+          </Tooltip.Target>
+          <Tooltip.BubbleText label="This is a primary tooltip.">
+            This is a primary tooltip.
+          </Tooltip.BubbleText>
+        </Tooltip.Outer>
+      </View>
+    </View>
+  )
+}