@dataverse-kit/surface-kit 0.2.1 → 0.3.0

package/dist/index.d.cts

@@ -2,64 +2,16 @@ import { DialogSizePreset } from './core.cjs';
 export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth } from './core.cjs';
 import { C as ColumnCount } from './columns-BlpFO5VD.cjs';
 export { c as clampSpan, g as gridTemplateForColumns } from './columns-BlpFO5VD.cjs';
-import { Breakpoint, ResponsiveValue } from './responsive.cjs';
-export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.cjs';
+import { Breakpoint } from './responsive.cjs';
+export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, ResponsiveValue, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.cjs';
 export { colors, layout, radius, spacing, typography } from '@dataverse-kit/design-tokens';
 import { Theme, ICommandBarItemProps } from '@fluentui/react';
-import * as React from 'react';
+import { D as Density } from './useDensity-xEYt-GdJ.cjs';
+export { C as ContainerSize, f as DensityContext, d as densityScale, s as scaleSpacing, b as useContainerBreakpoint, u as useContainerSize, a as useContainerWidth, g as useDensity, e as useMediaQuery, c as useResponsiveValue } from './useDensity-xEYt-GdJ.cjs';
 import React__default, { CSSProperties, ReactNode, RefObject, ReactElement } from 'react';
 
 declare function createDynamicsTheme(): Theme;
 
-type Density = 'comfortable' | 'compact';
-declare const densityScale: {
-    readonly comfortable: 1;
-    readonly compact: 0.75;
-};
-/** Scale a base spacing value (px) by the active density. */
-declare function scaleSpacing(value: number, density?: Density): number;
-
-interface ContainerSize {
-    width: number;
-    height: number;
-    inlineSize: number;
-    blockSize: number;
-}
-/** Observe an element's size via ResizeObserver. Pass a ref; returns {width,height,inlineSize,blockSize}. */
-declare function useContainerSize<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>): ContainerSize;
-
-/**
- * Create-and-return a ref plus the observed width of the element it is attached to.
- * `const [ref, width] = useContainerWidth(); return <div ref={ref}>…</div>`.
- */
-declare function useContainerWidth<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, number];
-
-/**
- * Resolve the *container's* current breakpoint (not the viewport's) — the correctness
- * fix for a surface inside a PCF, where width comes from `context.allocatedWidth`.
- * Returns `[ref, breakpoint, width]`.
- */
-declare function useContainerBreakpoint<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, Breakpoint, number];
-
-/**
- * Resolve a responsive value against the *container's* current breakpoint.
- * `const [ref, cols] = useResponsiveValue({ xs: 1, md: 2, lg: 3 });`
- */
-declare function useResponsiveValue<T, E extends HTMLElement = HTMLDivElement>(value: ResponsiveValue<T>): [React.RefObject<E>, T | undefined];
-
-/** Viewport media-query match — the SSR-safe / no-ResizeObserver fallback to the container hooks. */
-declare function useMediaQuery(query: string): boolean;
-
-/**
- * Form-level spacing density. `FormSurface` provides it; `Section` (and any future
- * container) reads it via `useDensity()`, so a single `density` switch on the form
- * cascades to every section instead of being set per-section. Defaults to
- * `'comfortable'` (the Dynamics default) — `'compact'` scales spacing by 0.75.
- */
-declare const DensityContext: React.Context<Density>;
-/** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
-declare const useDensity: () => Density;
-
 type SurfaceVariant = 'card' | 'flat' | 'placeholder';
 type Alignment = 'left' | 'center' | 'right';
 interface SurfaceActionButton {
@@ -414,4 +366,4 @@ type ResolvedSurface = {
 /** Resolve a (duck-typed) form-runtime FormDefinition to the right surface + sizing props. */
 declare function fromFormDefinition(def: FormDefinitionLike): ResolvedSurface;
 
