@schandlergarcia/sf-web-components 1.9.42 → 1.9.44

package/dist/index.js

@@ -71,11 +71,11 @@ import { default as ho } from "./components/library/ui/Spinner.js";
 import { default as Mo } from "./components/library/cards/StatusCard.js";
 import { default as Ao } from "./components/library/cards/TableCard.js";
 import { default as vo } from "./components/library/filters/ToggleFilter.js";
-import { default as wo } from "./components/library/ui/Button.js";
+import { default as wo } from "./components/library/ui/UIButton.js";
 import { Card as Ko, CardContent as Ro, CardDescription as Go, CardFooter as Vo, CardHeader as Wo, CardTitle as No, default as Oo } from "./components/library/ui/Card.js";
 import { default as qo } from "./components/library/ui/Chip.js";
 import { default as Jo } from "./components/library/ui/Container.js";
-import { default as Xo } from "./components/library/ui/Input.js";
+import { default as Xo } from "./components/library/ui/UIInput.js";
 import { default as Zo } from "./components/library/ui/Text.js";
 import { default as $o } from "./components/library/ui/Toggle.js";
 import { default as ra } from "./components/library/cards/WidgetCard.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.42",
+  "version": "1.9.44",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -34,12 +34,18 @@
     "src/types",
     "README.md",
     "INSTALL.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "ARCHITECTURE.md",
