linked-data-browser 0.0.0 → 0.0.2

package/components/ui/menubar.tsx

@@ -0,0 +1,288 @@
+import * as MenubarPrimitive from '@rn-primitives/menubar';
+import * as React from 'react';
+import { Platform, Text, type TextProps, View } 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 MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+function Menubar({
+  className,
+  ...props
+}: MenubarPrimitive.RootProps & {
+  ref?: React.RefObject<MenubarPrimitive.RootRef>;
+}) {
+  return (
+    <MenubarPrimitive.Root
+      className={cn(
+        'flex flex-row h-10 native:h-12 items-center space-x-1 rounded-md border border-border bg-background p-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: MenubarPrimitive.TriggerProps & {
+  ref?: React.RefObject<MenubarPrimitive.TriggerRef>;
+}) {
+  const { value } = MenubarPrimitive.useRootContext();
+  const { value: itemValue } = MenubarPrimitive.useMenuContext();
+
+  return (
+    <MenubarPrimitive.Trigger
+      className={cn(
+        'flex flex-row web:cursor-default web:select-none items-center rounded-sm px-3 py-1.5 text-sm native:h-10 native:px-5 native:py-0 font-medium web:outline-none web:focus:bg-accent active:bg-accent web:focus:text-accent-foreground',
+        value === itemValue && 'bg-accent text-accent-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenubarPrimitive.SubTriggerProps & {
+  ref?: React.RefObject<MenubarPrimitive.SubTriggerRef>;
+  className?: string;
+  inset?: boolean;
+  children?: React.ReactNode;
+}) {
+  const { open } = MenubarPrimitive.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',
+      )}
+    >
+      <MenubarPrimitive.SubTrigger
+        className={cn(
+          'flex flex-row web:cursor-default web:select-none items-center gap-2 web:focus:bg-accent active:bg-accent web:hover: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" />
+      </MenubarPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: MenubarPrimitive.SubContentProps & {
+  ref?: React.RefObject<MenubarPrimitive.SubContentRef>;
+}) {
+  const { open } = MenubarPrimitive.useSubContext();
+  return (
+    <MenubarPrimitive.SubContent
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border mt-1 border-border 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 MenubarContent({
+  className,
+  portalHost,
+  ...props
+}: MenubarPrimitive.ContentProps & {
+  ref?: React.RefObject<MenubarPrimitive.ContentRef>;
+  className?: string;
+  portalHost?: string;
+}) {
+  const { value } = MenubarPrimitive.useRootContext();
+  const { value: itemValue } = MenubarPrimitive.useMenuContext();
+  return (
+    <MenubarPrimitive.Portal hostName={portalHost}>
+      <MenubarPrimitive.Content
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5',
+          value === itemValue
+            ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
+            : 'web:animate-out web:fade-out-0 web:zoom-out-95',
+          className,
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  );
+}
+
+function MenubarItem({
+  className,
+  inset,
+  ...props
+}: MenubarPrimitive.ItemProps & {
+  ref?: React.RefObject<MenubarPrimitive.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">
+      <MenubarPrimitive.Item
+        className={cn(
+          'relative flex flex-row web:cursor-default items-center gap-2 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 MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: MenubarPrimitive.CheckboxItemProps & {
+  ref?: React.RefObject<MenubarPrimitive.CheckboxItemRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <MenubarPrimitive.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">
+        <MenubarPrimitive.ItemIndicator>
+          <Check size={14} strokeWidth={3} className="text-foreground" />
+        </MenubarPrimitive.ItemIndicator>
+      </View>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: MenubarPrimitive.RadioItemProps & {
+  ref?: React.RefObject<MenubarPrimitive.RadioItemRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <MenubarPrimitive.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">
+        <MenubarPrimitive.ItemIndicator>
+          <View className="bg-foreground h-2 w-2 rounded-full" />
+        </MenubarPrimitive.ItemIndicator>
+      </View>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: MenubarPrimitive.LabelProps & {
+  ref?: React.RefObject<MenubarPrimitive.LabelRef>;
+  className?: string;
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.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 MenubarSeparator({
+  className,
+  ...props
+}: MenubarPrimitive.SeparatorProps & {
+  ref?: React.RefObject<MenubarPrimitive.SeparatorRef>;
+}) {
+  return (
+    <MenubarPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function MenubarShortcut({ className, ...props }: TextProps) {
+  return (
+    <Text
+      className={cn(
+        'ml-auto text-xs native:text-sm tracking-widest text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+};

package/components/ui/navigation-menu.tsx

@@ -11,8 +11,8 @@ import Animated, {
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { ChevronDown } from '~/lib/icons/ChevronDown';
-import { cn } from '~/lib/utils';
+import { ChevronDown } from '../../lib/icons/ChevronDown';
+import { cn } from '../../lib/utils';
 
 function NavigationMenu({
   className,

package/components/ui/popover.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import * as PopoverPrimitive from '@rn-primitives/popover';
 import { Platform, StyleSheet } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { cn } from '~/lib/utils';
-import { TextClassContext } from '~/components/ui/text';
+import { cn } from '../../lib/utils';
+import { TextClassContext } from '../../components/ui/text';
 
 const Popover = PopoverPrimitive.Root;
 

package/components/ui/progress.tsx

@@ -8,7 +8,7 @@ import Animated, {
   useDerivedValue,
   withSpring,
 } from 'react-native-reanimated';
-import { cn } from '~/lib/utils';
+import { cn } from '../../lib/utils';
 
 function Progress({
   className,

package/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
 import { View } from 'react-native';
-import { cn } from '~/lib/utils';
+import { cn } from '../../lib/utils';
 import { Label } from './label';
 
 function RadioGroup({

package/components/ui/select.tsx

@@ -0,0 +1,215 @@
+import * as SelectPrimitive from '@rn-primitives/select';
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { Check } from '../../lib/icons/Check';
+import { ChevronDown } from '../../lib/icons/ChevronDown';
+import { ChevronUp } from '../../lib/icons/ChevronUp';
+import { cn } from '../../lib/utils';
+
+type Option = SelectPrimitive.Option;
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+function SelectTrigger({
+  ref,
+  className,
+  children,
+  ...props
+}: SelectPrimitive.TriggerProps & {
+  ref?: React.RefObject<SelectPrimitive.TriggerRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-row h-10 native:h-12 items-center text-sm justify-between rounded-md border border-input bg-background px-3 py-2 web:ring-offset-background text-muted-foreground web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        size={16}
+        aria-hidden={true}
+        className="text-foreground opacity-50"
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+/**
+ * Platform: WEB ONLY
+ */
+function SelectScrollUpButton({
+  className,
+  ...props
+}: SelectPrimitive.ScrollUpButtonProps) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className={cn(
+        'flex web:cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUp size={14} className="text-foreground" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+/**
+ * Platform: WEB ONLY
+ */
+function SelectScrollDownButton({
+  className,
+  ...props
+}: SelectPrimitive.ScrollDownButtonProps) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className={cn(
+        'flex web:cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDown size={14} className="text-foreground" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  portalHost,
+  ...props
+}: SelectPrimitive.ContentProps & {
+  ref?: React.RefObject<SelectPrimitive.ContentRef>;
+  className?: string;
+  portalHost?: string;
+}) {
+  const { open } = SelectPrimitive.useRootContext();
+
+  return (
+    <SelectPrimitive.Portal hostName={portalHost}>
+      <SelectPrimitive.Overlay
+        style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      >
+        <Animated.View className="z-50" entering={FadeIn} exiting={FadeOut}>
+          <SelectPrimitive.Content
+            className={cn(
+              'relative z-50 max-h-96 min-w-[8rem] rounded-md border border-border bg-popover shadow-md shadow-foreground/10 py-2 px-1 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',
+              position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+              open
+                ? 'web:zoom-in-95 web:animate-in web:fade-in-0'
+                : 'web:zoom-out-95 web:animate-out web:fade-out-0',
+              className,
+            )}
+            position={position}
+            {...props}
+          >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+              className={cn(
+                'p-1',
+                position === 'popper' &&
+                  'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+              )}
+            >
+              {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+          </SelectPrimitive.Content>
+        </Animated.View>
+      </SelectPrimitive.Overlay>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.LabelProps & {
+  ref?: React.RefObject<SelectPrimitive.LabelRef>;
+}) {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        'py-1.5 native:pb-2 pl-8 native:pl-10 pr-2 text-popover-foreground text-sm native:text-base font-semibold',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  ...props
+}: SelectPrimitive.ItemProps & {
+  ref?: React.RefObject<SelectPrimitive.ItemRef>;
+}) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        'relative web:group flex flex-row w-full web:cursor-default web:select-none items-center rounded-sm py-1.5 native:py-2 pl-8 native:pl-10 pr-2 web:hover:bg-accent/50 active:bg-accent web:outline-none web:focus:bg-accent',
+        props.disabled && 'web:pointer-events-none opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <View className="absolute left-2 native:left-3.5 flex h-3.5 native:pt-px w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check
+            size={16}
+            strokeWidth={3}
+            className="text-popover-foreground"
+          />
+        </SelectPrimitive.ItemIndicator>
+      </View>
+      <SelectPrimitive.ItemText className="text-sm native:text-lg text-popover-foreground native:text-base web:group-focus:text-accent-foreground" />
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.SeparatorProps & {
+  ref?: React.RefObject<SelectPrimitive.SeparatorRef>;
+}) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type Option,
+};

package/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 import * as SeparatorPrimitive from '@rn-primitives/separator';
 import * as React from 'react';
-import { cn } from '~/lib/utils';
+import { cn } from '../../lib/utils';
 
 function Separator({
   className,
@@ -17,7 +17,7 @@ function Separator({
       className={cn(
         'shrink-0 bg-border',
         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className
+        className,
       )}
       {...props}
     />

package/components/ui/skeleton.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+const duration = 1000;
+
+function Skeleton({
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<typeof Animated.View>, 'style'>) {
+  const sv = useSharedValue(1);
+
+  React.useEffect(() => {
+    sv.value = withRepeat(
+      withSequence(withTiming(0.5, { duration }), withTiming(1, { duration })),
+      -1,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const style = useAnimatedStyle(() => ({
+    opacity: sv.value,
+  }));
+
+  return (
+    <Animated.View
+      style={style}
+      className={cn('rounded-md bg-secondary dark:bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/components/ui/switch.tsx

@@ -7,7 +7,7 @@ import Animated, {
   useDerivedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { cn } from '~/lib/utils';
+import { cn } from '../../lib/utils';
 import { useThemeChange } from '../ThemeProvider';
 
 function SwitchWeb({