@ponti-studios/ui 2.0.1 → 3.0.0

package/src/hooks/use-api-client.ts

@@ -1,122 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-
-type FetchOptions<T> = {
-  method?: "GET" | "POST" | "PUT" | "DELETE";
-  body?: T | undefined;
-  headers?: Record<string, string>;
-  stream?: boolean;
-};
-
-type ApiState = {
-  isLoading: boolean;
-  error: Error | null;
-};
-
-/**
- * React hook for API client that handles fetch requests with authentication
- */
-export function useApiClient() {
-  const [state, setState] = useState<ApiState>({
-    isLoading: false,
-    error: null,
-  });
-
-  /**
-   * Base fetch function with authentication
-   */
-  const fetchApi = useCallback(
-    async <T, S>(endpoint: string, options: FetchOptions<T> = {}): Promise<S> => {
-      const { method = "GET", body, headers = {}, stream = false } = options;
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-
-      try {
-        // Default headers
-        const defaultHeaders: Record<string, string> = {};
-
-        // Only set Content-Type for non-FormData requests
-        if (!(body instanceof FormData)) {
-          defaultHeaders["Content-Type"] = "application/json";
-        }
-
-        const fetchBody: BodyInit | null =
-          body instanceof FormData ? body : body ? JSON.stringify(body) : null;
-
-        const res = await fetch(`${API_BASE_URL}${endpoint}`, {
-          method,
-          headers: {
-            ...defaultHeaders,
-            ...headers,
-          },
-          body: fetchBody,
-          credentials: "include",
-        });
-
-        if (!res.ok) {
-          const error = await res.json().catch(() => ({}));
-          throw new Error(error.message || "An error occurred");
-        }
-
-        if (stream) {
-          setState((prev) => ({ ...prev, isLoading: false }));
-          return res as S;
-        }
-
-        const data = (await res.json()) as S;
-        setState((prev) => ({ ...prev, isLoading: false }));
-        return data;
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error("An unknown error occurred"),
-        }));
-        throw error;
-      }
-    },
-    [],
-  );
-
-  /**
-   * API client methods for common operations - memoized to prevent infinite re-renders
-   */
-  const api = useMemo(
-    () => ({
-      get: <body, returnType>(
-        endpoint: string,
-        options?: Omit<FetchOptions<body>, "method" | "body">,
-      ) => fetchApi<body, returnType>(endpoint, { ...options, method: "GET" }),
-
-      post: <T, S>(endpoint: string, data?: T, options?: Omit<FetchOptions<T>, "method">) =>
-        fetchApi<T, S>(endpoint, { ...options, method: "POST", body: data || undefined }),
-
-      postStream: <T>(
-        endpoint: string,
-        data: T,
-        options?: Omit<FetchOptions<T>, "method" | "stream">,
-      ) =>
-        fetchApi<T, Response>(endpoint, { ...options, method: "POST", body: data, stream: true }),
-
-      postFormData: <S>(
-        endpoint: string,
-        formData: FormData,
-        options?: Omit<FetchOptions<FormData>, "method">,
-      ) => fetchApi<FormData, S>(endpoint, { ...options, method: "POST", body: formData }),
-
-      put: <T, S>(endpoint: string, data: T, options?: Omit<FetchOptions<T>, "method">) =>
-        fetchApi<T, S>(endpoint, { ...options, method: "PUT", body: data }),
-
-      delete: <T, S>(endpoint: string, options?: Omit<FetchOptions<T>, "method">) =>
-        // We add body because `fetchApi` use `application/json` as default content type
-        fetchApi<T, S>(endpoint, { ...options, method: "DELETE", body: {} as T }),
-    }),
-    [fetchApi],
-  );
-
-  return {
-    ...api,
-    isLoading: state.isLoading,
-    error: state.error,
-  };
-}

package/src/hooks/use-debounced-value.ts

@@ -1,12 +0,0 @@
-import { useEffect, useState } from "react";
-
-export function useDebouncedValue<T>(value: T, delayMs: number): T {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => setDebouncedValue(value), delayMs);
-    return () => clearTimeout(timeoutId);
-  }, [delayMs, value]);
-
-  return debouncedValue;
-}

package/src/hooks/use-derived-filter-state.ts

