@munchi_oy/native-ui 0.1.0

package/src/primitives/toggle.tsx

@@ -0,0 +1,91 @@
+import * as TogglePrimitive from "@rn-primitives/toggle";
+import { type VariantProps, cva } from "class-variance-authority";
+import type { LucideIcon } from "lucide-react-native";
+import * as React from "react";
+import { cn } from "../utils";
+import { TextClassContext } from "./text";
+
+const toggleVariants = cva(
+  "web:group web:inline-flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:hover:bg-muted active:bg-muted 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-transparent",
+        outline:
+          "border border-input bg-transparent web:hover:bg-accent active:bg-accent active:bg-accent"
+      },
+      size: {
+        default: "h-10 px-3 native:h-12 native:px-[12]",
+        sm: "h-9 px-2.5 native:h-10 native:px-[9]",
+        lg: "h-11 px-5 native:h-14 native:px-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+const toggleTextVariants = cva(
+  "text-sm native:text-base text-foreground font-medium",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline:
+          "web:group-hover:text-accent-foreground web:group-active:text-accent-foreground"
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+const Toggle = React.forwardRef<
+  TogglePrimitive.RootRef,
+  TogglePrimitive.RootProps & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TextClassContext.Provider
+    value={cn(
+      toggleTextVariants({ variant, size }),
+      props.pressed
+        ? "text-accent-foreground"
+        : "web:group-hover:text-muted-foreground",
+      className
+    )}
+  >
+    <TogglePrimitive.Root
+      ref={ref}
+      className={cn(
+        toggleVariants({ variant, size }),
+        props.disabled && "web:pointer-events-none opacity-50",
+        props.pressed && "bg-accent",
+        className
+      )}
+      {...props}
+    />
+  </TextClassContext.Provider>
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+function ToggleIcon({
+  className,
+  icon: Icon,
+  ...props
+}: React.ComponentPropsWithoutRef<LucideIcon> & {
+  icon: LucideIcon;
+}) {
+  const textClass = React.useContext(TextClassContext);
+  return <Icon className={cn(textClass, className)} {...props} />;
+}
+
+export { Toggle, ToggleIcon, toggleTextVariants, toggleVariants };

package/src/primitives/tooltip.tsx

@@ -0,0 +1,40 @@
+import * as TooltipPrimitive from "@rn-primitives/tooltip";
+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 Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  TooltipPrimitive.ContentRef,
+  TooltipPrimitive.ContentProps & { portalHost?: string }
+>(({ className, sideOffset = 4, portalHost, ...props }, ref) => (
+  <TooltipPrimitive.Portal hostName={portalHost}>
+    <TooltipPrimitive.Overlay
+      style={Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined}
+    >
+      <Animated.View
+        entering={Platform.select({ web: undefined, default: FadeIn })}
+        exiting={Platform.select({ web: undefined, default: FadeOut })}
+      >
+        <TextClassContext.Provider value="text-sm native:text-base text-popover-foreground">
+          <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+              "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md shadow-foreground/5 web:animate-in web:fade-in-0 web:zoom-in-95 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",
+              className
+            )}
+            {...props}
+          />
+        </TextClassContext.Provider>
+      </Animated.View>
+    </TooltipPrimitive.Overlay>
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipTrigger };

package/src/primitives/typography.tsx

