@schandlergarcia/sf-web-components 1.3.1 → 1.4.0

package/src/components/library/ui/{Label.jsx → Label.tsx}

@@ -1,22 +1,23 @@
-import React from "react";
+import * as 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;
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+}
 
+export default function Label({ children, htmlFor, required, className = "", ...rest }: LabelProps) {
   return (
-    <Tag
-      {...props}
+    <label
+      htmlFor={htmlFor}
       className={[
         "text-sm font-medium text-slate-700 dark:text-slate-200",
         className
       ]
         .filter(Boolean)
         .join(" ")}
+      {...rest}
     >
       {children}
       {required && <span className="ml-0.5 text-red-500">*</span>}
-    </Tag>
+    </label>
   );
 }

package/src/components/library/ui/{Spinner.jsx → Spinner.tsx}

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const SIZE_CLASSES = {
   xs: "h-3 w-3",
@@ -6,21 +6,23 @@ const SIZE_CLASSES = {
   md: "h-5 w-5",
   lg: "h-6 w-6",
   xl: "h-8 w-8",
-};
+} as const;
 
 const TONE_CLASSES = {
   brand: "text-brand-500",
   white: "text-white",
   muted: "text-slate-400 dark:text-slate-500",
   current: "text-current",
-};
+} as const;
+
+export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+  size?: keyof typeof SIZE_CLASSES;
+  tone?: keyof typeof TONE_CLASSES;
+  label?: string;
+}
 
 /**
  * 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",
@@ -28,14 +30,14 @@ export default function Spinner({
   label = "Loading",
   className = "",
   ...rest
-}) {
+}: SpinnerProps) {
   return (
     <svg
       {...rest}
       className={[
         "animate-spin",
-        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
-        TONE_CLASSES[tone] ?? TONE_CLASSES.brand,
+        SIZE_CLASSES[size],
+        TONE_CLASSES[tone],
         className,
       ]
         .filter(Boolean)

package/src/components/library/ui/{UIInput.jsx → UIInput.tsx}

@@ -1,14 +1,16 @@
-import React from "react";
+import * as React from "react";
 
-export default function UIInput({ style = undefined, className = "", ...rest }) {
+export interface UIInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export default function UIInput({ className = "", ...rest }: UIInputProps) {
   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",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         className
       ]
         .filter(Boolean)
@@ -17,5 +19,3 @@ export default function UIInput({ style = undefined, className = "", ...rest })
     />
   );
 }
-
-

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

@@ -1,44 +0,0 @@
-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>
-  );
-}