@db-ux/react-core-components 4.9.1 → 4.10.0-esm-f121fc3

package/dist/shared/constants.js

@@ -1,94 +1,32 @@
-export const DEFAULT_ID = 'OVERWRITE_DEFAULT_ID';
-export const DEFAULT_LABEL = 'LABEL SHOULD BE SET';
-export const DEFAULT_PLACEHOLDER = ' ';
-export const DEFAULT_MESSAGE = 'MESSAGE SHOULD BE SET';
-export const DEFAULT_LABEL_ID_SUFFIX = '-label';
-export const DEFAULT_SELECT_ID_SUFFIX = '-select';
-export const DEFAULT_MESSAGE_ID_SUFFIX = '-message';
-export const DEFAULT_VALID_MESSAGE_ID_SUFFIX = '-valid-message';
-export const DEFAULT_INVALID_MESSAGE_ID_SUFFIX = '-invalid-message';
-export const DEFAULT_PLACEHOLDER_ID_SUFFIX = '-placeholder';
-export const DEFAULT_DATALIST_ID_SUFFIX = '-datalist';
-export const DEFAULT_VALID_MESSAGE = 'TODO: Add a validMessage';
-export const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
-export const DEFAULT_REMOVE = 'Remove';
-export const DEFAULT_BACK = 'Back';
-export const DEFAULT_SELECTED = 'Selected';
-export const DEFAULT_BURGER_MENU = 'BurgerMenu';
-export const DEFAULT_ICON = 'brand';
-export const DEFAULT_ROWS = 4;
-export const DEFAULT_CLOSE_BUTTON = 'Close';
-export const DENSITY_CONST = 'density';
-export const COLOR_CONST = 'color';
-export var DENSITY;
-(function (DENSITY) {
-    DENSITY["FUNCTIONAL"] = "functional";
-    DENSITY["REGULAR"] = "regular";
-    DENSITY["EXPRESSIVE"] = "expressive";
-})(DENSITY || (DENSITY = {}));
-export const DENSITIES = Object.entries(DENSITY).map(([, value]) => value);
-export var COLOR_SIMPLE;
-(function (COLOR_SIMPLE) {
-    COLOR_SIMPLE["PRIMARY"] = "primary";
-})(COLOR_SIMPLE || (COLOR_SIMPLE = {}));
-export var COLOR;
-(function (COLOR) {
-    COLOR["NEUTRAL_BG_LEVEL_1"] = "neutral-bg-basic-level-1";
-    COLOR["NEUTRAL_BG_LEVEL_2"] = "neutral-bg-basic-level-2";
-    COLOR["NEUTRAL_BG_LEVEL_3"] = "neutral-bg-basic-level-3";
-    COLOR["NEUTRAL_BG_TRANSPARENT_SEMI"] = "neutral-bg-basic-transparent-semi";
-    COLOR["NEUTRAL_BG_TRANSPARENT_FULL"] = "neutral-bg-basic-transparent-full";
-    COLOR["BRAND_BG_LEVEL_1"] = "brand-bg-basic-level-1";
-    COLOR["BRAND_BG_LEVEL_2"] = "brand-bg-basic-level-2";
-    COLOR["BRAND_BG_LEVEL_3"] = "brand-bg-basic-level-3";
-    COLOR["BRAND_BG_TRANSPARENT_SEMI"] = "brand-bg-basic-transparent-semi";
-    COLOR["BRAND_BG_TRANSPARENT_FULL"] = "brand-bg-basic-transparent-full";
-    COLOR["SUCCESSFUL_BG_LEVEL_1"] = "successful-bg-basic-level-1";
-    COLOR["SUCCESSFUL_BG_LEVEL_2"] = "successful-bg-basic-level-2";
-    COLOR["SUCCESSFUL_BG_LEVEL_3"] = "successful-bg-basic-level-3";
-    COLOR["SUCCESSFUL_BG_TRANSPARENT_SEMI"] = "successful-bg-basic-transparent-semi";
-    COLOR["SUCCESSFUL_BG_TRANSPARENT_FULL"] = "successful-bg-basic-transparent-full";
-    COLOR["CRITICAL_BG_LEVEL_1"] = "critical-bg-basic-level-1";
-    COLOR["CRITICAL_BG_LEVEL_2"] = "critical-bg-basic-level-2";
-    COLOR["CRITICAL_BG_LEVEL_3"] = "critical-bg-basic-level-3";
-    COLOR["CRITICAL_BG_TRANSPARENT_SEMI"] = "critical-bg-basic-transparent-semi";
-    COLOR["CRITICAL_BG_TRANSPARENT_Full"] = "critical-bg-basic-transparent-full";
-    COLOR["WARNING_BG_LEVEL_1"] = "warning-bg-basic-level-1";
-    COLOR["WARNING_BG_LEVEL_2"] = "warning-bg-basic-level-2";
-    COLOR["WARNING_BG_LEVEL_3"] = "warning-bg-basic-level-3";
-    COLOR["WARNING_BG_TRANSPARENT_SEMI"] = "warning-bg-basic-transparent-semi";
-    COLOR["WARNING_BG_TRANSPARENT_FULL"] = "warning-bg-basic-transparent-full";
-    COLOR["INFORMATIONAL_BG_LEVEL_1"] = "informational-bg-basic-level-1";
-    COLOR["INFORMATIONAL_BG_LEVEL_2"] = "informational-bg-basic-level-2";
-    COLOR["INFORMATIONAL_BG_LEVEL_3"] = "informational-bg-basic-level-3";
-    COLOR["INFORMATIONAL_BG_TRANSPARENT_SEMI"] = "informational-bg-basic-transparent-semi";
-    COLOR["INFORMATIONAL_BG_TRANSPARENT_FULL"] = "informational-bg-basic-transparent-full";
-})(COLOR || (COLOR = {}));
-export const COLORS = Object.entries(COLOR).map(([, value]) => value);
-export const COLORS_SIMPLE = Object.entries(COLOR_SIMPLE).map(([, value]) => value);
-export var SEMANTIC;
-(function (SEMANTIC) {
-    SEMANTIC["CRITICAL"] = "critical";
-    SEMANTIC["INFORMATIONAL"] = "informational";
-    SEMANTIC["WARNING"] = "warning";
-    SEMANTIC["SUCCESSFUL"] = "successful";
-})(SEMANTIC || (SEMANTIC = {}));
-export const SEMANTICS = Object.entries(SEMANTIC).map(([, value]) => value);
-export const DEFAULT_VIEWPORT = {
-    width: 390,
-    height: 884
-};
-export const DESKTOP_VIEWPORT = {
-    width: 1920,
-    height: 1280
-};
-/**
- * Use those viewports if your component has a css media-query otherwise use the DEFAULT_VIEWPORT
- */
-export const TESTING_VIEWPORTS = [Object.assign({ name: 'desktop' }, DESKTOP_VIEWPORT), {
-        name: 'tablet',
-        width: 768,
-        height: 1024
-    }, Object.assign({ name: 'mobile' }, DEFAULT_VIEWPORT)];
-export const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
-export const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
+//#region src/shared/constants.ts
+var e = "OVERWRITE_DEFAULT_ID", t = "LABEL SHOULD BE SET", n = " ", r = "MESSAGE SHOULD BE SET", i = "-label", a = "-select", o = "-message", s = "-valid-message", c = "-invalid-message", l = "-placeholder", u = "-datalist", d = "TODO: Add a validMessage", f = "TODO: Add an invalidMessage", p = "Remove", m = "Back", h = "Selected", g = "BurgerMenu", _ = "brand", v = 4, y = "Close", b = "density", x = "color", S = /* @__PURE__ */ function(e) {
+	return e.FUNCTIONAL = "functional", e.REGULAR = "regular", e.EXPRESSIVE = "expressive", e;
+}({}), C = Object.entries(S).map(([, e]) => e), w = /* @__PURE__ */ function(e) {
+	return e.PRIMARY = "primary", e;
+}({}), T = /* @__PURE__ */ function(e) {
+	return e.NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1", e.NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2", e.NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3", e.NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi", e.NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full", e.BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1", e.BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2", e.BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3", e.BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi", e.BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full", e.SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1", e.SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2", e.SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3", e.SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi", e.SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full", e.CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1", e.CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2", e.CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3", e.CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi", e.CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full", e.WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1", e.WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2", e.WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3", e.WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi", e.WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full", e.INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1", e.INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2", e.INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3", e.INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi", e.INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full", e;
+}({}), E = Object.entries(T).map(([, e]) => e), D = Object.entries(w).map(([, e]) => e), O = /* @__PURE__ */ function(e) {
+	return e.CRITICAL = "critical", e.INFORMATIONAL = "informational", e.WARNING = "warning", e.SUCCESSFUL = "successful", e;
+}({}), k = Object.entries(O).map(([, e]) => e), A = {
+	width: 390,
+	height: 884
+}, j = {
+	width: 1920,
+	height: 1280
+}, M = [
+	{
+		name: "desktop",
+		...j
+	},
+	{
+		name: "tablet",
+		width: 768,
+		height: 1024
+	},
+	{
+		name: "mobile",
+		...A
+	}
+], N = "db-ux-framework", P = "db-ux-mode";
+//#endregion
+export { T as COLOR, E as COLORS, D as COLORS_SIMPLE, x as COLOR_CONST, w as COLOR_SIMPLE, N as DB_UX_LOCAL_STORAGE_FRAMEWORK, P as DB_UX_LOCAL_STORAGE_MODE, m as DEFAULT_BACK, g as DEFAULT_BURGER_MENU, y as DEFAULT_CLOSE_BUTTON, u as DEFAULT_DATALIST_ID_SUFFIX, _ as DEFAULT_ICON, e as DEFAULT_ID, f as DEFAULT_INVALID_MESSAGE, c as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, t as DEFAULT_LABEL, i as DEFAULT_LABEL_ID_SUFFIX, r as DEFAULT_MESSAGE, o as DEFAULT_MESSAGE_ID_SUFFIX, n as DEFAULT_PLACEHOLDER, l as DEFAULT_PLACEHOLDER_ID_SUFFIX, p as DEFAULT_REMOVE, v as DEFAULT_ROWS, h as DEFAULT_SELECTED, a as DEFAULT_SELECT_ID_SUFFIX, d as DEFAULT_VALID_MESSAGE, s as DEFAULT_VALID_MESSAGE_ID_SUFFIX, A as DEFAULT_VIEWPORT, C as DENSITIES, S as DENSITY, b as DENSITY_CONST, j as DESKTOP_VIEWPORT, O as SEMANTIC, k as SEMANTICS, M as TESTING_VIEWPORTS };

