@medway-ui/native 1.0.2

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@medway-ui/native",
+  "version": "1.0.2",
+  "description": "Medway UI components for React Native (iOS/Android via Expo)",
+  "author": "Alekcarvalho",
+  "license": "MIT",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "lib/module/index.js",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "react-native": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js",
+      "default": "./lib/module/index.js"
+    }
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build:lib": "bob build",
+    "typecheck": "tsc --noEmit",
+    "release": "npm publish --access public",
+    "publish": "yarn build:lib && npm publish --access public"
+  },
+  "dependencies": {
+    "@rn-primitives/alert-dialog": "^1.0.0",
+    "@rn-primitives/checkbox": "^1.0.0",
+    "@rn-primitives/dialog": "^1.0.0",
+    "@rn-primitives/popover": "^1.0.0",
+    "@rn-primitives/portal": "^1.4.0",
+    "@rn-primitives/radio-group": "^1.0.0",
+    "@rn-primitives/select": "^1.0.0",
+    "@rn-primitives/slot": "^1.0.0",
+    "@rn-primitives/switch": "^1.0.0",
+    "@rn-primitives/tooltip": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@medway-ui/icons": "^1.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "nativewind": "^4.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-svg": ">=15.0.0",
+    "tailwind-merge": "^3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "class-variance-authority": {
+      "optional": false
+    },
+    "clsx": {
+      "optional": false
+    },
+    "tailwind-merge": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "nativewind": "^4.2.4",
+    "react": "^19.2.6",
+    "react-native": "^0.85.3",
+    "react-native-builder-bob": "^0.30.0",
+    "react-native-reanimated": "^4.4.0",
+    "react-native-svg": "^15.15.5",
+    "tailwind-merge": "^3.2.0",
+    "typescript": "^5"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      "module",
+      "typescript"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medway-dev/medway-ui.git",
+    "directory": "native"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "components",
+    "ui",
+    "design-system",
+    "medway",
+    "ios",
+    "android"
+  ]
+}

package/src/components/Alert.tsx

