@oxyhq/bloom 0.1.4 → 0.1.6

package/src/icons/common.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, type TextProps } from 'react-native';
+import { type PathProps, type SvgProps } from 'react-native-svg';
+import { Defs, LinearGradient, Stop } from 'react-native-svg';
+
+import { useTheme } from '../theme/use-theme';
+import { gradients } from '../styles/tokens';
+
+export type Props = {
+  fill?: PathProps['fill'];
+  style?: TextProps['style'];
+  size?: keyof typeof sizes;
+  gradient?: keyof typeof gradients;
+} & Omit<SvgProps, 'style' | 'size'>;
+
+export const sizes = {
+  '2xs': 8,
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+  '2xl': 32,
+  '3xl': 48,
+} as const;
+
+export function useCommonSVGProps(props: Props) {
+  const { colors } = useTheme();
+  const reactId = React.useId();
+  const { fill, size, gradient, ...rest } = props;
+  const style = StyleSheet.flatten(rest.style);
+  const _size = Number(size ? sizes[size] : rest.width || sizes.md);
+  let _fill = fill || (style as Record<string, string>)?.color || colors.primary;
+  let gradientDef = null;
+
+  if (gradient && gradients[gradient]) {
+    const id = `${reactId}-${gradient}`;
+    const config = gradients[gradient];
+    _fill = `url(#${id})`;
+    gradientDef = (
+      <Defs>
+        <LinearGradient
+          id={id}
+          x1="0"
+          y1="0"
+          x2="100%"
+          y2="0"
+          gradientTransform="rotate(45)">
+          {config.values.map(([stop, fillColor]) => (
+            <Stop key={String(stop)} offset={String(stop)} stopColor={fillColor} />
+          ))}
+        </LinearGradient>
+      </Defs>
+    );
+  }
+
+  return {
+    fill: _fill,
+    size: _size,
+    style,
+    gradient: gradientDef,
+    ...rest,
+  };
+}

package/src/icons/index.ts

@@ -0,0 +1,155 @@
+export * from './Accessibility';
+export * from './Alien';
+export * from './AndroidLogo';
+export * from './Apple';
+export * from './AppleLogo';
+export * from './Arrow';
+export * from './ArrowBoxLeft';
+export * from './ArrowCornerDownRight';
+export * from './ArrowOutOfBox';
+export * from './ArrowRotate';
+export * from './ArrowsDiagonal';
+export * from './ArrowShareRight';
+export * from './ArrowTopCircle';
+export * from './ArrowTriangle';
+export * from './AspectRatio';
+export * from './At';
+export * from './Atom';
+export * from './Bars';
+export * from './Beaker';
+export * from './Bell';
+export * from './Bell2';
+export * from './BellPlus';
+export * from './BellRinging';
+export * from './BirthdayCake';
+export * from './Bookmark';
+export * from './Bot';
+export * from './BroomSparkle';
+export * from './Bubble';
+export * from './BubbleInfo';
+export * from './BulletList';
+export * from './Calendar';
+export * from './CalendarClock';
+export * from './CalendarDays';
+export * from './Camera';
+export * from './Car';
+export * from './CC';
+export * from './Celebrate';
+export * from './ChainLink';
+export * from './Check';
+export * from './Chevron';
+export * from './Circle';
+export * from './CircleAndSquare';
+export * from './CircleBanSign';
+export * from './CircleCheck';
+export * from './CircleInfo';
+export * from './CirclePlus';
+export * from './CircleQuestion';
+export * from './CircleX';
+export * from './Clipboard';
+export * from './Clock';
+export * from './CodeBrackets';
+export * from './CodeLines';
+export * from './ColorPalette';
+export * from './Contacts';
+export * from './Crop';
+export * from './DotGrid';
+export * from './Download';
+export * from './EditBig';
+export * from './Emoji';
+export * from './Envelope';
+export * from './EnveopeOpen';
+export * from './Explosion';
+export * from './Eye';
+export * from './EyeSlash';
+export * from './Filter';
+export * from './FilterTimeline';
+export * from './Flag';
+export * from './Flame';
+export * from './FlipImage';
+export * from './FloppyDisk';
+export * from './Freeze';
+export * from './GameController';
+export * from './Gif';
+export * from './Gift1';
+export * from './Globe';
+export * from './Group';
+export * from './Growth';
+export * from './Haptic';
+export * from './Hashtag';
+export * from './Heart2';
+export * from './Home';
+export * from './HomeOpen';
+export * from './Image';
+export * from './Key';
+export * from './Lab';
+export * from './Leaf';
+export * from './ListMagnifyingGlass';
+export * from './ListPlus';
+export * from './ListSparkle';
+export * from './Live';
+export * from './Loader';
+export * from './Lock';
+export * from './Logo';
+export * from './Macintosh';
+export * from './MagnifyingGlass';
+export * from './Menu';
+export * from './Message';
+export * from './Moon';
+export * from './MusicNote';
+export * from './Mute';
+export * from './News2';
+export * from './Newskie';
+export * from './Newspaper';
+export * from './PageText';
+export * from './PageX';
+export * from './PaintRoller';
+export * from './PaperPlane';
+export * from './Pause';
+export * from './Pencil';
+export * from './PeopleRemove2';
+export * from './Person';
+export * from './Phone';
+export * from './Pin';
+export * from './PinLocation';
+export * from './Pizza';
+export * from './Play';
+export * from './Plus';
+export * from './QrCode';
+export * from './Quote';
+export * from './RaisingHand';
+export * from './Reply';
+export * from './Repost';
+export * from './Rose';
+export * from './SettingsGear2';
+export * from './SettingsSlider';
+export * from './Shaka';
+export * from './Shapes';
+export * from './Shield';
+export * from './Sparkle';
+export * from './Speaker';
+export * from './SquareArrowTopRight';
+export * from './SquareBehindSquare4';
+export * from './Star';
+export * from './StarterPack';
+export * from './StreamingLive';
+export * from './TextSize';
+export * from './Ticket';
+export * from './Times';
+export * from './TitleCase';
+export * from './Trash';
+export * from './Tree';
+export * from './Trending';
+export * from './UFO';
+export * from './UserCircle';
+export * from './Verified';
+export * from './VerifiedCheck';
+export * from './VerifierCheck';
+export * from './VideoClip';
+export * from './Warning';
+export * from './Window';
+export * from './Wrench';
+export * from './Zap';
+export type { Props } from './common';
+export { sizes, useCommonSVGProps } from './common';
+export { createSinglePathSVG, createMultiPathSVG } from './TEMPLATE';

