@xpufx/paseo-top 0.4.4 → 0.4.7

package/client/vendor/paseo-plugin-helper/components/ProgressBar.tsx

@@ -1,117 +0,0 @@
-import React from "react";
-import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
-import { usePluginTheme } from "../theme/provider";
-import { resolveMetricStatus, type MetricThresholds } from "../../../../shared/vendor/paseo-plugin-helper/formatters";
-
-export interface ProgressBarProps {
-  value: number; // 0 to 100
-  color?: string;
-  autoStatusColor?: boolean;
-  thresholds?: MetricThresholds;
-  label?: string;
-  showValueText?: boolean;
-  height?: number;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function ProgressBar({
-  value,
-  color,
-  autoStatusColor = true,
-  thresholds,
-  label,
-  showValueText = false,
-  height = 8,
-  style,
-}: ProgressBarProps) {
-  const { colors, resolveRadius, typography } = usePluginTheme();
-
-  const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
-  const radius = resolveRadius("pill");
-
-  let barColor = color || colors.accent;
-  if (!color && autoStatusColor) {
-    const status = resolveMetricStatus(clamped, thresholds);
-    if (status === "danger") {
-      barColor = colors.statusDanger;
-    } else if (status === "warning") {
-      barColor = colors.statusWarning;
-    } else {
-      barColor = colors.statusSuccess;
-    }
-  }
-
-  return (
-    <View style={[styles.container, style]}>
-      {(label || showValueText) && (
-        <View style={styles.labelRow}>
-          {label ? (
-            <Text
-              style={[
-                styles.labelText,
-                { color: colors.foregroundMuted, ...typography.caption },
-              ]}
-            >
-              {label}
-            </Text>
-          ) : null}
-          {showValueText ? (
-            <Text
-              style={[
-                styles.valueText,
-                { color: colors.foreground, ...typography.caption, fontWeight: "600" },
-              ]}
-            >
-              {Math.round(clamped)}%
-            </Text>
-          ) : null}
-        </View>
-      )}
-      <View
-        style={[
-          styles.track,
-          {
-            backgroundColor: colors.surface2,
-            height,
-            borderRadius: radius,
-          },
-        ]}
-      >
-        <View
-          style={[
-            styles.fill,
-            {
-              width: `${clamped}%`,
-              backgroundColor: barColor,
-              borderRadius: radius,
-            },
-          ]}
-        />
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: 4,
-  },
-  labelRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  labelText: {
-    fontWeight: "500",
-  },
-  valueText: {
-    fontWeight: "600",
-  },
-  track: {
-    width: "100%",
-    overflow: "hidden",
-  },
-  fill: {
-    height: "100%",
-  },
-});

package/client/vendor/paseo-plugin-helper/components/Responsive.tsx

@@ -1,53 +0,0 @@
-import React, { type ReactNode } from "react";
-import { useResponsive, type UseResponsiveResult } from "../theme/useResponsive";
-
-export interface ResponsiveProps {
-  /**
-   * Content to render on desktop / wide viewports.
-   */
-  desktop?: ReactNode;
-  /**
-   * Content to render on mobile platforms ('ios' | 'android').
-   */
-  mobile?: ReactNode;
-  /**
-   * Content to render when in compact mode (narrow trackbar, mobile bottom sheet, or split view).
-   */
-  compact?: ReactNode;
-  /**
-   * Content to render when in wide mode (not compact).
-   */
-  wide?: ReactNode;
-  /**
-   * Render function taking `UseResponsiveResult` or children.
-   */
-  children?: ReactNode | ((responsive: UseResponsiveResult) => ReactNode);
-}
-
-/**
- * Declarative component for rendering different UI elements across desktop, mobile, and compact layouts.
- *
- * @example
- * ```tsx
- * <Responsive
- *   desktop={<DataTable columns={["ID", "Name", "Status", "Latency"]} data={items} />}
- *   mobile={<DataTable columns={["Name", "Status"]} data={items} />}
- * />
- * ```
- */
-export function Responsive({ desktop, mobile, compact, wide, children }: ResponsiveProps) {
-  const responsive = useResponsive();
-
-  if (typeof children === "function") {
-    return <>{children(responsive)}</>;
-  }
-
-  const selected = responsive.select<ReactNode>({
-    desktop,
-    mobile,
-    compact,
-    wide,
-  });
-
-  return <>{selected ?? children ?? null}</>;
-}

package/client/vendor/paseo-plugin-helper/components/SearchInput.tsx

