@schandlergarcia/sf-web-components 1.9.38 → 1.9.39

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

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

@@ -0,0 +1,56 @@
+import React from "react";
+import UIText from "./Text";
+
+export default function UIContainer({
+  title,
+  subtitle,
+  description,
+  actions,
+  empty = false,
+  emptyText = "Nothing here yet.",
+  emptyIcon,
+  emptyHeight = 160,
+  className = "",
+  style,
+  children
+}) {
+  const sub = subtitle ?? description;
+
+  return (
+    <section className={className} style={style}>
+      {(title || sub || actions) && (
+        <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+          <div className="min-w-0">
+            {title && (
+              <UIText as="h2" size="lg" weight="bold" className="truncate">
+                {title}
+              </UIText>
+            )}
+            {sub && (
+              <UIText as="p" size="sm" muted className="mt-1">
+                {sub}
+              </UIText>
+            )}
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+      )}
+
+      {empty ? (
+        <div
+          className="flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 text-center dark:border-slate-700 dark:bg-slate-900/40"
+          style={{ minHeight: emptyHeight }}
+        >
+          {emptyIcon ? <div className="mb-2">{emptyIcon}</div> : null}
+          <UIText size="sm" muted>
+            {emptyText}
+          </UIText>
+        </div>
+      ) : (
+        children
+      )}
+    </section>
+  );
+}
+
+

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+
+// Simplified DatePicker components
+// Full implementation would use react-day-picker
+
+function DatePicker({ children, ...props }: { children: React.ReactNode } & React.ComponentProps<typeof Popover>) {
+  return <Popover {...props}>{children}</Popover>;
+}
+
+function DatePickerTrigger({ ...props }: React.ComponentProps<typeof PopoverTrigger>) {
+  return <PopoverTrigger {...props} />;
+}
+
+function DatePickerContent({ ...props }: React.ComponentProps<typeof PopoverContent>) {
+  return <PopoverContent {...props} />;
+}
+
+function DatePickerCalendar({ ...props }: any) {
+  // Simplified calendar placeholder
+  return <div {...props}>Calendar component</div>;
+}
+
+function DatePickerRangeTrigger({ ...props }: React.ComponentProps<typeof PopoverTrigger>) {
+  return <PopoverTrigger {...props} />;
+}
+
+export {
+  DatePicker,
+  DatePickerTrigger,
+  DatePickerContent,
+  DatePickerCalendar,
+  DatePickerRangeTrigger,
+};

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

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={[
+        "fixed inset-0 z-50 bg-black/50",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={[
+          "fixed left-1/2 top-1/2 z-50 max-h-[85vh] w-[90vw] max-w-[500px] -translate-x-1/2 -translate-y-1/2",
+          "rounded-lg border border-slate-200 bg-white p-6 shadow-lg",
+          "dark:border-slate-800 dark:bg-slate-900",
+          className
+        ].filter(Boolean).join(" ")}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
+            <span className="sr-only">Close</span>
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+              <path
+                d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+                fill="currentColor"
+              />
+            </svg>
+          </DialogClose>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={[
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={[
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={[
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={[
+        "text-sm text-slate-500 dark:text-slate-400",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

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

@@ -0,0 +1,46 @@
+import React from "react";
+
+const SIZES = {
+  sm: { icon: "h-8 w-8", heading: "text-sm", body: "text-xs", gap: "gap-2", pad: "py-6" },
+  md: { icon: "h-10 w-10", heading: "text-base", body: "text-sm", gap: "gap-3", pad: "py-10" },
+  lg: { icon: "h-14 w-14", heading: "text-lg", body: "text-sm", gap: "gap-4", pad: "py-16" },
+};
+
+/**
+ * Empty state placeholder — shows when a list, table, or section has no content.
+ *
+ * @param {ReactNode}  icon      Optional icon element
+ * @param {string}     heading   Primary message
+ * @param {string}     body      Secondary description
+ * @param {ReactNode}  action    Optional CTA (button, link, etc.)
+ * @param {"sm"|"md"|"lg"} size  Visual density
+ */
+export default function EmptyState({
+  icon,
+  heading = "Nothing here yet",
+  body,
+  action,
+  size = "md",
+  className = "",
+}) {
+  const s = SIZES[size] ?? SIZES.md;
+
+  return (
+    <div className={`flex flex-col items-center justify-center text-center ${s.pad} ${s.gap} ${className}`}>
+      {icon && (
+        <div className={`${s.icon} text-slate-300 dark:text-slate-600`}>
+          {icon}
+        </div>
+      )}
+      <div className={`${s.heading} font-semibold text-slate-700 dark:text-slate-200`}>
+        {heading}
+      </div>
+      {body && (
+        <div className={`${s.body} max-w-sm text-slate-500 dark:text-slate-400`}>
+          {body}
+        </div>
+      )}
+      {action && <div className="mt-1">{action}</div>}
+    </div>
+  );
+}