@medway-ui/native 1.0.2

package/src/components/Button.tsx

@@ -0,0 +1,224 @@
+import { type ReactNode } from "react";
+import {
+  Pressable,
+  View,
+  Text,
+  type PressableProps,
+  type ViewStyle,
+} from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { Loading } from "@/components/Loading";
+import { Badge as BadgeComponent } from "@/components/Badge";
+
+interface ButtonProps extends Omit<PressableProps, "children">, VariantProps<typeof buttonVariants> {
+  children?: ReactNode;
+  containerStyle?: ViewStyle;
+  iconRight?: ReactNode;
+  iconLeft?: ReactNode;
+  badge?: number | string;
+  loading?: boolean;
+  alert?: string;
+}
+
+const ICON_ONLY_SIZES: Record<"sm" | "md" | "lg" | "xl", string> = {
+  sm: "h-8 min-h-8 w-8",
+  md: "h-10 min-h-10 w-10",
+  lg: "h-12 min-h-12 w-12",
+  xl: "h-14 min-h-14 w-14",
+};
+
+const badgeSizeMap: Record<"sm" | "md" | "lg" | "xl", "sm" | "md" | "lg" | "xl"> = {
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg",
+};
+
+const ALERT_DOT_SIZES: Record<"sm" | "md" | "lg" | "xl", number> = {
+  sm: 8,
+  md: 10,
+  lg: 10,
+  xl: 12,
+};
+
+const buttonVariants = cva(
+  "flex-row items-center justify-center gap-2 rounded-pill font-semibold",
+  {
+    variants: {
+      variant: {
+        regular:
+          "bg-primary-background-fill active:bg-primary-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+        "regular-soft":
+          "bg-primary-background-soft active:bg-primary-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+        "regular-basic":
+          "bg-transparent active:bg-primary-background-soft-emphasis disabled:bg-transparent",
+        emphasis:
+          "bg-secondary-background-fill active:bg-secondary-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+        "emphasis-soft":
+          "bg-secondary-background-soft active:bg-secondary-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+        "emphasis-basic":
+          "bg-transparent active:bg-secondary-background-soft-emphasis disabled:bg-transparent",
+        error:
+          "bg-red-background-fill active:bg-red-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+        "error-soft":
+          "bg-red-background-soft active:bg-red-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+        "error-basic":
+          "bg-transparent active:bg-red-background-soft-emphasis disabled:bg-transparent",
+        warning:
+          "bg-yellow-background-fill active:bg-yellow-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+        "warning-soft":
+          "bg-yellow-background-soft active:bg-yellow-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+        "warning-basic":
+          "bg-transparent active:bg-yellow-background-soft-emphasis disabled:bg-transparent",
+        success:
+          "bg-green-background-fill active:bg-green-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+        "success-soft":
+          "bg-green-background-soft active:bg-green-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+        "success-basic":
+          "bg-transparent active:bg-green-background-soft-emphasis disabled:bg-transparent",
+        outlined:
+          "border border-gray-stroke-muted bg-transparent active:bg-gray-50 disabled:border-gray-stroke-muted",
+        gradient:
+          "bg-primary active:opacity-90 disabled:bg-gray-background-fill-muted",
+        medbrain:
+          "bg-surface-card border-2 border-secondary active:bg-secondary-background-soft disabled:bg-gray-background-fill-muted disabled:border-transparent",
+      },
+      size: {
+        sm: "min-h-8 min-w-8 px-3 py-1",
+        md: "min-h-10 min-w-10 px-3.5 py-2",
+        lg: "min-h-12 min-w-12 px-4 py-3",
+        xl: "min-h-14 min-w-14 px-[18px] py-3.5",
+      },
+    },
+    defaultVariants: {
+      variant: "regular",
+      size: "md",
+    },
+  }
+);
+
+const buttonTextVariants = cva("font-semibold shrink-0", {
+  variants: {
+    variant: {
+      regular: "text-primary-foreground-onfill disabled:text-gray-foreground-onfill",
+      "regular-soft": "text-primary-foreground disabled:text-gray-foreground-muted",
+      "regular-basic": "text-primary-foreground disabled:text-gray-foreground-muted",
+      emphasis: "text-secondary-foreground-onfill disabled:text-gray-foreground-onfill",
+      "emphasis-soft": "text-secondary-foreground disabled:text-gray-foreground-muted",
+      "emphasis-basic": "text-secondary-foreground disabled:text-gray-foreground-muted",
+      error: "text-red-foreground-onfill disabled:text-gray-foreground-onfill",
+      "error-soft": "text-red-foreground disabled:text-gray-foreground-muted",
+      "error-basic": "text-red-foreground disabled:text-gray-foreground-muted",
+      warning: "text-yellow-foreground-onfill disabled:text-gray-foreground-onfill",
+      "warning-soft": "text-yellow-foreground disabled:text-gray-foreground-muted",
+      "warning-basic": "text-yellow-foreground disabled:text-gray-foreground-muted",
+      success: "text-green-foreground-onfill disabled:text-gray-foreground-onfill",
+      "success-soft": "text-green-foreground disabled:text-gray-foreground-muted",
+      "success-basic": "text-green-foreground disabled:text-gray-foreground-muted",
+      outlined: "text-foreground disabled:text-gray-foreground-muted",
+      gradient: "text-white disabled:text-gray-foreground-onfill",
+      medbrain: "text-secondary disabled:text-gray-foreground-onfill",
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-md",
+      xl: "text-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+    size: "md",
+  },
+});
+
+function shouldShowBadge(value: number | string | undefined) {
+  return value != null && value !== 0 && value !== "" && value !== "0";
+}
+
+function Button({
+  className,
+  containerStyle,
+  variant = "regular",
+  size = "md",
+  iconRight,
+  iconLeft,
+  badge,
+  loading = false,
+  alert,
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  const resolvedSize = size ?? "md";
+  const resolvedVariant = variant ?? "regular";
+  const isIconOnly = !children && !alert && (!!iconLeft || !!iconRight);
+
+  return (
+    <View style={[{ position: "relative" }, containerStyle]}>
+      {shouldShowBadge(badge) && (
+        <View className="absolute -right-2 -top-1 z-10">
+          <BadgeComponent size={badgeSizeMap[resolvedSize]} variant="regular">
+            {String(badge)}
+          </BadgeComponent>
+        </View>
+      )}
+
+      <Pressable
+        disabled={disabled || loading}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: disabled || loading, busy: loading }}
+        className={cn(
+          buttonVariants({ variant, size }),
+          isIconOnly && ICON_ONLY_SIZES[resolvedSize],
+          className
+        )}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <View className="absolute">
+              <Loading size={resolvedSize === "sm" ? 16 : resolvedSize === "xl" ? 24 : 20} />
+            </View>
+            <View className="opacity-0 flex-row items-center gap-2">
+              {iconLeft}
+              {children != null && (
+                <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+                  {children}
+                </Text>
+              )}
+              {iconRight}
+            </View>
+          </>
+        ) : (
+          <>
+            {alert ? (
+              <View className="relative mr-1 flex-row items-center">
+                <View
+                  className="rounded-full opacity-75"
+                  style={{
+                    width: ALERT_DOT_SIZES[resolvedSize],
+                    height: ALERT_DOT_SIZES[resolvedSize],
+                    backgroundColor: alert,
+                  }}
+                />
+              </View>
+            ) : (
+              iconLeft
+            )}
+            {children != null && (
+              <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+                {children}
+              </Text>
+            )}
+            {iconRight}
+          </>
+        )}
+      </Pressable>
+    </View>
+  );
+}
+
+export { Button, buttonVariants, buttonTextVariants };
+export type { ButtonProps };

