@munchi_oy/native-ui 0.1.0

package/src/primitives/menubar.tsx

@@ -0,0 +1,266 @@
+import * as MenubarPrimitive from "@rn-primitives/menubar";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp
+} from "lucide-react-native";
+import * as React from "react";
+import { Platform, Text, type TextProps, View } from "react-native";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  MenubarPrimitive.RootRef,
+  MenubarPrimitive.RootProps
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    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}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  MenubarPrimitive.TriggerRef,
+  MenubarPrimitive.TriggerProps
+>(({ className, ...props }, ref) => {
+  const { value } = MenubarPrimitive.useRootContext();
+  const { value: itemValue } = MenubarPrimitive.useMenuContext();
+
+  return (
+    <MenubarPrimitive.Trigger
+      ref={ref}
+      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}
+    />
+  );
+});
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  MenubarPrimitive.SubTriggerRef,
+  MenubarPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => {
+  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
+        ref={ref}
+        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>
+  );
+});
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  MenubarPrimitive.SubContentRef,
+  MenubarPrimitive.SubContentProps
+>(({ className, ...props }, ref) => {
+  const { open } = MenubarPrimitive.useSubContext();
+  return (
+    <MenubarPrimitive.SubContent
+      ref={ref}
+      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}
+    />
+  );
+});
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  MenubarPrimitive.ContentRef,
+  MenubarPrimitive.ContentProps & { portalHost?: string }
+>(({ className, portalHost, ...props }, ref) => {
+  const { value } = MenubarPrimitive.useRootContext();
+  const { value: itemValue } = MenubarPrimitive.useMenuContext();
+  return (
+    <MenubarPrimitive.Portal hostName={portalHost}>
+      <MenubarPrimitive.Content
+        ref={ref}
+        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>
+  );
+});
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  MenubarPrimitive.ItemRef,
+  MenubarPrimitive.ItemProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <TextClassContext.Provider value="select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground">
+    <MenubarPrimitive.Item
+      ref={ref}
+      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>
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  MenubarPrimitive.CheckboxItemRef,
+  MenubarPrimitive.CheckboxItemProps
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    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>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  MenubarPrimitive.RadioItemRef,
+  MenubarPrimitive.RadioItemProps
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    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>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  MenubarPrimitive.LabelRef,
+  MenubarPrimitive.LabelProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  MenubarPrimitive.SeparatorRef,
+  MenubarPrimitive.SeparatorProps
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: TextProps) => {
+  return (
+    <Text
+      className={cn(
+        "ml-auto text-xs native:text-sm tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+MenubarShortcut.displayName = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger
+};

package/src/primitives/navigation-menu.tsx

@@ -0,0 +1,192 @@
+import * as NavigationMenuPrimitive from "@rn-primitives/navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react-native";
+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 { cn } from "../utils";
+
+const NavigationMenu = React.forwardRef<
+  NavigationMenuPrimitive.RootRef,
+  NavigationMenuPrimitive.RootProps
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex flex-row max-w-max items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    {Platform.OS === "web" && <NavigationMenuViewport />}
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  NavigationMenuPrimitive.ListRef,
+  NavigationMenuPrimitive.ListProps
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "web:group flex flex-1 flex-row web:list-none items-center justify-center gap-1",
+      className
+    )}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+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"
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  NavigationMenuPrimitive.TriggerRef,
+  NavigationMenuPrimitive.TriggerProps
+>(({ className, children, ...props }, ref) => {
+  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
+      ref={ref}
+      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>
+  );
+});
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  NavigationMenuPrimitive.ContentRef,
+  NavigationMenuPrimitive.ContentProps & {
+    portalHost?: string;
+  }
+>(({ className, children, portalHost, ...props }, ref) => {
+  const { value } = NavigationMenuPrimitive.useRootContext();
+  const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
+  return (
+    <NavigationMenuPrimitive.Portal hostName={portalHost}>
+      <NavigationMenuPrimitive.Content
+        ref={ref}
+        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>
+  );
+});
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  NavigationMenuPrimitive.ViewportRef,
+  NavigationMenuPrimitive.ViewportProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View className={cn("absolute left-0 top-full 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
+        )}
+        ref={ref}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Viewport />
+      </View>
+    </View>
+  );
+});
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  NavigationMenuPrimitive.IndicatorRef,
+  NavigationMenuPrimitive.IndicatorProps
+>(({ className, ...props }, ref) => {
+  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>
+  );
+});
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuViewport
+};

