@vvedantb/native-ui 0.2.0 → 0.3.12

package/src/ConfirmDialog.tsx

@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./AlertDialog";
+import { useOverlay } from "./primitives/overlay";
+
+export type ConfirmDialogProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Default "Cancel". */
+  cancelLabel?: ReactNode;
+  /** Default "Confirm". */
+  confirmLabel?: ReactNode;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  /** `"destructive"` paints the confirm button red. Default `"default"`. */
+  variant?: "default" | "destructive";
+  confirmDisabled?: boolean;
+  /** Usually an `AlertDialogTrigger`. */
+  children?: ReactNode;
+  testID?: string;
+};
+
+/**
+ * Blocking confirm dialog that closes on either button: the web `ConfirmDialog`
+ * legacy props with `size="default"`. The `sm` / `md` sizes and the composable
+ * `ConfirmDialog.*` parts are web-only; compose `AlertDialog` parts instead.
+ */
+export function ConfirmDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  cancelLabel = "Cancel",
+  confirmLabel = "Confirm",
+  onCancel,
+  onConfirm,
+  variant = "default",
+  confirmDisabled,
+  children,
+  testID,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {children}
+      <AlertDialogContent testID={testID}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description != null ? (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            testID={testID ? `${testID}-cancel` : undefined}
+            onPress={onCancel}
+          >
+            {cancelLabel}
+          </AlertDialogCancel>
+          <ConfirmAction
+            testID={testID ? `${testID}-confirm` : undefined}
+            variant={variant}
+            disabled={confirmDisabled}
+            onConfirm={onConfirm}
+          >
+            {confirmLabel}
+          </ConfirmAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function ConfirmAction({
+  onConfirm,
+  ...props
+}: {
+  onConfirm?: () => void;
+  variant: "default" | "destructive";
+  disabled?: boolean;
+  testID?: string;
+  children: ReactNode;
+}) {
+  const { setOpen } = useOverlay("ConfirmDialog");
+  return (
+    <AlertDialogAction
+      {...props}
+      onPress={() => {
+        onConfirm?.();
+        setOpen(false);
+      }}
+    />
+  );
+}

package/src/DateTimeField.tsx

@@ -4,7 +4,9 @@ import DateTimePicker, {
   type DateTimePickerEvent,
 } from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
+import { textStyle, typeStyle } from "./controlStyles";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 type PickerMode = "date" | "time";
 type PickerButton = { mode: PickerMode; label: string };
@@ -23,6 +25,7 @@ export function DateTimeField({
   testID?: string;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   const [picker, setPicker] = useState<PickerMode | null>(null);
 
   const handleChange = (event: DateTimePickerEvent, next?: Date) => {
@@ -53,10 +56,11 @@ export function DateTimeField({
                 current === button.mode ? null : button.mode,
               )
             }
-            className={`${largerText ? "h-16" : "h-14"} flex-1 justify-center rounded-lg bg-secondary px-4 active:opacity-70`}
+            className={`${largerText ? "min-h-16" : "min-h-14"} flex-1 justify-center rounded-lg bg-secondary px-4 py-2 active:opacity-70`}
           >
             <Text
-              className={`${largerText ? "text-xl" : "text-lg"} font-instrument-sans-semibold text-foreground`}
+              className={`${largerText ? "text-xl" : "text-lg"} font-instrument-sans-semibold`}
+              style={[textStyle("foreground", scheme), typeStyle("semibold")]}
             >
               {button.label}
             </Text>

package/src/Dialog.tsx

@@ -0,0 +1,253 @@
+import {
+  ScrollView,
+  Text,
+  View,
+  useWindowDimensions,
+  type ScrollViewProps,
+  type TextProps,
+  type ViewProps,
+} from "react-native";
+import { SlideInDown } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconX } from "@tabler/icons-react-native";
+import { FloatingSurface } from "./FloatingSurface";
+import { cn } from "./cn";
+import { isCompactOverlay, textStyle, typeStyle } from "./controlStyles";
+import { DialogLayoutContext, useDialogLayout, type DialogLayout } from "./dialogLayout";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import {
+  OverlayClose,
+  OverlayModal,
+  OverlayRoot,
+  OverlayTrigger,
+  type OverlayPressableProps,
+  type OverlayRootProps,
+} from "./primitives/overlay";
+
+export type DialogProps = OverlayRootProps;
+
+/** Holds the open state (controlled with `open` / `onOpenChange`, or `defaultOpen`). Renders no view. */
+export function Dialog(props: DialogProps) {
+  return <OverlayRoot {...props} />;
+}
+
+/** Opens the dialog. `asChild` merges the press into its child, for example a `Button`. */
+export function DialogTrigger(props: OverlayPressableProps) {
+  return <OverlayTrigger part="DialogTrigger" {...props} />;
+}
+
+/** Closes the dialog. `asChild` merges the press into its child. */
+export function DialogClose(props: OverlayPressableProps) {
+  return <OverlayClose part="DialogClose" {...props} />;
+}
+
+export type DialogContentProps = ViewProps & {
+  className?: string;
+  /** Hide the close button in the top-right corner. Default `false`. */
+  hideCloseButton?: boolean;
+  /** Close on a backdrop tap. Default `true`. `AlertDialogContent` sets `false`. */
+  dismissible?: boolean;
+  /**
+   * A bottom sheet in a compact window (639 wide or less, or 500 high or less),
+   * as the web `viewportAware`. Default `true`. `false` keeps the centred panel
+   * at every size.
+   */
+  viewportAware?: boolean;
+};
+
+/** Web `rounded-t-2xl` (16) on the compact sheet. */
+const SHEET_RADIUS = tokens.radius.lg;
+
+/** The centred panel: at most 480 wide. */
+const PANEL = { width: "100%", maxWidth: 480, alignSelf: "center" } as const;
+/** The compact sheet: its bottom corners sit below the screen edge. */
+const SHEET = { marginBottom: -SHEET_RADIUS };
+
+const CENTRED: DialogLayout = { compact: false, stacked: false };
+const COMPACT: DialogLayout = { compact: true, stacked: false };
+const STACKED: DialogLayout = { compact: true, stacked: true };
+
+/**
+ * Centred panel in an RN `Modal`: opaque surface (card radius 24, floating
+ * shadow, no blur), at most 480 wide, padding 24 as on the web. Android back
+ * closes it.
+ *
+ * In a compact window (the web `COMPACT_OVERLAY_QUERY`, from the window size)
+ * it is the web phone bottom sheet: full width, top corners 16, a handle,
+ * `pt-3 px-6`, the bottom safe-area inset (at least 24) below, and it slides
+ * up unless Reduce Motion is on. Its bottom corners sit below the screen edge,
+ * as `SheetContent`'s do. `DialogFooter` stacks its buttons there.
+ */
+export function DialogContent({
+  children,
+  className,
+  hideCloseButton = false,
+  dismissible = true,
+  viewportAware = true,
+  style,
+  ...props
+}: DialogContentProps) {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const compact = viewportAware && isCompactOverlay(width, height);
+
+  // One tree for both layouts, so a window that crosses the compact size while
+  // open (split view, a foldable) keeps the content and its state.
+  return (
+    <DialogLayoutContext.Provider value={compact ? COMPACT : CENTRED}>
+      <OverlayModal
+        part="DialogContent"
+        placement={compact ? "bottom" : "center"}
+        dismissible={dismissible}
+      >
+        <NativeOnlyAnimatedView
+          entering={compact ? SlideInDown.duration(240) : undefined}
+          style={compact ? SHEET : PANEL}
+        >
+          <FloatingSurface blur={false} radius={compact ? SHEET_RADIUS : tokens.radius.card}>
+            <View
+              accessibilityViewIsModal
+              className={cn(compact ? "gap-4 px-6 pt-3" : "gap-4 p-6", className)}
+              {...props}
+              style={[
+                compact ? { paddingBottom: Math.max(24, insets.bottom) + SHEET_RADIUS } : null,
+                style,
+              ]}
+            >
+              {compact ? <DialogHandle /> : null}
+              {children}
+            </View>
+            {hideCloseButton ? null : <DialogCloseButton />}
+          </FloatingSurface>
+        </NativeOnlyAnimatedView>
+      </OverlayModal>
+    </DialogLayoutContext.Provider>
+  );
+}
+
+/**
+ * The web compact handle: an `h-1 w-12` pill in `surface-tertiary`, in a
+ * 44-high row. It is not a drag target, on the web either.
+ */
+function DialogHandle() {
+  const scheme = useScheme();
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      className="mb-1 min-h-11 items-center justify-center"
+    >
+      <View
+        className="h-1 w-12 rounded-full"
+        style={{ backgroundColor: palette.surfaceTertiary[scheme] }}
+      />
+    </View>
+  );
+}
+
+function DialogCloseButton() {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <DialogClose
+      testID="dialog-close"
+      accessibilityLabel="Close"
+      hitSlop={8}
+      className="absolute right-2 top-2 h-11 w-11 items-center justify-center rounded-lg active:opacity-70"
+    >
+      <IconX size={largerText ? 26 : 16} color={tokens.color.muted[scheme]} />
+    </DialogClose>
+  );
+}
+
+type PartProps = ViewProps & { className?: string };
+type TextPartProps = TextProps & { className?: string };
+
+export function DialogHeader({ className, ...props }: PartProps) {
+  return <View className={cn("gap-1.5 pr-10", className)} {...props} />;
+}
+
+// Text colours are styles (`textStyle`), so they follow the colour scheme in
+// apps whose `text-foreground` does not. Recolour with `style`, not `className`.
+
+/** Web `text-lg font-semibold`. */
+export function DialogTitle({ className, style, ...props }: TextPartProps) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <Text
+      accessibilityRole="header"
+      className={cn(
+        "font-instrument-sans-semibold",
+        largerText ? "text-2xl" : "text-lg",
+        className,
+      )}
+      style={[textStyle("foreground", scheme), typeStyle("semibold"), style]}
+      {...props}
+    />
+  );
+}
+
+/** Web `text-sm leading-relaxed`, in the web description colour (`palette.overlayMuted`). */
+export function DialogDescription({ className, style, ...props }: TextPartProps) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <Text
+      className={cn(
+        "font-instrument-sans leading-relaxed",
+        largerText ? "text-lg" : "text-sm",
+        className,
+      )}
+      style={[textStyle("overlayMuted", scheme), style]}
+      {...props}
+    />
+  );
+}
+
+/** Scrolling body for long content. Height is capped at `maxHeight` (default 60% of the window). */
+export function DialogBody({
+  maxHeight,
+  style,
+  ...props
+}: ScrollViewProps & { maxHeight?: number }) {
+  const { height } = useWindowDimensions();
+  return (
+    <ScrollView
+      bounces={false}
+      keyboardShouldPersistTaps="handled"
+      style={[{ maxHeight: maxHeight ?? height * 0.6 }, style]}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Buttons in a row at the end, as the web footer from `sm` up (Cancel, then
+ * Save). Give each `Button` `fullWidth={false}`; `AlertDialogAction` and
+ * `AlertDialogCancel` already do. Wraps when the labels do not fit.
+ *
+ * In the compact sheet it is the web phone footer: the buttons stack, the last
+ * child on top, each full width (whatever `fullWidth` says) and at least 44
+ * high.
+ */
+export function DialogFooter({ className, ...props }: PartProps) {
+  const { compact } = useDialogLayout();
+  if (compact) {
+    return (
+      <DialogLayoutContext.Provider value={STACKED}>
+        <View className={cn("flex-col-reverse gap-2 pt-2", className)} {...props} />
+      </DialogLayoutContext.Provider>
+    );
+  }
+  return (
+    <View
+      className={cn("flex-row flex-wrap items-center justify-end gap-2", className)}
+      {...props}
+    />
+  );
+}

package/src/EmptyState.tsx

@@ -1,11 +1,14 @@
-import type { ComponentType, ReactNode } from "react";
-import { View, Text } from "react-native";
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+import { View, Text, type TextProps, type ViewProps } from "react-native";
 import { IconInbox, type IconProps } from "@tabler/icons-react-native";
-import { NEUTRAL_500 } from "./colors";
 import { cn } from "./cn";
+import { textStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
-export function EmptyState({
+function EmptyStateView({
   title,
   description,
   icon: Icon = IconInbox,
@@ -21,26 +24,29 @@ export function EmptyState({
   testID?: string;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   return (
     <View
       testID={testID}
       className={`items-center px-4 ${compact ? "py-6" : "py-16"}`}
     >
-      <Icon size={largerText ? 44 : 40} color={NEUTRAL_500} />
+      <Icon size={largerText ? 44 : 40} color={tokens.color.muted[scheme]} />
       <Text
         className={cn(
-          "mt-4 text-center font-instrument-sans-semibold text-foreground",
+          "mt-4 text-center font-instrument-sans-semibold",
           largerText ? "text-xl" : "text-lg",
         )}
+        style={[textStyle("foreground", scheme), typeStyle("semibold")]}
       >
         {title}
       </Text>
       {description ? (
         <Text
           className={cn(
-            "mt-2 max-w-sm text-center font-instrument-sans text-muted-foreground",
+            "mt-2 max-w-sm text-center font-instrument-sans",
             largerText ? "text-lg" : "text-base",
           )}
+          style={textStyle("muted", scheme)}
         >
           {description}
         </Text>
@@ -49,3 +55,112 @@ export function EmptyState({
     </View>
   );
 }
+
+// Composable parts with the web names (`EmptyState.Root`, `.Icon`, `.Title`,
+// `.Description`, `.Actions`). `Root` sets the variant, the parts read it.
+
+/** `default`: open centred block with a large bare icon. `panel`: filled rounded block, icon in a tile. */
+export type EmptyStateVariant = "default" | "panel";
+
+const EmptyStateContext = createContext<EmptyStateVariant>("default");
+
+function Root({
+  variant = "default",
+  className,
+  ...props
+}: ViewProps & { variant?: EmptyStateVariant; className?: string }) {
+  return (
+    <EmptyStateContext.Provider value={variant}>
+      <View
+        className={cn(
+          "items-center justify-center",
+          variant === "panel"
+            ? "rounded-[20px] bg-surface-secondary px-4 py-10"
+            : "px-4 py-16",
+          className,
+        )}
+        {...props}
+      />
+    </EmptyStateContext.Provider>
+  );
+}
+
+function Icon({
+  icon: IconComponent,
+  size,
+  stroke,
+  className,
+}: {
+  icon: ComponentType<IconProps>;
+  /** Default 40 (`default`) or 22 (`panel`). */
+  size?: number;
+  /** Line width, as on the web. Default the icon's own (`default`) or 1.5 (`panel`). Passed to Tabler as `strokeWidth`, since native Tabler reads `stroke` as the colour. */
+  stroke?: number;
+  className?: string;
+}) {
+  const variant = useContext(EmptyStateContext);
+  const scheme = useScheme();
+  if (variant === "panel") {
+    return (
+      <View
+        className={cn("mb-3 h-11 w-11 items-center justify-center rounded-xl", className)}
+        style={{ backgroundColor: palette.surfaceTertiary[scheme] }}
+      >
+        <IconComponent size={size ?? 22} strokeWidth={stroke ?? 1.5} color={tokens.color.muted[scheme]} />
+      </View>
+    );
+  }
+  return (
+    <View className={cn("mb-4", className)}>
+      <IconComponent size={size ?? 40} strokeWidth={stroke} color={tokens.color.muted[scheme]} />
+    </View>
+  );
+}
+
+function Title({ className, style, ...props }: TextProps & { className?: string }) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <Text
+      className={cn(
+        "text-center font-instrument-sans-semibold",
+        largerText ? "text-xl" : "text-lg",
+        className,
+      )}
+      style={[textStyle("foreground", scheme), typeStyle("semibold"), style]}
+      {...props}
+    />
+  );
+}
+
+function Description({ className, style, ...props }: TextProps & { className?: string }) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <Text
+      className={cn(
+        "mt-2 max-w-sm text-center font-instrument-sans",
+        largerText ? "text-lg" : "text-base",
+        className,
+      )}
+      style={[textStyle("muted", scheme), style]}
+      {...props}
+    />
+  );
+}
+
+function Actions({ className, ...props }: ViewProps & { className?: string }) {
+  return <View className={cn("mt-6", className)} {...props} />;
+}
+
+/**
+ * "Nothing here yet" block. Call it with `title`, `description`, `icon` and
+ * `action`, or compose `EmptyState.Root` and its parts as on the web.
+ */
+export const EmptyState = Object.assign(EmptyStateView, {
+  Root,
+  Icon,
+  Title,
+  Description,
+  Actions,
+});

package/src/FloatingFAB.tsx

@@ -32,11 +32,9 @@ export function FloatingFAB({
   return (
     <View
       pointerEvents="box-none"
-      className={cn(
-        "right-4 z-10",
-        Platform.OS === "web" ? "fixed" : "absolute",
-      )}
+      className={cn("z-10", Platform.OS === "web" ? "fixed" : "absolute")}
       style={{
+        right: insets.right + FLOATING_INSET,
         bottom: FLOATING_INSET + Math.max(insets.bottom, 8) + tabBar + 20,
       }}
     >

package/src/FloatingSurface.tsx

@@ -1,6 +1,6 @@
 import { Platform, StyleSheet, View, type ViewProps } from "react-native";
-import { BlurView } from "expo-blur";
 import { useColorScheme } from "nativewind";
+import { glassMode, loadBlur } from "./blur";
 import { cn } from "./cn";
 import {
   floatingFill,
@@ -9,6 +9,7 @@ import {
   floatingSolidFill,
   FLOATING_RADIUS,
 } from "./floating";
+import { useGlassBlurTarget } from "./glassBlur";
 import { useReduceTransparency } from "./useReduceTransparency";
 
 type FloatingSurfaceProps = ViewProps & {
@@ -29,15 +30,19 @@ export function FloatingSurface({
 }: FloatingSurfaceProps) {
   const { colorScheme } = useColorScheme();
   const reduceTransparency = useReduceTransparency();
+  const blurTarget = useGlassBlurTarget();
+  const BlurView = loadBlur()?.BlurView;
+  const mode = glassMode({
+    os: Platform.OS,
+    blur,
+    reduceTransparency,
+    hasBlurView: BlurView != null,
+  });
   const isDark = colorScheme === "dark";
   const opaqueFill = isDark ? floatingSolidFill.dark : floatingSolidFill.light;
   const translucentFill = isDark ? floatingFill.dark : floatingFill.light;
   const border = isDark ? floatingHairline.dark : floatingHairline.light;
-  const useBlur = blur && !reduceTransparency && Platform.OS === "ios";
-  const fill =
-    Platform.OS === "android" || reduceTransparency || !blur
-      ? opaqueFill
-      : translucentFill;
+  const fill = mode === "solid" ? opaqueFill : translucentFill;
 
   return (
     <View
@@ -57,21 +62,38 @@ export function FloatingSurface({
             borderRadius: radius,
             borderWidth: StyleSheet.hairlineWidth,
             borderColor: border,
-            backgroundColor: useBlur ? "transparent" : fill,
+            backgroundColor: mode === "blur" ? "transparent" : fill,
           },
           Platform.OS === "ios" ? styles.continuous : null,
           style != null ? styles.fill : null,
         ]}
       >
-        {useBlur ? (
+        {mode === "blur" && BlurView ? (
+          // Android: dimezis blur of the `GlassBlurTarget` content (without
+          // one, expo-blur draws only the tint). `experimentalBlurMethod` is
+          // the pre-SDK 55 name and logs a deprecation warning, so iOS skips it.
           <BlurView
             pointerEvents="none"
             tint={isDark ? "systemMaterialDark" : "systemMaterialLight"}
             intensity={70}
+            experimentalBlurMethod={
+              Platform.OS === "android" ? "dimezisBlurView" : undefined
+            }
+            blurMethod="dimezisBlurView"
+            blurReductionFactor={3}
+            blurTarget={blurTarget ?? undefined}
             style={StyleSheet.absoluteFill}
           />
         ) : null}
-        {Platform.OS === "web" && blur && !reduceTransparency ? (
+        {mode === "blur" && Platform.OS === "android" ? (
+          // The iOS backdrop includes the outer fill; dimezis samples only the
+          // target, so Android lays the same fill over the blur.
+          <View
+            pointerEvents="none"
+            style={[StyleSheet.absoluteFill, { backgroundColor: translucentFill }]}
+          />
+        ) : null}
+        {mode === "backdrop" ? (
           <View
             pointerEvents="none"
             className="absolute inset-0 backdrop-blur-xl"