@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+/**
+ * HeroUI v3 DatePicker — simple wrapper using Popover.
+ * Full implementation would integrate with react-day-picker.
+ *
+ * @example
+ *   import { DatePicker, DatePickerTrigger, DatePickerContent } from "@/components/library";
+ *   <DatePicker>
+ *     <DatePickerTrigger>
+ *       <button>Select date</button>
+ *     </DatePickerTrigger>
+ *     <DatePickerContent>
+ *       <DatePickerCalendar />
+ *     </DatePickerContent>
+ *   </DatePicker>
+ */
+export default function HeroUIDatePicker({ children, ...props }) {
+  return <Popover {...props}>{children}</Popover>;
+}
+
+export const DatePicker = HeroUIDatePicker;
+export const DatePickerTrigger = ({ children, date, dateFormat, placeholder, className = "", ...props }) => {
+  // Accept shadcn DatePicker props but just pass through as trigger
+  return <PopoverTrigger {...props}>{children}</PopoverTrigger>;
+};
+export const DatePickerContent = PopoverContent;
+export const DatePickerCalendar = ({ date, onSelect, ...props }) => (
+  <div className="p-4" {...props}>
+    <p className="text-sm text-slate-500">Calendar placeholder - integrate react-day-picker here</p>
+  </div>
+);
+export const DatePickerRangeTrigger = DatePickerTrigger;

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

@@ -0,0 +1,37 @@
+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/Drawer.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Drawer } from "@heroui/react";
+
+/**
+ * HeroUI v3 Drawer — compound component.
+ *
+ * Sub-components via dot notation on the named `Drawer` export:
+ *   Drawer.Backdrop, Drawer.Content, Drawer.Dialog,
+ *   Drawer.Header, Drawer.Heading, Drawer.Body, Drawer.Footer,
+ *   Drawer.Handle, Drawer.CloseTrigger
+ *
+ * @example
+ *   import { Drawer } from "@/components/library";
+ *   <Drawer>
+ *     <Button>Open</Button>
+ *     <Drawer.Backdrop>
+ *       <Drawer.Content placement="right">
+ *         <Drawer.Dialog>
+ *           <Drawer.CloseTrigger />
+ *           <Drawer.Header><Drawer.Heading>Details</Drawer.Heading></Drawer.Header>
+ *           <Drawer.Body>…</Drawer.Body>
+ *           <Drawer.Footer>…</Drawer.Footer>
+ *         </Drawer.Dialog>
+ *       </Drawer.Content>
+ *     </Drawer.Backdrop>
+ *   </Drawer>
+ */
+export default function HeroUIDrawer(props) {
+  return <Drawer {...props} />;
+}
+
+export { Drawer };

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Dropdown } from "@heroui/react";
+
+/**
+ * HeroUI v3 Dropdown — compound component.
+ *
+ * Sub-components via dot notation on the named `Dropdown` export:
+ *   Dropdown.Trigger, Dropdown.Popover, Dropdown.Menu,
+ *   Dropdown.Item, Dropdown.Section, Dropdown.ItemIndicator,
+ *   Dropdown.SubmenuTrigger, Dropdown.SubmenuIndicator
+ *
+ * @example
+ *   import { Dropdown } from "@/components/library";
+ *   <Dropdown>
+ *     <Button>Actions</Button>
+ *     <Dropdown.Popover>
+ *       <Dropdown.Menu onAction={(key) => console.log(key)}>
+ *         <Dropdown.Item id="edit" textValue="Edit"><Label>Edit</Label></Dropdown.Item>
+ *         <Dropdown.Item id="delete" textValue="Delete" variant="danger"><Label>Delete</Label></Dropdown.Item>
+ *       </Dropdown.Menu>
+ *     </Dropdown.Popover>
+ *   </Dropdown>
+ */
+export default function HeroUIDropdown(props) {
+  return <Dropdown {...props} />;
+}
+
+export { Dropdown };

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+/**
+ * HeroUI v3 Field components — simple wrappers for form field layout.
+ *
+ * @example
+ *   import { Field, FieldLabel, FieldError } from "@/components/library";
+ *   <Field>
+ *     <FieldLabel>Name</FieldLabel>
+ *     <Input />
+ *     <FieldError>Required</FieldError>
+ *   </Field>
+ */
+export default function HeroUIField({ className = "", children, ...props }) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export const Field = HeroUIField;
+
+export const FieldLabel = ({ className = "", htmlFor, children, ...props }) => (
+  <label
+    htmlFor={htmlFor}
+    className={`text-sm font-medium text-slate-700 dark:text-slate-200 ${className}`}
+    {...props}
+  >
+    {children}
+  </label>
+);
+
+export const FieldDescription = ({ className = "", children, ...props }) => (
+  <p className={`text-xs text-slate-500 dark:text-slate-400 ${className}`} {...props}>
+    {children}
+  </p>
+);
+
+export const FieldError = ({ className = "", errors, children, ...props }) => {
+  // Support both children and errors prop
+  const errorContent = errors?.length > 0 ? errors.join(", ") : children;
+
+  if (!errorContent) return null;
+
+  return (
+    <p className={`text-xs text-red-600 dark:text-red-400 ${className}`} {...props}>
+      {errorContent}
+    </p>
+  );
+};

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

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

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