@@ -1,132 +0,0 @@
-import React, { type ComponentType, type Ref } from "react";
-import {
-  StyleSheet,
-  TextInput as RNTextInput,
-  View,
-  Pressable,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-  type TextInputProps as RNTextInputProps,
-  type TextInput as RNTextInputInstance,
-} from "react-native";
-import { getClientHost, getOptionalClientHost } from "../host";
-import { usePluginTheme } from "../theme/provider";
-
-export interface SearchInputProps {
-  value: string;
-  onChangeText: (text: string) => void;
-  placeholder?: string;
-  onClear?: () => void;
-  /**
-   * Painted box height, opt-in per call site. Unset keeps the original
-   * `isCompact ? 36 : 40` box so no untouched surface changes appearance.
-   * 26 matches the compact `size="sm"` button recipe (~26px) so a search field
-   * can sit beside filter pills in one row without inflating it (#645); a
-   * height of 26 or less also switches the input to the 12px `sm` label size,
-   * anything taller keeps the prior 13/14.
-   */
-  height?: number;
-  style?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  testID?: string;
-}
-
-/**
- * Standardized search input with search icon, clear button, and theme support.
- */
-export function SearchInput({
-  value,
-  onChangeText,
-  placeholder = "Search...",
-  onClear,
-  height,
-  style,
-  inputStyle,
-  testID,
-}: SearchInputProps) {
-  const { Icon } = getClientHost();
-  const ResolvedInput = (getOptionalClientHost()?.TextInput ??
-    RNTextInput) as ComponentType<RNTextInputProps & { ref?: Ref<RNTextInputInstance> }>;
-  const { colors, resolveRadius, isCompact } = usePluginTheme();
-  const radius = resolveRadius("sm");
-  // Unspecified keeps the original compact-aware default so every call site
-  // that does not opt in renders exactly as before (#645's scope was the
-  // uppidi-fleet filter rows only).
-  const resolvedHeight = height ?? (isCompact ? 36 : 40);
-
-  const handleClear = () => {
-    onChangeText("");
-    if (onClear) onClear();
-  };
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: colors.surface1,
-          borderColor: colors.border,
-          borderRadius: radius,
-          height: resolvedHeight,
-        },
-        style,
-      ]}
-    >
-      <View style={styles.iconWrapper}>
-        <Icon name="Search" size={16} color={colors.foregroundMuted} />
-      </View>
-      <ResolvedInput
-        testID={testID}
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        placeholderTextColor={colors.foregroundMuted}
-        style={[
-          styles.input,
-          {
-            color: colors.foreground,
-            fontSize: height !== undefined && height <= 26 ? 12 : isCompact ? 13 : 14,
-          },
-          inputStyle,
-        ]}
-        returnKeyType="search"
-        autoCapitalize="none"
-        autoCorrect={false}
-      />
-      {Boolean(value) && (
-        <Pressable
-          onPress={handleClear}
-          style={styles.clearButton}
-          hitSlop={8}
-          accessibilityLabel="Clear search"
-        >
-          <Icon name="X" size={14} color={colors.foregroundMuted} />
-        </Pressable>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: 1,
-    paddingHorizontal: 10,
-  },
-  iconWrapper: {
-    marginRight: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  input: {
-    flex: 1,
-    paddingVertical: 0,
-    outlineWidth: 0,
-  },
-  clearButton: {
-    padding: 4,
-    marginLeft: 4,
-  },
-});