-export { ActionBar, type ActionBarProps, type Alignment, Breakpoint, type CalloutDirection, CalloutSurface, type CalloutSurfaceProps, ColumnCount, ColumnLayout, type ColumnLayoutProps, CommandSurface, type CommandSurfaceProps, type ContainerSize, DashboardSurface, type DashboardSurfaceProps, type Density, DensityContext, DialogSizePreset, FieldRow, type FieldRowProps, type FluentPanelType, Footer, type FooterProps, type FormDefinitionLike, FormDialogSurface, type FormDialogSurfaceProps, FormHeader, type FormHeaderProps, type FormSettingsLike, FormSurface, type FormSurfaceProps, MasterDetailSurface, type MasterDetailSurfaceProps, ModalSurface, type ModalSurfaceProps, PageSurface, type PageSurfaceProps, PanelSurface, type PanelSurfaceProps, PivotSurface, type PivotSurfaceProps, type ResolvedSurface, ResponsiveValue, Section, SectionCard, type SectionCardProps, SectionHeader, type SectionHeaderProps, type SectionProps, type SurfaceActionButton, type SurfaceFormType, type SurfaceTab, type SurfaceVariant, TooltipSurface, type TooltipSurfaceProps, TwoColumnLayout, type TwoColumnLayoutProps, createDynamicsTheme, densityScale, fromFormDefinition, scaleSpacing, useContainerBreakpoint, useContainerSize, useContainerWidth, useDensity, useMediaQuery, useResponsiveValue };
+export { ActionBar, type ActionBarProps, type Alignment, Breakpoint, type CalloutDirection, CalloutSurface, type CalloutSurfaceProps, ColumnCount, ColumnLayout, type ColumnLayoutProps, CommandSurface, type CommandSurfaceProps, DashboardSurface, type DashboardSurfaceProps, Density, DialogSizePreset, FieldRow, type FieldRowProps, type FluentPanelType, Footer, type FooterProps, type FormDefinitionLike, FormDialogSurface, type FormDialogSurfaceProps, FormHeader, type FormHeaderProps, type FormSettingsLike, FormSurface, type FormSurfaceProps, MasterDetailSurface, type MasterDetailSurfaceProps, ModalSurface, type ModalSurfaceProps, PageSurface, type PageSurfaceProps, PanelSurface, type PanelSurfaceProps, PivotSurface, type PivotSurfaceProps, type ResolvedSurface, Section, SectionCard, type SectionCardProps, SectionHeader, type SectionHeaderProps, type SectionProps, type SurfaceActionButton, type SurfaceFormType, type SurfaceTab, type SurfaceVariant, TooltipSurface, type TooltipSurfaceProps, TwoColumnLayout, type TwoColumnLayoutProps, createDynamicsTheme, fromFormDefinition };

package/dist/index.d.ts

@@ -2,64 +2,16 @@ import { DialogSizePreset } from './core.js';
 export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth } from './core.js';
 import { C as ColumnCount } from './columns-BlpFO5VD.js';
 export { c as clampSpan, g as gridTemplateForColumns } from './columns-BlpFO5VD.js';
-import { Breakpoint, ResponsiveValue } from './responsive.js';
-export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.js';
+import { Breakpoint } from './responsive.js';
+export { BREAKPOINTS, CARD_REFLOW_WIDTH, ResponsiveMode, ResponsiveValue, StyleObject, fieldGridStyle, fieldRowStyle, resolveBreakpoint, resolveResponsiveValue, sectionStackingStyle } from './responsive.js';
 export { colors, layout, radius, spacing, typography } from '@dataverse-kit/design-tokens';
 import { Theme, ICommandBarItemProps } from '@fluentui/react';
-import * as React from 'react';
+import { D as Density } from './useDensity-BePwtUzY.js';
+export { C as ContainerSize, f as DensityContext, d as densityScale, s as scaleSpacing, b as useContainerBreakpoint, u as useContainerSize, a as useContainerWidth, g as useDensity, e as useMediaQuery, c as useResponsiveValue } from './useDensity-BePwtUzY.js';
 import React__default, { CSSProperties, ReactNode, RefObject, ReactElement } from 'react';
 
 declare function createDynamicsTheme(): Theme;
 
