@schandlergarcia/sf-web-components 1.2.6 → 1.2.7

package/src/components/library/heroui/ProgressCircle.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { ProgressCircle } from "@heroui/react";
+
+export default function HeroUIProgressCircle({ children, ...props }) {
+  return <ProgressCircle {...props}>{children}</ProgressCircle>;
+}
+
+export { ProgressCircle };

package/src/components/library/heroui/ScrollShadow.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { ScrollShadow } from "@heroui/react";
+
+export default function HeroUIScrollShadow({ children, ...props }) {
+  return <ScrollShadow {...props}>{children}</ScrollShadow>;
+}
+
+export { ScrollShadow };

package/src/components/library/heroui/Select.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Select as HeroSelect } from "@heroui/react";
+
+/**
+ * HeroUI v3 Select wrapper with shadcn compatibility.
+ *
+ * Translates shadcn API to HeroUI:
+ * - onValueChange -> onSelectionChange
+ * - value -> selectedKeys
+ */
+export default function HeroUISelect({ value, onValueChange, children, ...props }) {
+  // Translate shadcn API to HeroUI API
+  const selectedKeys = value ? [value] : [];
+  const handleSelectionChange = (keys) => {
+    const selected = Array.from(keys)[0];
+    onValueChange?.(selected || "");
+  };
+
+  return (
+    <HeroSelect
+      selectedKeys={selectedKeys}
+      onSelectionChange={handleSelectionChange}
+      {...props}
+    >
+      {children}
+    </HeroSelect>
+  );
+}
+
+// For direct HeroUI usage
+export const Select = HeroUISelect;
+
+// Shadcn-compatible subcomponents that just pass through children
+export const SelectTrigger = ({ children, size, ...props }) => <>{children}</>;
+export const SelectValue = ({ placeholder, ...props }) => <span {...props}>{placeholder}</span>;
+export const SelectContent = ({ children, ...props }) => <>{children}</>;
+export const SelectItem = ({ value, children, ...props }) => <HeroSelect.Item key={value} {...props}>{children}</HeroSelect.Item>;

package/src/components/library/heroui/Separator.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Separator } from "@heroui/react";
+
+export default function HeroUISeparator(props) {
+  return <Separator {...props} />;
+}
+
+export { Separator };

package/src/components/library/heroui/Skeleton.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Skeleton } from "@heroui/react";
+
+export default function HeroUISkeleton({ children, ...props }) {
+  return <Skeleton {...props}>{children}</Skeleton>;
+}
+
+export { Skeleton };

package/src/components/library/heroui/Tabs.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Tabs } from "@heroui/react";
+
+/**
+ * HeroUI v3 Tabs — compound component.
+ *
+ * Sub-components via dot notation on the named `Tabs` export:
+ *   Tabs.List, Tabs.ListContainer, Tabs.Tab, Tabs.Panel,
+ *   Tabs.Separator, Tabs.Indicator
+ *
+ * @example
+ *   import { Tabs } from "@/components/library";
+ *   <Tabs>
+ *     <Tabs.List aria-label="Options">
+ *       <Tabs.Tab id="overview">Overview</Tabs.Tab>
+ *       <Tabs.Tab id="analytics">Analytics</Tabs.Tab>
+ *     </Tabs.List>
+ *     <Tabs.Panel id="overview">…</Tabs.Panel>
+ *     <Tabs.Panel id="analytics">…</Tabs.Panel>
+ *   </Tabs>
+ */
+export default function HeroUITabs({ variant = "primary", ...props }) {
+  return <Tabs variant={variant} {...props} />;
+}
+
+export { Tabs };

package/src/components/library/heroui/Toast.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Toast, toast } from "@heroui/react";
+
+/**
+ * HeroUI v3 Toast — notification system.
+ *
+ * SETUP: Add <Toast.Provider /> to your app root (_app.js).
+ *
+ * Then call the `toast` function from anywhere:
+ *   toast("Event created");
+ *   toast.success("Saved!");
+ *   toast.warning("Check settings");
+ *   toast.danger("Something failed");
+ *   toast.promise(asyncFn(), { loading: "…", success: "Done", error: "Failed" });
+ *
+ * Sub-components via dot notation on the named `Toast` export:
+ *   Toast.Provider, Toast.Indicator, Toast.Content,
+ *   Toast.Title, Toast.Description, Toast.ActionButton,
+ *   Toast.CloseButton
+ */
+export default function HeroUIToast(props) {
+  return <Toast {...props} />;
+}
+
+export { Toast, toast };