+    "QUICK-REFERENCE.md",
     ".a4drules"
   ],
   "scripts": {
     "build": "vite build && cp -r src/styles dist/",
     "build:types": "tsc --emitDeclarationOnly",
-    "prepublishOnly": "npm run build",
+    "verify": "bash scripts/verify-consistency.sh",
+    "prepublish:check": "bash scripts/pre-publish-check.sh",
+    "prepublishOnly": "npm run prepublish:check && npm run build",
     "postinstall": "node scripts/postinstall.mjs",
     "reset:command-center": "bash scripts/reset-command-center.sh",
     "validate:dashboard": "bash scripts/validate-dashboard.sh",

package/scripts/pre-publish-check.sh

@@ -0,0 +1,180 @@
+#!/bin/bash
+
+# Pre-publish verification script
+# Enforces all rules from .a4drules/RULES.md before allowing publish
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "🔒 Pre-Publish Verification"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+ERRORS=0
+
+# Rule 1: Consistency Check
+echo "📋 Rule 1: Verifying consistency between code, docs, and templates..."
+if bash "$ROOT/scripts/verify-consistency.sh"; then
+  echo -e "${GREEN}✓ Consistency check passed${NC}"
+else
+  echo -e "${RED}✗ Consistency check failed${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+echo ""
+
+# Rule 2: CHANGELOG Check
+echo "📝 Rule 2: Verifying CHANGELOG.md is up to date..."
+
+# Get current version from package.json
+VERSION=$(node -p "require('$ROOT/package.json').version")
+echo "  Current version: $VERSION"
+
+# Check if CHANGELOG has entry for current version
+if grep -q "## \[$VERSION\]" "$ROOT/CHANGELOG.md"; then
+  echo -e "  ${GREEN}✓ CHANGELOG has entry for version $VERSION${NC}"
+else
+  echo -e "  ${RED}✗ CHANGELOG missing entry for version $VERSION${NC}"
+  echo "  Add a section to CHANGELOG.md:"
+  echo "  ## [$VERSION] - $(date +%Y-%m-%d)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+# Check if any src/ files changed since last commit
+if git diff --name-only HEAD src/ 2>/dev/null | grep -q .; then
+  echo -e "  ${YELLOW}⚠ src/ files changed, ensure CHANGELOG is updated${NC}"
+fi
+
+echo ""
+
+# Rule 3: Component Naming
+echo "🏷️  Rule 3: Verifying component naming conventions..."
+if [ -f "$ROOT/src/components/library/ui/UIButton.tsx" ]; then
+  echo -e "  ${GREEN}✓ UIButton.tsx exists (correct)${NC}"
+else
+  echo -e "  ${RED}✗ UIButton.tsx missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/src/components/library/ui/UIInput.tsx" ]; then
+  echo -e "  ${GREEN}✓ UIInput.tsx exists (correct)${NC}"
+else
+  echo -e "  ${RED}✗ UIInput.tsx missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/src/components/library/ui/Button.jsx" ] || [ -f "$ROOT/src/components/library/ui/Button.tsx" ]; then
+  echo -e "  ${RED}✗ Button.jsx/tsx exists (should be UIButton.tsx)${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/src/components/library/ui/Input.jsx" ] || [ -f "$ROOT/src/components/library/ui/Input.tsx" ]; then
+  echo -e "  ${RED}✗ Input.jsx/tsx exists (should be UIInput.tsx)${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+echo ""
+
+# Rule 4: Build Check
+echo "🔨 Rule 4: Verifying build succeeds..."
+if npm run build --silent; then
+  echo -e "${GREEN}✓ Build succeeded${NC}"
+else
+  echo -e "${RED}✗ Build failed${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+echo ""
+
+# Rule 5: Documentation Check
+echo "📚 Rule 5: Verifying documentation files exist..."
+if [ -f "$ROOT/.a4drules/skills/component-library/ui-primitives.md" ]; then
+  echo -e "  ${GREEN}✓ ui-primitives.md exists${NC}"
+else
+  echo -e "  ${RED}✗ ui-primitives.md missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/CHANGELOG.md" ]; then
+  echo -e "  ${GREEN}✓ CHANGELOG.md exists${NC}"
+else
+  echo -e "  ${RED}✗ CHANGELOG.md missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/CONTRIBUTING.md" ]; then
+  echo -e "  ${GREEN}✓ CONTRIBUTING.md exists${NC}"
+else
+  echo -e "  ${RED}✗ CONTRIBUTING.md missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/ARCHITECTURE.md" ]; then
+  echo -e "  ${GREEN}✓ ARCHITECTURE.md exists${NC}"
+else
+  echo -e "  ${RED}✗ ARCHITECTURE.md missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/.a4drules/RULES.md" ]; then
+  echo -e "  ${GREEN}✓ RULES.md exists${NC}"
+else
+  echo -e "  ${RED}✗ RULES.md missing${NC}"
+  ERRORS=$((ERRORS + 1))
+fi
+
+echo ""
+
+# Rule 6: Package.json files array check
+echo "📦 Rule 6: Verifying package.json files array..."
+REQUIRED_DIRS=("src/templates" "src/components" "src/lib" "src/types" ".a4drules" "scripts")
+
+for dir in "${REQUIRED_DIRS[@]}"; do
+  if grep -q "\"$dir\"" "$ROOT/package.json"; then
+    echo -e "  ${GREEN}✓ $dir included${NC}"
+  else
+    echo -e "  ${RED}✗ $dir missing from files array${NC}"
+    ERRORS=$((ERRORS + 1))
+  fi
+done
+
+echo ""
+
+# Rule 7: Git status check
+echo "🔍 Rule 7: Checking git status..."
+if git diff-index --quiet HEAD -- 2>/dev/null; then
+  echo -e "${GREEN}✓ No uncommitted changes${NC}"
+else
+  echo -e "${YELLOW}⚠ You have uncommitted changes${NC}"
+  echo "  Consider committing before publishing"
+fi
+echo ""
+
+# Summary
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+if [ $ERRORS -eq 0 ]; then
+  echo -e "${GREEN}✅ All pre-publish checks passed!${NC}"
+  echo ""
+  echo "Safe to publish version $VERSION"
+  echo ""
+  echo "To publish, run:"
+  echo "  npm publish"
+  echo ""
+  exit 0
+else
+  echo -e "${RED}❌ Found $ERRORS error(s)${NC}"
+  echo ""
+  echo "Cannot publish until all errors are fixed."
+  echo ""
+  echo "See .a4drules/RULES.md for requirements"
+  echo "See CONTRIBUTING.md for guidance"
+  echo ""
+  exit 1
+fi

