@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

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>
+  );
+}

package/src/components/library/ui/BreadcrumbExtras.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+// Shadcn-style Breadcrumb subcomponents to work with HeroUI Breadcrumbs
+
+function Breadcrumb({ className, children, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav aria-label="breadcrumb" className={className} {...props}>
+      {children}
+    </nav>
+  );
+}
+
+function BreadcrumbList({ className, children, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      className={[
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </ol>
+  );
+}
+
+function BreadcrumbItem({ className, children, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={[
+        "inline-flex items-center gap-1.5",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </li>
+  );
+}
+
+function BreadcrumbLink({ className, href, children, ...props }: React.ComponentProps<typeof Link>) {
+  return (
+    <Link
+      to={href || "#"}
+      className={[
+        "transition-colors hover:text-slate-900 dark:hover:text-slate-50",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}
+
+function BreadcrumbPage({ className, children, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={[
+        "font-normal text-slate-900 dark:text-slate-50",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      className={[
+        "select-none",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children ?? "/"}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={[
+        "flex h-9 w-9 items-center justify-center",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z"
+          fill="currentColor"
+        />
+      </svg>
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,61 @@
+import React from "react";
+
+const VARIANT_CLASSES = {
+  primary:
+    "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
+  secondary:
+    "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
+  destructive:
+    "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
+  outline:
+    "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
+  ghost:
+    "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent"
+};
+
+const SIZE_CLASSES = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-5 text-base",
+  icon: "h-10 w-10 p-0"
+};
+
+export default function UIButton({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  onClick = () => {},
+  children,
+  style = undefined,
+  className = "",
+  ...rest
+}) {
+  const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.primary;
+  const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      style={style}
+      className={[
+        "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
+        "disabled:cursor-not-allowed disabled:opacity-60",
+        variantClass,
+        sizeClass,
+        fullWidth ? "w-full" : "",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+

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

@@ -0,0 +1,117 @@
+import React from "react";
+
+export default function UICard({ children, padding = "p-5", style, className = "", ...rest }) {
+  return (
+    <div
+      style={style}
+      className={[
+        "rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900",
+        padding,
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+// shadcn-compatible Card components
+export function Card({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "flex flex-col space-y-1.5 p-6",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({ className = "", children, ...rest }) {
+  return (
+    <h3
+      className={[
+        "text-2xl font-semibold leading-none tracking-tight",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </h3>
+  );
+}
+
+export function CardDescription({ className = "", children, ...rest }) {
+  return (
+    <p
+      className={[
+        "text-sm text-slate-500 dark:text-slate-400",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </p>
+  );
+}
+
+export function CardContent({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "p-6 pt-0",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "flex items-center p-6 pt-0",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function Checkbox({ className = "", ...rest }) {
+  return (
+    <input
+      type="checkbox"
+      className={[
+        "h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500",
+        "dark:border-slate-600 dark:bg-slate-800 dark:focus:ring-brand-400",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    />
+  );
+}

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

@@ -0,0 +1,38 @@
+import React from "react";
+
+const TONE_STYLES = {
+  neutral:
+    "border-slate-200/80 bg-white/60 text-slate-700 ring-black/5 hover:bg-white/80 dark:border-slate-800/80 dark:bg-slate-950/30 dark:text-slate-200 dark:ring-white/10 dark:hover:bg-slate-900/50",
+  primary:
+    "border-brand-200/80 bg-brand-50/70 text-brand-800 ring-brand-900/5 hover:bg-brand-50 dark:border-brand-900/40 dark:bg-brand-950/25 dark:text-brand-200 dark:ring-brand-300/10 dark:hover:bg-brand-950/35",
+  success:
+    "border-emerald-200/80 bg-emerald-50/70 text-emerald-800 ring-emerald-900/5 hover:bg-emerald-50 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200 dark:ring-emerald-300/10 dark:hover:bg-emerald-950/30",
+  warning:
+    "border-amber-200/80 bg-amber-50/70 text-amber-900 ring-amber-900/5 hover:bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200 dark:ring-amber-300/10 dark:hover:bg-amber-950/30",
+  danger:
+    "border-rose-200/80 bg-rose-50/70 text-rose-900 ring-rose-900/5 hover:bg-rose-50 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200 dark:ring-rose-300/10 dark:hover:bg-rose-950/30"
+};
+
+const SIZE_STYLES = {
+  xs: "px-2 py-0.5 text-[11px]",
+  sm: "px-2.5 py-1 text-xs"
+};
+
+export default function UIChip({ tone = "neutral", size = "xs", className = "", children, ...rest }) {
+  return (
+    <span
+      className={[
+        "inline-flex items-center gap-1 rounded-full border font-semibold shadow-sm ring-1 transition",
+        SIZE_STYLES[size] ?? SIZE_STYLES.xs,
+        TONE_STYLES[tone] ?? TONE_STYLES.neutral,
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}
+

package/src/components/library/ui/Collapsible.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  return <CollapsiblePrimitive.Trigger {...props} />;
+}
+
+function CollapsibleContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      className={[
+        "overflow-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+};