@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/navigation/NavigationTitleSelect.js

@@ -0,0 +1,84 @@
+const _excluded = ["options", "value", "onChange", "color", "font", "accessibilityRole"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { SelectProvider } from '../controls/SelectContext';
+import { SelectOption } from '../controls/SelectOption';
+import { useSelect } from '../controls/useSelect';
+import { Icon } from '../icons';
+import { HStack } from '../layout/HStack';
+import { Tray } from '../overlays';
+import { Pressable } from '../system';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const NavigationTitleSelect = /*#__PURE__*/memo(_ref => {
+  let {
+      options,
+      value,
+      onChange,
+      color = 'fg',
+      font = 'headline',
+      accessibilityRole = 'header'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [visible, setVisible] = useState(false);
+  const trayRef = useRef(null);
+  const handleCloseMenu = useCallback(() => {
+    setVisible(false);
+  }, []);
+  const handleOpenMenu = useCallback(() => {
+    setVisible(true);
+  }, []);
+  const handleOptionPress = useCallback(() => {
+    var _trayRef$current;
+    (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
+  }, []);
+  const label = useMemo(() => {
+    var _options$find;
+    return (_options$find = options.find(option => option.id === value)) == null ? void 0 : _options$find.label;
+  }, [options, value]);
+  const selectContextValue = useSelect({
+    onChange,
+    value
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      background: "transparent",
+      onPress: handleOpenMenu,
+      children: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [typeof label === 'string' ? /*#__PURE__*/_jsx(Text, _extends({
+          accessibilityRole: accessibilityRole,
+          color: color,
+          font: font
+        }, props, {
+          children: label
+        })) : label, /*#__PURE__*/_jsx(Icon, {
+          color: color,
+          name: "caretDown",
+          size: "s",
+          testID: "icon-caretDown"
+        })]
+      })
+    }), visible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      onCloseComplete: handleCloseMenu,
+      children: /*#__PURE__*/_jsx(SelectProvider, {
+        value: selectContextValue,
+        children: options.map(_ref2 => {
+          let {
+            id,
+            label
+          } = _ref2;
+          return /*#__PURE__*/_jsx(SelectOption, {
+            onPress: handleOptionPress,
+            title: label,
+            value: id
+          }, id);
+        })
+      })
+    })]
+  });
+});
+NavigationTitleSelect.displayName = 'NavigationTitleSelect';

package/esm/navigation/TopNavBar.js

