@inf-monkeys-tech/monkeys-design 0.4.55 → 0.4.56

package/dist/components/workbench/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var react = require('react');
+var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var ContextMenu = require('@radix-ui/react-context-menu');
 require('react-dom');
@@ -27,10 +28,8 @@ function _interopNamespace(e) {
 var ContextMenu__namespace = /*#__PURE__*/_interopNamespace(ContextMenu);
 
 // src/components/workbench/WorkbenchResizableSidebar.tsx
-
-// src/components/base/utils.ts
 function cn(...parts) {
-  return parts.filter(Boolean).join(" ");
+  return tailwindMerge.twMerge(parts.filter(Boolean).join(" "));
 }
 function hasRenderableNode(node) {
   return node !== void 0 && node !== null && typeof node !== "boolean";
@@ -380,6 +379,209 @@ var WorkbenchContentPane = react.forwardRef(
   }
 );
 
+// src/locale/en-US.ts
+var enUS = {
+  locale: "en-US",
+  messages: {
+    pagination: {
+      navigation: "Pagination",
+      first: "First",
+      previous: "Previous",
+      next: "Next",
+      last: "Last",
+      page: ({ page, pageCount }) => `Page ${page} of ${pageCount}`,
+      currentPage: ({ page, pageCount }) => `Page ${page} of ${pageCount}, current page`,
+      emptyResults: "0 results",
+      range: ({ start, end, total }) => `${start}-${end} of ${total}`
+    },
+    dialog: {
+      close: "Close dialog"
+    },
+    dropdownMenu: {
+      actions: "Actions"
+    },
+    loading: {
+      spinner: "Loading"
+    },
+    layout: {
+      resizePanels: "Resize panels"
+    },
+    steps: {
+      label: "Progress",
+      current: "Current",
+      completed: "Completed",
+      error: "Error",
+      disabled: "Disabled"
+    },
+    numberInput: {
+      increment: "Increase value",
+      decrement: "Decrease value"
+    },
+    passwordInput: {
+      showPassword: "Show password",
+      hidePassword: "Hide password"
+    },
+    multiSelect: {
+      placeholder: "Select options",
+      empty: "No options",
+      removeOption: ({ value }) => `Remove ${value}`
+    },
+    table: {
+      dragColumn: ({ columnId }) => `Drag column ${columnId}`,
+      resizeColumn: ({ columnId }) => `Resize column ${columnId}`,
+      sortColumn: ({ columnId }) => columnId ? `Sort column ${columnId}` : "Sort column",
+      loadingRow: "Loading table row"
+    },
+    toolbar: {
+      theme: {
+        label: "Appearance",
+        toggle: "Toggle theme",
+        auto: "Auto",
+        light: "Light",
+        dark: "Dark"
+      },
+      language: {
+        label: "Language",
+        switch: "Switch language"
+      }
+    },
+    toast: {
+      errorTitle: "Error",
+      warningTitle: "Warning",
+      defaultErrorDescription: "Something went wrong.",
+      defaultWarningDescription: "Please check and try again."
+    },
+    dataExplorer: {
+      viewTree: {
+        actions: "More actions",
+        expand: "Expand",
+        collapse: "Collapse",
+        loading: "Loading...",
+        empty: "No views",
+        error: "Unable to load views"
+      }
+    },
+    workbench: {
+      interactiveTable: {
+        columnActions: "Column actions",
+        freezeColumn: "Freeze to left",
+        freezeEndColumn: "Freeze to right",
+        unfreezeColumn: "Unfreeze from left",
+        unfreezeEndColumn: "Unfreeze from right",
+        unfreezeAllColumns: "Unfreeze all columns",
+        resetColumnWidth: "Reset column width",
+        frozenColumnTitle: "Frozen column"
+      }
+    }
+  }
+};
+
+// src/locale/resolve-locale.ts
+function mergeMonkeysLocaleMessages(base, override) {
+  return base;
+}
+var defaultMonkeysLocale = {
+  locale: enUS.locale,
+  messages: mergeMonkeysLocaleMessages(
+    enUS.messages
+  )
+};
+
+// src/provider/context.ts
+var EMPTY_ENVIRONMENT = Object.freeze({});
+var EMPTY_PORTAL = Object.freeze({});
+var MONKEYS_PROVIDER_CONTEXTS_KEY = /* @__PURE__ */ Symbol.for(
+  "@inf-monkeys-tech/monkeys-design/provider-context@1"
+);
+function createMonkeysProviderContexts() {
+  return Object.freeze({
+    locale: react.createContext({
+      ...defaultMonkeysLocale,
+      provided: false
+    }),
+    theme: react.createContext({
+      provided: false
+    }),
+    direction: react.createContext({
+      provided: false
+    }),
+    environment: react.createContext({
+      provided: false,
+      environment: EMPTY_ENVIRONMENT,
+      portal: EMPTY_PORTAL
+    })
+  });
+}
+function getMonkeysProviderContexts() {
+  const host = globalThis;
+  const existing = host[MONKEYS_PROVIDER_CONTEXTS_KEY];
+  if (existing) return existing;
+  const contexts = createMonkeysProviderContexts();
+  Object.defineProperty(host, MONKEYS_PROVIDER_CONTEXTS_KEY, {
+    value: contexts,
+    enumerable: false,
+    configurable: false,
+    writable: false
+  });
+  return contexts;
+}
+var providerContexts = getMonkeysProviderContexts();
+var MonkeysLocaleContext = providerContexts.locale;
+var MonkeysThemeContext = providerContexts.theme;
+var MonkeysDirectionContext = providerContexts.direction;
+var MonkeysEnvironmentContext = providerContexts.environment;
+function mergeAppearance(inherited, explicit) {
+  if (explicit === void 0) return inherited;
+  if (inherited === void 0) return explicit;
+  return {
+    ...inherited,
+    ...explicit,
+    slots: inherited.slots || explicit.slots ? { ...inherited.slots, ...explicit.slots } : void 0,
+    styles: inherited.styles || explicit.styles ? { ...inherited.styles, ...explicit.styles } : void 0
+  };
+}
+function useMonkeysLocaleMessages() {
+  return react.useContext(MonkeysLocaleContext).messages;
+}
+function useMonkeysBaseAppearance(explicit) {
+  const inherited = react.useContext(MonkeysThemeContext).baseAppearance;
+  return react.useMemo(
+    () => mergeAppearance(inherited, explicit),
+    [explicit, inherited]
+  );
+}
+function useMonkeysDirection() {
+  return react.useContext(MonkeysDirectionContext).direction;
+}
+function useMonkeysEnvironment() {
+  return react.useContext(MonkeysEnvironmentContext).environment;
+}
+function useMonkeysPortalOptions() {
+  return react.useContext(MonkeysEnvironmentContext).portal;
+}
+function useMonkeysComponentAttributes() {
+  const locale = react.useContext(MonkeysLocaleContext);
+  const theme = react.useContext(MonkeysThemeContext);
+  const direction = react.useContext(MonkeysDirectionContext);
+  const providerActive = locale.provided || theme.provided || direction.provided;
+  return react.useMemo(
+    () => providerActive ? {
+      dir: direction.direction,
+      "data-monkeys-direction": direction.direction,
+      "data-monkeys-locale": locale.locale,
+      "data-monkeys-theme": theme.resolvedTheme?.id,
+      "data-monkeys-theme-mode": theme.resolvedTheme?.tokens.mode
+    } : {},
+    [
+      direction.direction,
+      locale.locale,
+      providerActive,
+      theme.resolvedTheme?.id,
+      theme.resolvedTheme?.tokens.mode
+    ]
+  );
+}
+
 // src/components/base/theme.ts
 var emptyStyles = {};
 var motionBase = "motion-safe:transition motion-safe:duration-300 motion-safe:ease-out";
@@ -411,9 +613,9 @@ var baseSlots = {
   ),
   buttonDefault: "border-border bg-background text-foreground hover:bg-accent/60",
   buttonPrimary: "border-primary/20 bg-primary/10 text-primary hover:bg-primary/15",
-  buttonSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15",
+  buttonSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-500/15",
   buttonWarning: "border-amber-500/30 bg-amber-500/10 text-amber-700 hover:bg-amber-500/15",
-  buttonDanger: "border-destructive/20 bg-destructive/10 text-destructive hover:bg-destructive/15",
+  buttonDanger: "border-destructive/20 bg-destructive/10 text-destructive-text hover:bg-destructive/15",
   buttonMuted: "border-border/60 bg-muted/45 text-muted-foreground hover:bg-muted/70 hover:text-foreground",
   buttonActive: "border-primary/35 bg-primary/10 text-primary",
   buttonDisabled: "!cursor-not-allowed opacity-60",
@@ -428,10 +630,101 @@ var baseSlots = {
   badgePrimary: "border-primary/30 bg-primary/10 text-primary",
   badgeSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700",
   badgeWarning: "border-amber-500/30 bg-amber-500/10 text-amber-700",
-  badgeDanger: "border-destructive/30 bg-destructive/10 text-destructive",
+  badgeDanger: "border-destructive/30 bg-destructive/10 text-destructive-text",
   badgeMuted: "border-border/60 bg-muted text-muted-foreground",
   badgeIcon: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
   badgeLabel: "min-w-0 truncate",
+  textRoot: "min-w-0 break-words leading-6",
+  textSizeXs: "text-xs",
+  textSizeSm: "text-sm",
+  textSizeMd: "text-base",
+  textSizeLg: "text-lg",
+  textSizeXl: "text-xl",
+  typographyToneDefault: "text-foreground",
+  typographyToneMuted: "text-muted-foreground",
+  typographyTonePrimary: "text-primary",
+  typographyToneSuccess: "text-emerald-700 dark:text-emerald-400",
+  typographyToneWarning: "text-amber-700 dark:text-amber-400",
+  typographyToneDanger: "text-destructive-text",
+  typographyToneInherit: "text-inherit",
+  headingRoot: "min-w-0 break-words font-semibold tracking-tight",
+  headingSizeXs: "text-sm leading-5",
+  headingSizeSm: "text-base leading-6",
+  headingSizeMd: "text-lg leading-7",
+  headingSizeLg: "text-xl leading-7",
+  headingSizeXl: "text-2xl leading-8",
+  headingSize2xl: "text-3xl leading-9",
+  linkRoot: "inline break-words underline decoration-current/40 underline-offset-4 hover:decoration-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+  codeInline: "rounded border border-border/70 bg-muted/60 px-1.5 py-0.5 font-mono text-[0.875em] leading-[1.45] text-foreground",
+  codeBlock: "m-0 max-w-full overflow-x-auto rounded-md border border-border/70 bg-muted/60 p-4 text-foreground",
+  codeContent: "font-mono text-sm leading-6",
+  kbdRoot: "inline-flex min-h-5 items-center rounded border border-border bg-muted/70 px-1.5 font-mono text-[0.75em] font-medium leading-5 text-foreground shadow-[inset_0_-1px_0_hsl(var(--monkeys-color-border))]",
+  listRoot: "m-0 min-w-0 list-outside break-words ps-5 text-foreground",
+  listSpacingCompact: "[&>li+li]:mt-1",
+  listSpacingDefault: "[&>li+li]:mt-2",
+  listSpacingRelaxed: "[&>li+li]:mt-3",
+  listMarkerNone: "list-none ps-0",
+  listMarkerDisc: "list-disc",
+  listMarkerCircle: "list-[circle]",
+  listMarkerSquare: "list-[square]",
+  listMarkerDecimal: "list-decimal",
+  listMarkerLowerAlpha: "list-[lower-alpha]",
+  listMarkerUpperAlpha: "list-[upper-alpha]",
+  listItem: "min-w-0 ps-1 leading-6 marker:text-muted-foreground",
+  stackRoot: "flex min-w-0 flex-col",
+  inlineRoot: "flex min-w-0 flex-row",
+  gridRoot: "grid min-w-0",
+  containerRoot: "mx-auto w-full min-w-0",
+  aspectRatioRoot: "relative min-w-0 overflow-hidden [&>*]:h-full [&>*]:w-full",
+  spinnerRoot: "inline-flex shrink-0 items-center justify-center text-current align-middle",
+  spinnerIndicator: "h-5 w-5 rounded-full border-2 border-current border-r-transparent motion-safe:animate-spin motion-reduce:animate-none",
+  visuallyHiddenRoot: "sr-only",
+  visuallyHiddenFocusable: "focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[1000] focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-ring focus-within:not-sr-only focus-within:fixed focus-within:left-4 focus-within:top-4 focus-within:z-[1000] focus-within:rounded-md focus-within:bg-background focus-within:px-4 focus-within:py-2 focus-within:text-foreground focus-within:shadow-lg focus-within:ring-2 focus-within:ring-ring",
+  fieldsetRoot: "min-w-0 border-0 p-0 text-foreground",
+  fieldsetLegend: "min-w-0 text-sm font-semibold leading-6 text-foreground",
+  fieldsetDescription: "mt-1 text-sm leading-5 text-muted-foreground",
+  fieldsetError: "mt-1 text-sm leading-5 text-destructive-text",
+  fieldsetContent: "mt-3 grid min-w-0 gap-3",
+  stepsRoot: "m-0 min-w-0 list-none p-0 text-foreground",
+  stepsHorizontal: "flex w-full max-w-full items-start overflow-x-auto pb-2",
+  stepsVertical: "grid",
+  stepsItem: "relative min-w-0",
+  stepsItemHorizontal: "flex min-w-52 flex-1 items-start",
+  stepsItemVertical: "pb-6 last:pb-0",
+  stepsTrigger: "flex min-w-0 flex-1 items-start gap-3 rounded-md border-0 bg-transparent p-1 text-start text-inherit",
+  stepsTriggerInteractive: "cursor-pointer hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  stepsTriggerDisabled: "!cursor-not-allowed opacity-60",
+  stepsIndicator: "relative z-[1] inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold",
+  stepsIndicatorPending: "border-border bg-background text-muted-foreground",
+  stepsIndicatorCurrent: "border-primary/50 bg-primary/10 text-primary",
+  stepsIndicatorCompleted: "border-primary bg-primary text-primary-foreground",
+  stepsIndicatorError: "border-destructive bg-destructive text-destructive-foreground",
+  stepsContent: "grid min-w-0 gap-1 pt-0.5",
+  stepsLabel: "min-w-0 break-words text-sm font-medium leading-5",
+  stepsDescription: "min-w-0 break-words text-sm leading-5 text-muted-foreground",
+  stepsStatus: "sr-only",
+  stepsConnector: "shrink-0 bg-border",
+  stepsConnectorHorizontal: "mt-3.5 h-px w-8",
+  stepsConnectorVertical: "absolute bottom-0 top-8 start-3.5 w-px -translate-x-1/2",
+  stepsConnectorCompleted: "bg-primary/60",
+  stepsConnectorError: "bg-destructive/60",
+  scrollAreaViewport: "min-h-0 min-w-0",
+  numberInputControl: "tabular-nums",
+  numberInputStepControls: "me-1 flex shrink-0 self-stretch overflow-hidden border-s border-border",
+  numberInputStepButton: "flex min-h-6 w-7 cursor-pointer items-center justify-center border-0 bg-transparent px-1 text-xs leading-none text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:z-[1] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:!cursor-not-allowed disabled:opacity-40",
+  passwordInputControl: "pe-2",
+  passwordInputToggle: "me-1 inline-flex min-h-7 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:!cursor-not-allowed disabled:opacity-40",
+  inputGroupRoot: cn(
+    "relative flex min-w-0 items-stretch overflow-hidden rounded-md border border-border bg-background text-foreground focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-ring/30",
+    motionBase
+  ),
+  inputGroupInvalid: "border-destructive/55 focus-within:border-destructive/70 focus-within:ring-destructive/25",
+  inputGroupDisabled: "!cursor-not-allowed bg-muted/35",
+  inputGroupContent: "flex min-w-0 flex-1 items-stretch [&>*]:min-w-0",
+  inputGroupStartElement: "inline-flex shrink-0 items-center justify-center ps-3 pe-1 text-foreground/75",
+  inputGroupEndElement: "inline-flex shrink-0 items-center justify-center ps-1 pe-3 text-foreground/75",
+  inputGroupStartAddon: "inline-flex max-w-[min(40%,16rem)] shrink-0 items-center overflow-hidden border-e border-border bg-muted/60 px-3 text-sm text-foreground/75 text-ellipsis whitespace-nowrap [&>*]:min-w-0",
+  inputGroupEndAddon: "inline-flex max-w-[min(40%,16rem)] shrink-0 items-center overflow-hidden border-s border-border bg-muted/60 px-3 text-sm text-foreground/75 text-ellipsis whitespace-nowrap [&>*]:min-w-0",
   panelRoot: cn(
     "group relative flex min-w-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background",
     motionInteractive
@@ -454,11 +747,11 @@ var baseSlots = {
   stateTitle: "text-sm font-semibold text-foreground",
   stateDescription: "mt-2 max-w-md text-sm leading-6 text-muted-foreground",
   stateActions: "mt-5 flex flex-wrap items-center justify-center gap-2",
-  loadingSpinner: "h-5 w-5 animate-spin",
+  loadingSpinner: "h-5 w-5 motion-safe:animate-spin motion-reduce:animate-none",
   fieldRoot: "grid min-w-0 gap-2",
   fieldLabelRow: "flex min-w-0 items-center justify-between gap-3",
   fieldLabel: "min-w-0 text-sm font-medium leading-none text-foreground",
-  fieldRequired: "text-destructive",
+  fieldRequired: "text-destructive-text",
   fieldDescription: "text-sm leading-5 text-muted-foreground",
   fieldMessage: "text-sm leading-5 text-muted-foreground",
   fieldControl: "min-w-0",
@@ -538,9 +831,9 @@ var baseSlots = {
   dialogTrigger: "",
   dialogTriggerDisabled: "!cursor-not-allowed opacity-60",
   dialogOverlay: "fixed inset-0 z-50 bg-background/70 backdrop-blur-sm motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
-  dialogContent: "fixed inset-0 z-50 flex min-h-0 items-center justify-center p-4",
+  dialogContent: "pointer-events-none fixed inset-0 z-50 flex min-h-0 items-center justify-center p-4",
   dialogPanel: cn(
-    "relative flex max-h-[min(85vh,720px)] w-full max-w-lg min-w-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background text-foreground shadow-xl",
+    "pointer-events-auto relative flex max-h-[min(85vh,720px)] w-full max-w-lg min-w-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background text-foreground shadow-xl",
     "motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-out"
   ),
   dialogHeader: "grid min-w-0 gap-1 border-b border-border/60 px-5 py-4",
@@ -555,17 +848,17 @@ var baseSlots = {
   dropdownRoot: "relative inline-flex min-w-0",
   dropdownTrigger: "",
   dropdownTriggerDisabled: "!cursor-not-allowed opacity-60",
-  dropdownMenu: "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-48 overflow-hidden rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  dropdownMenu: "z-50 min-w-48 overflow-hidden rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
   dropdownMenuTop: "bottom-[calc(100%+0.375rem)] top-auto",
   dropdownMenuEnd: "left-auto right-0",
   dropdownLabel: "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground",
   dropdownSeparator: "my-1 h-px bg-border/70",
   dropdownItem: cn(
-    "flex min-w-0 cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-left text-sm text-foreground hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+    "flex min-w-0 cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-left text-sm text-foreground hover:bg-accent/60 focus:bg-accent/60 data-[highlighted]:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
     motionInteractive
   ),
-  dropdownItemDanger: "text-destructive hover:bg-destructive/10",
-  dropdownItemDisabled: "!cursor-not-allowed opacity-50 hover:bg-transparent",
+  dropdownItemDanger: "text-destructive-text hover:bg-destructive/10 focus:bg-destructive/10 data-[highlighted]:bg-destructive/10",
+  dropdownItemDisabled: "!cursor-not-allowed opacity-50 hover:bg-transparent focus:bg-transparent data-[highlighted]:bg-transparent",
   dropdownItemIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
   dropdownItemContent: "grid min-w-0 flex-1 gap-0.5",
   dropdownItemLabel: "min-w-0 truncate",
@@ -573,7 +866,7 @@ var baseSlots = {
   dropdownItemShortcut: "ml-3 shrink-0 text-xs font-medium text-muted-foreground",
   tooltipRoot: "relative inline-flex min-w-0",
   tooltipTrigger: "inline-flex min-w-0",
-  tooltipContent: "pointer-events-none absolute z-50 max-w-xs rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs leading-5 text-popover-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  tooltipContent: "pointer-events-none z-50 max-w-xs rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs leading-5 text-popover-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
   noticeBase: cn(
     "flex min-w-0 gap-3 rounded-lg border px-4 py-3 text-sm",
     motionBase,
@@ -583,7 +876,7 @@ var baseSlots = {
   noticePrimary: "border-primary/25 bg-primary/10 text-primary",
   noticeSuccess: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700",
   noticeWarning: "border-amber-500/30 bg-amber-500/10 text-amber-700",
-  noticeDanger: "border-destructive/30 bg-destructive/10 text-destructive",
+  noticeDanger: "border-destructive/30 bg-destructive/10 text-destructive-text",
   noticeMuted: "border-border/60 bg-muted/35 text-muted-foreground",
   noticeIcon: "mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center motion-safe:animate-in motion-safe:fade-in",
   noticeTitle: "font-semibold leading-5",
@@ -603,12 +896,12 @@ var baseSlots = {
     motionBase
   ),
   tabsTrigger: cn(
-    "inline-flex min-w-0 cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-background/70 hover:text-foreground focus-visible:outline-none",
+    "inline-flex min-w-0 cursor-pointer items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-background/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-1 motion-reduce:transition-none",
     motionInteractive
   ),
   tabsTriggerActive: "bg-background text-foreground shadow-sm",
   tabsTriggerDisabled: "!cursor-not-allowed opacity-50 hover:bg-transparent",
-  tabsPanel: "min-w-0 rounded-lg border border-border/70 bg-background p-4 text-sm text-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  tabsPanel: "min-w-0 rounded-lg border border-border/70 bg-background p-4 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out motion-reduce:transition-none",
   segmentedRoot: cn(
     "inline-flex min-w-0 items-center gap-1 rounded-lg border border-border/70 bg-muted/30 p-1",
     motionBase
@@ -628,7 +921,7 @@ var baseSlots = {
   skeletonRoot: "relative overflow-hidden rounded-md bg-muted/70",
   avatarRoot: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-muted text-sm font-semibold text-muted-foreground motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
   avatarImage: "h-full w-full object-cover",
-  avatarFallback: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground",
+  avatarFallback: "flex h-full w-full items-center justify-center bg-muted text-foreground",
   avatarStatus: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-muted-foreground motion-safe:animate-pulse",
   avatarText: "min-w-0 truncate text-sm font-medium text-foreground",
   toolbarRoot: cn(
@@ -648,22 +941,24 @@ var baseSlots = {
   breadcrumbSeparator: "shrink-0 text-muted-foreground/70",
   paginationRoot: "flex min-w-0 flex-wrap items-center justify-between gap-3 text-sm",
   paginationInfo: "min-w-0 text-muted-foreground",
-  paginationControls: "flex shrink-0 items-center gap-1.5",
-  paginationButton: "inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-md border border-border bg-background px-2.5 text-sm font-medium text-foreground hover:bg-accent/60 disabled:!cursor-not-allowed disabled:opacity-50 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  paginationControls: "flex min-w-0 flex-wrap items-center justify-end gap-1.5",
+  paginationButton: "inline-flex h-8 min-w-8 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-border bg-background px-2.5 text-sm font-medium text-foreground hover:bg-accent/60 disabled:!cursor-not-allowed disabled:opacity-50 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
   paginationButtonDisabled: "!cursor-not-allowed opacity-50",
-  paginationPage: "inline-flex h-8 min-w-8 items-center justify-center rounded-md bg-muted/50 px-2.5 text-sm font-medium text-foreground",
+  paginationPage: "inline-flex h-8 min-w-8 cursor-default items-center justify-center rounded-md bg-muted/50 px-2.5 text-sm font-medium text-foreground hover:bg-muted/50",
+  paginationEllipsis: "inline-flex h-8 min-w-6 items-center justify-center px-1 text-sm text-muted-foreground",
   descriptionListRoot: "grid min-w-0 gap-3 text-sm",
   descriptionListItem: "grid min-w-0 gap-1 rounded-md border border-border/60 bg-background px-3 py-2 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out hover:shadow-sm",
   descriptionListTerm: "min-w-0 truncate text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground",
   descriptionListValue: "min-w-0 text-sm leading-6 text-foreground",
   accordionRoot: "grid min-w-0 gap-2",
-  accordionItem: "overflow-hidden rounded-lg border border-border/70 bg-background motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
-  accordionTrigger: "flex w-full min-w-0 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium text-foreground hover:bg-muted/40 disabled:!cursor-not-allowed disabled:opacity-50 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out",
+  accordionItem: "overflow-hidden rounded-lg border border-border/70 bg-background motion-safe:transition motion-safe:duration-300 motion-safe:ease-out motion-reduce:transition-none",
+  accordionTrigger: "flex w-full min-w-0 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-start text-sm font-medium text-foreground hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:!cursor-not-allowed disabled:opacity-50 motion-safe:transition motion-safe:duration-300 motion-safe:ease-out motion-reduce:transition-none",
   accordionTriggerIcon: cn(
     "h-2 w-2 shrink-0 rotate-45 border-b border-r border-current text-muted-foreground",
-    motionTransform
+    motionTransform,
+    "motion-reduce:transition-none"
   ),
-  accordionPanel: "border-t border-border/60 px-4 py-3 text-sm leading-6 text-muted-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out",
+  accordionPanel: "border-t border-border/60 px-4 py-3 text-sm leading-6 text-muted-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300 motion-safe:ease-out motion-reduce:animate-none",
   menuTrigger: "inline-flex min-w-0",
   menuContent: "z-50 min-w-44 overflow-hidden rounded-md border border-border bg-background p-1 text-sm text-foreground shadow-lg outline-none motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-out",
   menuLabel: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
@@ -676,7 +971,7 @@ var baseSlots = {
   menuItemPrimary: "text-primary focus:text-primary data-[highlighted]:text-primary",
   menuItemSuccess: "text-emerald-700 focus:text-emerald-700 data-[highlighted]:text-emerald-700",
   menuItemWarning: "text-amber-700 focus:text-amber-700 data-[highlighted]:text-amber-700",
-  menuItemDanger: "text-destructive focus:text-destructive data-[highlighted]:text-destructive",
+  menuItemDanger: "text-destructive-text focus:text-destructive-text data-[highlighted]:text-destructive-text",
   menuItemMuted: "text-muted-foreground focus:text-foreground data-[highlighted]:text-foreground",
   menuItemDisabled: "!cursor-not-allowed opacity-50 data-[disabled]:pointer-events-none",
   menuItemIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
@@ -707,13 +1002,13 @@ var baseSlots = {
   tableBody: "[&_tr:last-child>*]:border-b-0",
   tableFooter: "bg-muted/30 font-medium [&_tr>*]:border-t [&_tr>*]:border-border/70",
   tableFooterBar: cn(
-    "flex min-w-0 flex-wrap items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-3 text-sm text-muted-foreground shadow-none",
+    "flex min-w-0 flex-wrap items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-3 text-sm text-foreground shadow-none",
     motionBase
   ),
   tableFooterBarAttached: "-mt-px rounded-t-none border-t border-border/70 shadow-none",
   tableFooterBarLeading: "flex min-w-0 items-center gap-2",
   tableFooterBarContent: "min-w-0 flex-1",
-  tableFooterBarActions: "ml-auto flex shrink-0 flex-wrap items-center gap-2",
+  tableFooterBarActions: "ms-auto flex shrink-0 flex-wrap items-center gap-2",
   tableSplitRoot: "grid w-full min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)_auto] caption-bottom border-separate border-spacing-0 text-sm text-foreground",
   tableSplitHeader: "block w-full min-w-0 shrink-0 overflow-x-hidden overflow-y-hidden bg-transparent",
   tableSplitBody: cn(
@@ -723,7 +1018,7 @@ var baseSlots = {
   tableSplitFooter: "block w-full min-w-0 shrink-0 overflow-x-hidden overflow-y-hidden",
   tableSplitRow: "grid w-max min-w-full [grid-template-columns:var(--base-table-column-template)]",
   tableSplitHead: "flex min-w-0 overflow-hidden",
-  tableSplitCell: "block min-w-0 overflow-hidden",
+  tableSplitCell: "block min-w-0 overflow-hidden [overflow-wrap:anywhere]",
   tableRow: cn(
     "[&>*]:border-b [&>*]:border-border/60 data-[state=selected]:bg-primary/5 data-[state=selected]:[&>*]:bg-primary/5",
     motionBase
@@ -752,8 +1047,11 @@ var baseSlots = {
     "inline-flex h-5 w-4 shrink-0 cursor-grab items-center justify-center rounded-sm text-muted-foreground hover:bg-muted active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed disabled:opacity-50",
     motionBase
   ),
-  tableHeadResizeHandle: "absolute right-0 top-1/2 h-7 w-2 -translate-y-1/2 cursor-col-resize rounded-sm after:absolute after:left-1/2 after:top-1/2 after:h-5 after:w-px after:-translate-x-1/2 after:-translate-y-1/2 after:bg-border hover:after:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed disabled:opacity-50",
-  tableCell: "px-3 py-2 align-middle text-sm text-foreground",
+  tableHeadResizeHandle: cn(
+    "absolute end-0 top-1/2 h-7 w-2 -translate-y-1/2 cursor-col-resize touch-none rounded-sm after:absolute after:start-1/2 after:top-1/2 after:h-5 after:w-px after:-translate-x-1/2 after:-translate-y-1/2 after:bg-border hover:after:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed disabled:opacity-50",
+    motionBase
+  ),
+  tableCell: "min-w-0 px-3 py-2 align-middle text-sm text-foreground [overflow-wrap:anywhere]",
   tableCellAlignCenter: "text-center",
   tableCellAlignRight: "text-right",
   tableEmptyRow: "[&>*]:border-b [&>*]:border-border/60",
@@ -1728,13 +2026,31 @@ function getBaseMenuItemToneClassName(theme, tone = "default") {
     tone === "muted" && theme.slots.menuItemMuted
   );
 }
+var buttonSizeClassNames = {
+  sm: "h-8 px-2.5 text-xs",
+  md: "h-9 px-3 text-sm",
+  lg: "h-10 px-3.5 text-base"
+};
+var iconOnlySizeClassNames = {
+  sm: "h-8 w-8 px-0",
+  md: "h-9 w-9 px-0",
+  lg: "h-10 w-10 px-0"
+};
+var iconSizeClassNames = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+function nonEmptyText(value) {
+  return typeof value === "string" && value.trim() ? value : void 0;
+}
 function LoadingIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       "aria-hidden": "true",
       viewBox: "0 0 24 24",
-      className: "h-4 w-4 animate-spin",
+      className: "h-full w-full motion-safe:animate-spin motion-reduce:animate-none",
       fill: "none",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1770,6 +2086,7 @@ var BaseButton = react.forwardRef(
     title,
     ariaLabel,
     tone,
+    size,
     active = false,
     iconOnly = false,
     disabled = false,
@@ -1783,11 +2100,42 @@ var BaseButton = react.forwardRef(
     "aria-label": nativeAriaLabel,
     ...buttonProps
   }, ref) {
-    const theme = resolveBaseAppearance(appearance);
+    for (const [name, value] of [
+      ["active", active],
+      ["iconOnly", iconOnly],
+      ["disabled", disabled],
+      ["loading", loading],
+      ["stopPropagation", stopPropagation]
+    ]) {
+      if (typeof value !== "boolean") {
+        throw new TypeError(`BaseButton ${name} must be a boolean.`);
+      }
+    }
+    if (size !== void 0 && size !== "sm" && size !== "md" && size !== "lg") {
+      throw new TypeError('BaseButton size must be "sm", "md", or "lg".');
+    }
+    if (tone !== void 0 && tone !== "default" && tone !== "primary" && tone !== "success" && tone !== "warning" && tone !== "danger" && tone !== "muted") {
+      throw new TypeError(
+        'BaseButton tone must be "default", "primary", "success", "warning", "danger", or "muted".'
+      );
+    }
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
     const resolvedLabel = children ?? label;
-    const labelText = typeof resolvedLabel === "string" ? resolvedLabel : void 0;
-    const resolvedAriaLabel = ariaLabel ?? nativeAriaLabel ?? labelText ?? title ?? (iconOnly ? "Action" : void 0);
+    const hasLabel = hasRenderableNode(resolvedLabel) && (typeof resolvedLabel !== "string" || Boolean(resolvedLabel.trim()));
+    const explicitAriaLabel = nonEmptyText(ariaLabel) ?? nonEmptyText(nativeAriaLabel);
+    const labelText = typeof resolvedLabel === "string" ? nonEmptyText(resolvedLabel) : void 0;
+    const resolvedTitle = nonEmptyText(title);
+    if (iconOnly && !hasLabel && !explicitAriaLabel && !resolvedTitle) {
+      throw new TypeError(
+        "BaseButton iconOnly requires ariaLabel, aria-label, title, or a renderable label."
+      );
+    }
+    const resolvedAriaLabel = explicitAriaLabel ?? labelText ?? resolvedTitle;
     const resolvedDisabled = disabled || loading;
+    const resolvedTone = tone ?? "default";
+    const state = loading ? "loading" : disabled ? "disabled" : active ? "active" : "idle";
     const handleClick = (event) => {
       if (stopPropagation) {
         event.stopPropagation();
@@ -1798,6 +2146,7 @@ var BaseButton = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ...componentAttributes,
         ...buttonProps,
         ref,
         type,
@@ -1806,9 +2155,20 @@ var BaseButton = react.forwardRef(
         "aria-pressed": active || void 0,
         "aria-busy": loading || void 0,
         disabled: resolvedDisabled,
+        "data-monkeys-component": "button",
+        "data-slot": "root",
+        "data-state": state,
+        "data-tone": resolvedTone,
+        "data-size": size,
+        "data-active": active || void 0,
+        "data-loading": loading || void 0,
+        "data-disabled": resolvedDisabled || void 0,
+        "data-icon-only": iconOnly || void 0,
         className: cn(
           theme.slots.buttonBase,
           iconOnly && theme.slots.buttonIconOnly,
+          size && buttonSizeClassNames[size],
+          iconOnly && size && iconOnlySizeClassNames[size],
           getBaseButtonToneClassName(theme, tone, active),
           resolvedDisabled && theme.slots.buttonDisabled,
           classNames?.root,
@@ -1822,23 +2182,96 @@ var BaseButton = react.forwardRef(
         },
         onClick: handleClick,
         children: [
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.buttonIcon, classNames?.icon), children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}) }) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.buttonIcon, classNames?.icon), children: icon }) : null,
-          iconOnly ? hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: resolvedLabel }) : null : hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.buttonLabel, classNames?.label), children: resolvedLabel }) : null,
-          !loading && endIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.buttonIcon, classNames?.icon), children: endIcon }) : null
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "icon",
+              "data-state": state,
+              "data-tone": resolvedTone,
+              "data-size": size,
+              className: cn(
+                theme.slots.buttonIcon,
+                size && iconSizeClassNames[size],
+                classNames?.icon
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {})
+            }
+          ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "icon",
+              "data-state": state,
+              "data-tone": resolvedTone,
+              "data-size": size,
+              className: cn(
+                theme.slots.buttonIcon,
+                size && iconSizeClassNames[size],
+                classNames?.icon
+              ),
+              children: icon
+            }
+          ) : null,
+          iconOnly ? hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "label",
+              "data-state": state,
+              "data-tone": resolvedTone,
+              "data-size": size,
+              className: "sr-only",
+              children: resolvedLabel
+            }
+          ) : null : hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "label",
+              "data-state": state,
+              "data-tone": resolvedTone,
+              "data-size": size,
+              className: cn(theme.slots.buttonLabel, classNames?.label),
+              children: resolvedLabel
+            }
+          ) : null,
+          !loading && endIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "end-icon",
+              "data-state": state,
+              "data-tone": resolvedTone,
+              "data-size": size,
+              className: cn(
+                theme.slots.buttonIcon,
+                size && iconSizeClassNames[size],
+                classNames?.icon,
+                classNames?.endIcon
+              ),
+              children: endIcon
+            }
+          ) : null
         ]
       }
     );
   }
 );
