Vectrum
Sign In
91 lines · 2.9 KB · TypeScript
"use client";

/**
 * MetalUI's compound parts under flat names. Every MetalUI export is a client component, and a server
 * component can't dot into a client module (`Card.Title` fails there), so server components import
 * the parts from here instead: `import { CardTitle } from "@/components/metal"`.
 * Client components may use the dotted names from "@unlocalhosted/metalui" directly.
 */
import {
  Accordion,
  AlertDialog,
  Card,
  Chip,
  Dialog,
  Field,
  Fieldset,
  FormField,
  Popover,
  Row,
  Settings,
  Sheet,
  Sidebar,
  Skeleton,
  SplitPane,
} from "@unlocalhosted/metalui";

export const CardTitle = Card.Title;
export const CardDescription = Card.Description;
export const CardFooter = Card.Footer;
export const CardMedia = Card.Media;

export const SidebarHeader = Sidebar.Header;
export const SidebarSection = Sidebar.Section;
export const SidebarItem = Sidebar.Item;
export const SidebarFooter = Sidebar.Footer;
export const SidebarToggle = Sidebar.Toggle;

export const FieldIcon = Field.Icon;
export const FieldInput = Field.Input;
export const FieldTrail = Field.Trail;

export const FormFieldLabel = FormField.Label;
export const FormFieldDescription = FormField.Description;
export const FormFieldError = FormField.Error;
export const FieldsetLegend = Fieldset.Legend;

export const SettingsSection = Settings.Section;
export const SettingsRow = Settings.Row;
export const SettingsKeys = Settings.Keys;

export const RowLead = Row.Lead;
export const RowText = Row.Text;
export const RowTrail = Row.Trail;

export const ChipLead = Chip.Lead;
export const ChipText = Chip.Text;
export const ChipActions = Chip.Actions;

export const PopoverTrigger = Popover.Trigger;
export const PopoverContent = Popover.Content;
export const PopoverTitle = Popover.Title;
export const PopoverDescription = Popover.Description;
export const PopoverBody = Popover.Body;
export const PopoverClose = Popover.Close;

export const DialogPopup = Dialog.Popup;
export const DialogTitle = Dialog.Title;
export const DialogActions = Dialog.Actions;

export const AlertDialogPopup = AlertDialog.Popup;
export const AlertDialogTitle = AlertDialog.Title;
export const AlertDialogDescription = AlertDialog.Description;
export const AlertDialogActions = AlertDialog.Actions;
export const AlertDialogCancel = AlertDialog.Cancel;
export const AlertDialogConfirm = AlertDialog.Confirm;

export const SheetTrigger = Sheet.Trigger;
export const SheetPopup = Sheet.Popup;
export const SheetTitle = Sheet.Title;
export const SheetDescription = Sheet.Description;
export const SheetClose = Sheet.Close;

export const SkeletonText = Skeleton.Text;
export const SkeletonCircle = Skeleton.Circle;
export const SkeletonSwap = Skeleton.Swap;

export const SplitPanePane = SplitPane.Pane;

export const AccordionItem = Accordion.Item;
export const AccordionTrigger = Accordion.Trigger;
export const AccordionPanel = Accordion.Panel;