@schandlergarcia/sf-web-components 1.6.0 → 1.7.0

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 /**
  * HeroUI v3 Field components — simple wrappers for form field layout.
@@ -11,7 +11,11 @@ import React from "react";
  *     <FieldError>Required</FieldError>
  *   </Field>
  */
-export default function HeroUIField({ className = "", children, ...props }) {
+export interface HeroUIFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export default function HeroUIField({ className = "", children, ...props }: HeroUIFieldProps) {
   return (
     <div className={`flex flex-col gap-1.5 ${className}`} {...props}>
       {children}
@@ -21,7 +25,11 @@ export default function HeroUIField({ className = "", children, ...props }) {
 
 export const Field = HeroUIField;
 
-export const FieldLabel = ({ className = "", htmlFor, children, ...props }) => (
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  children?: React.ReactNode;
+}
+
+export const FieldLabel = ({ className = "", htmlFor, children, ...props }: FieldLabelProps) => (
   <label
     htmlFor={htmlFor}
     className={`text-sm font-medium text-slate-700 dark:text-slate-200 ${className}`}
@@ -31,15 +39,24 @@ export const FieldLabel = ({ className = "", htmlFor, children, ...props }) => (
   </label>
 );
 
-export const FieldDescription = ({ className = "", children, ...props }) => (
+export interface FieldDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children?: React.ReactNode;
+}
+
+export const FieldDescription = ({ className = "", children, ...props }: FieldDescriptionProps) => (
   <p className={`text-xs text-slate-500 dark:text-slate-400 ${className}`} {...props}>
     {children}
   </p>
 );
 
-export const FieldError = ({ className = "", errors, children, ...props }) => {
+export interface FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  errors?: string[];
+  children?: React.ReactNode;
+}
+
+export const FieldError = ({ className = "", errors, children, ...props }: FieldErrorProps) => {
   // Support both children and errors prop
-  const errorContent = errors?.length > 0 ? errors.join(", ") : children;
+  const errorContent = errors && errors.length > 0 ? errors.join(", ") : children;
 
   if (!errorContent) return null;
 

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Meter } from "@heroui/react";
+
+export interface HeroUIMeterProps {
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export default function HeroUIMeter({ children, ...props }: HeroUIMeterProps) {
+  return <Meter {...props}>{children}</Meter>;
+}
+
+export { Meter };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 /**
  * HeroUI v3 Popover — simple popover for shadcn compatibility.
@@ -11,12 +11,18 @@ import React from "react";
  *     <PopoverContent>Content</PopoverContent>
  *   </Popover>
  */
-export default function HeroUIPopover({ children, open, onOpenChange, ...props }) {
+export interface HeroUIPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export default function HeroUIPopover({ children, open, onOpenChange, ...props }: HeroUIPopoverProps) {
   const [isOpen, setIsOpen] = React.useState(false);
   const isControlled = open !== undefined;
   const actualOpen = isControlled ? open : isOpen;
 
-  const handleOpenChange = (newOpen) => {
+  const handleOpenChange = (newOpen: boolean) => {
     if (!isControlled) setIsOpen(newOpen);
     onOpenChange?.(newOpen);
   };
@@ -25,7 +31,7 @@ export default function HeroUIPopover({ children, open, onOpenChange, ...props }
     <div className="relative inline-block" {...props}>
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
-          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange });
+          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange } as any);
         }
         return child;
       })}
@@ -35,7 +41,15 @@ export default function HeroUIPopover({ children, open, onOpenChange, ...props }
 
 export const Popover = HeroUIPopover;
 
-export const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props }) => {
+export interface PopoverTriggerProps {
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  asChild?: boolean;
+  [key: string]: any;
+}
+
+export const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props }: PopoverTriggerProps) => {
   const handleClick = () => onOpenChange?.(!open);
 
   // If asChild is true, clone the child element with the props
@@ -43,7 +57,7 @@ export const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props
     return React.cloneElement(children, {
       ...props,
       onClick: handleClick,
-    });
+    } as any);
   }
 
   // Otherwise, wrap in a button
@@ -54,10 +68,17 @@ export const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props
   );
 };
 