package/scripts/verify-consistency.sh

@@ -0,0 +1,238 @@
+#!/bin/bash
+
+# Verification script to ensure consistency between:
+# 1. .a4drules documentation
+# 2. Component implementations
+# 3. Template imports
+# 4. Barrel exports
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+
+echo "🔍 Verifying sf-web-components consistency..."
+echo ""
+
+ERRORS=0
+
+# Color codes
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Check 1: UIButton and UIInput must exist as .tsx files
+echo "📦 Checking UI component files..."
+if [ -f "$ROOT/src/components/library/ui/UIButton.tsx" ]; then
+  echo -e "  ${GREEN}✓${NC} UIButton.tsx exists"
+else
+  echo -e "  ${RED}✗${NC} UIButton.tsx missing (required by documentation)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/src/components/library/ui/UIInput.tsx" ]; then
+  echo -e "  ${GREEN}✓${NC} UIInput.tsx exists"
+else
+  echo -e "  ${RED}✗${NC} UIInput.tsx missing (required by documentation)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+# Check 2: Button.jsx and Input.jsx should NOT exist in ui/
+if [ -f "$ROOT/src/components/library/ui/Button.jsx" ] || [ -f "$ROOT/src/components/library/ui/Button.tsx" ]; then
+  echo -e "  ${RED}✗${NC} Button.jsx/tsx exists in ui/ (should be UIButton.tsx)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if [ -f "$ROOT/src/components/library/ui/Input.jsx" ] || [ -f "$ROOT/src/components/library/ui/Input.tsx" ]; then
+  echo -e "  ${RED}✗${NC} Input.jsx/tsx exists in ui/ (should be UIInput.tsx)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+echo ""
+
+# Check 3: Barrel export consistency
+echo "📚 Checking barrel export (index.jsx)..."
+if grep -q 'from "./ui/UIButton"' "$ROOT/src/components/library/index.jsx"; then
+  echo -e "  ${GREEN}✓${NC} UIButton exported correctly"
+else
+  echo -e "  ${RED}✗${NC} UIButton export incorrect or missing"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if grep -q 'from "./ui/UIInput"' "$ROOT/src/components/library/index.jsx"; then
+  echo -e "  ${GREEN}✓${NC} UIInput exported correctly"
+else
+  echo -e "  ${RED}✗${NC} UIInput export incorrect or missing"
+  ERRORS=$((ERRORS + 1))
+fi
+
+# Check for wrong paths
+if grep -q 'from "./ui/Button"' "$ROOT/src/components/library/index.jsx"; then
+  echo -e "  ${RED}✗${NC} Incorrect export path: ./ui/Button (should be ./ui/UIButton)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if grep -q 'from "./ui/Input"' "$ROOT/src/components/library/index.jsx"; then
+  echo -e "  ${RED}✗${NC} Incorrect export path: ./ui/Input (should be ./ui/UIInput)"
+  ERRORS=$((ERRORS + 1))
+fi
+
+echo ""
+
+# Check 4: Template imports
+echo "📄 Checking template imports..."
+TEMPLATE_ERRORS=0
+
+# Check NotFound.tsx.template
+if [ -f "$ROOT/src/templates/pages/NotFound.tsx.template" ]; then
+  if grep -q "from '@/components/library/ui/UIButton'" "$ROOT/src/templates/pages/NotFound.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} NotFound.tsx.template imports UIButton correctly"
+  else
+    echo -e "  ${RED}✗${NC} NotFound.tsx.template does not import UIButton correctly"
+    TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
+  fi
+fi
+
+# Check Home.tsx.template
+if [ -f "$ROOT/src/templates/pages/Home.tsx.template" ]; then
+  if grep -q "from '@/components/library/ui/UIInput'" "$ROOT/src/templates/pages/Home.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} Home.tsx.template imports UIInput correctly"
+  else
+    echo -e "  ${RED}✗${NC} Home.tsx.template does not import UIInput correctly"
+    TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
+  fi
+
+  if grep -q "from '@/components/library/ui/UIButton'" "$ROOT/src/templates/pages/Home.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} Home.tsx.template imports UIButton correctly"
+  else
+    echo -e "  ${RED}✗${NC} Home.tsx.template does not import UIButton correctly"
+    TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
+  fi
+fi
+
+# Check Search.tsx.template
+if [ -f "$ROOT/src/templates/pages/Search.tsx.template" ]; then
+  if grep -q "from '@/components/library/ui/UIInput'" "$ROOT/src/templates/pages/Search.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} Search.tsx.template imports UIInput correctly"
+  else
+    echo -e "  ${YELLOW}⚠${NC} Search.tsx.template does not import UIInput (may not need it)"
+  fi
+fi
+
+# Check for wrong imports in templates
+WRONG_IMPORTS=$(grep -r "from '@/components/library/ui/Button'" "$ROOT/src/templates/" 2>/dev/null || true)
+if [ -n "$WRONG_IMPORTS" ]; then
+  echo -e "  ${RED}✗${NC} Templates importing Button instead of UIButton:"
+  echo "$WRONG_IMPORTS" | sed 's/^/    /'
+  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
+fi
+
+WRONG_IMPORTS=$(grep -r "from '@/components/library/ui/Input'" "$ROOT/src/templates/" 2>/dev/null || true)
+if [ -n "$WRONG_IMPORTS" ]; then
+  echo -e "  ${RED}✗${NC} Templates importing Input instead of UIInput:"
+  echo "$WRONG_IMPORTS" | sed 's/^/    /'
+  TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
+fi
+
+ERRORS=$((ERRORS + TEMPLATE_ERRORS))
+
+echo ""
+
+# Check 5: Internal library imports
+echo "🔗 Checking internal library imports..."
+INTERNAL_ERRORS=0
+
+# Check cards/ for wrong imports
+WRONG_CARDS=$(grep -r 'from "../ui/Button"' "$ROOT/src/components/library/cards/" 2>/dev/null || true)
+if [ -n "$WRONG_CARDS" ]; then
+  echo -e "  ${RED}✗${NC} Card components importing Button instead of UIButton:"
+  echo "$WRONG_CARDS" | sed 's/^/    /'
+  INTERNAL_ERRORS=$((INTERNAL_ERRORS + 1))
+fi
+
+WRONG_CARDS=$(grep -r 'from "../ui/Input"' "$ROOT/src/components/library/cards/" 2>/dev/null || true)
+if [ -n "$WRONG_CARDS" ]; then
+  echo -e "  ${RED}✗${NC} Card components importing Input instead of UIInput:"
+  echo "$WRONG_CARDS" | sed 's/^/    /'
+  INTERNAL_ERRORS=$((INTERNAL_ERRORS + 1))
+fi
+
+# Check if UIButton/UIInput are imported correctly
+CORRECT_IMPORTS=$(grep -r 'from "../ui/UIButton"' "$ROOT/src/components/library/cards/" 2>/dev/null | wc -l)
+if [ "$CORRECT_IMPORTS" -gt 0 ]; then
+  echo -e "  ${GREEN}✓${NC} Found $CORRECT_IMPORTS correct UIButton imports in cards/"
+fi
+
+CORRECT_IMPORTS=$(grep -r 'from "../ui/UIInput"' "$ROOT/src/components/library/cards/" 2>/dev/null | wc -l)
+if [ "$CORRECT_IMPORTS" -gt 0 ]; then
+  echo -e "  ${GREEN}✓${NC} Found $CORRECT_IMPORTS correct UIInput imports in cards/"
+fi
+
+ERRORS=$((ERRORS + INTERNAL_ERRORS))
+
+echo ""
+
+# Check 6: Documentation exists
+echo "📖 Checking documentation..."
+if [ -f "$ROOT/.a4drules/skills/component-library/ui-primitives.md" ]; then
+  # Check if UIButton is documented
+  if grep -q "UIButton" "$ROOT/.a4drules/skills/component-library/ui-primitives.md"; then
+    echo -e "  ${GREEN}✓${NC} UIButton documented in ui-primitives.md"
+  else
+    echo -e "  ${RED}✗${NC} UIButton not found in ui-primitives.md"
+    ERRORS=$((ERRORS + 1))
+  fi
+
+  # Check if UIInput is documented
+  if grep -q "UIInput" "$ROOT/.a4drules/skills/component-library/ui-primitives.md"; then
+    echo -e "  ${GREEN}✓${NC} UIInput documented in ui-primitives.md"
+  else
+    echo -e "  ${RED}✗${NC} UIInput not found in ui-primitives.md"
+    ERRORS=$((ERRORS + 1))
+  fi
+else
+  echo -e "  ${RED}✗${NC} Documentation file missing: .a4drules/skills/component-library/ui-primitives.md"
+  ERRORS=$((ERRORS + 1))
+fi
+
+echo ""
+
+# Check 7: Package.json files array includes necessary directories
+echo "📦 Checking package.json files array..."
+if grep -q '"src/templates"' "$ROOT/package.json"; then
+  echo -e "  ${GREEN}✓${NC} src/templates included in package.json files"
+else
+  echo -e "  ${RED}✗${NC} src/templates missing from package.json files array"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if grep -q '"src/components"' "$ROOT/package.json"; then
+  echo -e "  ${GREEN}✓${NC} src/components included in package.json files"
+else
+  echo -e "  ${RED}✗${NC} src/components missing from package.json files array"
+  ERRORS=$((ERRORS + 1))
+fi
+
+if grep -q '".a4drules"' "$ROOT/package.json"; then
+  echo -e "  ${GREEN}✓${NC} .a4drules included in package.json files"
+else
+  echo -e "  ${RED}✗${NC} .a4drules missing from package.json files array"
+  ERRORS=$((ERRORS + 1))
+fi
+
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+if [ $ERRORS -eq 0 ]; then
+  echo -e "${GREEN}✅ All consistency checks passed!${NC}"
+  echo ""
+  echo "Safe to publish."
+  exit 0
+else
+  echo -e "${RED}❌ Found $ERRORS error(s)${NC}"
+  echo ""
+  echo "Fix these errors before publishing."
+  echo "See CONTRIBUTING.md for guidance."
+  exit 1
+fi

