@schandlergarcia/sf-web-components 1.3.0 → 1.4.0

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

@@ -1,9 +1,12 @@
-import React from "react";
+import * as React from "react";
 
-export default function UICard({ children, padding = "p-5", style, className = "", ...rest }) {
+export interface UICardProps extends React.HTMLAttributes<HTMLDivElement> {
+  padding?: string;
+}
+
+export default function UICard({ children, padding = "p-5", className = "", ...rest }: UICardProps) {
   return (
     <div
-      style={style}
       className={[
         "rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900",
         padding,
@@ -19,7 +22,9 @@ export default function UICard({ children, padding = "p-5", style, className = "
 }
 
 // shadcn-compatible Card components
-export function Card({ className = "", children, ...rest }) {
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Card({ className = "", children, ...rest }: CardProps) {
   return (
     <div
       className={[
@@ -35,7 +40,9 @@ export function Card({ className = "", children, ...rest }) {
   );
 }
 
-export function CardHeader({ className = "", children, ...rest }) {
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardHeader({ className = "", children, ...rest }: CardHeaderProps) {
   return (
     <div
       className={[
@@ -51,7 +58,9 @@ export function CardHeader({ className = "", children, ...rest }) {
   );
 }
 
-export function CardTitle({ className = "", children, ...rest }) {
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export function CardTitle({ className = "", children, ...rest }: CardTitleProps) {
   return (
     <h3
       className={[
@@ -67,7 +76,9 @@ export function CardTitle({ className = "", children, ...rest }) {
   );
 }
 
-export function CardDescription({ className = "", children, ...rest }) {
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+export function CardDescription({ className = "", children, ...rest }: CardDescriptionProps) {
   return (
     <p
       className={[
@@ -83,7 +94,9 @@ export function CardDescription({ className = "", children, ...rest }) {
   );
 }
 
-export function CardContent({ className = "", children, ...rest }) {
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardContent({ className = "", children, ...rest }: CardContentProps) {
   return (
     <div
       className={[
@@ -99,7 +112,9 @@ export function CardContent({ className = "", children, ...rest }) {
   );
 }
 
-export function CardFooter({ className = "", children, ...rest }) {
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardFooter({ className = "", children, ...rest }: CardFooterProps) {
   return (
     <div
       className={[
@@ -114,4 +129,3 @@ export function CardFooter({ className = "", children, ...rest }) {
     </div>
   );
 }
-

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

@@ -1,6 +1,8 @@
-import React from "react";
+import * as React from "react";
 
-export default function Checkbox({ className = "", ...rest }) {
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export default function Checkbox({ className = "", ...rest }: CheckboxProps) {
   return (
     <input
       type="checkbox"

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Dialog as DialogPrimitive } from "radix-ui";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root {...props} />;

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

@@ -1,19 +1,22 @@
-import React from "react";
+import * as 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" },
-};
+} as const;
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  heading?: string;
+  body?: string;
+  action?: React.ReactNode;
+  size?: keyof typeof SIZES;
+  className?: string;
+}
 
 /**
  * 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,
@@ -22,8 +25,8 @@ export default function EmptyState({
   action,
   size = "md",
   className = "",
-}) {
-  const s = SIZES[size] ?? SIZES.md;
+}: EmptyStateProps) {
+  const s = SIZES[size];
 
   return (
     <div className={`flex flex-col items-center justify-center text-center ${s.pad} ${s.gap} ${className}`}>

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/Popover.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root {...props} />;

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/{UIButton.jsx → UIButton.tsx}

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const VARIANT_CLASSES = {
   primary:
@@ -10,36 +10,39 @@ const VARIANT_CLASSES = {
   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"
-};
+    "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
+  link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent"
+} as const;
 
 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"
-};
+} as const;
+
+export interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof VARIANT_CLASSES;
+  size?: keyof typeof SIZE_CLASSES;
+  fullWidth?: boolean;
+}
 
 export default function UIButton({
   variant = "primary",
   size = "md",
   fullWidth = false,
   disabled = false,
-  onClick = () => {},
-  children,
-  style = undefined,
   className = "",
+  children,
   ...rest
-}) {
-  const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.primary;
-  const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;
+}: UIButtonProps) {
+  const variantClass = VARIANT_CLASSES[variant];
+  const sizeClass = SIZE_CLASSES[size];
 
   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",
@@ -57,5 +60,3 @@ export default function UIButton({
     </button>
   );
 }
-
-

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