@dynamic-framework/ui-react 2.9.0 → 2.11.0

package/dist/types/components/DPasswordStrengthMeter/DPasswordStrengthMeter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { BaseProps } from '../interface';
 export type ValidationMessages = {
     number: string;
@@ -10,7 +10,22 @@ export type ValidationMessages = {
 export type ValidationCheck = 'uppercase' | 'lowercase' | 'number' | 'specialChar';
 type Props = BaseProps & {
     id?: string;
-    label?: string;
+    /**
+     * The label of the password field. Any node is accepted, so it can carry a
+     * link or an info trigger.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `aria-label` alongside it; a development-only warning says so when it
+     * is missing.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the password field. Spelled as the native attribute
+     * because it is forwarded straight to the nested input, which is also the
+     * component the development-only naming warning comes from — so the advice it
+     * gives names a prop this component accepts.
+     */
+    'aria-label'?: string;
     placeholder?: string;
     value?: string;
     name?: string;
@@ -21,5 +36,5 @@ type Props = BaseProps & {
     onChange?: (value: string) => void;
     readonly?: boolean;
 };
-export default function DPasswordStrengthMeter({ id, label, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, readonly, }: Props): import("react").JSX.Element;
+export default function DPasswordStrengthMeter({ id, label, 'aria-label': ariaLabel, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, readonly, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DProgress/DProgress.d.ts

@@ -7,6 +7,18 @@ type Props = BaseProps & {
     hideCurrentValue?: boolean;
     enableStripedAnimation?: boolean;
     height?: string | number;
+    /**
+     * Accessible name of the bar. Describe what progresses (e.g. "Upload
+     * progress"), not the role. Defaults to `'Progress bar'` when neither this
+     * nor `ariaLabelledBy` is set.
+     */
+    ariaLabel?: string;
+    /**
+     * Id of a visible element that names the bar, for a title rendered next to
+     * it. When set, `aria-label` is not rendered, so `ariaLabel` and the default
+     * name are ignored.
+     */
+    ariaLabelledBy?: string;
 };
-export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, height, dataAttributes, }: Props): import("react").JSX.Element;
+export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, height, ariaLabel, ariaLabelledBy, dataAttributes, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DSelect/DSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import type { Props as SelectProps, GroupBase } from 'react-select';
 import DSelectOptionCheck from './components/DSelectOptionCheck';
 import DSelectOptionIcon from './components/DSelectOptionIcon';
@@ -13,7 +13,27 @@ import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiTex
 import DSelectPlaceholder from './components/DSelectPlaceholder';
 import type { BaseProps, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
 type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
-    label?: string;
+    /**
+     * The label of the control. Any node is accepted, so it can carry a link, an
+     * info trigger or other markup.
+     *
+     * Text doubles as the control's accessible name. A richer label does not, so
+     * pass `ariaLabel`, or `aria-labelledby` pointing at a text element, alongside
+     * it; a development-only warning says so when both are missing. A rich label
+     * also does not fit `floatingLabel`, whose layout animates a single line of
+     * text.
+     */
+    label?: ReactNode;
+    /**
+     * Accessible name of the control. It outranks the `label` in the accessible
+     * name computation, so use it to name a control with a non-text label or to
+     * replace the name a text label gives.
+     *
+     * Without a `label` or an `aria-labelledby` it falls back to a generic
+     * string, so an unlabelled select is never nameless. With either there is no
+     * fallback: a generic `aria-label` would override the label and make every
+     * select announce the same name.
+     */
     ariaLabel?: string;
     hint?: string;
     invalid?: boolean;
@@ -29,7 +49,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ...props }: Props<Option, IsMulti, Group>): import("react").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, inputId: inputIdProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ariaLiveMessages, ...props }: Props<Option, IsMulti, Group>): import("react").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;

package/dist/types/components/DSelect/createAriaGuidance.d.ts

