@dataverse-kit/surface-kit 0.2.0 → 0.3.0

package/dist/v9.mjs

@@ -0,0 +1,937 @@
+// src/core/sizePresets.ts
+var DIALOG_SIZE_PX = {
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1600
+};
+function dialogWidthPx(opts = {}) {
+  if (typeof opts.width === "number") return opts.width;
+  const size = opts.size ?? "lg";
+  if (size === "fullscreen") return DIALOG_SIZE_PX.xl;
+  return DIALOG_SIZE_PX[size];
+}
+function dialogWidthCss(opts = {}) {
+  if (opts.size === "fullscreen" && opts.width == null) return "95vw";
+  return `${dialogWidthPx(opts)}px`;
+}
+function dialogHeightCss(height) {
+  return height != null && height <= 100 ? `${height}vh` : "95vh";
+}
+var MODAL_AUTOSIZE_MIN_WIDTH = 1e3;
+var PANEL_DEFAULT_WIDTH = 480;
+function panelKindFromWidth(width) {
+  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? "medium" : "custom";
+}
+function panelCustomWidthPx(width) {
+  return width ?? PANEL_DEFAULT_WIDTH;
+}
+var CALLOUT_DEFAULT_WIDTH = 320;
+var calloutFormDefaults = {
+  width: CALLOUT_DEFAULT_WIDTH,
+  directionalHint: "bottomLeftEdge"
+};
+function calloutWidthPx(width) {
+  return width ?? CALLOUT_DEFAULT_WIDTH;
+}
+
+// src/core/columns.ts
+function gridTemplateForColumns(columns) {
+  return `repeat(${columns}, 1fr)`;
+}
+function clampSpan(span, columns) {
+  if (!Number.isFinite(span)) return 1;
+  return Math.max(1, Math.min(Math.round(span), columns));
+}
+
+// src/responsive/breakpoints.ts
+var BREAKPOINTS = {
+  xs: 0,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1366
+};
+var CARD_REFLOW_WIDTH = 900;
+var DESCENDING = ["xl", "lg", "md", "sm", "xs"];
+var ASCENDING = ["xs", "sm", "md", "lg", "xl"];
+function resolveBreakpoint(width) {
+  for (const bp of DESCENDING) {
+    if (width >= BREAKPOINTS[bp]) return bp;
+  }
+  return "xs";
+}
+function isResponsiveMap(v) {
+  return typeof v === "object" && v !== null && ASCENDING.some((bp) => bp in v);
+}
+function resolveResponsiveValue(value, breakpoint) {
+  if (!isResponsiveMap(value)) return value;
+  const map = value;
+  const idx = ASCENDING.indexOf(breakpoint);
+  for (let i = idx; i >= 0; i--) {
+    const v = map[ASCENDING[i]];
+    if (v !== void 0) return v;
+  }
+  for (let i = idx + 1; i < ASCENDING.length; i++) {
+    const v = map[ASCENDING[i]];
+    if (v !== void 0) return v;
+  }
+  return void 0;
+}
+
+// src/responsive/builders.ts
+function atRule(mode, maxPx) {
+  return mode === "container" ? `@container (max-width: ${maxPx}px)` : `@media (max-width: ${maxPx}px)`;
+}
+function fieldGridStyle(columns, mode = "media") {
+  const capped = Math.min(columns, 2);
+  return {
+    display: "grid",
+    gridTemplateColumns: gridTemplateForColumns(columns),
+    gap: "4px 24px",
+    selectors: {
+      [atRule(mode, BREAKPOINTS.md)]: { gridTemplateColumns: gridTemplateForColumns(capped) },
+      [atRule(mode, BREAKPOINTS.sm)]: { gridTemplateColumns: "1fr" }
+    }
+  };
+}
+function sectionStackingStyle(gridTemplateColumns, mode = "media") {
+  return {
+    display: "grid",
+    gridTemplateColumns,
+    gap: 16,
+    alignItems: "start",
+    selectors: {
+      [atRule(mode, BREAKPOINTS.md)]: { gridTemplateColumns: "1fr" }
+    }
+  };
+}
+function fieldRowStyle(labelWidth = "130px", mode = "media") {
+  return {
+    display: "grid",
+    gridTemplateColumns: `${labelWidth} 1fr`,
+    alignItems: "center",
+    gap: 8,
+    minHeight: 38,
+    selectors: {
+      [atRule(mode, BREAKPOINTS.sm)]: { gridTemplateColumns: "1fr", alignItems: "flex-start", minHeight: 0, gap: 4 }
+    }
+  };
+}
+
+// src/tokens/tokens.ts
+import { colors, spacing, typography, radius, layout } from "@dataverse-kit/design-tokens";
+
+// src/tokens/density.ts
+var densityScale = {
+  comfortable: 1,
+  compact: 0.75
+};
+function scaleSpacing(value, density = "comfortable") {
+  return Math.round(value * densityScale[density]);
+}
+
+// src/hooks/useContainerSize.ts
+import { useState, useEffect } from "react";
+function useContainerSize(ref) {
+  const [size, setSize] = useState({ width: 0, height: 0, inlineSize: 0, blockSize: 0 });
+  useEffect(() => {
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const inlineSize = entry.borderBoxSize?.[0]?.inlineSize ?? width;
+        const blockSize = entry.borderBoxSize?.[0]?.blockSize ?? height;
+        setSize({ width, height, inlineSize, blockSize });
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+
+// src/hooks/useContainerWidth.ts
+import { useRef } from "react";
+function useContainerWidth() {
+  const ref = useRef(null);
+  const { width } = useContainerSize(ref);
+  return [ref, width];
+}
+
+// src/hooks/useContainerBreakpoint.ts
+function useContainerBreakpoint() {
+  const [ref, width] = useContainerWidth();
+  return [ref, resolveBreakpoint(width), width];
+}
+
+// src/hooks/useResponsiveValue.ts
+function useResponsiveValue(value) {
+  const [ref, breakpoint] = useContainerBreakpoint();
+  return [ref, resolveResponsiveValue(value, breakpoint)];
+}
+
+// src/hooks/useMediaQuery.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState2(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia(query).matches;
+  });
+  useEffect2(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+
+// src/hooks/useDensity.ts
+import { createContext, useContext } from "react";
+var DensityContext = createContext("comfortable");
+var useDensity = () => useContext(DensityContext);
+
+// src/v9/theme.ts
+import {
+  createLightTheme,
+  createDarkTheme
+} from "@fluentui/react-components";
+var dynamicsBrandRamp = {
+  10: "#061724",
+  20: "#082338",
+  30: "#0a2e4a",
+  40: "#0c3b5e",
+  50: "#0e4775",
+  60: colors.brandDark,
+  // #005a9e — colorBrandBackgroundPressed
+  70: colors.brandHover,
+  // #106ebe — colorBrandBackground(Hover/Selected)
+  80: colors.brand,
+  // #0078d4 — colorBrandBackground + colorBrandForeground1 (the Dynamics blue)
+  90: "#2886de",
+  100: "#479ef5",
+  110: "#62abf5",
+  120: "#77b7f7",
+  130: "#96c6fa",
+  140: "#b4d6fa",
+  150: "#cfe4fa",
+  160: "#ebf3fc"
+};
+function createDynamicsV9Theme(brand = dynamicsBrandRamp) {
+  return createLightTheme(brand);
+}
+function createDynamicsV9DarkTheme(brand = dynamicsBrandRamp) {
+  return createDarkTheme(brand);
+}
+var dynamicsV9Theme = createDynamicsV9Theme();
+
+// src/v9/containers/FormSurface.tsx
+import { makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
+import { jsx } from "react/jsx-runtime";
+var useStyles = makeStyles({
+  root: {
+    display: "grid",
+    alignItems: "start",
+    backgroundColor: tokens.colorNeutralBackground2
+  },
+  // Container forced a single column: reset every child's span the same way the @media
+  // fallback does, so a Section with `columnStart` doesn't escape the stack.
+  forceStackChildren: {
+    "& > *": { gridColumn: "1 / -1" }
+  },
+  // Viewport fallbacks (used only when containerWidth is unset) — one static slot per
+  // breakpoint so griffel gets literal media strings. The px come from the shared BREAKPOINTS.
+  stackSm: { [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { "& > *": { gridColumn: "1 / -1" } } },
+  stackMd: { [`@media (max-width: ${BREAKPOINTS.md}px)`]: { "& > *": { gridColumn: "1 / -1" } } },
+  stackLg: { [`@media (max-width: ${BREAKPOINTS.lg}px)`]: { "& > *": { gridColumn: "1 / -1" } } },
+  stackXl: { [`@media (max-width: ${BREAKPOINTS.xl}px)`]: { "& > *": { gridColumn: "1 / -1" } } }
+});
+var VIEWPORT_STACK = {
+  xs: null,
+  // xs = 0px, never stacks
+  sm: "stackSm",
+  md: "stackMd",
+  lg: "stackLg",
+  xl: "stackXl"
+};
+var FormSurface = ({
+  columns = 12,
+  gap = 20,
+  padding = 20,
+  density = "comfortable",
+  background,
+  containerWidth,
+  collapseBelow = "sm",
+  maxWidth,
+  className,
+  style,
+  children
+}) => {
+  const styles = useStyles();
+  const collapsePx = BREAKPOINTS[collapseBelow];
+  const forceStack = containerWidth != null && containerWidth <= collapsePx;
+  const scaledGap = scaleSpacing(gap, density);
+  const scaledPadding = scaleSpacing(padding, density);
+  const viewportStackSlot = containerWidth == null ? VIEWPORT_STACK[collapseBelow] : null;
+  const cls = mergeClasses(
+    styles.root,
+    forceStack && styles.forceStackChildren,
+    viewportStackSlot ? styles[viewportStackSlot] : void 0,
+    className
+  );
+  const inlineStyle = {
+    gridTemplateColumns: forceStack ? "1fr" : `repeat(${columns}, 1fr)`,
+    gap: scaledGap,
+    padding: scaledPadding,
+    ...background != null ? { background } : {},
+    ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
+    ...style
+  };
+  return /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx("div", { className: cls, style: inlineStyle, children }) });
+};
+
+// src/v9/containers/PageSurface.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PageSurface = ({ centered, maxWidth, ...rest }) => /* @__PURE__ */ jsx2(FormSurface, { maxWidth: maxWidth ?? (centered ? 1200 : void 0), ...rest });
+
+// src/v9/containers/Section.tsx
+import { useState as useState3 } from "react";
+import { makeStyles as makeStyles2, mergeClasses as mergeClasses2, tokens as tokens3 } from "@fluentui/react-components";
+
+// src/v9/containers/SectionHeader.tsx
+import {
+  Button,
+  Text,
+  Toolbar,
+  ToolbarButton,
+  tokens as tokens2
+} from "@fluentui/react-components";
+import { ChevronDown20Regular, ChevronRight20Regular } from "@fluentui/react-icons";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SectionHeader = ({
+  title,
+  statusText,
+  showCommandBar,
+  commandItems = [],
+  actions,
+  collapsible,
+  collapsed,
+  onToggle
+}) => {
+  const rootStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    borderBottom: `1px solid ${tokens2.colorNeutralStroke2}`,
+    marginBottom: 16,
+    minHeight: 48,
+    width: "100%"
+  };
+  const leftStyle = { display: "flex", alignItems: "center", gap: 8, minWidth: 0 };
+  const statusStyle = {
+    marginLeft: 8,
+    fontSize: tokens2.fontSizeBase200,
+    color: tokens2.colorNeutralForeground3
+  };
+  return /* @__PURE__ */ jsxs("div", { style: rootStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: leftStyle, children: [
+      collapsible && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          appearance: "subtle",
+          size: "small",
+          icon: collapsed ? /* @__PURE__ */ jsx3(ChevronRight20Regular, {}) : /* @__PURE__ */ jsx3(ChevronDown20Regular, {}),
+          onClick: onToggle,
+          "aria-label": collapsed ? "Expand section" : "Collapse section",
+          "aria-expanded": !collapsed
+        }
+      ),
+      title && /* @__PURE__ */ jsx3(Text, { weight: "semibold", size: 300, children: title }),
+      statusText && /* @__PURE__ */ jsx3("span", { style: statusStyle, children: statusText })
+    ] }),
+    actions ? /* @__PURE__ */ jsx3("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ jsx3(Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ jsx3(
+      ToolbarButton,
+      {
+        icon: item.icon,
+        appearance: item.appearance === "primary" ? "primary" : "subtle",
+        disabled: item.disabled,
+        onClick: item.onClick,
+        children: item.label
+      },
+      item.id
+    )) }) : null
+  ] });
+};
+
+// src/v9/containers/Section.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var useStyles2 = makeStyles2({
+  // Phone-stack the internal field grid below `sm` (griffel — inline can't do @media).
+  bodyStack: {
+    [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { "& > *": { gridColumn: "1 / -1" } }
+  }
+});
+var Section = ({
+  title,
+  columnSpan = 12,
+  columnStart,
+  rowPosition,
+  internalColumns = 12,
+  showCommandBar,
+  commandItems,
+  statusText,
+  notification,
+  collapsible,
+  defaultCollapsed = false,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  variant = "card",
+  minHeight = 80,
+  density: densityProp,
+  className,
+  style,
+  children
+}) => {
+  const styles = useStyles2();
+  const [internalCollapsed, setInternalCollapsed] = useState3(defaultCollapsed);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const toggle = () => {
+    const next = !collapsed;
+    if (controlledCollapsed == null) setInternalCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  const ctxDensity = useDensity();
+  const density = densityProp ?? ctxDensity;
+  const cardPad = `${scaleSpacing(3, density)}px ${scaleSpacing(20, density)}px ${scaleSpacing(20, density)}px ${scaleSpacing(20, density)}px`;
+  const bodyGap = scaleSpacing(7, density);
+  const gridColumn = columnStart ? `${columnStart} / span ${columnSpan}` : `span ${columnSpan}`;
+  const rootStyle = {
+    gridColumn,
+    ...rowPosition ? { gridRowStart: rowPosition } : {},
+    ...style
+  };
+  if (variant === "placeholder") {
+    const placeholderStyle = {
+      ...rootStyle,
+      border: `1px dashed ${tokens3.colorNeutralStroke2}`,
+      borderRadius: tokens3.borderRadiusMedium,
+      minHeight,
+      width: "100%",
+      background: "transparent"
+    };
+    return /* @__PURE__ */ jsx4("div", { className, style: placeholderStyle });
+  }
+  const chrome = variant === "flat" ? {
+    backgroundColor: tokens3.colorNeutralBackground1,
+    borderRadius: tokens3.borderRadiusMedium,
+    padding: cardPad,
+    minWidth: 300,
+    width: "100%",
+    overflow: "hidden"
+  } : {
+    backgroundColor: tokens3.colorNeutralBackground1,
+    border: `1px solid ${tokens3.colorNeutralStroke2}`,
+    borderRadius: tokens3.borderRadiusMedium,
+    boxShadow: tokens3.shadow4,
+    padding: cardPad,
+    minWidth: 300,
+    width: "100%",
+    overflow: "hidden"
+  };
+  const showHeader = Boolean(title) || showCommandBar || collapsible;
+  const bodyStyle = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${internalColumns}, 1fr)`,
+    gap: bodyGap,
+    alignItems: "start"
+  };
+  return /* @__PURE__ */ jsxs2("div", { className, style: { ...chrome, ...rootStyle }, children: [
+    notification && /* @__PURE__ */ jsx4("div", { style: { marginBottom: scaleSpacing(8, density) }, children: notification }),
+    showHeader && /* @__PURE__ */ jsx4(
+      SectionHeader,
+      {
+        title,
+        statusText,
+        showCommandBar,
+        commandItems,
+        collapsible,
+        collapsed,
+        onToggle: toggle
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsx4("div", { className: mergeClasses2(styles.bodyStack), style: bodyStyle, children })
+  ] });
+};
+
+// src/v9/containers/SectionCard.tsx
+import { tokens as tokens4 } from "@fluentui/react-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SectionCard = ({
+  accentColor = tokens4.colorBrandStroke1,
+  accentWidth = 3,
+  variant = "card",
+  style,
+  ...rest
+}) => /* @__PURE__ */ jsx5(
+  Section,
+  {
+    variant,
+    ...rest,
+    style: { borderTop: `${accentWidth}px solid ${accentColor}`, ...style }
+  }
+);
+
+// src/v9/containers/FormHeader.tsx
+import { Text as Text2, tokens as tokens5 } from "@fluentui/react-components";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormHeader = ({
+  title,
+  subtitle,
+  status,
+  titleColor,
+  subtitleColor,
+  persona,
+  actions,
+  className
+}) => {
+  const rootStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    padding: "12px 24px",
+    borderBottom: `1px solid ${tokens5.colorNeutralStroke2}`,
+    backgroundColor: tokens5.colorNeutralBackground1
+  };
+  const mainStyle = { display: "flex", alignItems: "center", gap: 12, minWidth: 0 };
+  const titleRowStyle = { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" };
+  const statusStyle = { fontSize: tokens5.fontSizeBase200, color: tokens5.colorNeutralForeground3 };
+  const subtitleStyle = {
+    fontSize: tokens5.fontSizeBase200,
+    color: subtitleColor || tokens5.colorNeutralForeground3,
+    marginTop: 2
+  };
+  return /* @__PURE__ */ jsxs3("div", { className, style: rootStyle, children: [
+    /* @__PURE__ */ jsxs3("div", { style: mainStyle, children: [
+      persona,
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsxs3("div", { style: titleRowStyle, children: [
+          title != null && /* @__PURE__ */ jsx6(Text2, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
+          status != null && /* @__PURE__ */ jsx6("span", { style: statusStyle, children: status })
+        ] }),
+        subtitle != null && /* @__PURE__ */ jsx6("div", { style: subtitleStyle, children: subtitle })
+      ] })
+    ] }),
+    actions != null && /* @__PURE__ */ jsx6("div", { children: actions })
+  ] });
+};
+
+// src/v9/containers/PivotSurface.tsx
+import { useState as useState4 } from "react";
+import { TabList, Tab } from "@fluentui/react-components";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var PivotSurface = ({
+  tabs,
+  selectedId,
+  defaultSelectedId,
+  onTabChange,
+  appearance = "transparent",
+  size = "medium",
+  className
+}) => {
+  const firstEnabledId = tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id;
+  const [internal, setInternal] = useState4(defaultSelectedId ?? firstEnabledId);
+  const selected = selectedId ?? internal;
+  const handleSelect = (_e, data) => {
+    const id = String(data.value);
+    if (selectedId == null) setInternal(id);
+    onTabChange?.(id);
+  };
+  const active = tabs.find((t) => t.id === selected) ?? tabs[0];
+  return /* @__PURE__ */ jsxs4("div", { className, children: [
+    /* @__PURE__ */ jsx7(TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ jsx7(Tab, { value: t.id, icon: t.icon, disabled: t.disabled, children: t.label }, t.id)) }),
+    /* @__PURE__ */ jsx7("div", { children: active?.content })
+  ] });
+};
+
+// src/v9/containers/CommandSurface.tsx
+import {
+  Toolbar as Toolbar2,
+  ToolbarButton as ToolbarButton2,
+  Menu,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuItem
+} from "@fluentui/react-components";
+import { MoreHorizontal20Regular } from "@fluentui/react-icons";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function renderToolbarButton(item) {
+  return /* @__PURE__ */ jsx8(
+    ToolbarButton2,
+    {
+      icon: item.icon,
+      appearance: item.appearance === "primary" ? "primary" : "subtle",
+      disabled: item.disabled,
+      onClick: item.onClick,
+      children: item.label
+    },
+    item.id
+  );
+}
+var CommandSurface = ({
+  items,
+  overflowItems,
+  farItems,
+  size = "small",
+  className
+}) => {
+  const hasFar = Boolean(farItems && farItems.length > 0);
+  const hasOverflow = Boolean(overflowItems && overflowItems.length > 0);
+  const hasPrimary = items.length > 0 || hasOverflow;
+  return /* @__PURE__ */ jsxs5("div", { className, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    hasPrimary && /* @__PURE__ */ jsxs5(Toolbar2, { "aria-label": "Commands", size, children: [
+      items.map(renderToolbarButton),
+      hasOverflow && /* @__PURE__ */ jsxs5(Menu, { children: [
+        /* @__PURE__ */ jsx8(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx8(ToolbarButton2, { "aria-label": "More commands", icon: /* @__PURE__ */ jsx8(MoreHorizontal20Regular, {}) }) }),
+        /* @__PURE__ */ jsx8(MenuPopover, { children: /* @__PURE__ */ jsx8(MenuList, { children: overflowItems.map((item) => /* @__PURE__ */ jsx8(MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.label }, item.id)) }) })
+      ] })
+    ] }),
+    hasFar && // marginLeft:auto keeps far items right-aligned whether or not a primary toolbar renders.
+    /* @__PURE__ */ jsx8(Toolbar2, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
+  ] });
+};
+
+// src/v9/containers/ActionBar.tsx
+import { Button as Button2, tokens as tokens6 } from "@fluentui/react-components";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function renderButton(b) {
+  const appearance = b.appearance === "primary" ? "primary" : b.appearance === "subtle" ? "subtle" : "secondary";
+  return /* @__PURE__ */ jsx9(Button2, { appearance, icon: b.icon, disabled: b.disabled, onClick: b.onClick, children: b.label }, b.id);
+}
+var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) => {
+  const justify = alignment === "left" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
+  const visible = buttons.filter((b) => !b.hidden);
+  const left = visible.filter((b) => b.position === "left");
+  const right = visible.filter((b) => b.position !== "left");
+  const rootStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: left.length ? "space-between" : justify,
+    gap: 8,
+    padding: "12px 24px",
+    borderTop: `1px solid ${tokens6.colorNeutralStroke2}`,
+    backgroundColor: tokens6.colorNeutralBackground1,
+    ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
+  };
+  return /* @__PURE__ */ jsxs6("div", { className, style: rootStyle, children: [
+    left.length > 0 && /* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
+    /* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+  ] });
+};
+
+// src/v9/containers/Footer.tsx
+import { tokens as tokens7 } from "@fluentui/react-components";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Footer = ({ sticky = true, align = "right", className, children }) => {
+  const justify = align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
+  const rootStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: justify,
+    gap: 8,
+    padding: "12px 24px",
+    borderTop: `1px solid ${tokens7.colorNeutralStroke2}`,
+    backgroundColor: tokens7.colorNeutralBackground1,
+    ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
+  };
+  return /* @__PURE__ */ jsx10("div", { className, style: rootStyle, children });
+};
+
+// src/v9/overlays/FormDialogSurface.tsx
+import { Dialog, DialogSurface, Button as Button3, Text as Text3, tokens as tokens8 } from "@fluentui/react-components";
+import { Dismiss20Regular } from "@fluentui/react-icons";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var FormDialogSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  subheader,
+  size,
+  width,
+  height,
+  isBlocking = true,
+  recordCounter,
+  footer,
+  className,
+  children
+}) => {
+  const widthCss = dialogWidthCss({ width, size });
+  const heightCss = dialogHeightCss(height);
+  const showHeader = Boolean(title) || Boolean(recordCounter) || Boolean(onDismiss);
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    padding: "12px 20px",
+    borderBottom: `1px solid ${tokens8.colorNeutralStroke2}`
+  };
+  const counterStyle = { fontSize: tokens8.fontSizeBase200, color: tokens8.colorNeutralForeground3 };
+  return /* @__PURE__ */ jsx11(
+    Dialog,
+    {
+      open: isOpen,
+      modalType: isBlocking ? "modal" : "non-modal",
+      onOpenChange: (_e, data) => {
+        if (!data.open) onDismiss?.();
+      },
+      children: /* @__PURE__ */ jsxs7(
+        DialogSurface,
+        {
+          className,
+          style: {
+            maxWidth: "95vw",
+            width: widthCss,
+            height: heightCss,
+            maxHeight: "95vh",
+            display: "flex",
+            flexDirection: "column",
+            padding: 0
+          },
+          children: [
+            showHeader && /* @__PURE__ */ jsxs7("div", { style: headerStyle, children: [
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+                title && /* @__PURE__ */ jsx11(Text3, { weight: "semibold", size: 400, children: title }),
+                subheader && /* @__PURE__ */ jsx11("span", { style: { fontSize: tokens8.fontSizeBase200, color: tokens8.colorNeutralForeground3, marginTop: 2 }, children: subheader })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                recordCounter && /* @__PURE__ */ jsxs7("span", { style: counterStyle, children: [
+                  recordCounter.current,
+                  " of ",
+                  recordCounter.total
+                ] }),
+                onDismiss && /* @__PURE__ */ jsx11(Button3, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ jsx11(Dismiss20Regular, {}), onClick: onDismiss })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx11("div", { style: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }, children }),
+            footer && /* @__PURE__ */ jsx11("div", { style: { borderTop: `1px solid ${tokens8.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/v9/overlays/ModalSurface.tsx
+import { Dialog as Dialog2, DialogSurface as DialogSurface2, Text as Text4, tokens as tokens9 } from "@fluentui/react-components";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var ModalSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  size,
+  width,
+  isBlocking = true,
+  autoSize,
+  footer,
+  className,
+  children
+}) => {
+  const sizing = autoSize ? { width: "auto", minWidth: MODAL_AUTOSIZE_MIN_WIDTH, maxWidth: "100%" } : { maxWidth: "95vw", width: `${dialogWidthPx({ width, size })}px` };
+  return /* @__PURE__ */ jsx12(
+    Dialog2,
+    {
+      open: isOpen,
+      modalType: isBlocking ? "modal" : "non-modal",
+      onOpenChange: (_e, data) => {
+        if (!data.open) onDismiss?.();
+      },
+      children: /* @__PURE__ */ jsxs8(DialogSurface2, { className, style: { ...sizing, padding: 0 }, children: [
+        title && /* @__PURE__ */ jsx12("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ jsx12(Text4, { weight: "semibold", size: 500, children: title }) }),
+        /* @__PURE__ */ jsx12("div", { style: { padding: 20 }, children }),
+        footer && /* @__PURE__ */ jsx12(
+          "div",
+          {
+            style: {
+              borderTop: `1px solid ${tokens9.colorNeutralStroke2}`,
+              padding: "12px 20px",
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 8
+            },
+            children: footer
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/v9/overlays/PanelSurface.tsx
+import {
+  OverlayDrawer,
+  DrawerHeader,
+  DrawerHeaderTitle,
+  DrawerBody,
+  Button as Button4
+} from "@fluentui/react-components";
+import { Dismiss24Regular } from "@fluentui/react-icons";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var PanelSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  drawerSize,
+  width,
+  hasCloseButton = true,
+  isLightDismiss = true,
+  isNonModal = false,
+  footer,
+  children
+}) => {
+  const size = drawerSize ?? (width != null && width > 500 ? "medium" : "small");
+  const customWidthStyle = width != null ? { width: `${width}px` } : void 0;
+  return /* @__PURE__ */ jsxs9(
+    OverlayDrawer,
+    {
+      open: isOpen,
+      position: "end",
+      size,
+      modalType: isNonModal ? "non-modal" : "modal",
+      style: customWidthStyle,
+      onOpenChange: (_e, data) => {
+        if (data.open) return;
+        if (data.type === "backdropClick" && !isLightDismiss) return;
+        onDismiss?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx13(DrawerHeader, { children: /* @__PURE__ */ jsx13(
+          DrawerHeaderTitle,
+          {
+            action: hasCloseButton && onDismiss ? /* @__PURE__ */ jsx13(Button4, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ jsx13(Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
+            children: title
+          }
+        ) }),
+        /* @__PURE__ */ jsxs9(DrawerBody, { children: [
+          /* @__PURE__ */ jsx13("div", { style: { padding: "12px 0" }, children }),
+          footer && /* @__PURE__ */ jsx13("div", { style: { marginTop: "auto", paddingTop: 12 }, children: footer })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/v9/overlays/CalloutSurface.tsx
+import { Popover, PopoverSurface } from "@fluentui/react-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function resolveTarget(target) {
+  if (!target) return null;
+  if (typeof target === "string") return document.querySelector(target);
+  if ("current" in target) return target.current ?? null;
+  return target;
+}
+var CalloutSurface = ({
+  target,
+  isOpen = true,
+  onDismiss,
+  width,
+  position = "below",
+  align = "start",
+  isBeakVisible = true,
+  className,
+  children
+}) => {
+  if (!isOpen) return null;
+  const el = resolveTarget(target);
+  const positioning = { position, align, ...el ? { target: el } : {} };
+  return /* @__PURE__ */ jsx14(
+    Popover,
+    {
+      open: true,
+      trapFocus: false,
+      withArrow: isBeakVisible,
+      positioning,
+      onOpenChange: (_e, data) => {
+        if (!data.open) onDismiss?.();
+      },
+      children: /* @__PURE__ */ jsx14(PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
+    }
+  );
+};
+
+// src/v9/overlays/TooltipSurface.tsx
+import { Tooltip } from "@fluentui/react-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var DELAY_MS = {
+  zero: 0,
+  medium: 250,
+  long: 500
+};
+var TooltipSurface = ({
+  content,
+  position = "above",
+  delay = "medium",
+  relationship = "label",
+  children
+}) => /* @__PURE__ */ jsx15(Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
+export {
+  ActionBar,
+  BREAKPOINTS,
+  CALLOUT_DEFAULT_WIDTH,
+  CARD_REFLOW_WIDTH,
+  CalloutSurface,
+  CommandSurface,
+  DIALOG_SIZE_PX,
+  DensityContext,
+  Footer,
+  FormDialogSurface,
+  FormHeader,
+  FormSurface,
+  MODAL_AUTOSIZE_MIN_WIDTH,
+  ModalSurface,
+  PANEL_DEFAULT_WIDTH,
+  PageSurface,
+  PanelSurface,
+  PivotSurface,
+  Section,
+  SectionCard,
+  SectionHeader,
+  TooltipSurface,
+  calloutFormDefaults,
+  calloutWidthPx,
+  clampSpan,
+  colors,
+  createDynamicsV9DarkTheme,
+  createDynamicsV9Theme,
+  densityScale,
+  dialogHeightCss,
+  dialogWidthCss,
+  dialogWidthPx,
+  dynamicsBrandRamp,
+  dynamicsV9Theme,
+  fieldGridStyle,
+  fieldRowStyle,
+  gridTemplateForColumns,
+  layout,
+  panelCustomWidthPx,
+  panelKindFromWidth,
+  radius,
+  resolveBreakpoint,
+  resolveResponsiveValue,
+  scaleSpacing,
+  sectionStackingStyle,
+  spacing,
+  typography,
+  useContainerBreakpoint,
+  useContainerSize,
+  useContainerWidth,
+  useDensity,
+  useMediaQuery,
+  useResponsiveValue
+};
+//# sourceMappingURL=v9.mjs.map