@@ -0,0 +1,121 @@
+const _excluded = ["children", "flexBasis", "flexGrow", "flexShrink", "justifyContent", "paddingEnd"],
+  _excluded2 = ["children", "flexBasis", "flexGrow", "flexShrink", "justifyContent", "paddingStart"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { Collapsible } from '../collapsible/Collapsible';
+import { HStack, VStack } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TopNavBarContext = /*#__PURE__*/React.createContext({
+  isWithinTopNavBar: false
+});
+export const NavBarStart = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      flexBasis = 0,
+      flexGrow = 1,
+      flexShrink = 0,
+      justifyContent = 'flex-start',
+      paddingEnd = 1
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // store the previous children to enable collapsing animation
+  const prevChildren = usePreviousValue(children);
+  const childrenNode = children || prevChildren;
+  return /*#__PURE__*/_jsx(HStack, {
+    alignItems: "center",
+    flexBasis: flexBasis,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    justifyContent: justifyContent,
+    children: /*#__PURE__*/_jsx(Collapsible, {
+      collapsed: !children,
+      direction: "horizontal",
+      children: /*#__PURE__*/_jsx(HStack, _extends({
+        alignItems: "center",
+        paddingEnd: paddingEnd
+      }, props, {
+        children: childrenNode
+      }))
+    })
+  });
+});
+NavBarStart.displayName = 'NavBarStart';
+export const NavBarEnd = /*#__PURE__*/memo(_ref2 => {
+  let {
+      children,
+      flexBasis = 0,
+      flexGrow = 1,
+      flexShrink = 0,
+      justifyContent = 'flex-end',
+      paddingStart = 1
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  // store the previous children to enable collapsing animation
+  const prevChildren = usePreviousValue(children);
+  const childrenNode = children || prevChildren;
+  return /*#__PURE__*/_jsx(HStack, {
+    alignItems: "center",
+    flexBasis: flexBasis,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    justifyContent: justifyContent,
+    children: /*#__PURE__*/_jsx(Collapsible, {
+      collapsed: !children,
+      direction: "horizontal",
+      children: /*#__PURE__*/_jsx(HStack, _extends({
+        alignItems: "center",
+        paddingStart: paddingStart
+      }, props, {
+        children: childrenNode
+      }))
+    })
+  });
+});
+NavBarEnd.displayName = 'NavBarEnd';
+export const TopNavBar = /*#__PURE__*/memo(_ref3 => {
+  let {
+    start,
+    end,
+    children,
+    bottom,
+    accessibilityLabel = 'main navigation',
+    rowGap = 0,
+    columnGap = 2,
+    paddingX = 3,
+    paddingTop = 2,
+    paddingBottom = bottom ? undefined : 2
+  } = _ref3;
+  return /*#__PURE__*/_jsx(TopNavBarContext.Provider, {
+    value: {
+      isWithinTopNavBar: true
+    },
+    children: /*#__PURE__*/_jsxs(VStack, {
+      accessibilityLabel: accessibilityLabel,
+      background: "bg",
+      gap: rowGap,
+      left: 0,
+      paddingBottom: paddingBottom,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      position: "sticky",
+      right: 0,
+      top: 0,
+      width: "100%",
+      zIndex: zIndex.navigation,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(NavBarStart, {
+          paddingEnd: columnGap,
+          children: start
+        }), children, /*#__PURE__*/_jsx(NavBarEnd, {
+          paddingStart: columnGap,
+          children: end
+        })]
+      }), bottom]
+    })
+  });
+});
+TopNavBar.displayName = 'TopNavBar';

package/esm/navigation/__figma__/BrowserBar.figma.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { figma } from '@figma/code-connect';
+import { Divider, HStack, VStack } from '../../layout';
+import { BrowserBar, BrowserBarSearchInput } from '../../navigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(BrowserBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4224', {
+  imports: ["import { BrowserBar } from '@coinbase/cds-mobile/navigation/BrowserBar';", "import { BrowserBarSearchInput } from '@coinbase/cds-mobile/navigation/BrowserBarSearchInput';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
+  props: {
+    leftAction: figma.boolean('show left action', {
+      true: figma.instance('↳ left action'),
+      false: undefined
+    }),
+    rightAction1: figma.boolean('show 1st right action', {
+      true: figma.instance('↳ 1st right action'),
+      false: undefined
+    }),
+    rightAction2: figma.boolean('show 2nd right action', {
+      true: figma.instance('↳ 2nd right action'),
+      false: undefined
+    }),
+    rightAction3: figma.boolean('show 3rd right action', {
+      true: figma.instance('↳ 3rd right action'),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref) {
+    let {
+      leftAction,
+      rightAction1,
+      rightAction2,
+      rightAction3,
+      divider
+    } = _ref;
+    const end = useMemo(() => {
+      if (rightAction1 || rightAction2 || rightAction3) {
+        return /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [rightAction1, rightAction2, rightAction3]
+        });
+      }
+    }, [rightAction1, rightAction2, rightAction3]);
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(BrowserBar, {
+        end: end,
+        start: leftAction,
+        children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
+          onChangeText: () => {},
+          value: ""
+        })
+      }), divider]
+    });
+  }
+});

package/esm/navigation/__figma__/TopNavBar.figma.js