@@ -0,0 +1,185 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from "react";
+import { View, Text, Pressable, type ViewProps, type PressableProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CloseMd } from "@medway-ui/icons/native";
+import { cn } from "@/lib/utils";
+
+type AlertVariant = "regular" | "emphasis" | "success" | "warning" | "error";
+
+interface AlertProps extends ViewProps {
+  variant?: AlertVariant;
+  onClose?: () => void;
+  children?: ReactNode;
+}
+
+interface AlertButtonProps extends PressableProps, VariantProps<typeof alertButtonVariants> {
+  children?: ReactNode;
+}
+
+const AlertContext = createContext<{
+  variant: AlertVariant;
+  onClose?: () => void;
+} | null>(null);
+
+const alertVariants = cva("relative w-full rounded-md px-4 py-3 flex-col gap-1", {
+  variants: {
+    variant: {
+      regular: "bg-primary-background-soft",
+      emphasis: "bg-secondary-background-soft",
+      success: "bg-green-background-soft",
+      warning: "bg-yellow-background-soft",
+      error: "bg-red-background-soft",
+    },
+  },
+  defaultVariants: { variant: "regular" },
+});
+
+const alertTextColorVariants = cva("", {
+  variants: {
+    variant: {
+      regular: "text-primary-foreground",
+      emphasis: "text-secondary-foreground",
+      success: "text-green-foreground",
+      warning: "text-yellow-foreground",
+      error: "text-red-foreground",
+    },
+  },
+  defaultVariants: { variant: "regular" },
+});
+
+const alertButtonVariants = cva(
+  "flex-row items-center justify-center rounded-pill px-3 min-h-10",
+  {
+    variants: {
+      variant: {
+        regular: "",
+        basic: "bg-transparent",
+      },
+      alertVariant: {
+        regular: "bg-primary-background-soft",
+        emphasis: "bg-secondary-background-soft",
+        success: "bg-green-background-soft",
+        warning: "bg-yellow-background-soft",
+        error: "bg-red-background-soft",
+      },
+    },
+    defaultVariants: { variant: "regular", alertVariant: "regular" },
+  }
+);
+
+function useAlertContext() {
+  const context = useContext(AlertContext);
+  if (!context) throw new Error("Alert sub-components must be used inside <Alert>");
+  return context;
+}
+
+function Alert({ className, variant = "regular", onClose, children, ...props }: AlertProps) {
+  const ctx = useMemo(() => ({ variant, onClose }), [variant, onClose]);
+
+  return (
+    <AlertContext.Provider value={ctx}>
+      <View
+        accessibilityRole="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {onClose && (
+          <Pressable
+            onPress={onClose}
+            accessibilityLabel="Close alert"
+            className="absolute right-4 top-2"
+          >
+            <CloseMd size={16} className="text-gray-foreground" />
+          </Pressable>
+        )}
+      </View>
+    </AlertContext.Provider>
+  );
+}
+
+function AlertContainer({ className, ...props }: ViewProps) {
+  return <View className={cn("flex-row gap-3", className)} {...props} />;
+}
+
+function AlertContent({ className, ...props }: ViewProps) {
+  return <View className={cn("flex-col gap-1 flex-1", className)} {...props} />;
+}
+
+function AlertIcon({ className, icon, ...props }: ViewProps & { icon?: ReactNode }) {
+  return (
+    <View className={cn("w-6 h-6", className)} {...props}>
+      {icon}
+    </View>
+  );
+}
+
+function AlertTitle({ className, children, ...props }: ViewProps & { children?: ReactNode }) {
+  const { variant } = useAlertContext();
+  return (
+    <View className={cn("", className)} {...props}>
+      <Text
+        numberOfLines={1}
+        className={cn("text-md font-medium", alertTextColorVariants({ variant }))}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+function AlertDescription({ className, children, ...props }: ViewProps & { children?: ReactNode }) {
+  const { variant } = useAlertContext();
+  return (
+    <View className={cn("", className)} {...props}>
+      <Text
+        numberOfLines={3}
+        className={cn("text-sm leading-5", alertTextColorVariants({ variant }))}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+function AlertActions({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn("flex-row flex-wrap items-center gap-2 mt-2", className)} {...props} />
+  );
+}
+
+function AlertButton({ className, variant, children, ...props }: AlertButtonProps) {
+  const context = useContext(AlertContext);
+  const alertVariant = context?.variant ?? "regular";
+
+  return (
+    <Pressable
+      className={cn(alertButtonVariants({ variant, alertVariant }), className)}
+      accessibilityRole="button"
+      {...props}
+    >
+      <Text className={cn("text-sm font-semibold", alertTextColorVariants({ variant: alertVariant }))}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+
+export {
+  Alert,
+  AlertContainer,
+  AlertContent,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+  AlertActions,
+  AlertButton,
+  alertVariants,
+  alertButtonVariants,
+};
+export type { AlertProps, AlertButtonProps };

package/src/components/AlertDialog.tsx

@@ -0,0 +1,277 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { View, Text, type ViewProps } from "react-native";
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import { CloseMd } from "@medway-ui/icons/native";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Button, type ButtonProps } from "@/components/Button";
+import { Tag, type TagProps } from "@/components/Tag";
+
+type AlertDialogVariant = "regular" | "emphasis" | "warning" | "error" | "success";
+
+interface AlertDialogProps extends AlertDialogPrimitive.RootProps {
+  variant?: AlertDialogVariant;
+}
+
+interface AlertDialogContentProps extends AlertDialogPrimitive.ContentProps {
+  overlayClassName?: string;
+  showCloseButton?: boolean;
+}
+
+interface AlertDialogIconProps extends ViewProps {
+  icon: ReactNode;
+}
+
+interface AlertDialogTagProps {
+  variant?: AlertDialogVariant;
+  className?: string;
+  children?: ReactNode;
+}
+
+interface AlertDialogActionProps extends AlertDialogPrimitive.ActionProps {
+  variant?: ButtonProps["variant"];
+  size?: ButtonProps["size"];
+}
+
+interface AlertDialogCancelProps extends AlertDialogPrimitive.CancelProps {
+  variant?: ButtonProps["variant"];
+  size?: ButtonProps["size"];
+}
+
+const DEFAULT_VARIANT: AlertDialogVariant = "regular";
+
+const AlertDialogContext = createContext<{ variant: AlertDialogVariant } | null>(null);
+
+const alertDialogIconSectionVariants = cva(
+  "w-full items-center justify-center px-8 py-8",
+  {
+    variants: {
+      variant: {
+        regular: "bg-primary-background-soft",
+        emphasis: "bg-secondary-background-soft",
+        warning: "bg-feedback-warning-background-soft",
+        error: "bg-feedback-error-background-soft",
+        success: "bg-feedback-success-background-soft",
+      },
+    },
+    defaultVariants: { variant: DEFAULT_VARIANT },
+  }
+);
+
+const alertDialogIconContainerVariants = cva(
+  "items-center justify-center rounded-full p-4",
+  {
+    variants: {
+      variant: {
+        regular: "bg-primary-background-fill",
+        emphasis: "bg-secondary-background-fill",
+        warning: "bg-yellow-background-fill",
+        error: "bg-red-background-fill",
+        success: "bg-green-background-fill",
+      },
+    },
+    defaultVariants: { variant: DEFAULT_VARIANT },
+  }
+);
+
+const alertDialogIconTextVariants = cva("", {
+  variants: {
+    variant: {
+      regular: "text-primary-foreground-onfill",
+      emphasis: "text-secondary-foreground-onfill",
+      warning: "text-yellow-foreground-onfill",
+      error: "text-red-foreground-onfill",
+      success: "text-green-foreground-onfill",
+    },
+  },
+  defaultVariants: { variant: DEFAULT_VARIANT },
+});
+
+const alertDialogTagVariantMap: Record<AlertDialogVariant, TagProps["variant"]> = {
+  regular: "regular-soft",
+  emphasis: "emphasis-soft",
+  warning: "warning-soft",
+  error: "error-soft",
+  success: "success-soft",
+};
+
+const actionVariantMap: Record<AlertDialogVariant, NonNullable<ButtonProps["variant"]>> = {
+  regular: "regular",
+  emphasis: "emphasis",
+  warning: "warning",
+  error: "error",
+  success: "success",
+};
+
+function AlertDialog({ variant = DEFAULT_VARIANT, ...props }: AlertDialogProps) {
+  const ctx = useMemo(() => ({ variant }), [variant]);
+  return (
+    <AlertDialogContext.Provider value={ctx}>
+      <AlertDialogPrimitive.Root {...props} />
+    </AlertDialogContext.Provider>
+  );
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.TriggerProps) {
+  return <AlertDialogPrimitive.Trigger {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.PortalProps) {
+  return <AlertDialogPrimitive.Portal {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.OverlayProps) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn("absolute inset-0 bg-black/50", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  overlayClassName,
+  children,
+  showCloseButton = false,
+  ...props
+}: AlertDialogContentProps) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay
+        className={cn("absolute inset-0 items-center justify-center bg-black/50", overlayClassName)}
+      >
+        <AlertDialogPrimitive.Content
+          className={cn(
+            "relative flex-col w-full max-w-[calc(100%-2rem)] rounded-xl bg-background shadow-lg overflow-hidden",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <AlertDialogPrimitive.Cancel className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft">
+              <CloseMd size={16} className="text-gray-foreground" />
+            </AlertDialogPrimitive.Cancel>
+          )}
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPrimitive.Overlay>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex-col items-center gap-3 px-8 pt-8 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogIcon({ className, icon, ...props }: AlertDialogIconProps) {
+  const ctx = useContext(AlertDialogContext);
+  const variant = ctx?.variant ?? DEFAULT_VARIANT;
+
+  return (
+    <View className={cn(alertDialogIconSectionVariants({ variant }), className)} {...props}>
+      <View className={cn(alertDialogIconContainerVariants({ variant }))}>
+        <View className={cn("w-8 h-8 items-center justify-center", alertDialogIconTextVariants({ variant }))}>
+          {icon}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function AlertDialogTag({ className, variant, children }: AlertDialogTagProps) {
+  const ctx = useContext(AlertDialogContext);
+  const resolvedVariant = variant ?? ctx?.variant ?? DEFAULT_VARIANT;
+  return (
+    <View className="items-center">
+      <Tag variant={alertDialogTagVariantMap[resolvedVariant]} className={className}>
+        {children}
+      </Tag>
+    </View>
+  );
+}
+
+function AlertDialogTitle({ className, children, ...props }: AlertDialogPrimitive.TitleProps) {
+  return (
+    <AlertDialogPrimitive.Title className={cn("", className)} {...props}>
+      <Text className="text-title-sm font-semibold leading-title-sm text-content-title text-center">
+        {children}
+      </Text>
+    </AlertDialogPrimitive.Title>
+  );
+}
+
+function AlertDialogDescription({ className, children, ...props }: AlertDialogPrimitive.DescriptionProps) {
+  return (
+    <AlertDialogPrimitive.Description className={cn("", className)} {...props}>
+      <Text className="text-md leading-md text-content-paragraph text-center">
+        {children}
+      </Text>
+    </AlertDialogPrimitive.Description>
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex-row items-center justify-center gap-4 px-8 pb-8 pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, variant, size = "lg", children, ...props }: AlertDialogActionProps) {
+  const ctx = useContext(AlertDialogContext);
+  const resolvedVariant = variant ?? actionVariantMap[ctx?.variant ?? DEFAULT_VARIANT];
+
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn("flex-1", className)}
+      {...props}
+    >
+      <Button variant={resolvedVariant} size={size} className="w-full">
+        {children as ReactNode}
+      </Button>
+    </AlertDialogPrimitive.Action>
+  );
+}
+
+function AlertDialogCancel({ className, variant = "regular-soft", size = "lg", children, ...props }: AlertDialogCancelProps) {
+  return (
+    <AlertDialogPrimitive.Cancel className={cn("flex-1", className)} {...props}>
+      <Button variant={variant} size={size} className="w-full">
+        {children as ReactNode}
+      </Button>
+    </AlertDialogPrimitive.Cancel>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTag,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
+export type {
+  AlertDialogVariant,
+  AlertDialogProps,
+  AlertDialogContentProps,
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+  AlertDialogTagProps,
+  AlertDialogIconProps,
+};

package/src/components/Badge.tsx

@@ -0,0 +1,113 @@
+import { type ReactNode } from "react";
+import { View, Text, type ViewProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+type BadgeAnimation = "shine";
+
+interface BadgeProps extends ViewProps, VariantProps<typeof badgeVariants> {
+  icon?: ReactNode;
+  animation?: BadgeAnimation;
+  children?: ReactNode;
+}
+
+const ICON_ONLY_SIZES: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "h-4 w-4 p-0",
+  md: "h-5 w-5 p-0",
+  lg: "h-6 w-6 p-0",
+  xl: "h-7 w-7 p-0",
+};
+
+const CHAR_PADDING: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "px-1",
+  md: "px-1",
+  lg: "px-1",
+  xl: "px-1.5",
+};
+
+const badgeVariants = cva(
+  "flex-row items-center justify-center rounded-full px-2",
+  {
+    variants: {
+      variant: {
+        regular: "bg-secondary-background-fill",
+        error: "bg-red-background-soft",
+        warning: "bg-yellow-background-soft",
+        freemium: "bg-primary-background-fill",
+      },
+      size: {
+        sm: "min-h-4 min-w-4",
+        md: "min-h-5 min-w-5",
+        lg: "min-h-6 min-w-6",
+        xl: "min-h-7 min-w-7",
+      },
+    },
+    defaultVariants: {
+      variant: "regular",
+      size: "md",
+    },
+  }
+);
+
+const badgeTextVariants = cva("font-semibold", {
+  variants: {
+    variant: {
+      regular: "text-secondary-foreground-onfill",
+      error: "text-red-stroke-emphasis",
+      warning: "text-yellow-foreground",
+      freemium: "text-white",
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-xs",
+      lg: "text-xs",
+      xl: "text-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+    size: "md",
+  },
+});
+
+function Badge({
+  className,
+  variant,
+  size,
+  icon,
+  animation: _animation,
+  children,
+  ...props
+}: BadgeProps) {
+  const childText =
+    typeof children === "string" || typeof children === "number"
+      ? String(children).trim()
+      : "";
+  const isSingleAlphaNum = /^[A-Za-z0-9]$/.test(childText);
+  const isShortAlnumUpTo3 = /^[A-Za-z0-9]{2,3}$/.test(childText);
+  const isDigitsWithSuffix = /^\d{1,2}\S$/.test(childText);
+  const isIconOnly = !!icon && !children;
+  const isShortUpTo3 = isShortAlnumUpTo3 || isDigitsWithSuffix;
+
+  return (
+    <View
+      className={cn(
+        badgeVariants({ variant, size }),
+        (isIconOnly || isSingleAlphaNum) && ICON_ONLY_SIZES[size ?? "md"],
+        !isIconOnly && isShortUpTo3 && CHAR_PADDING[size ?? "md"],
+        className
+      )}
+      {...props}
+    >
+      {icon}
+      {children != null && (
+        <Text className={cn(badgeTextVariants({ variant, size }))}>
+          {children}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+export { Badge, badgeVariants };
+export type { BadgeAnimation, BadgeProps };