@vvedantb/native-ui 0.2.1 → 0.3.12

package/src/Badge.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from "react";
+import { Text, View, type ViewProps } from "react-native";
+import { cn } from "./cn";
+import { typeStyle } from "./controlStyles";
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+/** The web `Badge` variants. */
+export type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "destructive-soft"
+  | "outline"
+  | "success"
+  | "warning";
+
+export type BadgeProps = ViewProps & {
+  variant?: BadgeVariant;
+  className?: string;
+  /** Extra classes for the label when `children` is a string or number. */
+  textClassName?: string;
+  children?: ReactNode;
+};
+
+type Scheme = "light" | "dark";
+
+/** Border, fill and text colours per variant, from the web classes (`border-danger/25 bg-danger/12 text-danger` and so on). */
+export function badgeColors(variant: BadgeVariant, scheme: Scheme) {
+  const tone = (hex: string, border: number, fill: number) => ({
+    borderColor: withAlpha(hex, border),
+    backgroundColor: withAlpha(hex, fill),
+    color: hex,
+  });
+  switch (variant) {
+    case "secondary":
+      return {
+        borderColor: tokens.color.separator[scheme],
+        backgroundColor: palette.default[scheme],
+        color: palette.defaultForeground[scheme],
+      };
+    case "destructive":
+      return tone(palette.danger[scheme], 0.25, 0.12);
+    case "destructive-soft":
+      return {
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: withAlpha(palette.danger[scheme], 0.1),
+        color: palette.danger[scheme],
+      };
+    case "outline":
+      return {
+        borderColor: tokens.color.separator[scheme],
+        backgroundColor: "transparent",
+        color: tokens.color.muted[scheme],
+      };
+    case "success":
+      return tone(palette.success[scheme], 0.25, 0.12);
+    case "warning":
+      return tone(palette.warning[scheme], 0.25, 0.12);
+    default:
+      return {
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: palette.default[scheme],
+        color: tokens.color.foreground[scheme],
+      };
+  }
+}
+
+/** Small rounded status label, with the web `Badge` variant names and colours. */
+export function Badge({
+  variant = "default",
+  className,
+  textClassName,
+  children,
+  style,
+  ...props
+}: BadgeProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const { color, ...frame } = badgeColors(variant, scheme);
+  return (
+    <View
+      className={cn(
+        "flex-row items-center gap-1 self-start rounded-full border px-2.5 py-1",
+        className,
+      )}
+      style={[frame, style]}
+      {...props}
+    >
+      {typeof children === "string" || typeof children === "number" ? (
+        <Text
+          className={cn(
+            "font-instrument-sans-medium",
+            largerText ? "text-base" : "text-sm",
+            textClassName,
+          )}
+          style={[{ color }, typeStyle("medium")]}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}

package/src/BottomSheetContainer.tsx

@@ -7,6 +7,7 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { useRef, useEffect, useCallback, JSX } from "react";
 import { useColorScheme } from "nativewind";
 import { Colors } from "./colors";
+import { textStyle, typeStyle } from "./controlStyles";
 import { IconX } from "@tabler/icons-react-native";
 import { BottomSheetDefaultBackdropProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types";
 import { GlassSheetBackground } from "./LiquidGlass";
@@ -66,7 +67,12 @@ export function BottomSheetContainer({
       <BottomSheetView className="p-5 pb-12">
         <View className="mb-4 flex-row items-center justify-between gap-3">
           <Text
-            className={`${largerText ? "text-2xl" : "text-xl"} flex-1 font-instrument-sans-bold text-foreground`}
+            accessibilityRole="header"
+            className={`${largerText ? "text-2xl" : "text-xl"} flex-1 font-instrument-sans-semibold`}
+            style={[
+              textStyle("foreground", colorScheme === "dark" ? "dark" : "light"),
+              typeStyle("semibold"),
+            ]}
           >
             {title}
           </Text>

package/src/Button.tsx

@@ -1,110 +1,211 @@
 import { MaterialIcons } from "@expo/vector-icons";
 import React from "react";
 import { PINK_600 } from "./colors";
-import { ActivityIndicator, View } from "react-native";
+import { View } from "react-native";
 import { Button as PrimitiveButton } from "./primitives/button";
 import { Text as PrimitiveText } from "./primitives/text";
 import { cn } from "./cn";
+import { buttonColors, sizeStyle, typeStyle, type ButtonVariant } from "./controlStyles";
+import { useDialogLayout } from "./dialogLayout";
 import { floatingShadow } from "./floating";
+import { Spinner } from "./Spinner";
 import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/** `sm`, `default` and `lg` are the web names for `small`, `medium` and `large`. `icon` is a square button. */
+type ButtonSize = "small" | "medium" | "large" | "sm" | "default" | "lg" | "icon";
 
 interface ButtonProps extends Omit<
   React.ComponentPropsWithoutRef<typeof PrimitiveButton>,
   "variant" | "size" | "children" | "onPress"
 > {
   onPress?: () => void;
-  variant?: "primary" | "secondary" | "outline";
+  variant?: ButtonVariant;
   icon?: keyof typeof MaterialIcons.glyphMap;
   leftIcon?: React.ReactNode;
+  /** Web name for `leftIcon`. `leftIcon` wins when both are set. */
+  startContent?: React.ReactNode;
+  /** Rendered after the label. */
+  endContent?: React.ReactNode;
   loading?: boolean;
-  size?: "small" | "medium" | "large";
+  size?: ButtonSize;
+  /**
+   * Default `true`. In the stacked footer of a compact dialog the button fills
+   * the width whatever this says, as on the web.
+   */
   fullWidth?: boolean;
-  children: React.ReactNode;
+  /** Label, or other content. Give a button with no text child an `accessibilityLabel`. */
+  children?: React.ReactNode;
+  /** `"shadow"` adds the floating shadow to `primary` and `default`. Default `"flat"`: the web button has none. */
   shadowType?: "flat" | "shadow";
   className?: string;
 }
 
+const SIZE_ALIAS = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  sm: "small",
+  default: "medium",
+  lg: "large",
+  icon: "icon",
+} as const;
+
+// `regular` is the web `Button` (`sm` h-8 px-3, `default` h-10 px-4, `lg`
+// h-11 px-6, `icon` h-10 w-10). `larger` is the larger-text step-up from
+// 0.3.2. Labelled sizes are minimum heights (`h-auto` drops the primitive's
+// `h-10`), so a large Dynamic Type size grows the button instead of clipping
+// the label.
 const HEIGHT = {
-  regular: { small: "h-12 px-5", medium: "h-14 px-6", large: "h-16 px-6" },
-  larger: { small: "h-14 px-5", medium: "h-16 px-6", large: "h-[72px] px-6" },
+  regular: {
+    small: "h-auto min-h-8 px-3",
+    medium: "h-auto min-h-10 px-4",
+    large: "h-auto min-h-11 px-6",
+    icon: "h-10 w-10 px-0",
+  },
+  larger: {
+    small: "h-auto min-h-14 px-5",
+    medium: "h-auto min-h-16 px-6",
+    large: "h-auto min-h-[72px] px-6",
+    icon: "h-14 w-14 px-0",
+  },
 };
 
+// Each class is also set as a style (`sizeStyle`): web `text-sm` is 14 / 20.
 const TEXT = {
-  regular: { small: "text-sm", medium: "text-lg", large: "text-xl" },
-  larger: { small: "text-base", medium: "text-xl", large: "text-2xl" },
+  regular: { small: "text-xs", medium: "text-sm", large: "text-sm", icon: "text-sm" },
+  larger: { small: "text-base", medium: "text-xl", large: "text-2xl", icon: "text-base" },
+} as const;
+
+// The web sizes are under the 44 pt touch target; the slop brings each to 48.
+const HIT_SLOP = {
+  regular: { small: 8, medium: 4, large: 2, icon: 4 },
+  larger: { small: 8, medium: undefined, large: undefined, icon: 8 },
 };
 
-export type { ButtonProps };
+/** Web `rounded-lg` (`--radius`, 16). A style, because apps' NativeWind themes set their own `rounded-lg`. */
+const RADIUS = tokens.radius.lg;
+
+// Colours come from `buttonColors` as styles, except `tinted`, which keeps
+// the pink classes that `outline` used before 0.3.0.
+const VARIANT_CLASS: Partial<Record<ButtonVariant, string>> = {
+  link: "h-auto border-0 px-0",
+  tinted: "border-0 bg-pink-50 dark:bg-pink-900/20",
+};
+
+const TEXT_CLASS: Partial<Record<ButtonVariant, string>> = {
+  link: "underline",
+  tinted: "text-pink-700 dark:text-pink-300",
+};
+
+const PRIMITIVE_VARIANT = {
+  primary: "default",
+  default: "default",
+  outline: "outline",
+  secondary: "secondary",
+  destructive: "destructive",
+  ghost: "ghost",
+  link: "link",
+  tinted: "secondary",
+} as const;
+
+export type { ButtonProps, ButtonSize, ButtonVariant };
 
 export function Button({
   onPress,
   variant = "primary",
   icon,
   leftIcon,
+  startContent,
+  endContent,
   loading,
   size = "medium",
   fullWidth = true,
   children,
-  shadowType = "shadow",
+  shadowType = "flat",
   className,
   ...props
 }: ButtonProps) {
   const scale = useLargerText() ? "larger" : "regular";
-  const isTinted = variant === "outline" || variant === "secondary";
-  const contentColor = isTinted ? PINK_600 : "#fff";
-  const elevate = shadowType === "shadow" && variant === "primary";
-
-  const variantClassName =
-    variant === "outline"
-      ? "border-0 bg-pink-50 dark:bg-pink-900/20"
-      : variant === "secondary"
-        ? "bg-neutral-100 dark:bg-neutral-800"
-        : "";
+  const scheme = useScheme();
+  const dialog = useDialogLayout();
+  const resolvedSize = SIZE_ALIAS[size];
+  const colors = buttonColors(variant, scheme);
+  const contentColor = colors?.color ?? PINK_600;
+  const elevate =
+    shadowType === "shadow" && (variant === "primary" || variant === "default");
+  const baseStyle = [
+    { borderRadius: RADIUS },
+    elevate ? floatingShadow : null,
+    colors
+      ? { backgroundColor: colors.backgroundColor, borderColor: colors.borderColor }
+      : null,
+  ];
+  const callerStyle = props.style;
+  // As on the web, `loading` swaps the start content for the 16 ring (`h-4
+  // w-4`, Spinner `sm`) and keeps the label.
+  const start = loading ? (
+    <Spinner size="sm" color={contentColor} decorative />
+  ) : (
+    leftIcon ??
+    startContent ??
+    (icon ? (
+      <MaterialIcons name={icon} size={scale === "larger" ? 26 : 16} color={contentColor} />
+    ) : null)
+  );
 
   return (
     <PrimitiveButton
       onPress={onPress}
-      variant={variant === "primary" ? "default" : "secondary"}
-      hitSlop={size === "small" ? 8 : undefined}
+      variant={PRIMITIVE_VARIANT[variant]}
+      hitSlop={HIT_SLOP[scale][resolvedSize]}
+      accessibilityRole="button"
       className={cn(
-        "relative rounded-full border border-white/40 dark:border-white/10",
-        HEIGHT[scale][size],
-        fullWidth && "w-full",
-        variantClassName,
+        "relative border",
+        HEIGHT[scale][resolvedSize],
+        // Column flex children stretch by default (React Native Web too), so
+        // a button that is not full width must opt out with `self-start`.
+        resolvedSize !== "icon" && (fullWidth || dialog.stacked ? "w-full" : "self-start"),
+        // The web compact dialog: labelled buttons at least 44 high (`min-h-11`).
+        dialog.compact && scale === "regular" && resolvedSize !== "icon" && "min-h-11",
+        VARIANT_CLASS[variant],
         className,
       )}
       {...props}
       disabled={loading || props.disabled}
-      style={elevate ? floatingShadow : props.style}
+      accessibilityState={{
+        ...props.accessibilityState,
+        disabled: Boolean(loading || props.disabled),
+        busy: Boolean(loading),
+      }}
+      style={
+        typeof callerStyle === "function"
+          ? (state) => [baseStyle, callerStyle(state)]
+          : [baseStyle, callerStyle]
+      }
     >
       <View className="flex-row items-center justify-center gap-2">
-        {loading ? (
-          <ActivityIndicator size="small" color={contentColor} />
-        ) : (
-          <>
-            {leftIcon ??
-              (icon ? (
-                <MaterialIcons
-                  name={icon}
-                  size={scale === "larger" ? 26 : 22}
-                  color={contentColor}
-                />
-              ) : null)}
-            {typeof children === "string" || typeof children === "number" ? (
-              <PrimitiveText
-                className={cn(
-                  TEXT[scale][size],
-                  "font-instrument-sans-semibold",
-                  isTinted ? "text-pink-700 dark:text-pink-300" : "text-white",
-                )}
-              >
-                {children}
-              </PrimitiveText>
-            ) : (
-              children
+        {start}
+        {typeof children === "string" || typeof children === "number" ? (
+          <PrimitiveText
+            className={cn(
+              TEXT[scale][resolvedSize],
+              "font-instrument-sans-medium",
+              TEXT_CLASS[variant],
             )}
-          </>
+            style={[
+              colors ? { color: colors.color } : null,
+              sizeStyle(TEXT[scale][resolvedSize]),
+              typeStyle("medium"),
+            ]}
+          >
+            {children}
+          </PrimitiveText>
+        ) : (
+          children
         )}
+        {endContent}
       </View>
     </PrimitiveButton>
   );

package/src/Card.tsx

@@ -1,64 +1,139 @@
 import type { ComponentType, ReactNode } from "react";
 import type { IconProps } from "@tabler/icons-react-native";
-import { View } from "react-native";
+import { Text, View, type TextProps, type ViewProps } from "react-native";
 import {
   Card as PrimitiveCard,
-  CardContent,
-  CardHeader,
-  CardTitle,
+  CardContent as PrimitiveCardContent,
+  CardHeader as PrimitiveCardHeader,
+  CardTitle as PrimitiveCardTitle,
 } from "./primitives/card";
-import { FloatingSurface } from "./FloatingSurface";
 import { cn } from "./cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "./controlStyles";
 import { useAccentColor, useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 export function Card({
   children,
   title,
+  description,
   action,
   leftIcon: Icon,
+  className,
   testID,
 }: {
   children: ReactNode;
   title?: string;
+  /** Muted line under the title (the web `CardDescription`). */
+  description?: string;
   action?: ReactNode;
   leftIcon?: ComponentType<IconProps>;
+  /** Classes on the card surface. */
+  className?: string;
   testID?: string;
 }) {
   const largerText = useLargerText();
   const accentColor = useAccentColor();
+  const scheme = useScheme();
   const hasHeader = Boolean(title || action);
+  const titleSize = largerText ? "text-2xl" : "text-base";
+  // The web card: a flat `surfaceCard` fill at radius 16, with no border, no
+  // shadow and no blur. Dialogs, sheets and toasts float, as on the web.
   return (
-    <FloatingSurface>
-      <PrimitiveCard
-        testID={testID}
-        className="gap-4 rounded-none border-0 bg-transparent py-4"
-      >
-        {hasHeader && (
-          <CardHeader className="px-4 py-0">
-            <View className="flex-row items-center justify-between">
-              <View className="flex-row items-center gap-2">
-                {Icon && (
-                  <Icon size={largerText ? 28 : 24} color={accentColor} />
-                )}
-                {title ? (
-                  <CardTitle
-                    className={cn(
-                      "font-instrument-sans-bold text-foreground",
-                      largerText ? "text-2xl" : "text-xl",
-                    )}
-                  >
-                    {title}
-                  </CardTitle>
-                ) : null}
-              </View>
-              {action}
+    <PrimitiveCard
+      testID={testID}
+      className={cn("gap-4 overflow-hidden border-0 py-4", className)}
+      style={cardStyle(scheme)}
+    >
+      {hasHeader && (
+        <PrimitiveCardHeader className="px-4 py-0">
+          <View className="flex-row items-center justify-between">
+            <View className="flex-row items-center gap-2">
+              {Icon && (
+                <Icon size={largerText ? 28 : 24} color={accentColor} />
+              )}
+              {title ? (
+                <PrimitiveCardTitle
+                  className={cn("font-instrument-sans-semibold leading-tight", titleSize)}
+                  style={[
+                    textStyle("foreground", scheme),
+                    sizeStyle(titleSize, "tight"),
+                    typeStyle("semibold"),
+                  ]}
+                >
+                  {title}
+                </PrimitiveCardTitle>
+              ) : null}
             </View>
-          </CardHeader>
-        )}
-        <CardContent className={cn(hasHeader && "pt-0", "px-4")}>
-          {children}
-        </CardContent>
-      </PrimitiveCard>
-    </FloatingSurface>
+            {action}
+          </View>
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </PrimitiveCardHeader>
+      )}
+      <PrimitiveCardContent className={cn(hasHeader && "pt-0", "px-4")}>
+        {children}
+      </PrimitiveCardContent>
+    </PrimitiveCard>
+  );
+}
+
+// Parts for composing a card body with the web part names. They sit inside
+// `Card`'s padded content, so they add no side padding of their own. Text
+// colours are styles that follow the colour scheme; recolour with `style`.
+
+type PartProps = ViewProps & { className?: string };
+type TextPartProps = TextProps & { className?: string };
+
+export function CardHeader({ className, ...props }: PartProps) {
+  return <View className={cn("gap-1 pb-3", className)} {...props} />;
+}
+
+/**
+ * Web `font-semibold leading-none` at the inherited 16. The line height is
+ * `leading-tight` (20), not 16: below the face's ascent and descent, iOS and
+ * Android can clip the glyphs.
+ */
+export function CardTitle({ className, style, ...props }: TextPartProps) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = largerText ? "text-2xl" : "text-base";
+  return (
+    <Text
+      accessibilityRole="header"
+      className={cn("font-instrument-sans-semibold leading-tight", size, className)}
+      style={[
+        textStyle("foreground", scheme),
+        sizeStyle(size, "tight"),
+        typeStyle("semibold"),
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+/** Web `text-sm` (14 / 20) in the muted colour. */
+export function CardDescription({ className, style, ...props }: TextPartProps) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = largerText ? "text-lg" : "text-sm";
+  return (
+    <Text
+      className={cn("font-instrument-sans", size, className)}
+      style={[textStyle("muted", scheme), sizeStyle(size), style]}
+      {...props}
+    />
+  );
+}
+
+export function CardContent({ className, ...props }: PartProps) {
+  return <View className={cn("gap-3", className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: PartProps) {
+  return (
+    <View
+      className={cn("flex-row items-center justify-end gap-2 pt-4", className)}
+      {...props}
+    />
   );
 }

package/src/Checkbox.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { IconCheck, IconMinus } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { checkboxColors, touchSlop } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+export type CheckboxProps = Omit<PressableProps, "onPress" | "children"> & {
+  /** `"indeterminate"` shows a dash; a press then checks it. */
+  checked: boolean | "indeterminate";
+  onCheckedChange?: (checked: boolean) => void;
+  /** Shown while checked. Default a check icon (a dash when indeterminate). */
+  icon?: ReactNode;
+  className?: string;
+};
+
+/**
+ * Controlled checkbox with a Pressable and a Tabler check, as the web
+ * `Checkbox` (`checked` / `onCheckedChange`). Colours from `checkboxColors`:
+ * the palette primary when checked, as on the web (not the theme accent).
+ * 16 square with a 14 check, as on the web (24 and 18 with larger text), plus
+ * a hit slop (`touchSlop`) that makes the target 44.
+ */
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  icon,
+  disabled,
+  className,
+  style,
+  ...props
+}: CheckboxProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const on = checked !== false;
+  const { color, ...fill } = checkboxColors(on, scheme);
+  const boxStyle = { borderRadius: largerText ? 6 : 4, ...fill };
+  const box = largerText ? 24 : 16;
+  const iconSize = largerText ? 18 : 14;
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: checked === "indeterminate" ? "mixed" : checked,
+        disabled: Boolean(disabled),
+      }}
+      hitSlop={touchSlop(box)}
+      disabled={disabled}
+      onPress={() => {
+        selectionHaptic();
+        onCheckedChange?.(checked !== true);
+      }}
+      className={cn(
+        "items-center justify-center border active:opacity-70",
+        largerText ? "h-6 w-6" : "h-4 w-4",
+        disabled && "opacity-50",
+        className,
+      )}
+      style={
+        typeof style === "function"
+          ? (state) => [boxStyle, style(state)]
+          : [boxStyle, style]
+      }
+      {...props}
+    >
+      {on
+        ? (icon ??
+          (checked === "indeterminate" ? (
+            <IconMinus size={iconSize} color={color} strokeWidth={2} />
+          ) : (
+            <IconCheck size={iconSize} color={color} strokeWidth={2} />
+          )))
+        : null}
+    </Pressable>
+  );
+}

package/src/Chip.tsx

@@ -1,5 +1,7 @@
 import { Pressable, Text } from "react-native";
+import { textStyle, typeStyle } from "./controlStyles";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 export function Chip({
   label,
@@ -15,6 +17,7 @@ export function Chip({
   round?: boolean;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   const size = round
     ? largerText
       ? "h-14 w-14"
@@ -37,10 +40,9 @@ export function Chip({
         className={`font-instrument-sans-semibold ${
           largerText ? "text-xl" : "text-lg"
         } ${
-          selected
-            ? "text-pink-700 dark:text-pink-300"
-            : "text-muted-foreground"
+          selected ? "text-pink-700 dark:text-pink-300" : ""
         }`}
+        style={[selected ? null : textStyle("muted", scheme), typeStyle("semibold")]}
       >
         {label}
       </Text>