@@ -1,70 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-import type { ActiveFilter } from "../components/filters/active-filters-bar";
-
-export interface FilterConfig {
-  default: string;
-  label?: (value: string) => string;
-}
-
-interface UseDerivedFilterStateOptions<T extends Record<string, FilterConfig>> {
-  fields: T;
-  sync: {
-    read: () => Record<string, string>;
-    write: (values: Record<string, string>) => void;
-  };
-}
-
-export function useDerivedFilterState<T extends Record<string, FilterConfig>>({
-  fields,
-  sync,
-}: UseDerivedFilterStateOptions<T>) {
-  const [values, setValues] = useState<Record<string, string>>(() => {
-    const read = sync.read();
-    const initial: Record<string, string> = {};
-    for (const key of Object.keys(fields)) {
-      initial[key] = read[key] ?? fields[key].default;
-    }
-    return initial;
-  });
-
-  const setValue = useCallback(
-    (key: string, value: string) => {
-      setValues((prev) => {
-        const next = { ...prev, [key]: value };
-        sync.write(next);
-        return next;
-      });
-    },
-    [sync],
-  );
-
-  const clearAll = useCallback(() => {
-    const reset: Record<string, string> = {};
-    for (const key of Object.keys(fields)) {
-      reset[key] = fields[key].default;
-    }
-    setValues(reset);
-    sync.write(reset);
-  }, [fields, sync]);
-
-  const activeFilters: ActiveFilter[] = useMemo(() => {
-    return Object.entries(values)
-      .filter(([, v]) => v !== "")
-      .map(([key, v]) => ({
-        id: key,
-        label: fields[key]?.label ? fields[key].label!(v) : `${key}: ${v}`,
-        onRemove: () => setValue(key, ""),
-      }));
-  }, [values, fields, setValue]);
-
-  const hasActive = activeFilters.length > 0;
-
-  return {
-    values,
-    setValue,
-    activeFilters,
-    clearAll,
-    hasActive,
-  };
-}

package/src/hooks/use-filter-state.ts

@@ -1,66 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-interface UseFilterStateOptions<T> {
-  initialFilters: T;
-  onFiltersChange?: (filters: T) => void;
-  debounceMs?: number;
-}
-
-export function useFilterState<T extends Record<string, unknown>>(
-  options: UseFilterStateOptions<T>,
-) {
-  const { initialFilters, onFiltersChange, debounceMs } = options;
-  const [filters, setFiltersState] = useState<T>(initialFilters);
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const onFiltersChangeRef = useRef(onFiltersChange);
-  onFiltersChangeRef.current = onFiltersChange;
-
-  const setFilters = useCallback(
-    (newFilters: T | ((prev: T) => T)) => {
-      setFiltersState((prev) => {
-        const updatedFilters = typeof newFilters === "function" ? newFilters(prev) : newFilters;
-
-        if (debounceMs && debounceMs > 0) {
-          if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-          }
-          debounceTimerRef.current = setTimeout(() => {
-            onFiltersChangeRef.current?.(updatedFilters);
-          }, debounceMs);
-        } else {
-          onFiltersChangeRef.current?.(updatedFilters);
-        }
-
-        return updatedFilters;
-      });
-    },
-    [debounceMs],
-  );
-
-  const updateFilter = useCallback(
-    <K extends keyof T>(key: K, value: T[K]) => {
-      setFilters((prev) => ({ ...prev, [key]: value }));
-    },
-    [setFilters],
-  );
-
-  const clearFilters = useCallback(() => {
-    setFiltersState(initialFilters);
-    onFiltersChangeRef.current?.(initialFilters);
-  }, [initialFilters]);
-
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-    };
-  }, []);
-
-  return {
-    filters,
-    setFilters,
-    updateFilter,
-    clearFilters,
-  };
-}

package/src/hooks/use-media-query.ts