package/src/components/library/heroui/Toggle.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Switch } from "@heroui/react";
+import { useThemeMode } from "../theme/AppThemeProvider";
+
+export default function HeroUIToggle({ label = "Dark mode", ...props }) {
+  const { mode, toggle } = useThemeMode();
+  const isSelected = mode === "dark";
+
+  return (
+    <Switch isSelected={isSelected} onChange={toggle} {...props}>
+      <Switch.Content>{label}</Switch.Content>
+    </Switch>
+  );
+}

package/src/components/library/heroui/Tooltip.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Tooltip } from "@heroui/react";
+
+/**
+ * HeroUI v3 Tooltip — compound component.
+ *
+ * Sub-components via dot notation on the named `Tooltip` export:
+ *   Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow
+ *
+ * @example
+ *   import { Tooltip } from "@/components/library";
+ *   <Tooltip>
+ *     <Tooltip.Trigger><Button>Hover me</Button></Tooltip.Trigger>
+ *     <Tooltip.Content>Helpful info</Tooltip.Content>
+ *   </Tooltip>
+ */
+export default function HeroUITooltip(props) {
+  return <Tooltip {...props} />;
+}
+
+export { Tooltip };

package/src/components/library/index.jsx

@@ -0,0 +1,149 @@
+import React from 'react';
+
+export { default as AppThemeProvider, useThemeMode } from "./theme/AppThemeProvider";
+
+// UI primitives
+export { default as UIButton } from "./ui/UIButton";
+export { default as UIInput } from "./ui/UIInput";
+export { default as UIText } from "./ui/Text";
+export { default as UIContainer } from "./ui/Container";
+export { default as UIChip } from "./ui/Chip";
+export { default as Avatar } from "./ui/Avatar";
+export { default as EmptyState } from "./ui/EmptyState";
+export { default as Spinner } from "./ui/Spinner";
+export { default as Label } from "./ui/Label";
+export { default as Checkbox } from "./ui/Checkbox";
+export { default as FieldGroup } from "./ui/FieldGroup";
+
+// shadcn-compatible Card with subcomponents
+export { default as UICard, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/Card";
+
+// shadcn-compatible Alert with subcomponents
+export { default as Alert, AlertTitle, AlertDescription, AlertAction } from "./ui/Alert";
+
+// shadcn-compatible components from heroui/ (HeroUI-based)
+export { default as HeroUIDialog, Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "./heroui/Dialog";
+export { default as HeroUIField, Field, FieldLabel, FieldDescription, FieldError } from "./heroui/Field";
+export { default as HeroUICollapsible, Collapsible, CollapsibleTrigger, CollapsibleContent } from "./heroui/Collapsible";
+export { default as HeroUIPopover, Popover, PopoverTrigger, PopoverContent } from "./heroui/Popover";
+export { default as HeroUIDatePicker, DatePicker, DatePickerTrigger, DatePickerContent, DatePickerCalendar, DatePickerRangeTrigger } from "./heroui/DatePicker";
+
+// Cards
+export { default as BaseCard } from "./cards/BaseCard";
+export { default as ChartCard } from "./cards/ChartCard";
+export { default as ListCard } from "./cards/ListCard";
+export { default as MetricCard } from "./cards/MetricCard";
+export { default as SectionCard } from "./cards/SectionCard";
+export { default as StatusCard } from "./cards/StatusCard";
+export { default as TableCard } from "./cards/TableCard";
+export { default as WidgetCard } from "./cards/WidgetCard";
+export { default as FeedPanel } from "./cards/FeedPanel";
+export { default as ActivityCard } from "./cards/ActivityCard";
+export { default as MetricsStrip } from "./cards/MetricsStrip";
+export { default as CalloutCard } from "./cards/CalloutCard";
+export { default as ActionList } from "./cards/ActionList";
+
+// Charts
+export { default as D3Chart } from "./charts/D3Chart";
+export { D3ChartTemplates } from "./charts/D3ChartTemplates";
+export { default as GeoMap } from "./charts/GeoMap";
+
+// Layout
+export { default as PageContainer } from "./layout/PageContainer";
+
+// Skeletons
+export { default as CardSkeleton } from "./skeletons/CardSkeleton";
+
+// Forms
+export { FormModal, FormRenderer, FormSection, FormField, useFormState } from "./forms";
+
+// Filters
+export { FilterBar, SearchFilter, SelectFilter, ToggleFilter } from "./filters";
+
+// Data mode
+export { default as DataModeProvider, useDataMode } from "./data/DataModeProvider";
+export { default as DataModeToggle } from "./data/DataModeToggle";
+export { default as useDataSource } from "./data/useDataSource";
+
+// Data utilities
+export { default as usePageFilters } from "./data/usePageFilters";
+export {
+  filterBySearch,
+  filterByValue,
+  filterByToggle,
+  filterByDateRange,
+  sortByKey,
+  applyFilters,
+} from "./data/filterUtils";
+
+// Chat / AI agent
+export {
+  ChatPanel,
+  ChatBar,
+  ChatMessageList,
+  ChatMessage,
+  ChatInput,
+  ChatTypingIndicator,
+  ChatSuggestions,
+  ChatToolCall,
+  ChatWelcome,
+  useChatState,
+} from "./chat";
+
+// HeroUI wrappers — existing
+export { default as HeroUIButton, Button } from "./heroui/Button";
+export { default as HeroUIInput } from "./heroui/Input";
+export { default as HeroUICard } from "./heroui/Card";
+export { default as HeroUIToggle } from "./heroui/Toggle";
+
+// HeroUI wrappers — navigation & layout
+export { default as HeroUITabs } from "./heroui/Tabs";
+export { default as HeroUIAccordion } from "./heroui/Accordion";
+export { default as HeroUIBreadcrumbs, Breadcrumbs } from "./heroui/Breadcrumbs";
+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 }, '...');
+
+// 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 }, '...');
+
+// HeroUI wrappers — overlays
+export { default as HeroUIDrawer } from "./heroui/Drawer";
+export { default as HeroUIModal } from "./heroui/Modal";
+export { default as HeroUIDropdown } from "./heroui/Dropdown";
+export { default as HeroUITooltip } from "./heroui/Tooltip";
+export { default as HeroUIToast } from "./heroui/Toast";
+
+// HeroUI wrappers — feedback
+export { default as HeroUIAlert } from "./heroui/Alert";
+export { default as HeroUIBadge } from "./heroui/Badge";
+export { default as HeroUIProgressBar } from "./heroui/ProgressBar";
+export { default as HeroUIProgressCircle } from "./heroui/ProgressCircle";
+export { default as HeroUIMeter } from "./heroui/Meter";
+export { default as HeroUISkeleton, Skeleton } from "./heroui/Skeleton";
+
+// HeroUI wrappers — pickers & forms
+export { default as HeroUISelect, Select } from "./heroui/Select";
+
+// Re-export Select subcomponents for shadcn compatibility
+export const SelectTrigger = ({ children, size, ...props }) => React.createElement('button', props, children);
+export const SelectValue = ({ placeholder, ...props }) => React.createElement('span', props, placeholder);
+export const SelectContent = ({ children, ...props }) => React.createElement('div', props, children);
+export const SelectItem = ({ children, ...props }) => React.createElement('div', props, children);
+
+// HeroUI wrappers — utilities
+export { default as HeroUIKbd, Kbd } from "./heroui/Kbd";
+export { default as HeroUIScrollShadow, ScrollShadow } from "./heroui/ScrollShadow";

