@schandlergarcia/sf-web-components 1.5.0 → 1.7.0

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

@@ -0,0 +1,43 @@
+import * as 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 interface HeroUIDialogProps {
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export default function HeroUIDialog(props: HeroUIDialogProps) {
+  return <Modal {...props} />;
+}
+
+// Shadcn-compatible exports
+export const Dialog = HeroUIDialog;
+const ModalAny = Modal as any;
+export const DialogTrigger = ModalAny.Trigger || ((props: any) => <button {...props} />);
+export const DialogPortal = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+export const DialogClose = ModalAny.CloseTrigger || ((props: any) => <button {...props} />);
+export const DialogOverlay = ModalAny.Backdrop || ((props: any) => <div {...props} />);
+export const DialogContent = ModalAny.Dialog || ModalAny.Container || ((props: any) => <div {...props} />);
+export const DialogHeader = ModalAny.Header || ((props: any) => <div {...props} />);
+export const DialogFooter = ModalAny.Footer || ((props: any) => <div {...props} />);
+export const DialogTitle = ModalAny.Heading || ((props: any) => <h2 {...props} />);
+export const DialogDescription = (props: any) => <p {...props} />;

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Drawer } from "@heroui/react";
 
 /**
@@ -25,7 +24,12 @@ import { Drawer } from "@heroui/react";
  *     </Drawer.Backdrop>
  *   </Drawer>
  */
-export default function HeroUIDrawer(props) {
+export interface HeroUIDrawerProps {
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export default function HeroUIDrawer(props: HeroUIDrawerProps) {
   return <Drawer {...props} />;
 }
 

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Dropdown } from "@heroui/react";
 
 /**
@@ -21,7 +20,12 @@ import { Dropdown } from "@heroui/react";
  *     </Dropdown.Popover>
  *   </Dropdown>
  */
-export default function HeroUIDropdown(props) {
+export interface HeroUIDropdownProps {
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export default function HeroUIDropdown(props: HeroUIDropdownProps) {
   return <Dropdown {...props} />;
 }
 

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/{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/{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/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/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/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/{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/{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/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/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/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/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>;