@@ -1,69 +0,0 @@
-import { useCallback, useSyncExternalStore } from "react";
-
-interface MediaQueryOptions {
-  width?: number;
-  height?: number;
-}
-
-/**
- * A utility function to check if a media query matches the current viewport.
- * @param query - The media query string to check.
- * @param options - Optional width and height values for testing
- * @returns A boolean indicating whether the media query matches.
- */
-function mediaQuery(query: string, options?: MediaQueryOptions) {
-  if (options?.width !== undefined) {
-    // For test environment where we provide custom dimensions
-    const minWidthMatch = query.match(/\(min-width:\s*(\d+)px\)/);
-    const maxWidthMatch = query.match(/\(max-width:\s*(\d+)px\)/);
-
-    if (minWidthMatch && minWidthMatch[1]) {
-      return options.width >= Number.parseInt(minWidthMatch[1], 10);
-    }
-    if (maxWidthMatch && maxWidthMatch[1]) {
-      return options.width <= Number.parseInt(maxWidthMatch[1], 10);
-    }
-  }
-
-  const mql = window.matchMedia(query);
-  return mql.matches;
-}
-
-function getServerSnapshot() {
-  return false;
-}
-
-/**
- * Listens for changes to a media query and returns a boolean indicating whether the query matches.
- * @param query - The media query string to listen for.
- * @returns A boolean indicating whether the media query matches.
- */
-export function useMediaQuery(query: string) {
-  const subscribe = useCallback(
-    (onStoreChange: () => void) => {
-      if (typeof window === "undefined") {
-        return () => {};
-      }
-
-      const mql = window.matchMedia(query);
-      const onChange = () => {
-        onStoreChange();
-      };
-
-      mql.addEventListener("change", onChange);
-      return () => {
-        mql.removeEventListener("change", onChange);
-      };
-    },
-    [query],
-  );
-
-  const getSnapshot = useCallback(() => {
-    if (typeof window === "undefined") {
-      return false;
-    }
-    return mediaQuery(query);
-  }, [query]);
-
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}

package/src/hooks/use-mobile.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/src/hooks/use-sort.ts

@@ -1,20 +0,0 @@
-import { useState } from "react";
-
-import type { SortOption } from "./sort.types";
-
-interface UseSortOptions {
-  initialSortOptions?: SortOption[];
-}
-
-export function useSort(options: UseSortOptions = {}) {
-  const [sortOptions, setSortOptions] = useState<SortOption[]>(options.initialSortOptions ?? []);
-
-  return {
-    sortOptions,
-    addSortOption: (opt: SortOption) => setSortOptions((prev) => [...prev, opt]),
-    updateSortOption: (index: number, opt: SortOption) =>
-      setSortOptions((prev) => prev.map((o, i) => (i === index ? opt : o))),
-    removeSortOption: (index: number) =>
-      setSortOptions((prev) => prev.filter((_, i) => i !== index)),
-  };
-}

package/src/lib/auth.ts

@@ -1,5 +0,0 @@
-export const OTP_LENGTH = 6;
-
-export function normalizeOtp(value: string, length = OTP_LENGTH): string {
-  return value.replace(/\D/g, "").slice(0, length);
-}

package/src/lib/clipboard.ts

@@ -1,8 +0,0 @@
-export async function copyToClipboard(text: string): Promise<boolean> {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-}

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/native/components.tsx

@@ -1,198 +0,0 @@
-import React, { type ReactNode } from "react";
-import { Pressable, Text, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-import { useNativeTheme } from "./theme";
-
-export type NativeButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
-export type NativeButtonSize = "small" | "medium" | "large";
-
-export interface NativeButtonProps {
-  label: string;
-  onPress: PressableProps["onPress"];
-  variant?: NativeButtonVariant;
-  size?: NativeButtonSize;
-  disabled?: boolean;
-  loading?: boolean;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  leading?: ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function NativeButton({
-  label,
-  onPress,
-  variant = "primary",
-  size = "medium",
-  disabled = false,
-  loading = false,
-  accessibilityLabel,
-  accessibilityHint,
-  leading,
-  style,
-}: NativeButtonProps) {
-  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
-  const isDisabled = disabled || loading;
-  const [backgroundColor, foregroundColor] = isDisabled
-    ? [colors.muted, colors.tertiary]
-    : buttonColors(variant, colors);
-  const verticalPadding = size === "small" ? spacing["2"] : size === "large" ? spacing["4"] : spacing["3"];
-  const horizontalPadding = size === "small" ? spacing["3"] : spacing["4"];
-  const fontSize = size === "small" ? textSizes.sm : size === "large" ? textSizes.lg : textSizes.base;
-
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel ?? label}
-      accessibilityHint={accessibilityHint}
-      accessibilityState={{ disabled: isDisabled, busy: loading }}
-      disabled={isDisabled}
-      onPress={onPress}
-      style={[
-        {
-          minHeight: size === "large" ? spacing["14"] : spacing["12"],
-          paddingHorizontal: horizontalPadding,
-          paddingVertical: verticalPadding,
-          borderRadius: radii.lg,
-          backgroundColor,
-          alignItems: "center",
-          justifyContent: "center",
-          flexDirection: "row",
-          gap: spacing["2"],
-        },
-        style,
-      ]}
-    >
-      {leading}
-      <Text style={{ color: foregroundColor, fontSize, fontWeight: fontWeights.semibold }}>{label}</Text>
-    </Pressable>
-  );
-}
-
-function buttonColors(variant: NativeButtonVariant, colors: ReturnType<typeof useNativeTheme>["colors"]): [string, string] {
-  switch (variant) {
-    case "primary":
-      return [colors.primary, colors["primary-foreground"]];
-    case "destructive":
-      return [colors.destructive, colors["destructive-foreground"]];
-    case "secondary":
-      return [colors.secondary, colors["text-primary"]];
-    case "ghost":
-      return ["transparent", colors["text-primary"]];
-  }
-}
-
-export interface NativeSurfaceProps {
-  children: ReactNode;
-  tone?: "card" | "muted" | "background";
-  style?: StyleProp<ViewStyle>;
-}
-
-export function NativeSurface({ children, tone = "card", style }: NativeSurfaceProps) {
-  const { colors, spacing, radii } = useNativeTheme();
-  const backgroundColor = tone === "muted" ? colors.muted : tone === "background" ? colors.background : colors.card;
-  return (
-    <View
-      style={[
-        {
-          backgroundColor,
-          borderColor: colors["border-default"],
-          borderWidth: spacing.px,
-          borderRadius: radii.xl,
-          padding: spacing["4"],
-          gap: spacing["2"],
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
-  );
-}
-
-export type NativeBadgeVariant = "default" | "secondary" | "accent" | "success" | "warning" | "destructive";
-
-export interface NativeBadgeProps {
-  label: string;
-  variant?: NativeBadgeVariant;
-  accessibilityLabel?: string;
-}
-
-export function NativeBadge({ label, variant = "default", accessibilityLabel }: NativeBadgeProps) {
-  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
-  const [backgroundColor, foregroundColor] = badgeColors(variant, colors);
-  return (
-    <View
-      accessibilityRole="text"
-      accessibilityLabel={accessibilityLabel ?? label}
-      style={{ alignSelf: "flex-start", paddingHorizontal: spacing["2"], paddingVertical: spacing["1"], borderRadius: radii.full, backgroundColor }}
-    >
-      <Text style={{ color: foregroundColor, fontSize: textSizes.sm, fontWeight: fontWeights.medium }}>{label}</Text>
-    </View>
-  );
-}
-
-function badgeColors(variant: NativeBadgeVariant, colors: ReturnType<typeof useNativeTheme>["colors"]): [string, string] {
-  switch (variant) {
-    case "secondary":
-      return [colors.secondary, colors["text-primary"]];
-    case "accent":
-      return [colors.accent, colors["text-primary"]];
-    case "success":
-      return [colors.success, colors["success-foreground"]];
-    case "warning":
-      return [colors.warning, colors["warning-foreground"]];
-    case "destructive":
-      return [colors.destructive, colors["destructive-foreground"]];
-    case "default":
-      return [colors.primary, colors["primary-foreground"]];
-  }
-}
-
-export interface NativeTabItem<Value extends string = string> {
-  value: Value;
-  label: string;
-  accessibilityLabel?: string;
-}
-
-export interface NativeTabBarProps<Value extends string> {
-  items: readonly NativeTabItem<Value>[];
-  value: Value;
-  onChange: (value: Value) => void;
-}
-
-export function NativeTabBar<Value extends string>({ items, value, onChange }: NativeTabBarProps<Value>) {
-  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
-  return (
-    <View
-      accessibilityRole="tablist"
-      style={{ flexDirection: "row", backgroundColor: colors.card, borderTopColor: colors["border-default"], borderTopWidth: spacing.px, padding: spacing["2"], gap: spacing["1"] }}
-    >
-      {items.map((item) => {
-        const selected = item.value === value;
-        return (
-          <Pressable
-            key={item.value}
-            accessibilityRole="tab"
-            accessibilityLabel={item.accessibilityLabel ?? item.label}
-            accessibilityState={{ selected }}
-            onPress={() => onChange(item.value)}
-            style={({ pressed }) => ({
-              flex: 1,
-              minHeight: spacing["12"],
-              paddingHorizontal: spacing["2"],
-              paddingVertical: spacing["2"],
-              borderRadius: radii.lg,
-              backgroundColor: selected ? colors.accent : pressed ? colors.secondary : colors.card,
-              alignItems: "center",
-              justifyContent: "center",
-            })}
-          >
-            <Text style={{ color: selected ? colors["text-primary"] : colors["text-secondary"], fontSize: textSizes.sm, fontWeight: selected ? fontWeights.semibold : fontWeights.normal }}>
-              {item.label}
-            </Text>
-          </Pressable>
-        );
-      })}
-    </View>
-  );
-}

package/src/native/theme.tsx

@@ -1,69 +0,0 @@
-import React, { createContext, useContext, useMemo } from "react";
-import { useColorScheme, type TextStyle } from "react-native";
-import { colorThemes, fontWeights, radii, spacing, textLineHeights, textSizes, type ColorMode, type ColorTheme } from "../styles/tokens";
-
-export type NativeColorPreference = ColorMode | "system";
-
-export interface NativeTheme {
-  mode: ColorMode;
-  colors: ColorTheme;
-  spacing: typeof spacing;
-  textSizes: typeof textSizes;
-  textLineHeights: typeof textLineHeights;
-  fontWeights: Readonly<Record<keyof typeof fontWeights, NonNullable<TextStyle["fontWeight"]>>>;
-  radii: typeof radii;
-}
-
-function nativeFontWeight(token: keyof typeof fontWeights): NonNullable<TextStyle["fontWeight"]> {
-  switch (fontWeights[token]) {
-    case "100": return "100";
-    case "200": return "200";
-    case "300": return "300";
-    case "400": return "400";
-    case "500": return "500";
-    case "600": return "600";
-    case "700": return "700";
-    case "800": return "800";
-    case "900": return "900";
-    default: throw new Error(`Unsupported native font-weight token: ${fontWeights[token]}`);
-  }
-}
-
-const nativeFontWeights: NativeTheme["fontWeights"] = {
-  thin: nativeFontWeight("thin"),
-  extralight: nativeFontWeight("extralight"),
-  light: nativeFontWeight("light"),
-  normal: nativeFontWeight("normal"),
-  medium: nativeFontWeight("medium"),
-  semibold: nativeFontWeight("semibold"),
-  bold: nativeFontWeight("bold"),
-  extrabold: nativeFontWeight("extrabold"),
-  black: nativeFontWeight("black"),
-};
-
-const NativeThemeContext = createContext<NativeTheme>({
-  mode: "light",
-  colors: colorThemes.light,
-  spacing,
-  textSizes,
-  textLineHeights,
-  fontWeights: nativeFontWeights,
-  radii,
-});
-
-export interface NativeThemeProviderProps {
-  children: React.ReactNode;
-  colorPreference?: NativeColorPreference;
-}
-
-export function NativeThemeProvider({ children, colorPreference = "system" }: NativeThemeProviderProps) {
-  const systemMode = useColorScheme();
-  const mode: ColorMode = colorPreference === "system" ? (systemMode === "dark" ? "dark" : "light") : colorPreference;
-  const value = useMemo<NativeTheme>(() => ({ mode, colors: colorThemes[mode], spacing, textSizes, textLineHeights, fontWeights: nativeFontWeights, radii }), [mode]);
-
-  return <NativeThemeContext.Provider value={value}>{children}</NativeThemeContext.Provider>;
-}
-
-export function useNativeTheme(): NativeTheme {
-  return useContext(NativeThemeContext);
-}