@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

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

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

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+function Field({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={[
+        "flex flex-col gap-1.5",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function FieldLabel({
+  className,
+  htmlFor,
+  children,
+  ...props
+}: React.ComponentProps<"label">) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={[
+        "block text-sm font-medium text-slate-700 dark:text-slate-200",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </label>
+  );
+}
+
+function FieldDescription({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={[
+        "text-xs text-slate-500 dark:text-slate-400",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={[
+        "text-xs text-red-600 dark:text-red-400",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+};

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

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function FieldGroup({ className = "", children, ...rest }) {
+  return (
+    <div
+      className={[
+        "flex flex-col gap-1.5",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function UIInput({ style = undefined, className = "", ...rest }) {
+  return (
+    <input
+      style={style}
+      className={[
+        "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm",
+        "placeholder:text-slate-400",
+        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
+        "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    />
+  );
+}
+
+

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default function Label({ children, htmlFor, required, className = "", ...rest }) {
+  // If no htmlFor provided, render as div for compatibility
+  const Tag = htmlFor ? 'label' : 'div';
+  const props = htmlFor ? { htmlFor, ...rest } : rest;
+
+  return (
+    <Tag
+      {...props}
+      className={[
+        "text-sm font-medium text-slate-700 dark:text-slate-200",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {children}
+      {required && <span className="ml-0.5 text-red-500">*</span>}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,142 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+// Shadcn-style Pagination subcomponents
+
+function PaginationContent({ className, children, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      className={[
+        "flex flex-row items-center gap-1",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+}
+
+function PaginationItem({ className, children, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={className}
+      {...props}
+    >
+      {children}
+    </li>
+  );
+}
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof Link> & {
+  isActive?: boolean;
+  size?: "default" | "sm" | "lg";
+}) {
+  const sizeClasses = {
+    default: "h-9 min-w-9 px-4 py-2",
+    sm: "h-8 min-w-8 px-3 py-1.5 text-sm",
+    lg: "h-11 min-w-11 px-8 py-3"
+  };
+
+  return (
+    <Link
+      aria-current={isActive ? "page" : undefined}
+      className={[
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500",
+        "disabled:pointer-events-none disabled:opacity-50",
+        isActive
+          ? "bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900"
+          : "hover:bg-slate-100 dark:hover:bg-slate-800",
+        sizeClasses[size],
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={[
+        "gap-1 pl-2.5",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
+          fill="currentColor"
+        />
+      </svg>
+      <span>Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={[
+        "gap-1 pr-2.5",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <span>Next</span>
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+        <path
+          d="M6.1584 3.13514C6.35985 2.94628 6.67627 2.95648 6.86513 3.15794L10.6151 7.15794C10.7954 7.35027 10.7954 7.64955 10.6151 7.84188L6.86513 11.8419C6.67627 12.0433 6.35985 12.0535 6.1584 11.8647C5.95694 11.6758 5.94673 11.3594 6.13559 11.1579L9.565 7.49991L6.13559 3.84188C5.94673 3.64042 5.95694 3.32401 6.1584 3.13514Z"
+          fill="currentColor"
+        />
+      </svg>
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      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 pages</span>
+    </span>
+  );
+}
+
+export {
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={[
+          "z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50",
+          className
+        ].filter(Boolean).join(" ")}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+};