package/src/index.ts

@@ -1,4 +1,23 @@
+// Theme
 export * from './theme';
+
+// Styles & Utilities
+export { atoms, flatten } from './styles';
+export type { ViewStyleProp, TextStyleProp } from './styles';
+export * as tokens from './styles/tokens';
+export { web, native, ios, android, platform, select } from './styles/platform';
+
+// Hooks
+export { useInteractionState } from './hooks/useInteractionState';
+export { useDelayedLoading } from './hooks/useDelayedLoading';
+export { useThrottledValue } from './hooks/useThrottledValue';
+
+// Icons
+export * as Icons from './icons';
+export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from './icons/common';
+export { createSinglePathSVG, createMultiPathSVG } from './icons/TEMPLATE';
+
+// Core components
 export * from './portal';
 export * as Dialog from './dialog';
 export * as Prompt from './prompt';
@@ -13,3 +32,25 @@ export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
 export * from './switch';
+export * as Toast from './toast';
+
+// Typography
+export * as Typography from './typography';
+
+// Layout primitives
+export * as Skeleton from './skeleton';
+export * as Grid from './grid';
+export { Fill } from './fill';
+export { IconCircle } from './icon-circle';
+
+// Form components
+export * as TextField from './text-field';
+export * as SegmentedControl from './segmented-control';
+export { SearchInput } from './search-input';
+
+// Overlay components
+export * as Admonition from './admonition';
+export * as Menu from './menu';
+export * as Tooltip from './tooltip';
+export * as Select from './select';
+export * as ContextMenu from './context-menu';

package/src/menu/context.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+import type { MenuContextType, ItemContextType } from './types';
+
+export const MenuContext = createContext<MenuContextType | null>(null);
+MenuContext.displayName = 'BloomMenuContext';
+
+export const ItemContext = createContext<ItemContextType | null>(null);
+ItemContext.displayName = 'BloomMenuItemContext';
+
+export function useMenuContext(): MenuContextType {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error('useMenuContext must be used within a Menu.Root');
+  }
+  return context;
+}
+
+export function useMenuItemContext(): ItemContextType {
+  const context = useContext(ItemContext);
+  if (!context) {
+    throw new Error('useMenuItemContext must be used within a Menu.Item');
+  }
+  return context;
+}

package/src/menu/index.tsx

