@munchi_oy/native-ui 0.1.0

package/src/primitives/select.tsx

@@ -0,0 +1,192 @@
+import * as SelectPrimitive from "@rn-primitives/select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react-native";
+import * as React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { cn } from "../utils";
+
+type Option = SelectPrimitive.Option;
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  SelectPrimitive.TriggerRef,
+  SelectPrimitive.TriggerProps
+>(({ className, children, ...props }, ref) => (
+  <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>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+/**
+ * Platform: WEB ONLY
+ */
+const 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
+ */
+const 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>
+  );
+};
+
+const SelectContent = React.forwardRef<
+  SelectPrimitive.ContentRef,
+  SelectPrimitive.ContentProps & { portalHost?: string }
+>(({ className, children, position = "popper", portalHost, ...props }, ref) => {
+  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
+            ref={ref}
+            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>
+  );
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  SelectPrimitive.LabelRef,
+  SelectPrimitive.LabelProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    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}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  SelectPrimitive.ItemRef,
+  SelectPrimitive.ItemProps
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    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>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  SelectPrimitive.SeparatorRef,
+  SelectPrimitive.SeparatorProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type Option
+};

package/src/primitives/separator.tsx

@@ -0,0 +1,28 @@
+import * as SeparatorPrimitive from "@rn-primitives/separator";
+import * as React from "react";
+import { cn } from "../utils";
+
+const Separator = React.forwardRef<
+  SeparatorPrimitive.RootRef,
+  SeparatorPrimitive.RootProps
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/primitives/skeleton.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from "react-native-reanimated";
+import { cn } from "../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
+    );
+  }, []);
+
+  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/src/primitives/switch.tsx

@@ -0,0 +1,102 @@
+import * as SwitchPrimitives from "@rn-primitives/switch";
+import * as React from "react";
+import { Platform } from "react-native";
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming
+} from "react-native-reanimated";
+import { useColorScheme } from "../hooks/useColorScheme";
+import { cn } from "../utils";
+
+const SwitchWeb = React.forwardRef<
+  SwitchPrimitives.RootRef,
+  SwitchPrimitives.RootProps
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer flex-row h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed",
+      props.checked ? "bg-primary" : "bg-input",
+      props.disabled && "opacity-50",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-md shadow-foreground/5 ring-0 transition-transform",
+        props.checked ? "translate-x-5" : "translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+
+SwitchWeb.displayName = "SwitchWeb";
+
+const RGB_COLORS = {
+  light: {
+    primary: "rgb(24, 24, 27)",
+    input: "rgb(228, 228, 231)"
+  },
+  dark: {
+    primary: "rgb(250, 250, 250)",
+    input: "rgb(39, 39, 42)"
+  }
+} as const;
+
+const SwitchNative = React.forwardRef<
+  SwitchPrimitives.RootRef,
+  SwitchPrimitives.RootProps
+>(({ className, ...props }, ref) => {
+  const { colorScheme } = useColorScheme();
+  const translateX = useDerivedValue(() => (props.checked ? 18 : 0));
+  const animatedRootStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        translateX.value,
+        [0, 18],
+        [RGB_COLORS[colorScheme].input, RGB_COLORS[colorScheme].primary]
+      )
+    };
+  });
+  const animatedThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: withTiming(translateX.value, { duration: 200 }) }]
+  }));
+  return (
+    <Animated.View
+      style={animatedRootStyle}
+      className={cn(
+        "h-8 w-[46px] rounded-full",
+        props.disabled && "opacity-50"
+      )}
+    >
+      <SwitchPrimitives.Root
+        className={cn(
+          "flex-row h-8 w-[46px] shrink-0 items-center rounded-full border-2 border-transparent",
+          props.checked ? "bg-primary" : "bg-input",
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        <Animated.View style={animatedThumbStyle}>
+          <SwitchPrimitives.Thumb
+            className={
+              "h-7 w-7 rounded-full bg-background shadow-md shadow-foreground/25 ring-0"
+            }
+          />
+        </Animated.View>
+      </SwitchPrimitives.Root>
+    </Animated.View>
+  );
+});
+SwitchNative.displayName = "SwitchNative";
+
+const Switch = Platform.select({
+  web: SwitchWeb,
+  default: SwitchNative
+});
+
+export { Switch };

package/src/primitives/table.tsx