package/src/primitives/popover.tsx

@@ -0,0 +1,46 @@
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import * as React from "react";
+import { Platform, StyleSheet } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  PopoverPrimitive.ContentRef,
+  PopoverPrimitive.ContentProps & { portalHost?: string }
+>(
+  (
+    { className, align = "center", sideOffset = 4, portalHost, ...props },
+    ref
+  ) => {
+    return (
+      <PopoverPrimitive.Portal hostName={portalHost}>
+        <PopoverPrimitive.Overlay
+          style={Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined}
+        >
+          <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
+            <TextClassContext.Provider value="text-popover-foreground">
+              <PopoverPrimitive.Content
+                ref={ref}
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                  "z-50 w-72 rounded-md web:cursor-auto border border-border bg-popover p-4 shadow-md shadow-foreground/5 web:outline-none 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 web:animate-in web:zoom-in-95 web:fade-in-0",
+                  className
+                )}
+                {...props}
+              />
+            </TextClassContext.Provider>
+          </Animated.View>
+        </PopoverPrimitive.Overlay>
+      </PopoverPrimitive.Portal>
+    );
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/src/primitives/progress.tsx

@@ -0,0 +1,82 @@
+import * as ProgressPrimitive from "@rn-primitives/progress";
+import * as React from "react";
+import { Platform, View, type ViewProps } from "react-native";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withSpring
+} from "react-native-reanimated";
+import { cn } from "../utils";
+
+const Progress = React.forwardRef<
+  ProgressPrimitive.RootRef,
+  ProgressPrimitive.RootProps & {
+    indicatorClassName?: ViewProps["className"];
+  }
+>(({ className, value, indicatorClassName, ...props }, ref) => {
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+        className
+      )}
+      {...props}
+    >
+      <Indicator value={value} className={indicatorClassName} />
+    </ProgressPrimitive.Root>
+  );
+});
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
+
+function Indicator({
+  value,
+  className
+}: {
+  value: number | undefined | null;
+} & Pick<ViewProps, "className">) {
+  const progress = useDerivedValue(() => value ?? 0);
+
+  const indicator = useAnimatedStyle(() => {
+    return {
+      width: withSpring(
+        `${interpolate(
+          progress.value,
+          [0, 100],
+          [1, 100],
+          Extrapolation.CLAMP
+        )}%`,
+        { overshootClamping: true }
+      )
+    };
+  });
+
+  if (Platform.OS === "web") {
+    return (
+      <View
+        className={cn(
+          "h-full w-full flex-1 bg-primary web:transition-all",
+          className
+        )}
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      >
+        <ProgressPrimitive.Indicator
+          className={cn("h-full w-full", className)}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <ProgressPrimitive.Indicator asChild>
+      <Animated.View
+        style={indicator}
+        className={cn("h-full bg-foreground", className)}
+      />
+    </ProgressPrimitive.Indicator>
+  );
+}

package/src/primitives/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
+import * as React from "react";
+import { View } from "react-native";
+import { cn } from "../utils";
+
+const RadioGroup = React.forwardRef<
+  RadioGroupPrimitive.RootRef,
+  RadioGroupPrimitive.RootProps
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("web:grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  RadioGroupPrimitive.ItemRef,
+  RadioGroupPrimitive.ItemProps
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full justify-center items-center border border-border web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+        props.disabled && "web:cursor-not-allowed opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <View className="aspect-square h-[9px] w-[9px] native:h-[10] native:w-[10] bg-primary rounded-full" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };