@databricks/appkit-ui 0.2.0 → 0.4.0

package/dist/react/hooks/use-analytics-query.js

@@ -20,6 +20,10 @@ function getArrowStreamUrl(id) {
 * - `format: "JSON"` (default): Returns typed array from QueryRegistry
 * - `format: "ARROW"`: Returns TypedArrowTable with row type preserved
 *
+* Note: User context execution is determined by query file naming:
+* - `queryKey.obo.sql`: Executes as user (OBO = on-behalf-of / user delegation)
+* - `queryKey.sql`: Executes as service principal
+*
 * @param queryKey - Analytics query identifier
 * @param parameters - Query parameters (type-safe based on QueryRegistry)
 * @param options - Analytics query settings including format
@@ -41,9 +45,8 @@ function useAnalyticsQuery(queryKey, parameters, options = {}) {
 	const format = options?.format ?? "JSON";
 	const maxParametersSize = options?.maxParametersSize ?? 100 * 1024;
 	const autoStart = options?.autoStart ?? true;
-	const asUser = options?.asUser ?? false;
 	const devMode = getDevMode();
-	const urlSuffix = asUser ? `/api/analytics/users/me/query/${encodeURIComponent(queryKey)}${devMode}` : `/api/analytics/query/${encodeURIComponent(queryKey)}${devMode}`;
+	const urlSuffix = `/api/analytics/query/${encodeURIComponent(queryKey)}${devMode}`;
 	const [data, setData] = useState(null);
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState(null);
@@ -57,8 +60,8 @@ function useAnalyticsQuery(queryKey, parameters, options = {}) {
 			});
 			if (new Blob([serialized]).size > maxParametersSize) throw new Error("useAnalyticsQuery: Parameters size exceeds the maximum allowed size");
 			return serialized;
-		} catch (error$1) {
-			console.error("useAnalyticsQuery: Failed to serialize parameters", error$1);
+		} catch (error) {
+			console.error("useAnalyticsQuery: Failed to serialize parameters", error);
 			return null;
 		}
 	}, [
@@ -95,8 +98,8 @@ function useAnalyticsQuery(queryKey, parameters, options = {}) {
 						setLoading(false);
 						setData(table);
 						return;
-					} catch (error$1) {
-						console.error("[useAnalyticsQuery] Failed to fetch Arrow data", error$1);
+					} catch (error) {
+						console.error("[useAnalyticsQuery] Failed to fetch Arrow data", error);
 						setLoading(false);
 						setError("Unable to load data, please try again");
 						return;
@@ -108,21 +111,21 @@ function useAnalyticsQuery(queryKey, parameters, options = {}) {
 						if (parsed.code) console.error(`[useAnalyticsQuery] Code: ${parsed.code}, Message: ${errorMsg}`);
 						return;
 					}
-				} catch (error$1) {
-					console.warn("[useAnalyticsQuery] Malformed message received", error$1);
+				} catch (error) {
+					console.warn("[useAnalyticsQuery] Malformed message received", error);
 				}
 			},
