linked-data-browser 0.0.0

package/components/ui/dialog.tsx

@@ -0,0 +1,159 @@
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import * as React from 'react';
+import { Platform, StyleSheet, View, type ViewProps } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { X } from '~/lib/icons/X';
+import { cn } from '~/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+function DialogOverlayWeb({
+  className,
+  ...props
+}: DialogPrimitive.OverlayProps & {
+  ref?: React.RefObject<DialogPrimitive.OverlayRef>;
+}) {
+  const { open } = DialogPrimitive.useRootContext();
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        'bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
+        open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogOverlayNative({
+  className,
+  children,
+  ...props
+}: DialogPrimitive.OverlayProps & {
+  ref?: React.RefObject<DialogPrimitive.OverlayRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <DialogPrimitive.Overlay
+      style={StyleSheet.absoluteFill}
+      className={cn('flex bg-black/80 justify-center items-center p-2', className)}
+      {...props}
+    >
+      <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
+        {children}
+      </Animated.View>
+    </DialogPrimitive.Overlay>
+  );
+}
+
+const DialogOverlay = Platform.select({
+  web: DialogOverlayWeb,
+  default: DialogOverlayNative,
+});
+
+function DialogContent({
+  className,
+  children,
+  portalHost,
+  ...props
+}: DialogPrimitive.ContentProps & {
+  ref?: React.RefObject<DialogPrimitive.ContentRef>;
+  className?: string;
+  portalHost?: string;
+}) {
+  const { open } = DialogPrimitive.useRootContext();
+  return (
+    <DialogPortal hostName={portalHost}>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          className={cn(
+            'max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
+            open
+              ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
+              : 'web:animate-out web:fade-out-0 web:zoom-out-95',
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <DialogPrimitive.Close
+            className={
+              'absolute right-4 top-4 p-0.5 web:group rounded-sm opacity-70 web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none'
+            }
+          >
+            <X
+              size={Platform.OS === 'web' ? 16 : 18}
+              className={cn('text-muted-foreground', open && 'text-accent-foreground')}
+            />
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogOverlay>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
+  );
+}
+
+function DialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.TitleProps & {
+  ref?: React.RefObject<DialogPrimitive.TitleRef>;
+}) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        'text-lg native:text-xl text-foreground font-semibold leading-none tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.DescriptionProps & {
+  ref?: React.RefObject<DialogPrimitive.DescriptionRef>;
+}) {
+  return (
+    <DialogPrimitive.Description
+      className={cn('text-sm native:text-base text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/components/ui/dropdown-menu.tsx

@@ -0,0 +1,275 @@
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import * as React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  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';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuPrimitive.SubTriggerProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.SubTriggerRef>;
+  className?: string;
+  inset?: boolean;
+  children?: React.ReactNode;
+}) {
+  const { open } = DropdownMenuPrimitive.useSubContext();
+  const Icon =
+    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',
+      )}
+    >
+      <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>
+    </TextClassContext.Provider>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SubContentProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.SubContentRef>;
+}) {
+  const { open } = DropdownMenuPrimitive.useSubContext();
+  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,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}: DropdownMenuPrimitive.ContentProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.ContentRef>;
+  overlayStyle?: StyleProp<ViewStyle>;
+  overlayClassName?: string;
+  portalHost?: string;
+}) {
+  const { open } = DropdownMenuPrimitive.useRootContext();
+  return (
+    <DropdownMenuPrimitive.Portal hostName={portalHost}>
+      <DropdownMenuPrimitive.Overlay
+        style={
+          overlayStyle
+            ? StyleSheet.flatten([
+                Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
+                overlayStyle as typeof StyleSheet.absoluteFill,
+              ])
+            : Platform.OS !== 'web'
+              ? 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,
+          )}
+          {...props}
+        />
+      </DropdownMenuPrimitive.Overlay>
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  ...props
+}: DropdownMenuPrimitive.ItemProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.ItemRef>;
+  className?: string;
+  inset?: boolean;
+}) {
+  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>
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: DropdownMenuPrimitive.CheckboxItemProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.CheckboxItemRef>;
+  children?: React.ReactNode;
+}) {
+  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>
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuPrimitive.RadioItemProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.RadioItemRef>;
+  children?: React.ReactNode;
+}) {
+  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>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuPrimitive.LabelProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.LabelRef>;
+  className?: string;
+  inset?: boolean;
+}) {
+  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,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SeparatorProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.SeparatorRef>;
+}) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: TextProps) {
+  return (
+    <Text
+      className={cn(
+        'ml-auto text-xs native:text-sm tracking-widest text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+import { cn } from '~/lib/utils';
+
+function Input({
+  className,
+  placeholderClassName,
+  ...props
+}: TextInputProps & {
+  ref?: React.RefObject<TextInput>;
+}) {
+  return (
+    <TextInput
+      className={cn(
+        'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.editable === false && 'opacity-50 web:cursor-not-allowed',
+        className,
+      )}
+      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/components/ui/label.tsx

@@ -0,0 +1,34 @@
+import * as LabelPrimitive from '@rn-primitives/label';
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+function Label({
+  className,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}: LabelPrimitive.TextProps & {
+  ref?: React.RefObject<LabelPrimitive.TextRef>;
+}) {
+  return (
+    <LabelPrimitive.Root
+      className="web:cursor-default"
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+    >
+      <LabelPrimitive.Text
+        className={cn(
+          'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
+          className,
+        )}
+        {...props}
+      />
+    </LabelPrimitive.Root>
+  );
+}
+
+export { Label };

package/components/ui/navigation-menu.tsx

@@ -0,0 +1,200 @@
+import * as NavigationMenuPrimitive from '@rn-primitives/navigation-menu';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  FadeInLeft,
+  FadeOutLeft,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { ChevronDown } from '~/lib/icons/ChevronDown';
+import { cn } from '~/lib/utils';
+
+function NavigationMenu({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.RootProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.RootRef>;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      className={cn(
+        'relative z-10 flex flex-row max-w-max items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {Platform.OS === 'web' && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: NavigationMenuPrimitive.ListProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.ListRef>;
+}) {
+  return (
+    <NavigationMenuPrimitive.List
+      className={cn(
+        'web:group flex flex-1 flex-row web:list-none items-center justify-center gap-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  'web:group web:inline-flex flex-row h-10 native:h-12 native:px-3 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium web:transition-colors web:hover:bg-accent active:bg-accent web:hover:text-accent-foreground web:focus:bg-accent web:focus:text-accent-foreground web:focus:outline-none web:disabled:pointer-events-none disabled:opacity-50 web:data-[active]:bg-accent/50 web:data-[state=open]:bg-accent/50',
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: Omit<NavigationMenuPrimitive.TriggerProps, 'children'> & {
+  children?: React.ReactNode;
+  ref?: React.RefObject<NavigationMenuPrimitive.TriggerRef>;
+}) {
+  const { value } = NavigationMenuPrimitive.useRootContext();
+  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
+
+  const progress = useDerivedValue(() =>
+    value === itemValue
+      ? withTiming(1, { duration: 250 })
+      : withTiming(0, { duration: 200 }),
+  );
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
+  }));
+
+  return (
+    <NavigationMenuPrimitive.Trigger
+      className={cn(
+        navigationMenuTriggerStyle(),
+        'web:group gap-1.5',
+        value === itemValue && 'bg-accent',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <Animated.View style={chevronStyle}>
+        <ChevronDown
+          size={12}
+          className={cn(
+            'relative text-foreground h-3 w-3 web:transition web:duration-200',
+          )}
+          aria-hidden={true}
+        />
+      </Animated.View>
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  children,
+  portalHost,
+  ...props
+}: NavigationMenuPrimitive.ContentProps & {
+  portalHost?: string;
+  ref?: React.RefObject<NavigationMenuPrimitive.ContentRef>;
+}) {
+  const { value } = NavigationMenuPrimitive.useRootContext();
+  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
+  return (
+    <NavigationMenuPrimitive.Portal hostName={portalHost}>
+      <NavigationMenuPrimitive.Content
+        className={cn(
+          'w-full native:border native:border-border native:rounded-lg native:shadow-lg native:bg-popover native:text-popover-foreground native:overflow-hidden',
+          value === itemValue
+            ? 'web:animate-in web:fade-in web:slide-in-from-right-20'
+            : 'web:animate-out web:fade-out web:slide-out-to-left-20',
+          className,
+        )}
+        {...props}
+      >
+        <Animated.View
+          entering={Platform.OS !== 'web' ? FadeInLeft : undefined}
+          exiting={Platform.OS !== 'web' ? FadeOutLeft : undefined}
+        >
+          {children}
+        </Animated.View>
+      </NavigationMenuPrimitive.Content>
+    </NavigationMenuPrimitive.Portal>
+  );
+}
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: NavigationMenuPrimitive.ViewportProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.ViewportRef>;
+}) {
+  return (
+    <View className={cn('fixed right-0 top-12 mr-2 ml-2 flex justify-center')}>
+      <View
+        className={cn(
+          'web:origin-top-center relative mt-1.5 web:h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg web:animate-in web:zoom-in-90',
+          className,
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Viewport />
+      </View>
+    </View>
+  );
+}
+
+function NavigationMenuIndicator({
+  ref,
+  className,
+  ...props
+}: NavigationMenuPrimitive.IndicatorProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.IndicatorRef>;
+}) {
+  const { value } = NavigationMenuPrimitive.useRootContext();
+  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
+
+  return (
+    <NavigationMenuPrimitive.Indicator
+      ref={ref}
+      className={cn(
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        value === itemValue
+          ? 'web:animate-in web:fade-in'
+          : 'web:animate-out web:fade-out',
+        className,
+      )}
+      {...props}
+    >
+      <View className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md shadow-foreground/5" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuViewport,
+};