mac-human-design 0.1.3 → 0.1.6

package/src/components/MacBaseUI.tsx

@@ -0,0 +1,688 @@
+import * as React from "react";
+import {
+  MotionConfig,
+  motion,
+  type MotionConfigProps,
+  type MotionProps,
+  type TargetAndTransition,
+  type Transition,
+} from "motion/react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { CSPProvider as BaseCSPProvider } from "@base-ui/react/csp-provider";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { Field as BaseField } from "@base-ui/react/field";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { Form as BaseForm } from "@base-ui/react/form";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+
+type AnyComponent = React.ComponentType<any>;
+type ClassNameProp = string | ((state: any) => string | undefined) | undefined;
+type MacAnimatedComponent<C extends AnyComponent> = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<React.ComponentPropsWithoutRef<C> & MotionProps> & React.RefAttributes<unknown>
+>;
+type MotionDefaults = Pick<
+  MotionProps,
+  "initial" | "animate" | "exit" | "layout" | "whileFocus" | "whileHover" | "whileTap"
+> & {
+  transition?: Transition;
+};
+
+const macDefaultTransition: Transition = {
+  default: { type: "spring", stiffness: 520, damping: 38, mass: 0.8 },
+  opacity: { duration: 0.12, ease: "easeOut" },
+};
+
+const macFastTransition: Transition = {
+  default: { type: "spring", stiffness: 680, damping: 44, mass: 0.7 },
+  opacity: { duration: 0.09, ease: "easeOut" },
+};
+
+const macSoftTransition: Transition = {
+  default: { type: "spring", stiffness: 420, damping: 34, mass: 0.9 },
+  opacity: { duration: 0.14, ease: "easeOut" },
+};
+
+export type MacMotionProviderProps = React.PropsWithChildren<{
+  reducedMotion?: MotionConfigProps["reducedMotion"];
+  transition?: MotionConfigProps["transition"];
+}>;
+
+export function MacMotionProvider({
+  children,
+  reducedMotion = "user",
+  transition = macDefaultTransition,
+}: MacMotionProviderProps) {
+  return (
+    <MotionConfig reducedMotion={reducedMotion} transition={transition}>
+      {children}
+    </MotionConfig>
+  );
+}
+
+function joinClasses(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function mergeClassName(macClassName: string, className: ClassNameProp): ClassNameProp {
+  if (typeof className === "function") {
+    return (state: any) => joinClasses(macClassName, className(state));
+  }
+  return joinClasses(macClassName, className);
+}
+
+function includesAny(value: string, tokens: string[]) {
+  return tokens.some((token) => value.includes(token));
+}
+
+function isDisabled(props: Record<string, unknown>) {
+  return Boolean(props.disabled || props["data-disabled"] || props["aria-disabled"]);
+}
+
+function interactiveControlDefaults(macClassName: string, props: Record<string, unknown>): MotionDefaults {
+  if (isDisabled(props)) {
+    return {};
+  }
+
+  return {
+    whileHover: { y: -0.5, scale: 1.012 },
+    whileTap: { y: 1, scale: 0.985 },
+    transition: macFastTransition,
+  };
+}
+
+function fadeScaleDefaults(
+  initial: TargetAndTransition,
+  animate: TargetAndTransition = { opacity: 1, scale: 1, y: 0, x: 0 },
+  transition: Transition = macSoftTransition,
+): MotionDefaults {
+  return {
+    initial,
+    animate,
+    exit: initial,
+    transition,
+  };
+}
+
+function getMotionDefaults(macClassName: string, props: Record<string, unknown>): MotionDefaults {
+  if (
+    includesAny(macClassName, [
+      "hd-mac-button",
+      "hd-mac-select-trigger",
+      "hd-mac-toggle",
+      "hd-mac-toolbar-button",
+      "hd-mac-stepper-button",
+      "hd-mac-disclosure-trigger",
+    ])
+  ) {
+    return interactiveControlDefaults(macClassName, props);
+  }
+
+  if (macClassName.includes("hd-mac-input")) {
+    return {
+      whileFocus: { scale: 1.004 },
+      transition: macFastTransition,
+    };
+  }
+
+  if (includesAny(macClassName, ["hd-mac-checkbox-indicator", "hd-mac-radio-indicator"])) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.72 }, { opacity: 1, scale: 1 });
+  }
+
+  if (macClassName.includes("hd-mac-switch-thumb") || macClassName.includes("hd-mac-slider-thumb")) {
+    return {
+      layout: true,
+      whileTap: { scale: 0.92 },
+      transition: macDefaultTransition,
+    };
+  }
+
+  if (includesAny(macClassName, ["hd-mac-progress-indicator", "hd-mac-meter-indicator", "hd-mac-slider-indicator"])) {
+    return {
+      layout: true,
+      transition: macSoftTransition,
+    };
+  }
+
+  if (includesAny(macClassName, ["hd-mac-popup", "hd-mac-popover", "hd-mac-preview-card"])) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.97, y: 4 });
+  }
+
+  if (macClassName.includes("hd-mac-tooltip")) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.96 }, { opacity: 1, scale: 1 }, macFastTransition);
+  }
+
+  if (macClassName.includes("hd-mac-backdrop")) {
+    return fadeScaleDefaults({ opacity: 0 }, { opacity: 1 }, { duration: 0.16, ease: "easeOut" });
+  }
+
+  if (macClassName.includes("hd-mac-sheet-dialog")) {
+    return fadeScaleDefaults({ opacity: 0, y: -18, scale: 0.985 });
+  }
+
+  if (macClassName.includes("hd-mac-alert-dialog")) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.94, y: 8 }, { opacity: 1, scale: 1, y: 0 });
+  }
+
+  if (macClassName.includes("hd-mac-dialog")) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.965, y: 10 });
+  }
+
+  if (macClassName.includes("hd-mac-sidebar-drawer")) {
+    return fadeScaleDefaults({ opacity: 0, x: -22 }, { opacity: 1, x: 0 });
+  }
+
+  if (macClassName.includes("hd-mac-drawer")) {
+    return fadeScaleDefaults({ opacity: 0, y: 18 }, { opacity: 1, y: 0 });
+  }
+
+  if (includesAny(macClassName, ["hd-mac-accordion-panel", "hd-mac-collapsible-panel", "hd-mac-tab-panel"])) {
+    return {
+      initial: { opacity: 0, y: 4 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 4 },
+      layout: true,
+      transition: macSoftTransition,
+    };
+  }
+
+  if (includesAny(macClassName, ["hd-mac-menu-item", "hd-mac-menu-row"])) {
+    return fadeScaleDefaults({ opacity: 0, x: -3 }, { opacity: 1, x: 0 }, macFastTransition);
+  }
+
+  if (includesAny(macClassName, ["hd-mac-menu-item-indicator", "hd-mac-control-icon"])) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.76 }, { opacity: 1, scale: 1 }, macFastTransition);
+  }
+
+  if (includesAny(macClassName, ["hd-mac-avatar", "hd-mac-avatar-image", "hd-mac-avatar-fallback"])) {
+    return fadeScaleDefaults({ opacity: 0, scale: 0.92 });
+  }
+
+  if (includesAny(macClassName, ["hd-mac-error-text", "hd-mac-help-text", "hd-mac-status-text", "hd-mac-validity"])) {
+    return fadeScaleDefaults({ opacity: 0, y: -3 }, { opacity: 1, y: 0 }, macFastTransition);
+  }
+
+  if (includesAny(macClassName, ["hd-mac-separator", "hd-mac-fieldset", "hd-mac-form"])) {
+    return {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.12, ease: "easeOut" },
+    };
+  }
+
+  return {
+    layout: includesAny(macClassName, ["hd-mac-toggle-group", "hd-mac-tabs", "hd-mac-navigation-menu"]),
+    transition: macDefaultTransition,
+  };
+}
+
+function macPart<C extends AnyComponent>(Component: C, macClassName: string) {
+  const BaseWrapped = React.forwardRef<unknown, React.ComponentPropsWithoutRef<C>>((props, ref) => {
+    const TypedComponent = Component as AnyComponent;
+    const { className, ...rest } = props as Record<string, unknown>;
+    return React.createElement(TypedComponent, {
+      ...rest,
+      ref,
+      className: mergeClassName(macClassName, className as ClassNameProp),
+    });
+  });
+
+  BaseWrapped.displayName = `MacBase${Component.displayName ?? Component.name ?? "BaseUIPart"}`;
+
+  const MotionPart = motion.create(BaseWrapped as AnyComponent);
+  const Wrapped = React.forwardRef<unknown, React.ComponentPropsWithoutRef<C>>((props, ref) => {
+    const rest = props as Record<string, unknown>;
+    const motionDefaults = getMotionDefaults(macClassName, rest);
+    return React.createElement(MotionPart as AnyComponent, {
+      ...motionDefaults,
+      ...rest,
+      ref,
+    });
+  });
+
+  Wrapped.displayName = `Mac${Component.displayName ?? Component.name ?? "BaseUIPart"}`;
+  return Wrapped as unknown as MacAnimatedComponent<C>;
+}
+
+function macProvider<C extends AnyComponent>(Component: C) {
+  const Wrapped = React.forwardRef<unknown, React.ComponentPropsWithoutRef<C>>((props, ref) => {
+    const TypedComponent = Component as AnyComponent;
+    return React.createElement(TypedComponent, {
+      ...(props as Record<string, unknown>),
+      ref,
+    });
+  });
+  Wrapped.displayName = `Mac${Component.displayName ?? Component.name ?? "BaseUIProvider"}`;
+  return Wrapped as unknown as C;
+}
+
+export const MacAccordion = {
+  Root: macPart(BaseAccordion.Root, "hd-mac hd-mac-stack hd-mac-accordion"),
+  Item: macPart(BaseAccordion.Item, "hd-mac-accordion-item"),
+  Header: macPart(BaseAccordion.Header, "hd-mac-accordion-header"),
+  Trigger: macPart(BaseAccordion.Trigger, "hd-mac-button hd-mac-accordion-trigger"),
+  Panel: macPart(BaseAccordion.Panel, "hd-mac-accordion-panel"),
+};
+
+export const MacAlertDialog = {
+  Root: macProvider(BaseAlertDialog.Root),
+  Backdrop: macPart(BaseAlertDialog.Backdrop, "hd-mac-backdrop"),
+  Close: macPart(BaseAlertDialog.Close, "hd-mac-button hd-mac-button-plain"),
+  Description: macPart(BaseAlertDialog.Description, "hd-mac-dialog-description"),
+  Popup: macPart(BaseAlertDialog.Popup, "hd-mac hd-mac-dialog hd-mac-alert-dialog"),
+  Portal: macProvider(BaseAlertDialog.Portal),
+  Title: macPart(BaseAlertDialog.Title, "hd-mac-dialog-title"),
+  Trigger: macPart(BaseAlertDialog.Trigger, "hd-mac-button"),
+  Viewport: macPart(BaseAlertDialog.Viewport, "hd-mac-viewport"),
+};
+
+export const MacAutocomplete = {
+  Root: macPart(BaseAutocomplete.Root, "hd-mac hd-mac-field"),
+  Value: macPart(BaseAutocomplete.Value, "hd-mac-control-value"),
+  Trigger: macPart(BaseAutocomplete.Trigger, "hd-mac-button hd-mac-disclosure-trigger"),
+  Input: macPart(BaseAutocomplete.Input, "hd-mac-input"),
+  InputGroup: macPart(BaseAutocomplete.InputGroup, "hd-mac-input-group"),
+  Icon: macPart(BaseAutocomplete.Icon, "hd-mac-control-icon"),
+  Clear: macPart(BaseAutocomplete.Clear, "hd-mac-button hd-mac-button-plain hd-mac-clear-button"),
+  List: macPart(BaseAutocomplete.List, "hd-mac-listbox"),
+  Status: macPart(BaseAutocomplete.Status, "hd-mac-status-text"),
+  Portal: macProvider(BaseAutocomplete.Portal),
+  Backdrop: macPart(BaseAutocomplete.Backdrop, "hd-mac-backdrop"),
+  Positioner: macPart(BaseAutocomplete.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BaseAutocomplete.Popup, "hd-mac hd-mac-popup"),
+  Arrow: macPart(BaseAutocomplete.Arrow, "hd-mac-popup-arrow"),
+  Group: macPart(BaseAutocomplete.Group, "hd-mac-menu-group"),
+  GroupLabel: macPart(BaseAutocomplete.GroupLabel, "hd-mac-menu-group-label"),
+  Item: macPart(BaseAutocomplete.Item, "hd-mac-menu-item"),
+  Row: macPart(BaseAutocomplete.Row, "hd-mac-menu-row"),
+  Collection: macPart(BaseAutocomplete.Collection, "hd-mac-menu-collection"),
+  Empty: macPart(BaseAutocomplete.Empty, "hd-mac-empty-state"),
+  Separator: macPart(BaseAutocomplete.Separator, "hd-mac-separator"),
+};
+
+export const MacAvatar = {
+  Root: macPart(BaseAvatar.Root, "hd-mac-avatar"),
+  Image: macPart(BaseAvatar.Image, "hd-mac-avatar-image"),
+  Fallback: macPart(BaseAvatar.Fallback, "hd-mac-avatar-fallback"),
+};
+
+export const MacButton = macPart(BaseButton, "hd-mac-button");
+export const MacPrimaryButton = macPart(BaseButton, "hd-mac-button hd-mac-button-primary");
+export const MacSecondaryButton = macPart(BaseButton, "hd-mac-button hd-mac-button-secondary");
+export const MacDestructiveButton = macPart(BaseButton, "hd-mac-button hd-mac-button-destructive");
+export const MacPlainButton = macPart(BaseButton, "hd-mac-button hd-mac-button-plain");
+export const MacIconButton = macPart(BaseButton, "hd-mac-button hd-mac-icon-button");
+export const MacHelpButton = macPart(BaseButton, "hd-mac-button hd-mac-help-button");
+
+export const MacCheckbox = {
+  Root: macPart(BaseCheckbox.Root, "hd-mac-checkbox"),
+  Indicator: macPart(BaseCheckbox.Indicator, "hd-mac-checkbox-indicator"),
+};
+
+export const MacCheckboxGroup = macPart(BaseCheckboxGroup, "hd-mac hd-mac-choice-group");
+
+export const MacCollapsible = {
+  Root: macPart(BaseCollapsible.Root, "hd-mac-collapsible"),
+  Trigger: macPart(BaseCollapsible.Trigger, "hd-mac-button hd-mac-disclosure-trigger"),
+  Panel: macPart(BaseCollapsible.Panel, "hd-mac-collapsible-panel"),
+};
+
+export const MacCombobox = {
+  Root: macPart(BaseCombobox.Root, "hd-mac hd-mac-field"),
+  Label: macPart(BaseCombobox.Label, "hd-mac-label"),
+  Value: macPart(BaseCombobox.Value, "hd-mac-control-value"),
+  Input: macPart(BaseCombobox.Input, "hd-mac-input"),
+  InputGroup: macPart(BaseCombobox.InputGroup, "hd-mac-input-group"),
+  Trigger: macPart(BaseCombobox.Trigger, "hd-mac-button hd-mac-disclosure-trigger"),
+  List: macPart(BaseCombobox.List, "hd-mac-listbox"),
+  Status: macPart(BaseCombobox.Status, "hd-mac-status-text"),
+  Portal: macProvider(BaseCombobox.Portal),
+  Backdrop: macPart(BaseCombobox.Backdrop, "hd-mac-backdrop"),
+  Positioner: macPart(BaseCombobox.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BaseCombobox.Popup, "hd-mac hd-mac-popup"),
+  Arrow: macPart(BaseCombobox.Arrow, "hd-mac-popup-arrow"),
+  Icon: macPart(BaseCombobox.Icon, "hd-mac-control-icon"),
+  Group: macPart(BaseCombobox.Group, "hd-mac-menu-group"),
+  GroupLabel: macPart(BaseCombobox.GroupLabel, "hd-mac-menu-group-label"),
+  Item: macPart(BaseCombobox.Item, "hd-mac-menu-item"),
+  ItemIndicator: macPart(BaseCombobox.ItemIndicator, "hd-mac-menu-item-indicator"),
+  Chips: macPart(BaseCombobox.Chips, "hd-mac-chip-list"),
+  Chip: macPart(BaseCombobox.Chip, "hd-mac-chip"),
+  ChipRemove: macPart(BaseCombobox.ChipRemove, "hd-mac-chip-remove"),
+  Row: macPart(BaseCombobox.Row, "hd-mac-menu-row"),
+  Collection: macPart(BaseCombobox.Collection, "hd-mac-menu-collection"),
+  Empty: macPart(BaseCombobox.Empty, "hd-mac-empty-state"),
+  Clear: macPart(BaseCombobox.Clear, "hd-mac-button hd-mac-button-plain hd-mac-clear-button"),
+  Separator: macPart(BaseCombobox.Separator, "hd-mac-separator"),
+};
+
+export const MacContextMenu = {
+  Root: macProvider(BaseContextMenu.Root),
+  Trigger: macPart(BaseContextMenu.Trigger, "hd-mac-context-trigger"),
+  Backdrop: macPart(BaseContextMenu.Backdrop, "hd-mac-backdrop"),
+  Portal: macProvider(BaseContextMenu.Portal),
+  Positioner: macPart(BaseContextMenu.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BaseContextMenu.Popup, "hd-mac hd-mac-popup hd-mac-menu"),
+  Arrow: macPart(BaseContextMenu.Arrow, "hd-mac-popup-arrow"),
+  Group: macPart(BaseContextMenu.Group, "hd-mac-menu-group"),
+  GroupLabel: macPart(BaseContextMenu.GroupLabel, "hd-mac-menu-group-label"),
+  Item: macPart(BaseContextMenu.Item, "hd-mac-menu-item"),
+  CheckboxItem: macPart(BaseContextMenu.CheckboxItem, "hd-mac-menu-item"),
+  CheckboxItemIndicator: macPart(
+    BaseContextMenu.CheckboxItemIndicator,
+    "hd-mac-menu-item-indicator hd-mac-menu-checkmark-indicator",
+  ),
+  LinkItem: macPart(BaseContextMenu.LinkItem, "hd-mac-menu-item"),
+  RadioGroup: macPart(BaseContextMenu.RadioGroup, "hd-mac-menu-group"),
+  RadioItem: macPart(BaseContextMenu.RadioItem, "hd-mac-menu-item"),
+  RadioItemIndicator: macPart(
+    BaseContextMenu.RadioItemIndicator,
+    "hd-mac-menu-item-indicator hd-mac-menu-dot-indicator",
+  ),
+  SubmenuRoot: macProvider(BaseContextMenu.SubmenuRoot),
+  SubmenuTrigger: macPart(BaseContextMenu.SubmenuTrigger, "hd-mac-menu-item hd-mac-submenu-trigger"),
+  Separator: macPart(BaseContextMenu.Separator, "hd-mac-separator"),
+};
+
+export const MacCSPProvider = macProvider(BaseCSPProvider);
+
+export const MacDialog = {
+  Backdrop: macPart(BaseDialog.Backdrop, "hd-mac-backdrop"),
+  Close: macPart(BaseDialog.Close, "hd-mac-button hd-mac-button-plain"),
+  Description: macPart(BaseDialog.Description, "hd-mac-dialog-description"),
+  Popup: macPart(BaseDialog.Popup, "hd-mac hd-mac-dialog"),
+  SheetPopup: macPart(BaseDialog.Popup, "hd-mac hd-mac-dialog hd-mac-sheet-dialog"),
+  Portal: macProvider(BaseDialog.Portal),
+  Root: macProvider(BaseDialog.Root),
+  Viewport: macPart(BaseDialog.Viewport, "hd-mac-viewport"),
+  Title: macPart(BaseDialog.Title, "hd-mac-dialog-title"),
+  Trigger: macPart(BaseDialog.Trigger, "hd-mac-button"),
+};
+
+export const MacDirectionProvider = macProvider(BaseDirectionProvider);
+
+export const MacDrawer = {
+  Backdrop: macPart(BaseDrawer.Backdrop, "hd-mac-backdrop"),
+  Close: macPart(BaseDrawer.Close, "hd-mac-button hd-mac-button-plain"),
+  Content: macPart(BaseDrawer.Content, "hd-mac-drawer-content"),
+  Description: macPart(BaseDrawer.Description, "hd-mac-dialog-description"),
+  Indent: macPart(BaseDrawer.Indent, "hd-mac-drawer-indent"),
+  IndentBackground: macPart(BaseDrawer.IndentBackground, "hd-mac-drawer-indent-background"),
+  Popup: macPart(BaseDrawer.Popup, "hd-mac hd-mac-drawer"),
+  SidebarPopup: macPart(BaseDrawer.Popup, "hd-mac hd-mac-drawer hd-mac-sidebar-drawer"),
+  Portal: macProvider(BaseDrawer.Portal),
+  Provider: macProvider(BaseDrawer.Provider),
+  Root: macProvider(BaseDrawer.Root),
+  SwipeArea: macPart(BaseDrawer.SwipeArea, "hd-mac-drawer-swipe-area"),
+  Title: macPart(BaseDrawer.Title, "hd-mac-dialog-title"),
+  Trigger: macPart(BaseDrawer.Trigger, "hd-mac-button"),
+  Viewport: macPart(BaseDrawer.Viewport, "hd-mac-viewport"),
+};
+
+export const MacField = {
+  Root: macPart(BaseField.Root, "hd-mac-field"),
+  Label: macPart(BaseField.Label, "hd-mac-label"),
+  Error: macPart(BaseField.Error, "hd-mac-error-text"),
+  Description: macPart(BaseField.Description, "hd-mac-help-text"),
+  Control: macPart(BaseField.Control, "hd-mac-field-control"),
+  Validity: macPart(BaseField.Validity, "hd-mac-validity"),
+  Item: macPart(BaseField.Item, "hd-mac-field-item"),
+};
+
+export const MacFieldset = {
+  Root: macPart(BaseFieldset.Root, "hd-mac-fieldset"),
+  Legend: macPart(BaseFieldset.Legend, "hd-mac-fieldset-legend"),
+};
+
+export const MacForm = macPart(BaseForm, "hd-mac-form");
+export const MacInput = macPart(BaseInput, "hd-mac-input");
+export const MacTextField = MacInput;
+export const MacSearchField = macPart(BaseInput, "hd-mac-input hd-mac-search-field");
+
+export const MacMenu = {
+  Arrow: macPart(BaseMenu.Arrow, "hd-mac-popup-arrow"),
+  Backdrop: macPart(BaseMenu.Backdrop, "hd-mac-backdrop"),
+  CheckboxItem: macPart(BaseMenu.CheckboxItem, "hd-mac-menu-item"),
+  CheckboxItemIndicator: macPart(
+    BaseMenu.CheckboxItemIndicator,
+    "hd-mac-menu-item-indicator hd-mac-menu-checkmark-indicator",
+  ),
+  Group: macPart(BaseMenu.Group, "hd-mac-menu-group"),
+  GroupLabel: macPart(BaseMenu.GroupLabel, "hd-mac-menu-group-label"),
+  Item: macPart(BaseMenu.Item, "hd-mac-menu-item"),
+  LinkItem: macPart(BaseMenu.LinkItem, "hd-mac-menu-item"),
+  Popup: macPart(BaseMenu.Popup, "hd-mac hd-mac-popup hd-mac-menu"),
+  Portal: macProvider(BaseMenu.Portal),
+  Positioner: macPart(BaseMenu.Positioner, "hd-mac-positioner"),
+  RadioGroup: macPart(BaseMenu.RadioGroup, "hd-mac-menu-group"),
+  RadioItem: macPart(BaseMenu.RadioItem, "hd-mac-menu-item"),
+  RadioItemIndicator: macPart(
+    BaseMenu.RadioItemIndicator,
+    "hd-mac-menu-item-indicator hd-mac-menu-dot-indicator",
+  ),
+  Root: macProvider(BaseMenu.Root),
+  SubmenuRoot: macProvider(BaseMenu.SubmenuRoot),
+  Trigger: macPart(BaseMenu.Trigger, "hd-mac-button"),
+  Viewport: macPart(BaseMenu.Viewport, "hd-mac-viewport"),
+  SubmenuTrigger: macPart(BaseMenu.SubmenuTrigger, "hd-mac-menu-item hd-mac-submenu-trigger"),
+  Separator: macPart(BaseMenu.Separator, "hd-mac-separator"),
+};
+
+export const MacMenubar = macPart(BaseMenubar, "hd-mac hd-mac-menubar");
+
+export const MacMeter = {
+  Root: macPart(BaseMeter.Root, "hd-mac-meter"),
+  Track: macPart(BaseMeter.Track, "hd-mac-meter-track"),
+  Indicator: macPart(BaseMeter.Indicator, "hd-mac-meter-indicator"),
+  Value: macPart(BaseMeter.Value, "hd-mac-meter-value"),
+  Label: macPart(BaseMeter.Label, "hd-mac-label"),
+};
+
+export const MacNavigationMenu = {
+  Root: macPart(BaseNavigationMenu.Root, "hd-mac hd-mac-navigation-menu"),
+  List: macPart(BaseNavigationMenu.List, "hd-mac-navigation-list"),
+  Item: macPart(BaseNavigationMenu.Item, "hd-mac-navigation-item"),
+  Content: macPart(BaseNavigationMenu.Content, "hd-mac-navigation-content"),
+  Trigger: macPart(BaseNavigationMenu.Trigger, "hd-mac-button hd-mac-navigation-trigger"),
+  Portal: macProvider(BaseNavigationMenu.Portal),
+  Positioner: macPart(BaseNavigationMenu.Positioner, "hd-mac-positioner"),
+  Viewport: macPart(BaseNavigationMenu.Viewport, "hd-mac-viewport"),
+  Backdrop: macPart(BaseNavigationMenu.Backdrop, "hd-mac-backdrop"),
+  Popup: macPart(BaseNavigationMenu.Popup, "hd-mac hd-mac-popup"),
+  Arrow: macPart(BaseNavigationMenu.Arrow, "hd-mac-popup-arrow"),
+  Link: macPart(BaseNavigationMenu.Link, "hd-mac-navigation-link"),
+  Icon: macPart(BaseNavigationMenu.Icon, "hd-mac-control-icon"),
+};
+
+export const MacNumberField = {
+  Root: macPart(BaseNumberField.Root, "hd-mac-number-field"),
+  Group: macPart(BaseNumberField.Group, "hd-mac-input-group"),
+  Increment: macPart(BaseNumberField.Increment, "hd-mac-stepper-button"),
+  Decrement: macPart(BaseNumberField.Decrement, "hd-mac-stepper-button"),
+  Input: macPart(BaseNumberField.Input, "hd-mac-input hd-mac-number-input"),
+  ScrubArea: macPart(BaseNumberField.ScrubArea, "hd-mac-scrub-area"),
+  ScrubAreaCursor: macPart(BaseNumberField.ScrubAreaCursor, "hd-mac-scrub-cursor"),
+};
+
+export const MacOTPField = {
+  Root: macPart(BaseOTPField.Root, "hd-mac-otp-field"),
+  Input: macPart(BaseOTPField.Input, "hd-mac-input hd-mac-otp-input"),
+  Separator: macPart(BaseOTPField.Separator, "hd-mac-otp-separator"),
+};
+
+export const MacPopover = {
+  Root: macProvider(BasePopover.Root),
+  Trigger: macPart(BasePopover.Trigger, "hd-mac-button"),
+  Portal: macProvider(BasePopover.Portal),
+  Positioner: macPart(BasePopover.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BasePopover.Popup, "hd-mac hd-mac-popup hd-mac-popover"),
+  Arrow: macPart(BasePopover.Arrow, "hd-mac-popup-arrow"),
+  Backdrop: macPart(BasePopover.Backdrop, "hd-mac-backdrop"),
+  Title: macPart(BasePopover.Title, "hd-mac-dialog-title"),
+  Description: macPart(BasePopover.Description, "hd-mac-dialog-description"),
+  Close: macPart(BasePopover.Close, "hd-mac-button hd-mac-button-plain"),
+  Viewport: macPart(BasePopover.Viewport, "hd-mac-viewport"),
+};
+
+export const MacPreviewCard = {
+  Root: macProvider(BasePreviewCard.Root),
+  Portal: macProvider(BasePreviewCard.Portal),
+  Trigger: macPart(BasePreviewCard.Trigger, "hd-mac-preview-trigger"),
+  Positioner: macPart(BasePreviewCard.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BasePreviewCard.Popup, "hd-mac hd-mac-popup hd-mac-preview-card"),
+  Arrow: macPart(BasePreviewCard.Arrow, "hd-mac-popup-arrow"),
+  Backdrop: macPart(BasePreviewCard.Backdrop, "hd-mac-backdrop"),
+  Viewport: macPart(BasePreviewCard.Viewport, "hd-mac-viewport"),
+};
+
+export const MacProgress = {
+  Root: macPart(BaseProgress.Root, "hd-mac-progress"),
+  Track: macPart(BaseProgress.Track, "hd-mac-progress-track"),
+  Indicator: macPart(BaseProgress.Indicator, "hd-mac-progress-indicator"),
+  Value: macPart(BaseProgress.Value, "hd-mac-progress-value"),
+  Label: macPart(BaseProgress.Label, "hd-mac-label"),
+};
+
+export const MacRadio = {
+  Root: macPart(BaseRadio.Root, "hd-mac-radio"),
+  Indicator: macPart(BaseRadio.Indicator, "hd-mac-radio-indicator"),
+};
+
+export const MacRadioGroup = macPart(BaseRadioGroup, "hd-mac hd-mac-choice-group");
+
+export const MacScrollArea = {
+  Root: macPart(BaseScrollArea.Root, "hd-mac-scroll-area"),
+  Viewport: macPart(BaseScrollArea.Viewport, "hd-mac-scroll-viewport"),
+  Scrollbar: macPart(BaseScrollArea.Scrollbar, "hd-mac-scrollbar"),
+  Content: macPart(BaseScrollArea.Content, "hd-mac-scroll-content"),
+  Thumb: macPart(BaseScrollArea.Thumb, "hd-mac-scroll-thumb"),
+  Corner: macPart(BaseScrollArea.Corner, "hd-mac-scroll-corner"),
+};
+
+export const MacSelect = {
+  Root: macProvider(BaseSelect.Root),
+  Label: macPart(BaseSelect.Label, "hd-mac-label"),
+  Trigger: macPart(BaseSelect.Trigger, "hd-mac-select-trigger"),
+  PopUpButtonTrigger: macPart(BaseSelect.Trigger, "hd-mac-select-trigger hd-mac-pop-up-button"),
+  PullDownButtonTrigger: macPart(BaseSelect.Trigger, "hd-mac-button hd-mac-pull-down-button"),
+  Value: macPart(BaseSelect.Value, "hd-mac-control-value"),
+  Icon: macPart(BaseSelect.Icon, "hd-mac-control-icon"),
+  Portal: macProvider(BaseSelect.Portal),
+  Backdrop: macPart(BaseSelect.Backdrop, "hd-mac-backdrop"),
+  Positioner: macPart(BaseSelect.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BaseSelect.Popup, "hd-mac hd-mac-popup"),
+  List: macPart(BaseSelect.List, "hd-mac-listbox"),
+  Item: macPart(BaseSelect.Item, "hd-mac-menu-item"),
+  ItemIndicator: macPart(
+    BaseSelect.ItemIndicator,
+    "hd-mac-menu-item-indicator hd-mac-menu-checkmark-indicator",
+  ),
+  ItemText: macPart(BaseSelect.ItemText, "hd-mac-menu-item-text"),
+  Arrow: macPart(BaseSelect.Arrow, "hd-mac-popup-arrow"),
+  ScrollDownArrow: macPart(BaseSelect.ScrollDownArrow, "hd-mac-scroll-arrow"),
+  ScrollUpArrow: macPart(BaseSelect.ScrollUpArrow, "hd-mac-scroll-arrow"),
+  Group: macPart(BaseSelect.Group, "hd-mac-menu-group"),
+  GroupLabel: macPart(BaseSelect.GroupLabel, "hd-mac-menu-group-label"),
+  Separator: macPart(BaseSelect.Separator, "hd-mac-separator"),
+};
+
+export const MacSeparator = macPart(BaseSeparator, "hd-mac-separator");
+
+export const MacSlider = {
+  Root: macPart(BaseSlider.Root, "hd-mac-slider"),
+  Label: macPart(BaseSlider.Label, "hd-mac-label"),
+  Value: macPart(BaseSlider.Value, "hd-mac-slider-value"),
+  Control: macPart(BaseSlider.Control, "hd-mac-slider-control"),
+  Track: macPart(BaseSlider.Track, "hd-mac-slider-track"),
+  Thumb: macPart(BaseSlider.Thumb, "hd-mac-slider-thumb"),
+  Indicator: macPart(BaseSlider.Indicator, "hd-mac-slider-indicator"),
+};
+
+export const MacSwitch = {
+  Root: macPart(BaseSwitch.Root, "hd-mac-switch"),
+  Thumb: macPart(BaseSwitch.Thumb, "hd-mac-switch-thumb"),
+};
+
+export const MacTabs = {
+  Root: macPart(BaseTabs.Root, "hd-mac-tabs"),
+  Tab: macPart(BaseTabs.Tab, "hd-mac-tab"),
+  Indicator: macPart(BaseTabs.Indicator, "hd-mac-tab-indicator"),
+  Panel: macPart(BaseTabs.Panel, "hd-mac-tab-panel"),
+  List: macPart(BaseTabs.List, "hd-mac-tab-list"),
+};
+
+export const MacToast = {
+  Provider: macProvider(BaseToast.Provider),
+  Viewport: macPart(BaseToast.Viewport, "hd-mac-toast-viewport"),
+  Root: macPart(BaseToast.Root, "hd-mac hd-mac-toast"),
+  Content: macPart(BaseToast.Content, "hd-mac-toast-content"),
+  Description: macPart(BaseToast.Description, "hd-mac-toast-description"),
+  Title: macPart(BaseToast.Title, "hd-mac-toast-title"),
+  Close: macPart(BaseToast.Close, "hd-mac-button hd-mac-button-plain"),
+  Action: macPart(BaseToast.Action, "hd-mac-button"),
+  Portal: macProvider(BaseToast.Portal),
+  Positioner: macPart(BaseToast.Positioner, "hd-mac-toast-positioner"),
+  Arrow: macPart(BaseToast.Arrow, "hd-mac-popup-arrow"),
+};
+
+export const MacToggle = macPart(BaseToggle, "hd-mac-toggle");
+export const MacToolbarToggle = macPart(BaseToggle, "hd-mac-toggle hd-mac-toolbar-button");
+export const MacToggleGroup = macPart(BaseToggleGroup, "hd-mac-toggle-group");
+export const MacSegmentedToggleGroup = macPart(BaseToggleGroup, "hd-mac-toggle-group hd-mac-segmented-toggle-group");
+export const MacSeparatedSegmentedToggleGroup = macPart(
+  BaseToggleGroup,
+  "hd-mac-toggle-group hd-mac-segmented-toggle-group hd-mac-separated-segmented-toggle-group",
+);
+
+export const MacToolbar = {
+  Separator: macPart(BaseToolbar.Separator, "hd-mac-toolbar-separator"),
+  Root: macPart(BaseToolbar.Root, "hd-mac-toolbar"),
+  Group: macPart(BaseToolbar.Group, "hd-mac-toolbar-group"),
+  Button: macPart(BaseToolbar.Button, "hd-mac-toolbar-button"),
+  IconButton: macPart(BaseToolbar.Button, "hd-mac-toolbar-button hd-mac-icon-button"),
+  Link: macPart(BaseToolbar.Link, "hd-mac-toolbar-link"),
+  Input: macPart(BaseToolbar.Input, "hd-mac-input hd-mac-toolbar-input"),
+};
+
+export const MacTooltip = {
+  Root: macProvider(BaseTooltip.Root),
+  Trigger: macPart(BaseTooltip.Trigger, "hd-mac-tooltip-trigger"),
+  Portal: macProvider(BaseTooltip.Portal),
+  Positioner: macPart(BaseTooltip.Positioner, "hd-mac-positioner"),
+  Popup: macPart(BaseTooltip.Popup, "hd-mac hd-mac-tooltip"),
+  Arrow: macPart(BaseTooltip.Arrow, "hd-mac-tooltip-arrow"),
+  Provider: macProvider(BaseTooltip.Provider),
+  Viewport: macPart(BaseTooltip.Viewport, "hd-mac-viewport"),
+};