+var boxSizeClassNames = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+var indicatorSizeClassNames = {
+  sm: "text-[10px]",
+  md: "text-[11px]",
+  lg: "text-xs"
+};
 function setRefs(element, ...refs) {
-  refs.forEach((ref) => {
-    if (!ref) return;
+  for (const ref of refs) {
+    if (!ref) continue;
     if (typeof ref === "function") {
       ref(element);
-      return;
+      continue;
     }
     ref.current = element;
-  });
+  }
 }
 var BaseCheckbox = react.forwardRef(
   function BaseCheckbox2({
@@ -1847,6 +2280,7 @@ var BaseCheckbox = react.forwardRef(
     indeterminate = false,
     invalid = false,
     disabled = false,
+    controlSize,
     appearance,
     className,
     classNames,
@@ -1857,14 +2291,41 @@ var BaseCheckbox = react.forwardRef(
     "aria-invalid": nativeAriaInvalid,
     ...checkboxProps
   }, forwardedRef) {
-    const theme = resolveBaseAppearance(appearance);
+    for (const [name, value] of [
+      ["indeterminate", indeterminate],
+      ["invalid", invalid],
+      ["disabled", disabled]
+    ]) {
+      if (typeof value !== "boolean") {
+        throw new TypeError(`BaseCheckbox ${name} must be a boolean.`);
+      }
+    }
+    if (controlSize !== void 0 && controlSize !== "sm" && controlSize !== "md" && controlSize !== "lg") {
+      throw new TypeError(
+        'BaseCheckbox controlSize must be "sm", "md", or "lg".'
+      );
+    }
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
     const inputRef = react.useRef(null);
+    const indeterminateRef = react.useRef(indeterminate);
+    indeterminateRef.current = indeterminate;
     const [uncontrolledChecked, setUncontrolledChecked] = react.useState(
       defaultChecked ?? false
     );
     const isControlled = checked !== void 0;
     const resolvedChecked = Boolean(isControlled ? checked : uncontrolledChecked);
     const active = indeterminate || resolvedChecked;
+    const state = indeterminate ? "mixed" : resolvedChecked ? "checked" : "unchecked";
+    const setInputRef = react.useCallback(
+      (element) => {
+        inputRef.current = element;
+        if (element) element.indeterminate = indeterminateRef.current;
+        setRefs(element, forwardedRef);
+      },
+      [forwardedRef]
+    );
     react.useEffect(() => {
       if (inputRef.current) {
         inputRef.current.indeterminate = indeterminate;
@@ -1876,10 +2337,20 @@ var BaseCheckbox = react.forwardRef(
         setUncontrolledChecked(event.currentTarget.checked);
       }
       onChange?.(event);
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
+        ...componentAttributes,
+        "data-monkeys-component": "checkbox",
+        "data-slot": "root",
+        "data-state": state,
+        "data-size": controlSize,
+        "data-invalid": invalid || void 0,
+        "data-disabled": disabled || void 0,
         className: cn(
           theme.slots.checkboxRoot,
           disabled && theme.slots.checkboxDisabled,
@@ -1894,10 +2365,14 @@ var BaseCheckbox = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
+              "data-slot": "box",
+              "data-state": state,
+              "data-size": controlSize,
               className: cn(
                 theme.slots.checkboxBox,
                 active && theme.slots.checkboxBoxChecked,
                 invalid && theme.slots.checkboxBoxInvalid,
+                controlSize && boxSizeClassNames[controlSize],
                 classNames?.box
               ),
               style: {
@@ -1908,13 +2383,18 @@ var BaseCheckbox = react.forwardRef(
                   "input",
                   {
                     ...checkboxProps,
-                    ref: (element) => setRefs(element, inputRef, forwardedRef),
+                    ref: setInputRef,
                     type: "checkbox",
                     disabled,
                     checked,
                     defaultChecked,
                     "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
                     "aria-checked": indeterminate ? "mixed" : resolvedChecked,
+                    "data-slot": "input",
+                    "data-state": state,
+                    "data-size": controlSize,
+                    "data-invalid": invalid || void 0,
+                    "data-disabled": disabled || void 0,
                     className: cn(theme.slots.checkboxInput, classNames?.input),
                     onChange: handleChange
                   }
@@ -1923,31 +2403,225 @@ var BaseCheckbox = react.forwardRef(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: cn(theme.slots.checkboxIndicator, classNames?.indicator),
+                    "data-slot": "indicator",
+                    "data-state": state,
+                    "data-size": controlSize,
+                    className: cn(
+                      theme.slots.checkboxIndicator,
+                      controlSize && indicatorSizeClassNames[controlSize],
+                      classNames?.indicator
+                    ),
                     children: indeterminate ? "\u2013" : "\u2713"
                   }
                 ) : null
               ]
             }
           ),
-          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(theme.slots.checkboxContent, classNames?.content), children: [
-            hasRenderableNode(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.checkboxLabel, classNames?.label), children: label }) : null,
-            hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cn(
-                  theme.slots.checkboxDescription,
-                  classNames?.description
-                ),
-                children: description
-              }
-            ) : null
-          ] }) : null
+          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              "data-slot": "content",
+              className: cn(theme.slots.checkboxContent, classNames?.content),
+              children: [
+                hasRenderableNode(label) ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-slot": "label",
+                    className: cn(theme.slots.checkboxLabel, classNames?.label),
+                    children: label
+                  }
+                ) : null,
+                hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-slot": "description",
+                    className: cn(
+                      theme.slots.checkboxDescription,
+                      classNames?.description
+                    ),
+                    children: description
+                  }
+                ) : null
+              ]
+            }
+          ) : null
         ]
       }
     );
   }
 );
