@schandlergarcia/sf-web-components 1.3.1 → 1.5.0

package/dist/components/library/ui/checkbox.js

@@ -1,7 +1,6 @@
-import { jsx as o } from "react/jsx-runtime";
-import "react";
-function n({ className: r = "", ...e }) {
-  return /* @__PURE__ */ o(
+import { jsx as a } from "react/jsx-runtime";
+function t({ className: r = "", ...e }) {
+  return /* @__PURE__ */ a(
     "input",
     {
       type: "checkbox",
@@ -15,6 +14,6 @@ function n({ className: r = "", ...e }) {
   );
 }
 export {
-  n as default
+  t as default
 };
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/library/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/library/ui/Checkbox.jsx"],"sourcesContent":["import React from \"react\";\n\nexport default function Checkbox({ className = \"\", ...rest }) {\n  return (\n    <input\n      type=\"checkbox\"\n      className={[\n        \"h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500\",\n        \"dark:border-slate-600 dark:bg-slate-800 dark:focus:ring-brand-400\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n}\n"],"names":["Checkbox","className","rest","jsx"],"mappings":";;AAEA,SAAwBA,EAAS,EAAE,WAAAC,IAAY,IAAI,GAAGC,KAAQ;AAC5D,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/library/ui/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nexport default function Checkbox({ className = \"\", ...rest }: CheckboxProps) {\n  return (\n    <input\n      type=\"checkbox\"\n      className={[\n        \"h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500\",\n        \"dark:border-slate-600 dark:bg-slate-800 dark:focus:ring-brand-400\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n}\n"],"names":["Checkbox","className","rest","jsx"],"mappings":";AAIA,SAAwBA,EAAS,EAAE,WAAAC,IAAY,IAAI,GAAGC,KAAuB;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACAF;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/library/ui/label.d.ts

@@ -1,7 +1,5 @@
-export default function Label({ children, htmlFor, required, className, ...rest }: {
-    [x: string]: any;
-    children: any;
-    htmlFor: any;
-    required: any;
-    className?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+export default function Label({ children, htmlFor, required, className, ...rest }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/ui/label.js

@@ -1,23 +1,22 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import "react";
-function m({ children: a, htmlFor: e, required: s, className: l = "", ...t }) {
-  const n = e ? "label" : "div", o = e ? { htmlFor: e, ...t } : t;
-  return /* @__PURE__ */ i(
-    n,
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+function o({ children: e, htmlFor: t, required: a, className: l = "", ...s }) {
+  return /* @__PURE__ */ r(
+    "label",
     {
-      ...o,
+      htmlFor: t,
       className: [
         "text-sm font-medium text-slate-700 dark:text-slate-200",
         l
       ].filter(Boolean).join(" "),
+      ...s,
       children: [
-        a,
-        s && /* @__PURE__ */ r("span", { className: "ml-0.5 text-red-500", children: "*" })
+        e,
+        a && /* @__PURE__ */ n("span", { className: "ml-0.5 text-red-500", children: "*" })
       ]
     }
   );
 }
 export {
-  m as default
+  o as default
 };
 //# sourceMappingURL=Label.js.map

package/dist/components/library/ui/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../src/components/library/ui/Label.jsx"],"sourcesContent":["import React from \"react\";\n\nexport default function Label({ children, htmlFor, required, className = \"\", ...rest }) {\n  // If no htmlFor provided, render as div for compatibility\n  const Tag = htmlFor ? 'label' : 'div';\n  const props = htmlFor ? { htmlFor, ...rest } : rest;\n\n  return (\n    <Tag\n      {...props}\n      className={[\n        \"text-sm font-medium text-slate-700 dark:text-slate-200\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      {children}\n      {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n    </Tag>\n  );\n}\n"],"names":["Label","children","htmlFor","required","className","rest","Tag","props","jsxs","jsx"],"mappings":";;AAEA,SAAwBA,EAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,KAAQ;AAEtF,QAAMC,IAAMJ,IAAU,UAAU,OAC1BK,IAAQL,IAAU,EAAE,SAAAA,GAAS,GAAGG,MAASA;AAE/C,SACE,gBAAAG;AAAA,IAACF;AAAA,IAAA;AAAA,MACE,GAAGC;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACAH;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEV,UAAA;AAAA,QAAAH;AAAA,QACAE,KAAY,gBAAAM,EAAC,QAAA,EAAK,WAAU,uBAAsB,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1D;"}
+{"version":3,"file":"Label.js","sources":["../../../../src/components/library/ui/Label.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n}\n\nexport default function Label({ children, htmlFor, required, className = \"\", ...rest }: LabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={[\n        \"text-sm font-medium text-slate-700 dark:text-slate-200\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      {children}\n      {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n    </label>\n  );\n}\n"],"names":["Label","children","htmlFor","required","className","rest","jsxs","jsx"],"mappings":";AAMA,SAAwBA,EAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,KAAoB;AAClG,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAJ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACAE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAJ;AAAA,QACAE,KAAY,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1D;"}

package/dist/components/library/ui/spinner.js

@@ -1,39 +1,38 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import "react";
-const e = {
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+const o = {
   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"
-}, r = {
+}, i = {
   brand: "text-brand-500",
   white: "text-white",
   muted: "text-slate-400 dark:text-slate-500",
   current: "text-current"
 };
-function m({
-  size: a = "md",
-  tone: n = "brand",
-  label: s = "Loading",
-  className: l = "",
-  ...o
+function x({
+  size: e = "md",
+  tone: r = "brand",
+  label: a = "Loading",
+  className: s = "",
+  ...l
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "svg",
     {
-      ...o,
+      ...l,
       className: [
         "animate-spin",
-        e[a] ?? e.md,
-        r[n] ?? r.brand,
-        l
+        o[e],
+        i[r],
+        s
       ].filter(Boolean).join(" "),
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24",
       role: "status",
-      "aria-label": s,
+      "aria-label": a,
       children: [
         /* @__PURE__ */ t(
           "circle",
@@ -59,6 +58,6 @@ function m({
   );
 }
 export {
-  m as default
+  x as default
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/library/ui/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../src/components/library/ui/Spinner.jsx"],"sourcesContent":["import React from \"react\";\n\nconst SIZE_CLASSES = {\n  xs: \"h-3 w-3\",\n  sm: \"h-4 w-4\",\n  md: \"h-5 w-5\",\n  lg: \"h-6 w-6\",\n  xl: \"h-8 w-8\",\n};\n\nconst TONE_CLASSES = {\n  brand: \"text-brand-500\",\n  white: \"text-white\",\n  muted: \"text-slate-400 dark:text-slate-500\",\n  current: \"text-current\",\n};\n\n/**\n * Animated spinner.\n *\n * @param {\"xs\"|\"sm\"|\"md\"|\"lg\"|\"xl\"} size\n * @param {\"brand\"|\"white\"|\"muted\"|\"current\"} tone\n * @param {string} label — screen-reader label\n */\nexport default function Spinner({\n  size = \"md\",\n  tone = \"brand\",\n  label = \"Loading\",\n  className = \"\",\n  ...rest\n}) {\n  return (\n    <svg\n      {...rest}\n      className={[\n        \"animate-spin\",\n        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,\n        TONE_CLASSES[tone] ?? TONE_CLASSES.brand,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      role=\"status\"\n      aria-label={label}\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n"],"names":["SIZE_CLASSES","TONE_CLASSES","Spinner","size","tone","label","className","rest","jsxs","jsx"],"mappings":";;AAEA,MAAMA,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AASA,SAAwBC,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAG;AACD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACAP,EAAaG,CAAI,KAAKH,EAAa;AAAA,QACnCC,EAAaG,CAAI,KAAKH,EAAa;AAAA,QACnCK;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAYD;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Spinner.js","sources":["../../../../src/components/library/ui/Spinner.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst SIZE_CLASSES = {\n  xs: \"h-3 w-3\",\n  sm: \"h-4 w-4\",\n  md: \"h-5 w-5\",\n  lg: \"h-6 w-6\",\n  xl: \"h-8 w-8\",\n} as const;\n\nconst TONE_CLASSES = {\n  brand: \"text-brand-500\",\n  white: \"text-white\",\n  muted: \"text-slate-400 dark:text-slate-500\",\n  current: \"text-current\",\n} as const;\n\nexport interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {\n  size?: keyof typeof SIZE_CLASSES;\n  tone?: keyof typeof TONE_CLASSES;\n  label?: string;\n}\n\n/**\n * Animated spinner.\n */\nexport default function Spinner({\n  size = \"md\",\n  tone = \"brand\",\n  label = \"Loading\",\n  className = \"\",\n  ...rest\n}: SpinnerProps) {\n  return (\n    <svg\n      {...rest}\n      className={[\n        \"animate-spin\",\n        SIZE_CLASSES[size],\n        TONE_CLASSES[tone],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      role=\"status\"\n      aria-label={label}\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n"],"names":["SIZE_CLASSES","TONE_CLASSES","Spinner","size","tone","label","className","rest","jsxs","jsx"],"mappings":";AAEA,MAAMA,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAWA,SAAwBC,EAAQ;AAAA,EAC9B,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACAP,EAAaG,CAAI;AAAA,QACjBF,EAAaG,CAAI;AAAA,QACjBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAYD;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/convert-to-typescript.sh

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+#
+# Bulk TypeScript conversion script
+# Converts .jsx files to .tsx and updates import statements
+#
+set -euo pipefail
+
+echo "TypeScript Conversion Script"
+echo "============================"
+echo ""
+
+# List of files to convert (add more as needed)
+FILES=(
+  "src/components/library/ui/Text.jsx"
+  "src/components/library/ui/Container.jsx"
+  "src/components/library/ui/Chip.jsx"
+)
+
+converted=0
+failed=0
+
+for file in "${FILES[@]}"; do
+  if [ ! -f "$file" ]; then
+    echo "⏭️  Skipping $file (not found)"
+    continue
+  fi
+
+  newfile="${file%.jsx}.tsx"
+  echo "🔄 Converting $file → $newfile"
+
+  # Rename file
+  mv "$file" "$newfile"
+
+  # Update import statement
+  sed -i '' 's/import React from "react";/import * as React from "react";/g' "$newfile"
+
+  echo "✅ Renamed and updated imports"
+  converted=$((converted + 1))
+done
+
+echo ""
+echo "============================"
+echo "✅ Converted: $converted files"
+echo "❌ Failed: $failed files"
+echo ""
+echo "Next steps:"
+echo "1. Add TypeScript interfaces to each converted file"
+echo "2. Type all function parameters"
+echo "3. Add 'as const' to constant objects"
+echo "4. Export prop interfaces"
+echo "5. Run 'npm run build' to verify"
+echo ""

package/src/components/library/heroui/Input.tsx

@@ -0,0 +1,10 @@
+import { Input } from "@heroui/react";
+import type { InputProps } from "@heroui/react";
+
+export interface HeroUIInputProps extends InputProps {}
+
+export default function HeroUIInput(props: HeroUIInputProps) {
+  return <Input {...props} />;
+}
+
+export type { InputProps };

package/src/components/library/heroui/Kbd.tsx

@@ -0,0 +1,11 @@
+import { Kbd } from "@heroui/react";
+import type { KbdProps } from "@heroui/react";
+
+export interface HeroUIKbdProps extends KbdProps {}
+
+export default function HeroUIKbd({ children, ...props }: HeroUIKbdProps) {
+  return <Kbd {...props}>{children}</Kbd>;
+}
+
+export { Kbd };
+export type { KbdProps };

package/src/components/library/heroui/Skeleton.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { Skeleton } from "@heroui/react";
+import type { SkeletonProps } from "@heroui/react";
+
+export interface HeroUISkeletonProps extends SkeletonProps {
+  children?: ReactNode;
+}
+
+export default function HeroUISkeleton({ children, ...props }: HeroUISkeletonProps) {
+  return <Skeleton {...props}>{children}</Skeleton>;
+}
+
+export { Skeleton };
+export type { SkeletonProps };

package/src/components/library/heroui/{Toast.jsx → Toast.tsx}

@@ -1,5 +1,5 @@
-import React from "react";
 import { Toast, toast } from "@heroui/react";
+import type { ToastProps } from "@heroui/react";
 
 /**
  * HeroUI v3 Toast — notification system.
@@ -18,8 +18,11 @@ import { Toast, toast } from "@heroui/react";
  *   Toast.Title, Toast.Description, Toast.ActionButton,
  *   Toast.CloseButton
  */
-export default function HeroUIToast(props) {
+export interface HeroUIToastProps extends ToastProps {}
+
+export default function HeroUIToast(props: HeroUIToastProps) {
   return <Toast {...props} />;
 }
 
 export { Toast, toast };
+export type { ToastProps };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const VARIANT_CLASSES = {
   default: "bg-slate-50 border-slate-200 text-slate-900 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-50",
@@ -7,10 +7,14 @@ const VARIANT_CLASSES = {
   warning: "bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-50",
   error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50",
   destructive: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950 dark:border-red-800 dark:text-red-50"
-};
+} as const;
 
-export default function Alert({ variant = "default", className = "", children, ...rest }) {
-  const variantClasses = VARIANT_CLASSES[variant] || VARIANT_CLASSES.default;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: keyof typeof VARIANT_CLASSES;
+}
+
+export default function Alert({ variant = "default", className = "", children, ...rest }: AlertProps) {
+  const variantClasses = VARIANT_CLASSES[variant];
 
   return (
     <div
@@ -29,7 +33,9 @@ export default function Alert({ variant = "default", className = "", children, .
   );
 }
 
-export function AlertTitle({ className = "", children, ...rest }) {
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export function AlertTitle({ className = "", children, ...rest }: AlertTitleProps) {
   return (
     <h5
       className={[
@@ -45,7 +51,9 @@ export function AlertTitle({ className = "", children, ...rest }) {
   );
 }
 
-export function AlertDescription({ className = "", children, ...rest }) {
+export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function AlertDescription({ className = "", children, ...rest }: AlertDescriptionProps) {
   return (
     <div
       className={[
@@ -61,7 +69,9 @@ export function AlertDescription({ className = "", children, ...rest }) {
   );
 }
 
-export function AlertAction({ className = "", children, ...rest }) {
+export interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function AlertAction({ className = "", children, ...rest }: AlertActionProps) {
   return (
     <div
       className={[

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

@@ -0,0 +1,68 @@
+import * as 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",
+} as const;
+
+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",
+} as const;
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement | HTMLImageElement> {
+  src?: string;
+  name?: string;
+  initials?: string;
+  icon?: React.ReactNode;
+  size?: keyof typeof SIZE_MAP;
+  tone?: keyof typeof TONE_MAP;
+}
+
+export default function Avatar({
+  src,
+  name,
+  initials,
+  icon,
+  size = "sm",
+  tone = "slate",
+  className = "",
+  ...rest
+}: AvatarProps) {
+  const sizeClass = SIZE_MAP[size];
+
+  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 as React.ImgHTMLAttributes<HTMLImageElement>)}
+      />
+    );
+  }
+
+  if (React.isValidElement(icon)) {
+    return (
+      <div
+        className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full ${className}`}
+        {...(rest as React.HTMLAttributes<HTMLDivElement>)}
+      >
+        {icon}
+      </div>
+    );
+  }
+
+  const label = initials ?? (name ? name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() : "?");
+  return (
+    <div
+      className={`${sizeClass} ${TONE_MAP[tone]} flex shrink-0 items-center justify-center rounded-full font-bold ${className}`}
+      {...(rest as React.HTMLAttributes<HTMLDivElement>)}
+    >
+      {label}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const TONE_STYLES = {
   neutral:
@@ -11,20 +11,25 @@ const TONE_STYLES = {
     "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"
-};
+} as const;
 
 const SIZE_STYLES = {
   xs: "px-2 py-0.5 text-[11px]",
   sm: "px-2.5 py-1 text-xs"
-};
+} as const;
 
-export default function UIChip({ tone = "neutral", size = "xs", className = "", children, ...rest }) {
+export interface UIChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  tone?: keyof typeof TONE_STYLES;
+  size?: keyof typeof SIZE_STYLES;
+}
+
+export default function UIChip({ tone = "neutral", size = "xs", className = "", children, ...rest }: UIChipProps) {
   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,
+        SIZE_STYLES[size],
+        TONE_STYLES[tone],
         className
       ]
         .filter(Boolean)
@@ -35,4 +40,3 @@ export default function UIChip({ tone = "neutral", size = "xs", className = "",
     </span>
   );
 }
-

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

@@ -1,6 +1,17 @@
-import React from "react";
+import * as React from "react";
 import UIText from "./Text";
 
+export interface UIContainerProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  actions?: React.ReactNode;
+  empty?: boolean;
+  emptyText?: string;
+  emptyIcon?: React.ReactNode;
+  emptyHeight?: number;
+}
+
 export default function UIContainer({
   title,
   subtitle,
@@ -13,7 +24,7 @@ export default function UIContainer({
   className = "",
   style,
   children
-}) {
+}: UIContainerProps) {
   const sub = subtitle ?? description;
 
   return (
@@ -52,5 +63,3 @@ export default function UIContainer({
     </section>
   );
 }
-
-

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

@@ -1,6 +1,8 @@
-import React from "react";
+import * as React from "react";
 
-export default function FieldGroup({ className = "", children, ...rest }) {
+export interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export default function FieldGroup({ className = "", children, ...rest }: FieldGroupProps) {
   return (
     <div
       className={[