@schandlergarcia/sf-web-components 1.8.0 → 1.9.0

package/src/components/library/chat/useChatState.tsx

@@ -0,0 +1,181 @@
+import { useState, useCallback, useRef } from "react";
+import { ToolCall } from "./ChatToolCall";
+
+let _nextId = 1;
+function uid(): string {
+  return `msg-${Date.now()}-${_nextId++}`;
+}
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content?: string;
+  timestamp: string;
+  components?: unknown[];
+  toolCalls?: ToolCall[];
+  isError?: boolean;
+  isStreaming?: boolean;
+}
+
+export interface ChatStateHelpers {
+  addMessage: (msg: Partial<ChatMessage>) => string;
+  updateMessage: (id: string, updates: Partial<ChatMessage>) => void;
+  appendChunk: (id: string, chunk: string) => void;
+  setStreaming: (streaming: boolean) => void;
+}
+
+export interface UseChatStateOptions {
+  initialMessages?: Partial<ChatMessage>[];
+  onSend?: (
+    userMessage: ChatMessage,
+    allMessages: ChatMessage[],
+    helpers: ChatStateHelpers
+  ) => Promise<Partial<ChatMessage> | void>;
+}
+
+export interface UseChatStateReturn {
+  messages: ChatMessage[];
+  isLoading: boolean;
+  isStreaming: boolean;
+  error: string | null;
+  sendMessage: (content: string, extra?: Partial<ChatMessage>) => Promise<void>;
+  addMessage: (msg: Partial<ChatMessage>) => string;
+  updateMessage: (id: string, updates: Partial<ChatMessage>) => void;
+  appendChunk: (id: string, chunk: string) => void;
+  removeMessage: (id: string) => void;
+  clearMessages: () => void;
+  retryLast: () => void;
+  setError: (error: string | null) => void;
+}
+
+/**
+ * Core state management hook for AI chat.
+ *
+ * @example
+ * const chat = useChatState({
+ *   onSend: async (msg, history) => {
+ *     const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages: history }) });
+ *     const data = await res.json();
+ *     return { role: "assistant", content: data.reply, components: data.components };
+ *   },
+ * });
+ */
+export default function useChatState({ initialMessages = [], onSend }: UseChatStateOptions = {}): UseChatStateReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>(() =>
+    initialMessages.map((m) => ({
+      id: uid(),
+      timestamp: new Date().toISOString(),
+      role: m.role || "user",
+      ...m
+    } as ChatMessage))
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const onSendRef = useRef(onSend);
+  onSendRef.current = onSend;
+
+  const addMessage = useCallback((msg: Partial<ChatMessage>): string => {
+    const full: ChatMessage = {
+      id: uid(),
+      timestamp: new Date().toISOString(),
+      role: msg.role || "assistant",
+      ...msg
+    } as ChatMessage;
+    setMessages((prev) => [...prev, full]);
+    return full.id;
+  }, []);
+
+  const updateMessage = useCallback((id: string, updates: Partial<ChatMessage>) => {
+    setMessages((prev) =>
+      prev.map((m) => (m.id === id ? { ...m, ...updates } : m))
+    );
+  }, []);
+
+  const appendChunk = useCallback((id: string, chunk: string) => {
+    setMessages((prev) =>
+      prev.map((m) =>
+        m.id === id ? { ...m, content: (m.content ?? "") + chunk } : m
+      )
+    );
+  }, []);
+
+  const removeMessage = useCallback((id: string) => {
+    setMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+
+  const sendMessage = useCallback(
+    async (content: string, extra: Partial<ChatMessage> = {}) => {
+      if (!content?.trim()) return;
+      setError(null);
+
+      const userMsg: ChatMessage = {
+        role: "user",
+        content: content.trim(),
+        ...extra,
+        id: uid(),
+        timestamp: new Date().toISOString()
+      } as ChatMessage;
+
+      setMessages((prev) => [...prev, userMsg]);
+      setIsLoading(true);
+
+      try {
+        const allMsgs = [...messages, userMsg];
+        const result = await onSendRef.current?.(userMsg, allMsgs, {
+          addMessage,
+          updateMessage,
+          appendChunk,
+          setStreaming: setIsStreaming,
+        });
+
+        if (result && typeof result === "object" && result.role) {
+          addMessage(result);
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to send message";
+        setError(errorMessage);
+        addMessage({
+          role: "system",
+          content: err instanceof Error ? err.message : "Something went wrong. Please try again.",
+          isError: true,
+        });
+      } finally {
+        setIsLoading(false);
+        setIsStreaming(false);
+      }
+    },
+    [messages, addMessage, updateMessage, appendChunk]
+  );
+
+  const retryLast = useCallback(() => {
+    const lastUser = [...messages].reverse().find((m) => m.role === "user");
+    if (!lastUser) return;
+
+    const idx = messages.lastIndexOf(lastUser);
+    setMessages(messages.slice(0, idx));
+    setError(null);
+
+    sendMessage(lastUser.content || "");
+  }, [messages, sendMessage]);
+
+  return {
+    messages,
+    isLoading,
+    isStreaming,
+    error,
+    sendMessage,
+    addMessage,
+    updateMessage,
+    appendChunk,
+    removeMessage,
+    clearMessages,
+    retryLast,
+    setError,
+  };
+}

package/src/components/library/data/{DataModeProvider.jsx → DataModeProvider.tsx}

@@ -1,6 +1,16 @@
 import React from "react";
 
-const DataModeContext = React.createContext({
+export type DataMode = "sample" | "live";
+
+export interface DataModeContextValue {
+  mode: DataMode;
+  isSample: boolean;
+  isLive: boolean;
+  toggle: () => void;
+  setMode: (mode: DataMode) => void;
+}
+
+const DataModeContext = React.createContext<DataModeContextValue>({
   mode: "sample",
   isSample: true,
   isLive: false,
@@ -9,30 +19,37 @@ const DataModeContext = React.createContext({
 });
 
 const STORAGE_KEY = "app-data-mode";
-const VALID_MODES = ["sample", "live"];
+const VALID_MODES: DataMode[] = ["sample", "live"];
 
 /**
  * Read the current data mode from any component.
  *
  * @returns {{ mode: "sample"|"live", isSample: boolean, isLive: boolean, toggle: () => void, setMode: (mode) => void }}
  */
-export function useDataMode() {
+export function useDataMode(): DataModeContextValue {
   return React.useContext(DataModeContext);
 }
 
+export interface DataModeProviderProps {
+  initialMode?: DataMode;
+  children: React.ReactNode;
+}
+
 /**
  * Provides global data-mode state (sample vs live) to the component tree.
  * Persists to localStorage so the choice survives page reloads.
  *
  * Wrap once in _app.js alongside AppThemeProvider.
  */
-export default function DataModeProvider({ initialMode = "sample", children }) {
-  const [mode, setModeState] = React.useState(initialMode);
+export default function DataModeProvider({ initialMode = "sample", children }: DataModeProviderProps) {
+  const [mode, setModeState] = React.useState<DataMode>(initialMode);
 
   React.useEffect(() => {
     try {
       const stored = window.localStorage.getItem(STORAGE_KEY);
-      if (VALID_MODES.includes(stored)) setModeState(stored);
+      if (stored && VALID_MODES.includes(stored as DataMode)) {
+        setModeState(stored as DataMode);
+      }
     } catch {
       // SSR or storage unavailable
     }
@@ -46,11 +63,11 @@ export default function DataModeProvider({ initialMode = "sample", children }) {
     }
   }, [mode]);
 
-  const setMode = React.useCallback((m) => {
+  const setMode = React.useCallback((m: DataMode) => {
     if (VALID_MODES.includes(m)) setModeState(m);
   }, []);
 
-  const value = React.useMemo(
+  const value = React.useMemo<DataModeContextValue>(
     () => ({
       mode,
       isSample: mode === "sample",

package/src/components/library/data/{DataModeToggle.jsx → DataModeToggle.tsx}

@@ -1,12 +1,15 @@
-import React from "react";
 import { useDataMode } from "./DataModeProvider";
 import { BeakerIcon, SignalIcon } from "@heroicons/react/24/outline";
 
+export interface DataModeToggleProps {
+  className?: string;
+}
+
 /**
  * Pill toggle for switching between sample and live data modes.
  * Place in the AppShell header next to the theme toggle.
  */
-export default function DataModeToggle({ className = "" }) {
+export default function DataModeToggle({ className = "" }: DataModeToggleProps) {
   const { mode, toggle } = useDataMode();
   const isSample = mode === "sample";
 

package/src/components/library/data/{chartDataProvider.jsx → chartDataProvider.tsx}

@@ -1,7 +1,52 @@
 // Minimal semantic data provider (seed data + lookup helpers).
 // This is intentionally local/in-memory for now; later we can swap to API-backed providers.
 
-const SEMANTIC_DATASETS = {
+export type ChangeType = "positive" | "negative" | "neutral";
+export type MetricColor = "primary" | "success" | "warning" | "danger";
+export type ColumnType = "currency" | "percentage" | "number" | "text";
+
+export interface SemanticMetric {
+  metricId: string;
+  title: string;
+  subtitle: string;
+  value: string;
+  change?: string;
+  changeType?: ChangeType;
+  color?: MetricColor;
+  trend?: string;
+}
+
+export interface TableColumn {
+  key: string;
+  label: string;
+  type?: ColumnType;
+  sortable?: boolean;
+  mono?: boolean;
+}
+
+export interface TableRow {
+  id: number;
+  [key: string]: any;
+}
+
+export interface SemanticTable {
+  title: string;
+  subtitle: string;
+  columns: TableColumn[];
+  rows: TableRow[];
+}
+
+export interface SemanticDataset {
+  title: string;
+  metrics?: SemanticMetric[];
+  table?: SemanticTable;
+}
+
+export interface SemanticDatasets {
+  [key: string]: SemanticDataset;
+}
+
+const SEMANTIC_DATASETS: SemanticDatasets = {
   sales_pipeline_qtr: {
     title: "Sales Pipeline (Quarter)",
     metrics: [
@@ -44,18 +89,17 @@ const SEMANTIC_DATASETS = {
   }
 };
 
-export function listSemanticIds() {
+export function listSemanticIds(): string[] {
   return Object.keys(SEMANTIC_DATASETS);
 }
 
-export function getSemanticDataset(semanticId) {
+export function getSemanticDataset(semanticId: string): SemanticDataset | null {
   if (!semanticId) return null;
   return SEMANTIC_DATASETS[semanticId] ?? null;
 }
 
-export function getSemanticMetric(semanticId, metricId) {
+export function getSemanticMetric(semanticId: string, metricId: string): SemanticMetric | null {
   const ds = getSemanticDataset(semanticId);
   if (!ds?.metrics) return null;
   return ds.metrics.find((m) => m.metricId === metricId) ?? null;
 }
-

package/src/components/library/data/{filterUtils.jsx → filterUtils.tsx}

@@ -3,6 +3,52 @@
  * Stateless — combine with usePageFilters hook for state management.
  */
 
+export type SortDirection = "asc" | "desc";
+
+export interface DateRange {
+  start?: Date | string;
+  end?: Date | string;
+}
+
+export type FilterType = "search" | "select" | "toggle" | "dateRange";
+
+export interface BaseFilterDefinition {
+  id: string;
+  type: FilterType;
+  defaultValue?: any;
+}
+
+export interface SearchFilterDefinition extends BaseFilterDefinition {
+  type: "search";
+  keys: string[];
+}
+
+export interface SelectFilterDefinition extends BaseFilterDefinition {
+  type: "select";
+  key: string;
+}
+
+export interface ToggleFilterDefinition extends BaseFilterDefinition {
+  type: "toggle";
+  key: string;
+  matchValue?: any;
+}
+
+export interface DateRangeFilterDefinition extends BaseFilterDefinition {
+  type: "dateRange";
+  key: string;
+}
+
+export type FilterDefinition =
+  | SearchFilterDefinition
+  | SelectFilterDefinition
+  | ToggleFilterDefinition
+  | DateRangeFilterDefinition;
+
+export interface FilterValues {
+  [key: string]: any;
+}
+
 /**
  * Text search across multiple keys.
  * @param {Array} data
@@ -10,12 +56,12 @@
  * @param {string[]} keys — object keys to search within
  * @returns {Array} filtered data
  */
-export function filterBySearch(data, query, keys = []) {
+export function filterBySearch<T>(data: T[], query: string, keys: string[] = []): T[] {
   if (!query || !query.trim()) return data;
   const q = query.trim().toLowerCase();
   return data.filter((row) =>
     keys.some((key) => {
-      const val = row?.[key];
+      const val = (row as any)?.[key];
       return val != null && String(val).toLowerCase().includes(q);
     })
   );
@@ -29,10 +75,10 @@ export function filterBySearch(data, query, keys = []) {
  * @param {*} value — value to match (exact, case-insensitive for strings)
  * @returns {Array}
  */
-export function filterByValue(data, key, value) {
+export function filterByValue<T>(data: T[], key: string, value: any): T[] {
   if (value == null || value === "" || value === "all") return data;
   return data.filter((row) => {
-    const v = row?.[key];
+    const v = (row as any)?.[key];
     if (typeof v === "string" && typeof value === "string") {
       return v.toLowerCase() === value.toLowerCase();
     }
@@ -49,10 +95,10 @@ export function filterByValue(data, key, value) {
  * @param {*} matchValue — value that key should equal when active (default: truthy check)
  * @returns {Array}
  */
-export function filterByToggle(data, key, isActive, matchValue) {
+export function filterByToggle<T>(data: T[], key: string, isActive: boolean, matchValue?: any): T[] {
   if (!isActive) return data;
   return data.filter((row) => {
-    const v = row?.[key];
+    const v = (row as any)?.[key];
     if (matchValue !== undefined) return v === matchValue;
     return Boolean(v);
   });
@@ -65,14 +111,14 @@ export function filterByToggle(data, key, isActive, matchValue) {
  * @param {{ start?: Date|string, end?: Date|string }} range
  * @returns {Array}
  */
-export function filterByDateRange(data, key, range) {
+export function filterByDateRange<T>(data: T[], key: string, range: DateRange | null): T[] {
   if (!range) return data;
   const start = range.start ? new Date(range.start) : null;
   const end = range.end ? new Date(range.end) : null;
   if (!start && !end) return data;
 
   return data.filter((row) => {
-    const raw = row?.[key];
+    const raw = (row as any)?.[key];
     if (raw == null) return false;
     const d = raw instanceof Date ? raw : new Date(raw);
     if (Number.isNaN(d.getTime())) return false;
@@ -89,12 +135,12 @@ export function filterByDateRange(data, key, range) {
  * @param {"asc"|"desc"} direction
  * @returns {Array} new sorted array
  */
-export function sortByKey(data, key, direction = "asc") {
+export function sortByKey<T>(data: T[], key: string, direction: SortDirection = "asc"): T[] {
   if (!key) return data;
   const dir = direction === "desc" ? -1 : 1;
   return [...data].sort((a, b) => {
-    const av = a?.[key];
-    const bv = b?.[key];
+    const av = (a as any)?.[key];
+    const bv = (b as any)?.[key];
     if (av == null && bv == null) return 0;
     if (av == null) return -1 * dir;
     if (bv == null) return 1 * dir;
@@ -112,7 +158,7 @@ export function sortByKey(data, key, direction = "asc") {
  * @param {Object} values — current filter values keyed by filter id
  * @returns {Array} filtered data
  */
-export function applyFilters(data, filters = [], values = {}) {
+export function applyFilters<T>(data: T[], filters: FilterDefinition[] = [], values: FilterValues = {}): T[] {
   let result = data;
 
   for (const filter of filters) {

package/src/components/library/data/{useDataSource.jsx → useDataSource.tsx}

@@ -1,6 +1,13 @@
 import { useMemo } from "react";
 import { useDataMode } from "./DataModeProvider";
 
+export type DataSourceValue<T> = T | (() => T);
+
+export interface UseDataSourceOptions<T> {
+  sample: DataSourceValue<T>;
+  live: DataSourceValue<T>;
+}
+
 /**
  * Select between sample and live data based on the global data mode.
  *
@@ -23,11 +30,11 @@ import { useDataMode } from "./DataModeProvider";
  *   live: () => computeFromAPI(apiData),
  * });
  */
-export default function useDataSource({ sample, live }) {
+export default function useDataSource<T>({ sample, live }: UseDataSourceOptions<T>): T {
   const { mode } = useDataMode();
 
   return useMemo(() => {
     const source = mode === "sample" ? sample : live;
-    return typeof source === "function" ? source() : source;
+    return typeof source === "function" ? (source as () => T)() : source;
   }, [mode, sample, live]);
 }

package/src/components/library/data/{usePageFilters.jsx → usePageFilters.tsx}

@@ -1,5 +1,41 @@
 import { useState, useMemo, useCallback } from "react";
-import { applyFilters, sortByKey } from "./filterUtils";
+import { applyFilters, sortByKey, FilterDefinition } from "./filterUtils";
+
+export type SortDirection = "asc" | "desc";
+
+export interface SortState {
+  key: string;
+  direction: SortDirection;
+}
+
+export interface DateRange {
+  start?: Date | string;
+  end?: Date | string;
+}
+
+export type FilterValue = string | boolean | DateRange | null;
+
+export interface FilterValues {
+  [key: string]: FilterValue;
+}
+
+export interface UsePageFiltersOptions<T> {
+  data?: T[];
+  filters?: FilterDefinition[];
+  defaultSort?: SortState | null;
+}
+
+export interface UsePageFiltersReturn<T> {
+  values: FilterValues;
+  setFilter: (id: string, value: FilterValue) => void;
+  resetFilters: () => void;
+  sort: SortState | null;
+  setSort: (key: string | null, direction?: SortDirection) => void;
+  toggleSort: (key: string) => void;
+  filteredData: T[];
+  sortedData: T[];
+  activeFilterCount: number;
+}
 
 /**
  * Hook for managing page-level filter and sort state.
@@ -21,9 +57,13 @@ import { applyFilters, sortByKey } from "./filterUtils";
  *   defaultSort: { key: "timestamp", direction: "desc" },
  * });
  */
-export default function usePageFilters({ data = [], filters = [], defaultSort = null } = {}) {
+export default function usePageFilters<T = any>({
+  data = [],
+  filters = [],
+  defaultSort = null,
+}: UsePageFiltersOptions<T> = {}): UsePageFiltersReturn<T> {
   const initialValues = useMemo(() => {
-    const v = {};
+    const v: FilterValues = {};
     for (const f of filters) {
       if (f.defaultValue !== undefined) {
         v[f.id] = f.defaultValue;
@@ -40,10 +80,10 @@ export default function usePageFilters({ data = [], filters = [], defaultSort =
     return v;
   }, [filters]);
 
-  const [values, setValues] = useState(initialValues);
-  const [sort, setSortState] = useState(defaultSort);
+  const [values, setValues] = useState<FilterValues>(initialValues);
+  const [sort, setSortState] = useState<SortState | null>(defaultSort);
 
-  const setFilter = useCallback((id, value) => {
+  const setFilter = useCallback((id: string, value: FilterValue) => {
     setValues((prev) => ({ ...prev, [id]: value }));
   }, []);
 
@@ -51,11 +91,11 @@ export default function usePageFilters({ data = [], filters = [], defaultSort =
     setValues(initialValues);
   }, [initialValues]);
 
-  const setSort = useCallback((key, direction) => {
+  const setSort = useCallback((key: string | null, direction?: SortDirection) => {
     setSortState(key ? { key, direction: direction ?? "asc" } : null);
   }, []);
 
-  const toggleSort = useCallback((key) => {
+  const toggleSort = useCallback((key: string) => {
     setSortState((prev) => {
       if (prev?.key !== key) return { key, direction: "asc" };
       if (prev.direction === "asc") return { key, direction: "desc" };
@@ -77,7 +117,7 @@ export default function usePageFilters({ data = [], filters = [], defaultSort =
     let count = 0;
     for (const f of filters) {
       const v = values[f.id];
-      if (f.type === "search" && v && v.trim()) count++;
+      if (f.type === "search" && v && typeof v === "string" && v.trim()) count++;
       else if (f.type === "select" && v && v !== "all") count++;
       else if (f.type === "toggle" && v) count++;
       else if (f.type === "dateRange" && v) count++;

package/src/components/library/{index.jsx → index.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export { default as AppThemeProvider, useThemeMode } from "./theme/AppThemeProvider";
 
@@ -105,21 +105,21 @@ export { default as HeroUISeparator, Separator } from "./heroui/Separator";
 export { default as HeroUIPagination, Pagination } from "./heroui/Pagination";
 
 // Breadcrumb subcomponents for shadcn compatibility
-export const Breadcrumb = ({ children, ...props }) => React.createElement('nav', { 'aria-label': 'breadcrumb', ...props }, children);
-export const BreadcrumbList = ({ children, ...props }) => React.createElement('ol', { className: 'flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400', ...props }, children);
-export const BreadcrumbItem = ({ children, ...props }) => React.createElement('li', { className: 'inline-flex items-center gap-1.5', ...props }, children);
-export const BreadcrumbLink = ({ href, children, asChild, ...props }) => asChild ? React.createElement('span', props, children) : React.createElement('a', { href, className: 'transition-colors hover:text-slate-900 dark:hover:text-slate-50', ...props }, children);
-export const BreadcrumbPage = ({ children, ...props }) => React.createElement('span', { role: 'link', 'aria-disabled': 'true', 'aria-current': 'page', className: 'font-normal text-slate-900 dark:text-slate-50', ...props }, children);
-export const BreadcrumbSeparator = ({ children, ...props }) => React.createElement('li', { role: 'presentation', 'aria-hidden': 'true', ...props }, children ?? '/');
-export const BreadcrumbEllipsis = (props) => React.createElement('span', { role: 'presentation', 'aria-hidden': 'true', ...props }, '...');
+export const Breadcrumb = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('nav', { 'aria-label': 'breadcrumb', ...props }, children);
+export const BreadcrumbList = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('ol', { className: 'flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400', ...props }, children);
+export const BreadcrumbItem = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', { className: 'inline-flex items-center gap-1.5', ...props }, children);
+export const BreadcrumbLink = ({ href, children, asChild, ...props }: { href?: string; children?: React.ReactNode; asChild?: boolean; [key: string]: any }) => asChild ? React.createElement('span', props, children) : React.createElement('a', { href, className: 'transition-colors hover:text-slate-900 dark:hover:text-slate-50', ...props }, children);
+export const BreadcrumbPage = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('span', { role: 'link', 'aria-disabled': 'true', 'aria-current': 'page', className: 'font-normal text-slate-900 dark:text-slate-50', ...props }, children);
+export const BreadcrumbSeparator = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', { role: 'presentation', 'aria-hidden': 'true', ...props }, children ?? '/');
+export const BreadcrumbEllipsis = (props: { [key: string]: any }) => React.createElement('span', { role: 'presentation', 'aria-hidden': 'true', ...props }, '...');
 
 // Pagination subcomponents for shadcn compatibility
-export const PaginationContent = ({ children, ...props }) => React.createElement('ul', { className: 'flex flex-row items-center gap-1', ...props }, children);
-export const PaginationItem = ({ children, ...props }) => React.createElement('li', props, children);
-export const PaginationLink = ({ href, isActive, children, ...props }) => React.createElement('a', { href, 'aria-current': isActive ? 'page' : undefined, className: `inline-flex items-center justify-center rounded-md text-sm font-medium h-9 min-w-9 px-4 py-2 ${isActive ? 'bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`, ...props }, children);
-export const PaginationPrevious = ({ href, ...props }) => React.createElement(PaginationLink, { href, ...props }, 'Previous');
-export const PaginationNext = ({ href, ...props }) => React.createElement(PaginationLink, { href, ...props }, 'Next');
-export const PaginationEllipsis = (props) => React.createElement('span', { 'aria-hidden': true, ...props }, '...');
+export const PaginationContent = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('ul', { className: 'flex flex-row items-center gap-1', ...props }, children);
+export const PaginationItem = ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => React.createElement('li', props, children);
+export const PaginationLink = ({ href, isActive, children, ...props }: { href?: string; isActive?: boolean; children?: React.ReactNode; [key: string]: any }) => React.createElement('a', { href, 'aria-current': isActive ? 'page' : undefined, className: `inline-flex items-center justify-center rounded-md text-sm font-medium h-9 min-w-9 px-4 py-2 ${isActive ? 'bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900' : 'hover:bg-slate-100 dark:hover:bg-slate-800'}`, ...props }, children);
+export const PaginationPrevious = ({ href, ...props }: { href?: string; [key: string]: any }) => React.createElement(PaginationLink, { href, ...props }, 'Previous');
+export const PaginationNext = ({ href, ...props }: { href?: string; [key: string]: any }) => React.createElement(PaginationLink, { href, ...props }, 'Next');
+export const PaginationEllipsis = (props: { [key: string]: any }) => React.createElement('span', { 'aria-hidden': true, ...props }, '...');
 
 // HeroUI wrappers — overlays
 export { default as HeroUIDrawer } from "./heroui/Drawer";

package/src/components/library/skeletons/{CardSkeleton.jsx → CardSkeleton.tsx}

@@ -1,6 +1,9 @@
-import React from "react";
+export interface CardSkeletonProps {
+  lines?: number;
+  className?: string;
+}
 
-export default function CardSkeleton({ lines = 3, className = "" }) {
+export default function CardSkeleton({ lines = 3, className = "" }: CardSkeletonProps) {
   return (
     <div
       className={[
@@ -26,5 +29,3 @@ export default function CardSkeleton({ lines = 3, className = "" }) {
     </div>
   );
 }
-
-