package/dist/shared/figma.d.ts

@@ -12,6 +12,12 @@ export type FigmaEnumProp = {
     key: string;
     /** Map of Figma variant value → code value. Values can be strings, booleans, numbers, or instance swaps. */
     value: Record<string, string | boolean | number | FigmaInstanceProp>;
+    /**
+     * Optional Figma boolean property key that guards this prop.
+     * When set, the resolved value is only emitted if getPropertyValue(guardKey) === 'True'.
+     * Useful for icon swaps that are only present when a show-flag is enabled.
+     */
+    guardKey?: string;
 };
 /** A simple scalar prop. */
 export type FigmaSimpleProp = {
@@ -86,19 +92,19 @@ export type FigmaConnectedInstancesProp = {
  */
 export type FigmaNestedConnectedInstancesProp = {
     type: 'nestedConnectedInstances';
-    /** Import string to filter by (e.g. 'DBAccordionItem'). Only instances whose template nestedImports contain this string are included. */
-    filter: string;
+    /** Import string to filter by (e.g. 'DBAccordionItem'). Only instances whose template nestedImports contain this string are included. When omitted, all connected instances are included. */
+    filter?: string;
 };
 /**
- * Wraps an iconSwap prop so it is only rendered when a boolean guard prop is true.
- * Generates: let icon = ''; if (showIconLeading) { icon = `\n\t\ticon="${iconLeading}"` }
+ * Wraps an iconSwap prop so it is only rendered when a boolean Figma property is enabled.
+ * Generates: let icon = ''; if (getPropertyValue(guardKey) === true || getPropertyValue(guardKey) === 'True') { icon = `\n\t\ticon="${iconLeading}"` }
  */
 export type FigmaConditionalProp = {
     type: 'conditionalProp';
     /** The Figma property key of the icon instance swap. */
     key: string;
-    /** The prop name of the boolean guard (e.g. 'showIconLeading'). */
-    guardProp: string;
+    /** The Figma boolean property key that guards this prop (e.g. 'Show Icon Leading'). */
+    guardKey: string;
     /** The attribute name to render (e.g. 'icon'). */
     attrName: string;
 };

package/dist/shared/model.js

@@ -1,22 +1,73 @@
-export const SemanticList = ['adaptive', 'neutral', 'critical', 'informational', 'warning', 'successful'];
-export const SpacingList = ['medium', 'small', 'large', 'none'];
-export const MarginList = ['medium', 'small', 'large', 'none'];
-export const PlacementHorizontalList = ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'];
-export const PlacementVerticalList = ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
-export const PlacementList = [...PlacementHorizontalList, ...PlacementVerticalList];
-export const GapSpacingList = ['none', '3x-large', '2x-large', 'x-large', 'large', 'medium', 'small', 'x-small', '2x-small', '3x-small'];
-export const OrientationList = ['horizontal', 'vertical'];
-export const WidthList = ['full', 'auto'];
-export const MaxWidthList = ['full', 'medium', 'large', 'small'];
-export const PopoverDelayList = ['none', 'slow', 'fast'];
-export const PopoverWidthList = ['auto', 'fixed'];
-export const SizeList = ['small', 'medium'];
-export const EmphasisList = ['weak', 'strong'];
-export const ValidationList = ['invalid', 'valid', 'no-validation'];
-export const FieldSizingList = ['fixed', 'content'];
-export const LabelVariantList = ['above', 'floating'];
-export const LabelVariantHorizontalList = ['leading', 'trailing'];
-export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
-export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
-export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
-export const AlignmentList = ['start', 'center'];
+//#region src/shared/model.ts
+var e = [
+	"adaptive",
+	"neutral",
+	"critical",
+	"informational",
+	"warning",
+	"successful"
+], t = [
+	"medium",
+	"small",
+	"large",
+	"none"
+], n = [
+	"medium",
+	"small",
+	"large",
+	"none"
+], r = [
+	"left",
+	"right",
+	"left-start",
+	"left-end",
+	"right-start",
+	"right-end"
+], i = [
+	"top",
+	"bottom",
+	"top-start",
+	"top-end",
+	"bottom-start",
+	"bottom-end"
+], a = [...r, ...i], o = [
+	"none",
+	"3x-large",
+	"2x-large",
+	"x-large",
+	"large",
+	"medium",
+	"small",
+	"x-small",
+	"2x-small",
+	"3x-small"
+], s = ["horizontal", "vertical"], c = ["full", "auto"], l = [
+	"full",
+	"medium",
+	"large",
+	"small"
+], u = [
+	"none",
+	"slow",
+	"fast"
+], d = ["auto", "fixed"], f = ["small", "medium"], p = ["weak", "strong"], m = [
+	"invalid",
+	"valid",
+	"no-validation"
+], h = ["fixed", "content"], g = ["above", "floating"], _ = ["leading", "trailing"], v = /* @__PURE__ */ "off.on.name.honorific-prefix.given-name.additional-name.family-name.honorific-suffix.nickname.email.username.new-password.current-password.one-time-code.organization-title.organization.street-address.shipping.billing.address-line1.address-line2.address-line3.address-level4.address-level3.address-level2.address-level1.country.country-name.postal-code.cc-name.cc-given-name.cc-additional-name.cc-family-name.cc-number.cc-exp.cc-exp-month.cc-exp-year.cc-csc.cc-type.transaction-currency.transaction-amount.language.bday.bday-day.bday-month.bday-year.sex.tel.tel-country-code.tel-national.tel-area-code.tel-local.tel-extension.impp.url.photo.webauthn".split("."), y = [
+	"_self",
+	"_blank",
+	"_parent",
+	"_top"
+], b = [
+	"no-referrer",
+	"no-referrer-when-downgrade",
+	"origin",
+	"origin-when-cross-origin",
+	"same-origin",
+	"strict-origin",
+	"strict-origin-when-cross-origin",
+	"unsafe-url"
+], x = ["start", "center"];
+//#endregion
+export { x as AlignmentList, v as AutoCompleteList, p as EmphasisList, h as FieldSizingList, o as GapSpacingList, _ as LabelVariantHorizontalList, g as LabelVariantList, b as LinkReferrerPolicyList, y as LinkTargetList, n as MarginList, l as MaxWidthList, s as OrientationList, r as PlacementHorizontalList, a as PlacementList, i as PlacementVerticalList, u as PopoverDelayList, d as PopoverWidthList, e as SemanticList, f as SizeList, t as SpacingList, m as ValidationList, c as WidthList };

package/dist/utils/document-click-listener.js

@@ -1,29 +1,26 @@
-import { uuid } from './index';
-export class DocumentClickListener {
-    static runCallbacks(event) {
-        for (const callback of Object.values(DocumentClickListener.callbacks)) {
-            if (typeof callback === 'function') {
-                callback(event);
-            }
-        }
-    }
-    constructor() {
-        if (DocumentClickListener._instance) {
-            return DocumentClickListener._instance;
-        }
-        DocumentClickListener._instance = this;
-        if (self.document) {
-            self.document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
-        }
-    }
-    addCallback(callback) {
-        const callbackID = uuid();
-        DocumentClickListener.callbacks[callbackID] = callback;
-        return callbackID;
-    }
-    removeCallback(id) {
-        delete DocumentClickListener.callbacks[id];
-    }
-}
-DocumentClickListener.callbacks = {};
-DocumentClickListener._instance = null;
+import { uuid as e } from "./index.js";
+//#region src/utils/document-click-listener.ts
+var t = class t {
+	static {
+		this.callbacks = {};
+	}
+	static {
+		this._instance = null;
+	}
+	static runCallbacks(e) {
+		for (let n of Object.values(t.callbacks)) typeof n == "function" && n(e);
+	}
+	constructor() {
+		if (t._instance) return t._instance;
+		t._instance = this, self.document && self.document.addEventListener("click", (e) => t.runCallbacks(e));
+	}
+	addCallback(n) {
+		let r = e();
+		return t.callbacks[r] = n, r;
+	}
+	removeCallback(e) {
+		delete t.callbacks[e];
+	}
+};
+//#endregion
+export { t as DocumentClickListener };

package/dist/utils/document-scroll-listener.js

@@ -1,38 +1,30 @@
-import { uuid } from './index';
-export class DocumentScrollListener {
-    static runCallbacks(event) {
-        for (const callback of Object.values(DocumentScrollListener.callbacks)) {
-            if (typeof callback === 'function') {
-                callback(event);
-            }
-        }
-    }
-    constructor() {
-        this.ticking = false;
-        if (DocumentScrollListener._instance) {
-            return DocumentScrollListener._instance;
-        }
-        DocumentScrollListener._instance = this;
-        if (self.document) {
-            self.document.addEventListener('scroll', event => {
-                if (!this.ticking) {
-                    window.requestAnimationFrame(() => {
-                        DocumentScrollListener.runCallbacks(event);
-                        this.ticking = false;
-                    });
-                    this.ticking = true;
-                }
-            }, true);
-        }
-    }
-    addCallback(callback) {
-        const callbackID = uuid();
-        DocumentScrollListener.callbacks[callbackID] = callback;
-        return callbackID;
-    }
-    removeCallback(id) {
-        delete DocumentScrollListener.callbacks[id];
-    }
-}
-DocumentScrollListener.callbacks = {};
-DocumentScrollListener._instance = null;
+import { uuid as e } from "./index.js";
+//#region src/utils/document-scroll-listener.ts
+var t = class t {
+	static {
+		this.callbacks = {};
+	}
+	static {
+		this._instance = null;
+	}
+	static runCallbacks(e) {
+		for (let n of Object.values(t.callbacks)) typeof n == "function" && n(e);
+	}
+	constructor() {
+		if (this.ticking = !1, t._instance) return t._instance;
+		t._instance = this, self.document && self.document.addEventListener("scroll", (e) => {
+			this.ticking ||= (window.requestAnimationFrame(() => {
+				t.runCallbacks(e), this.ticking = !1;
+			}), !0);
+		}, !0);
+	}
+	addCallback(n) {
+		let r = e();
+		return t.callbacks[r] = n, r;
+	}
+	removeCallback(e) {
+		delete t.callbacks[e];
+	}
+};
+//#endregion
+export { t as DocumentScrollListener };