@@ -0,0 +1,214 @@
+import * as Slot from "@rn-primitives/slot";
+import type { SlottableTextProps, TextRef } from "@rn-primitives/types";
+import * as React from "react";
+import { Platform, Text as RNText } from "react-native";
+import { cn } from "../utils";
+
+const H1 = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        role="heading"
+        aria-level="1"
+        className={cn(
+          "web:scroll-m-20 text-4xl text-foreground font-extrabold tracking-tight lg:text-5xl web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+H1.displayName = "H1";
+
+const H2 = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        role="heading"
+        aria-level="2"
+        className={cn(
+          "web:scroll-m-20 border-b border-border pb-2 text-3xl text-foreground font-semibold tracking-tight first:mt-0 web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+H2.displayName = "H2";
+
+const H3 = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        role="heading"
+        aria-level="3"
+        className={cn(
+          "web:scroll-m-20 text-2xl text-foreground font-semibold tracking-tight web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+H3.displayName = "H3";
+
+const H4 = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        role="heading"
+        aria-level="4"
+        className={cn(
+          "web:scroll-m-20 text-xl text-foreground font-semibold tracking-tight web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+H4.displayName = "H4";
+
+const P = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn("text-base text-foreground web:select-text", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+P.displayName = "P";
+
+const BlockQuote = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        // @ts-ignore - role of blockquote renders blockquote element on the web
+        role={Platform.OS === "web" ? "blockquote" : undefined}
+        className={cn(
+          "mt-6 native:mt-4 border-l-2 border-border pl-6 native:pl-3 text-base text-foreground italic web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+BlockQuote.displayName = "BlockQuote";
+
+const Code = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        // @ts-ignore - role of code renders code element on the web
+        role={Platform.OS === "web" ? "code" : undefined}
+        className={cn(
+          "relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] text-sm text-foreground font-semibold web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Code.displayName = "Code";
+
+const Lead = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn(
+          "text-xl text-muted-foreground web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Lead.displayName = "Lead";
+
+const Large = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn(
+          "text-xl text-foreground font-semibold web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Large.displayName = "Large";
+
+const Small = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn(
+          "text-sm text-foreground font-medium leading-none web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Small.displayName = "Small";
+
+const Muted = React.forwardRef<TextRef, SlottableTextProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : RNText;
+    return (
+      <Component
+        className={cn(
+          "text-sm text-muted-foreground web:select-text",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Muted.displayName = "Muted";
+
+export { BlockQuote, Code, H1, H2, H3, H4, Large, Lead, Muted, P, Small };

package/src/theme.ts

@@ -0,0 +1,43 @@
+export const lightVars = {
+  "--background": "0 0% 95.7%",
+  "--foreground": "0 0% 7.8%",
+  "--card": "0 0% 100%",
+  "--card-foreground": "0 0% 7.8%",
+  "--popover": "0 0% 100%",
+  "--popover-foreground": "0 0% 7.8%",
+  "--primary": "0 0% 7.8%",
+  "--primary-foreground": "0 0% 100%",
+  "--secondary": "0 0% 93%",
+  "--secondary-foreground": "0 0% 7.8%",
+  "--muted": "0 0% 93%",
+  "--muted-foreground": "0 0% 45%",
+  "--accent": "0 0% 89.4%",
+  "--accent-foreground": "0 0% 7.8%",
+  "--destructive": "0 84.2% 60.2%",
+  "--destructive-foreground": "0 0% 100%",
+  "--border": "0 0% 78%",
+  "--input": "0 0% 78%",
+  "--ring": "0 0% 7.8%"
+} as const;
+
+export const darkVars = {
+  "--background": "0 0% 7.8%",
+  "--foreground": "0 0% 100%",
+  "--card": "0 0% 14.5%",
+  "--card-foreground": "0 0% 100%",
+  "--popover": "0 0% 14.5%",
+  "--popover-foreground": "0 0% 100%",
+  "--primary": "0 0% 100%",
+  "--primary-foreground": "0 0% 7.8%",
+  "--secondary": "0 0% 18%",
+  "--secondary-foreground": "0 0% 100%",
+  "--muted": "0 0% 11%",
+  "--muted-foreground": "0 0% 60%",
+  "--accent": "0 0% 21.2%",
+  "--accent-foreground": "0 0% 100%",
+  "--destructive": "0 72% 51%",
+  "--destructive-foreground": "0 0% 100%",
+  "--border": "0 0% 28%",
+  "--input": "0 0% 28%",
+  "--ring": "0 0% 60%"
+} as const;

package/src/tokens.ts

@@ -0,0 +1,7 @@
+export const typography = {
+  regular: "DMSans_400Regular",
+  medium: "DMSans_500Medium",
+  bold: "DMSans_700Bold"
+} as const;
+
+export type TypographyToken = keyof typeof typography;

package/src/utils.ts

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function padNumber(
+  number: number | string,
+  length = 4,
+  padChar = "0"
+): string {
+  return number.toString().padStart(length, padChar);
+}

package/tailwind.config.ts

@@ -0,0 +1,112 @@
+import { hairlineWidth } from "nativewind/theme";
+import type { Config } from "tailwindcss";
+import { darkVars, lightVars } from "./src/theme";
+
+const config: Config = {
+  darkMode: "class",
+  content: ["./src/**/*.{ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    // Mobile + tablet only — no desktop xl/2xl. Height queries: POS split layouts.
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      "h-sm": { raw: "(min-height: 600px)" },
+      "h-md": { raw: "(min-height: 768px)" }
+    },
+    extend: {
+      fontFamily: {
+        munchi: ["DMSans_400Regular"],
+        "munchi-medium": ["DMSans_400Regular"],
+        "munchi-semibold": ["DMSans_500Medium"],
+        "munchi-bold": ["DMSans_700Bold"]
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        }
+      },
+      borderWidth: {
+        hairline: hairlineWidth()
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out"
+      },
+      flex: {
+        2: "2",
+        3: "3"
+      },
+      spacing: {
+        18: "4.5rem",
+        88: "22rem",
+        128: "32rem"
+      },
+      fontSize: {
+        xs: ["0.75rem", { lineHeight: "1rem" }],
+        sm: ["0.875rem", { lineHeight: "1.25rem" }],
+        base: ["1rem", { lineHeight: "1.5rem" }],
+        lg: ["1.125rem", { lineHeight: "1.75rem" }],
+        xl: ["1.25rem", { lineHeight: "1.75rem" }],
+        "2xl": ["1.5rem", { lineHeight: "2rem" }],
+        "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+        "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+        "5xl": ["3rem", { lineHeight: "1" }],
+        "6xl": ["3.75rem", { lineHeight: "1" }]
+      }
+    }
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    ({
+      addBase
+    }: { addBase: (base: Record<string, Record<string, string>>) => void }) =>
+      addBase({
+        ":root": lightVars,
+        ".dark": darkVars
+      })
+  ]
+};
+
+export default config;