-type Density = 'comfortable' | 'compact';
-declare const densityScale: {
-    readonly comfortable: 1;
-    readonly compact: 0.75;
-};
-/** Scale a base spacing value (px) by the active density. */
-declare function scaleSpacing(value: number, density?: Density): number;
-
-interface ContainerSize {
-    width: number;
-    height: number;
-    inlineSize: number;
-    blockSize: number;
-}
-/** Observe an element's size via ResizeObserver. Pass a ref; returns {width,height,inlineSize,blockSize}. */
-declare function useContainerSize<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>): ContainerSize;
-
-/**
- * Create-and-return a ref plus the observed width of the element it is attached to.
- * `const [ref, width] = useContainerWidth(); return <div ref={ref}>…</div>`.
- */
-declare function useContainerWidth<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, number];
-
-/**
- * Resolve the *container's* current breakpoint (not the viewport's) — the correctness
- * fix for a surface inside a PCF, where width comes from `context.allocatedWidth`.
- * Returns `[ref, breakpoint, width]`.
- */
-declare function useContainerBreakpoint<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, Breakpoint, number];
-
-/**
- * Resolve a responsive value against the *container's* current breakpoint.
- * `const [ref, cols] = useResponsiveValue({ xs: 1, md: 2, lg: 3 });`
- */
-declare function useResponsiveValue<T, E extends HTMLElement = HTMLDivElement>(value: ResponsiveValue<T>): [React.RefObject<E>, T | undefined];
-
-/** Viewport media-query match — the SSR-safe / no-ResizeObserver fallback to the container hooks. */
-declare function useMediaQuery(query: string): boolean;
-
-/**
- * Form-level spacing density. `FormSurface` provides it; `Section` (and any future
- * container) reads it via `useDensity()`, so a single `density` switch on the form
- * cascades to every section instead of being set per-section. Defaults to
- * `'comfortable'` (the Dynamics default) — `'compact'` scales spacing by 0.75.
- */
-declare const DensityContext: React.Context<Density>;
-/** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
-declare const useDensity: () => Density;
-
 type SurfaceVariant = 'card' | 'flat' | 'placeholder';
 type Alignment = 'left' | 'center' | 'right';
 interface SurfaceActionButton {
@@ -414,4 +366,4 @@ type ResolvedSurface = {
 /** Resolve a (duck-typed) form-runtime FormDefinition to the right surface + sizing props. */
 declare function fromFormDefinition(def: FormDefinitionLike): ResolvedSurface;
 
-export { ActionBar, type ActionBarProps, type Alignment, Breakpoint, type CalloutDirection, CalloutSurface, type CalloutSurfaceProps, ColumnCount, ColumnLayout, type ColumnLayoutProps, CommandSurface, type CommandSurfaceProps, type ContainerSize, DashboardSurface, type DashboardSurfaceProps, type Density, DensityContext, DialogSizePreset, FieldRow, type FieldRowProps, type FluentPanelType, Footer, type FooterProps, type FormDefinitionLike, FormDialogSurface, type FormDialogSurfaceProps, FormHeader, type FormHeaderProps, type FormSettingsLike, FormSurface, type FormSurfaceProps, MasterDetailSurface, type MasterDetailSurfaceProps, ModalSurface, type ModalSurfaceProps, PageSurface, type PageSurfaceProps, PanelSurface, type PanelSurfaceProps, PivotSurface, type PivotSurfaceProps, type ResolvedSurface, ResponsiveValue, Section, SectionCard, type SectionCardProps, SectionHeader, type SectionHeaderProps, type SectionProps, type SurfaceActionButton, type SurfaceFormType, type SurfaceTab, type SurfaceVariant, TooltipSurface, type TooltipSurfaceProps, TwoColumnLayout, type TwoColumnLayoutProps, createDynamicsTheme, densityScale, fromFormDefinition, scaleSpacing, useContainerBreakpoint, useContainerSize, useContainerWidth, useDensity, useMediaQuery, useResponsiveValue };
+export { ActionBar, type ActionBarProps, type Alignment, Breakpoint, type CalloutDirection, CalloutSurface, type CalloutSurfaceProps, ColumnCount, ColumnLayout, type ColumnLayoutProps, CommandSurface, type CommandSurfaceProps, DashboardSurface, type DashboardSurfaceProps, Density, DialogSizePreset, FieldRow, type FieldRowProps, type FluentPanelType, Footer, type FooterProps, type FormDefinitionLike, FormDialogSurface, type FormDialogSurfaceProps, FormHeader, type FormHeaderProps, type FormSettingsLike, FormSurface, type FormSurfaceProps, MasterDetailSurface, type MasterDetailSurfaceProps, ModalSurface, type ModalSurfaceProps, PageSurface, type PageSurfaceProps, PanelSurface, type PanelSurfaceProps, PivotSurface, type PivotSurfaceProps, type ResolvedSurface, Section, SectionCard, type SectionCardProps, SectionHeader, type SectionHeaderProps, type SectionProps, type SurfaceActionButton, type SurfaceFormType, type SurfaceTab, type SurfaceVariant, TooltipSurface, type TooltipSurfaceProps, TwoColumnLayout, type TwoColumnLayoutProps, createDynamicsTheme, fromFormDefinition };