-export const PopoverContent = ({ children, open, className = "", align = "center", sideOffset = 4, ...props }) => {
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  open?: boolean;
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}
+
+export const PopoverContent = ({ children, open, className = "", align = "center", sideOffset = 4, ...props }: PopoverContentProps) => {
   if (!open) return null;
 
-  const alignClasses = {
+  const alignClasses: Record<string, string> = {
     start: "left-0",
     center: "left-1/2 -translate-x-1/2",
     end: "right-0"

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Select as HeroSelect } from "@heroui/react";
+
+/**
+ * HeroUI v3 Select wrapper with shadcn compatibility.
+ *
+ * Translates shadcn API to HeroUI:
+ * - onValueChange -> onSelectionChange
+ * - value -> selectedKeys
+ */
+export interface HeroUISelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export default function HeroUISelect({ value, onValueChange, children, ...props }: HeroUISelectProps) {
+  // Translate shadcn API to HeroUI API
+  const selectedKeys = value ? [value] : [];
+  const handleSelectionChange = (keys: any) => {
+    const selected = Array.from(keys)[0] as string;
+    onValueChange?.(selected || "");
+  };
+
+  const HeroSelectAny = HeroSelect as any;
+  return (
+    <HeroSelectAny
+      selectedKeys={selectedKeys}
+      onSelectionChange={handleSelectionChange}
+      {...props}
+    >
+      {children}
+    </HeroSelectAny>
+  );
+}
+
+// For direct HeroUI usage
+export const Select = HeroUISelect;
+
+// Shadcn-compatible subcomponents that just pass through children
+export interface SelectTriggerProps {
+  children?: React.ReactNode;
+  size?: string;
+  [key: string]: any;
+}
+
+export const SelectTrigger = ({ children }: SelectTriggerProps) => <>{children}</>;
+
+export interface SelectValueProps {
+  placeholder?: string;
+  [key: string]: any;
+}
+
+export const SelectValue = ({ placeholder }: SelectValueProps) => <span>{placeholder}</span>;
+
+export interface SelectContentProps {
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const SelectContent = ({ children }: SelectContentProps) => <>{children}</>;
+
+export interface SelectItemProps {
+  value: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const SelectItem = ({ value, children, ...props }: SelectItemProps) => {
+  const HeroSelectAny = HeroSelect as any;
+  return <HeroSelectAny.Item key={value} {...props}>{children}</HeroSelectAny.Item>;
+};

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

@@ -1,42 +0,0 @@
-import React from "react";
-import { Accordion } from "@heroui/react";
-
-/**
- * HeroUI v3 Collapsible — maps to Accordion for shadcn compatibility.
- *
- * @example
- *   import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/library";
- *   <Collapsible open={isOpen} onOpenChange={setIsOpen}>
- *     <CollapsibleTrigger>Toggle</CollapsibleTrigger>
- *     <CollapsibleContent>Content</CollapsibleContent>
- *   </Collapsible>
- */
-export default function HeroUICollapsible({ open, onOpenChange, children, ...props }) {
-  // Map shadcn props to HeroUI Accordion
-  const selectedKeys = open ? ["item"] : [];
-
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={(keys) => {
-        const isOpen = Array.from(keys).includes("item");
-        onOpenChange?.(isOpen);
-      }}
-      {...props}
-    >
-      <Accordion.Item key="item" aria-label="Collapsible content">
-        {children}
-      </Accordion.Item>
-    </Accordion>
-  );
-}
-
-export const Collapsible = HeroUICollapsible;
-
-export const CollapsibleTrigger = ({ children, ...props }) => (
-  <Accordion.Trigger {...props}>{children}</Accordion.Trigger>
-);
-
-export const CollapsibleContent = ({ children, ...props }) => (
-  <Accordion.Panel {...props}>{children}</Accordion.Panel>
-);

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

@@ -1,37 +0,0 @@
-import React from "react";
-import { Modal } from "@heroui/react";
-
-/**
- * HeroUI v3 Dialog — maps to Modal for shadcn compatibility.
- *
- * Sub-components via dot notation on the named `Modal` export:
- *   Modal.Backdrop, Modal.Container, Modal.Dialog,
- *   Modal.CloseTrigger, Modal.Header, Modal.Icon,
- *   Modal.Heading, Modal.Body, Modal.Footer
- *
- * @example
- *   import { Dialog, DialogTrigger, DialogContent } from "@/components/library";
- *   <Dialog>
- *     <DialogTrigger>Open</DialogTrigger>
- *     <DialogContent>
- *       <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>
- *       <DialogDescription>Content</DialogDescription>
- *       <DialogFooter>Actions</DialogFooter>
- *     </DialogContent>
- *   </Dialog>
- */
-export default function HeroUIDialog(props) {
-  return <Modal {...props} />;
-}
-
-// Shadcn-compatible exports
-export const Dialog = HeroUIDialog;
-export const DialogTrigger = Modal.Trigger || (props => <button {...props} />);
-export const DialogPortal = ({ children }) => <>{children}</>;
-export const DialogClose = Modal.CloseTrigger || (props => <button {...props} />);
-export const DialogOverlay = Modal.Backdrop || (props => <div {...props} />);
-export const DialogContent = Modal.Dialog || Modal.Container || (props => <div {...props} />);
-export const DialogHeader = Modal.Header || (props => <div {...props} />);
-export const DialogFooter = Modal.Footer || (props => <div {...props} />);
-export const DialogTitle = Modal.Heading || (props => <h2 {...props} />);
-export const DialogDescription = (props) => <p {...props} />;

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

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

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

@@ -1,37 +0,0 @@
-import React from "react";
-import { Select as HeroSelect } from "@heroui/react";
-
-/**
- * HeroUI v3 Select wrapper with shadcn compatibility.
- *
- * Translates shadcn API to HeroUI:
- * - onValueChange -> onSelectionChange
- * - value -> selectedKeys
- */
-export default function HeroUISelect({ value, onValueChange, children, ...props }) {
-  // Translate shadcn API to HeroUI API
-  const selectedKeys = value ? [value] : [];
-  const handleSelectionChange = (keys) => {
-    const selected = Array.from(keys)[0];
-    onValueChange?.(selected || "");
-  };
-
-  return (
-    <HeroSelect
-      selectedKeys={selectedKeys}
-      onSelectionChange={handleSelectionChange}
-      {...props}
-    >
-      {children}
-    </HeroSelect>
-  );
-}
-
-// For direct HeroUI usage
-export const Select = HeroUISelect;
-
-// Shadcn-compatible subcomponents that just pass through children
-export const SelectTrigger = ({ children, size, ...props }) => <>{children}</>;
-export const SelectValue = ({ placeholder, ...props }) => <span {...props}>{placeholder}</span>;
-export const SelectContent = ({ children, ...props }) => <>{children}</>;
-export const SelectItem = ({ value, children, ...props }) => <HeroSelect.Item key={value} {...props}>{children}</HeroSelect.Item>;