package/src/components/library/layout/PageContainer.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function PageContainer({ className = "", children }) {
+  return (
+    <div className={["mx-auto w-full max-w-6xl px-4 sm:px-6", className].filter(Boolean).join(" ")}>
+      {children}
+    </div>
+  );
+}
+
+

package/src/components/library/skeletons/CardSkeleton.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function CardSkeleton({ lines = 3, className = "" }) {
+  return (
+    <div
+      className={[
+        "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      aria-busy="true"
+      aria-label="Loading"
+    >
+      <div className="space-y-3">
+        {Array.from({ length: lines }).map((_, i) => (
+          <div
+            key={i}
+            className={[
+              "h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-800",
+              i === 0 ? "w-1/3" : i === 1 ? "w-2/3" : "w-1/2"
+            ].join(" ")}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+

package/src/components/library/theme/AppThemeProvider.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { tokens, getTokenCSSProperties } from "./tokens";
+
+const ThemeModeContext = React.createContext({
+  mode: "light",
+  theme: tokens,
+  toggle: () => {}
+});
+
+const STORAGE_KEY = "app-color-mode";
+
+function applyHtmlDarkClass(mode) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (mode === "dark") root.classList.add("dark");
+  else root.classList.remove("dark");
+}
+
+function applyTokenCSSProperties() {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const props = getTokenCSSProperties();
+  for (const [key, value] of Object.entries(props)) {
+    root.style.setProperty(key, value);
+  }
+}
+
+export function useThemeMode() {
+  return React.useContext(ThemeModeContext);
+}
+
+export default function AppThemeProvider({ initialMode = "light", children }) {
+  const [mode, setMode] = React.useState(initialMode);
+
+  React.useEffect(() => {
+    applyTokenCSSProperties();
+  }, []);
+
+  React.useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      if (stored === "light" || stored === "dark") setMode(stored);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  React.useEffect(() => {
+    applyHtmlDarkClass(mode);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, mode);
+    } catch {
+      // ignore
+    }
+  }, [mode]);
+
+  const value = React.useMemo(
+    () => ({
+      mode,
+      theme: tokens,
+      toggle: () => setMode((m) => (m === "dark" ? "light" : "dark"))
+    }),
+    [mode]
+  );
+
+  return <ThemeModeContext.Provider value={value}>{children}</ThemeModeContext.Provider>;
+}

package/src/components/library/theme/tokens.jsx

@@ -0,0 +1,72 @@
+/**
+ * Design tokens — single source of truth for branding.
+ *
+ * To rebrand a command center:
+ *   1. Swap the `brand` palette (use any Tailwind-style color scale)
+ *   2. Swap the `accent` palette
+ *   3. Change `fonts.sans` in _app.js (next/font import)
+ *
+ * AppThemeProvider injects these as CSS custom properties on :root,
+ * and tailwind.config.js references them via var(--color-brand-*).
+ */
+
+export const tokens = {
+  colors: {
+    brand: {
+      50: "#EEF2FF",
+      100: "#E0E7FF",
+      200: "#C7D2FE",
+      300: "#A5B4FC",
+      400: "#818CF8",
+      500: "#6366F1",
+      600: "#4F46E5",
+      700: "#4338CA",
+      800: "#3730A3",
+      900: "#312E81",
+      950: "#1E1B4E",
+    },
+    accent: {
+      50: "#ECFEFF",
+      100: "#CFFAFE",
+      200: "#A5F3FC",
+      300: "#67E8F9",
+      400: "#22D3EE",
+      500: "#06B6D4",
+      600: "#0891B2",
+      700: "#0E7490",
+      800: "#155E75",
+      900: "#164E63",
+      950: "#083344",
+    },
+  },
+
+  fonts: {
+    sans: "Inter",
+    mono: "JetBrains Mono",
+  },
+
+  radius: {
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+  },
+
+  spacing: {
+    pageX: "1.25rem",
+    pageY: "1.25rem",
+  },
+};
+
+/**
+ * Generates CSS custom property assignments from the token palettes.
+ * Used by AppThemeProvider to inject on :root at runtime.
+ */
+export function getTokenCSSProperties() {
+  const props = {};
+  for (const [palette, shades] of Object.entries(tokens.colors)) {
+    for (const [shade, value] of Object.entries(shades)) {
+      props[`--color-${palette}-${shade}`] = value;
+    }
+  }
+  return props;
+}

package/src/components/library/ui/Alert.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+const VARIANT_CLASSES = {
+  default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50",
+  info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-50",
+  success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950 dark:border-green-800 dark:text-green-50",
+  warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50",
+  error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50",
+  destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50"
+};
+
+export default function Alert({ variant = "default", className = "", children, ...rest }) {
+  const variantClasses = VARIANT_CLASSES[variant] || VARIANT_CLASSES.default;
+
+  return (
+    <div
+      role="alert"
+      className={[
+        "rounded-lg border p-4",
+        variantClasses,
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AlertTitle({ className = "", children, ...rest }) {
+  return (
+    <h5
+      className={[
+        "mb-1 font-medium leading-none tracking-tight",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </h5>
+  );
+}
+
+export function AlertDescription({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "text-sm opacity-90",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AlertAction({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "mt-3",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { Alert };

package/src/components/library/ui/Avatar.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const SIZE_MAP = {
+  xs: "h-6 w-6 text-[9px]",
+  sm: "h-8 w-8 text-[10px]",
+  md: "h-9 w-9 text-xs",
+  lg: "h-11 w-11 text-sm",
+};
+
+const TONE_MAP = {
+  slate:   "bg-slate-800 text-white",
+  brand:   "bg-brand-500 text-white",
+  neutral: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200",
+};
+
+export default function Avatar({ src, name, initials, icon, size = "sm", tone = "slate", className = "", ...rest }) {
+  const sizeClass = SIZE_MAP[size] ?? SIZE_MAP.sm;
+
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={name ?? ""}
+        className={`${sizeClass} shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800 ${className}`}
+        {...rest}
+      />
+    );
+  }
+
+  if (React.isValidElement(icon)) {
+    return (
+      <div className={`${sizeClass} ${TONE_MAP[tone] ?? TONE_MAP.slate} flex shrink-0 items-center justify-center rounded-full ${className}`} {...rest}>
+        {icon}
+      </div>
+    );
+  }
+
+  const label = initials ?? (name ? name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() : "?");
+  return (
+    <div className={`${sizeClass} ${TONE_MAP[tone] ?? TONE_MAP.slate} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`} {...rest}>
+      {label}
+    </div>
+  );
+}