+function resolveContainerValue(value, source) {
+  const candidate = typeof value === "function" ? value() : value;
+  if (candidate === null) return null;
+  if (!candidate || typeof candidate !== "object" || candidate.nodeType !== 1) {
+    throw new TypeError(`${source} must resolve to an Element or null.`);
+  }
+  return candidate;
+}
+function resolveBasePortalContainer({
+  explicitProvided,
+  explicitContainer,
+  providerProvided,
+  providerContainer,
+  getDocument
+}) {
+  if (explicitProvided) {
+    return resolveContainerValue(
+      explicitContainer,
+      "BasePortal container"
+    );
+  }
+  if (providerProvided) {
+    return resolveContainerValue(
+      providerContainer,
+      "MonkeysProvider portal.container"
+    );
+  }
+  if (!getDocument) return null;
+  const ownerDocument = getDocument();
+  if (ownerDocument === null) return null;
+  if (!ownerDocument || typeof ownerDocument !== "object" || !("body" in ownerDocument)) {
+    throw new TypeError(
+      "MonkeysProvider environment.getDocument must resolve to a Document or null."
+    );
+  }
+  return resolveContainerValue(
+    ownerDocument.body,
+    "MonkeysProvider environment.getDocument().body"
+  );
+}
+function resolveBaseOverlayPortalState({
+  mounted,
+  explicitDisabled,
+  explicitContainer,
+  providerDisabled,
+  providerContainer,
+  getDocument
+}) {
+  const disabled = explicitDisabled ?? providerDisabled ?? false;
+  if (!mounted || disabled) {
+    return {
+      mounted,
+      disabled,
+      shouldPortal: false,
+      container: null,
+      radixPortalProps: void 0
+    };
+  }
+  const container = resolveBasePortalContainer({
+    explicitProvided: explicitContainer !== void 0,
+    explicitContainer,
+    providerProvided: providerContainer !== void 0,
+    providerContainer,
+    getDocument
+  });
+  if (!container) {
+    return {
+      mounted: true,
+      disabled: false,
+      shouldPortal: false,
+      container: null,
+      radixPortalProps: void 0
+    };
+  }
+  return {
+    mounted: true,
+    disabled: false,
+    shouldPortal: true,
+    container,
+    radixPortalProps: Object.freeze({ container })
+  };
+}
+function getDefaultDocument() {
+  return globalThis.document ?? null;
+}
+function useBaseOverlayPortal(options = {}) {
+  const environment = useMonkeysEnvironment();
+  const portalOptions = useMonkeysPortalOptions();
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return resolveBaseOverlayPortalState({
+    mounted,
+    explicitDisabled: options.disabled,
+    explicitContainer: options.container,
+    providerDisabled: portalOptions.disabled,
+    providerContainer: portalOptions.container,
+    getDocument: environment.getDocument ?? getDefaultDocument
+  });
+}
+var contextMenuTones = [
+  "default",
+  "primary",
+  "success",
+  "warning",
+  "danger",
+  "muted"
+];
+function validateBoolean(value, name) {
+  if (typeof value !== "boolean") {
+    throw new TypeError(`BaseContextMenu ${name} must be a boolean.`);
+  }
+}
+function validateTone(value) {
+  if (value !== void 0 && !contextMenuTones.includes(
+    value
+  )) {
+    throw new TypeError(
+      'BaseContextMenu tone must be "default", "primary", "success", "warning", "danger", or "muted".'
+    );
+  }
+}
+function validateDirection(value) {
+  if (value !== void 0 && value !== "ltr" && value !== "rtl") {
+    throw new TypeError('BaseContextMenu dir must be "ltr" or "rtl".');
+  }
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className: "h-3.5 w-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5" })
+    }
+  );
+}
+function DotIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className: "h-3.5 w-3.5",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "3" })
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className: "h-3.5 w-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 4 4 4-4 4" })
+    }
+  );
+}
 function renderItemContent({
   label,
   icon,
@@ -1960,9 +2634,16 @@ function renderItemContent({
   const resolvedLabel = children ?? label;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     indicator ? indicator : null,
-    hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(classNames?.icon), children: icon }) : inset ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null,
-    hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(classNames?.label), children: resolvedLabel }) : null,
-    hasRenderableNode(shortcut) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(classNames?.shortcut), children: shortcut }) : null
+    hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "icon", className: cn(classNames?.icon), children: icon }) : inset ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "icon",
+        className: "h-4 w-4 shrink-0"
+      }
+    ) : null,
+    hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "label", className: cn(classNames?.label), children: resolvedLabel }) : null,
+    hasRenderableNode(shortcut) ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "shortcut", className: cn(classNames?.shortcut), children: shortcut }) : null
   ] });
 }
 function BaseContextMenu({
@@ -1977,34 +2658,41 @@ function BaseContextMenu({
   classNames,
   onOpenChange
 }) {
-  const theme = resolveBaseAppearance(appearance);
+  validateBoolean(disabled, "disabled");
+  validateBoolean(modal, "modal");
+  validateDirection(dir);
+  const inheritedDirection = useMonkeysDirection();
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ContextMenu__namespace.Root,
     {
       onOpenChange,
       modal,
-      dir,
+      dir: dir ?? inheritedDirection,
       children: [
         trigger ? /* @__PURE__ */ jsxRuntime.jsx(
-          ContextMenu__namespace.Trigger,
+          BaseContextMenuTrigger,
           {
             disabled,
-            className: cn(
-              theme.slots.menuTrigger,
-              disabled && theme.slots.menuItemDisabled,
-              classNames?.trigger,
-              className
-            ),
+            appearance: resolvedAppearance,
+            className: cn(classNames?.trigger, className),
             children: trigger
           }
         ) : null,
-        content ? /* @__PURE__ */ jsxRuntime.jsx(BaseContextMenuContent, { appearance, className: classNames?.content, children: content }) : null,
+        content ? /* @__PURE__ */ jsxRuntime.jsx(
+          BaseContextMenuContent,
+          {
+            appearance: resolvedAppearance,
+            className: classNames?.content,
+            children: content
+          }
+        ) : null,
         children
       ]
     }
   );
 }
-function BaseContextMenuTrigger({
+var BaseContextMenuTrigger = react.forwardRef(function BaseContextMenuTrigger2({
   children,
   disabled = false,
   asChild = false,
@@ -2012,14 +2700,23 @@ function BaseContextMenuTrigger({
   className,
   style,
   ...triggerProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
+}, ref) {
+  validateBoolean(disabled, "Trigger disabled");
+  validateBoolean(asChild, "Trigger asChild");
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenu__namespace.Trigger,
     {
+      ...componentAttributes,
       ...triggerProps,
+      ref,
       asChild,
       disabled,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "trigger",
+      "data-disabled": disabled || void 0,
       className: cn(
         !asChild && theme.slots.menuTrigger,
         disabled && !asChild && theme.slots.menuItemDisabled,
@@ -2029,20 +2726,27 @@ function BaseContextMenuTrigger({
       children
     }
   );
-}
-function BaseContextMenuContent({
+});
+var BaseContextMenuContent = react.forwardRef(function BaseContextMenuContent2({
   children,
   appearance,
   className,
   classNames,
   style,
   ...contentProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+}, ref) {
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
+  const portal = useBaseOverlayPortal();
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenu__namespace.Content,
     {
+      ...componentAttributes,
       ...contentProps,
+      ref,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "content",
       className: cn(theme.slots.menuContent, classNames?.root, className),
       style: {
         ...theme.styles.menuContent,
@@ -2050,43 +2754,45 @@ function BaseContextMenuContent({
       },
       children
     }
-  ) });
-}
-function BaseContextMenuLabel({
-  children,
-  appearance,
-  className,
-  style,
-  ...labelProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
+  );
+  return portal.shouldPortal ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenu__namespace.Portal, { ...portal.radixPortalProps, children: content }) : content;
+});
+var BaseContextMenuLabel = react.forwardRef(function BaseContextMenuLabel2({ children, appearance, className, style, ...labelProps }, ref) {
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenu__namespace.Label,
     {
+      ...componentAttributes,
       ...labelProps,
+      ref,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "label",
       className: cn(theme.slots.menuLabel, className),
       style,
       children
     }
   );
-}
-function BaseContextMenuSeparator({
-  appearance,
-  className,
-  style,
-  ...separatorProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
+});
+var BaseContextMenuSeparator = react.forwardRef(function BaseContextMenuSeparator2({ appearance, className, style, ...separatorProps }, ref) {
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenu__namespace.Separator,
     {
+      ...componentAttributes,
       ...separatorProps,
+      ref,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "separator",
       className: cn(theme.slots.menuSeparator, className),
       style
     }
   );
-}
-function BaseContextMenuItem({
+});
+var BaseContextMenuItem = react.forwardRef(function BaseContextMenuItem2({
   children,
   label,
   icon,
@@ -2100,13 +2806,25 @@ function BaseContextMenuItem({
   style,
   onSelect,
   ...itemProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
+}, ref) {
+  validateBoolean(disabled, "Item disabled");
+  validateBoolean(inset, "Item inset");
+  validateTone(tone);
+  const resolvedTone = tone ?? "default";
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ContextMenu__namespace.Item,
     {
+      ...componentAttributes,
       ...itemProps,
+      ref,
       disabled,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "item",
+      "data-tone": resolvedTone,
+      "data-disabled": disabled || void 0,
       className: cn(
         theme.slots.menuItem,
         getBaseMenuItemToneClassName(theme, tone),
@@ -2139,423 +2857,558 @@ function BaseContextMenuItem({
       })
     }
   );
-}
-var columnClassNames = {
-  1: "grid-cols-1",
-  2: "md:grid-cols-2",
-  3: "md:grid-cols-2 xl:grid-cols-3"
-};
-function BaseDescriptionList({
-  items,
-  columns = 1,
+});
+react.forwardRef(function BaseContextMenuCheckboxItem2({
+  children,
+  label,
+  icon,
+  shortcut,
+  tone,
+  disabled = false,
+  inset = false,
+  checked,
+  onCheckedChange,
   appearance,
   className,
   classNames,
   style,
-  children,
-  ...listProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "dl",
+  onSelect,
+  ...itemProps
+}, ref) {
+  validateBoolean(disabled, "CheckboxItem disabled");
+  validateBoolean(inset, "CheckboxItem inset");
+  validateTone(tone);
+  if (checked !== void 0 && checked !== "indeterminate" && typeof checked !== "boolean") {
+    throw new TypeError(
+      'BaseContextMenu CheckboxItem checked must be a boolean or "indeterminate".'
+    );
+  }
+  const resolvedTone = tone ?? "default";
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenu__namespace.CheckboxItem,
     {
-      ...listProps,
+      ...componentAttributes,
+      ...itemProps,
+      ref,
+      checked,
+      disabled,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "checkbox-item",
+      "data-tone": resolvedTone,
+      "data-disabled": disabled || void 0,
+      "data-checked": checked === "indeterminate" ? "mixed" : checked === void 0 ? void 0 : String(checked),
+      onCheckedChange: (nextChecked) => {
+        if (disabled) return;
+        onCheckedChange?.(nextChecked);
+      },
       className: cn(
-        theme.slots.descriptionListRoot,
-        columnClassNames[columns],
+        theme.slots.menuItem,
+        "pl-8",
+        getBaseMenuItemToneClassName(theme, tone),
+        disabled && theme.slots.menuItemDisabled,
         classNames?.root,
         className
       ),
       style: {
-        ...theme.styles.descriptionList,
+        ...theme.styles.menuItem,
         ...style
       },
-      children: [
-        items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+      onSelect: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onSelect?.(event);
+      },
+      children: renderItemContent({
+        children,
+        label,
+        icon,
+        shortcut,
+        inset,
+        classNames: {
+          icon: cn(theme.slots.menuItemIcon, classNames?.icon),
+          label: cn(theme.slots.menuItemLabel, classNames?.label),
+          shortcut: cn(theme.slots.menuItemShortcut, classNames?.shortcut)
+        },
+        indicator: /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenu__namespace.ItemIndicator,
           {
-            className: cn(theme.slots.descriptionListItem, classNames?.item),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("dt", { className: cn(theme.slots.descriptionListTerm, classNames?.term), children: item.term }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "dd",
-                {
-                  className: cn(theme.slots.descriptionListValue, classNames?.value),
-                  children: item.value
-                }
-              )
-            ]
-          },
-          index
-        )),
-        children
-      ]
+            "data-slot": "indicator",
+            className: cn(theme.slots.menuCheckboxIndicator, classNames?.indicator),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {})
+          }
+        )
+      })
     }
   );
-}
-function BaseField({
+});
+react.forwardRef(function BaseContextMenuRadioItem2({
+  children,
   label,
-  description,
-  message,
-  error,
-  required = false,
+  icon,
+  shortcut,
+  tone,
   disabled = false,
-  htmlFor,
+  inset = false,
+  value,
+  appearance,
+  className,
+  classNames,
+  style,
+  onSelect,
+  ...itemProps
+}, ref) {
+  validateBoolean(disabled, "RadioItem disabled");
+  validateBoolean(inset, "RadioItem inset");
+  validateTone(tone);
+  const resolvedTone = tone ?? "default";
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenu__namespace.RadioItem,
+    {
+      ...componentAttributes,
+      ...itemProps,
+      ref,
+      value,
+      disabled,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "radio-item",
+      "data-tone": resolvedTone,
+      "data-value": value,
+      "data-disabled": disabled || void 0,
+      className: cn(
+        theme.slots.menuItem,
+        "pl-8",
+        getBaseMenuItemToneClassName(theme, tone),
+        disabled && theme.slots.menuItemDisabled,
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.menuItem,
+        ...style
+      },
+      onSelect: (event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        onSelect?.(event);
+      },
+      children: renderItemContent({
+        children,
+        label,
+        icon,
+        shortcut,
+        inset,
+        classNames: {
+          icon: cn(theme.slots.menuItemIcon, classNames?.icon),
+          label: cn(theme.slots.menuItemLabel, classNames?.label),
+          shortcut: cn(theme.slots.menuItemShortcut, classNames?.shortcut)
+        },
+        indicator: /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenu__namespace.ItemIndicator,
+          {
+            "data-slot": "indicator",
+            className: cn(theme.slots.menuRadioIndicator, classNames?.indicator),
+            children: /* @__PURE__ */ jsxRuntime.jsx(DotIcon, {})
+          }
+        )
+      })
+    }
+  );
+});
+react.forwardRef(function BaseContextMenuSubTrigger2({
   children,
+  label,
+  icon,
+  tone,
+  disabled = false,
+  inset = false,
   appearance,
   className,
   classNames,
   style,
-  ...fieldProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  const resolvedMessage = hasRenderableNode(error) ? error : message;
+  ...itemProps
+}, ref) {
+  validateBoolean(disabled, "SubTrigger disabled");
+  validateBoolean(inset, "SubTrigger inset");
+  validateTone(tone);
+  const resolvedTone = tone ?? "default";
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
+  const resolvedLabel = children ?? label;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    ContextMenu__namespace.SubTrigger,
     {
-      ...fieldProps,
-      "aria-disabled": disabled || void 0,
+      ...componentAttributes,
+      ...itemProps,
+      ref,
+      disabled,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "sub-trigger",
+      "data-tone": resolvedTone,
+      "data-disabled": disabled || void 0,
       className: cn(
-        theme.slots.fieldRoot,
-        disabled && theme.slots.controlDisabled,
+        theme.slots.menuSubTrigger,
+        getBaseMenuItemToneClassName(theme, tone),
+        disabled && theme.slots.menuItemDisabled,
         classNames?.root,
         className
       ),
       style: {
-        ...theme.styles.field,
+        ...theme.styles.menuItem,
         ...style
       },
       children: [
-        hasRenderableNode(label) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.fieldLabelRow, classNames?.labelRow), children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
+        hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            htmlFor,
-            className: cn(theme.slots.fieldLabel, classNames?.label),
-            children: [
-              label,
-              required ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: cn(theme.slots.fieldRequired, classNames?.required),
-                  children: [
-                    " ",
-                    "*"
-                  ]
-                }
-              ) : null
-            ]
+            "data-slot": "icon",
+            className: cn(theme.slots.menuItemIcon, classNames?.icon),
+            children: icon
           }