@@ -0,0 +1,312 @@
+import { figma } from '@figma/code-connect';
+import { Divider, HStack, VStack } from '../../layout';
+import { BrowserBar, BrowserBarSearchInput, NavBarIconButton, NavigationSubtitle, NavigationTitle, NavigationTitleSelect } from '../../navigation';
+import { TopNavBar } from '../TopNavBar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
+  variant: {
+    type: 'title + subtitle'
+  },
+  imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';", "import { NavigationTitle } from '@coinbase/cds-mobile/navigation/NavigationTitle';", "import { NavigationSubtitle } from '@coinbase/cds-mobile/navigation/NavigationSubtitle';"],
+  props: {
+    title: figma.string('↳ title'),
+    subtitle: figma.boolean('↳ show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    startAction: figma.boolean('show left action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      false: undefined
+    }),
+    endAction1: figma.boolean('show right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "more"
+      }),
+      false: undefined
+    }),
+    endAction2: figma.boolean('show 2nd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "gear"
+      }),
+      false: undefined
+    }),
+    endAction3: figma.boolean('show 3rd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "share"
+      }),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref) {
+    let {
+      startAction,
+      title,
+      subtitle,
+      endAction1,
+      endAction2,
+      endAction3,
+      divider
+    } = _ref;
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(TopNavBar, {
+        end: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [endAction3, endAction2, endAction1]
+        }),
+        start: startAction,
+        children: /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(NavigationTitle, {
+            children: title
+          }), /*#__PURE__*/_jsx(NavigationSubtitle, {
+            children: subtitle
+          })]
+        })
+      }), divider]
+    });
+  }
+});
+figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
+  variant: {
+    type: 'dropdown'
+  },
+  imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';", "import { NavigationTitleSelect } from '@coinbase/cds-mobile/navigation/NavigationTitleSelect';"],
+  props: {
+    title: figma.string('↳ title'),
+    startAction: figma.boolean('show left action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      false: undefined
+    }),
+    endAction1: figma.boolean('show right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "more"
+      }),
+      false: undefined
+    }),
+    endAction2: figma.boolean('show 2nd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "gear"
+      }),
+      false: undefined
+    }),
+    endAction3: figma.boolean('show 3rd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "share"
+      }),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref2) {
+    let {
+      startAction,
+      title,
+      endAction1,
+      endAction2,
+      endAction3,
+      divider
+    } = _ref2;
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(TopNavBar, {
+        end: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [endAction3, endAction2, endAction1]
+        }),
+        start: startAction,
+        children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+          onChange: () => {},
+          options: [{
+            id: 'title',
+            label: title
+          }],
+          value: "title"
+        })
+      }), divider]
+    });
+  }
+});
+figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
+  variant: {
+    type: 'with search'
+  },
+  imports: ["import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';", "import { BrowserBar } from '@coinbase/cds-mobile/navigation/BrowserBar';", "import { BrowserBarSearchInput } from '@coinbase/cds-mobile/navigation/BrowserBarSearchInput';"],
+  props: {
+    startAction: figma.boolean('show left action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      false: undefined
+    }),
+    endAction1: figma.boolean('show right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "more"
+      }),
+      false: undefined
+    }),
+    endAction2: figma.boolean('show 2nd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "gear"
+      }),
+      false: undefined
+    }),
+    endAction3: figma.boolean('show 3rd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "share"
+      }),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref3) {
+    let {
+      startAction,
+      endAction1,
+      endAction2,
+      endAction3,
+      divider
+    } = _ref3;
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(BrowserBar, {
+        end: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [endAction3, endAction2, endAction1]
+        }),
+        start: startAction,
+        children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
+          onChangeText: () => {},
+          value: "Search"
+        })
+      }), divider]
+    });
+  }
+});
+figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
+  variant: {
+    type: 'empty'
+  },
+  imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
+  props: {
+    startAction: figma.boolean('show left action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      false: undefined
+    }),
+    endAction1: figma.boolean('show right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "more"
+      }),
+      false: undefined
+    }),
+    endAction2: figma.boolean('show 2nd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "gear"
+      }),
+      false: undefined
+    }),
+    endAction3: figma.boolean('show 3rd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "share"
+      }),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref4) {
+    let {
+      startAction,
+      endAction1,
+      endAction2,
+      endAction3,
+      divider
+    } = _ref4;
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(TopNavBar, {
+        end: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [endAction3, endAction2, endAction1]
+        }),
+        start: startAction
+      }), divider]
+    });
+  }
+});
+figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
+  variant: {
+    type: 'Market Selector'
+  },
+  imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
+  props: {
+    children: figma.children('Market selector'),
+    startAction: figma.boolean('show left action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      false: undefined
+    }),
+    endAction1: figma.boolean('show right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "more"
+      }),
+      false: undefined
+    }),
+    endAction2: figma.boolean('show 2nd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "gear"
+      }),
+      false: undefined
+    }),
+    endAction3: figma.boolean('show 3rd right action', {
+      true: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "share"
+      }),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref5) {
+    let {
+      children,
+      startAction,
+      endAction1,
+      endAction2,
+      endAction3,
+      divider
+    } = _ref5;
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(TopNavBar, {
+        end: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [endAction3, endAction2, endAction1]
+        }),
+        start: startAction,
+        children: children
+      }), divider]
+    });
+  }
+});

