@munchi_oy/native-ui 0.1.0

package/src/primitives/alert.tsx

@@ -0,0 +1,94 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type { LucideIcon } from "lucide-react-native";
+import * as React from "react";
+import { View, type ViewProps } from "react-native";
+import { cn } from "../utils";
+import { Text } from "./text";
+
+const alertVariants = cva(
+  "relative bg-background w-full rounded-lg border border-border p-4 shadow shadow-foreground/10",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "border-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+const ICON_COLORS = {
+  default: "hsl(240 10% 3.9%)",
+  destructive: "hsl(0 84.2% 60.2%)"
+} as const;
+
+const Alert = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ViewProps &
+    VariantProps<typeof alertVariants> & {
+      icon: LucideIcon;
+      iconSize?: number;
+      iconClassName?: ViewProps["className"];
+    }
+>(
+  (
+    {
+      className,
+      variant,
+      children,
+      icon: Icon,
+      iconSize = 16,
+      iconClassName,
+      ...props
+    },
+    ref
+  ) => {
+    const iconColor = ICON_COLORS[variant ?? "default"];
+    return (
+      <View
+        ref={ref}
+        role="alert"
+        className={alertVariants({ variant, className })}
+        {...props}
+      >
+        <View className="absolute left-3.5 top-4 -translate-y-0.5">
+          <Icon size={iconSize} color={iconColor} />
+        </View>
+        {children}
+      </View>
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn(
+      "pl-7 mb-1 font-medium text-base leading-none tracking-tight text-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn("pl-7 text-sm leading-relaxed text-foreground", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription, AlertTitle };

package/src/primitives/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@rn-primitives/aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/src/primitives/avatar.tsx

@@ -0,0 +1,47 @@
+import * as AvatarPrimitive from "@rn-primitives/avatar";
+import * as React from "react";
+import { cn } from "../utils";
+
+const Avatar = React.forwardRef<
+  AvatarPrimitive.RootRef,
+  AvatarPrimitive.RootProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  AvatarPrimitive.ImageRef,
+  AvatarPrimitive.ImageProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  AvatarPrimitive.FallbackRef,
+  AvatarPrimitive.FallbackProps
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/src/primitives/badge.tsx

@@ -0,0 +1,57 @@
+import * as Slot from "@rn-primitives/slot";
+import type { SlottableViewProps } from "@rn-primitives/types";
+import { type VariantProps, cva } from "class-variance-authority";
+import { View } from "react-native";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const badgeVariants = cva(
+  "web:inline-flex items-center rounded-full border border-border px-2.5 py-0.5 web:transition-colors web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary web:hover:opacity-80 active:opacity-80",
+        secondary:
+          "border-transparent bg-secondary web:hover:opacity-80 active:opacity-80",
+        destructive:
+          "border-transparent bg-destructive web:hover:opacity-80 active:opacity-80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+const badgeTextVariants = cva("text-xs font-semibold ", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+type BadgeProps = SlottableViewProps & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <TextClassContext.Provider value={badgeTextVariants({ variant })}>
+      <Component
+        className={cn(badgeVariants({ variant }), className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };

package/src/primitives/button.tsx

@@ -0,0 +1,92 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+import { Pressable } from "react-native";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const buttonVariants = cva(
+  "group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary web:hover:opacity-90 active:opacity-90",
+        destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
+        outline:
+          "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+        ghost:
+          "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        link: "web:underline-offset-4 web:hover:underline web:focus:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8 native:h-14",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+const buttonTextVariants = cva(
+  "web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "group-active:text-accent-foreground",
+        secondary:
+          "text-secondary-foreground group-active:text-secondary-foreground",
+        ghost: "group-active:text-accent-foreground",
+        link: "text-primary group-active:underline"
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: "native:text-lg",
+        icon: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(({ className, variant, size, ...props }, ref) => {
+  return (
+    <TextClassContext.Provider
+      value={buttonTextVariants({
+        variant,
+        size,
+        className: "web:pointer-events-none"
+      })}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && "opacity-50 web:pointer-events-none",
+          buttonVariants({ variant, size, className })
+        )}
+        ref={ref}
+        role="button"
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

package/src/primitives/card.tsx

@@ -0,0 +1,86 @@
+import type { TextRef, ViewRef } from "@rn-primitives/types";
+import * as React from "react";
+import { Text, type TextProps, View, type ViewProps } from "react-native";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const Card = React.forwardRef<ViewRef, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "rounded-lg border border-border bg-card shadow-sm shadow-foreground/10",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<ViewRef, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<TextRef, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      role="heading"
+      aria-level={3}
+      ref={ref}
+      className={cn(
+        "text-2xl text-card-foreground font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<TextRef, TextProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<ViewRef, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <TextClassContext.Provider value="text-card-foreground">
+      <View ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    </TextClassContext.Provider>
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<ViewRef, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex flex-row items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/src/primitives/checkbox.tsx

@@ -0,0 +1,35 @@
+import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+import { Check } from "lucide-react-native";
+import * as React from "react";
+import { Platform } from "react-native";
+import { cn } from "../utils";
+
+const Checkbox = React.forwardRef<
+  CheckboxPrimitive.RootRef,
+  CheckboxPrimitive.RootProps
+>(({ className, ...props }, ref) => {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        "web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        props.checked && "bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn("items-center justify-center h-full w-full")}
+      >
+        <Check
+          size={12}
+          strokeWidth={Platform.OS === "web" ? 2.5 : 3.5}
+          className="text-primary-foreground"
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/primitives/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/primitives/context-menu.tsx

@@ -0,0 +1,255 @@
+import * as ContextMenuPrimitive from "@rn-primitives/context-menu";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp
+} from "lucide-react-native";
+import * as React from "react";
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextProps,
+  View,
+  type ViewProps,
+  type ViewStyle
+} from "react-native";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  ContextMenuPrimitive.SubTriggerRef,
+  ContextMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => {
+  const { open } = ContextMenuPrimitive.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"
+      )}
+    >
+      <ContextMenuPrimitive.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" />
+      </ContextMenuPrimitive.SubTrigger>
+    </TextClassContext.Provider>
+  );
+});
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  ContextMenuPrimitive.SubContentRef,
+  ContextMenuPrimitive.SubContentProps
+>(({ className, ...props }, ref) => {
+  const { open } = ContextMenuPrimitive.useSubContext();
+  return (
+    <ContextMenuPrimitive.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}
+    />
+  );
+});
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+
+const ContextMenuContent = React.forwardRef<
+  ContextMenuPrimitive.ContentRef,
+  ContextMenuPrimitive.ContentProps & {
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayClassName?: ViewProps["className"];
+    portalHost?: string;
+  }
+>(
+  (
+    { className, overlayClassName, overlayStyle, portalHost, ...props },
+    ref
+  ) => {
+    const { open } = ContextMenuPrimitive.useRootContext();
+    return (
+      <ContextMenuPrimitive.Portal hostName={portalHost}>
+        <ContextMenuPrimitive.Overlay
+          style={
+            overlayStyle
+              ? StyleSheet.flatten([
+                  Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+                  overlayStyle
+                ])
+              : Platform.OS !== "web"
+                ? StyleSheet.absoluteFill
+                : undefined
+          }
+          className={overlayClassName}
+        >
+          <ContextMenuPrimitive.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 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}
+          />
+        </ContextMenuPrimitive.Overlay>
+      </ContextMenuPrimitive.Portal>
+    );
+  }
+);
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  ContextMenuPrimitive.ItemRef,
+  ContextMenuPrimitive.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">
+    <ContextMenuPrimitive.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>
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  ContextMenuPrimitive.CheckboxItemRef,
+  ContextMenuPrimitive.CheckboxItemProps
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.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
+    )}
+    {...props}
+  >
+    <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check size={14} strokeWidth={3} className="text-foreground" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </View>
+    <>{children}</>
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  ContextMenuPrimitive.RadioItemRef,
+  ContextMenuPrimitive.RadioItemProps
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.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">
+      <ContextMenuPrimitive.ItemIndicator>
+        <View className="bg-foreground h-2 w-2 rounded-full" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </View>
+    <>{children}</>
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  ContextMenuPrimitive.LabelRef,
+  ContextMenuPrimitive.LabelProps & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.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}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  ContextMenuPrimitive.SeparatorRef,
+  ContextMenuPrimitive.SeparatorProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: TextProps) => {
+  return (
+    <Text
+      className={cn(
+        "ml-auto text-xs native:text-sm tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+};