@@ -0,0 +1,21 @@
+import type { AriaGuidanceProps } from 'react-select';
+type Names = {
+    /** The `aria-labelledby` that reaches the input, if any. */
+    labelledBy?: string;
+    /** The text of the visible `label`, if it is text. */
+    label?: string;
+};
+/**
+ * Builds react-select's `guidance` live message around the control's name.
+ *
+ * react-select announces "<aria-label> is focused" on the first focus of the
+ * input, falling back to "Select" when there is no `aria-label`. Neither a text
+ * `label` nor `aria-labelledby` reaches that message, so the announcement would
+ * disagree with the name assistive technology exposes.
+ *
+ * The name follows the accessible name precedence: `aria-labelledby`, then
+ * `aria-label`, then the `<label>`. react-select does not export its default
+ * messages, so this mirrors them for every context and only swaps the name.
+ */
+export default function createAriaGuidance({ labelledBy, label }: Names): ({ "aria-label": ariaLabel, context, isSearchable, isMulti, tabSelectsValue, isInitialFocus, }: AriaGuidanceProps) => string;
+export {};

package/dist/types/components/DTabs/DTabs.d.ts

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import DTabContent from './components/DTabContent';
+import DTabsProvider from './components/DTabsProvider';
 import type { BaseProps } from '../interface';
 export type DTabOption = {
     label: string | React.ReactNode;
@@ -9,16 +10,26 @@ export type DTabOption = {
 export type TabVariant = 'tabs' | 'pills' | 'underline' | 'toggle-button-group';
 type Props = BaseProps & PropsWithChildren<{
     classNameTab?: string;
+    /**
+     * Class for the panels container. It is only rendered when `DTabs` has
+     * children, so a tab bar used as pure navigation leaves no empty node.
+     */
+    classNameContent?: string;
     onChange?: (option: DTabOption) => void;
     options: Array<DTabOption>;
-    defaultSelected: string;
+    /**
+     * Ignored inside `DTabs.Provider`, which owns the selection. Without it, the
+     * first enabled tab is selected when omitted.
+     */
+    defaultSelected?: string;
     vertical?: boolean;
     variant?: TabVariant;
     ariaLabel?: string;
     ariaLabelledBy?: string;
 }>;
-declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, dataAttributes, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
+declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, classNameContent, style, vertical, variant, dataAttributes, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 declare const _default: typeof DTabs & {
     Tab: typeof DTabContent;
+    Provider: typeof DTabsProvider;
 };
 export default _default;

package/dist/types/components/DTabs/TabContext.d.ts

@@ -4,5 +4,10 @@ type TabContextState = {
     isSelected: (tab: DTabOption['tab']) => boolean;
 };
 declare const TabContext: import("react").Context<TabContextState | undefined>;
+type TabsState = {
+    selected: string;
+    setSelected: (tab: string) => void;
+};
+export declare const TabsStateContext: import("react").Context<TabsState | undefined>;
 export declare function useTabContext(): TabContextState;
 export default TabContext;

package/dist/types/components/DTabs/components/DTabsProvider.d.ts

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    defaultSelected: string;
+}>;
+/**
+ * Owns the selected tab so the tab bar (`DTabs`) and its panels (`DTabs.Tab`)
+ * can live anywhere inside it, e.g. the bar in a header and the panels in
+ * another column.
+ */
+export default function DTabsProvider({ defaultSelected, children, }: Props): import("react").JSX.Element;
+export {};

package/dist/types/components/DTabs/index.d.ts

@@ -1,5 +1,6 @@
 import DTabs from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DTabContent } from './components/DTabContent';
+export { default as DTabsProvider } from './components/DTabsProvider';
 export { useTabContext } from './TabContext';
 export default DTabs;

package/dist/types/components/DToast/DToast.d.ts

@@ -1,9 +1,16 @@
 import { PropsWithChildren } from 'react';
 import DToastHeader from './components/DToastHeader';
 import DToastBody from './components/DToastBody';
