@xpufx/paseo-top 0.4.3 → 0.4.5

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,118 +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;
-  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,
-  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");
-
-  const handleClear = () => {
-    onChangeText("");
-    if (onClear) onClear();
-  };
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: colors.surface1,
-          borderColor: colors.border,
-          borderRadius: radius,
-          height: isCompact ? 36 : 40,
-        },
-        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: 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,80 +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
-        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,
-  },
-  title: {
-    letterSpacing: 0.8,
-  },
-});

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

@@ -1,215 +0,0 @@
-import React, { useState } from "react";
-import {
-  Pressable,
-  ScrollView as FallbackScrollView,
-  StyleSheet,
-  Text,
-  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;
-
-/**
- * Compact single-choice picker sized to sit inside a {@link FormRow}. The
- * closed trigger stays one line tall; opening reveals a bounded, scrollable
- * option list, so a long list degrades to scrolling rather than overflow.
- */
-export function Select({
-  value,
-  options,
-  onValueChange,
-  label,
-  size = "md",
-  placeholder = "Select…",
-  disabled = false,
-  style,
-}: SelectProps) {
-  const { Icon } = getClientHost();
-  // The dropdown option list is a bounded box nested inside the host sheet,
-  // so it scrolls with a plain React Native ScrollView — never the host
-  // sheet-gesture scroller (#219).
-  const { colors, resolveRadius, typography, isCompact, touchTargetMin, alpha } =
-    usePluginTheme();
-  const [open, setOpen] = useState(false);
-
-  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);
-
-  return (
-    <View style={[styles.container, style]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={label ? `${label}: ${display}` : display}
-        accessibilityState={{ expanded: isOpen, disabled }}
-        disabled={!canOpen}
-        onPress={() => setOpen((prev) => !prev)}
-        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 ? (
-        <View
-          style={[
-            styles.optionList,
-            {
-              borderRadius: radius,
-              borderColor: colors.border,
-              backgroundColor: colors.surface0,
-              marginTop: spacing.xs,
-            },
-          ]}
-        >
-          <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>
-      ) : 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,
-  },
-  optionList: {
-    borderWidth: 1,
-    overflow: "hidden",
-  },
-  option: {},
-  optionText: {
-    flexShrink: 1,
-    minWidth: 0,
-  },
-});

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

@@ -1,80 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Animated, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import { usePluginTheme } from "../theme/provider";
-import type { StatusVariant } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-export interface StatusDotProps {
-  variant?: StatusVariant;
-  size?: "sm" | "md" | "lg";
-  pulse?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function StatusDot({ variant = "neutral", size = "md", pulse = false, style }: StatusDotProps) {
-  const { getStatusColor, alpha } = usePluginTheme();
-  const color = getStatusColor(variant);
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    if (!pulse) return;
-
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(pulseAnim, {
-          toValue: 0.35,
-          duration: 900,
-          useNativeDriver: true,
-        }),
-        Animated.timing(pulseAnim, {
-          toValue: 1,
-          duration: 900,
-          useNativeDriver: true,
-        }),
-      ]),
-    );
-    loop.start();
-
-    return () => loop.stop();
-  }, [pulse, pulseAnim]);
-
-  const dimension = size === "sm" ? 6 : size === "lg" ? 10 : 8;
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          width: dimension,
-          height: dimension,
-        },
-        style,
-      ]}
-    >
-      <Animated.View
-        style={[
-          styles.dot,
-          {
-            width: dimension,
-            height: dimension,
-            borderRadius: dimension / 2,
-            backgroundColor: color,
-            shadowColor: color,
-            opacity: pulseAnim,
-          },
-        ]}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  dot: {
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.4,
-    shadowRadius: 3,
-  },
-});