package/esm/navigation/__stories__/BrowserBar.stories.js

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout';
+import { Pressable } from '../../system/Pressable';
+import { Text } from '../../typography/Text';
+import { BrowserBar } from '../BrowserBar';
+import { BrowserBarSearchInput } from '../BrowserBarSearchInput';
+import { NavBarIconButton } from '../NavBarIconButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultExample = () => {
+  const [value, setValue] = useState('');
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Browser Bar",
+    children: /*#__PURE__*/_jsx(BrowserBar, {
+      end: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 0.25,
+        children: [/*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "browser"
+        }), /*#__PURE__*/_jsx(Pressable, {
+          alignItems: "center",
+          background: "transparent",
+          height: 40,
+          justifyContent: "center",
+          width: 40,
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            borderColor: "fg",
+            borderRadius: 100,
+            borderWidth: 200,
+            height: 24,
+            justifyContent: "center",
+            width: 24,
+            children: /*#__PURE__*/_jsx(Text, {
+              color: "fg",
+              font: "label2",
+              children: "4"
+            })
+          })
+        }), /*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "more"
+        })]
+      }),
+      paddingX: 0,
+      start: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "backArrow"
+      }),
+      children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
+        onChangeText: setValue,
+        value: value
+      })
+    })
+  });
+};
+const ExampleWithoutExpandOnFocus = () => {
+  const [value, setValue] = useState('');
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Browser Bar without expand on focus",
+    children: /*#__PURE__*/_jsx(BrowserBar, {
+      end: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 0.25,
+        children: [/*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "browser"
+        }), /*#__PURE__*/_jsx(Pressable, {
+          alignItems: "center",
+          background: "transparent",
+          height: 40,
+          justifyContent: "center",
+          width: 40,
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            borderColor: "fg",
+            borderRadius: 100,
+            borderWidth: 200,
+            height: 24,
+            justifyContent: "center",
+            width: 24,
+            children: /*#__PURE__*/_jsx(Text, {
+              color: "fg",
+              font: "label2",
+              children: "4"
+            })
+          })
+        })]
+      }),
+      paddingX: 0,
+      start: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "backArrow"
+      }),
+      children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
+        disableBackArrow: true,
+        expandOnFocus: false,
+        onChangeText: setValue,
+        value: value
+      })
+    })
+  });
+};
+const ExampleWithoutEnd = () => {
+  const [value, setValue] = useState('');
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Browser Bar without end",
+    children: /*#__PURE__*/_jsx(BrowserBar, {
+      paddingX: 0,
+      start: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "backArrow"
+      }),
+      children: /*#__PURE__*/_jsx(BrowserBarSearchInput, {
+        onChangeText: setValue,
+        value: value
+      })
+    })
+  });
+};
+const BrowserBarScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(DefaultExample, {}), /*#__PURE__*/_jsx(ExampleWithoutExpandOnFocus, {}), /*#__PURE__*/_jsx(ExampleWithoutEnd, {})]
+  });
+};
+export default BrowserBarScreen;