-        ) }) : null,
-        hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        ) : inset ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            className: cn(theme.slots.fieldDescription, classNames?.description),
-            children: description
+            "aria-hidden": "true",
+            "data-slot": "icon",
+            className: "h-4 w-4 shrink-0"
           }
         ) : null,
-        hasRenderableNode(children) ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        hasRenderableNode(resolvedLabel) ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            className: cn(theme.slots.fieldControl, classNames?.control),
-            style: theme.styles.fieldControl,
-            children
+            "data-slot": "label",
+            className: cn(theme.slots.menuItemLabel, classNames?.label),
+            children: resolvedLabel
           }
         ) : null,
-        hasRenderableNode(resolvedMessage) ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
+            "data-slot": "sub-indicator",
             className: cn(
-              theme.slots.fieldMessage,
-              hasRenderableNode(error) && "text-destructive",
-              classNames?.message
+              theme.slots.menuSubTriggerIcon,
+              classNames?.shortcut,
+              "rtl:rotate-180"
             ),
-            children: resolvedMessage
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
           }
-        ) : null
+        )
+      ]
+    }
+  );
+});
+react.forwardRef(function BaseContextMenuSubContent2({
+  children,
+  appearance,
+  className,
+  classNames,
+  style,
+  sideOffset = 6,
+  ...subContentProps
+}, ref) {
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
+  const portal = useBaseOverlayPortal();
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenu__namespace.SubContent,
+    {
+      ...componentAttributes,
+      ...subContentProps,
+      ref,
+      sideOffset,
+      "data-monkeys-component": "context-menu",
+      "data-slot": "sub-content",
+      className: cn(theme.slots.menuSubContent, classNames?.root, className),
+      style: {
+        ...theme.styles.menuContent,
+        ...style
+      },
+      children
+    }
+  );
+  return portal.shouldPortal ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenu__namespace.Portal, { ...portal.radixPortalProps, children: content }) : content;
+});
+var columnClassNames = {
+  1: "grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-2 xl:grid-cols-3"
+};
+function BaseDescriptionList({
+  items,
+  columns = 1,
+  appearance,
+  className,
+  classNames,
+  style,
+  children,
+  ...listProps
+}) {
+  const theme = resolveBaseAppearance(appearance);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "dl",
+    {
+      ...listProps,
+      className: cn(
+        theme.slots.descriptionListRoot,
+        columnClassNames[columns],
+        classNames?.root,
+        className
+      ),
+      style: {
+        ...theme.styles.descriptionList,
+        ...style
+      },
+      children: [
+        items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(theme.slots.descriptionListItem, classNames?.item),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("dt", { className: cn(theme.slots.descriptionListTerm, classNames?.term), children: item.term }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "dd",
+                {
+                  className: cn(theme.slots.descriptionListValue, classNames?.value),
+                  children: item.value
+                }
+              )
+            ]
+          },
+          index
+        )),
+        children
       ]
     }
   );
 }
-var BaseInput = react.forwardRef(
-  function BaseInput2({
-    icon,
-    trailing,
-    invalid = false,
+function mergeAriaIds(...values) {
+  const ids = values.flatMap(
+    (value) => value?.split(/\s+/).filter(Boolean) ?? []
+  );
+  return ids.length ? Array.from(new Set(ids)).join(" ") : void 0;
+}
+function resolveOptionalId(value, fallback, name) {
+  if (value === void 0) return fallback;
+  if (!value.trim() || /\s/.test(value)) {
+    throw new TypeError(
+      `BaseField ${name} must be a non-empty ID without whitespace.`
+    );
+  }
+  return value;
+}
+var BaseField = react.forwardRef(
+  function BaseField2({
+    label,
+    description,
+    message,
+    error,
+    required = false,
     disabled = false,
-    readOnly = false,
+    htmlFor,
+    descriptionId,
+    messageId,
+    errorId,
+    children,
     appearance,
     className,
     classNames,
     style,
-    "aria-invalid": nativeAriaInvalid,
-    ...inputProps
+    ...fieldProps
   }, ref) {
-    const theme = resolveBaseAppearance(appearance);
+    for (const [name, value] of [
+      ["required", required],
+      ["disabled", disabled]
+    ]) {
+      if (typeof value !== "boolean") {
+        throw new TypeError(`BaseField ${name} must be a boolean.`);
+      }
+    }
+    const generatedId = react.useId();
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
+    const hasDescription = hasRenderableNode(description);
+    const hasError = hasRenderableNode(error);
+    const hasMessage = !hasError && hasRenderableNode(message);
+    const resolvedMessage = hasError ? error : message;
+    const resolvedControlId = htmlFor ?? `${generatedId}-control`;
+    const resolvedDescriptionId = hasDescription ? resolveOptionalId(
+      descriptionId,
+      `${generatedId}-description`,
+      "descriptionId"
+    ) : void 0;
+    const resolvedMessageId = hasMessage ? resolveOptionalId(messageId, `${generatedId}-message`, "messageId") : void 0;
+    const resolvedErrorId = hasError ? resolveOptionalId(errorId, `${generatedId}-error`, "errorId") : void 0;
+    const controlProps = {
+      id: resolvedControlId,
+      "aria-describedby": mergeAriaIds(
+        resolvedDescriptionId,
+        resolvedMessageId
+      ),
+      "aria-errormessage": resolvedErrorId,
+      "aria-invalid": hasError ? true : void 0,
+      "aria-required": required ? true : void 0,
+      required: required || void 0,
+      disabled: disabled || void 0
+    };
+    const renderedChildren = typeof children === "function" ? children(controlProps) : children;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ...componentAttributes,
+        ...fieldProps,
+        ref,
+        "aria-disabled": disabled || void 0,
+        "data-monkeys-component": "field",
+        "data-slot": "root",
+        "data-required": required || void 0,
+        "data-disabled": disabled || void 0,
+        "data-invalid": hasError || void 0,
         className: cn(
-          theme.slots.controlWrapper,
-          invalid && theme.slots.controlInvalid,
+          theme.slots.fieldRoot,
           disabled && theme.slots.controlDisabled,
-          readOnly && theme.slots.controlReadOnly,
           classNames?.root,
           className
         ),
         style: {
-          ...theme.styles.control,
-          ...invalid ? theme.styles.controlInvalid : void 0,
-          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...theme.styles.field,
           ...style
         },
         children: [
-          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+          hasRenderableNode(label) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              ...inputProps,
-              ref,
-              disabled,
-              readOnly,
-              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
-              className: cn(
-                theme.slots.controlBase,
-                theme.slots.controlInput,
-                classNames?.control
+              "data-slot": "label-row",
+              className: cn(theme.slots.fieldLabelRow, classNames?.labelRow),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  htmlFor: typeof children === "function" ? resolvedControlId : htmlFor,
+                  "data-slot": "label",
+                  className: cn(theme.slots.fieldLabel, classNames?.label),
+                  children: [
+                    label,
+                    required ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "required-indicator",
+                        className: cn(
+                          theme.slots.fieldRequired,
+                          classNames?.required
+                        ),
+                        children: [
+                          " ",
+                          "*"
+                        ]
+                      }
+                    ) : null
+                  ]
+                }
               )
             }
-          ),
-          hasRenderableNode(trailing) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlTrailing, classNames?.trailing), children: trailing }) : null
+          ) : null,
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: resolvedDescriptionId,
+              "data-slot": "description",
+              className: cn(
+                theme.slots.fieldDescription,
+                classNames?.description
+              ),
+              children: description
+            }
+          ) : null,
+          hasRenderableNode(renderedChildren) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "control",
+              className: cn(theme.slots.fieldControl, classNames?.control),
+              style: theme.styles.fieldControl,
+              children: renderedChildren
+            }
+          ) : null,
+          hasRenderableNode(resolvedMessage) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: hasError ? resolvedErrorId : resolvedMessageId,
+              role: hasError ? "alert" : void 0,
+              "data-slot": hasError ? "error" : "message",
+              className: cn(
+                theme.slots.fieldMessage,
+                hasError && "text-destructive-text",
+                classNames?.message
+              ),
+              children: resolvedMessage
+            }
+          ) : null
         ]
       }
     );
   }
 );