-import { BaseProps } from '../interface';
-type Props = PropsWithChildren<BaseProps>;
-declare function DToast({ children, className, style, dataAttributes, }: Props): import("react").JSX.Element;
+import { BaseProps, LiveRegionRole } from '../interface';
+type Props = PropsWithChildren<BaseProps & {
+    /**
+     * `alert` (default) interrupts the screen reader, for critical errors.
+     * `status` announces without interrupting, for confirmations and other
+     * non-critical messages. `none` renders no live region.
+     */
+    role?: LiveRegionRole;
+}>;
+declare function DToast({ children, role, className, style, dataAttributes, }: Props): import("react").JSX.Element;
 declare const _default: typeof DToast & {
     Header: typeof DToastHeader;
     Body: typeof DToastBody;

package/dist/types/components/DToastContainer/useDToast.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, Toast, ToastPosition, ValueFunction } from 'react-hot-toast';
-import { ComponentStateColor } from '../interface';
+import { ComponentStateColor, LiveRegionRole } from '../interface';
 /**
  * Data used to render the default DToast component via `useDToast`.
  * When `description` is provided, the toast renders with a header and body layout.
@@ -19,6 +19,13 @@ export type ToastData = {
     closeIcon?: string;
     /** Applies the `toast-{color}` CSS modifier class. */
     color?: ComponentStateColor;