package/src/components/Checkbox.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+import { Check, RemoveMinus } from "@medway-ui/icons/native";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+interface CheckboxProps extends Omit<CheckboxPrimitive.RootProps, "checked" | "disabled" | "onCheckedChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  variant?: "regular";
+  uncheckIcon?: boolean;
+}
+
+const ICON_SIZES: Record<"sm" | "md" | "lg", number> = {
+  sm: 12,
+  md: 16,
+  lg: 20,
+};
+
+const checkboxVariants = cva(
+  "items-center justify-center rounded-sm border-2 shrink-0",
+  {
+    variants: {
+      variant: {
+        regular: "bg-surface-card border-gray-stroke-muted",
+      },
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+      checked: {
+        true: "bg-primary-background-fill border-primary-background-fill",
+        false: "",
+      },
+      disabled: {
+        true: "bg-gray-background-soft-muted border-gray-stroke-muted",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "regular",
+      size: "md",
+      checked: false,
+      disabled: false,
+    },
+  }
+);
+
+function Checkbox({
+  className,
+  size = "md",
+  variant,
+  uncheckIcon,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  ...props
+}: CheckboxProps) {
+  const resolvedSize = size ?? "md";
+  const iconSize = ICON_SIZES[resolvedSize];
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? checked : internalChecked;
+
+  const handleCheckedChange = (val: boolean) => {
+    if (!isControlled) setInternalChecked(val);
+    onCheckedChange?.(val);
+  };
+
+  return (
+    <CheckboxPrimitive.Root
+      checked={isChecked}
+      onCheckedChange={handleCheckedChange}
+      disabled={disabled}
+      className={cn(
+        checkboxVariants({ size, variant, checked: isChecked, disabled: disabled ?? false }),
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="items-center justify-center">
+        {uncheckIcon ? (
+          <RemoveMinus
+            size={iconSize}
+            strokeWidth={2.6}
+            className="text-primary-foreground-onfill"
+          />
+        ) : (
+          <Check
+            size={iconSize}
+            strokeWidth={2.6}
+            className="text-primary-foreground-onfill"
+          />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox, checkboxVariants };
+export type { CheckboxProps };

package/src/components/Dialog.tsx

@@ -0,0 +1,175 @@
+import { type ReactNode, isValidElement, cloneElement, type ReactElement } from "react";
+import { View, Text, ScrollView, type ViewProps } from "react-native";
+import * as DialogPrimitive from "@rn-primitives/dialog";
+import { CloseMd } from "@medway-ui/icons/native";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/Separator";
+
+interface DialogContainerProps extends DialogPrimitive.ContentProps {
+  showCloseButton?: boolean;
+  overlayClassName?: string;
+}
+
+interface DialogHeaderProps extends ViewProps {
+  separator?: boolean;
+}
+
+interface DialogFooterProps extends ViewProps {
+  separator?: boolean;
+}
+
+interface DialogTitleProps extends DialogPrimitive.TitleProps {
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+}
+
+function Dialog({ ...props }: DialogPrimitive.RootProps) {
+  return <DialogPrimitive.Root {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.TriggerProps) {
+  return <DialogPrimitive.Trigger {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.PortalProps) {
+  return <DialogPrimitive.Portal {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.CloseProps) {
+  return <DialogPrimitive.Close {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.OverlayProps) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn("absolute inset-0 bg-black/50", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogContainer({
+  className,
+  overlayClassName,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogContainerProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className={cn("absolute inset-0 items-center justify-center bg-black/50", overlayClassName)}
+      >
+        <DialogPrimitive.Content
+          className={cn(
+            "relative flex-col max-h-[90%] w-full max-w-[calc(100%-2rem)] rounded-xl bg-background shadow-lg overflow-hidden",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft">
+              <CloseMd size={16} className="text-gray-foreground" />
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Overlay>
+    </DialogPrimitive.Portal>
+  );
+}
+
+function DialogContent({
+  containerClassName,
+  className,
+  children,
+}: {
+  containerClassName?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <ScrollView
+      className={cn("flex-1", containerClassName)}
+      contentContainerStyle={{ flexGrow: 1 }}
+    >
+      <View className={cn("px-8 py-6", className)}>
+        {children}
+      </View>
+    </ScrollView>
+  );
+}
+
+function DialogHeader({ className, separator = false, children, ...props }: DialogHeaderProps) {
+  return (
+    <>
+      <View className={cn("flex-col gap-2 px-8 pt-8 pb-4", className)} {...props}>
+        {children}
+      </View>
+      {separator && <Separator />}
+    </>
+  );
+}
+
+function DialogFooter({ className, separator = false, children, ...props }: DialogFooterProps) {
+  return (
+    <>
+      {separator && <Separator />}
+      <View
+        className={cn("flex-col gap-2 px-8 py-6", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </>
+  );
+}
+
+function DialogTitle({ className, iconLeft, iconRight, children, ...props }: DialogTitleProps) {
+  const renderIcon = (icon: ReactNode) => {
+    if (isValidElement(icon)) {
+      return cloneElement(icon as ReactElement<{ size?: number; strokeWidth?: number }>, {
+        size: 32,
+        strokeWidth: 2.2,
+      });
+    }
+    return icon;
+  };
+
+  return (
+    <DialogPrimitive.Title
+      className={cn("flex-row items-center gap-3", className)}
+      {...props}
+    >
+      {iconLeft && renderIcon(iconLeft)}
+      <Text className="text-title-md font-semibold leading-title-md text-content-title flex-1">
+        {children as string}
+      </Text>
+      {iconRight && renderIcon(iconRight)}
+    </DialogPrimitive.Title>
+  );
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.DescriptionProps) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-md leading-md text-content-paragraph", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContainer,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
+export type { DialogContainerProps, DialogHeaderProps, DialogFooterProps, DialogTitleProps };