@dataverse-kit/surface-kit 0.2.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 khester
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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 };