@@ -0,0 +1,8 @@
+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/Meter.jsx

@@ -0,0 +1,8 @@
+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/Modal.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Modal } from "@heroui/react";
+
+/**
+ * HeroUI v3 Modal — compound component.
+ *
+ * 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 { Modal } from "@/components/library";
+ *   <Modal>
+ *     <Button>Open</Button>
+ *     <Modal.Backdrop>
+ *       <Modal.Container>
+ *         <Modal.Dialog>
+ *           <Modal.CloseTrigger />
+ *           <Modal.Header><Modal.Heading>Title</Modal.Heading></Modal.Header>
+ *           <Modal.Body>…</Modal.Body>
+ *           <Modal.Footer>…</Modal.Footer>
+ *         </Modal.Dialog>
+ *       </Modal.Container>
+ *     </Modal.Backdrop>
+ *   </Modal>
+ */
+export default function HeroUIModal(props) {
+  return <Modal {...props} />;
+}
+
+export { Modal };

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

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

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

@@ -0,0 +1,64 @@
+import React from "react";
+
+/**
+ * HeroUI v3 Popover — simple popover for shadcn compatibility.
+ * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.
+ *
+ * @example
+ *   import { Popover, PopoverTrigger, PopoverContent } from "@/components/library";
+ *   <Popover>
+ *     <PopoverTrigger>Open</PopoverTrigger>
+ *     <PopoverContent>Content</PopoverContent>
+ *   </Popover>
+ */
+export default function HeroUIPopover({ children, open, onOpenChange, ...props }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isControlled = open !== undefined;
+  const actualOpen = isControlled ? open : isOpen;
+
+  const handleOpenChange = (newOpen) => {
+    if (!isControlled) setIsOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  return (
+    <div className="relative inline-block" {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange });
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+export const Popover = HeroUIPopover;
+
+export const PopoverTrigger = ({ children, open, onOpenChange, ...props }) => {
+  const handleClick = () => onOpenChange?.(!open);
+
+  return React.cloneElement(children, {
+    ...props,
+    onClick: handleClick,
+  });
+};
+
+export const PopoverContent = ({ children, open, className = "", align = "center", sideOffset = 4, ...props }) => {
+  if (!open) return null;
+
+  const alignClasses = {
+    start: "left-0",
+    center: "left-1/2 -translate-x-1/2",
+    end: "right-0"
+  };
+
+  return (
+    <div
+      className={`absolute z-50 mt-${sideOffset} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${alignClasses[align] || alignClasses.center} ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,37 @@
+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>;

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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Tabs } from "@heroui/react";
+
+/**
+ * HeroUI v3 Tabs — compound component.
+ *
+ * Sub-components via dot notation on the named `Tabs` export:
+ *   Tabs.List, Tabs.ListContainer, Tabs.Tab, Tabs.Panel,
+ *   Tabs.Separator, Tabs.Indicator
+ *
+ * @example
+ *   import { Tabs } from "@/components/library";
+ *   <Tabs>
+ *     <Tabs.List aria-label="Options">
+ *       <Tabs.Tab id="overview">Overview</Tabs.Tab>
+ *       <Tabs.Tab id="analytics">Analytics</Tabs.Tab>
+ *     </Tabs.List>
+ *     <Tabs.Panel id="overview">…</Tabs.Panel>
+ *     <Tabs.Panel id="analytics">…</Tabs.Panel>
+ *   </Tabs>
+ */
+export default function HeroUITabs({ variant = "primary", ...props }) {
+  return <Tabs variant={variant} {...props} />;
+}
+
+export { Tabs };

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Toast, toast } from "@heroui/react";
+
+/**
+ * HeroUI v3 Toast — notification system.
+ *
+ * SETUP: Add <Toast.Provider /> to your app root (_app.js).
+ *
+ * Then call the `toast` function from anywhere:
+ *   toast("Event created");
+ *   toast.success("Saved!");
+ *   toast.warning("Check settings");
+ *   toast.danger("Something failed");
+ *   toast.promise(asyncFn(), { loading: "…", success: "Done", error: "Failed" });
+ *
+ * Sub-components via dot notation on the named `Toast` export:
+ *   Toast.Provider, Toast.Indicator, Toast.Content,
+ *   Toast.Title, Toast.Description, Toast.ActionButton,
+ *   Toast.CloseButton
+ */
+export default function HeroUIToast(props) {
+  return <Toast {...props} />;
+}
+
+export { Toast, toast };

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Switch } from "@heroui/react";
+import { useThemeMode } from "../theme/AppThemeProvider";
+
+export default function HeroUIToggle({ label = "Dark mode", ...props }) {
+  const { mode, toggle } = useThemeMode();
+  const isSelected = mode === "dark";
+
+  return (
+    <Switch isSelected={isSelected} onChange={toggle} {...props}>
+      <Switch.Content>{label}</Switch.Content>
+    </Switch>
+  );
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Tooltip } from "@heroui/react";
+
+/**
+ * HeroUI v3 Tooltip — compound component.
+ *
+ * Sub-components via dot notation on the named `Tooltip` export:
+ *   Tooltip.Trigger, Tooltip.Content, Tooltip.Arrow
+ *
+ * @example
+ *   import { Tooltip } from "@/components/library";
+ *   <Tooltip>
+ *     <Tooltip.Trigger><Button>Hover me</Button></Tooltip.Trigger>
+ *     <Tooltip.Content>Helpful info</Tooltip.Content>
+ *   </Tooltip>
+ */
+export default function HeroUITooltip(props) {
+  return <Tooltip {...props} />;
+}
+
+export { Tooltip };

package/src/components/library/index.jsx

@@ -0,0 +1,146 @@
+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 UIToggle } from "./ui/Toggle";
+export { default as UIText } from "./ui/Text";
+export { default as UICard, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./ui/Card";
+export { default as UIContainer } from "./ui/Container";
+export { default as UIChip } from "./ui/Chip";
+export { default as Avatar } from "./ui/Avatar";
+export { default as Spinner } from "./ui/Spinner";
+export { default as EmptyState } from "./ui/EmptyState";
+export { default as Label } from "./ui/Label";
+export { default as Checkbox } from "./ui/Checkbox";
+export { default as FieldGroup } from "./ui/FieldGroup";
+
+// Cards
+export { default as BaseCard } from "./cards/BaseCard";
+export { default as ChartCard } from "./cards/ChartCard";
+export { default as ListCard } from "./cards/ListCard";
+export { default as MetricCard } from "./cards/MetricCard";
+export { default as SectionCard } from "./cards/SectionCard";
+export { default as StatusCard } from "./cards/StatusCard";
+export { default as TableCard } from "./cards/TableCard";
+export { default as WidgetCard } from "./cards/WidgetCard";
+export { default as FeedPanel } from "./cards/FeedPanel";
+export { default as ActivityCard } from "./cards/ActivityCard";
+export { default as MetricsStrip } from "./cards/MetricsStrip";
+export { default as CalloutCard } from "./cards/CalloutCard";
+export { default as ActionList } from "./cards/ActionList";
+
+// Charts
+export { default as D3Chart } from "./charts/D3Chart";
+export { D3ChartTemplates } from "./charts/D3ChartTemplates";
+export { default as GeoMap } from "./charts/GeoMap";
+
+// Layout
+export { default as PageContainer } from "./layout/PageContainer";
+
+// Skeletons
+export { default as CardSkeleton } from "./skeletons/CardSkeleton";
+
+// Forms
+export { FormModal, FormRenderer, FormSection, FormField, useFormState } from "./forms";
+
+// Filters
+export { FilterBar, SearchFilter, SelectFilter, ToggleFilter } from "./filters";
+
+// Data mode
+export { default as DataModeProvider, useDataMode } from "./data/DataModeProvider";
+export { default as DataModeToggle } from "./data/DataModeToggle";
+export { default as useDataSource } from "./data/useDataSource";
+
+// Data utilities
+export { default as usePageFilters } from "./data/usePageFilters";
+export {
+  filterBySearch,
+  filterByValue,
+  filterByToggle,
+  filterByDateRange,
+  sortByKey,
+  applyFilters,
+} from "./data/filterUtils";
+
+// Chat / AI agent
+export {
+  ChatPanel,
+  ChatBar,
+  ChatMessageList,
+  ChatMessage,
+  ChatInput,
+  ChatTypingIndicator,
+  ChatSuggestions,
+  ChatToolCall,
+  ChatWelcome,
+  useChatState,
+} from "./chat";
+
+// HeroUI wrappers — existing
+export { default as HeroUIButton, Button } from "./heroui/Button";
+export { default as HeroUIInput } from "./heroui/Input";
+export { default as HeroUICard } from "./heroui/Card";
+export { default as HeroUIToggle } from "./heroui/Toggle";
+
+// HeroUI wrappers — navigation & layout
+export { default as HeroUITabs, Tabs } from "./heroui/Tabs";
+export { default as HeroUIAccordion, Accordion } from "./heroui/Accordion";
+export { default as HeroUIBreadcrumbs, Breadcrumbs } from "./heroui/Breadcrumbs";
+export { default as HeroUISeparator, Separator } from "./heroui/Separator";
+export { default as HeroUIPagination, Pagination } from "./heroui/Pagination";
+
+// Breadcrumb subcomponents for shadcn compatibility
+export const Breadcrumb = ({ children, ...props }) => <nav aria-label="breadcrumb" {...props}>{children}</nav>;
+export const BreadcrumbList = ({ children, ...props }) => <ol className="flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400" {...props}>{children}</ol>;
+export const BreadcrumbItem = ({ children, ...props }) => <li className="inline-flex items-center gap-1.5" {...props}>{children}</li>;
+export const BreadcrumbLink = ({ href, children, asChild, ...props }) => asChild ? <span {...props}>{children}</span> : <a href={href} className="transition-colors hover:text-slate-900 dark:hover:text-slate-50" {...props}>{children}</a>;
+export const BreadcrumbPage = ({ children, ...props }) => <span role="link" aria-disabled="true" aria-current="page" className="font-normal text-slate-900 dark:text-slate-50" {...props}>{children}</span>;
+export const BreadcrumbSeparator = ({ children, ...props }) => <li role="presentation" aria-hidden="true" {...props}>{children ?? "/"}</li>;
+export const BreadcrumbEllipsis = (props) => <span role="presentation" aria-hidden="true" {...props}>...</span>;
+
+// Pagination subcomponents for shadcn compatibility
+export const PaginationContent = ({ children, ...props }) => <ul className="flex flex-row items-center gap-1" {...props}>{children}</ul>;
+export const PaginationItem = ({ children, ...props }) => <li {...props}>{children}</li>;
+export const PaginationLink = ({ href, isActive, children, ...props }) => <a href={href} aria-current={isActive ? "page" : undefined} className={`inline-flex items-center justify-center rounded-md text-sm font-medium h-9 min-w-9 px-4 py-2 ${isActive ? "bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900" : "hover:bg-slate-100 dark:hover:bg-slate-800"}`} {...props}>{children}</a>;
+export const PaginationPrevious = ({ href, ...props }) => <PaginationLink href={href} {...props}>Previous</PaginationLink>;
+export const PaginationNext = ({ href, ...props }) => <PaginationLink href={href} {...props}>Next</PaginationLink>;
+export const PaginationEllipsis = (props) => <span aria-hidden {...props}>...</span>;
+
+// HeroUI wrappers — overlays
+export { default as HeroUIDrawer, Drawer } from "./heroui/Drawer";
+export { default as HeroUIModal, Modal } from "./heroui/Modal";
+export { default as HeroUIDropdown, Dropdown } from "./heroui/Dropdown";
+export { default as HeroUITooltip, Tooltip } from "./heroui/Tooltip";
+export { default as HeroUIToast, Toast, toast } from "./heroui/Toast";
+
+// HeroUI wrappers — feedback
+export { default as HeroUIAlert } from "./heroui/Alert";
+export { default as HeroUIBadge, Badge } from "./heroui/Badge";
+export { default as HeroUIProgressBar, ProgressBar } from "./heroui/ProgressBar";
+export { default as HeroUIProgressCircle, ProgressCircle } from "./heroui/ProgressCircle";
+export { default as HeroUIMeter, Meter } from "./heroui/Meter";
+export { default as HeroUISkeleton, Skeleton } from "./heroui/Skeleton";
+
+// shadcn-compatible components from ui/
+export { default as Alert, AlertTitle, AlertDescription, AlertAction } from "./ui/Alert";
+
+// shadcn-compatible components from heroui/ (HeroUI-based)
+export { default as HeroUIDialog, Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "./heroui/Dialog";
+export { default as HeroUIField, Field, FieldLabel, FieldDescription, FieldError } from "./heroui/Field";
+export { default as HeroUICollapsible, Collapsible, CollapsibleTrigger, CollapsibleContent } from "./heroui/Collapsible";
+export { default as HeroUIPopover, Popover, PopoverTrigger, PopoverContent } from "./heroui/Popover";
+export { default as HeroUIDatePicker, DatePicker, DatePickerTrigger, DatePickerContent, DatePickerCalendar, DatePickerRangeTrigger } from "./heroui/DatePicker";
+
+// HeroUI wrappers — pickers & forms
+export { default as HeroUISelect, Select } from "./heroui/Select";
+
+// Re-export Select subcomponents for shadcn compatibility
+export const SelectTrigger = ({ children, size, ...props }) => <button {...props}>{children}</button>;
+export const SelectValue = ({ placeholder, ...props }) => <span {...props}>{placeholder}</span>;
+export const SelectContent = ({ children, ...props }) => <div {...props}>{children}</div>;
+export const SelectItem = ({ children, ...props }) => <div {...props}>{children}</div>;
+
+// HeroUI wrappers — utilities
+export { default as HeroUIKbd, Kbd } from "./heroui/Kbd";
+export { default as HeroUIScrollShadow, ScrollShadow } from "./heroui/ScrollShadow";

package/src/components/library/layout/PageContainer.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function PageContainer({ className = "", children }) {
+  return (
+    <div className={["mx-auto w-full max-w-6xl px-4 sm:px-6", className].filter(Boolean).join(" ")}>
+      {children}
+    </div>
+  );
+}
+
+