package/dist/useDensity-BePwtUzY.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Breakpoint, ResponsiveValue } from './responsive.js';
+
+type Density = 'comfortable' | 'compact';
+declare const densityScale: {
+    readonly comfortable: 1;
+    readonly compact: 0.75;
+};
+/** Scale a base spacing value (px) by the active density. */
+declare function scaleSpacing(value: number, density?: Density): number;
+
+interface ContainerSize {
+    width: number;
+    height: number;
+    inlineSize: number;
+    blockSize: number;
+}
+/** Observe an element's size via ResizeObserver. Pass a ref; returns {width,height,inlineSize,blockSize}. */
+declare function useContainerSize<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>): ContainerSize;
+
+/**
+ * Create-and-return a ref plus the observed width of the element it is attached to.
+ * `const [ref, width] = useContainerWidth(); return <div ref={ref}>…</div>`.
+ */
+declare function useContainerWidth<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, number];
+
+/**
+ * Resolve the *container's* current breakpoint (not the viewport's) — the correctness
+ * fix for a surface inside a PCF, where width comes from `context.allocatedWidth`.
+ * Returns `[ref, breakpoint, width]`.
+ */
+declare function useContainerBreakpoint<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, Breakpoint, number];
+
+/**
+ * Resolve a responsive value against the *container's* current breakpoint.
+ * `const [ref, cols] = useResponsiveValue({ xs: 1, md: 2, lg: 3 });`
+ */
+declare function useResponsiveValue<T, E extends HTMLElement = HTMLDivElement>(value: ResponsiveValue<T>): [React.RefObject<E>, T | undefined];
+
+/** Viewport media-query match — the SSR-safe / no-ResizeObserver fallback to the container hooks. */
+declare function useMediaQuery(query: string): boolean;
+
+/**
+ * Form-level spacing density. `FormSurface` provides it; `Section` (and any future
+ * container) reads it via `useDensity()`, so a single `density` switch on the form
+ * cascades to every section instead of being set per-section. Defaults to
+ * `'comfortable'` (the Dynamics default) — `'compact'` scales spacing by 0.75.
+ */
+declare const DensityContext: React.Context<Density>;
+/** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
+declare const useDensity: () => Density;
+
+export { type ContainerSize as C, type Density as D, useContainerWidth as a, useContainerBreakpoint as b, useResponsiveValue as c, densityScale as d, useMediaQuery as e, DensityContext as f, useDensity as g, scaleSpacing as s, useContainerSize as u };

package/dist/useDensity-xEYt-GdJ.d.cts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Breakpoint, ResponsiveValue } from './responsive.cjs';
+
+type Density = 'comfortable' | 'compact';
+declare const densityScale: {
+    readonly comfortable: 1;
+    readonly compact: 0.75;
+};
+/** Scale a base spacing value (px) by the active density. */
+declare function scaleSpacing(value: number, density?: Density): number;
+
+interface ContainerSize {
+    width: number;
+    height: number;
+    inlineSize: number;
+    blockSize: number;
+}
+/** Observe an element's size via ResizeObserver. Pass a ref; returns {width,height,inlineSize,blockSize}. */
+declare function useContainerSize<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T>): ContainerSize;
+
+/**
+ * Create-and-return a ref plus the observed width of the element it is attached to.
+ * `const [ref, width] = useContainerWidth(); return <div ref={ref}>…</div>`.
+ */
+declare function useContainerWidth<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, number];
+
+/**
+ * Resolve the *container's* current breakpoint (not the viewport's) — the correctness
+ * fix for a surface inside a PCF, where width comes from `context.allocatedWidth`.
+ * Returns `[ref, breakpoint, width]`.
+ */
+declare function useContainerBreakpoint<T extends HTMLElement = HTMLDivElement>(): [React.RefObject<T>, Breakpoint, number];
+
+/**
+ * Resolve a responsive value against the *container's* current breakpoint.
+ * `const [ref, cols] = useResponsiveValue({ xs: 1, md: 2, lg: 3 });`
+ */
+declare function useResponsiveValue<T, E extends HTMLElement = HTMLDivElement>(value: ResponsiveValue<T>): [React.RefObject<E>, T | undefined];
+
+/** Viewport media-query match — the SSR-safe / no-ResizeObserver fallback to the container hooks. */
+declare function useMediaQuery(query: string): boolean;
+
+/**
+ * Form-level spacing density. `FormSurface` provides it; `Section` (and any future
+ * container) reads it via `useDensity()`, so a single `density` switch on the form
+ * cascades to every section instead of being set per-section. Defaults to
+ * `'comfortable'` (the Dynamics default) — `'compact'` scales spacing by 0.75.
+ */
+declare const DensityContext: React.Context<Density>;
+/** Read the ambient spacing density (defaults to `'comfortable'` outside a provider). */
+declare const useDensity: () => Density;
+
+export { type ContainerSize as C, type Density as D, useContainerWidth as a, useContainerBreakpoint as b, useResponsiveValue as c, densityScale as d, useMediaQuery as e, DensityContext as f, useDensity as g, scaleSpacing as s, useContainerSize as u };