mac-human-design 0.1.3 → 0.1.5

package/scripts/verify-macos-design.mjs

@@ -0,0 +1,104 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const stylesPath = path.join(repoRoot, "src", "styles", "macosBaseUi.css");
+
+function readText(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+function listFiles(directory, relativePrefix = "") {
+  const files = [];
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const relativePath = path.join(relativePrefix, entry.name);
+    const absolutePath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...listFiles(absolutePath, relativePath));
+    } else if (entry.isFile()) {
+      files.push(relativePath);
+    }
+  }
+  return files;
+}
+
+function fail(message, details = []) {
+  console.error(message);
+  for (const detail of details) {
+    console.error(`- ${detail}`);
+  }
+  process.exitCode = 1;
+}
+
+const sourceFiles = listFiles(path.join(repoRoot, "src"))
+  .filter((filePath) => /\.(css|ts|tsx)$/.test(filePath))
+  .map((filePath) => path.join("src", filePath));
+
+const sources = new Map(
+  sourceFiles.map((relativeFile) => [relativeFile, readText(path.join(repoRoot, relativeFile))]),
+);
+const stylesSource = readText(stylesPath);
+
+const requiredStyleFeatures = [
+  ["system font stack", /-apple-system,\s*BlinkMacSystemFont/],
+  ["dark color-scheme support", /@media\s*\(prefers-color-scheme:\s*dark\)/],
+  ["reduced motion support", /@media\s*\(prefers-reduced-motion:\s*reduce\)/],
+  ["keyboard focus-visible support", /:focus-visible/],
+  ["macOS blue accent token", /--hd-mac-blue:\s*#0a84ff/i],
+];
+
+const missingFeatures = requiredStyleFeatures
+  .filter(([, pattern]) => !pattern.test(stylesSource))
+  .map(([label]) => label);
+
+if (missingFeatures.length > 0) {
+  fail("Missing required macOS styling features.", missingFeatures);
+}
+
+const negativeLetterSpacing = [];
+const viewportScaledFonts = [];
+
+for (const [relativeFile, source] of sources) {
+  for (const match of source.matchAll(/letter-spacing\s*:\s*-[^;,\n}]*/g)) {
+    negativeLetterSpacing.push(`${relativeFile}: ${match[0]}`);
+  }
+
+  for (const match of source.matchAll(/font(?:-size)?\s*:\s*[^;,\n}]*(?:vw|vh|vmin|vmax)/g)) {
+    viewportScaledFonts.push(`${relativeFile}: ${match[0]}`);
+  }
+}
+
+if (negativeLetterSpacing.length > 0) {
+  fail("Negative letter spacing is not allowed in human-design controls.", negativeLetterSpacing);
+}
+
+if (viewportScaledFonts.length > 0) {
+  fail("Viewport-scaled font sizing is not allowed in human-design controls.", viewportScaledFonts);
+}
+
+const allSourceText = Array.from(sources.values()).join("\n");
+const hdMacClasses = new Set(
+  Array.from(allSourceText.matchAll(/["'`]([^"'`]*hd-mac[^"'`]*)["'`]/g))
+    .flatMap((match) => match[1].split(/\s+/))
+    .filter((className) => className.startsWith("hd-mac")),
+);
+
+const missingClassStyles = Array.from(hdMacClasses)
+  .sort()
+  .filter((className) => {
+    const escapedClassName = className.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return !new RegExp(`\\.${escapedClassName}(?![a-zA-Z0-9_-])`).test(stylesSource);
+  });
+
+if (missingClassStyles.length > 0) {
+  fail("Missing CSS selectors for hd-mac classes used in source files.", missingClassStyles);
+}
+
+if (process.exitCode) {
+  process.exit();
+}
+
+console.log(
+  `Verified macOS design features, typography constraints, and ${hdMacClasses.size} styled hd-mac classes.`,
+);

package/src/components/AppWindowShell.tsx

@@ -1,25 +1,11 @@
 import { ReactNode } from "react";
-import { Block } from "baseui/block";
-import { useStyletron } from "baseui";
 
 export function AppWindowShell({ children }: { children: ReactNode }) {
-  const [, theme] = useStyletron();
-
   return (
-    <Block
-      width="100%"
-      $style={{
-        minHeight: "100vh",
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: theme.colors.backgroundPrimary,
-        color: theme.colors.contentPrimary,
-      }}
-    >
-      <Block flex="1" $style={{ minHeight: 0, display: "flex", flexDirection: "column" }}>
+    <div className="hd-mac-window">
+      <div className="hd-mac-window-content">
         {children}
-      </Block>
-    </Block>
+      </div>
+    </div>
   );
 }

package/src/components/MacBaseUI.tsx

@@ -0,0 +1,481 @@
+import * as React from "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;
+
+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 macPart<C extends AnyComponent>(Component: C, macClassName: string) {
+  const Wrapped = 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),
+    });
+  });
+
+  Wrapped.displayName = `Mac${Component.displayName ?? Component.name ?? "BaseUIPart"}`;
+  return Wrapped as unknown as 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"),
+};