@schandlergarcia/sf-web-components 1.2.6 → 1.2.7

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,143 @@
+import * as React from "react";
+
+// 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",
+  href,
+  ...props
+}: React.ComponentProps<"a"> & {
+  isActive?: boolean;
+  size?: "default" | "sm" | "lg";
+}) {
+  const sizeClasses: Record<"default" | "sm" | "lg", string> = {
+    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 (
+    <a
+      href={href}
+      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,
+};

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

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      className={[
+        "flex h-10 w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2",
+        "text-sm text-slate-900 placeholder:text-slate-400",
+        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:focus:ring-offset-slate-950",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+          <path
+            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z"
+            fill="currentColor"
+          />
+        </svg>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value {...props} />;
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={[
+          "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-900 shadow-md",
+          "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",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        ].filter(Boolean).join(" ")}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport
+          className={[
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ].filter(Boolean).join(" ")}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      className={[
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        "focus:bg-slate-100 focus:text-slate-900",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "dark:focus:bg-slate-800 dark:focus:text-slate-50",
+        className
+      ].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+            <path
+              d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+              fill="currentColor"
+            />
+          </svg>
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+};

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

@@ -0,0 +1,64 @@
+import React from "react";
+
+const SIZE_CLASSES = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+  xl: "h-8 w-8",
+};
+
+const TONE_CLASSES = {
+  brand: "text-brand-500",
+  white: "text-white",
+  muted: "text-slate-400 dark:text-slate-500",
+  current: "text-current",
+};
+
+/**
+ * Animated spinner.
+ *
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} size
+ * @param {"brand"|"white"|"muted"|"current"} tone
+ * @param {string} label — screen-reader label
+ */
+export default function Spinner({
+  size = "md",
+  tone = "brand",
+  label = "Loading",
+  className = "",
+  ...rest
+}) {
+  return (
+    <svg
+      {...rest}
+      className={[
+        "animate-spin",
+        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
+        TONE_CLASSES[tone] ?? TONE_CLASSES.brand,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      role="status"
+      aria-label={label}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,46 @@
+import React from "react";
+
+const SIZE_CLASSES = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  xxl: "text-2xl"
+};
+
+const WEIGHT_CLASSES = {
+  regular: "font-normal",
+  medium: "font-medium",
+  bold: "font-semibold"
+};
+
+export default function UIText({
+  as: Comp = "span",
+  size = "md",
+  weight = "regular",
+  muted = false,
+  style,
+  className = "",
+  children,
+  ...rest
+}) {
+  return (
+    <Comp
+      style={style}
+      className={[
+        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
+        WEIGHT_CLASSES[weight] ?? WEIGHT_CLASSES.regular,
+        muted ? "text-slate-600 dark:text-slate-300" : "text-slate-900 dark:text-slate-50",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+

package/src/components/library/ui/UIButton.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/UIInput.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}
+    />
+  );
+}
+
+