@medway-ui/native 1.0.2

package/src/components/Select.tsx

@@ -0,0 +1,246 @@
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  isValidElement,
+  cloneElement,
+  type ReactNode,
+  type ReactElement,
+} from "react";
+import { View, Text, type ViewProps, type TextProps } from "react-native";
+import * as SelectPrimitive from "@rn-primitives/select";
+import { Check, ChevronDown, ChevronUp } from "@medway-ui/icons/native";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+type SelectSize = "md" | "lg";
+
+interface SelectContextValue {
+  invalid: boolean;
+  size: SelectSize;
+}
+
+interface SelectProps extends SelectPrimitive.RootProps {
+  invalid?: boolean;
+  size?: SelectSize;
+}
+
+interface SelectTriggerProps extends Omit<SelectPrimitive.TriggerProps, "children"> {
+  children?: React.ReactNode;
+}
+
+interface SelectItemProps extends SelectPrimitive.ItemProps {
+  icon?: ReactNode;
+}
+
+const selectVariants = cva(
+  "flex-row w-full items-center justify-between gap-2 rounded-md border-2 border-gray-stroke-muted bg-surface-card px-4",
+  {
+    variants: {
+      size: {
+        lg: "h-12 max-h-12",
+        md: "h-10 max-h-10",
+      },
+      invalid: {
+        true: "border-feedback-error-stroke",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      invalid: false,
+    },
+  }
+);
+
+const SelectContext = createContext<SelectContextValue>({
+  invalid: false,
+  size: "lg",
+});
+
+function Select({ invalid = false, size = "lg", ...props }: SelectProps) {
+  const ctx = useMemo(() => ({ invalid, size }), [invalid, size]);
+  return (
+    <SelectContext.Provider value={ctx}>
+      <SelectPrimitive.Root {...props} />
+    </SelectContext.Provider>
+  );
+}
+
+function SelectWrapper({ className, ...props }: ViewProps) {
+  return <View className={cn("relative flex-col gap-2", className)} {...props} />;
+}
+
+function SelectTrigger({ className, children, ...props }: SelectTriggerProps) {
+  const { invalid, size } = useContext(SelectContext);
+
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(selectVariants({ size, invalid }), className)}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        size={size === "lg" ? 24 : 20}
+        strokeWidth={1.6}
+        className="text-gray-foreground shrink-0"
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectValue({ className, placeholder, ...props }: SelectPrimitive.ValueProps) {
+  const { size } = useContext(SelectContext);
+  return (
+    <SelectPrimitive.Value
+      className={cn(
+        "text-gray-foreground flex-1",
+        size === "lg" ? "text-md" : "text-sm",
+        className
+      )}
+      placeholder={placeholder}
+      {...props}
+    />
+  );
+}
+
+function SelectContent({ className, children, ...props }: SelectPrimitive.ContentProps) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Overlay className="absolute inset-0 bg-black/20">
+        <SelectPrimitive.Content
+          className={cn(
+            "z-50 min-w-48 overflow-hidden rounded-md border border-gray-stroke-muted bg-surface-elevated shadow-lg",
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.Viewport className="p-1">
+            {children}
+          </SelectPrimitive.Viewport>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Overlay>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectGroup({ ...props }: SelectPrimitive.GroupProps) {
+  return <SelectPrimitive.Group {...props} />;
+}
+
+function SelectHeader({ className, ...props }: SelectPrimitive.LabelProps) {
+  return (
+    <SelectPrimitive.Label
+      className={cn("px-2 py-2 text-xs font-medium text-gray-foreground-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({ className, children, icon, label, ...props }: SelectItemProps) {
+  const { size } = useContext(SelectContext);
+  const resolvedLabel = label ?? (typeof children === "string" ? children : "");
+
+  return (
+    <SelectPrimitive.Item
+      label={resolvedLabel}
+      className={cn(
+        "relative flex-row w-full items-center rounded px-2 gap-3",
+        size === "lg" ? "py-2" : "py-1.5",
+        "active:bg-secondary-background-soft-emphasis",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <View className="shrink-0 items-center justify-center text-gray-foreground">
+          {isValidElement(icon)
+            ? cloneElement(icon as ReactElement<{ strokeWidth?: number }>, { strokeWidth: 1.6 })
+            : icon}
+        </View>
+      )}
+      <SelectPrimitive.ItemText className="flex-1 text-sm font-medium text-gray-foreground" />
+      <SelectPrimitive.ItemIndicator className="absolute right-2 h-3.5 w-3.5 items-center justify-center">
+        <Check size={14} strokeWidth={1.6} className="text-secondary-foreground" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: SelectPrimitive.SeparatorProps) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-gray-stroke-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({ className, ...props }: SelectPrimitive.ScrollUpButtonProps) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className={cn("items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUp size={16} strokeWidth={1.6} className="text-gray-foreground" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({ className, ...props }: SelectPrimitive.ScrollDownButtonProps) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className={cn("items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDown size={16} strokeWidth={1.6} className="text-gray-foreground" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+function SelectText({ className, ...props }: TextProps) {
+  const { invalid } = useContext(SelectContext);
+  return (
+    <Text
+      className={cn(
+        "-mt-1 text-xs",
+        invalid ? "text-feedback-error-foreground" : "text-gray-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SelectLabel({ children, disabled = false }: { children?: ReactNode; disabled?: boolean }) {
+  return (
+    <Text
+      className={cn(
+        "text-xs font-medium text-gray-foreground",
+        disabled ? "text-gray-foreground-muted" : ""
+      )}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectHeader,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectText,
+  SelectTrigger,
+  SelectValue,
+  SelectWrapper,
+  selectVariants,
+};
+export type { SelectProps, SelectItemProps, SelectSize };

package/src/components/Separator.tsx

@@ -0,0 +1,24 @@
+import { View, type ViewProps, type AccessibilityRole } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface SeparatorProps extends ViewProps {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }: SeparatorProps) {
+  return (
+    <View
+      accessibilityRole={decorative ? undefined : ("separator" as AccessibilityRole)}
+      className={cn(
+        "shrink-0 bg-gray-stroke-muted",
+        orientation === "horizontal" ? "h-px w-full" : "w-px h-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
+export type { SeparatorProps };

package/src/components/Sheet.tsx

@@ -0,0 +1,165 @@
+import { type ReactNode } from "react";
+import { View, 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";
+
+type SheetSide = "top" | "right" | "bottom" | "left";
+
+interface SheetContainerProps extends DialogPrimitive.ContentProps {
+  side?: SheetSide;
+  showCloseButton?: boolean;
+  overlayClassName?: string;
+}
+
+interface SheetHeaderProps extends ViewProps {
+  separator?: boolean;
+}
+
+interface SheetFooterProps extends ViewProps {
+  separator?: boolean;
+}
+
+const overlayPositionMap: Record<SheetSide, string> = {
+  bottom: "absolute inset-0 justify-end",
+  top: "absolute inset-0 justify-start",
+  left: "absolute inset-0 items-start",
+  right: "absolute inset-0 items-end",
+};
+
+const contentSizeMap: Record<SheetSide, string> = {
+  bottom: "w-full max-h-[90%] rounded-t-xl",
+  top: "w-full max-h-[90%] rounded-b-xl",
+  left: "h-full max-w-[80%] rounded-r-xl",
+  right: "h-full max-w-[80%] rounded-l-xl",
+};
+
+const closeButtonPositionMap: Record<SheetSide, string> = {
+  bottom: "absolute right-3 top-3",
+  top: "absolute right-3 bottom-3",
+  left: "absolute right-3 top-3",
+  right: "absolute left-3 top-3",
+};
+
+function Sheet({ ...props }: DialogPrimitive.RootProps) {
+  return <DialogPrimitive.Root {...props} />;
+}
+
+function SheetTrigger({ ...props }: DialogPrimitive.TriggerProps) {
+  return <DialogPrimitive.Trigger {...props} />;
+}
+
+function SheetClose({ ...props }: DialogPrimitive.CloseProps) {
+  return <DialogPrimitive.Close {...props} />;
+}
+
+function SheetContainer({
+  className,
+  overlayClassName,
+  children,
+  side = "bottom",
+  showCloseButton = true,
+  ...props
+}: SheetContainerProps) {
+  return (
+    <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          className={cn("bg-black/50", overlayPositionMap[side], overlayClassName)}
+        >
+          <DialogPrimitive.Content
+            className={cn(
+              "relative flex-col bg-background shadow-lg overflow-hidden",
+              contentSizeMap[side],
+              className
+            )}
+            {...props}
+          >
+            {children}
+            {showCloseButton && (
+              <DialogPrimitive.Close
+                className={cn(
+                  closeButtonPositionMap[side],
+                  "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 SheetContent({
+  containerClassName,
+  className,
+  children,
+}: {
+  containerClassName?: string;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <ScrollView
+      className={cn("flex-1", containerClassName)}
+      contentContainerStyle={{ flexGrow: 1 }}
+    >
+      <View className={cn("px-6 py-4", className)}>{children}</View>
+    </ScrollView>
+  );
+}
+
+function SheetHeader({ className, separator = false, children, ...props }: SheetHeaderProps) {
+  return (
+    <>
+      <View className={cn("flex-col gap-2 px-6 pt-6 pb-4", className)} {...props}>
+        {children}
+      </View>
+      {separator && <Separator />}
+    </>
+  );
+}
+
+function SheetFooter({ className, separator = false, children, ...props }: SheetFooterProps) {
+  return (
+    <>
+      {separator && <Separator />}
+      <View className={cn("flex-col gap-2 px-6 py-5", className)} {...props}>
+        {children}
+      </View>
+    </>
+  );
+}
+
+function SheetTitle({ className, ...props }: DialogPrimitive.TitleProps) {
+  return (
+    <DialogPrimitive.Title
+      className={cn("text-title-md font-semibold leading-title-md text-content-title", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: DialogPrimitive.DescriptionProps) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-md leading-md text-content-paragraph", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContainer,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+};
+export type { SheetContainerProps, SheetHeaderProps, SheetFooterProps, SheetSide };

package/src/components/Switch.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, type ReactNode } from "react";
+import { View } from "react-native";
+import * as SwitchPrimitive from "@rn-primitives/switch";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+interface SwitchProps extends Omit<SwitchPrimitive.RootProps, "checked" | "onCheckedChange">, VariantProps<typeof switchVariants> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  checkedIcon?: ReactNode;
+  uncheckedIcon?: ReactNode;
+}
+
+const THUMB_SIZES: Record<"sm" | "md" | "lg", number> = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+};
+
+const THUMB_TRANSLATE: Record<"sm" | "md" | "lg", number> = {
+  sm: 11,
+  md: 15,
+  lg: 19,
+};
+
+const switchVariants = cva(
+  "rounded-full border-2 items-center shrink-0",
+  {
+    variants: {
+      variant: {
+        regular: "",
+      },
+      size: {
+        sm: "h-4 w-6",
+        md: "h-5 w-8",
+        lg: "h-6 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "regular",
+      size: "md",
+    },
+  }
+);
+
+function Switch({
+  className,
+  size = "md",
+  variant,
+  checkedIcon,
+  uncheckedIcon,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  ...props
+}: SwitchProps) {
+  const resolvedSize = size ?? "md";
+  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? (checked ?? false) : internalChecked;
+
+  const translateX = useSharedValue(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2);
+
+  useEffect(() => {
+    translateX.value = withTiming(
+      isChecked ? THUMB_TRANSLATE[resolvedSize] : 2,
+      { duration: 180, easing: Easing.out(Easing.ease) }
+    );
+  }, [isChecked, resolvedSize, translateX]);
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const hasIcons = checkedIcon || uncheckedIcon;
+  const thumbSize = THUMB_SIZES[resolvedSize];
+
+  const handleCheckedChange = (val: boolean) => {
+    if (!isControlled) setInternalChecked(val);
+    onCheckedChange?.(val);
+  };
+
+  return (
+    <SwitchPrimitive.Root
+      checked={isChecked}
+      onCheckedChange={handleCheckedChange}
+      disabled={disabled}
+      className={cn(
+        switchVariants({ size, variant }),
+        disabled
+          ? "bg-gray-background-soft-muted border-gray-stroke-muted"
+          : isChecked
+          ? "bg-primary-background-fill border-transparent"
+          : "bg-surface-card border-gray-stroke-muted",
+        className
+      )}
+      {...props}
+    >
+      <Animated.View
+        style={[
+          thumbStyle,
+          {
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: thumbSize / 2,
+          },
+        ]}
+        className={cn(
+          disabled
+            ? "bg-gray-background-fill-muted"
+            : hasIcons
+            ? "bg-transparent"
+            : isChecked
+            ? "bg-primary-foreground-onfill"
+            : "bg-gray-foreground-muted"
+        )}
+      >
+        {hasIcons && (
+          <View className="flex-1 items-center justify-center">
+            {isChecked && checkedIcon}
+            {!isChecked && uncheckedIcon}
+          </View>
+        )}
+      </Animated.View>
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch, switchVariants };
+export type { SwitchProps };

package/src/components/Tag.tsx

@@ -0,0 +1,116 @@
+import { type ReactNode, type ReactElement } from "react";
+import { View, Text, type ViewProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+interface TagProps extends ViewProps, VariantProps<typeof tagVariants> {
+  icon?: ReactElement;
+  children?: ReactNode;
+}
+
+const tagVariants = cva(
+  "flex-row items-center justify-center rounded-md px-2 py-1 gap-1.5 max-h-6 overflow-hidden shrink-0",
+  {
+    variants: {
+      variant: {
+        regular: "bg-primary-background-fill",
+        "regular-soft": "bg-primary-background-soft",
+        "regular-basic": "bg-transparent",
+        emphasis: "bg-secondary-background-fill",
+        "emphasis-soft": "bg-secondary-background-soft",
+        "emphasis-basic": "bg-transparent",
+        gray: "bg-gray-background-fill",
+        "gray-soft": "bg-gray-background-soft",
+        "gray-basic": "bg-transparent",
+        success: "bg-green-background-fill",
+        "success-soft": "bg-green-background-soft",
+        "success-basic": "bg-transparent",
+        error: "bg-red-background-fill",
+        "error-soft": "bg-red-background-soft",
+        "error-basic": "bg-transparent",
+        warning: "bg-yellow-background-fill",
+        "warning-soft": "bg-yellow-background-soft",
+        "warning-basic": "bg-transparent",
+        cm: "bg-cm-background-fill",
+        "cm-soft": "bg-cm-background-soft",
+        "cm-basic": "bg-transparent",
+        go: "bg-go-background-fill",
+        "go-soft": "bg-go-background-soft",
+        "go-basic": "bg-transparent",
+        cir: "bg-cir-background-fill",
+        "cir-soft": "bg-cir-background-soft",
+        "cir-basic": "bg-transparent",
+        ped: "bg-ped-background-fill",
+        "ped-soft": "bg-ped-background-soft",
+        "ped-basic": "bg-transparent",
+        prev: "bg-prev-background-fill",
+        "prev-soft": "bg-prev-background-soft",
+        "prev-basic": "bg-transparent",
+        ia: "bg-secondary-background-fill",
+        "ia-soft": "bg-secondary-background-soft",
+        "ia-basic": "bg-transparent",
+      },
+    },
+    defaultVariants: { variant: "regular" },
+  }
+);
+
+const tagTextVariants = cva("text-xs font-semibold", {
+  variants: {
+    variant: {
+      regular: "text-primary-foreground-onfill",
+      "regular-soft": "text-primary-foreground",
+      "regular-basic": "text-primary-foreground",
+      emphasis: "text-secondary-foreground-onfill",
+      "emphasis-soft": "text-secondary-foreground",
+      "emphasis-basic": "text-secondary-foreground",
+      gray: "text-gray-foreground-onfill",
+      "gray-soft": "text-gray-foreground",
+      "gray-basic": "text-gray-foreground",
+      success: "text-green-foreground-onfill",
+      "success-soft": "text-green-foreground",
+      "success-basic": "text-green-foreground",
+      error: "text-red-foreground-onfill",
+      "error-soft": "text-red-foreground",
+      "error-basic": "text-red-foreground",
+      warning: "text-yellow-foreground-onfill",
+      "warning-soft": "text-yellow-foreground",
+      "warning-basic": "text-yellow-foreground",
+      cm: "text-cm-foreground-onfill",
+      "cm-soft": "text-cm-foreground",
+      "cm-basic": "text-cm-foreground",
+      go: "text-go-foreground-onfill",
+      "go-soft": "text-go-foreground",
+      "go-basic": "text-go-foreground",
+      cir: "text-cir-foreground-onfill",
+      "cir-soft": "text-cir-foreground",
+      "cir-basic": "text-cir-foreground",
+      ped: "text-ped-foreground-onfill",
+      "ped-soft": "text-ped-foreground",
+      "ped-basic": "text-ped-foreground",
+      prev: "text-prev-foreground-onfill",
+      "prev-soft": "text-prev-foreground",
+      "prev-basic": "text-prev-foreground",
+      ia: "text-primary-foreground-onfill",
+      "ia-soft": "text-secondary-foreground",
+      "ia-basic": "text-secondary-foreground",
+    },
+  },
+  defaultVariants: { variant: "regular" },
+});
+
+function TagIcon({ icon }: { icon?: ReactNode }) {
+  return <View className="w-3.5 h-3.5 items-center justify-center">{icon}</View>;
+}
+
+function Tag({ className, variant, icon, children, ...props }: TagProps) {
+  return (
+    <View className={cn(tagVariants({ variant }), className)} {...props}>
+      {icon && <TagIcon icon={icon} />}
+      <Text className={cn(tagTextVariants({ variant }))}>{children}</Text>
+    </View>
+  );
+}
+
+export { Tag, tagVariants, tagTextVariants };
+export type { TagProps };