linked-data-browser 0.0.7 → 0.0.8-alpha.1

package/components/ui/dropdown-menu.tsx

@@ -2,19 +2,22 @@ import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
 import * as React from 'react';
 import {
   Platform,
+  Pressable,
   type StyleProp,
   StyleSheet,
   Text,
   type TextProps,
+  TextStyle,
   View,
   type ViewStyle,
 } from 'react-native';
-import { Check } from '../../lib/icons/Check';
-import { ChevronDown } from '../../lib/icons/ChevronDown';
-import { ChevronRight } from '../../lib/icons/ChevronRight';
-import { ChevronUp } from '../../lib/icons/ChevronUp';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from '../../components/ui/text';
+import { Check } from 'lucide-react-native';
+import { ChevronDown } from 'lucide-react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ChevronUp } from 'lucide-react-native';
+import { useTheme } from '@react-navigation/native';
+import { TextStyleProvider } from '../../components/ui/text';
+import { Icon } from './icon';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -29,76 +32,82 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 function DropdownMenuSubTrigger({
-  className,
+  style,
   inset,
   children,
   ...props
 }: DropdownMenuPrimitive.SubTriggerProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.SubTriggerRef>;
-  className?: string;
+  style?: StyleProp<ViewStyle>;
   inset?: boolean;
   children?: React.ReactNode;
 }) {
+  const theme = useTheme();
   const { open } = DropdownMenuPrimitive.useSubContext();
-  const Icon =
+  const SubIcon =
     Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
   return (
-    <TextClassContext.Provider
-      value={cn(
-        'select-none text-sm native:text-lg text-primary',
-        open && 'native:text-accent-foreground',
-      )}
+    <TextStyleProvider
+      style={StyleSheet.flatten([
+        styles.subTriggerText,
+        { color: theme.colors.text },
+      ])}
     >
-      <DropdownMenuPrimitive.SubTrigger
-        className={cn(
-          'flex flex-row web:cursor-default web:select-none gap-2 items-center web:focus:bg-accent web:hover:bg-accent active:bg-accent rounded-sm px-2 py-1.5 native:py-2 web:outline-none',
-          open && 'bg-accent',
-          inset && 'pl-8',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <Icon size={18} className="ml-auto text-foreground" />
+      <DropdownMenuPrimitive.SubTrigger asChild {...props}>
+        <Pressable
+          style={({ pressed, hovered }) =>
+            StyleSheet.flatten([
+              styles.subTrigger,
+              open && { backgroundColor: theme.colors.border },
+              (pressed || hovered) && { backgroundColor: theme.colors.border },
+              inset && styles.subTriggerInset,
+              style,
+            ])
+          }
+        >
+          {children}
+          <Icon icon={SubIcon} style={styles.subTriggerIcon} />
+        </Pressable>
       </DropdownMenuPrimitive.SubTrigger>
-    </TextClassContext.Provider>
+    </TextStyleProvider>
   );
 }
 
 function DropdownMenuSubContent({
-  className,
+  style,
   ...props
 }: DropdownMenuPrimitive.SubContentProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.SubContentRef>;
+  style?: StyleProp<ViewStyle>;
 }) {
-  const { open } = DropdownMenuPrimitive.useSubContext();
+  const theme = useTheme();
   return (
     <DropdownMenuPrimitive.SubContent
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border mt-1 bg-popover p-1 shadow-md shadow-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        open
-          ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
-          : 'web:animate-out web:fade-out-0 web:zoom-out',
-        className,
-      )}
+      style={[
+        styles.subContent,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.background,
+          shadowColor: theme.colors.text,
+        },
+        style,
+      ]}
       {...props}
     />
   );
 }
 
 function DropdownMenuContent({
-  className,
-  overlayClassName,
+  style,
   overlayStyle,
   portalHost,
   ...props
 }: DropdownMenuPrimitive.ContentProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.ContentRef>;
   overlayStyle?: StyleProp<ViewStyle>;
-  overlayClassName?: string;
   portalHost?: string;
 }) {
-  const { open } = DropdownMenuPrimitive.useRootContext();
+  const theme = useTheme();
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
       <DropdownMenuPrimitive.Overlay
@@ -112,16 +121,17 @@ function DropdownMenuContent({
               ? StyleSheet.absoluteFill
               : undefined
         }
-        className={overlayClassName}
       >
         <DropdownMenuPrimitive.Content
-          className={cn(
-            'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5 web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2',
-            open
-              ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
-              : 'web:animate-out web:fade-out-0 web:zoom-out-95',
-            className,
-          )}
+          style={StyleSheet.flatten([
+            styles.content,
+            {
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.background,
+              shadowColor: theme.colors.text,
+            },
+            style,
+          ])}
           {...props}
         />
       </DropdownMenuPrimitive.Overlay>
@@ -130,127 +140,158 @@ function DropdownMenuContent({
 }
 
 function DropdownMenuItem({
-  className,
+  style,
   inset,
+  children,
   ...props
 }: DropdownMenuPrimitive.ItemProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.ItemRef>;
-  className?: string;
+  style?: StyleProp<ViewStyle>;
   inset?: boolean;
 }) {
+  const theme = useTheme();
   return (
-    <TextClassContext.Provider value="select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground">
-      <DropdownMenuPrimitive.Item
-        className={cn(
-          'relative flex flex-row web:cursor-default gap-2 items-center rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group',
-          inset && 'pl-8',
-          props.disabled && 'opacity-50 web:pointer-events-none',
-          className,
-        )}
-        {...props}
-      />
-    </TextClassContext.Provider>
+    <TextStyleProvider style={{ color: theme.colors.text }}>
+      <DropdownMenuPrimitive.Item asChild {...props}>
+        <Pressable
+          style={({ pressed, hovered }) =>
+            StyleSheet.flatten([
+              styles.item,
+              inset && styles.itemInset,
+              props.disabled && styles.itemDisabled,
+              (pressed || hovered) && { backgroundColor: theme.colors.border },
+              style,
+            ])
+          }
+        >
+          {children}
+        </Pressable>
+      </DropdownMenuPrimitive.Item>
+    </TextStyleProvider>
   );
 }
 
 function DropdownMenuCheckboxItem({
-  className,
+  style,
   children,
   checked,
   ...props
 }: DropdownMenuPrimitive.CheckboxItemProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.CheckboxItemRef>;
+  style?: StyleProp<ViewStyle>;
   children?: React.ReactNode;
 }) {
+  const theme = useTheme();
   return (
-    <DropdownMenuPrimitive.CheckboxItem
-      className={cn(
-        'relative flex flex-row web:cursor-default items-center web:group rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
-        props.disabled && 'web:pointer-events-none opacity-50',
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <Check size={14} strokeWidth={3} className="text-foreground" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </View>
-      {children}
+    <DropdownMenuPrimitive.CheckboxItem asChild checked={checked} {...props}>
+      <Pressable
+        style={({ pressed, hovered }) =>
+          StyleSheet.flatten([
+            styles.checkboxItem,
+            props.disabled && styles.checkboxItemDisabled,
+            (pressed || hovered) && { backgroundColor: theme.colors.border },
+            style,
+          ])
+        }
+      >
+        <View style={styles.checkboxIndicator}>
+          <DropdownMenuPrimitive.ItemIndicator>
+            <Check size={14} strokeWidth={3} color={theme.colors.text} />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </Pressable>
     </DropdownMenuPrimitive.CheckboxItem>
   );
 }
 
 function DropdownMenuRadioItem({
-  className,
+  style,
   children,
   ...props
 }: DropdownMenuPrimitive.RadioItemProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.RadioItemRef>;
+  style?: StyleProp<ViewStyle>;
   children?: React.ReactNode;
 }) {
+  const theme = useTheme();
   return (
-    <DropdownMenuPrimitive.RadioItem
-      className={cn(
-        'relative flex flex-row web:cursor-default web:group items-center rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
-        props.disabled && 'web:pointer-events-none opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <View className="bg-foreground h-2 w-2 rounded-full" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </View>
-      {children}
+    <DropdownMenuPrimitive.RadioItem asChild {...props}>
+      <Pressable
+        style={({ pressed, hovered }) =>
+          StyleSheet.flatten([
+            styles.radioItem,
+            props.disabled && styles.radioItemDisabled,
+            (pressed || hovered) && { backgroundColor: theme.colors.border },
+            style,
+          ])
+        }
+      >
+        <View style={styles.radioIndicator}>
+          <DropdownMenuPrimitive.ItemIndicator>
+            <View
+              style={[styles.radioDot, { backgroundColor: theme.colors.text }]}
+            />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </View>
+        {children}
+      </Pressable>
     </DropdownMenuPrimitive.RadioItem>
   );
 }
 
 function DropdownMenuLabel({
-  className,
+  style,
   inset,
   ...props
 }: DropdownMenuPrimitive.LabelProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.LabelRef>;
-  className?: string;
+  style?: StyleProp<ViewStyle>;
   inset?: boolean;
 }) {
+  const theme = useTheme();
   return (
     <DropdownMenuPrimitive.Label
-      className={cn(
-        'px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default',
-        inset && 'pl-8',
-        className,
-      )}
+      style={StyleSheet.flatten<TextStyle>([
+        styles.label,
+        { color: theme.colors.text },
+        inset && styles.labelInset,
+        style,
+      ])}
       {...props}
     />
   );
 }
 
 function DropdownMenuSeparator({
-  className,
+  style,
   ...props
 }: DropdownMenuPrimitive.SeparatorProps & {
   ref?: React.RefObject<DropdownMenuPrimitive.SeparatorRef>;
+  style?: StyleProp<ViewStyle>;
 }) {
+  const theme = useTheme();
   return (
     <DropdownMenuPrimitive.Separator
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      style={StyleSheet.flatten([
+        styles.separator,
+        { backgroundColor: theme.colors.border },
+        style,
+      ])}
       {...props}
     />
   );
 }
 
-function DropdownMenuShortcut({ className, ...props }: TextProps) {
+function DropdownMenuShortcut({ style, ...props }: TextProps) {
+  const theme = useTheme();
   return (
     <Text
-      className={cn(
-        'ml-auto text-xs native:text-sm tracking-widest text-muted-foreground',
-        className,
-      )}
+      style={[
+        styles.shortcut,
+        { color: theme.colors.text + '80' }, // muted text with opacity
+        style,
+      ]}
       {...props}
     />
   );
@@ -273,3 +314,161 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 };
+
+// Base styles that don't require theme
+const styles = StyleSheet.create({
+  // SubTrigger styles
+  subTriggerText: {
+    fontSize: Platform.OS === 'web' ? 14 : 18, // text-sm native:text-lg
+  },
+  subTriggerTextOpen: {
+    // Color applied at render time
+  },
+  subTrigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8, // gap-2
+    paddingHorizontal: 8, // px-2
+    paddingVertical: Platform.OS === 'web' ? 6 : 8, // py-1.5 native:py-2
+    borderRadius: 2, // rounded-sm
+  },
+  subTriggerInset: {
+    paddingLeft: 32, // pl-8
+  },
+  subTriggerOpen: {
+    // Background color applied at render time
+  },
+  subTriggerIcon: {
+    marginLeft: 'auto',
+    fontSize: 18,
+    // Color applied at render time
+  },
+
+  // SubContent styles
+  subContent: {
+    zIndex: 50, // z-50
+    minWidth: 128, // min-w-[8rem]
+    overflow: 'hidden',
+    borderRadius: 6, // rounded-md
+    borderWidth: 1,
+    marginTop: 4, // mt-1
+    padding: 4, // p-1
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05, // shadow-foreground/5
+    shadowRadius: 2,
+    elevation: 2, // Android shadow
+    // Border color, background color, and shadow color applied at render time
+  },
+
+  // Content styles
+  content: {
+    zIndex: 50, // z-50
+    minWidth: 128, // min-w-[8rem]
+    overflow: 'hidden',
+    borderRadius: 6, // rounded-md
+    borderWidth: 1,
+    padding: 4, // p-1
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05, // shadow-foreground/5
+    shadowRadius: 2,
+    elevation: 2, // Android shadow
+    // Border color, background color, and shadow color applied at render time
+  },
+
+  item: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8, // gap-2
+    borderRadius: 2, // rounded-sm
+    paddingHorizontal: 8, // px-2
+    paddingVertical: Platform.OS === 'web' ? 6 : 8, // py-1.5 native:py-2
+  },
+  itemInset: {
+    paddingLeft: 32, // pl-8
+  },
+  itemDisabled: {
+    opacity: 0.5, // opacity-50
+  },
+
+  // CheckboxItem styles
+  checkboxItem: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 2, // rounded-sm
+    paddingVertical: Platform.OS === 'web' ? 6 : 8, // py-1.5 native:py-2
+    paddingLeft: 32, // pl-8
+    paddingRight: 8, // pr-2
+  },
+  checkboxItemDisabled: {
+    opacity: 0.5, // opacity-50
+  },
+  checkboxIndicator: {
+    position: 'absolute',
+    left: 8, // left-2
+    width: 14, // w-3.5
+    height: 14, // h-3.5
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxIcon: {
+    // Color applied at render time
+  },
+
+  // RadioItem styles
+  radioItem: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 2, // rounded-sm
+    paddingVertical: Platform.OS === 'web' ? 6 : 8, // py-1.5 native:py-2
+    paddingLeft: 32, // pl-8
+    paddingRight: 8, // pr-2
+  },
+  radioItemDisabled: {
+    opacity: 0.5, // opacity-50
+  },
+  radioIndicator: {
+    position: 'absolute',
+    left: 8, // left-2
+    width: 14, // w-3.5
+    height: 14, // h-3.5
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioDot: {
+    width: 8, // w-2
+    height: 8, // h-2
+    borderRadius: 4, // rounded-full
+    // Background color applied at render time
+  },
+
+  // Label styles
+  label: {
+    paddingHorizontal: 8, // px-2
+    paddingVertical: 6, // py-1.5
+    fontSize: Platform.OS === 'web' ? 14 : 16, // text-sm native:text-base
+    fontWeight: '600', // font-semibold
+    // Color applied at render time
+  },
+  labelInset: {
+    paddingLeft: 32, // pl-8
+  },
+
+  // Separator styles
+  separator: {
+    marginHorizontal: -4, // -mx-1
+    marginVertical: 4, // my-1
+    height: 1, // h-px
+    // Background color applied at render time
+  },
+
+  // Shortcut styles
+  shortcut: {
+    marginLeft: 'auto',
+    fontSize: Platform.OS === 'web' ? 12 : 14, // text-xs native:text-sm
+    letterSpacing: 0.1, // tracking-widest
+    // Color applied at render time
+  },
+});

package/components/ui/hover-card.tsx

@@ -2,46 +2,69 @@ import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import Animated, { FadeIn } from 'react-native-reanimated';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from '../../components/ui/text';
+import { useTheme } from '@react-navigation/native';
+import { TextStyleProvider } from '../../components/ui/text';
 
 const HoverCard = HoverCardPrimitive.Root;
 
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 function HoverCardContent({
-  className,
+  style,
   align = 'center',
   sideOffset = 4,
   ...props
 }: HoverCardPrimitive.ContentProps & {
   ref?: React.RefObject<HoverCardPrimitive.ContentRef>;
 }) {
-  const { open } = HoverCardPrimitive.useRootContext();
+  const { colors } = useTheme();
+
+  const contentStyles = StyleSheet.flatten([
+    styles.content,
+    {
+      backgroundColor: colors.background,
+      borderColor: colors.border,
+      shadowColor: colors.text,
+    },
+    style,
+  ]);
+
+  const textStyles = {
+    color: colors.text,
+  };
+
   return (
     <HoverCardPrimitive.Portal>
       <HoverCardPrimitive.Overlay
         style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
       >
         <Animated.View entering={FadeIn}>
-          <TextClassContext.Provider value="text-popover-foreground">
+          <TextStyleProvider style={textStyles}>
             <HoverCardPrimitive.Content
               align={align}
               sideOffset={sideOffset}
-              className={cn(
-                'z-50 w-64 rounded-md border border-border bg-popover p-4 shadow-md shadow-foreground/5 web:outline-none web:cursor-auto data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                open
-                  ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
-                  : 'web:animate-out web:fade-out-0 web:zoom-out-95',
-                className,
-              )}
+              style={contentStyles}
               {...props}
             />
-          </TextClassContext.Provider>
+          </TextStyleProvider>
         </Animated.View>
       </HoverCardPrimitive.Overlay>
     </HoverCardPrimitive.Portal>
   );
 }
 
+const styles = StyleSheet.create({
+  content: {
+    zIndex: 50,
+    width: 256,
+    borderRadius: 6,
+    borderWidth: 1,
+    padding: 16,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+});
+
 export { HoverCard, HoverCardContent, HoverCardTrigger };

package/components/ui/icon.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import { TextStyleProps, useTextStyles } from './text';
+import { LucideIcon } from 'lucide-react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+
+interface IconProps extends TextStyleProps {
+  icon: LucideIcon;
+}
+
+export const Icon: FunctionComponent<IconProps> = ({
+  icon,
+  ...textStyleProps
+}) => {
+  const textStyles = useTextStyles(textStyleProps);
+  const IconComponent = icon;
+  const iconStyle = StyleSheet.flatten(textStyles);
+  const { fontSize, color, ...restStyles } = iconStyle;
+  return (
+    <View style={restStyles as ViewStyle}>
+      <IconComponent size={fontSize} color={color} />
+    </View>
+  );
+};