-			onError: (error$1) => {
+			onError: (error) => {
 				if (abortController.signal.aborted) return;
 				setLoading(false);
 				let userMessage = "Unable to load data, please try again";
-				if (error$1 instanceof Error) {
-					if (error$1.name === "AbortError") userMessage = "Request timed out, please try again";
-					else if (error$1.message.includes("Failed to fetch")) userMessage = "Network error. Please check your connection.";
+				if (error instanceof Error) {
+					if (error.name === "AbortError") userMessage = "Request timed out, please try again";
+					else if (error.message.includes("Failed to fetch")) userMessage = "Network error. Please check your connection.";
 					console.error("[useAnalyticsQuery] Error", {
 						queryKey,
-						error: error$1.message,
-						stack: error$1.stack
+						error: error.message,
+						stack: error.stack
 					});
 				}
 				setError(userMessage);

package/dist/react/hooks/use-analytics-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-analytics-query.js","names":["error"],"sources":["../../../src/react/hooks/use-analytics-query.ts"],"sourcesContent":["import { ArrowClient, connectSSE } from \"@/js\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  AnalyticsFormat,\n  InferParams,\n  InferResultByFormat,\n  QueryKey,\n  UseAnalyticsQueryOptions,\n  UseAnalyticsQueryResult,\n} from \"./types\";\nimport { useQueryHMR } from \"./use-query-hmr\";\n\nfunction getDevMode() {\n  const url = new URL(window.location.href);\n  const searchParams = url.searchParams;\n  const dev = searchParams.get(\"dev\");\n\n  return dev ? `?dev=${dev}` : \"\";\n}\n\nfunction getArrowStreamUrl(id: string) {\n  return `/api/analytics/arrow-result/${id}`;\n}\n\n/**\n * Subscribe to an analytics query over SSE and returns its latest result.\n * Integration hook between client and analytics plugin.\n *\n * The return type is automatically inferred based on the format:\n * - `format: \"JSON\"` (default): Returns typed array from QueryRegistry\n * - `format: \"ARROW\"`: Returns TypedArrowTable with row type preserved\n *\n * @param queryKey - Analytics query identifier\n * @param parameters - Query parameters (type-safe based on QueryRegistry)\n * @param options - Analytics query settings including format\n * @returns Query result state with format-appropriate data type\n *\n * @example JSON format (default)\n * ```typescript\n * const { data } = useAnalyticsQuery(\"spend_data\", params);\n * // data: Array<{ group_key: string; cost_usd: number; ... }> | null\n * ```\n *\n * @example Arrow format\n * ```typescript\n * const { data } = useAnalyticsQuery(\"spend_data\", params, { format: \"ARROW\" });\n * // data: TypedArrowTable<{ group_key: string; cost_usd: number; ... }> | null\n * ```\n */\nexport function useAnalyticsQuery<\n  T = unknown,\n  K extends QueryKey = QueryKey,\n  F extends AnalyticsFormat = \"JSON\",\n>(\n  queryKey: K,\n  parameters?: InferParams<K> | null,\n  options: UseAnalyticsQueryOptions<F> = {} as UseAnalyticsQueryOptions<F>,\n): UseAnalyticsQueryResult<InferResultByFormat<T, K, F>> {\n  const format = options?.format ?? \"JSON\";\n  const maxParametersSize = options?.maxParametersSize ?? 100 * 1024;\n  const autoStart = options?.autoStart ?? true;\n  const asUser = options?.asUser ?? false;\n\n  const devMode = getDevMode();\n  const urlSuffix = asUser\n    ? `/api/analytics/users/me/query/${encodeURIComponent(queryKey)}${devMode}`\n    : `/api/analytics/query/${encodeURIComponent(queryKey)}${devMode}`;\n\n  type ResultType = InferResultByFormat<T, K, F>;\n  const [data, setData] = useState<ResultType | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  if (!queryKey || queryKey.trim().length === 0) {\n    throw new Error(\n      \"useAnalyticsQuery: 'queryKey' must be a non-empty string.\",\n    );\n  }\n\n  const payload = useMemo(() => {\n    try {\n      const serialized = JSON.stringify({ parameters, format });\n      const sizeInBytes = new Blob([serialized]).size;\n      if (sizeInBytes > maxParametersSize) {\n        throw new Error(\n          \"useAnalyticsQuery: Parameters size exceeds the maximum allowed size\",\n        );\n      }\n\n      return serialized;\n    } catch (error) {\n      console.error(\"useAnalyticsQuery: Failed to serialize parameters\", error);\n      return null;\n    }\n  }, [parameters, format, maxParametersSize]);\n\n  const start = useCallback(() => {\n    if (payload === null) {\n      setError(\"Failed to serialize query parameters\");\n      return;\n    }\n\n    // Abort previous request if exists\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n\n    setLoading(true);\n    setError(null);\n    setData(null);\n\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n\n    connectSSE({\n      url: urlSuffix,\n      payload: payload,\n      signal: abortController.signal,\n      onMessage: async (message) => {\n        try {\n          const parsed = JSON.parse(message.data);\n\n          // success - JSON format\n          if (parsed.type === \"result\") {\n            setLoading(false);\n            setData(parsed.data as ResultType);\n            return;\n          }\n\n          // success - Arrow format\n          if (parsed.type === \"arrow\") {\n            try {\n              const arrowData = await ArrowClient.fetchArrow(\n                getArrowStreamUrl(parsed.statement_id),\n              );\n              const table = await ArrowClient.processArrowBuffer(arrowData);\n              setLoading(false);\n              // Table is cast to TypedArrowTable with row type from QueryRegistry\n              setData(table as ResultType);\n              return;\n            } catch (error) {\n              console.error(\n                \"[useAnalyticsQuery] Failed to fetch Arrow data\",\n                error,\n              );\n              setLoading(false);\n              setError(\"Unable to load data, please try again\");\n              return;\n            }\n          }\n\n          // error\n          if (parsed.type === \"error\" || parsed.error || parsed.code) {\n            const errorMsg =\n              parsed.error || parsed.message || \"Unable to execute query\";\n\n            setLoading(false);\n            setError(errorMsg);\n\n            if (parsed.code) {\n              console.error(\n                `[useAnalyticsQuery] Code: ${parsed.code}, Message: ${errorMsg}`,\n              );\n            }\n            return;\n          }\n        } catch (error) {\n          console.warn(\"[useAnalyticsQuery] Malformed message received\", error);\n        }\n      },\n      onError: (error) => {\n        if (abortController.signal.aborted) return;\n        setLoading(false);\n\n        let userMessage = \"Unable to load data, please try again\";\n\n        if (error instanceof Error) {\n          if (error.name === \"AbortError\") {\n            userMessage = \"Request timed out, please try again\";\n          } else if (error.message.includes(\"Failed to fetch\")) {\n            userMessage = \"Network error. Please check your connection.\";\n          }\n\n          console.error(\"[useAnalyticsQuery] Error\", {\n            queryKey,\n            error: error.message,\n            stack: error.stack,\n          });\n        }\n        setError(userMessage);\n      },\n    });\n  }, [queryKey, payload, urlSuffix]);\n\n  useEffect(() => {\n    if (autoStart) {\n      start();\n    }\n\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, [start, autoStart]);\n\n  // Enable HMR for query updates in dev mode\n  useQueryHMR(queryKey, start);\n\n  return { data, loading, error };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-analytics-query.js","names":[],"sources":["../../../src/react/hooks/use-analytics-query.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { ArrowClient, connectSSE } from \"@/js\";\nimport type {\n  AnalyticsFormat,\n  InferParams,\n  InferResultByFormat,\n  QueryKey,\n  UseAnalyticsQueryOptions,\n  UseAnalyticsQueryResult,\n} from \"./types\";\nimport { useQueryHMR } from \"./use-query-hmr\";\n\nfunction getDevMode() {\n  const url = new URL(window.location.href);\n  const searchParams = url.searchParams;\n  const dev = searchParams.get(\"dev\");\n\n  return dev ? `?dev=${dev}` : \"\";\n}\n\nfunction getArrowStreamUrl(id: string) {\n  return `/api/analytics/arrow-result/${id}`;\n}\n\n/**\n * Subscribe to an analytics query over SSE and returns its latest result.\n * Integration hook between client and analytics plugin.\n *\n * The return type is automatically inferred based on the format:\n * - `format: \"JSON\"` (default): Returns typed array from QueryRegistry\n * - `format: \"ARROW\"`: Returns TypedArrowTable with row type preserved\n *\n * Note: User context execution is determined by query file naming:\n * - `queryKey.obo.sql`: Executes as user (OBO = on-behalf-of / user delegation)\n * - `queryKey.sql`: Executes as service principal\n *\n * @param queryKey - Analytics query identifier\n * @param parameters - Query parameters (type-safe based on QueryRegistry)\n * @param options - Analytics query settings including format\n * @returns Query result state with format-appropriate data type\n *\n * @example JSON format (default)\n * ```typescript\n * const { data } = useAnalyticsQuery(\"spend_data\", params);\n * // data: Array<{ group_key: string; cost_usd: number; ... }> | null\n * ```\n *\n * @example Arrow format\n * ```typescript\n * const { data } = useAnalyticsQuery(\"spend_data\", params, { format: \"ARROW\" });\n * // data: TypedArrowTable<{ group_key: string; cost_usd: number; ... }> | null\n * ```\n */\nexport function useAnalyticsQuery<\n  T = unknown,\n  K extends QueryKey = QueryKey,\n  F extends AnalyticsFormat = \"JSON\",\n>(\n  queryKey: K,\n  parameters?: InferParams<K> | null,\n  options: UseAnalyticsQueryOptions<F> = {} as UseAnalyticsQueryOptions<F>,\n): UseAnalyticsQueryResult<InferResultByFormat<T, K, F>> {\n  const format = options?.format ?? \"JSON\";\n  const maxParametersSize = options?.maxParametersSize ?? 100 * 1024;\n  const autoStart = options?.autoStart ?? true;\n\n  const devMode = getDevMode();\n  const urlSuffix = `/api/analytics/query/${encodeURIComponent(queryKey)}${devMode}`;\n\n  type ResultType = InferResultByFormat<T, K, F>;\n  const [data, setData] = useState<ResultType | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  if (!queryKey || queryKey.trim().length === 0) {\n    throw new Error(\n      \"useAnalyticsQuery: 'queryKey' must be a non-empty string.\",\n    );\n  }\n\n  const payload = useMemo(() => {\n    try {\n      const serialized = JSON.stringify({ parameters, format });\n      const sizeInBytes = new Blob([serialized]).size;\n      if (sizeInBytes > maxParametersSize) {\n        throw new Error(\n          \"useAnalyticsQuery: Parameters size exceeds the maximum allowed size\",\n        );\n      }\n\n      return serialized;\n    } catch (error) {\n      console.error(\"useAnalyticsQuery: Failed to serialize parameters\", error);\n      return null;\n    }\n  }, [parameters, format, maxParametersSize]);\n\n  const start = useCallback(() => {\n    if (payload === null) {\n      setError(\"Failed to serialize query parameters\");\n      return;\n    }\n\n    // Abort previous request if exists\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n\n    setLoading(true);\n    setError(null);\n    setData(null);\n\n    const abortController = new AbortController();\n    abortControllerRef.current = abortController;\n\n    connectSSE({\n      url: urlSuffix,\n      payload: payload,\n      signal: abortController.signal,\n      onMessage: async (message) => {\n        try {\n          const parsed = JSON.parse(message.data);\n\n          // success - JSON format\n          if (parsed.type === \"result\") {\n            setLoading(false);\n            setData(parsed.data as ResultType);\n            return;\n          }\n\n          // success - Arrow format\n          if (parsed.type === \"arrow\") {\n            try {\n              const arrowData = await ArrowClient.fetchArrow(\n                getArrowStreamUrl(parsed.statement_id),\n              );\n              const table = await ArrowClient.processArrowBuffer(arrowData);\n              setLoading(false);\n              // Table is cast to TypedArrowTable with row type from QueryRegistry\n              setData(table as ResultType);\n              return;\n            } catch (error) {\n              console.error(\n                \"[useAnalyticsQuery] Failed to fetch Arrow data\",\n                error,\n              );\n              setLoading(false);\n              setError(\"Unable to load data, please try again\");\n              return;\n            }\n          }\n\n          // error\n          if (parsed.type === \"error\" || parsed.error || parsed.code) {\n            const errorMsg =\n              parsed.error || parsed.message || \"Unable to execute query\";\n\n            setLoading(false);\n            setError(errorMsg);\n\n            if (parsed.code) {\n              console.error(\n                `[useAnalyticsQuery] Code: ${parsed.code}, Message: ${errorMsg}`,\n              );\n            }\n            return;\n          }\n        } catch (error) {\n          console.warn(\"[useAnalyticsQuery] Malformed message received\", error);\n        }\n      },\n      onError: (error) => {\n        if (abortController.signal.aborted) return;\n        setLoading(false);\n\n        let userMessage = \"Unable to load data, please try again\";\n\n        if (error instanceof Error) {\n          if (error.name === \"AbortError\") {\n            userMessage = \"Request timed out, please try again\";\n          } else if (error.message.includes(\"Failed to fetch\")) {\n            userMessage = \"Network error. Please check your connection.\";\n          }\n\n          console.error(\"[useAnalyticsQuery] Error\", {\n            queryKey,\n            error: error.message,\n            stack: error.stack,\n          });\n        }\n        setError(userMessage);\n      },\n    });\n  }, [queryKey, payload, urlSuffix]);\n\n  useEffect(() => {\n    if (autoStart) {\n      start();\n    }\n\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, [start, autoStart]);\n\n  // Enable HMR for query updates in dev mode\n  useQueryHMR(queryKey, start);\n\n  return { data, loading, error };\n}\n"],"mappings":"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"}

package/dist/react/hooks/use-chart-data.d.ts

@@ -16,8 +16,6 @@ interface UseChartDataOptions {
   format?: DataFormat;
   /** Transform data after fetching */
   transformer?: <T>(data: T) => T;
-  /** Whether to execute the query as the current user. @default false */
-  asUser?: boolean;
 }
 interface UseChartDataResult {
   /** The fetched data (Arrow Table or JSON array) */

package/dist/react/hooks/use-chart-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart-data.d.ts","names":[],"sources":["../../../src/react/hooks/use-chart-data.ts"],"sourcesContent":[],"mappings":";;;UAYiB,mBAAA;;EAAA,QAAA,EAAA,MAAA;EAAmB;YAIrB,CAAA,EAAA,MAAA,CAAA,MAAA,EAAA,OAAA,CAAA;;;;;AAef;AA0EA;;QAAsC,CAAA,EAjF3B,UAiF2B;;EAAwC,WAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EA/EpD,CA+EoD,EAAA,GA/E9C,CA+E8C;;;;UA1E7D,kBAAA;;QAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwEQ,YAAA,UAAsB,sBAAsB"}
+{"version":3,"file":"use-chart-data.d.ts","names":[],"sources":["../../../src/react/hooks/use-chart-data.ts"],"sourcesContent":[],"mappings":";;;UAYiB,mBAAA;;EAAA,QAAA,EAAA,MAAA;EAAmB;YAIrB,CAAA,EAAA,MAAA,CAAA,MAAA,EAAA,OAAA,CAAA;;;;;AAaf;AA0EA;;QAAsC,CAAA,EA/E3B,UA+E2B;;EAAwC,WAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EA7EpD,CA6EoD,EAAA,GA7E9C,CA6E8C;;UA1E7D,kBAAA;;QAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwEQ,YAAA,UAAsB,sBAAsB"}

package/dist/react/hooks/use-chart-data.js

@@ -40,13 +40,12 @@ function resolveFormat(format, parameters) {
 * ```
 */
 function useChartData(options) {
-	const { queryKey, parameters, format = "auto", transformer, asUser = false } = options;
+	const { queryKey, parameters, format = "auto", transformer } = options;
 	const resolvedFormat = useMemo(() => resolveFormat(format, parameters), [format, parameters]);
 	const isArrowFormat = resolvedFormat === "ARROW";
 	const { data: rawData, loading, error } = useAnalyticsQuery(queryKey, parameters, {
 		autoStart: true,
-		format: resolvedFormat,
-		asUser
+		format: resolvedFormat
 	});
 	const processedData = useMemo(() => {
 		if (!rawData) return null;

package/dist/react/hooks/use-chart-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-chart-data.js","names":[],"sources":["../../../src/react/hooks/use-chart-data.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\nimport { useMemo } from \"react\";\nimport type { ChartData, DataFormat } from \"../charts/types\";\nimport { useAnalyticsQuery } from \"./use-analytics-query\";\n\n/** Threshold for auto-selecting Arrow format (row count hint) */\nconst ARROW_THRESHOLD = 500;\n\n// ============================================================================\n// Hook Options & Result Types\n// ============================================================================\n\nexport interface UseChartDataOptions {\n  /** Analytics query key */\n  queryKey: string;\n  /** Query parameters */\n  parameters?: Record<string, unknown>;\n  /**\n   * Data format preference\n   * - \"json\": Force JSON format\n   * - \"arrow\": Force Arrow format\n   * - \"auto\": Auto-select based on heuristics\n   * @default \"auto\"\n   */\n  format?: DataFormat;\n  /** Transform data after fetching */\n  transformer?: <T>(data: T) => T;\n  /** Whether to execute the query as the current user. @default false */\n  asUser?: boolean;\n}\n\nexport interface UseChartDataResult {\n  /** The fetched data (Arrow Table or JSON array) */\n  data: ChartData | null;\n  /** Whether the data is in Arrow format */\n  isArrow: boolean;\n  /** Loading state */\n  loading: boolean;\n  /** Error message if any */\n  error: string | null;\n  /** Whether the data is empty */\n  isEmpty: boolean;\n}\n\n// ============================================================================\n// Format Resolution\n// ============================================================================\n\n/**\n * Resolves the data format based on hints and preferences\n */\nfunction resolveFormat(\n  format: DataFormat,\n  parameters?: Record<string, unknown>,\n): \"JSON\" | \"ARROW\" {\n  // Explicit format selection\n  if (format === \"json\") return \"JSON\";\n  if (format === \"arrow\") return \"ARROW\";\n\n  // Auto-selection heuristics\n  if (format === \"auto\") {\n    // Check for explicit hint in parameters\n    if (parameters?._preferArrow === true) return \"ARROW\";\n    if (parameters?._preferJson === true) return \"JSON\";\n\n    // Check limit parameter as data size hint\n    const limit = parameters?.limit;\n    if (typeof limit === \"number\" && limit > ARROW_THRESHOLD) {\n      return \"ARROW\";\n    }\n\n    // Check for date range queries (often large)\n    if (parameters?.startDate && parameters?.endDate) {\n      return \"ARROW\";\n    }\n\n    return \"JSON\";\n  }\n\n  return \"JSON\";\n}\n\n// ============================================================================\n// Main Hook\n// ============================================================================\n\n/**\n * Hook for fetching chart data in either JSON or Arrow format.\n * Automatically selects the best format based on query hints.\n *\n * @example\n * ```tsx\n * // Auto-select format\n * const { data, isArrow, loading } = useChartData({\n *   queryKey: \"spend_data\",\n *   parameters: { limit: 1000 }\n * });\n *\n * // Force Arrow format\n * const { data } = useChartData({\n *   queryKey: \"big_query\",\n *   format: \"arrow\"\n * });\n * ```\n */\nexport function useChartData(options: UseChartDataOptions): UseChartDataResult {\n  const {\n    queryKey,\n    parameters,\n    format = \"auto\",\n    transformer,\n    asUser = false,\n  } = options;\n\n  // Resolve the format to use\n  const resolvedFormat = useMemo(\n    () => resolveFormat(format, parameters),\n    [format, parameters],\n  );\n\n  const isArrowFormat = resolvedFormat === \"ARROW\";\n\n  // Fetch data using the analytics query hook\n  const {\n    data: rawData,\n    loading,\n    error,\n  } = useAnalyticsQuery(queryKey, parameters, {\n    autoStart: true,\n    format: resolvedFormat,\n    asUser,\n  });\n\n  // Process and transform data\n  const processedData = useMemo(() => {\n    if (!rawData) return null;\n\n    // Apply transformer if provided\n    if (transformer) {\n      try {\n        return transformer(rawData);\n      } catch (err) {\n        console.error(\"[useChartData] Transformer error:\", err);\n        return rawData;\n      }\n    }\n\n    return rawData;\n  }, [rawData, transformer]);\n\n  // Determine if data is empty\n  const isEmpty = useMemo(() => {\n    if (!processedData) return true;\n\n    // Arrow Table - check using duck typing\n    if (\n      typeof processedData === \"object\" &&\n      \"numRows\" in processedData &&\n      typeof (processedData as Table).numRows === \"number\"\n    ) {\n      return (processedData as Table).numRows === 0;\n    }\n\n    // JSON Array\n    if (Array.isArray(processedData)) {\n      return processedData.length === 0;\n    }\n\n    return true;\n  }, [processedData]);\n\n  // Detect actual data type (may differ from requested if server doesn't support format)\n  const isArrow = useMemo(() => {\n    if (!processedData) return isArrowFormat;\n    // Duck type check for Arrow Table\n    return (\n      typeof processedData === \"object\" &&\n      processedData !== null &&\n      \"schema\" in processedData &&\n      \"numRows\" in processedData &&\n      typeof (processedData as Table).getChild === \"function\"\n    );\n  }, [processedData, isArrowFormat]);\n\n  return {\n    data: processedData as ChartData | null,\n    isArrow,\n    loading,\n    error,\n    isEmpty,\n  };\n}\n"],"mappings":";;;;;AAMA,MAAM,kBAAkB;;;;AA6CxB,SAAS,cACP,QACA,YACkB;AAElB,KAAI,WAAW,OAAQ,QAAO;AAC9B,KAAI,WAAW,QAAS,QAAO;AAG/B,KAAI,WAAW,QAAQ;AAErB,MAAI,YAAY,iBAAiB,KAAM,QAAO;AAC9C,MAAI,YAAY,gBAAgB,KAAM,QAAO;EAG7C,MAAM,QAAQ,YAAY;AAC1B,MAAI,OAAO,UAAU,YAAY,QAAQ,gBACvC,QAAO;AAIT,MAAI,YAAY,aAAa,YAAY,QACvC,QAAO;AAGT,SAAO;;AAGT,QAAO;;;;;;;;;;;;;;;;;;;;;AA0BT,SAAgB,aAAa,SAAkD;CAC7E,MAAM,EACJ,UACA,YACA,SAAS,QACT,aACA,SAAS,UACP;CAGJ,MAAM,iBAAiB,cACf,cAAc,QAAQ,WAAW,EACvC,CAAC,QAAQ,WAAW,CACrB;CAED,MAAM,gBAAgB,mBAAmB;CAGzC,MAAM,EACJ,MAAM,SACN,SACA,UACE,kBAAkB,UAAU,YAAY;EAC1C,WAAW;EACX,QAAQ;EACR;EACD,CAAC;CAGF,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,QAAS,QAAO;AAGrB,MAAI,YACF,KAAI;AACF,UAAO,YAAY,QAAQ;WACpB,KAAK;AACZ,WAAQ,MAAM,qCAAqC,IAAI;AACvD,UAAO;;AAIX,SAAO;IACN,CAAC,SAAS,YAAY,CAAC;CAG1B,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAG3B,MACE,OAAO,kBAAkB,YACzB,aAAa,iBACb,OAAQ,cAAwB,YAAY,SAE5C,QAAQ,cAAwB,YAAY;AAI9C,MAAI,MAAM,QAAQ,cAAc,CAC9B,QAAO,cAAc,WAAW;AAGlC,SAAO;IACN,CAAC,cAAc,CAAC;AAenB,QAAO;EACL,MAAM;EACN,SAdc,cAAc;AAC5B,OAAI,CAAC,cAAe,QAAO;AAE3B,UACE,OAAO,kBAAkB,YACzB,kBAAkB,QAClB,YAAY,iBACZ,aAAa,iBACb,OAAQ,cAAwB,aAAa;KAE9C,CAAC,eAAe,cAAc,CAAC;EAKhC;EACA;EACA;EACD"}
+{"version":3,"file":"use-chart-data.js","names":[],"sources":["../../../src/react/hooks/use-chart-data.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\nimport { useMemo } from \"react\";\nimport type { ChartData, DataFormat } from \"../charts/types\";\nimport { useAnalyticsQuery } from \"./use-analytics-query\";\n\n/** Threshold for auto-selecting Arrow format (row count hint) */\nconst ARROW_THRESHOLD = 500;\n\n// ============================================================================\n// Hook Options & Result Types\n// ============================================================================\n\nexport interface UseChartDataOptions {\n  /** Analytics query key */\n  queryKey: string;\n  /** Query parameters */\n  parameters?: Record<string, unknown>;\n  /**\n   * Data format preference\n   * - \"json\": Force JSON format\n   * - \"arrow\": Force Arrow format\n   * - \"auto\": Auto-select based on heuristics\n   * @default \"auto\"\n   */\n  format?: DataFormat;\n  /** Transform data after fetching */\n  transformer?: <T>(data: T) => T;\n}\n\nexport interface UseChartDataResult {\n  /** The fetched data (Arrow Table or JSON array) */\n  data: ChartData | null;\n  /** Whether the data is in Arrow format */\n  isArrow: boolean;\n  /** Loading state */\n  loading: boolean;\n  /** Error message if any */\n  error: string | null;\n  /** Whether the data is empty */\n  isEmpty: boolean;\n}\n\n// ============================================================================\n// Format Resolution\n// ============================================================================\n\n/**\n * Resolves the data format based on hints and preferences\n */\nfunction resolveFormat(\n  format: DataFormat,\n  parameters?: Record<string, unknown>,\n): \"JSON\" | \"ARROW\" {\n  // Explicit format selection\n  if (format === \"json\") return \"JSON\";\n  if (format === \"arrow\") return \"ARROW\";\n\n  // Auto-selection heuristics\n  if (format === \"auto\") {\n    // Check for explicit hint in parameters\n    if (parameters?._preferArrow === true) return \"ARROW\";\n    if (parameters?._preferJson === true) return \"JSON\";\n\n    // Check limit parameter as data size hint\n    const limit = parameters?.limit;\n    if (typeof limit === \"number\" && limit > ARROW_THRESHOLD) {\n      return \"ARROW\";\n    }\n\n    // Check for date range queries (often large)\n    if (parameters?.startDate && parameters?.endDate) {\n      return \"ARROW\";\n    }\n\n    return \"JSON\";\n  }\n\n  return \"JSON\";\n}\n\n// ============================================================================\n// Main Hook\n// ============================================================================\n\n/**\n * Hook for fetching chart data in either JSON or Arrow format.\n * Automatically selects the best format based on query hints.\n *\n * @example\n * ```tsx\n * // Auto-select format\n * const { data, isArrow, loading } = useChartData({\n *   queryKey: \"spend_data\",\n *   parameters: { limit: 1000 }\n * });\n *\n * // Force Arrow format\n * const { data } = useChartData({\n *   queryKey: \"big_query\",\n *   format: \"arrow\"\n * });\n * ```\n */\nexport function useChartData(options: UseChartDataOptions): UseChartDataResult {\n  const { queryKey, parameters, format = \"auto\", transformer } = options;\n\n  // Resolve the format to use\n  const resolvedFormat = useMemo(\n    () => resolveFormat(format, parameters),\n    [format, parameters],\n  );\n\n  const isArrowFormat = resolvedFormat === \"ARROW\";\n\n  // Fetch data using the analytics query hook\n  const {\n    data: rawData,\n    loading,\n    error,\n  } = useAnalyticsQuery(queryKey, parameters, {\n    autoStart: true,\n    format: resolvedFormat,\n  });\n\n  // Process and transform data\n  const processedData = useMemo(() => {\n    if (!rawData) return null;\n\n    // Apply transformer if provided\n    if (transformer) {\n      try {\n        return transformer(rawData);\n      } catch (err) {\n        console.error(\"[useChartData] Transformer error:\", err);\n        return rawData;\n      }\n    }\n\n    return rawData;\n  }, [rawData, transformer]);\n\n  // Determine if data is empty\n  const isEmpty = useMemo(() => {\n    if (!processedData) return true;\n\n    // Arrow Table - check using duck typing\n    if (\n      typeof processedData === \"object\" &&\n      \"numRows\" in processedData &&\n      typeof (processedData as Table).numRows === \"number\"\n    ) {\n      return (processedData as Table).numRows === 0;\n    }\n\n    // JSON Array\n    if (Array.isArray(processedData)) {\n      return processedData.length === 0;\n    }\n\n    return true;\n  }, [processedData]);\n\n  // Detect actual data type (may differ from requested if server doesn't support format)\n  const isArrow = useMemo(() => {\n    if (!processedData) return isArrowFormat;\n    // Duck type check for Arrow Table\n    return (\n      typeof processedData === \"object\" &&\n      processedData !== null &&\n      \"schema\" in processedData &&\n      \"numRows\" in processedData &&\n      typeof (processedData as Table).getChild === \"function\"\n    );\n  }, [processedData, isArrowFormat]);\n\n  return {\n    data: processedData as ChartData | null,\n    isArrow,\n    loading,\n    error,\n    isEmpty,\n  };\n}\n"],"mappings":";;;;;AAMA,MAAM,kBAAkB;;;;AA2CxB,SAAS,cACP,QACA,YACkB;AAElB,KAAI,WAAW,OAAQ,QAAO;AAC9B,KAAI,WAAW,QAAS,QAAO;AAG/B,KAAI,WAAW,QAAQ;AAErB,MAAI,YAAY,iBAAiB,KAAM,QAAO;AAC9C,MAAI,YAAY,gBAAgB,KAAM,QAAO;EAG7C,MAAM,QAAQ,YAAY;AAC1B,MAAI,OAAO,UAAU,YAAY,QAAQ,gBACvC,QAAO;AAIT,MAAI,YAAY,aAAa,YAAY,QACvC,QAAO;AAGT,SAAO;;AAGT,QAAO;;;;;;;;;;;;;;;;;;;;;AA0BT,SAAgB,aAAa,SAAkD;CAC7E,MAAM,EAAE,UAAU,YAAY,SAAS,QAAQ,gBAAgB;CAG/D,MAAM,iBAAiB,cACf,cAAc,QAAQ,WAAW,EACvC,CAAC,QAAQ,WAAW,CACrB;CAED,MAAM,gBAAgB,mBAAmB;CAGzC,MAAM,EACJ,MAAM,SACN,SACA,UACE,kBAAkB,UAAU,YAAY;EAC1C,WAAW;EACX,QAAQ;EACT,CAAC;CAGF,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,QAAS,QAAO;AAGrB,MAAI,YACF,KAAI;AACF,UAAO,YAAY,QAAQ;WACpB,KAAK;AACZ,WAAQ,MAAM,qCAAqC,IAAI;AACvD,UAAO;;AAIX,SAAO;IACN,CAAC,SAAS,YAAY,CAAC;CAG1B,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAG3B,MACE,OAAO,kBAAkB,YACzB,aAAa,iBACb,OAAQ,cAAwB,YAAY,SAE5C,QAAQ,cAAwB,YAAY;AAI9C,MAAI,MAAM,QAAQ,cAAc,CAC9B,QAAO,cAAc,WAAW;AAGlC,SAAO;IACN,CAAC,cAAc,CAAC;AAenB,QAAO;EACL,MAAM;EACN,SAdc,cAAc;AAC5B,OAAI,CAAC,cAAe,QAAO;AAE3B,UACE,OAAO,kBAAkB,YACzB,kBAAkB,QAClB,YAAY,iBACZ,aAAa,iBACb,OAAQ,cAAwB,aAAa;KAE9C,CAAC,eAAe,cAAc,CAAC;EAKhC;EACA;EACA;EACD"}

package/dist/react/table/data-table.d.ts

@@ -5,6 +5,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 /**
  * Production-ready data table with automatic data fetching and state management
+ *
  * Features:
  *  - Automatic column generation from data structure
  *  - Integrated with useAnalyticsQuery for data fetching
@@ -12,9 +13,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  *  - Dynamic filtering, sorting and pagination
  *  - Column visibility controls
  *  - Responsive design
+ *  - Supports opinionated mode (auto columns) and full-control mode (`children(table)`)
+ *
  * @param props - Props for the DataTable component
  * @param props.queryKey - The query key to fetch the data
- * @param props.parameters - The parameters to pass to the query
+ * @param props.parameters - The parameters to pass to the query. Required - use `{}` if none.
  * @param props.filterColumn - The column to filter by
  * @param props.filterPlaceholder - The placeholder for the filter input
  * @param props.children - Optional children for full control mode

package/dist/react/table/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,SAAA,QAAiB,iBAAc,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"data-table.d.ts","names":[],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAsEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,SAAA,QAAiB,iBAAc,kBAAA,CAAA,GAAA,CAAA"}

package/dist/react/table/data-table.js

@@ -12,6 +12,7 @@ import { ChevronDown } from "lucide-react";
 //#region src/react/table/data-table.tsx
 /**
 * Production-ready data table with automatic data fetching and state management
+*
 * Features:
 *  - Automatic column generation from data structure
 *  - Integrated with useAnalyticsQuery for data fetching
@@ -19,9 +20,11 @@ import { ChevronDown } from "lucide-react";
 *  - Dynamic filtering, sorting and pagination
 *  - Column visibility controls
 *  - Responsive design
+*  - Supports opinionated mode (auto columns) and full-control mode (`children(table)`)
+*
 * @param props - Props for the DataTable component
 * @param props.queryKey - The query key to fetch the data
-* @param props.parameters - The parameters to pass to the query
+* @param props.parameters - The parameters to pass to the query. Required - use `{}` if none.
 * @param props.filterColumn - The column to filter by
 * @param props.filterPlaceholder - The placeholder for the filter input
 * @param props.children - Optional children for full control mode

package/dist/react/table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport { ChevronDown } from \"lucide-react\";\nimport { formatFieldLabel } from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { Input } from \"../ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport { TableWrapper } from \"./table-wrapper\";\nimport type { DataTableLabels, DataTableProps } from \"./types\";\n\n/**\n * Production-ready data table with automatic data fetching and state management\n * Features:\n *  - Automatic column generation from data structure\n *  - Integrated with useAnalyticsQuery for data fetching\n *  - Built-in loading, error, and empty states\n *  - Dynamic filtering, sorting and pagination\n *  - Column visibility controls\n *  - Responsive design\n * @param props - Props for the DataTable component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query\n * @param props.filterColumn - The column to filter by\n * @param props.filterPlaceholder - The placeholder for the filter input\n * @param props.children - Optional children for full control mode\n * @returns - The rendered data table component\n *\n * @example\n * // Opinionated mode\n * <DataTable\n *  queryKey=\"users-list\"\n *  parameters={{ status: \"active\" }}\n *  filterColumn=\"email\"\n *  filterPlaceholder=\"Filter by email...\"\n * />\n * @example\n * // full control mode\n * <DataTable queryKey=\"users-list\" parameters={{ status: \"active\" }}>\n *   {(table) => (\n *     <div>\n *       <h2>Custom Table UI</h2>\n *       {table.getRowModel().rows.map(row => (\n *         <div key={row.id}>{row.original.name}</div>\n *       ))}\n *     </div>\n *   )}\n * </DataTable>\n */\nexport function DataTable(props: DataTableProps) {\n  const {\n    parameters,\n    queryKey,\n    filterColumn,\n    filterPlaceholder,\n    transform,\n    labels,\n    ariaLabel,\n    testId,\n    className,\n    enableRowSelection,\n    onRowSelectionChange,\n    children,\n    pageSize = 10,\n    pageSizeOptions = [10, 25, 50, 100],\n  } = props;\n\n  const defaultLabels: Required<DataTableLabels> = {\n    columnsButton: \"Columns\",\n    noResults: \"No results found.\",\n    rowsFound: `\\${count} row(s) found`,\n    previousButton: \"Previous\",\n    nextButton: \"Next\",\n    rowsPerPage: \"Rows per page\",\n    showing: `Showing \\${from} to \\${to} of \\${total}`,\n  };\n\n  const finalLabels = { ...defaultLabels, ...labels };\n\n  return (\n    <TableWrapper\n      queryKey={queryKey}\n      parameters={parameters}\n      ariaLabel={ariaLabel}\n      testId={testId}\n      className={className}\n      transformer={transform}\n      enableRowSelection={enableRowSelection}\n      onRowSelectionChange={onRowSelectionChange}\n      pageSize={pageSize}\n    >\n      {(table) => {\n        if (children) {\n          return children(table);\n        }\n\n        const data = table.options.data;\n\n        const defaultFilterColumn =\n          filterColumn ||\n          (data && data.length > 0\n            ? Object.keys(data[0] as Record<string, any>).find(\n                (key) =>\n                  typeof (data[0] as Record<string, any>)[key] === \"string\",\n              )\n            : null);\n\n        const totalRows = table.getFilteredRowModel().rows.length;\n        const currentPage = table.getState().pagination.pageIndex + 1;\n        const currentPageSize = table.getState().pagination.pageSize;\n        const fromRow =\n          totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;\n        const toRow = Math.min(currentPage * currentPageSize, totalRows);\n\n        return (\n          <div className=\"w-full\">\n            <div className=\"flex items-center py-4 gap-2\">\n              {defaultFilterColumn && (\n                <Input\n                  placeholder={\n                    filterPlaceholder ||\n                    `Filter by ${formatFieldLabel(defaultFilterColumn)}...`\n                  }\n                  value={\n                    (table\n                      .getColumn(defaultFilterColumn)\n                      ?.getFilterValue() as string) ?? \"\"\n                  }\n                  onChange={(event) =>\n                    table\n                      .getColumn(defaultFilterColumn)\n                      ?.setFilterValue(event.target.value)\n                  }\n                  className=\"max-w-sm\"\n                />\n              )}\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                    {finalLabels.columnsButton}{\" \"}\n                    <ChevronDown className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onCheckedChange={(value) =>\n                            column.toggleVisibility(!!value)\n                          }\n                        >\n                          {formatFieldLabel(column.id)}\n                        </DropdownMenuCheckboxItem>\n                      );\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n            <div className=\"overflow-hidden rounded-md border border-border\">\n              <div className=\"max-h-[600px] overflow-y-auto\">\n                <Table>\n                  <TableHeader className=\"sticky top-0 bg-background z-10\">\n                    {table.getHeaderGroups().map((headerGroup) => (\n                      <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                          const isSelectColumn = header.column.id === \"select\";\n                          return (\n                            <TableHead\n                              key={header.id}\n                              style={{\n                                width: header.getSize(),\n                                position: \"relative\",\n                              }}\n                              className={\n                                isSelectColumn ? \"w-[40px] p-0\" : undefined\n                              }\n                            >\n                              {header.isPlaceholder\n                                ? null\n                                : flexRender(\n                                    header.column.columnDef.header,\n                                    header.getContext(),\n                                  )}\n                            </TableHead>\n                          );\n                        })}\n                      </TableRow>\n                    ))}\n                  </TableHeader>\n                  <TableBody>\n                    {table.getRowModel().rows?.length ? (\n                      table.getRowModel().rows.map((row) => (\n                        <TableRow\n                          key={row.id}\n                          data-state={row.getIsSelected() && \"selected\"}\n                        >\n                          {row.getVisibleCells().map((cell) => {\n                            const isSelectColumn = cell.column.id === \"select\";\n                            return (\n                              <TableCell\n                                key={cell.id}\n                                style={{\n                                  width: cell.column.getSize(),\n                                }}\n                                className={\n                                  isSelectColumn ? \"w-[40px] p-0\" : undefined\n                                }\n                              >\n                                {flexRender(\n                                  cell.column.columnDef.cell,\n                                  cell.getContext(),\n                                )}\n                              </TableCell>\n                            );\n                          })}\n                        </TableRow>\n                      ))\n                    ) : (\n                      <TableRow>\n                        <TableCell\n                          colSpan={table.getAllColumns().length}\n                          className=\"h-24 text-center\"\n                        >\n                          {finalLabels.noResults}\n                        </TableCell>\n                      </TableRow>\n                    )}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-between py-4\">\n              <div className=\"flex items-center gap-6\">\n                <div className=\"text-foreground text-sm\">\n                  {totalRows > 0\n                    ? finalLabels.showing\n                        .replace(`\\${from}`, fromRow.toString())\n                        .replace(`\\${to}`, toRow.toString())\n                        .replace(`\\${total}`, totalRows.toString())\n                    : finalLabels.noResults}\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-foreground\">\n                    {finalLabels.rowsPerPage}\n                  </span>\n                  <Select\n                    value={currentPageSize.toString()}\n                    onValueChange={(value) => {\n                      table.setPageSize(Number(value));\n                    }}\n                  >\n                    <SelectTrigger className=\"w-[70px]\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {pageSizeOptions.map((size) => (\n                        <SelectItem key={size} value={size.toString()}>\n                          {size}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n              <div className=\"space-x-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  {finalLabels.previousButton}\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  {finalLabels.nextButton}\n                </Button>\n              </div>\n            </div>\n          </div>\n        );\n      }}\n    </TableWrapper>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport { ChevronDown } from \"lucide-react\";\nimport { formatFieldLabel } from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { Input } from \"../ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport { TableWrapper } from \"./table-wrapper\";\nimport type { DataTableLabels, DataTableProps } from \"./types\";\n\n/**\n * Production-ready data table with automatic data fetching and state management\n *\n * Features:\n *  - Automatic column generation from data structure\n *  - Integrated with useAnalyticsQuery for data fetching\n *  - Built-in loading, error, and empty states\n *  - Dynamic filtering, sorting and pagination\n *  - Column visibility controls\n *  - Responsive design\n *  - Supports opinionated mode (auto columns) and full-control mode (`children(table)`)\n *\n * @param props - Props for the DataTable component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query. Required - use `{}` if none.\n * @param props.filterColumn - The column to filter by\n * @param props.filterPlaceholder - The placeholder for the filter input\n * @param props.children - Optional children for full control mode\n * @returns - The rendered data table component\n *\n * @example\n * // Opinionated mode\n * <DataTable\n *  queryKey=\"users-list\"\n *  parameters={{ status: \"active\" }}\n *  filterColumn=\"email\"\n *  filterPlaceholder=\"Filter by email...\"\n * />\n * @example\n * // full control mode\n * <DataTable queryKey=\"users-list\" parameters={{ status: \"active\" }}>\n *   {(table) => (\n *     <div>\n *       <h2>Custom Table UI</h2>\n *       {table.getRowModel().rows.map(row => (\n *         <div key={row.id}>{row.original.name}</div>\n *       ))}\n *     </div>\n *   )}\n * </DataTable>\n */\nexport function DataTable(props: DataTableProps) {\n  const {\n    parameters,\n    queryKey,\n    filterColumn,\n    filterPlaceholder,\n    transform,\n    labels,\n    ariaLabel,\n    testId,\n    className,\n    enableRowSelection,\n    onRowSelectionChange,\n    children,\n    pageSize = 10,\n    pageSizeOptions = [10, 25, 50, 100],\n  } = props;\n\n  const defaultLabels: Required<DataTableLabels> = {\n    columnsButton: \"Columns\",\n    noResults: \"No results found.\",\n    rowsFound: `\\${count} row(s) found`,\n    previousButton: \"Previous\",\n    nextButton: \"Next\",\n    rowsPerPage: \"Rows per page\",\n    showing: `Showing \\${from} to \\${to} of \\${total}`,\n  };\n\n  const finalLabels = { ...defaultLabels, ...labels };\n\n  return (\n    <TableWrapper\n      queryKey={queryKey}\n      parameters={parameters}\n      ariaLabel={ariaLabel}\n      testId={testId}\n      className={className}\n      transformer={transform}\n      enableRowSelection={enableRowSelection}\n      onRowSelectionChange={onRowSelectionChange}\n      pageSize={pageSize}\n    >\n      {(table) => {\n        if (children) {\n          return children(table);\n        }\n\n        const data = table.options.data;\n\n        const defaultFilterColumn =\n          filterColumn ||\n          (data && data.length > 0\n            ? Object.keys(data[0] as Record<string, any>).find(\n                (key) =>\n                  typeof (data[0] as Record<string, any>)[key] === \"string\",\n              )\n            : null);\n\n        const totalRows = table.getFilteredRowModel().rows.length;\n        const currentPage = table.getState().pagination.pageIndex + 1;\n        const currentPageSize = table.getState().pagination.pageSize;\n        const fromRow =\n          totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;\n        const toRow = Math.min(currentPage * currentPageSize, totalRows);\n\n        return (\n          <div className=\"w-full\">\n            <div className=\"flex items-center py-4 gap-2\">\n              {defaultFilterColumn && (\n                <Input\n                  placeholder={\n                    filterPlaceholder ||\n                    `Filter by ${formatFieldLabel(defaultFilterColumn)}...`\n                  }\n                  value={\n                    (table\n                      .getColumn(defaultFilterColumn)\n                      ?.getFilterValue() as string) ?? \"\"\n                  }\n                  onChange={(event) =>\n                    table\n                      .getColumn(defaultFilterColumn)\n                      ?.setFilterValue(event.target.value)\n                  }\n                  className=\"max-w-sm\"\n                />\n              )}\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                    {finalLabels.columnsButton}{\" \"}\n                    <ChevronDown className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onCheckedChange={(value) =>\n                            column.toggleVisibility(!!value)\n                          }\n                        >\n                          {formatFieldLabel(column.id)}\n                        </DropdownMenuCheckboxItem>\n                      );\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n            <div className=\"overflow-hidden rounded-md border border-border\">\n              <div className=\"max-h-[600px] overflow-y-auto\">\n                <Table>\n                  <TableHeader className=\"sticky top-0 bg-background z-10\">\n                    {table.getHeaderGroups().map((headerGroup) => (\n                      <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                          const isSelectColumn = header.column.id === \"select\";\n                          return (\n                            <TableHead\n                              key={header.id}\n                              style={{\n                                width: header.getSize(),\n                                position: \"relative\",\n                              }}\n                              className={\n                                isSelectColumn ? \"w-[40px] p-0\" : undefined\n                              }\n                            >\n                              {header.isPlaceholder\n                                ? null\n                                : flexRender(\n                                    header.column.columnDef.header,\n                                    header.getContext(),\n                                  )}\n                            </TableHead>\n                          );\n                        })}\n                      </TableRow>\n                    ))}\n                  </TableHeader>\n                  <TableBody>\n                    {table.getRowModel().rows?.length ? (\n                      table.getRowModel().rows.map((row) => (\n                        <TableRow\n                          key={row.id}\n                          data-state={row.getIsSelected() && \"selected\"}\n                        >\n                          {row.getVisibleCells().map((cell) => {\n                            const isSelectColumn = cell.column.id === \"select\";\n                            return (\n                              <TableCell\n                                key={cell.id}\n                                style={{\n                                  width: cell.column.getSize(),\n                                }}\n                                className={\n                                  isSelectColumn ? \"w-[40px] p-0\" : undefined\n                                }\n                              >\n                                {flexRender(\n                                  cell.column.columnDef.cell,\n                                  cell.getContext(),\n                                )}\n                              </TableCell>\n                            );\n                          })}\n                        </TableRow>\n                      ))\n                    ) : (\n                      <TableRow>\n                        <TableCell\n                          colSpan={table.getAllColumns().length}\n                          className=\"h-24 text-center\"\n                        >\n                          {finalLabels.noResults}\n                        </TableCell>\n                      </TableRow>\n                    )}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-between py-4\">\n              <div className=\"flex items-center gap-6\">\n                <div className=\"text-foreground text-sm\">\n                  {totalRows > 0\n                    ? finalLabels.showing\n                        .replace(`\\${from}`, fromRow.toString())\n                        .replace(`\\${to}`, toRow.toString())\n                        .replace(`\\${total}`, totalRows.toString())\n                    : finalLabels.noResults}\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-foreground\">\n                    {finalLabels.rowsPerPage}\n                  </span>\n                  <Select\n                    value={currentPageSize.toString()}\n                    onValueChange={(value) => {\n                      table.setPageSize(Number(value));\n                    }}\n                  >\n                    <SelectTrigger className=\"w-[70px]\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {pageSizeOptions.map((size) => (\n                        <SelectItem key={size} value={size.toString()}>\n                          {size}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n              <div className=\"space-x-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  {finalLabels.previousButton}\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  {finalLabels.nextButton}\n                </Button>\n              </div>\n            </div>\n          </div>\n        );\n      }}\n    </TableWrapper>\n  );\n}\n"],"mappings":"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"}

package/dist/react/table/table-wrapper.js

@@ -29,7 +29,6 @@ const CHECKBOX_COLUMN_WIDTH = 40;
 * @param props.queryKey - The query key to fetch the data
 * @param props.parameters - The parameters to pass to the query
 * @param props.transformer - Optional function to transform raw data before creating table
-* @param props.asUser - Whether to execute the query as a user. Default is false.
 * @param props.children - Render function that receives the TanStack Table instance
 * @param props.className - Optional CSS class name for the wrapper
 * @param props.ariaLabel - Optional accessibility label
@@ -38,12 +37,12 @@ const CHECKBOX_COLUMN_WIDTH = 40;
 * @returns The rendered table with state management
 */
 function TableWrapper(props) {
-	const { queryKey, parameters, transformer, asUser = false, children, className, ariaLabel, testId, enableRowSelection = false, onRowSelectionChange, pageSize = 10 } = props;
+	const { queryKey, parameters, transformer, children, className, ariaLabel, testId, enableRowSelection = false, onRowSelectionChange, pageSize = 10 } = props;
 	const [sorting, setSorting] = useState([]);
 	const [columnFilters, setColumnFilters] = useState([]);
 	const [columnVisibility, setColumnVisibility] = useState({});
 	const [rowSelection, setRowSelection] = useState({});
-	const { data, loading, error } = useAnalyticsQuery(queryKey, parameters, { asUser });
+	const { data, loading, error } = useAnalyticsQuery(queryKey, parameters);
 	useEffect(() => {
 		if (onRowSelectionChange && enableRowSelection) onRowSelectionChange(rowSelection);
 	}, [
@@ -87,11 +86,11 @@ function TableWrapper(props) {
 				id: "select",
 				maxSize: CHECKBOX_COLUMN_WIDTH,
 				minSize: CHECKBOX_COLUMN_WIDTH,
-				header: ({ table: table$1 }) => /* @__PURE__ */ jsx("div", {
+				header: ({ table }) => /* @__PURE__ */ jsx("div", {
 					className: "flex items-center justify-center",
 					children: /* @__PURE__ */ jsx(Checkbox, {
-						checked: table$1.getIsAllPageRowsSelected() || table$1.getIsSomePageRowsSelected() && "indeterminate",
-						onCheckedChange: (value) => table$1.toggleAllPageRowsSelected(!!value),
+						checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+						onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
 						"aria-label": "Select all"
 					})
 				}),

package/dist/react/table/table-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.js","names":["table"],"sources":["../../../src/react/table/table-wrapper.tsx"],"sourcesContent":["import {\n  type Column,\n  type ColumnFiltersState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type Row,\n  type RowSelectionState,\n  type SortingState,\n  type Table,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport { ArrowUpDown } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useAnalyticsQuery } from \"..\";\nimport {\n  formatChartValue,\n  formatFieldLabel,\n  SAFE_KEY_REGEX,\n} from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport { Checkbox } from \"../ui/checkbox\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { TableWrapperProps } from \"./types\";\n\nconst CHECKBOX_COLUMN_WIDTH = 40;\n\n/**\n * Wrapper component for tables with automatic data fetching and state management\n * This component handles:\n * - Data fetching via useAnalyticsQuery\n * - Loading, error, and empty states with proper UI components\n * - Data transformation (optional)\n * - Dynamic column generation from data structure\n * - TanStack Table instance creation with all features (sorting, filtering, pagination, etc.)\n *\n * @template TRaw - The raw data type returned by the analytics query\n * @template TProcessed - The processed data type after transformation\n *\n * @param props - Props for the TableWrapper component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query\n * @param props.transformer - Optional function to transform raw data before creating table\n * @param props.asUser - Whether to execute the query as a user. Default is false.\n * @param props.children - Render function that receives the TanStack Table instance\n * @param props.className - Optional CSS class name for the wrapper\n * @param props.ariaLabel - Optional accessibility label\n * @param props.testId - Optional test ID for testing\n *\n * @returns The rendered table with state management\n */\nexport function TableWrapper<TRaw = any, TProcessed = any>(\n  props: TableWrapperProps<TRaw, TProcessed>,\n) {\n  const {\n    queryKey,\n    parameters,\n    transformer,\n    asUser = false,\n    children,\n    className,\n    ariaLabel,\n    testId,\n    enableRowSelection = false,\n    onRowSelectionChange,\n    pageSize = 10,\n  } = props;\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n  const { data, loading, error } = useAnalyticsQuery<TRaw[]>(\n    queryKey,\n    parameters,\n    { asUser },\n  );\n\n  useEffect(() => {\n    if (onRowSelectionChange && enableRowSelection) {\n      onRowSelectionChange(rowSelection);\n    }\n  }, [rowSelection, onRowSelectionChange, enableRowSelection]);\n\n  const hasData = data && data.length > 0;\n\n  const processedData = hasData\n    ? transformer\n      ? transformer(data)\n      : (data as unknown as TProcessed[])\n    : [];\n\n  const tableColumns = useMemo(() => {\n    if (!hasData) return [];\n\n    if (!processedData[0] || typeof processedData[0] !== \"object\") {\n      console.warn(\"Invalid data format for DataTable\");\n      return [];\n    }\n\n    const dataColumns = Object.keys(processedData[0] as object)\n      .filter((key) => SAFE_KEY_REGEX.test(key))\n      .map((key) => {\n        const formattedLabel = formatFieldLabel(key);\n        return {\n          accessorKey: key,\n          header: ({ column }: { column: Column<TProcessed> }) => {\n            return (\n              <Button\n                variant=\"ghost\"\n                onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n                }\n                className=\"h-8 px-2\"\n              >\n                {formattedLabel}\n                <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n              </Button>\n            );\n          },\n          cell: ({ row }: { row: Row<TProcessed> }) => {\n            const value = row.getValue(key);\n            if (typeof value === \"number\" || Number.isFinite(Number(value))) {\n              return (\n                <div className=\"text-right font-mono\">\n                  {formatChartValue(Number(value), key)}\n                </div>\n              );\n            }\n            return <div>{String(value)}</div>;\n          },\n        };\n      });\n\n    if (enableRowSelection) {\n      return [\n        {\n          id: \"select\",\n          maxSize: CHECKBOX_COLUMN_WIDTH,\n          minSize: CHECKBOX_COLUMN_WIDTH,\n          header: ({ table }: { table: Table<TProcessed> }) => (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox\n                checked={\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && \"indeterminate\")\n                }\n                onCheckedChange={(value) =>\n                  table.toggleAllPageRowsSelected(!!value)\n                }\n                aria-label=\"Select all\"\n              />\n            </div>\n          ),\n          cell: ({ row }: { row: Row<TProcessed> }) => (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox\n                checked={row.getIsSelected()}\n                onCheckedChange={(value) => row.toggleSelected(!!value)}\n                aria-label=\"Select row\"\n              />\n            </div>\n          ),\n          enableSorting: false,\n          enableHiding: false,\n        },\n        ...dataColumns,\n      ];\n    }\n\n    return dataColumns;\n  }, [hasData, processedData, enableRowSelection]);\n\n  const table = useReactTable({\n    data: processedData,\n    columns: tableColumns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n    initialState: {\n      pagination: {\n        pageSize: pageSize,\n      },\n    },\n  });\n\n  if (loading) return <LoadingSkeleton />;\n  if (error)\n    return (\n      <ErrorState error={typeof error === \"string\" ? error : \"Unknown error\"} />\n    );\n\n  if (!hasData) return <EmptyState />;\n\n  return (\n    <section className={className} aria-label={ariaLabel} data-testid={testId}>\n      {children(table)}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA6BA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;AA0B9B,SAAgB,aACd,OACA;CACA,MAAM,EACJ,UACA,YACA,aACA,SAAS,OACT,UACA,WACA,WACA,QACA,qBAAqB,OACrB,sBACA,WAAW,OACT;CAEJ,MAAM,CAAC,SAAS,cAAc,SAAuB,EAAE,CAAC;CACxD,MAAM,CAAC,eAAe,oBAAoB,SAA6B,EAAE,CAAC;CAC1E,MAAM,CAAC,kBAAkB,uBAAuB,SAA0B,EAAE,CAAC;CAC7E,MAAM,CAAC,cAAc,mBAAmB,SAA4B,EAAE,CAAC;CAEvE,MAAM,EAAE,MAAM,SAAS,UAAU,kBAC/B,UACA,YACA,EAAE,QAAQ,CACX;AAED,iBAAgB;AACd,MAAI,wBAAwB,mBAC1B,sBAAqB,aAAa;IAEnC;EAAC;EAAc;EAAsB;EAAmB,CAAC;CAE5D,MAAM,UAAU,QAAQ,KAAK,SAAS;CAEtC,MAAM,gBAAgB,UAClB,cACE,YAAY,KAAK,GAChB,OACH,EAAE;CAmFN,MAAM,QAAQ,cAAc;EAC1B,MAAM;EACN,SAnFmB,cAAc;AACjC,OAAI,CAAC,QAAS,QAAO,EAAE;AAEvB,OAAI,CAAC,cAAc,MAAM,OAAO,cAAc,OAAO,UAAU;AAC7D,YAAQ,KAAK,oCAAoC;AACjD,WAAO,EAAE;;GAGX,MAAM,cAAc,OAAO,KAAK,cAAc,GAAa,CACxD,QAAQ,QAAQ,eAAe,KAAK,IAAI,CAAC,CACzC,KAAK,QAAQ;IACZ,MAAM,iBAAiB,iBAAiB,IAAI;AAC5C,WAAO;KACL,aAAa;KACb,SAAS,EAAE,aAA6C;AACtD,aACE,qBAAC;OACC,SAAQ;OACR,eACE,OAAO,cAAc,OAAO,aAAa,KAAK,MAAM;OAEtD,WAAU;kBAET,gBACD,oBAAC,eAAY,WAAU,iBAAiB;QACjC;;KAGb,OAAO,EAAE,UAAoC;MAC3C,MAAM,QAAQ,IAAI,SAAS,IAAI;AAC/B,UAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,CAC7D,QACE,oBAAC;OAAI,WAAU;iBACZ,iBAAiB,OAAO,MAAM,EAAE,IAAI;QACjC;AAGV,aAAO,oBAAC,mBAAK,OAAO,MAAM,GAAO;;KAEpC;KACD;AAEJ,OAAI,mBACF,QAAO,CACL;IACE,IAAI;IACJ,SAAS;IACT,SAAS;IACT,SAAS,EAAE,qBACT,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SACEA,QAAM,0BAA0B,IAC/BA,QAAM,2BAA2B,IAAI;MAExC,kBAAkB,UAChBA,QAAM,0BAA0B,CAAC,CAAC,MAAM;MAE1C,cAAW;OACX;MACE;IAER,OAAO,EAAE,UACP,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAS,IAAI,eAAe;MAC5B,kBAAkB,UAAU,IAAI,eAAe,CAAC,CAAC,MAAM;MACvD,cAAW;OACX;MACE;IAER,eAAe;IACf,cAAc;IACf,EACD,GAAG,YACJ;AAGH,UAAO;KACN;GAAC;GAAS;GAAe;GAAmB,CAAC;EAK9C,iBAAiB;EACjB,uBAAuB;EACvB,iBAAiB,iBAAiB;EAClC,uBAAuB,uBAAuB;EAC9C,mBAAmB,mBAAmB;EACtC,qBAAqB,qBAAqB;EAC1C,0BAA0B;EAC1B,sBAAsB;EACtB,OAAO;GACL;GACA;GACA;GACA;GACD;EACD,cAAc,EACZ,YAAY,EACA,UACX,EACF;EACF,CAAC;AAEF,KAAI,QAAS,QAAO,oBAAC,oBAAkB;AACvC,KAAI,MACF,QACE,oBAAC,cAAW,OAAO,OAAO,UAAU,WAAW,QAAQ,kBAAmB;AAG9E,KAAI,CAAC,QAAS,QAAO,oBAAC,eAAa;AAEnC,QACE,oBAAC;EAAmB;EAAW,cAAY;EAAW,eAAa;YAChE,SAAS,MAAM;GACR"}
+{"version":3,"file":"table-wrapper.js","names":[],"sources":["../../../src/react/table/table-wrapper.tsx"],"sourcesContent":["import {\n  type Column,\n  type ColumnFiltersState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type Row,\n  type RowSelectionState,\n  type SortingState,\n  type Table,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport { ArrowUpDown } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useAnalyticsQuery } from \"..\";\nimport {\n  formatChartValue,\n  formatFieldLabel,\n  SAFE_KEY_REGEX,\n} from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport { Checkbox } from \"../ui/checkbox\";\nimport { EmptyState } from \"./empty\";\nimport { ErrorState } from \"./error\";\nimport { LoadingSkeleton } from \"./loading\";\nimport type { TableWrapperProps } from \"./types\";\n\nconst CHECKBOX_COLUMN_WIDTH = 40;\n\n/**\n * Wrapper component for tables with automatic data fetching and state management\n * This component handles:\n * - Data fetching via useAnalyticsQuery\n * - Loading, error, and empty states with proper UI components\n * - Data transformation (optional)\n * - Dynamic column generation from data structure\n * - TanStack Table instance creation with all features (sorting, filtering, pagination, etc.)\n *\n * @template TRaw - The raw data type returned by the analytics query\n * @template TProcessed - The processed data type after transformation\n *\n * @param props - Props for the TableWrapper component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query\n * @param props.transformer - Optional function to transform raw data before creating table\n * @param props.children - Render function that receives the TanStack Table instance\n * @param props.className - Optional CSS class name for the wrapper\n * @param props.ariaLabel - Optional accessibility label\n * @param props.testId - Optional test ID for testing\n *\n * @returns The rendered table with state management\n */\nexport function TableWrapper<TRaw = any, TProcessed = any>(\n  props: TableWrapperProps<TRaw, TProcessed>,\n) {\n  const {\n    queryKey,\n    parameters,\n    transformer,\n    children,\n    className,\n    ariaLabel,\n    testId,\n    enableRowSelection = false,\n    onRowSelectionChange,\n    pageSize = 10,\n  } = props;\n\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n  const { data, loading, error } = useAnalyticsQuery<TRaw[]>(\n    queryKey,\n    parameters,\n  );\n\n  useEffect(() => {\n    if (onRowSelectionChange && enableRowSelection) {\n      onRowSelectionChange(rowSelection);\n    }\n  }, [rowSelection, onRowSelectionChange, enableRowSelection]);\n\n  const hasData = data && data.length > 0;\n\n  const processedData = hasData\n    ? transformer\n      ? transformer(data)\n      : (data as unknown as TProcessed[])\n    : [];\n\n  const tableColumns = useMemo(() => {\n    if (!hasData) return [];\n\n    if (!processedData[0] || typeof processedData[0] !== \"object\") {\n      console.warn(\"Invalid data format for DataTable\");\n      return [];\n    }\n\n    const dataColumns = Object.keys(processedData[0] as object)\n      .filter((key) => SAFE_KEY_REGEX.test(key))\n      .map((key) => {\n        const formattedLabel = formatFieldLabel(key);\n        return {\n          accessorKey: key,\n          header: ({ column }: { column: Column<TProcessed> }) => {\n            return (\n              <Button\n                variant=\"ghost\"\n                onClick={() =>\n                  column.toggleSorting(column.getIsSorted() === \"asc\")\n                }\n                className=\"h-8 px-2\"\n              >\n                {formattedLabel}\n                <ArrowUpDown className=\"ml-2 h-4 w-4\" />\n              </Button>\n            );\n          },\n          cell: ({ row }: { row: Row<TProcessed> }) => {\n            const value = row.getValue(key);\n            if (typeof value === \"number\" || Number.isFinite(Number(value))) {\n              return (\n                <div className=\"text-right font-mono\">\n                  {formatChartValue(Number(value), key)}\n                </div>\n              );\n            }\n            return <div>{String(value)}</div>;\n          },\n        };\n      });\n\n    if (enableRowSelection) {\n      return [\n        {\n          id: \"select\",\n          maxSize: CHECKBOX_COLUMN_WIDTH,\n          minSize: CHECKBOX_COLUMN_WIDTH,\n          header: ({ table }: { table: Table<TProcessed> }) => (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox\n                checked={\n                  table.getIsAllPageRowsSelected() ||\n                  (table.getIsSomePageRowsSelected() && \"indeterminate\")\n                }\n                onCheckedChange={(value) =>\n                  table.toggleAllPageRowsSelected(!!value)\n                }\n                aria-label=\"Select all\"\n              />\n            </div>\n          ),\n          cell: ({ row }: { row: Row<TProcessed> }) => (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox\n                checked={row.getIsSelected()}\n                onCheckedChange={(value) => row.toggleSelected(!!value)}\n                aria-label=\"Select row\"\n              />\n            </div>\n          ),\n          enableSorting: false,\n          enableHiding: false,\n        },\n        ...dataColumns,\n      ];\n    }\n\n    return dataColumns;\n  }, [hasData, processedData, enableRowSelection]);\n\n  const table = useReactTable({\n    data: processedData,\n    columns: tableColumns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n    initialState: {\n      pagination: {\n        pageSize: pageSize,\n      },\n    },\n  });\n\n  if (loading) return <LoadingSkeleton />;\n  if (error)\n    return (\n      <ErrorState error={typeof error === \"string\" ? error : \"Unknown error\"} />\n    );\n\n  if (!hasData) return <EmptyState />;\n\n  return (\n    <section className={className} aria-label={ariaLabel} data-testid={testId}>\n      {children(table)}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/react/table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/table/types.ts"],"sourcesContent":[],"mappings":";;;;;UAiCiB,cAAA;;;;cAIH;;;;;;;;WAQH;;;;;;;;;;wCAU6B;;qBAEnB,eAAe,KAAA,CAAM;;;;;;;UAQzB,eAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/table/types.ts"],"sourcesContent":[],"mappings":";;;;;UA+BiB,cAAA;;;;cAIH;;;;;;;;WAQH;;;;;;;;;;wCAU6B;;qBAEnB,eAAe,KAAA,CAAM;;;;;;;UAQzB,eAAA"}

package/dist/react/ui/accordion.d.ts

@@ -1,25 +1,29 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
 //#region src/react/ui/accordion.d.ts
+/** Collapsible content sections organized in a vertical stack */
 declare function Accordion({
   ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime4.JSX.Element;
+}: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime5.JSX.Element;
+/** Individual collapsible section within an accordion */
 declare function AccordionItem({
   className,
   ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime4.JSX.Element;
+}: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime5.JSX.Element;
+/** Clickable button that triggers accordion content visibility */
 declare function AccordionTrigger({
   className,
   children,
   ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime4.JSX.Element;
+}: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime5.JSX.Element;
+/** Content area that expands and collapses within an accordion item */
 declare function AccordionContent({
   className,
   children,
   ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime4.JSX.Element;
+}: React$1.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 //# sourceMappingURL=accordion.d.ts.map

package/dist/react/ui/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../../src/react/ui/accordion.tsx"],"sourcesContent":[],"mappings":";;;;;iBAMS,SAAA;;GAEN,OAAA,CAAM,sBAAsB,kBAAA,CAAmB,QAAK,kBAAA,CAAA,GAAA,CAAA;iBAI9C,aAAA;;;GAGN,OAAA,CAAM,sBAAsB,kBAAA,CAAmB,QAAK,kBAAA,CAAA,GAAA,CAAA;iBAU9C,gBAAA;;;;GAIN,OAAA,CAAM,sBAAsB,kBAAA,CAAmB,WAAQ,kBAAA,CAAA,GAAA,CAAA;AA5BM,iBA8CvD,gBAAA,CAzCS;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EA6Cf,OAAA,CAAM,cA7CS,CAAA,OA6Ca,kBAAA,CAAmB,OA7ChC,CAAA,CAAA,EA6CwC,kBAAA,CAAA,GAAA,CAAA,OA7CxC"}
+{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../../src/react/ui/accordion.tsx"],"sourcesContent":[],"mappings":";;;;;;iBAOS,SAAA;;GAEN,OAAA,CAAM,sBAAsB,kBAAA,CAAmB,QAAK,kBAAA,CAAA,GAAA,CAAA;;AARS,iBAavD,aAAA,CAPS;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAUf,OAAA,CAAM,cAVS,CAAA,OAUa,kBAAA,CAAmB,IAVhC,CAAA,CAAA,EAUqC,kBAAA,CAAA,GAAA,CAAA,OAVrC;;iBAqBT,gBAAA,CAnByC;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAuB/C,OAAA,CAAM,cAvByC,CAAA,OAuBnB,kBAAA,CAAmB,OAvBA,CAAA,CAAA,EAuBQ,kBAAA,CAAA,GAAA,CAAA,OAvBR;;iBA0CzC,gBAAA,CA1C8C;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EA8CpD,OAAA,CAAM,cA9C8C,CAAA,OA8CxB,kBAAA,CAAmB,OA9CK,CAAA,CAAA,EA8CG,kBAAA,CAAA,GAAA,CAAA,OA9CH"}

package/dist/react/ui/accordion.js

@@ -4,12 +4,14 @@ import { ChevronDownIcon } from "lucide-react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
 //#region src/react/ui/accordion.tsx
+/** Collapsible content sections organized in a vertical stack */
 function Accordion({ ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
 		"data-slot": "accordion",
 		...props
 	});
 }
+/** Individual collapsible section within an accordion */
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 		"data-slot": "accordion-item",
@@ -17,6 +19,7 @@ function AccordionItem({ className, ...props }) {
 		...props
 	});
 }
+/** Clickable button that triggers accordion content visibility */
 function AccordionTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 		className: "flex",
@@ -28,6 +31,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		})
 	});
 }
+/** Content area that expands and collapses within an accordion item */
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-content",

package/dist/react/ui/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../../src/react/ui/accordion.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;AAMA,SAAS,UAAU,EACjB,GAAG,SACoD;AACvD,QAAO,oBAAC,mBAAmB;EAAK,aAAU;EAAY,GAAI;GAAS;;AAGrE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,WAAW,GAAG,4BAA4B,UAAU;EACpD,GAAI;GACJ;;AAIN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;AAC1D,QACE,oBAAC,mBAAmB;EAAO,WAAU;YACnC,qBAAC,mBAAmB;GAClB,aAAU;GACV,WAAW,GACT,8SACA,UACD;GACD,GAAI;cAEH,UACD,oBAAC,mBAAgB,WAAU,gHAAgH;IAChH;GACH;;AAIhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;AAC1D,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,WAAU;EACV,GAAI;YAEJ,oBAAC;GAAI,WAAW,GAAG,aAAa,UAAU;GAAG;IAAe;GACjC"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../../../src/react/ui/accordion.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Collapsible content sections organized in a vertical stack */\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\n/** Individual collapsible section within an accordion */\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Clickable button that triggers accordion content visibility */\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\n/** Content area that expands and collapses within an accordion item */\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;;AAOA,SAAS,UAAU,EACjB,GAAG,SACoD;AACvD,QAAO,oBAAC,mBAAmB;EAAK,aAAU;EAAY,GAAI;GAAS;;;AAIrE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,WAAW,GAAG,4BAA4B,UAAU;EACpD,GAAI;GACJ;;;AAKN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;AAC1D,QACE,oBAAC,mBAAmB;EAAO,WAAU;YACnC,qBAAC,mBAAmB;GAClB,aAAU;GACV,WAAW,GACT,8SACA,UACD;GACD,GAAI;cAEH,UACD,oBAAC,mBAAgB,WAAU,gHAAgH;IAChH;GACH;;;AAKhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;AAC1D,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,WAAU;EACV,GAAI;YAEJ,oBAAC;GAAI,WAAW,GAAG,aAAa,UAAU;GAAG;IAAe;GACjC"}

package/dist/react/ui/alert-dialog.d.ts

@@ -1,50 +1,61 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 //#region src/react/ui/alert-dialog.d.ts
+/** Modal dialog that interrupts the user with critical information requiring immediate action */
 declare function AlertDialog({
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Root>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Root>): react_jsx_runtime12.JSX.Element;
+/** Button that triggers the alert dialog to open */
 declare function AlertDialogTrigger({
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Trigger>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Trigger>): react_jsx_runtime12.JSX.Element;
+/** Portal container for rendering alert dialog content outside the DOM hierarchy */
 declare function AlertDialogPortal({
   container,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Portal>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Portal>): react_jsx_runtime12.JSX.Element;
+/** Background overlay that dims content behind the alert dialog */
 declare function AlertDialogOverlay({
   className,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Overlay>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Overlay>): react_jsx_runtime12.JSX.Element;
+/** Main content container for the alert dialog */
 declare function AlertDialogContent({
   className,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Content>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Content>): react_jsx_runtime12.JSX.Element;
+/** Header section containing title and description */
 declare function AlertDialogHeader({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime12.JSX.Element;
+/** Footer section containing action buttons */
 declare function AlertDialogFooter({
   className,
   ...props
-}: React$1.ComponentProps<"div">): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<"div">): react_jsx_runtime12.JSX.Element;
+/** Title heading for the alert dialog */
 declare function AlertDialogTitle({
   className,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Title>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Title>): react_jsx_runtime12.JSX.Element;
+/** Descriptive text explaining the alert */
 declare function AlertDialogDescription({
   className,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Description>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Description>): react_jsx_runtime12.JSX.Element;
+/** Primary action button that confirms the alert */
 declare function AlertDialogAction({
   className,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Action>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Action>): react_jsx_runtime12.JSX.Element;
+/** Cancel button that dismisses the alert dialog */
 declare function AlertDialogCancel({
   className,
   ...props
-}: React$1.ComponentProps<typeof AlertDialogPrimitive.Cancel>): react_jsx_runtime11.JSX.Element;
+}: React$1.ComponentProps<typeof AlertDialogPrimitive.Cancel>): react_jsx_runtime12.JSX.Element;
 //#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
 //# sourceMappingURL=alert-dialog.d.ts.map

package/dist/react/ui/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../../src/react/ui/alert-dialog.tsx"],"sourcesContent":[],"mappings":";;;;;iBAOS,WAAA;;GAEN,OAAA,CAAM,sBAAsB,oBAAA,CAAqB,QAAK,mBAAA,CAAA,GAAA,CAAA;iBAIhD,kBAAA;;GAEN,OAAA,CAAM,sBAAsB,oBAAA,CAAqB,WAAQ,mBAAA,CAAA,GAAA,CAAA;iBAMnD,iBAAA;;;GAGN,OAAA,CAAM,sBAAsB,oBAAA,CAAqB,UAAO,mBAAA,CAAA,GAAA,CAAA;AAvBU,iBAiC5D,kBAAA,CA3BW;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA8BjB,OAAA,CAAM,cA9BW,CAAA,OA8BW,oBAAA,CAAqB,OA9BhC,CAAA,CAAA,EA8BwC,mBAAA,CAAA,GAAA,CAAA,OA9BxC;iBA2CX,kBAAA,CA3CW;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA8CjB,OAAA,CAAM,cA9CW,CAAA,OA8CW,oBAAA,CAAqB,OA9ChC,CAAA,CAAA,EA8CwC,mBAAA,CAAA,GAAA,CAAA,OA9CxC;iBA8DX,iBAAA,CA5D2C;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA+DjD,OAAA,CAAM,cA/D2C,CAAA,KAAA,CAAA,CAAA,EA+DtB,mBAAA,CAAA,GAAA,CAAA,OA/DsB;iBAyE3C,iBAAA,CAzEA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA4EN,OAAA,CAAM,cA5EA,CAAA,KAAA,CAAA,CAAA,EA4EqB,mBAAA,CAAA,GAAA,CAAA,OA5ErB;iBAyFA,gBAAA,CAzFgD;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA4FtD,OAAA,CAAM,cA5FgD,CAAA,OA4F1B,oBAAA,CAAqB,KA5FK,CAAA,CAAA,EA4FC,mBAAA,CAAA,GAAA,CAAA,OA5FD;iBAsGhD,sBAAA,CAtGgD;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyGtD,OAAA,CAAM,cAzGgD,CAAA,OAyG1B,oBAAA,CAAqB,WAzGK,CAAA,CAAA,EAyGO,mBAAA,CAAA,GAAA,CAAA,OAzGP;AAAA,iBAmHhD,iBAAA,CA/GkB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkHxB,OAAA,CAAM,cAlHkB,CAAA,OAkHI,oBAAA,CAAqB,MAlHzB,CAAA,CAAA,EAkHgC,mBAAA,CAAA,GAAA,CAAA,OAlHhC;iBA2HlB,iBAAA,CA3HkB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA8HxB,OAAA,CAAM,cA9HkB,CAAA,OA8HI,oBAAA,CAAqB,MA9HzB,CAAA,CAAA,EA8HgC,mBAAA,CAAA,GAAA,CAAA,OA9HhC"}
+{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../../src/react/ui/alert-dialog.tsx"],"sourcesContent":[],"mappings":";;;;;;iBAQS,WAAA;;GAEN,OAAA,CAAM,sBAAsB,oBAAA,CAAqB,QAAK,mBAAA,CAAA,GAAA,CAAA;;AATY,iBAc5D,kBAAA,CAPW;EAAA,GAAA;AAAA,CAAA,EASjB,OAAA,CAAM,cATW,CAAA,OASW,oBAAA,CAAqB,OAThC,CAAA,CAAA,EASwC,mBAAA,CAAA,GAAA,CAAA,OATxC;;iBAgBX,iBAAA,CAd2C;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAiBjD,OAAA,CAAM,cAjB2C,CAAA,OAiBrB,oBAAA,CAAqB,MAjBA,CAAA,CAAA,EAiBO,mBAAA,CAAA,GAAA,CAAA,OAjBP;;iBA4B3C,kBAAA,CA5BgD;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA+BtD,OAAA,CAAM,cA/BgD,CAAA,OA+B1B,oBAAA,CAAqB,OA/BK,CAAA,CAAA,EA+BG,mBAAA,CAAA,GAAA,CAAA,OA/BH;;AAAA,iBA6ChD,kBAAA,CAxCkB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA2CxB,OAAA,CAAM,cA3CkB,CAAA,OA2CI,oBAAA,CAAqB,OA3CzB,CAAA,CAAA,EA2CiC,mBAAA,CAAA,GAAA,CAAA,OA3CjC;;iBA4DlB,iBAAA,CA1D2C;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6DjD,OAAA,CAAM,cA7D2C,CAAA,KAAA,CAAA,CAAA,EA6DtB,mBAAA,CAAA,GAAA,CAAA,OA7DsB;;iBAwE3C,iBAAA,CAxEmD;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA2EzD,OAAA,CAAM,cA3EmD,CAAA,KAAA,CAAA,CAAA,EA2E9B,mBAAA,CAAA,GAAA,CAAA,OA3E8B;;AAAA,iBAyFnD,gBAAA,CAlFiB;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAqFvB,OAAA,CAAM,cArFiB,CAAA,OAqFK,oBAAA,CAAqB,KArF1B,CAAA,CAAA,EAqFgC,mBAAA,CAAA,GAAA,CAAA,OArFhC;;iBAgGjB,sBAAA,CA/FP;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkGC,OAAA,CAAM,cAlGP,CAAA,OAkG6B,oBAAA,CAAqB,WAlGlD,CAAA,CAAA,EAkG8D,mBAAA,CAAA,GAAA,CAAA,OAlG9D;;iBA6GO,iBAAA,CA3GA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA8GN,OAAA,CAAM,cA9GA,CAAA,OA8GsB,oBAAA,CAAqB,MA9G3C,CAAA,CAAA,EA8GkD,mBAAA,CAAA,GAAA,CAAA,OA9GlD;;iBAwHA,iBAAA,CAxHkD;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA2HxD,OAAA,CAAM,cA3HkD,CAAA,OA2H5B,oBAAA,CAAqB,MA3HO,CAAA,CAAA,EA2HA,mBAAA,CAAA,GAAA,CAAA,OA3HA"}