@schandlergarcia/sf-web-components 1.4.0 → 1.6.0

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

@@ -1,4 +1,4 @@
-import React from "react";
+import type { ReactNode } from "react";
 import { Button as HeroButton } from "@heroui/react";
 
 /**
@@ -9,6 +9,21 @@ import { Button as HeroButton } from "@heroui/react";
  * - outline -> bordered
  * - ghost -> light
  */
+
+type ShadcnVariant = "primary" | "secondary" | "destructive" | "outline" | "ghost";
+
+export interface HeroUIButtonProps {
+  variant?: ShadcnVariant;
+  size?: "sm" | "md" | "lg";
+  fullWidth?: boolean;
+  onClick?: () => void;
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+  [key: string]: any;
+}
+
 export default function HeroUIButton({
   variant = "primary",
   size = "md",
@@ -17,9 +32,9 @@ export default function HeroUIButton({
   children,
   className = "",
   ...props
-}) {
+}: HeroUIButtonProps) {
   // Map shadcn variants to HeroUI variants
-  const variantMap = {
+  const variantMap: Record<ShadcnVariant, string> = {
     primary: "solid",
     secondary: "solid",
     destructive: "solid",
@@ -28,7 +43,7 @@ export default function HeroUIButton({
   };
 
   // Map shadcn variants to HeroUI colors
-  const colorMap = {
+  const colorMap: Record<ShadcnVariant, string> = {
     primary: "primary",
     secondary: "default",
     destructive: "danger",
@@ -36,11 +51,13 @@ export default function HeroUIButton({
     ghost: "default"
   };
 
-  const heroVariant = variantMap[variant] || "solid";
-  const heroColor = colorMap[variant] || "primary";
+  const heroVariant = variantMap[variant];
+  const heroColor = colorMap[variant];
+
+  const HeroButtonAny = HeroButton as any;
 
   return (
-    <HeroButton
+    <HeroButtonAny
       variant={heroVariant}
       color={heroColor}
       size={size}
@@ -50,9 +67,10 @@ export default function HeroUIButton({
       {...props}
     >
       {children}
-    </HeroButton>
+    </HeroButtonAny>
   );
 }
 
 // Also export as Button for shadcn compatibility
 export const Button = HeroUIButton;
+

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

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

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { Modal } from "@heroui/react";
+import type { ModalProps } from "@heroui/react";
 
 /**
  * HeroUI v3 Modal — compound component.
@@ -25,8 +25,11 @@ import { Modal } from "@heroui/react";
  *     </Modal.Backdrop>
  *   </Modal>
  */
-export default function HeroUIModal(props) {
+export interface HeroUIModalProps extends ModalProps {}
+
+export default function HeroUIModal(props: HeroUIModalProps) {
   return <Modal {...props} />;
 }
 
 export { Modal };
+export type { ModalProps };

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

@@ -0,0 +1,11 @@
+import { Pagination } from "@heroui/react";
+import type { PaginationProps } from "@heroui/react";
+
+export interface HeroUIPaginationProps extends PaginationProps {}
+
+export default function HeroUIPagination(props: HeroUIPaginationProps) {
+  return <Pagination {...props} />;
+}
+
+export { Pagination };
+export type { PaginationProps };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Separator } from "@heroui/react";
+import type { SeparatorProps } from "@heroui/react";
+
+export interface HeroUISeparatorProps extends SeparatorProps {}
+
+export default function HeroUISeparator(props: HeroUISeparatorProps) {
+  return <Separator {...props} />;
+}
+
+export { Separator };
+export type { SeparatorProps };

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Tabs } from "@heroui/react";
 
 /**
@@ -19,8 +18,14 @@ import { Tabs } from "@heroui/react";
  *     <Tabs.Panel id="analytics">…</Tabs.Panel>
  *   </Tabs>
  */
-export default function HeroUITabs({ variant = "primary", ...props }) {
-  return <Tabs variant={variant} {...props} />;
+export interface HeroUITabsProps {
+  variant?: string;
+  [key: string]: any;
+}
+
+export default function HeroUITabs({ variant = "primary", ...props }: HeroUITabsProps) {
+  const TabsAny = Tabs as any;
+  return <TabsAny variant={variant} {...props} />;
 }
 
 export { Tabs };

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

@@ -1,8 +1,12 @@
-import React from "react";
 import { Switch } from "@heroui/react";
+import type { SwitchProps } from "@heroui/react";
 import { useThemeMode } from "../theme/AppThemeProvider";
 
-export default function HeroUIToggle({ label = "Dark mode", ...props }) {
+export interface HeroUIToggleProps extends Omit<SwitchProps, 'isSelected' | 'onChange'> {
+  label?: string;
+}
+
+export default function HeroUIToggle({ label = "Dark mode", ...props }: HeroUIToggleProps) {
   const { mode, toggle } = useThemeMode();
   const isSelected = mode === "dark";
 

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { Tooltip } from "@heroui/react";
+import type { TooltipProps } from "@heroui/react";
 
 /**
  * HeroUI v3 Tooltip — compound component.
@@ -14,8 +14,11 @@ import { Tooltip } from "@heroui/react";
  *     <Tooltip.Content>Helpful info</Tooltip.Content>
  *   </Tooltip>
  */
-export default function HeroUITooltip(props) {
+export interface HeroUITooltipProps extends TooltipProps {}
+
+export default function HeroUITooltip(props: HeroUITooltipProps) {
   return <Tooltip {...props} />;
 }
 
 export { Tooltip };
+export type { TooltipProps };

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/{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={[

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const SIZE_CLASSES = {
   xs: "text-xs",
@@ -7,30 +7,39 @@ const SIZE_CLASSES = {
   lg: "text-lg",
   xl: "text-xl",
   xxl: "text-2xl"
-};
+} as const;
 
 const WEIGHT_CLASSES = {
   regular: "font-normal",
   medium: "font-medium",
   bold: "font-semibold"
-};
+} as const;
 
-export default function UIText({
-  as: Comp = "span",
+export interface UITextProps<T extends React.ElementType = "span"> {
+  as?: T;
+  size?: keyof typeof SIZE_CLASSES;
+  weight?: keyof typeof WEIGHT_CLASSES;
+  muted?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default function UIText<T extends React.ElementType = "span">({
+  as,
   size = "md",
   weight = "regular",
   muted = false,
-  style,
   className = "",
   children,
   ...rest
-}) {
+}: UITextProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof UITextProps<T>>) {
+  const Comp = as || "span";
+
   return (
     <Comp
-      style={style}
       className={[
-        SIZE_CLASSES[size] ?? SIZE_CLASSES.md,
-        WEIGHT_CLASSES[weight] ?? WEIGHT_CLASSES.regular,
+        SIZE_CLASSES[size],
+        WEIGHT_CLASSES[weight],
         muted ? "text-slate-600 dark:text-slate-300" : "text-slate-900 dark:text-slate-50",
         className
       ]
@@ -42,5 +51,3 @@ export default function UIText({
     </Comp>
   );
 }
-
-

package/src/components/library/heroui/Alert.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { Alert } from "@heroui/react";
-
-export default function HeroUIAlert({ variant = "default", ...props }) {
-  return <Alert variant={variant} {...props} />;
-}
-
-export { Alert };

package/src/components/library/heroui/Badge.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { Badge } from "@heroui/react";
-
-export default function HeroUIBadge({ children, ...props }) {
-  return <Badge {...props}>{children}</Badge>;
-}
-
-export { Badge };

package/src/components/library/heroui/Card.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { Card } from "@heroui/react";
-
-export default function HeroUICard({ children, ...props }) {
-  return <Card {...props}>{children}</Card>;
-}
-
-export { Card };

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

@@ -1,6 +0,0 @@
-import React from "react";
-import { Input } from "@heroui/react";
-
-export default function HeroUIInput(props) {
-  return <Input {...props} />;
-}

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { Kbd } from "@heroui/react";
-
-export default function HeroUIKbd({ children, ...props }) {
-  return <Kbd {...props}>{children}</Kbd>;
-}
-
-export { Kbd };

package/src/components/library/heroui/Pagination.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { Pagination } from "@heroui/react";
-
-export default function HeroUIPagination(props) {
-  return <Pagination {...props} />;
-}
-
-export { Pagination };

package/src/components/library/heroui/ProgressBar.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { ProgressBar } from "@heroui/react";
-
-export default function HeroUIProgressBar({ children, ...props }) {
-  return <ProgressBar {...props}>{children}</ProgressBar>;
-}
-
-export { ProgressBar };

package/src/components/library/heroui/ProgressCircle.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { ProgressCircle } from "@heroui/react";
-
-export default function HeroUIProgressCircle({ children, ...props }) {
-  return <ProgressCircle {...props}>{children}</ProgressCircle>;
-}
-
-export { ProgressCircle };

package/src/components/library/heroui/ScrollShadow.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { ScrollShadow } from "@heroui/react";
-
-export default function HeroUIScrollShadow({ children, ...props }) {
-  return <ScrollShadow {...props}>{children}</ScrollShadow>;
-}
-
-export { ScrollShadow };

package/src/components/library/heroui/Separator.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import { Separator } from "@heroui/react";
-
-export default function HeroUISeparator(props) {
-  return <Separator {...props} />;
-}
-
-export { Separator };

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

@@ -1,8 +0,0 @@
-import React from "react";
-import { Skeleton } from "@heroui/react";
-
-export default function HeroUISkeleton({ children, ...props }) {
-  return <Skeleton {...props}>{children}</Skeleton>;
-}
-
-export { Skeleton };