-function normalizeValues(values) {
-  const nextValues = [];
-  const seen = /* @__PURE__ */ new Set();
-  values?.forEach((value) => {
-    if (seen.has(value)) return;
-    seen.add(value);
-    nextValues.push(value);
-  });
-  return nextValues;
-}
-function getNextEnabledIndex(options, currentIndex, direction) {
-  if (!options.length) return -1;
-  const startIndex = currentIndex >= 0 ? currentIndex : 0;
-  for (let offset = 1; offset <= options.length; offset += 1) {
-    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
-    if (!options[nextIndex]?.disabled) {
-      return nextIndex;
-    }
-  }
-  return -1;
-}
-function getFirstEnabledIndex(options) {
-  return options.findIndex((option) => !option.disabled);
-}
-function getSafeTagCount(maxTagCount, total) {
-  if (maxTagCount === void 0) return total;
-  if (!Number.isFinite(maxTagCount)) return total;
-  return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
-}
-function getDefaultRemoveLabel(option) {
-  return `Remove ${option.value}`;
-}
-react.forwardRef(
-  function BaseMultiSelect2({
-    options,
-    value,
-    defaultValue,
-    name,
-    placeholder = "Select options",
+var controlSizeClassNames = {
+  sm: "h-8 px-2.5 text-xs",
+  md: "h-9 px-3 text-sm",
+  lg: "h-10 px-3.5 text-base"
+};
+var BaseInput = react.forwardRef(
+  function BaseInput2({
     icon,
+    trailing,
     invalid = false,
     disabled = false,
-    required = false,
-    openForPreview = false,
-    maxTagCount,
-    removeLabel = getDefaultRemoveLabel,
-    emptyLabel = "No options",
+    readOnly = false,
+    controlSize,
     appearance,
     className,
     classNames,
     style,
-    id,
     "aria-invalid": nativeAriaInvalid,
-    "aria-label": nativeAriaLabel,
-    "aria-labelledby": nativeAriaLabelledBy,
-    onValueChange,
-    ...rootProps
+    ...inputProps
   }, ref) {
-    const theme = resolveBaseAppearance(appearance);
-    const generatedId = react.useId();
-    const multiSelectId = id ?? generatedId;
-    const controlId = `${multiSelectId}-control`;
-    const listboxId = `${multiSelectId}-listbox`;
-    const rootRef = react.useRef(null);
-    const optionList = options ?? [];
-    const forceOpen = openForPreview;
-    const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
-    const open = forceOpen || uncontrolledOpen;
-    const [uncontrolledValue, setUncontrolledValue] = react.useState(
-      () => normalizeValues(defaultValue)
-    );
-    const [activeIndex, setActiveIndex] = react.useState(
-      () => getFirstEnabledIndex(optionList)
-    );
-    const isControlled = value !== void 0;
-    const selectedValues = react.useMemo(
-      () => normalizeValues(isControlled ? value : uncontrolledValue),
-      [isControlled, uncontrolledValue, value]
-    );
-    const selectedValueSet = react.useMemo(
-      () => new Set(selectedValues),
-      [selectedValues]
-    );
-    const optionByValue = react.useMemo(() => {
-      const map = /* @__PURE__ */ new Map();
-      optionList.forEach((option) => {
-        if (!map.has(option.value)) {
-          map.set(option.value, option);
-        }
-      });
-      return map;
-    }, [optionList]);
-    const selectedOptions = react.useMemo(
-      () => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
-        (option) => option !== void 0
-      ),
-      [optionByValue, selectedValues]
-    );
-    const firstEnabledIndex = react.useMemo(
-      () => getFirstEnabledIndex(optionList),
-      [optionList]
-    );
-    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
-    const visibleTagCount = getSafeTagCount(
-      maxTagCount,
-      selectedOptions.length
-    );
-    const visibleOptions = selectedOptions.slice(0, visibleTagCount);
-    const overflowCount = selectedOptions.length - visibleOptions.length;
-    const isPlaceholder = selectedOptions.length === 0;
-    const setRootRef = (node) => {
-      rootRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    };
-    const setOpen = (nextOpen) => {
-      if (disabled || forceOpen) return;
-      setUncontrolledOpen(nextOpen);
-      if (nextOpen) {
-        setActiveIndex(resolvedActiveIndex);
-      }
-    };
-    react.useEffect(() => {
-      if (!open || forceOpen) return void 0;
-      const handlePointerDown = (event) => {
-        if (!rootRef.current?.contains(event.target)) {
-          setUncontrolledOpen(false);
-        }
-      };
-      document.addEventListener("pointerdown", handlePointerDown);
-      return () => {
-        document.removeEventListener("pointerdown", handlePointerDown);
-      };
-    }, [forceOpen, open]);
-    react.useEffect(() => {
-      if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
-        setActiveIndex(resolvedActiveIndex);
-      }
-    }, [activeIndex, resolvedActiveIndex]);
-    const commitValues = (nextValues) => {
-      const normalizedValues = normalizeValues(nextValues);
-      if (!isControlled) {
-        setUncontrolledValue(normalizedValues);
-      }
-      onValueChange?.(normalizedValues);
-    };
-    const toggleOption = (option) => {
-      if (!option || option.disabled || disabled) return;
-      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
-      commitValues(nextValues);
-    };
-    const removeOption = (option) => {
-      if (disabled) return;
-      commitValues(
-        selectedValues.filter((selectedValue) => selectedValue !== option.value)
-      );
-    };
-    const focusOption = (direction) => {
-      const nextIndex = getNextEnabledIndex(
-        optionList,
-        resolvedActiveIndex,
-        direction
-      );
-      if (nextIndex >= 0) {
-        setActiveIndex(nextIndex);
-      }
-    };
-    const handleKeyDown = (event) => {
-      if (disabled) return;
-      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-        event.preventDefault();
-        if (!open) {
-          setOpen(true);
-          setActiveIndex(firstEnabledIndex);
-          return;
-        }
-        focusOption(event.key === "ArrowDown" ? 1 : -1);
-        return;
-      }
-      if (event.key === "Home") {
-        event.preventDefault();
-        setOpen(true);
-        setActiveIndex(firstEnabledIndex);
-        return;
-      }
-      if (event.key === "End") {
-        event.preventDefault();
-        setOpen(true);
-        for (let index = optionList.length - 1; index >= 0; index -= 1) {
-          if (!optionList[index]?.disabled) {
-            setActiveIndex(index);
-            break;
-          }
-        }
-        return;
-      }
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        if (!open) {
-          setOpen(true);
-          return;
-        }
-        toggleOption(optionList[resolvedActiveIndex]);
-        return;
+    for (const [name, value] of [
+      ["invalid", invalid],
+      ["disabled", disabled],
+      ["readOnly", readOnly]
+    ]) {
+      if (typeof value !== "boolean") {
+        throw new TypeError(`BaseInput ${name} must be a boolean.`);
       }
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
+    }
+    if (controlSize !== void 0 && controlSize !== "sm" && controlSize !== "md" && controlSize !== "lg") {
+      throw new TypeError('BaseInput controlSize must be "sm", "md", or "lg".');
+    }
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        ...rootProps,
-        id,
-        ref: setRootRef,
+        ...componentAttributes,
+        "data-monkeys-component": "input",
+        "data-slot": "root",
+        "data-size": controlSize,
+        "data-invalid": invalid || void 0,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
         className: cn(
           theme.slots.controlWrapper,
-          "overflow-visible",
-          open && "z-50",
           invalid && theme.slots.controlInvalid,
           disabled && theme.slots.controlDisabled,
+          readOnly && theme.slots.controlReadOnly,
           classNames?.root,
           className
         ),
@@ -2563,237 +3416,153 @@ react.forwardRef(
           ...theme.styles.control,
           ...invalid ? theme.styles.controlInvalid : void 0,
           ...disabled ? theme.styles.controlDisabled : void 0,
-          ...style
-        },
-        children: [
-          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: controlId,
-              role: "combobox",
-              tabIndex: disabled ? -1 : 0,
-              "aria-haspopup": "listbox",
-              "aria-expanded": open,
-              "aria-controls": listboxId,
-              "aria-disabled": disabled || void 0,
-              "aria-required": required || void 0,
-              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
-              "aria-label": nativeAriaLabel,
-              "aria-labelledby": nativeAriaLabelledBy,
-              className: cn(
-                theme.slots.controlBase,
-                "flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
-                disabled && "!cursor-not-allowed",
-                classNames?.control
-              ),
-              onClick: () => setOpen(!open),
-              onKeyDown: handleKeyDown,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: cn(
-                    "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
-                    classNames?.tagList
-                  ),
-                  children: [
-                    visibleOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "span",
-                      {
-                        className: cn(
-                          "inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
-                          classNames?.tag
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "span",
-                            {
-                              className: cn(
-                                "max-w-40 truncate",
-                                classNames?.tagLabel
-                              ),
-                              children: option.label
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
-                            {
-                              type: "button",
-                              "aria-label": removeLabel(option),
-                              disabled,
-                              className: cn(
-                                "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
-                                classNames?.tagRemove
-                              ),
-                              onClick: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                removeOption(option);
-                              },
-                              onMouseDown: (event) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                              },
-                              onKeyDown: (event) => event.stopPropagation(),
-                              children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "x" })
-                            }
-                          )
-                        ]
-                      },
-                      option.value
-                    )),
-                    overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
-                      "span",
-                      {
-                        className: cn(
-                          "inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
-                          classNames?.tag
-                        ),
-                        children: [
-                          "+",
-                          overflowCount
-                        ]
-                      }
-                    ) : null,
-                    isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "min-w-0 truncate",
-                          theme.slots.selectPlaceholder,
-                          classNames?.placeholder
-                        ),
-                        children: placeholder
-                      }
-                    ) : null
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                theme.slots.selectChevron,
-                open && "rotate-[225deg]",
-                classNames?.chevron
-              )
-            }
-          ),
-          name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "hidden",
-              name,
-              value: selectedValue,
-              className: classNames?.hiddenInput
-            },
-            selectedValue
-          )) : null,
-          open ? /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: listboxId,
-              role: "listbox",
-              "aria-multiselectable": "true",
-              "aria-labelledby": controlId,
-              className: cn(theme.slots.selectMenu, classNames?.menu),
-              style: theme.styles.selectMenu,
-              children: optionList.length > 0 ? optionList.map((option, index) => {
-                const selected = selectedValueSet.has(option.value);
-                const active = index === resolvedActiveIndex;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    role: "option",
-                    "aria-selected": selected,
-                    disabled: option.disabled,
-                    className: cn(
-                      theme.slots.selectOption,
-                      "gap-2",
-                      active && theme.slots.selectOptionActive,
-                      selected && theme.slots.selectOptionSelected,
-                      option.disabled && theme.slots.selectOptionDisabled,
-                      classNames?.option
-                    ),
-                    style: {
-                      ...theme.styles.selectOption,
-                      ...active ? theme.styles.selectOptionActive : void 0,
-                      ...selected ? theme.styles.selectOptionSelected : void 0
-                    },
-                    onMouseEnter: () => {
-                      if (!option.disabled) {
-                        setActiveIndex(index);
-                      }
-                    },
-                    onMouseDown: (event) => event.preventDefault(),
-                    onClick: () => toggleOption(option),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: cn(
-                            "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
-                            selected && "border-primary/40 bg-primary text-primary-foreground",
-                            classNames?.optionIndicator
-                          ),
-                          children: selected ? "\u2713" : null
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "min-w-0 flex-1 truncate",
-                            classNames?.optionLabel
-                          ),
-                          children: option.label
-                        }
-                      )
-                    ]
-                  },
-                  option.value
-                );
-              }) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "px-2.5 py-2 text-sm text-muted-foreground",
-                    classNames?.empty
-                  ),
-                  children: emptyLabel
-                }
+          ...style
+        },
+        children: [
+          hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "icon",
+              className: cn(theme.slots.controlIcon, classNames?.icon),
+              children: icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...inputProps,
+              ref,
+              disabled,
+              readOnly,
+              "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+              "data-slot": "control",
+              "data-size": controlSize,
+              "data-invalid": invalid || void 0,
+              "data-disabled": disabled || void 0,
+              "data-readonly": readOnly || void 0,
+              className: cn(
+                theme.slots.controlBase,
+                theme.slots.controlInput,
+                controlSize && controlSizeClassNames[controlSize],
+                classNames?.control
               )
             }
+          ),
+          hasRenderableNode(trailing) ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "trailing",
+              className: cn(theme.slots.controlTrailing, classNames?.trailing),
+              children: trailing
+            }
           ) : null
         ]
       }
     );
   }
 );
+var typeaheadResetDelay = 500;
+function noop() {
+}
+function validateSelectProps({
+  options,
+  value,
+  defaultValue,
+  invalid,
+  disabled,
+  openForPreview,
+  required
+}) {
+  for (const [name, state] of [
+    ["invalid", invalid],
+    ["disabled", disabled],
+    ["openForPreview", openForPreview]
+  ]) {
+    if (typeof state !== "boolean") {
+      throw new TypeError(`BaseSelect ${name} must be a boolean.`);
+    }
+  }
+  if (required !== void 0 && typeof required !== "boolean") {
+    throw new TypeError("BaseSelect required must be a boolean.");
+  }
+  if (options !== void 0 && !Array.isArray(options)) {
+    throw new TypeError("BaseSelect options must be an array.");
+  }
+  options?.forEach((option, index) => {
+    if (!option || typeof option !== "object") {
+      throw new TypeError(`BaseSelect option at index ${index} must be an object.`);
+    }
+    if (typeof option.value !== "string") {
+      throw new TypeError(
+        `BaseSelect option value at index ${index} must be a string.`
+      );
+    }
+    if (option.disabled !== void 0 && typeof option.disabled !== "boolean") {
+      throw new TypeError(
+        `BaseSelect option disabled at index ${index} must be a boolean.`
+      );
+    }
+    if (option.textValue !== void 0 && typeof option.textValue !== "string") {
+      throw new TypeError(
+        `BaseSelect option textValue at index ${index} must be a string.`
+      );
+    }
+  });
+  if (options?.length) {
+    if (value !== void 0 && typeof value !== "string" && typeof value !== "number") {
+      throw new TypeError(
+        "BaseSelect value must be a string or number when options are used."
+      );
+    }
+    if (defaultValue !== void 0 && typeof defaultValue !== "string" && typeof defaultValue !== "number") {
+      throw new TypeError(
+        "BaseSelect defaultValue must be a string or number when options are used."
+      );
+    }
+  }
+}
+function normalizeValue(value) {
+  return typeof value === "string" || typeof value === "number" ? String(value) : "";
+}
 function findOption(options, value) {
   if (value === void 0) return void 0;
   return options.find((option) => option.value === value);
 }