@@ -0,0 +1,279 @@
+import React, { cloneElement, Fragment, isValidElement, useCallback, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Button } from '../button';
+import * as Dialog from '../dialog';
+import {
+  MenuContext,
+  ItemContext,
+  useMenuContext,
+  useMenuItemContext,
+} from './context';
+import type {
+  MenuContextType,
+  GroupProps,
+  ItemIconProps,
+  ItemProps,
+  ItemTextProps,
+  TriggerProps,
+} from './types';
+
+export type { DialogControlProps as MenuControlProps } from '../dialog';
+export { useDialogControl as useMenuControl } from '../dialog';
+export { useMenuContext };
+
+export function Root({
+  children,
+  control,
+}: React.PropsWithChildren<{
+  control?: Dialog.DialogControlProps;
+}>) {
+  const defaultControl = Dialog.useDialogControl();
+  const context = useMemo<MenuContextType>(
+    () => ({
+      control: control ?? defaultControl,
+    }),
+    [control, defaultControl],
+  );
+
+  return (
+    <MenuContext.Provider value={context}>
+      {children}
+    </MenuContext.Provider>
+  );
+}
+
+export function Trigger({
+  children,
+  label,
+  role = 'button',
+  hint,
+}: TriggerProps) {
+  const context = useMenuContext();
+  const [focused, setFocused] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  return children({
+    control: context.control,
+    state: {
+      hovered: false,
+      focused,
+      pressed,
+    },
+    props: {
+      onPress: () => context.control.open(),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: role,
+    },
+  });
+}
+
+export function Outer({
+  children,
+  showCancel,
+}: React.PropsWithChildren<{
+  showCancel?: boolean;
+  style?: StyleProp<ViewStyle>;
+}>) {
+  const context = useMenuContext();
+
+  return (
+    <Dialog.Outer
+      control={context.control}
+      preventExpansion
+    >
+      <Dialog.Handle />
+      <MenuContext.Provider value={context}>
+        <Dialog.ScrollableInner label="Menu">
+          <View style={styles.outerContent}>
+            {children}
+            {showCancel && <Cancel />}
+          </View>
+        </Dialog.ScrollableInner>
+      </MenuContext.Provider>
+    </Dialog.Outer>
+  );
+}
+
+export function Item({ children, label, style, onPress, ...rest }: ItemProps) {
+  const theme = useTheme();
+  const context = useMenuContext();
+  const [focused, setFocused] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  const handlePress = useCallback(
+    (e: import('react-native').GestureResponderEvent) => {
+      context.control.close(() => {
+        onPress(e);
+      });
+    },
+    [context.control, onPress],
+  );
+
+  const isDisabled = Boolean(rest.disabled);
+  const isHighlighted = (focused || pressed) && !isDisabled;
+
+  const itemContextValue = useMemo(
+    () => ({ disabled: isDisabled }),
+    [isDisabled],
+  );
+
+  return (
+    <Pressable
+      {...rest}
+      accessibilityHint=""
+      accessibilityLabel={label}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onPress={handlePress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[
+        styles.item,
+        {
+          backgroundColor: theme.colors.contrast50,
+          borderColor: theme.colors.borderLight,
+        },
+        isHighlighted && {
+          backgroundColor: theme.colors.backgroundSecondary,
+        },
+        style,
+      ]}
+    >
+      <ItemContext.Provider value={itemContextValue}>
+        {children}
+      </ItemContext.Provider>
+    </Pressable>
+  );
+}
+
+export function ItemText({ children, style }: ItemTextProps) {
+  const theme = useTheme();
+  const { disabled } = useMenuItemContext();
+
+  return (
+    <Text
+      numberOfLines={1}
+      ellipsizeMode="middle"
+      style={[
+        styles.itemText,
+        { color: disabled ? theme.colors.textTertiary : theme.colors.text },
+        ...(style ? [style] : []),
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function ItemIcon({ icon: Comp, fill }: ItemIconProps) {
+  const theme = useTheme();
+  const { disabled } = useMenuItemContext();
+
+  return (
+    <Comp
+      size="lg"
+      fill={
+        fill
+          ? fill({ disabled })
+          : disabled
+            ? theme.colors.textTertiary
+            : theme.colors.textSecondary
+      }
+    />
+  );
+}
+
+export function Group({ children, style }: GroupProps) {
+  const theme = useTheme();
+
+  const childArray = React.Children.toArray(children).filter(isValidElement);
+
+  return (
+    <View
+      style={[
+        styles.group,
+        { borderColor: theme.colors.borderLight },
+        style,
+      ]}
+    >
+      {childArray.map((child, i) => {
+        if (child.type === Item) {
+          return (
+            <Fragment key={i}>
+              {i > 0 && (
+                <View
+                  style={[
+                    styles.groupDivider,
+                    { borderBottomColor: theme.colors.borderLight },
+                  ]}
+                />
+              )}
+              {cloneElement(child, {
+                style: {
+                  borderRadius: 0,
+                  borderWidth: 0,
+                },
+              } as Record<string, unknown>)}
+            </Fragment>
+          );
+        }
+        return null;
+      })}
+    </View>
+  );
+}
+
+export function Divider() {
+  return null;
+}
+
+function Cancel() {
+  const context = useMenuContext();
+
+  return (
+    <Button
+      accessibilityLabel="Close this menu"
+      size="small"
+      variant="ghost"
+      onPress={() => context.control.close()}
+    >
+      Cancel
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  outerContent: {
+    gap: 16,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+    minHeight: 44,
+    paddingVertical: 10,
+  },
+  itemText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  group: {
+    borderRadius: 12,
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+  groupDivider: {
+    borderBottomWidth: 1,
+  },
+});