package/src/components/library/cards/ActionList.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import UIButton from "../ui/Button";
+import UIButton from "../ui/UIButton";
 
 /**
  * Row of action buttons — typically used at the bottom of a dashboard section.

package/src/components/library/cards/TableCard.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import BaseCard from "./BaseCard";
-import UIInput from "../ui/Input";
-import UIButton from "../ui/Button";
+import UIInput from "../ui/UIInput";
+import UIButton from "../ui/UIButton";
 import UIText from "../ui/Text";
 
 function defaultTypeFormat(type, value) {

package/src/components/library/index.jsx

@@ -1,8 +1,8 @@
 export { default as AppThemeProvider, useThemeMode } from "./theme/AppThemeProvider";
 
 // UI primitives
-export { default as UIButton } from "./ui/Button";
-export { default as UIInput } from "./ui/Input";
+export { default as UIButton } from "./ui/UIButton";
+export { default as UIInput } from "./ui/UIInput";
 export { default as UIToggle } from "./ui/Toggle";
 export { default as UIText } from "./ui/Text";
 export { default as UICard, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/Card";

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

@@ -1,8 +1,8 @@
-import React from "react";
+import * as 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",
+    "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-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:
@@ -10,39 +10,42 @@ 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-blue-600 underline-offset-4 hover:underline dark:text-blue-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",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
         "disabled:cursor-not-allowed disabled:opacity-60",
         variantClass,
         sizeClass,
@@ -57,5 +60,3 @@ export default function UIButton({
     </button>
   );
 }
-
-

package/src/components/library/ui/{Input.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 })
     />
   );
 }
-
-