-function getInitialValue(options, defaultValue) {
-  if (typeof defaultValue === "string") {
-    return defaultValue;
-  }
-  return "";
+function getInitialActiveIndex(options, value) {
+  const selectedIndex = options.findIndex(
+    (option) => option.value === value && !option.disabled
+  );
+  if (selectedIndex >= 0) return selectedIndex;
+  return options.findIndex((option) => !option.disabled);
 }
-function getNextEnabledIndex2(options, currentIndex, direction) {
+function getNextEnabledIndex(options, currentIndex, direction) {
   if (!options.length) return -1;
+  const startIndex = currentIndex >= 0 ? currentIndex : direction === 1 ? -1 : 0;
   for (let offset = 1; offset <= options.length; offset += 1) {
-    const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
+    const nextIndex = (startIndex + offset * direction + options.length) % options.length;
     if (!options[nextIndex]?.disabled) {
       return nextIndex;
     }
   }
   return -1;
 }
+function getBoundaryEnabledIndex(options, boundary) {
+  if (boundary === "first") {
+    return options.findIndex((option) => !option.disabled);
+  }
+  for (let index = options.length - 1; index >= 0; index -= 1) {
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}
+function getOptionText(option) {
+  if (option.textValue !== void 0) return option.textValue;
+  if (typeof option.label === "string") return option.label;
+  return option.value;
+}
+function toDomId(value) {
+  return value.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
 var BaseSelect = react.forwardRef(
   function BaseSelect2({
     options,
@@ -2810,40 +3579,64 @@ var BaseSelect = react.forwardRef(
     value,
     defaultValue,
     onChange,
+    onFocus,
+    onInvalid,
     name,
     id,
     required,
     "aria-invalid": nativeAriaInvalid,
     "aria-label": nativeAriaLabel,
     "aria-labelledby": nativeAriaLabelledBy,
+    "aria-describedby": nativeAriaDescribedBy,
+    "aria-errormessage": nativeAriaErrorMessage,
+    "aria-required": nativeAriaRequired,
     ...selectProps
   }, ref) {
-    const theme = resolveBaseAppearance(appearance);
+    validateSelectProps({
+      options,
+      value,
+      defaultValue,
+      invalid,
+      disabled,
+      openForPreview,
+      required
+    });
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
     const generatedId = react.useId();
     const selectId = id ?? generatedId;
+    const triggerId = `${selectId}-button`;
     const listboxId = `${selectId}-listbox`;
     const rootRef = react.useRef(null);
+    const triggerRef = react.useRef(null);
     const selectRef = react.useRef(null);
+    const optionRefs = react.useRef([]);
+    const composingRef = react.useRef(false);
+    const typeaheadBufferRef = react.useRef("");
+    const typeaheadTimerRef = react.useRef(null);
     const optionList = options ?? [];
     const isCustomSelect = optionList.length > 0;
     const forceOpen = openForPreview;
     const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
     const open = forceOpen || uncontrolledOpen;
     const [uncontrolledValue, setUncontrolledValue] = react.useState(
-      () => getInitialValue(optionList, defaultValue)
+      () => normalizeValue(defaultValue)
     );
     const isControlled = value !== void 0;
-    const selectedValue = String(isControlled ? value : uncontrolledValue);
+    const selectedValue = isControlled ? normalizeValue(value) : uncontrolledValue;
     const selectedOption = findOption(optionList, selectedValue);
-    const activeIndex = react.useMemo(() => {
-      const selectedIndex = optionList.findIndex(
-        (option) => option.value === selectedValue && !option.disabled
-      );
-      if (selectedIndex >= 0) return selectedIndex;
-      return optionList.findIndex((option) => !option.disabled);
-    }, [optionList, selectedValue]);
+    const [activeIndex, setActiveIndex] = react.useState(
+      () => getInitialActiveIndex(optionList, selectedValue)
+    );
+    const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : getInitialActiveIndex(optionList, selectedValue);
+    const optionIds = optionList.map(
+      (option, index) => `${selectId}-option-${index}-${toDomId(option.value)}`
+    );
     const visibleLabel = selectedOption?.label ?? placeholder;
     const isPlaceholder = !selectedOption;
+    const layerDirection = selectProps.dir ?? componentAttributes.dir;
+    const rootState = disabled ? "disabled" : invalid ? "invalid" : open ? "open" : "closed";
     const setSelectRef = (node) => {
       selectRef.current = node;
       if (typeof ref === "function") {
@@ -2852,71 +3645,207 @@ var BaseSelect = react.forwardRef(
         ref.current = node;
       }
     };
-    react.useEffect(() => {
-      if (!open || forceOpen) return void 0;
-      const handlePointerDown = (event) => {
-        if (!rootRef.current?.contains(event.target)) {
-          setUncontrolledOpen(false);
-        }
-      };
-      document.addEventListener("pointerdown", handlePointerDown);
-      return () => {
-        document.removeEventListener("pointerdown", handlePointerDown);
-      };
-    }, [forceOpen, open]);
+    const resetActiveIndex = () => {
+      setActiveIndex(getInitialActiveIndex(optionList, selectedValue));
+    };
+    const cancelAndClose = () => {
+      resetActiveIndex();
+      if (!forceOpen) setUncontrolledOpen(false);
+    };
+    const openMenu = (nextActiveIndex) => {
+      setActiveIndex(
+        nextActiveIndex ?? getInitialActiveIndex(optionList, selectedValue)
+      );
+      if (!forceOpen) setUncontrolledOpen(true);
+    };
     const notifyChange = (nextValue) => {
       const selectElement = selectRef.current;
       if (!selectElement) return;
+      const ownerWindow = selectElement.ownerDocument.defaultView;
+      if (!ownerWindow) {
+        throw new Error(
+          "BaseSelect cannot dispatch change without an owning window."
+        );
+      }
       const valueSetter = Object.getOwnPropertyDescriptor(
-        HTMLSelectElement.prototype,
+        ownerWindow.HTMLSelectElement.prototype,
         "value"
       )?.set;
-      valueSetter?.call(selectElement, nextValue);
-      selectElement.dispatchEvent(new Event("change", { bubbles: true }));
-    };
-    const commitValue = (nextValue, optionDisabled) => {
-      if (optionDisabled || disabled) return;
-      if (!isControlled) {
-        setUncontrolledValue(nextValue);
+      if (!valueSetter) {
+        throw new Error("BaseSelect could not resolve the native select value setter.");
       }
-      notifyChange(nextValue);
-      if (!forceOpen) {
-        setUncontrolledOpen(false);
+      valueSetter.call(selectElement, nextValue);
+      selectElement.dispatchEvent(
+        new ownerWindow.Event("change", { bubbles: true })
+      );
+    };
+    const commitIndex = (nextIndex) => {
+      const option = optionList[nextIndex];
+      if (!option || option.disabled || disabled) return;
+      setActiveIndex(nextIndex);
+      if (option.value !== selectedValue) {
+        if (!isControlled) {
+          setUncontrolledValue(option.value);
+        }
+        notifyChange(option.value);
       }
+      if (!forceOpen) setUncontrolledOpen(false);
+    };
+    const moveActive = (nextIndex) => {
+      if (nextIndex < 0 || optionList[nextIndex]?.disabled) return;
+      setActiveIndex(nextIndex);
+      if (!open) openMenu(nextIndex);
     };
-    const focusOption = (direction) => {
-      const currentIndex = activeIndex >= 0 ? activeIndex : 0;
-      const nextIndex = getNextEnabledIndex2(optionList, currentIndex, direction);
-      if (nextIndex >= 0) {
-        commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
+    const handleTypeahead = (event, character) => {
+      const ownerWindow = event.currentTarget.ownerDocument.defaultView;
+      if (!ownerWindow) return;
+      const nextBuffer = `${typeaheadBufferRef.current}${character}`.toLocaleLowerCase();
+      typeaheadBufferRef.current = nextBuffer;
+      if (typeaheadTimerRef.current) {
+        typeaheadTimerRef.current.ownerWindow.clearTimeout(
+          typeaheadTimerRef.current.timerId
+        );
+      }
+      typeaheadTimerRef.current = {
+        ownerWindow,
+        timerId: ownerWindow.setTimeout(() => {
+          typeaheadBufferRef.current = "";
+          typeaheadTimerRef.current = null;
+        }, typeaheadResetDelay)
+      };
+      const repeatedCharacter = Array.from(nextBuffer).every(
+        (bufferCharacter) => bufferCharacter === nextBuffer[0]
+      );
+      const query = repeatedCharacter ? character.toLocaleLowerCase() : nextBuffer;
+      const startIndex = open ? resolvedActiveIndex : optionList.findIndex(
+        (option) => option.value === selectedValue && !option.disabled
+      );
+      for (let offset = 1; offset <= optionList.length; offset += 1) {
+        const index = (startIndex + offset + optionList.length) % optionList.length;
+        const option = optionList[index];
+        if (!option?.disabled && getOptionText(option).trim().toLocaleLowerCase().startsWith(query)) {
+          event.preventDefault();
+          moveActive(index);
+          return;
+        }
       }
     };
     const handleKeyDown = (event) => {
-      if (disabled) return;
+      if (disabled || composingRef.current || event.nativeEvent.isComposing) {
+        return;
+      }
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
-        if (!open) {
-          setUncontrolledOpen(true);
-          return;
-        }
-        focusOption(event.key === "ArrowDown" ? 1 : -1);
+        const selectedIndex = optionList.findIndex(
+          (option) => option.value === selectedValue && !option.disabled
+        );
+        const currentIndex = open ? resolvedActiveIndex : selectedIndex;
+        moveActive(
+          getNextEnabledIndex(
+            optionList,
+            currentIndex,
+            event.key === "ArrowDown" ? 1 : -1
+          )
+        );
+        return;
+      }
+      if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        moveActive(
+          getBoundaryEnabledIndex(
+            optionList,
+            event.key === "Home" ? "first" : "last"
+          )
+        );
         return;
       }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        if (!forceOpen) {
-          setUncontrolledOpen((current) => !current);
+        if (open) {
+          commitIndex(resolvedActiveIndex);
+        } else {
+          openMenu();
         }
         return;
       }
-      if (event.key === "Escape") {
-        setUncontrolledOpen(false);
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        cancelAndClose();
+        return;
+      }
+      if (event.key === "Tab" && open) {
+        commitIndex(resolvedActiveIndex);
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && !/\s/.test(event.key)) {
+        handleTypeahead(event, event.key);
       }
     };
+    const handleCustomFocus = (event) => {
+      onFocus?.(event);
+      if (!event.defaultPrevented) triggerRef.current?.focus();
+    };
+    const handleCustomInvalid = (event) => {
+      onInvalid?.(event);
+      event.preventDefault();
+      triggerRef.current?.focus();
+    };
+    react.useEffect(() => {
+      if (!isCustomSelect || !open || forceOpen) return void 0;
+      const ownerDocument = rootRef.current?.ownerDocument;
+      if (!ownerDocument) return void 0;
+      const handlePointerDown = (event) => {
+        if (!rootRef.current?.contains(event.target)) {
+          cancelAndClose();
+        }
+      };
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }, [forceOpen, isCustomSelect, open, optionList, selectedValue]);
+    react.useEffect(() => {
+      if (!isCustomSelect || !open || resolvedActiveIndex < 0) return;
+      optionRefs.current[resolvedActiveIndex]?.scrollIntoView?.({
+        block: "nearest"
+      });
+    }, [isCustomSelect, open, resolvedActiveIndex]);
+    react.useEffect(() => {
+      if (!isCustomSelect || isControlled) return void 0;
+      const selectElement = selectRef.current;
+      const form = selectElement?.form;
+      const ownerWindow = selectElement?.ownerDocument.defaultView;
+      if (!form || !ownerWindow) return void 0;
+      const handleReset = () => {
+        ownerWindow.setTimeout(() => {
+          const resetValue = normalizeValue(defaultValue);
+          setUncontrolledValue(resetValue);
+          setActiveIndex(getInitialActiveIndex(optionList, resetValue));
+          if (!forceOpen) setUncontrolledOpen(false);
+        }, 0);
+      };
+      form.addEventListener("reset", handleReset);
+      return () => form.removeEventListener("reset", handleReset);
+    }, [defaultValue, forceOpen, isControlled, isCustomSelect, optionList]);
+    react.useEffect(
+      () => () => {
+        if (typeaheadTimerRef.current) {
+          typeaheadTimerRef.current.ownerWindow.clearTimeout(
+            typeaheadTimerRef.current.timerId
+          );
+        }
+      },
+      []
+    );
     if (!isCustomSelect) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          ...componentAttributes,
+          "data-monkeys-component": "select",
+          "data-slot": "root",
+          "data-state": rootState,
+          "data-native": "true",
           className: cn(
             theme.slots.controlWrapper,
             invalid && theme.slots.controlInvalid,
@@ -2935,6 +3864,7 @@ var BaseSelect = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs(
               "select",
               {
+                ...componentAttributes,
                 ...selectProps,
                 id,
                 ref,
@@ -2946,6 +3876,15 @@ var BaseSelect = react.forwardRef(
                 "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
                 "aria-label": nativeAriaLabel,
                 "aria-labelledby": nativeAriaLabelledBy,
+                "aria-describedby": nativeAriaDescribedBy,
+                "aria-errormessage": nativeAriaErrorMessage,
+                "aria-required": nativeAriaRequired,
+                "data-monkeys-component": "select",
+                "data-slot": "native",
+                "data-state": rootState,
+                "data-native": "true",
+                onFocus,
+                onInvalid,
                 onChange,
                 className: cn(
                   theme.slots.controlBase,
@@ -2966,7 +3905,13 @@ var BaseSelect = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ...componentAttributes,
         ref: rootRef,
+        dir: layerDirection,
+        "data-monkeys-component": "select",
+        "data-slot": "root",
+        "data-state": rootState,
+        "data-native": "false",
         className: cn(
           theme.slots.controlWrapper,
           "overflow-visible",
@@ -2987,15 +3932,27 @@ var BaseSelect = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
+              ...componentAttributes,
+              ref: triggerRef,
               type: "button",
-              id: `${selectId}-button`,
+              id: triggerId,
+              role: "combobox",
               disabled,
+              dir: layerDirection,
               "aria-haspopup": "listbox",
               "aria-expanded": open,
               "aria-controls": listboxId,
+              "aria-activedescendant": open && resolvedActiveIndex >= 0 ? optionIds[resolvedActiveIndex] : void 0,
+              "aria-autocomplete": "none",
               "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
               "aria-label": nativeAriaLabel,
               "aria-labelledby": nativeAriaLabelledBy,
+              "aria-describedby": nativeAriaDescribedBy,
+              "aria-errormessage": nativeAriaErrorMessage,
+              "aria-required": nativeAriaRequired ?? (required || void 0),
+              "data-monkeys-component": "select",
+              "data-slot": "trigger",
+              "data-state": rootState,
               className: cn(
                 theme.slots.controlBase,
                 theme.slots.controlSelect,
@@ -3003,10 +3960,20 @@ var BaseSelect = react.forwardRef(
                 classNames?.control
               ),
               onClick: () => {
-                if (!forceOpen) {
-                  setUncontrolledOpen((current) => !current);
+                if (open) cancelAndClose();
+                else openMenu();
+              },
+              onBlur: (event) => {
+                if (!rootRef.current?.contains(event.relatedTarget)) {
+                  cancelAndClose();
                 }
               },
+              onCompositionStart: () => {
+                composingRef.current = true;
+              },
+              onCompositionEnd: () => {
+                composingRef.current = false;
+              },
               onKeyDown: handleKeyDown,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
@@ -3033,6 +4000,7 @@ var BaseSelect = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "select",
             {
+              ...componentAttributes,
               ...selectProps,
               ref: setSelectRef,
               id,
@@ -3040,10 +4008,17 @@ var BaseSelect = react.forwardRef(
               value: selectedValue,
               required,
               disabled,
+              dir: layerDirection,
               "aria-hidden": "true",
               tabIndex: -1,
+              "data-monkeys-component": "select",
+              "data-slot": "native",
+              "data-state": rootState,
+              "data-native": "false",
               className: theme.slots.selectNative,
-              onChange,
+              onFocus: handleCustomFocus,
+              onInvalid: handleCustomInvalid,
+              onChange: onChange ?? noop,
               children: [
                 hasRenderableNode(placeholder) ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }) : null,
                 optionList.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -3051,7 +4026,7 @@ var BaseSelect = react.forwardRef(
                   {
                     value: option.value,
                     disabled: option.disabled,
-                    children: typeof option.label === "string" ? option.label : option.value
+                    children: getOptionText(option)
                   },
                   option.value
                 ))
@@ -3061,21 +4036,41 @@ var BaseSelect = react.forwardRef(
           open ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
+              ...componentAttributes,
               id: listboxId,
               role: "listbox",
-              "aria-labelledby": `${selectId}-button`,
+              dir: layerDirection,
+              "aria-labelledby": triggerId,
+              "data-monkeys-component": "select",
+              "data-slot": "menu",
+              "data-state": "open",
               className: cn(theme.slots.selectMenu, classNames?.menu),
               style: theme.styles.selectMenu,
               children: optionList.map((option, index) => {
                 const selected = option.value === selectedValue;
-                const active = index === activeIndex;
-                return /* @__PURE__ */ jsxRuntime.jsx(
+                const active = index === resolvedActiveIndex;
+                const optionState = option.disabled ? "disabled" : active ? "active" : selected ? "selected" : "idle";
+                return /* @__PURE__ */ react.createElement(
                   "button",
                   {
+                    ...componentAttributes,
+                    ref: (node) => {
+                      optionRefs.current[index] = node;
+                    },
+                    key: option.value,
+                    id: optionIds[index],
                     type: "button",
                     role: "option",
-                    "aria-selected": selected,
+                    tabIndex: -1,
                     disabled: option.disabled,
+                    dir: layerDirection,
+                    "aria-selected": selected,
+                    "data-monkeys-component": "select",
+                    "data-slot": "option",
+                    "data-state": optionState,
+                    "data-active": active || void 0,
+                    "data-selected": selected || void 0,
+                    "data-disabled": option.disabled || void 0,
                     className: cn(
                       theme.slots.selectOption,
                       active && theme.slots.selectOptionActive,
@@ -3089,10 +4084,9 @@ var BaseSelect = react.forwardRef(
                       ...selected ? theme.styles.selectOptionSelected : void 0
                     },
                     onMouseDown: (event) => event.preventDefault(),
-                    onClick: () => commitValue(option.value, option.disabled),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })
+                    onClick: () => commitIndex(index)
                   },
-                  option.value
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })
                 );
               })
             }
@@ -3173,115 +4167,193 @@ function BaseSegmentedControl({
     }
   );
 }
-react.forwardRef(
-  function BaseSwitch2({
-    label,
-    description,
-    disabled = false,
-    appearance,
-    className,
-    classNames,
-    style,
-    checked,
-    defaultChecked,
-    onChange,
-    ...switchProps
-  }, ref) {
-    const theme = resolveBaseAppearance(appearance);
-    const [uncontrolledChecked, setUncontrolledChecked] = react.useState(
-      defaultChecked ?? false
+var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
+var COLUMN_RESIZE_KEYBOARD_STEP = 8;
+function assignRef2(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+function assertBoolean(name, value) {
+  if (value !== void 0 && typeof value !== "boolean") {
+    throw new Error(`BaseTable ${name} must be a boolean.`);
+  }
+}
+function assertEnum(name, value, values) {
+  if (value !== void 0 && !values.includes(value)) {
+    throw new Error(
+      `BaseTable ${name} must be one of ${values.map((item) => `"${item}"`).join(", ")}.`
     );
-    const isControlled = checked !== void 0;
-    const resolvedChecked = isControlled ? checked : uncontrolledChecked;
-    const handleChange = (event) => {
-      if (!isControlled) {
-        setUncontrolledChecked(event.currentTarget.checked);
-      }
-      onChange?.(event);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        className: cn(
-          theme.slots.switchRoot,
-          disabled && theme.slots.switchDisabled,
-          classNames?.root,
-          className
-        ),
-        style: {
-          ...theme.styles.switchRoot,
-          ...style
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: cn(
-                theme.slots.switchTrack,
-                resolvedChecked && theme.slots.switchChecked,
-                classNames?.track
-              ),
-              style: theme.styles.switchTrack,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    ...switchProps,
-                    ref,
-                    type: "checkbox",
-                    disabled,
-                    checked,
-                    defaultChecked,
-                    onChange: handleChange,
-                    className: cn(theme.slots.switchInput, classNames?.input)
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: cn(
-                      theme.slots.switchThumb,
-                      resolvedChecked && "translate-x-5",
-                      classNames?.thumb
-                    ),
-                    style: theme.styles.switchThumb
-                  }
-                )
-              ]
-            }
-          ),
-          hasRenderableNode(label) || hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(theme.slots.switchContent, classNames?.content), children: [
-            hasRenderableNode(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.switchLabel, classNames?.label), children: label }) : null,
-            hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cn(
-                  theme.slots.switchDescription,
-                  classNames?.description
-                ),
-                children: description
-              }
-            ) : null
-          ] }) : null
-        ]
-      }
+  }
+}
+function assertOptionalLabel(name, value) {
+  if (value !== void 0 && (typeof value !== "string" || value.trim().length === 0)) {
+    throw new Error(`BaseTable ${name} must be a non-empty string when provided.`);
+  }
+}
+function assertOptionalFunction(name, value) {
+  if (value !== void 0 && typeof value !== "function") {
+    throw new Error(`BaseTable ${name} must be a function when provided.`);
+  }
+}
+function validateCssSizeValue(value, name, options = {}) {
+  if (value === void 0) return;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value < 0) {
+      throw new Error(
+        `BaseTable ${name} must be a finite non-negative number${options.stringAllowed ? " or a non-empty CSS size string" : ""}.`
+      );
+    }
+    return;
+  }
+  if (options.stringAllowed && typeof value === "string" && value.trim().length > 0) {
+    return;
+  }
+  throw new Error(
+    `BaseTable ${name} must be ${options.stringAllowed ? "a finite non-negative number or a non-empty CSS size string" : "a finite non-negative number"}.`
+  );
+}
+function validateColumns(columns) {
+  if (columns === void 0) return void 0;
+  if (!Array.isArray(columns)) {
+    throw new Error("BaseTable columns must be an array when provided.");
+  }
+  const ids = /* @__PURE__ */ new Set();
+  columns.forEach((column, index) => {
+    if (!column || typeof column !== "object" || Array.isArray(column)) {
+      throw new Error(`BaseTable column at index ${index} must be an object.`);
+    }
+    const definition = column;
+    if (typeof definition.id !== "string" || definition.id.trim().length === 0) {
+      throw new Error(
+        `BaseTable column id at index ${index} must be a non-empty string.`
+      );
+    }
+    const columnId = definition.id.trim();
+    if (definition.id !== columnId) {
+      throw new Error(
+        `BaseTable column id "${definition.id}" must not contain surrounding whitespace.`
+      );
+    }
+    if (ids.has(columnId)) {
+      throw new Error(`BaseTable columns contain duplicate id "${columnId}".`);
+    }
+    ids.add(columnId);
+    validateCssSizeValue(definition.width, `column "${columnId}" width`, {
+      stringAllowed: true
+    });
+    validateCssSizeValue(definition.minWidth, `column "${columnId}" minWidth`, {
+      stringAllowed: true
+    });
+    validateCssSizeValue(definition.maxWidth, `column "${columnId}" maxWidth`, {
+      stringAllowed: true
+    });
+    if (typeof definition.minWidth === "number" && typeof definition.maxWidth === "number" && definition.minWidth > definition.maxWidth) {
+      throw new Error(
+        `BaseTable column "${columnId}" minWidth cannot be greater than maxWidth.`
+      );
+    }
+  });
+  return ids;
+}
+function validateColumnOrder(columnOrder, knownColumnIds) {
+  if (columnOrder === void 0) return;
+  if (!Array.isArray(columnOrder)) {
+    throw new Error("BaseTable columnOrder must be an array when provided.");
+  }
+  const ids = /* @__PURE__ */ new Set();
+  columnOrder.forEach((value, index) => {
+    if (typeof value !== "string" || value.trim().length === 0) {
+      throw new Error(
+        `BaseTable columnOrder entry at index ${index} must be a non-empty string.`
+      );
+    }
+    const columnId = value.trim();
+    if (value !== columnId) {
+      throw new Error(
+        `BaseTable columnOrder entry "${value}" must not contain surrounding whitespace.`
+      );
+    }
+    if (ids.has(columnId)) {
+      throw new Error(
+        `BaseTable columnOrder contains duplicate id "${columnId}".`
+      );
+    }
+    if (knownColumnIds && !knownColumnIds.has(columnId)) {
+      throw new Error(
+        `BaseTable columnOrder contains unknown column id "${columnId}".`
+      );
+    }
+    ids.add(columnId);
+  });
+  if (knownColumnIds && ids.size !== knownColumnIds.size) {
+    const missing = [...knownColumnIds].filter((columnId) => !ids.has(columnId));
+    throw new Error(
+      `BaseTable columnOrder must contain every configured column id; missing ${missing.map((columnId) => `"${columnId}"`).join(", ")}.`
     );
   }
-);
-var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
+}
+function validateColumnSizes(columnSizes, knownColumnIds) {
+  if (columnSizes === void 0) return;
+  if (!columnSizes || typeof columnSizes !== "object" || Array.isArray(columnSizes) || ![Object.prototype, null].includes(Object.getPrototypeOf(columnSizes))) {
+    throw new Error(
+      "BaseTable columnSizes must be a plain record when provided."
+    );
+  }
+  Object.entries(columnSizes).forEach(([columnId, value]) => {
+    const normalizedColumnId = columnId.trim();
+    if (normalizedColumnId.length === 0) {
+      throw new Error("BaseTable columnSizes keys must be non-empty strings.");
+    }
+    if (columnId !== normalizedColumnId) {
+      throw new Error(
+        `BaseTable columnSizes key "${columnId}" must not contain surrounding whitespace.`
+      );
+    }
+    if (knownColumnIds && !knownColumnIds.has(normalizedColumnId)) {
+      throw new Error(
+        `BaseTable columnSizes contains unknown column id "${columnId}".`
+      );
+    }
+    validateCssSizeValue(value, `columnSizes["${columnId}"]`);
+  });
+}
+function isRtl(element) {
+  const ownerWindow = element.ownerDocument.defaultView;
+  if (ownerWindow) {
+    return ownerWindow.getComputedStyle(element).direction === "rtl";
+  }
+  return element.closest('[dir="rtl"]') !== null;
+}
+function setPointerCaptureIfAvailable(target, pointerId) {
+  if (!target.setPointerCapture) return;
+  try {
+    target.setPointerCapture(pointerId);
+  } catch (error) {
+    const OwnerDOMException = target.ownerDocument.defaultView?.DOMException;
+    if (OwnerDOMException && error instanceof OwnerDOMException && error.name === "NotFoundError") {
+      return;
+    }
+    throw error;
+  }
+}
 var BaseTableContext = react.createContext(null);
 function useBaseTableContext(appearance) {
   const context = react.useContext(BaseTableContext);
+  const providerAppearance = useMonkeysBaseAppearance(appearance);
   if (context) {
+    const resolvedAppearance = appearance === void 0 ? context.appearance : providerAppearance;
     return {
       ...context,
-      theme: appearance ? resolveBaseAppearance(appearance) : context.theme,
-      appearance: appearance ?? context.appearance
+      theme: appearance === void 0 ? context.theme : resolveBaseAppearance(resolvedAppearance),
+      appearance: resolvedAppearance
     };
   }
-  const theme = resolveBaseAppearance(appearance);
+  const theme = resolveBaseAppearance(providerAppearance);
   return {
-    appearance,
+    appearance: providerAppearance,
     theme,
     layout: "native",
     setDraggingColumnId: () => {
@@ -3454,7 +4526,7 @@ function DragHandleIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-current" })
   ] });
 }
-function BaseTableContainer({
+var BaseTableContainer = react.forwardRef(function BaseTableContainer2({
   appearance,
   attachedFooter = false,
   children,
@@ -3462,8 +4534,11 @@ function BaseTableContainer({
   classNames,
   style,
   ...containerProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
+}, ref) {
+  assertBoolean("attachedFooter", attachedFooter);
+  const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+  const componentAttributes = useMonkeysComponentAttributes();
+  const theme = resolveBaseAppearance(resolvedAppearance);
   const containsSplitScrollTable = hasSplitScrollTable(children);
   const splitScrollContainerStyle = containsSplitScrollTable ? {
     overflow: "hidden",
@@ -3472,7 +4547,11 @@ function BaseTableContainer({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ...componentAttributes,
       ...containerProps,
+      ref,
+      "data-monkeys-component": "table-container",
+      "data-slot": "container",
       "data-base-table-container": "",
       "data-attached-footer": attachedFooter ? "" : void 0,
       className: cn(
@@ -3490,84 +4569,100 @@ function BaseTableContainer({
       children
     }
   );
-}
-function BaseTable({
-  appearance,
-  className,
-  classNames,
-  style,
-  layout = "native",
-  columns,
-  bodyMaxHeight,
-  bodyClassName,
-  columnOrder,
-  columnSizes,
-  columnDragEnabled = false,
-  columnResizeEnabled = false,
-  onColumnOrderChange,
-  onColumnSizeChange,
-  ...tableProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  const [draggingColumnId, setDraggingColumnId] = react.useState();
-  const splitHeaderRef = react.useRef(null);
-  const splitFooterRef = react.useRef(null);
-  const isSplitScroll = layout === "split-scroll";
-  const columnTemplate = isSplitScroll ? buildSplitColumnTemplate(columns, columnSizes) : void 0;
-  const contextValue = {
+});
+var BaseTable = react.forwardRef(
+  function BaseTable2({
     appearance,
-    theme,
-    layout,
-    columnTemplate,
+    className,
+    classNames,
+    style,
+    layout = "native",
+    columns,
     bodyMaxHeight,
     bodyClassName,
-    splitHeaderRef,
-    splitFooterRef,
     columnOrder,
     columnSizes,
-    columnDragEnabled,
-    columnResizeEnabled,
+    columnDragEnabled = false,
+    columnResizeEnabled = false,
     onColumnOrderChange,
     onColumnSizeChange,
-    draggingColumnId,
-    setDraggingColumnId
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "table",
-    {
-      ...tableProps,
-      "data-base-table-layout": layout,
-      className: cn(
-        theme.slots.tableRoot,
-        isSplitScroll && theme.slots.tableSplitRoot,
-        classNames?.root,
-        className
-      ),
-      style: {
-        ...theme.styles.table,
-        ...isSplitScroll ? theme.styles.tableSplitRoot : void 0,
-        ...columnTemplate ? {
-          "--base-table-column-template": columnTemplate
-        } : void 0,
-        ...style
+    ...tableProps
+  }, ref) {
+    assertEnum("layout", layout, ["native", "split-scroll"]);
+    assertBoolean("columnDragEnabled", columnDragEnabled);
+    assertBoolean("columnResizeEnabled", columnResizeEnabled);
+    assertOptionalFunction("onColumnOrderChange", onColumnOrderChange);
+    assertOptionalFunction("onColumnSizeChange", onColumnSizeChange);
+    validateCssSizeValue(bodyMaxHeight, "bodyMaxHeight", { stringAllowed: true });
+    const knownColumnIds = validateColumns(columns);
+    validateColumnOrder(columnOrder, knownColumnIds);
+    validateColumnSizes(columnSizes, knownColumnIds);
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
+    const [draggingColumnId, setDraggingColumnId] = react.useState();
+    const splitHeaderRef = react.useRef(null);
+    const splitFooterRef = react.useRef(null);
+    const isSplitScroll = layout === "split-scroll";
+    const columnTemplate = isSplitScroll ? buildSplitColumnTemplate(columns, columnSizes) : void 0;
+    const contextValue = {
+      appearance: resolvedAppearance,
+      theme,
+      layout,
+      columnTemplate,
+      bodyMaxHeight,
+      bodyClassName,
+      splitHeaderRef,
+      splitFooterRef,
+      columnOrder,
+      columnSizes,
+      columnDragEnabled,
+      columnResizeEnabled,
+      onColumnOrderChange,
+      onColumnSizeChange,
+      draggingColumnId,
+      setDraggingColumnId
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      {
+        ...componentAttributes,
+        ...tableProps,
+        ref,
+        "data-monkeys-component": "table",
+        "data-slot": "root",
+        "data-base-table-layout": layout,
+        className: cn(
+          theme.slots.tableRoot,
+          isSplitScroll && theme.slots.tableSplitRoot,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.table,
+          ...isSplitScroll ? theme.styles.tableSplitRoot : void 0,
+          ...columnTemplate ? {
+            "--base-table-column-template": columnTemplate
+          } : void 0,
+          ...style
+        }
       }
-    }
-  ) });
-}
-function BaseTableHeader({
-  appearance,
-  className,
-  classNames,
-  style,
-  ...headerProps
-}) {
+    ) });
+  }
+);
+var BaseTableHeader = react.forwardRef(function BaseTableHeader2({ appearance, className, classNames, style, ...headerProps }, ref) {
   const { layout, splitHeaderRef, theme } = useBaseTableContext(appearance);
   const isSplitScroll = layout === "split-scroll";
+  const setHeaderRef = (node) => {
+    if (splitHeaderRef) splitHeaderRef.current = isSplitScroll ? node : null;
+    assignRef2(ref, node);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "thead",
     {
       ...headerProps,
-      ref: isSplitScroll ? splitHeaderRef : void 0,
+      ref: setHeaderRef,
+      "data-slot": "header",
       className: cn(
         theme.slots.tableHeader,
         isSplitScroll && theme.slots.tableSplitHeader,
@@ -3581,15 +4676,8 @@ function BaseTableHeader({
       }
     }
   );
-}
-function BaseTableBody({
-  appearance,
-  className,
-  classNames,
-  onScroll,
-  style,
-  ...bodyProps
-}) {
+});
+var BaseTableBody = react.forwardRef(function BaseTableBody2({ appearance, className, classNames, onScroll, style, ...bodyProps }, ref) {
   const {
     bodyClassName,
     bodyMaxHeight,
@@ -3613,6 +4701,8 @@ function BaseTableBody({
     "tbody",
     {
       ...bodyProps,
+      ref,
+      "data-slot": "body",
       onScroll: handleScroll,
       className: cn(
         theme.slots.tableBody,
@@ -3629,42 +4719,76 @@ function BaseTableBody({
       }
     }
   );
-}
-function BaseTableRow({
-  interactive,
-  selected,
-  disabled,
-  appearance,
-  className,
-  classNames,
-  style,
-  ...rowProps
-}) {
-  const { layout, theme } = useBaseTableContext(appearance);
+});
+react.forwardRef(function BaseTableFooter2({ appearance, className, classNames, style, ...footerProps }, ref) {
+  const { layout, splitFooterRef, theme } = useBaseTableContext(appearance);
   const isSplitScroll = layout === "split-scroll";
+  const setFooterRef = (node) => {
+    if (splitFooterRef) splitFooterRef.current = isSplitScroll ? node : null;
+    assignRef2(ref, node);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
+    "tfoot",
     {
-      ...rowProps,
-      "aria-disabled": disabled || void 0,
-      "data-state": selected ? "selected" : void 0,
+      ...footerProps,
+      ref: setFooterRef,
+      "data-slot": "footer",
       className: cn(
-        theme.slots.tableRow,
-        isSplitScroll && theme.slots.tableSplitRow,
-        interactive && !disabled && theme.slots.tableRowInteractive,
-        selected && theme.slots.tableRowSelected,
-        disabled && theme.slots.tableRowDisabled,
+        theme.slots.tableFooter,
+        isSplitScroll && theme.slots.tableSplitFooter,
         classNames?.root,
         className
       ),
       style: {
-        ...theme.styles.tableRow,
-        ...isSplitScroll ? theme.styles.tableSplitRow : void 0,
+        ...theme.styles.tableFooter,
+        ...isSplitScroll ? theme.styles.tableSplitFooter : void 0,
         ...style
       }
     }
   );
-}
+});
+var BaseTableRow = react.forwardRef(
+  function BaseTableRow2({
+    interactive,
+    selected,
+    disabled,
+    appearance,
+    className,
+    classNames,
+    style,
+    ...rowProps
+  }, ref) {
+    assertBoolean("interactive", interactive);
+    assertBoolean("selected", selected);
+    assertBoolean("disabled", disabled);
+    const { layout, theme } = useBaseTableContext(appearance);
+    const isSplitScroll = layout === "split-scroll";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ...rowProps,
+        ref,
+        "data-slot": "row",
+        "aria-disabled": disabled || void 0,
+        "data-state": selected ? "selected" : void 0,
+        className: cn(
+          theme.slots.tableRow,
+          isSplitScroll && theme.slots.tableSplitRow,
+          interactive && !disabled && theme.slots.tableRowInteractive,
+          selected && theme.slots.tableRowSelected,
+          disabled && theme.slots.tableRowDisabled,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.tableRow,
+          ...isSplitScroll ? theme.styles.tableSplitRow : void 0,
+          ...style
+        }
+      }
+    );
+  }
+);
 var BaseTableHead = react.forwardRef(function BaseTableHead2({
   columnId,
   align,
@@ -3695,19 +4819,48 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
   onDrop,
   ...headProps
 }, forwardedRef) {
+  assertEnum("head align", align, ["left", "center", "right"]);
+  assertEnum("head verticalAlign", verticalAlign, [
+    "top",
+    "middle",
+    "bottom"
+  ]);
+  assertEnum("head sortDirection", sortDirection, [
+    "asc",
+    "desc",
+    "none"
+  ]);
+  assertBoolean("head sortable", sortable);
+  assertBoolean("head draggable", draggable);
+  assertBoolean("head resizable", resizable);
+  assertOptionalFunction("head onSort", onSort);
+  assertOptionalLabel("head sortLabel", sortLabel);
+  assertOptionalLabel("head dragLabel", dragLabel);
+  assertOptionalLabel("head resizeLabel", resizeLabel);
+  if (columnId !== void 0 && (typeof columnId !== "string" || columnId.trim().length === 0)) {
+    throw new Error(
+      "BaseTable head columnId must be a non-empty string when provided."
+    );
+  }
+  validateCssSizeValue(width, "head width", { stringAllowed: true });
+  validateCssSizeValue(minWidth, "head minWidth");
+  validateCssSizeValue(maxWidth, "head maxWidth");
+  if (minWidth !== void 0 && maxWidth !== void 0 && minWidth > maxWidth) {
+    throw new Error("BaseTable head minWidth cannot be greater than maxWidth.");
+  }
   const tableContext = useBaseTableContext(appearance);
   const { theme } = tableContext;
+  const messages = useMonkeysLocaleMessages().table;
   const isSplitScroll = tableContext.layout === "split-scroll";
   const resolvedAlign = align ?? (isSplitScroll ? "center" : "left");
   const resolvedVerticalAlign = verticalAlign ?? "middle";
   const headRef = react.useRef(null);
+  const resizeCleanupRef = react.useRef(() => {
+  });
+  const [measuredWidth, setMeasuredWidth] = react.useState();
   const setHeadRef = (node) => {
     headRef.current = node;
-    if (typeof forwardedRef === "function") {
-      forwardedRef(node);
-    } else if (forwardedRef) {
-      forwardedRef.current = node;
-    }
+    assignRef2(forwardedRef, node);
   };
   const controlledWidth = columnId && tableContext.columnSizes?.[columnId] !== void 0 ? tableContext.columnSizes[columnId] : width;
   const canDrag = Boolean(
@@ -3716,9 +4869,16 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
   const canResize = Boolean(
     columnId && resizable !== false && (resizable || tableContext.columnResizeEnabled) && tableContext.onColumnSizeChange
   );
+  if (canResize && maxWidth !== void 0 && maxWidth < (minWidth ?? 48)) {
+    throw new Error(
+      "BaseTable resizable head maxWidth cannot be smaller than its effective minWidth."
+    );
+  }
   const interactiveSort = Boolean(sortable || onSort);
   const ariaSort = sortAriaValue(sortDirection);
   const content = hasRenderableNode(label) ? label : children;
+  const hasVisibleSortName = hasRenderableNode(content) || hasRenderableNode(description);
+  const sortAccessibleName = sortLabel ?? (!hasVisibleSortName ? messages.sortColumn({ columnId: columnId?.trim() || void 0 }) : void 0);
   const usesRichHeader = canDrag || hasRenderableNode(icon) || hasRenderableNode(label) || hasRenderableNode(description) || hasRenderableNode(meta) || hasRenderableNode(actions) || hasRenderableNode(trailing) || interactiveSort;
   const renderedContent = usesRichHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableHeadContent, classNames?.content), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableHeadMain, classNames?.main), children: [
@@ -3728,9 +4888,32 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
           type: "button",
           draggable: true,
           title: dragLabel,
-          "aria-label": dragLabel ?? `Drag column ${columnId}`,
+          "aria-label": dragLabel ?? messages.dragColumn({ columnId }),
           className: cn(theme.slots.tableHeadDragHandle, classNames?.dragHandle),
           onClick: (event) => event.stopPropagation(),
+          onKeyDown: (event) => {
+            if (!columnId || !tableContext.columnOrder || event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+              return;
+            }
+            const currentIndex = tableContext.columnOrder.indexOf(columnId);
+            if (currentIndex < 0) return;
+            const rtl = isRtl(event.currentTarget);
+            const physicalDelta = event.key === "ArrowLeft" ? -1 : 1;
+            const nextIndex = currentIndex + (rtl ? -physicalDelta : physicalDelta);
+            const targetColumnId = tableContext.columnOrder[nextIndex];
+            if (!targetColumnId) return;
+            const nextOrder = getNextColumnOrder(
+              tableContext.columnOrder,
+              columnId,
+              targetColumnId
+            );
+            if (!nextOrder) return;
+            event.preventDefault();
+            tableContext.onColumnOrderChange?.(nextOrder, {
+              columnId,
+              targetColumnId
+            });
+          },
           onDragStart: (event) => {
             event.stopPropagation();
             tableContext.setDraggingColumnId(columnId);
@@ -3751,6 +4934,7 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
           type: "button",
           disabled: !onSort,
           title: sortLabel,
+          "aria-label": sortAccessibleName,
           className: cn(theme.slots.tableHeadSortButton, classNames?.sortButton),
           onClick: (event) => {
             event.stopPropagation();
@@ -3827,18 +5011,23 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
     tableContext.setDraggingColumnId(void 0);
   };
   const handleResizePointerDown = (event) => {
-    if (!canResize || !columnId || !tableContext.onColumnSizeChange) return;
+    if (!canResize || !columnId || !tableContext.onColumnSizeChange || event.button !== 0 && event.pointerType !== "touch") {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
+    resizeCleanupRef.current();
     const startX = event.clientX;
-    const currentWidth = typeof controlledWidth === "number" ? controlledWidth : headRef.current?.offsetWidth ?? minWidth ?? 96;
+    const currentWidth = currentResizeWidth ?? headRef.current?.offsetWidth ?? minWidth ?? 48;
     const previousWidth = clampWidth2(currentWidth, minWidth, maxWidth);
     const pointerId = event.pointerId;
     const target = event.currentTarget;
-    target.setPointerCapture?.(pointerId);
+    const ownerDocument = target.ownerDocument;
+    const rtl = isRtl(target);
     const handlePointerMove = (moveEvent) => {
+      if (moveEvent.pointerId !== pointerId) return;
       const nextWidth = clampWidth2(
-        previousWidth + moveEvent.clientX - startX,
+        previousWidth + (rtl ? startX - moveEvent.clientX : moveEvent.clientX - startX),
         minWidth,
         maxWidth
       );
@@ -3849,21 +5038,87 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
         maxWidth
       });
     };
-    const cleanup = () => {
-      target.releasePointerCapture?.(pointerId);
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerup", cleanup);
-      window.removeEventListener("pointercancel", cleanup);
+    const handleStop = (nextEvent) => {
+      if (nextEvent.pointerId !== pointerId) return;
+      resizeCleanupRef.current();
     };
-    window.addEventListener("pointermove", handlePointerMove);
-    window.addEventListener("pointerup", cleanup);
-    window.addEventListener("pointercancel", cleanup);
+    const handleLostCapture = (nextEvent) => {
+      if (nextEvent.pointerId !== pointerId) return;
+      resizeCleanupRef.current();
+    };
+    resizeCleanupRef.current = () => {
+      ownerDocument.removeEventListener("pointermove", handlePointerMove);
+      ownerDocument.removeEventListener("pointerup", handleStop);
+      ownerDocument.removeEventListener("pointercancel", handleStop);
+      target.removeEventListener("lostpointercapture", handleLostCapture);
+      if (target.hasPointerCapture?.(pointerId)) {
+        target.releasePointerCapture?.(pointerId);
+      }
+      resizeCleanupRef.current = () => {
+      };
+    };
+    setPointerCaptureIfAvailable(target, pointerId);
+    ownerDocument.addEventListener("pointermove", handlePointerMove);
+    ownerDocument.addEventListener("pointerup", handleStop);
+    ownerDocument.addEventListener("pointercancel", handleStop);
+    target.addEventListener("lostpointercapture", handleLostCapture);
+  };
+  const currentResizeWidth = typeof controlledWidth === "number" ? clampWidth2(controlledWidth, minWidth, maxWidth) : measuredWidth;
+  const announcedResizeWidth = currentResizeWidth ?? clampWidth2(minWidth ?? 48, minWidth, maxWidth);
+  const handleResizeKeyDown = (event) => {
+    if (!canResize || !columnId || !tableContext.onColumnSizeChange) return;
+    const rtl = isRtl(event.currentTarget);
+    const previousWidth = currentResizeWidth ?? clampWidth2(
+      headRef.current?.offsetWidth || minWidth || 48,
+      minWidth,
+      maxWidth
+    );
+    let nextWidth;
+    if (event.key === "ArrowLeft") {
+      nextWidth = previousWidth + (rtl ? COLUMN_RESIZE_KEYBOARD_STEP : -COLUMN_RESIZE_KEYBOARD_STEP);
+    }
+    if (event.key === "ArrowRight") {
+      nextWidth = previousWidth + (rtl ? -COLUMN_RESIZE_KEYBOARD_STEP : COLUMN_RESIZE_KEYBOARD_STEP);
+    }
+    if (event.key === "Home" && minWidth !== void 0) nextWidth = minWidth;
+    if (event.key === "End" && maxWidth !== void 0) nextWidth = maxWidth;
+    if (nextWidth === void 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    tableContext.onColumnSizeChange(
+      columnId,
+      clampWidth2(nextWidth, minWidth, maxWidth),
+      {
+        columnId,
+        previousWidth,
+        minWidth,
+        maxWidth
+      }
+    );
   };
+  react.useEffect(() => {
+    if (typeof controlledWidth === "number") {
+      setMeasuredWidth(void 0);
+      return;
+    }
+    const measured = headRef.current?.getBoundingClientRect().width;
+    if (measured && Number.isFinite(measured)) {
+      const nextWidth = clampWidth2(measured, minWidth, maxWidth);
+      setMeasuredWidth(
+        (current) => current === nextWidth ? current : nextWidth
+      );
+    }
+  }, [controlledWidth, minWidth, maxWidth, canResize]);
+  react.useEffect(() => {
+    if (!canResize) resizeCleanupRef.current();
+    return () => resizeCleanupRef.current();
+  }, [canResize, columnId, tableContext.onColumnSizeChange]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
       ...headProps,
       ref: setHeadRef,
+      "data-slot": "head",
       scope: headProps.scope ?? "col",
       "aria-sort": ariaSort,
       className: cn(
@@ -3895,10 +5150,17 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
           "button",
           {
             type: "button",
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-valuenow": announcedResizeWidth,
+            "aria-valuemin": minWidth ?? 48,
+            "aria-valuemax": maxWidth,
+            "aria-valuetext": `${announcedResizeWidth}px`,
             title: resizeLabel,
-            "aria-label": resizeLabel ?? `Resize column ${columnId}`,
+            "aria-label": resizeLabel ?? messages.resizeColumn({ columnId }),
             className: cn(theme.slots.tableHeadResizeHandle, classNames?.resizeHandle),
             onClick: (event) => event.stopPropagation(),
+            onKeyDown: handleResizeKeyDown,
             onPointerDown: handleResizePointerDown
           }
         ) : null
@@ -3906,134 +5168,122 @@ var BaseTableHead = react.forwardRef(function BaseTableHead2({
     }
   );
 });
-function BaseTableCell({
-  align = "left",
-  appearance,
-  className,
-  classNames,
-  style,
-  ...cellProps
-}) {
-  const { layout, theme } = useBaseTableContext(appearance);
-  const isSplitScroll = layout === "split-scroll";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "td",
-    {
-      ...cellProps,
-      className: cn(
-        theme.slots.tableCell,
-        isSplitScroll && theme.slots.tableSplitCell,
-        align === "center" && theme.slots.tableCellAlignCenter,
-        align === "right" && theme.slots.tableCellAlignRight,
-        classNames?.root,
-        className
-      ),
-      style: {
-        ...theme.styles.tableCell,
-        ...isSplitScroll ? theme.styles.tableSplitCell : void 0,
-        ...style
+var BaseTableCell = react.forwardRef(
+  function BaseTableCell2({
+    align = "left",
+    appearance,
+    className,
+    classNames,
+    style,
+    ...cellProps
+  }, ref) {
+    assertEnum("cell align", align, ["left", "center", "right"]);
+    const { layout, theme } = useBaseTableContext(appearance);
+    const isSplitScroll = layout === "split-scroll";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        ...cellProps,
+        ref,
+        "data-slot": "cell",
+        className: cn(
+          theme.slots.tableCell,
+          isSplitScroll && theme.slots.tableSplitCell,
+          align === "center" && theme.slots.tableCellAlignCenter,
+          align === "right" && theme.slots.tableCellAlignRight,
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.tableCell,
+          ...isSplitScroll ? theme.styles.tableSplitCell : void 0,
+          ...style
+        }
       }
-    }
-  );
-}
-function BaseTableEmpty({
-  colSpan,
-  icon,
-  title,
-  description,
-  actions,
-  children,
-  appearance,
-  className,
-  classNames,
-  style,
-  ...emptyProps
-}) {
-  const { layout, theme } = useBaseTableContext(appearance);
-  const isSplitScroll = layout === "split-scroll";
-  const hasStructuredContent = hasRenderableNode(icon) || hasRenderableNode(title) || hasRenderableNode(description) || hasRenderableNode(actions);
+    );
+  }
+);
+react.forwardRef(function BaseTableCaption2({ appearance, className, classNames, style, ...captionProps }, ref) {
+  const { theme } = useBaseTableContext(appearance);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
+    "caption",
     {
-      ...emptyProps,
-      className: cn(
-        theme.slots.tableEmptyRow,
-        isSplitScroll && theme.slots.tableSplitRow,
-        classNames?.row,
-        className
-      ),
+      ...captionProps,
+      ref,
+      "data-slot": "caption",
+      className: cn(theme.slots.tableCaption, classNames?.root, className),
       style: {
-        ...theme.styles.tableEmpty,
-        ...isSplitScroll ? theme.styles.tableSplitRow : void 0,
+        ...theme.styles.tableCaption,
         ...style
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "td",
-        {
-          colSpan: Math.max(colSpan, 1),
-          className: cn(
-            theme.slots.tableEmptyCell,
-            isSplitScroll && theme.slots.tableSplitCell,
-            classNames?.cell
-          ),
-          style: isSplitScroll ? { gridColumn: "1 / -1" } : void 0,
-          children: hasStructuredContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableEmptyContent, classNames?.content), children: [
-            hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.tableEmptyIcon, classNames?.icon), children: icon }) : null,
-            hasRenderableNode(title) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.tableEmptyTitle, classNames?.title), children: title }) : null,
-            hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  theme.slots.tableEmptyDescription,
-                  classNames?.description
-                ),
-                children: description
-              }
-            ) : null,
-            hasRenderableNode(actions) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.tableEmptyActions, classNames?.actions), children: actions }) : null
-          ] }) : children
-        }
-      )
+      }
     }
   );
-}
-react.forwardRef(
-  function BaseTextarea2({
-    invalid = false,
-    disabled = false,
-    readOnly = false,
+});
+var BaseTableEmpty = react.forwardRef(
+  function BaseTableEmpty2({
+    colSpan,
+    icon,
+    title,
+    description,
+    actions,
+    children,
     appearance,
     className,
     classNames,
     style,
-    "aria-invalid": nativeAriaInvalid,
-    ...textareaProps
+    ...emptyProps
   }, ref) {
-    const theme = resolveBaseAppearance(appearance);
+    if (!Number.isSafeInteger(colSpan) || colSpan < 1) {
+      throw new Error("BaseTable empty colSpan must be a positive safe integer.");
+    }
+    const { layout, theme } = useBaseTableContext(appearance);
+    const isSplitScroll = layout === "split-scroll";
+    const hasStructuredContent = hasRenderableNode(icon) || hasRenderableNode(title) || hasRenderableNode(description) || hasRenderableNode(actions);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+      "tr",
       {
-        ...textareaProps,
+        ...emptyProps,
         ref,
-        disabled,
-        readOnly,
-        "aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
+        "data-slot": "empty-row",
         className: cn(
-          theme.slots.controlWrapper,
-          theme.slots.controlBase,
-          theme.slots.controlTextarea,
-          invalid && theme.slots.controlInvalid,
-          disabled && theme.slots.controlDisabled,
-          readOnly && theme.slots.controlReadOnly,
-          classNames?.control,
+          theme.slots.tableEmptyRow,
+          isSplitScroll && theme.slots.tableSplitRow,
+          classNames?.row,
           className
         ),
         style: {
-          ...theme.styles.control,
-          ...invalid ? theme.styles.controlInvalid : void 0,
-          ...disabled ? theme.styles.controlDisabled : void 0,
+          ...theme.styles.tableEmpty,
+          ...isSplitScroll ? theme.styles.tableSplitRow : void 0,
           ...style
-        }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            colSpan,
+            "data-slot": "empty-cell",
+            className: cn(
+              theme.slots.tableEmptyCell,
+              isSplitScroll && theme.slots.tableSplitCell,
+              classNames?.cell
+            ),
+            style: isSplitScroll ? { gridColumn: "1 / -1" } : void 0,
+            children: hasStructuredContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(theme.slots.tableEmptyContent, classNames?.content), children: [
+              hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.tableEmptyIcon, classNames?.icon), children: icon }) : null,
+              hasRenderableNode(title) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.tableEmptyTitle, classNames?.title), children: title }) : null,
+              hasRenderableNode(description) ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    theme.slots.tableEmptyDescription,
+                    classNames?.description
+                  ),
+                  children: description
+                }
+              ) : null,
+              hasRenderableNode(actions) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.tableEmptyActions, classNames?.actions), children: actions }) : null
+            ] }) : children
+          }
+        )
       }
     );
   }