package/client/vendor/paseo-plugin-helper/components/SectionHeader.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import {
-  StyleSheet,
-  Text,
-  View,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
-import { usePluginTheme } from "../theme/provider";
-import type { StatusVariant } from "../../../../shared/vendor/paseo-plugin-helper/types";
-import { Badge } from "./Badge";
-
-export interface SectionHeaderProps {
-  title: string;
-  /** Optional count — shown as a Badge (warning variant when > 0, neutral otherwise) */
-  count?: number;
-  /** Badge variant override */
-  badgeVariant?: StatusVariant;
-  style?: StyleProp<ViewStyle>;
-  textStyle?: StyleProp<TextStyle>;
-}
-
-export function SectionHeader({
-  title,
-  count,
-  badgeVariant,
-  style,
-  textStyle,
-}: SectionHeaderProps): React.ReactElement | null {
-  const theme = usePluginTheme();
-  const titleType = theme.typography?.bodyStrong ?? {
-    fontSize: 13,
-    lineHeight: 19,
-    fontWeight: "600" as const,
-  };
-  const headingTransform = (theme.flair?.headingTransform ?? "none") === "uppercase"
-    ? "uppercase"
-    : "none";
-
-  return (
-    <View style={[styles.container, style]}>
-      <Text
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        style={[
-          styles.title,
-          {
-            color: theme.colors.foregroundMuted,
-            textTransform: headingTransform,
-            fontSize: titleType.fontSize,
-            lineHeight: titleType.lineHeight,
-            fontWeight: titleType.fontWeight,
-          },
-          textStyle,
-        ]}
-      >
-        {title}
-      </Text>
-      {count !== undefined ? (
-        <Badge
-          label={String(count)}
-          variant={badgeVariant ?? (count > 0 ? "warning" : "neutral")}
-          styleVariant={count > 0 ? "solid" : "tinted"}
-        />
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginTop: 8,
-    marginBottom: 2,
-    flexShrink: 1,
-    maxWidth: "100%",
-  },
-  title: {
-    letterSpacing: 0.8,
-    // Section titles are caller-supplied and unbounded; the title must be
-    // allowed to compress for `numberOfLines` to engage.
-    flexShrink: 1,
-  },
-});

package/client/vendor/paseo-plugin-helper/components/Select.tsx

@@ -1,283 +0,0 @@
-import React, { useRef, useState } from "react";
-import {
-  Modal,
-  Pressable,
-  ScrollView as FallbackScrollView,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import { getClientHost } from "../host";
-import { usePluginTheme } from "../theme/provider";
-import { spacing } from "../theme/tokens";
-import type { BadgeSize } from "./Badge";
-
-export interface SelectOption {
-  label: string;
-  value: string;
-}
-
-export interface SelectProps {
-  value: string;
-  options: SelectOption[];
-  onValueChange: (value: string) => void;
-  label?: string;
-  /** Compact/pill scale shared with {@link Badge}: `"md"` (default) or `"sm"`. */
-  size?: BadgeSize;
-  placeholder?: string;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const OPTION_LIST_MAX_HEIGHT = 216;
-
-interface TriggerCoords {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-// When `measureInWindow` is unavailable or never invokes its callback (node
-// test renderers, host shims), the menu still opens anchored to a zeroed box
-// rather than swallowing the press.
-const FALLBACK_COORDS: TriggerCoords = { x: 0, y: 0, width: 0, height: 0 };
-
-/**
- * Compact single-choice picker sized to sit inside a {@link FormRow}. The
- * closed trigger stays one line tall; opening mounts the menu in a root
- * transparent `<Modal>` overlay portal, so a long list never expands the
- * trigger's parent container, is never clipped by an ancestor
- * `overflow: "hidden"` (Card/Tabs/Modal), and always paints above later
- * siblings regardless of local stacking context.
- */
-export function Select({
-  value,
-  options,
-  onValueChange,
-  label,
-  size = "md",
-  placeholder = "Select…",
-  disabled = false,
-  style,
-}: SelectProps) {
-  const { Icon } = getClientHost();
-  // The option list is mounted in the root modal overlay, so it scrolls with
-  // a plain React Native ScrollView — never the host sheet-gesture scroller
-  // (#219) and never a scroller owned by the trigger's parent.
-  const { colors, resolveRadius, typography, isCompact, touchTargetMin, alpha } =
-    usePluginTheme();
-  const [open, setOpen] = useState(false);
-  const [coords, setCoords] = useState<TriggerCoords | null>(null);
-  const triggerRef = useRef<View>(null);
-
-  const caption = typography?.caption ?? {
-    fontSize: 11,
-    lineHeight: 15,
-    fontWeight: "400" as const,
-  };
-  const fontSize = size === "sm" ? 10 : caption.fontSize;
-  const lineHeight = size === "sm" ? 12 : caption.lineHeight;
-  const paddingVertical = size === "sm" ? 3 : 6;
-  const paddingHorizontal = size === "sm" ? 8 : 10;
-  const iconSize = size === "sm" ? 12 : 14;
-  const radius = resolveRadius("md");
-
-  // A free-text value (advanced entry) may not be one of the options; surface
-  // it on the trigger rather than masking it behind the placeholder.
-  const selected = options.find((option) => option.value === value);
-  const display = selected?.label ?? (value ? value : placeholder);
-  const canOpen = !disabled && options.length > 0;
-  const isOpen = open && canOpen;
-
-  const triggerMinHeight = size === "sm" ? 28 : Math.max(34, touchTargetMin);
-
-  const openAt = (next: TriggerCoords) => {
-    setCoords(next);
-    setOpen(true);
-  };
-
-  const handleToggle = () => {
-    if (isOpen) {
-      setOpen(false);
-      return;
-    }
-
-    const node = triggerRef.current;
-    // A node/shim without `measureInWindow` (node test renderers, stripped
-    // host shims) still opens anchored to a zeroed box rather than swallowing
-    // the press (#520).
-    if (!node || typeof node.measureInWindow !== "function") {
-      openAt(FALLBACK_COORDS);
-      return;
-    }
-
-    node.measureInWindow((x, y, width, height) => {
-      openAt({ x, y, width, height });
-    });
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      <Pressable
-        ref={triggerRef}
-        accessibilityRole="button"
-        accessibilityLabel={label ? `${label}: ${display}` : display}
-        accessibilityState={{ expanded: isOpen, disabled }}
-        disabled={!canOpen}
-        onPress={handleToggle}
-        style={({ pressed }) => [
-          styles.trigger,
-          {
-            minHeight: triggerMinHeight,
-            borderRadius: radius,
-            borderColor: isOpen ? colors.accent : colors.border,
-            backgroundColor:
-              disabled || !canOpen
-                ? alpha(colors.surface1, 0.5)
-                : pressed
-                  ? colors.surface2
-                  : colors.surface0,
-            paddingVertical,
-            paddingHorizontal,
-          },
-        ]}
-      >
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.triggerText,
-            {
-              color: disabled || !canOpen ? colors.foregroundMuted : colors.foreground,
-              fontSize,
-              lineHeight,
-              fontWeight: selected ? "600" : "500",
-            },
-          ]}
-        >
-          {display}
-        </Text>
-        <Icon
-          name={isOpen ? "ChevronUp" : "ChevronDown"}
-          size={iconSize}
-          color={colors.foregroundMuted}
-        />
-      </Pressable>
-
-      {isOpen && coords ? (
-        <Modal
-          transparent
-          visible={isOpen}
-          animationType="none"
-          onRequestClose={() => setOpen(false)}
-        >
-          <TouchableWithoutFeedback
-            accessibilityRole="button"
-            accessibilityLabel="Dismiss options"
-            onPress={() => setOpen(false)}
-          >
-            <View style={StyleSheet.absoluteFill} />
-          </TouchableWithoutFeedback>
-
-          <View
-            style={[
-              styles.overlayList,
-              {
-                top: coords.y + coords.height + spacing.xs,
-                left: coords.x,
-                minWidth: coords.width,
-                borderRadius: radius,
-                borderColor: colors.border,
-                backgroundColor: colors.surface0,
-              },
-            ]}
-          >
-            <FallbackScrollView
-              nestedScrollEnabled
-              keyboardShouldPersistTaps="handled"
-              style={{ maxHeight: OPTION_LIST_MAX_HEIGHT }}
-            >
-              {options.map((option) => {
-                const isSelected = option.value === value;
-                return (
-                  <Pressable
-                    key={option.value}
-                    accessibilityRole="button"
-                    accessibilityLabel={option.label}
-                    accessibilityState={{ selected: isSelected }}
-                    onPress={() => {
-                      onValueChange(option.value);
-                      setOpen(false);
-                    }}
-                    style={({ pressed }) => [
-                      styles.option,
-                      {
-                        paddingVertical,
-                        paddingHorizontal,
-                        backgroundColor: isSelected
-                          ? colors.surface2
-                          : pressed
-                            ? alpha(colors.surface2, 0.5)
-                            : "transparent",
-                      },
-                    ]}
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={[
-                        styles.optionText,
-                        {
-                          color: isSelected ? colors.foreground : colors.foregroundMuted,
-                          fontSize: isCompact ? fontSize : fontSize + 1,
-                          lineHeight,
-                          fontWeight: isSelected ? "600" : "400",
-                        },
-                      ]}
-                    >
-                      {option.label}
-                    </Text>
-                  </Pressable>
-                );
-              })}
-            </FallbackScrollView>
-          </View>
-        </Modal>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: spacing.sm,
-    borderWidth: 1,
-  },
-  triggerText: {
-    flexShrink: 1,
-    minWidth: 0,
-  },
-  overlayList: {
-    position: "absolute",
-    borderWidth: 1,
-    overflow: "hidden",
-    elevation: 20,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.25,
-    shadowRadius: 8,
-  },
-  option: {},
-  optionText: {
-    flexShrink: 1,
-    minWidth: 0,
-  },
-});