+    /**
+     * Live region role of the toast. Defaults to `alert`; use `status` for
+     * confirmations so the screen reader doesn't interrupt the user.
+     */
+    role?: LiveRegionRole;
+    /** Accessible name of the close button. Defaults to `"Close"`. */
+    closeAriaLabel?: string;
 };
 /** Options forwarded to react-hot-toast for a single toast instance. */
 export interface DToastOptions {

package/dist/types/components/config.d.ts

@@ -1 +1,11 @@
 export declare const PREFIX_BS = "bs-";
+/**
+ * Default icon-font family configured by `DContextProvider`.
+ *
+ * `DIconBase` compares the family it receives against these values to tell an
+ * unconfigured consumer apart from one that deliberately opted into an icon
+ * font (Material Symbols, Bootstrap Icons). Only the former gets the
+ * development warning for an unresolved icon name.
+ */
+export declare const DEFAULT_ICON_FAMILY_CLASS = "bi";
+export declare const DEFAULT_ICON_FAMILY_PREFIX = "bi-";

package/dist/types/components/index.d.ts

@@ -42,7 +42,7 @@ export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
 export { default as DTimeline } from './DTimeline';
-export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
+export { default as DTabs, useTabContext, DTabContent, DTabsProvider, } from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
@@ -54,6 +54,6 @@ export { default as DVoucher, useScreenshot, useScreenshotDownload, useScreensho
 export { default as DOtp } from './DOtp';
 export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
 export { default as DDataStateWrapper, EmptyState, ErrorState, LoadingState, } from './DDataStateWrapper';
-export type { DDataStateMessages } from './DDataStateWrapper';
+export type { DDataStateMessages, DDataStateWrapperListProps, DDataStateWrapperSingleProps, } from './DDataStateWrapper';
 export { default as DConfirmModalContainer } from './DConfirmModal/DConfirmModalContainer';
 export type { ConfirmModalEntry, ConfirmModalStore } from './DConfirmModal/types';

package/dist/types/components/interface.d.ts

@@ -11,6 +11,13 @@ export type NavegableProps = {
     'aria-current'?: string;
 };
 export type ComponentSize = 'sm' | 'lg';
+/**
+ * How a message is exposed to assistive technology: `alert` interrupts the
+ * screen reader (critical errors), `status` is announced without interrupting
+ * (non-critical dynamic messages) and `none` is not a live region (static
+ * content already on screen).
+ */
+export type LiveRegionRole = 'alert' | 'status' | 'none';
 export type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type AvatarSize = 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
 export type DataAttributes = Record<`data-${string}`, string | number | undefined | null | boolean>;

package/dist/types/components/internal/DFormLabel.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+type Props = {
+    htmlFor: string;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * The `<label>` every form control renders, with the click guard already wired.
+ *
+ * Internal: it exists so the guard — and the lint exception it needs — lives in
+ * one place instead of being repeated across every input component.
+ *
+ * The guard runs in the capture phase, not on bubble: a tooltip or modal
+ * trigger that calls `stopPropagation()` in its own handler — a common pattern —
+ * would otherwise keep the guard from ever running, and the browser would go on
+ * to activate the labelled control. Confirmed in Chromium, where the same
+ * trigger toggles the control with a bubble-phase guard and does not with this
+ * one. Capturing changes nothing else: `preventDefault` applies to the default
+ * action, which is evaluated after propagation either way.
+ *
+ * The `jsx-a11y` rules below assume a click handler is being used to make a
+ * non-interactive element interactive, which then owes the keyboard an
+ * equivalent. This handler does the opposite: it suppresses a pointer-only
+ * behaviour, the click a label forwards to its control, and adds no way to
+ * activate anything. Keyboard support for a nested trigger is the consumer's:
+ * `<a href>` carries its own, while a `span` with a role and a tabindex is
+ * focusable but inert until they handle Enter and Space themselves.
+ */
+export default function DFormLabel({ htmlFor, className, children }: Props): import("react").JSX.Element;
+export {};

package/dist/types/contexts/portal/DPortalStack.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+type Props = {
+    stack: Array<{
+        name: string;
+        Component: FC<{
+            name: string;
+            payload: any;
+        }>;
+        payload: unknown;
+    }>;
+};
+export default function DPortalStack({ stack }: Props): import("react").JSX.Element;
+export {};

package/dist/types/hooks/useControlledState.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Backs a value that the consumer may or may not drive, so a control works in
+ * both modes without a copy of the state drifting away from the props.
+ *
+ * A control counts as controlled only when the consumer passes the value *and*
+ * an `onChange` to push it back. The value on its own has always meant "start
+ * here" in this library — `<DInputCheck type="radio" checked />` inside a radio
+ * group, for one — so treating it as controlled would silently freeze those
+ * controls, and React emits no warning to say why: the components always attach
+ * their own `onChange` handler.
+ *
+ * @param value the value coming from props, or `undefined` when not passed.
+ * @param isControlled whether the consumer can drive the value back.
+ * @param initialValue what to start from when no value is passed.
+ * @returns the value to render, and a setter to call on every user change.
+ */
+export default function useControlledState<T>(value: T | undefined, isControlled: boolean, initialValue: T): [T, (next: T) => void];

package/dist/types/hooks/useInputCurrency.d.ts

@@ -1,9 +1,34 @@
 import type { RefObject, ForwardedRef, FocusEvent } from 'react';
 import type { Options } from 'currency.js';
-export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>, minValue?: number, maxValue?: number): {
+/**
+ * State and handlers for a currency input: a formatted string while the field
+ * is idle and the raw number while it is being edited.
+ *
+ * `minValue`/`maxValue` bound the value. With `clamp` (default `true`) an
+ * out-of-range value is brought into range whenever it is not being typed:
+ * on mount, when `value` or the bounds change, and on blur. Every time the
+ * clamp changes the value, `onChange` receives the clamped number, so the
+ * input and the consumer's state never disagree. While the field is focused
+ * the typed number is reported as is, so a partial entry is not rewritten.
+ *
+ * With `clamp: false` the value is never changed: the bounds only feed
+ * `isOverMax` / `isUnderMin`, so the consumer can show its own message (e.g.
+ * "You exceeded the limit") and keep the entered amount.
+ *
+ * Controlled usage follows the same contract as a native controlled input:
+ * reflect `onChange` into `value` in the same event (`setState` in the
+ * handler). The hook keeps showing `value` whenever it isn't being edited, so
+ * a consumer can reject a change by keeping `value` as it was. Deferring the
+ * update (a timer, awaiting a request) makes the hook see a stale `value` in
+ * between: the field can flash the previous amount and a clamp can be
+ * reported again when the deferred value arrives.
+ */
+export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>, minValue?: number, maxValue?: number, clamp?: boolean): {
     inputRef: RefObject<HTMLInputElement | null>;
     innerValue: string;
     innerType: string;
+    isOverMax: boolean;
+    isUnderMin: boolean;
     handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
     handleOnChange: (newValue?: string) => void;
     handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;

package/dist/types/hooks/useMediaBreakpointUp.d.ts

@@ -1,3 +1,13 @@
+import type { BreakpointProps } from '../contexts/DContext';
+/** Clears the cached CSS breakpoints. Only meant for tests. */
+export declare function resetCssBreakpointsCache(): void;
+/**
+ * Pixel value of a breakpoint. `DContextProvider` reads them from the CSS and
+ * shares them through the context; outside of it (a tree without the
+ * provider, or its first render) they are read from the same CSS variables
+ * here, so responsive props resolve either way.
+ */
+export declare function useBreakpointValue(breakpoint: keyof BreakpointProps): string;
 export declare function useMediaBreakpointUpXs(useListener?: boolean): boolean;
 export declare function useMediaBreakpointUpSm(useListener?: boolean): boolean;
 export declare function useMediaBreakpointUpMd(useListener?: boolean): boolean;

package/dist/types/icons/coreIcons.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The lucide-react icons Dynamic UI renders on its own, without the consumer
+ * asking for them by name.
+ *
+ * Two sources feed this list:
+ *
+ * - The `iconMap` defaults of `DContextProvider` (`src/contexts/DContext.tsx`),
+ *   used by close buttons, chevrons, alert states, input adornments and the
+ *   stepper checkmark.
+ * - Names hard-coded in component JSX or in a prop default, such as
+ *   `DDropdown`'s toggle or `DVoucher`'s action buttons.
+ *
+ * Any bundler-level optimisation that narrows lucide-react down to the icons a
+ * widget actually uses must keep this set, or Dynamic UI components break for
+ * reasons the widget author cannot see in their own source. That is why the
+ * list ships in the package as `dist/icons-core.json` and is exported here.
+ *
+ * `src/icons/coreIcons.spec.ts` scans `src/components/**` and fails when an
+ * internally used icon name is missing from this list or absent from
+ * lucide-react, so the two cannot drift apart.
+ */
+export declare const CORE_LUCIDE_ICONS: readonly ["AlertCircle", "AlertTriangle", "Calendar", "Check", "CheckCircle", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Eye", "EyeOff", "Info", "Minus", "Plus", "Search", "Upload", "X", "Circle", "CircleCheck", "CircleCheckBig", "Download", "FileText", "MoreVertical", "Paperclip", "RefreshCw", "Share2", "Trash"];
+/** A name from {@link CORE_LUCIDE_ICONS}. */
+export type CoreLucideIcon = typeof CORE_LUCIDE_ICONS[number];

package/dist/types/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { CORE_LUCIDE_ICONS } from './coreIcons';
+export type { CoreLucideIcon } from './coreIcons';

package/dist/types/index.d.ts

@@ -2,3 +2,4 @@ export * from './components';
 export * from './contexts';
 export * from './utils';
 export * from './hooks';
+export * from './icons';

package/dist/types/utils/hasLabelContent.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+/**
+ * Whether a `label` node has something to render.
+ *
+ * The render paths cannot test `label` for truthiness: since the prop widened
+ * to `ReactNode` it also accepts `0`, which React renders as the text "0" and
+ * which `isTextLabel` counts as a text label, yet which a truthiness check
+ * would drop — leaving the control visibly unlabelled.
+ *
+ * Absent (`undefined`, `null`), empty (`''`) and boolean labels render nothing,
+ * so they are the ones that stand for "no label". The empty string matters
+ * because it is the default several components fall back to.
+ *
+ * Arrays are inspected rather than taken at face value: `label={items.map(...)}`
+ * over an empty list yields `[]`, while a list of skipped entries yields
+ * `[false, null]`. Both render nothing, so treating them as content would leave
+ * an empty `<label>` on the page — and make the naming warning fire over a
+ * label that was never there.
+ *
+ * Only arrays, though, even though `ReactNode` admits any iterable. Reading a
+ * one-shot iterator — a generator — would exhaust it here, and the component
+ * goes on to render the same value, so the label would vanish precisely because
+ * we checked for it. An array can be walked as often as needed; anything else
+ * is taken on faith.
+ *
+ * Anything else — an element, a portal, a generator — counts as content: what
+ * it renders is only knowable by rendering it, and an element that draws
+ * nothing visible is the consumer's decision rather than an absent label.
+ */
+export default function hasLabelContent(label: ReactNode): boolean;

package/dist/types/utils/isTextLabel.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Narrows a `label` node to the plain-text case.
+ *
+ * `label` accepts any `ReactNode` so patterns like a terms-and-conditions link
+ * or an info trigger can live next to the field name. Anything that is not text
+ * cannot be forwarded to a string-only attribute (`aria-label`, `placeholder`)
+ * nor laid out by Bootstrap's `form-floating`, so those paths check this first.
+ *
+ * Numbers and bigints count as text: React renders them as their string form
+ * and so does `String()`, which is what the string-only attributes end up
+ * receiving. `bigint` is part of `ReactNode` under these React types, so
+ * leaving it out made a label React draws as text get treated as a rich node.
+ * React 18 cannot render one, which `DFormLabel` handles by rendering its
+ * string form — the classification stays true for every supported React.
+ */
+export default function isTextLabel(label: ReactNode): label is string | number | bigint;

package/dist/types/utils/labelClickGuard.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent } from 'react';
+/**
+ * Stops a click on a non-native trigger inside a `<label>` from also activating
+ * the labelled control.
+ *
+ * Verified against Chromium, which forwards the click for every one of the
+ * `PSEUDO_INTERACTIVE` selectors above while exempting the native ones. Note
+ * that jsdom does not reproduce this: its `isInteractiveContent` counts any
+ * element carrying a `tabindex` as interactive content, so a jsdom test passes
+ * whether or not this guard exists. That is why the guard is unit-tested
+ * directly rather than through a rendered component.
+ *
+ * Native interactive content returns early rather than falling through, since
+ * `preventDefault` on those clicks would cancel the link navigation or the
+ * image map the label is meant to let through.
+ *
+ * `DFormLabel` wires this in the capture phase so a trigger that stops
+ * propagation cannot skip it.
+ */
+export default function labelClickGuard(event: MouseEvent<HTMLLabelElement>): void;

package/dist/types/utils/warnLabelUsage.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+type WarnLabelUsageOptions = {
+    /** Component name, used to key the warning and to address the developer. */
+    component: string;
+    /** The `label` prop as received. */
+    label: ReactNode;
+    /** Whether an explicit accessible name reaches the control. */
+    hasAccessibleName: boolean;
+    /**
+     * The prop this component actually accepts for the accessible name, so the
+     * advice is usable: components that spread the native input attributes take
+     * `aria-label`, the rest expose the camelCase `ariaLabel` and reject the
+     * native one at compile time.
+     */
+    accessibleNameProp: 'aria-label' | 'ariaLabel';
+    /** Whether the component is rendering in Bootstrap's floating-label layout. */
+    floatingLabel?: boolean;
+};
+/**
+ * Warns, only outside production builds, about the two ways a non-text `label`
+ * goes wrong.
+ *
+ * A text label doubles as the control's accessible name. A `ReactNode` one does
+ * not: the name becomes whatever the subtree happens to compute to, which for a
+ * label carrying a link or an icon trigger reads as the wrong thing or as
+ * nothing at all — so an explicit name is needed. Which prop carries it differs
+ * per component, hence `accessibleNameProp`: naming the wrong one would send
+ * the developer to a prop their component rejects.
+ *
+ * `form-floating` is the second case: it animates a single line of text between
+ * the placeholder and the label position, so a node with its own height or its
+ * own interactive children breaks the layout rather than the semantics.
+ *
+ * Labels the render paths drop are skipped through the same `hasLabelContent`
+ * they use, so `label={condition && <span />}` with a false condition warns
+ * about nothing: there is no label on the page to name.
+ *
+ * The `process.env.NODE_ENV` guard belongs at the call site — that is what
+ * bundlers constant-fold, dropping this module from a consumer's production
+ * bundle.
+ */
+export default function warnLabelUsage({ component, label, hasAccessibleName, accessibleNameProp, floatingLabel, }: WarnLabelUsageOptions): void;
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -45,10 +45,12 @@
     "test:coverage": "jest --testPathPatterns=\\.spec\\.tsx?$ --coverage",
     "test:a11y": "jest --testPathPatterns=\\.a11y\\.test\\.tsx$",
     "test:storybook": "test-storybook",
-    "build": "npm run clean && npm run build:react && npm run build:scss && npm run cp",
+    "build": "npm run clean && npm run build:react && npm run build:scss && npm run build:icons-core && npm run build:api && npm run cp",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
+    "build:icons-core": "npx tsx scripts/build-icons-core.ts",
+    "build:api": "node scripts/generate-api.mjs && mkdir -p dist && cp registry/api.json dist/api.json",
     "build:scss:watch": "npx nodemon --watch src --ext scss --exec 'npm run build:scss'",
     "dev:ts": "tsc -p tsconfig.build.json",
     "dev:rollup": "rollup -c rollup.config.mjs",
@@ -66,6 +68,9 @@
     "validate:registry": "node scripts/validate-registry.mjs",
     "generate:token-overrides": "node scripts/generate-token-overrides.mjs && node scripts/generate-token-overrides-schema.mjs",
     "validate:token-overrides": "node scripts/validate-token-overrides.mjs",
+    "theme:expand": "node scripts/theme/theme-expand.mjs",
+    "theme:validate": "node scripts/theme/theme-validate.mjs",
+    "theme:preview": "vite scripts/theme --port 4173 --open /preview/",
     "eslint": "npm run eslint:src && npm run eslint:stories && npm run eslint:test",
     "eslint:src": "eslint 'src/**/*.ts' 'src/**/*.tsx' --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
@@ -74,7 +79,7 @@
     "postversion": "npm run build:scss",
     "publish:cdn": "npm run publish:cdn-version && npm run publish:cdn-latest",
     "publish:cdn-version": "node scripts/publish-cdn.js",
-    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --exclude 'api.json' --acl public-read",
+    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --exclude 'api.json' --exclude 'manifests/*' --acl public-read",
     "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
     "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",
@@ -88,7 +93,7 @@
     "node": ">=22.0.0"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "files": [
     "dist/",
@@ -107,7 +112,6 @@
     "file-selector": "~2.1.2",
     "google-libphonenumber": "~3.2.43",
     "html2canvas": "^1.4.1",
-    "jspdf": "^4.0.0",
     "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
     "react-error-boundary": "^6.1.0",
@@ -145,6 +149,7 @@
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
     "conventional-changelog-conventionalcommits": "~6.1.0",
+    "culori": "^4.0.2",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
     "eslint-config-airbnb-typescript": "~17.1.0",

package/src/style/abstracts/variables/_body.scss

@@ -17,10 +17,10 @@ $body-color: map-get($all-colors, $body-color-mapping) !default;
 $body-bg: #f5f6fa !default;
 
 $body-secondary-color: var(--#{$prefix}body-color-rgb) !default;
-$body-secondary-bg: var(--#{$prefix}gray-200) !default;
+$body-secondary-bg: var(--#{$prefix}gray-200-rgb) !default;
 
 $body-tertiary-color: var(--#{$prefix}body-color-rgb) !default;
-$body-tertiary-bg: var(--#{$prefix}gray-100) !default;
+$body-tertiary-bg: var(--#{$prefix}gray-100-rgb) !default;
 
 $body-emphasis-color: var(--#{$prefix}black-rgb) !default;
 // end custom