@@ -5526,6 +6776,7 @@ function InteractiveTable({
   onFrozenEndColumnCountChange,
   onSort
 }) {
+  const internalLabels = useMonkeysLocaleMessages().workbench.interactiveTable;
   const columnKeySignature = columns.map((column) => column.key).join("
");
   const defaultOrder = react.useMemo(
     () => columnKeySignature ? columnKeySignature.split("
") : [],
@@ -5563,14 +6814,14 @@ function InteractiveTable({
   const frozenEndOffsets = buildFrozenEndOffsets(orderedColumns, resolvedColumnSizes, resolvedFrozenEndColumnCount);
   const resolvedMinWidth = tableMinWidth ?? Math.max(760, orderedColumns.reduce((total, column) => total + getColumnNumericWidth(column, resolvedColumnSizes), 0));
   const labels = {
-    columnActions: columnMenuLabels?.columnActions ?? "Column actions",
-    freezeColumn: columnMenuLabels?.freezeColumn ?? "Freeze to left",
-    freezeEndColumn: columnMenuLabels?.freezeEndColumn ?? "Freeze to right",
-    unfreezeColumn: columnMenuLabels?.unfreezeColumn ?? "Unfreeze from left",
-    unfreezeEndColumn: columnMenuLabels?.unfreezeEndColumn ?? "Unfreeze from right",
-    unfreezeAllColumns: columnMenuLabels?.unfreezeAllColumns ?? "Unfreeze all columns",
-    resetColumnWidth: columnMenuLabels?.resetColumnWidth ?? "Reset column width",
-    frozenColumnTitle: columnMenuLabels?.frozenColumnTitle ?? "Frozen column"
+    columnActions: columnMenuLabels?.columnActions ?? internalLabels.columnActions,
+    freezeColumn: columnMenuLabels?.freezeColumn ?? internalLabels.freezeColumn,
+    freezeEndColumn: columnMenuLabels?.freezeEndColumn ?? internalLabels.freezeEndColumn,
+    unfreezeColumn: columnMenuLabels?.unfreezeColumn ?? internalLabels.unfreezeColumn,
+    unfreezeEndColumn: columnMenuLabels?.unfreezeEndColumn ?? internalLabels.unfreezeEndColumn,
+    unfreezeAllColumns: columnMenuLabels?.unfreezeAllColumns ?? internalLabels.unfreezeAllColumns,
+    resetColumnWidth: columnMenuLabels?.resetColumnWidth ?? internalLabels.resetColumnWidth,
+    frozenColumnTitle: columnMenuLabels?.frozenColumnTitle ?? internalLabels.frozenColumnTitle
   };
   const handleColumnOrderChange = react.useCallback((nextOrder, detail) => {
     const normalizedOrder = normalizeColumnOrder2(defaultOrder, nextOrder);