@@ -0,0 +1,107 @@
+import * as TablePrimitive from "@rn-primitives/table";
+import * as React from "react";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const Table = React.forwardRef<
+  TablePrimitive.RootRef,
+  TablePrimitive.RootProps
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Root
+    ref={ref}
+    className={cn("w-full caption-bottom text-sm", className)}
+    {...props}
+  />
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  TablePrimitive.HeaderRef,
+  TablePrimitive.HeaderProps
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Header
+    ref={ref}
+    className={cn("border-border [&_tr]:border-b", className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  TablePrimitive.BodyRef,
+  TablePrimitive.BodyProps
+>(({ className, style, ...props }, ref) => (
+  <TablePrimitive.Body
+    ref={ref}
+    className={cn("flex-1 border-border [&_tr:last-child]:border-0", className)}
+    style={[{ minHeight: 2 }, style]}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  TablePrimitive.FooterRef,
+  TablePrimitive.FooterProps
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Footer
+    ref={ref}
+    className={cn("bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  TablePrimitive.RowRef,
+  TablePrimitive.RowProps
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Row
+    ref={ref}
+    className={cn(
+      "flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  TablePrimitive.HeadRef,
+  TablePrimitive.HeadProps
+>(({ className, ...props }, ref) => (
+  <TextClassContext.Provider value="text-muted-foreground">
+    <TablePrimitive.Head
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  TablePrimitive.CellRef,
+  TablePrimitive.CellProps
+>(({ className, ...props }, ref) => (
+  <TablePrimitive.Cell
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/src/primitives/tabs.tsx

@@ -0,0 +1,66 @@
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import * as React from "react";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  TabsPrimitive.ListRef,
+  TabsPrimitive.ListProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "web:inline-flex h-10 native:h-12 items-center justify-center rounded-md bg-muted p-1 native:px-1.5",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  TabsPrimitive.TriggerRef,
+  TabsPrimitive.TriggerProps
+>(({ className, ...props }, ref) => {
+  const { value } = TabsPrimitive.useRootContext();
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        "text-sm native:text-base font-medium text-muted-foreground web:transition-all",
+        value === props.value && "text-foreground"
+      )}
+    >
+      <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center shadow-none web:whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
+          props.disabled && "web:pointer-events-none opacity-50",
+          props.value === value &&
+            "bg-background shadow-lg shadow-foreground/10",
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  TabsPrimitive.ContentRef,
+  TabsPrimitive.ContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/primitives/text.tsx

@@ -0,0 +1,28 @@
+import * as Slot from "@rn-primitives/slot";
+import type { SlottableTextProps, TextRef } from "@rn-primitives/types";
+import * as React from "react";
+import { Text as RNText } from "react-native";
+import { cn } from "../utils";
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+const Text = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const textClass = React.useContext(TextClassContext);
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn(
+          "text-base text-foreground web:select-text",
+          textClass,
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Text.displayName = "Text";
+
+export { Text, TextClassContext };

package/src/primitives/textarea.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { cn } from "../utils";
+
+const Textarea = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  TextInputProps
+>(
+  (
+    {
+      className,
+      multiline = true,
+      numberOfLines = 4,
+      placeholderClassName,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          "web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground 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)}
+        multiline={multiline}
+        numberOfLines={numberOfLines}
+        textAlignVertical="top"
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/primitives/toggle-group.tsx

@@ -0,0 +1,89 @@
+import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import type { LucideIcon } from "lucide-react-native";
+import * as React from "react";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+import { toggleTextVariants, toggleVariants } from "./toggle";
+
+const ToggleGroupContext = React.createContext<VariantProps<
+  typeof toggleVariants
+> | null>(null);
+
+const ToggleGroup = React.forwardRef<
+  ToggleGroupPrimitive.RootRef,
+  ToggleGroupPrimitive.RootProps & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex flex-row items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+function useToggleGroupContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (context === null) {
+    throw new Error(
+      "ToggleGroup compound components cannot be rendered outside the ToggleGroup component"
+    );
+  }
+  return context;
+}
+
+const ToggleGroupItem = React.forwardRef<
+  ToggleGroupPrimitive.ItemRef,
+  ToggleGroupPrimitive.ItemProps & VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = useToggleGroupContext();
+  const { value } = ToggleGroupPrimitive.useRootContext();
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        toggleTextVariants({ variant, size }),
+        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
+          ? "text-accent-foreground"
+          : "web:group-hover:text-muted-foreground"
+      )}
+    >
+      <ToggleGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size
+          }),
+          props.disabled && "web:pointer-events-none opacity-50",
+          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) &&
+            "bg-accent",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Item>
+    </TextClassContext.Provider>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+function ToggleGroupIcon({
+  className,
+  icon: Icon,
+  ...props
+}: React.ComponentPropsWithoutRef<LucideIcon> & {
+  icon: LucideIcon;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  return <Icon className={cn(textClass, className)} {...props} />;
+}
+
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };