@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

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

@@ -1,80 +0,0 @@
-import React from "react";
-import { tokens, getTokenCSSProperties, Tokens } from "./tokens";
-
-export type ThemeMode = "light" | "dark";
-
-export interface ThemeModeContextValue {
-  mode: ThemeMode;
-  theme: Tokens;
-  toggle: () => void;
-}
-
-const ThemeModeContext = React.createContext<ThemeModeContextValue>({
-  mode: "light",
-  theme: tokens,
-  toggle: () => {}
-});
-
-const STORAGE_KEY = "app-color-mode";
-
-function applyHtmlDarkClass(mode: ThemeMode): void {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  if (mode === "dark") root.classList.add("dark");
-  else root.classList.remove("dark");
-}
-
-function applyTokenCSSProperties(): void {
-  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(): ThemeModeContextValue {
-  return React.useContext(ThemeModeContext);
-}
-
-export interface AppThemeProviderProps {
-  initialMode?: ThemeMode;
-  children: React.ReactNode;
-}
-
-export default function AppThemeProvider({ initialMode = "light", children }: AppThemeProviderProps) {
-  const [mode, setMode] = React.useState<ThemeMode>(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.tsx

@@ -1,106 +0,0 @@
-/**
- * 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 interface ColorShades {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-  950: string;
-}
-
-export interface Tokens {
-  colors: {
-    brand: ColorShades;
-    accent: ColorShades;
-  };
-  fonts: {
-    sans: string;
-    mono: string;
-  };
-  radius: {
-    sm: string;
-    md: string;
-    lg: string;
-  };
-  spacing: {
-    pageX: string;
-    pageY: string;
-  };
-}
-
-export const tokens: 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(): Record<string, string> {
-  const props: Record<string, string> = {};
-  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.tsx

@@ -1,90 +0,0 @@
-import * as 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"
-} as const;
-
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: keyof typeof VARIANT_CLASSES;
-}
-
-export default function Alert({ variant = "default", className = "", children, ...rest }: AlertProps) {
-  const variantClasses = VARIANT_CLASSES[variant];
-
-  return (
-    <div
-      role="alert"
-      className={[
-        "rounded-lg border p-4",
-        variantClasses,
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
-
-export function AlertTitle({ className = "", children, ...rest }: AlertTitleProps) {
-  return (
-    <h5
-      className={[
-        "mb-1 font-medium leading-none tracking-tight",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </h5>
-  );
-}
-
-export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function AlertDescription({ className = "", children, ...rest }: AlertDescriptionProps) {
-  return (
-    <div
-      className={[
-        "text-sm opacity-90",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function AlertAction({ className = "", children, ...rest }: AlertActionProps) {
-  return (
-    <div
-      className={[
-        "mt-3",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export { Alert };

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

@@ -1,68 +0,0 @@
-import * as 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",
-} as const;
-
-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",
-} as const;
-
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {
-  src?: string;
-  name?: string;
-  initials?: string;
-  icon?: React.ReactNode;
-  size?: keyof typeof SIZE_MAP;
-  tone?: keyof typeof TONE_MAP;
-}
-
-export default function Avatar({
-  src,
-  name,
-  initials,
-  icon,
-  size = "sm",
-  tone = "slate",
-  className = "",
-  ...rest
-}: AvatarProps) {
-  const sizeClass = SIZE_MAP[size];
-
-  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 as React.ImgHTMLAttributes<HTMLImageElement>)}
-      />
-    );
-  }
-
-  if (React.isValidElement(icon)) {
-    return (
-      <div
-        className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full ${className}`}
-        {...(rest as React.HTMLAttributes<HTMLDivElement>)}
-      >
-        {icon}
-      </div>
-    );
-  }
-
-  const label = initials ?? (name ? name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() : "?");
-  return (
-    <div
-      className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`}
-      {...(rest as React.HTMLAttributes<HTMLDivElement>)}
-    >
-      {label}
-    </div>
-  );
-}

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

@@ -1,119 +0,0 @@
-import * as React from "react";
-
-// 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<"a">) {
-  return (
-    <a
-      href={href || "#"}
-      className={[
-        "transition-colors hover:text-slate-900 dark:hover:text-slate-50",
-        className
-      ].filter(Boolean).join(" ")}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-}
-
-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/Card.tsx

@@ -1,131 +0,0 @@
-import * as React from "react";
-
-export interface UICardProps extends React.HTMLAttributes<HTMLDivElement> {
-  padding?: string;
-}
-
-export default function UICard({ children, padding = "p-5", className = "", ...rest }: UICardProps) {
-  return (
-    <div
-      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 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function Card({ className = "", children, ...rest }: CardProps) {
-  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 interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function CardHeader({ className = "", children, ...rest }: CardHeaderProps) {
-  return (
-    <div
-      className={[
-        "flex flex-col space-y-1.5 p-6",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
-
-export function CardTitle({ className = "", children, ...rest }: CardTitleProps) {
-  return (
-    <h3
-      className={[
-        "text-2xl font-semibold leading-none tracking-tight",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </h3>
-  );
-}
-
-export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
-
-export function CardDescription({ className = "", children, ...rest }: CardDescriptionProps) {
-  return (
-    <p
-      className={[
-        "text-sm text-slate-500 dark:text-slate-400",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </p>
-  );
-}
-
-export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function CardContent({ className = "", children, ...rest }: CardContentProps) {
-  return (
-    <div
-      className={[
-        "p-6 pt-0",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function CardFooter({ className = "", children, ...rest }: CardFooterProps) {
-  return (
-    <div
-      className={[
-        "flex items-center p-6 pt-0",
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}

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

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export default function Checkbox({ className = "", ...rest }: CheckboxProps) {
-  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.tsx

@@ -1,42 +0,0 @@
-import * as 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"
-} as const;
-
-const SIZE_STYLES = {
-  xs: "px-2 py-0.5 text-[11px]",
-  sm: "px-2.5 py-1 text-xs"
-} as const;
-
-export interface UIChipProps extends React.HTMLAttributes<HTMLSpanElement> {
-  tone?: keyof typeof TONE_STYLES;
-  size?: keyof typeof SIZE_STYLES;
-}
-
-export default function UIChip({ tone = "neutral", size = "xs", className = "", children, ...rest }: UIChipProps) {
-  return (
-    <span
-      className={[
-        "inline-flex items-center gap-1 rounded-full border font-semibold shadow-sm ring-1 transition",
-        SIZE_STYLES[size],
-        TONE_STYLES[tone],
-        className
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      {...rest}
-    >
-      {children}
-    </span>
-  );
-}

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

@@ -1,31 +0,0 @@
-import * as React from "react";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-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,
-};