@rei/cedar 16.3.0 → 17.0.0-alpha.0

package/dist/utils/kebabCase.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts a string to kebab-case format.
+ *
+ * Transforms camelCase, PascalCase, snake_case, and space-separated strings
+ * into lowercase hyphen-separated format.
+ *
+ * @param str - The string to convert
+ * @returns The kebab-cased string
+ *
+ * @example
+ * kebabCase('backgroundColor') // => 'background-color'
+ * kebabCase('PascalCase') // => 'pascal-case'
+ * kebabCase('snake_case_string') // => 'snake-case-string'
+ * kebabCase('Space Separated Text') // => 'space-separated-text'
+ * kebabCase('already-kebab') // => 'already-kebab'
+ */
+export default function kebabCase(str: string): string;

package/dist/utils/kebabCase.mjs

@@ -1,6 +1,6 @@
-function a(e) {
-  return e.replace(/([a-z]) ([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+//#region src/utils/kebabCase.ts
+function e(e) {
+	return e.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 }
-export {
-  a as default
-};
+//#endregion
+export { e as default };

package/dist/utils/layout.d.ts

@@ -0,0 +1,51 @@
+import { NameValuePair, Layout } from '../components/layout/types';
+import { Breakpoint, Structure } from '../types/componentOptions';
+/**
+ * Converts various columns or rows values to a map of inline CSS variables for the Layout component.
+ *
+ * This function handles different structure option types:
+ * - **String**: Direct CSS value (e.g., "100px", "1fr 2fr")
+ * - **Number**: Generates equal-width fractional units (e.g., 2 => "1fr 1fr")
+ * - **Array**: Mix of numbers and strings (e.g., [100px, 1] => "100px 1fr")
+ * - **Object**: Responsive breakpoint configuration
+ *
+ * @param props - Layout configuration object
+ * @param styles - Existing styles object to merge with (optional)
+ * @param structure - The layout structure type ('columns' or 'rows')
+ * @param breakpoint - Specific breakpoint to generate styles for (optional)
+ * @returns Object containing CSS custom property names and their values
+ *
+ * @example
+ * // String input
+ * getStructureStyles({ props: { columns: '100px' }, structure: 'columns' })
+ * // => { '--cdr-layout-columns': '100px' }
+ *
+ * @example
+ * // Number input
+ * getStructureStyles({ props: { columns: 3 }, structure: 'columns' })
+ * // => { '--cdr-layout-columns': '1fr 1fr 1fr' }
+ *
+ * @example
+ * // Array input
+ * getStructureStyles({ props: { columns: ['200px', 1, 2] }, structure: 'columns' })
+ * // => { '--cdr-layout-columns': '200px 1fr 2fr' }
+ *
+ * @example
+ * // Responsive object input
+ * getStructureStyles({
+ *   props: { columns: { xs: 1, sm: 2, md: 3, lg: 4 } },
+ *   structure: 'columns'
+ * })
+ * // => {
+ * //   '--cdr-layout-columns-xs': '1fr',
+ * //   '--cdr-layout-columns-sm': '1fr 1fr',
+ * //   '--cdr-layout-columns-md': '1fr 1fr 1fr',
+ * //   '--cdr-layout-columns-lg': '1fr 1fr 1fr 1fr'
+ * // }
+ */
+export declare function getStructureStyles({ props, styles: newStyles, structure, breakpoint, }: {
+    props: Layout;
+    styles?: NameValuePair;
+    structure: Structure;
+    breakpoint?: Breakpoint;
+}): NameValuePair;

package/dist/utils/layout.mjs

@@ -1,58 +1,44 @@
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.map.js";
-const y = ["xs", "sm", "md", "lg"];
-function i({
-  props: n,
-  styles: o = {},
-  structure: e,
-  breakpoint: t
-}) {
-  const r = t ? n[e][t] : n[e];
-  if (!r)
-    return o;
-  const s = {
-    ...o
-  };
-  switch (!0) {
-    case typeof r == "string": {
-      const a = t ? `-${t}` : "";
-      s[`--cdr-layout-${e}${a}`] = r;
-      break;
-    }
-    case typeof r == "number": {
-      const a = t ? `-${t}` : "";
-      s[`--cdr-layout-${e}${a}`] = Array(r).fill("1fr").join(" ");
-      break;
-    }
-    case Array.isArray(r): {
-      const a = t ? `-${t}` : "";
-      s[`--cdr-layout-${e}${a}`] = r.map((c) => {
-        switch (typeof c) {
-          case "number":
-            return `${c}fr`;
-          case "string":
-            return c;
-          default:
-            return "";
-        }
-      }).join(" ");
-      break;
-    }
-    case typeof r == "object": {
-      y.forEach((a) => {
-        const c = i({
-          props: n,
-          styles: s,
-          structure: e,
-          breakpoint: a
-        });
-        Object.assign(s, c);
-      });
-      break;
-    }
-  }
-  return s;
+import { breakpoints as e } from "./styleTokens.mjs";
+//#region src/utils/layout.ts
+function t({ props: n, styles: r = {}, structure: i, breakpoint: a }) {
+	let o = a ? n[i][a] : n[i];
+	if (!o) return r;
+	let s = { ...r };
+	switch (!0) {
+		case typeof o == "string": {
+			let e = a ? `-${a}` : "";
+			s[`--cdr-layout-${i}${e}`] = o;
+			break;
+		}
+		case typeof o == "number": {
+			let e = a ? `-${a}` : "";
+			s[`--cdr-layout-${i}${e}`] = Array(o).fill("1fr").join(" ");
+			break;
+		}
+		case Array.isArray(o): {
+			let e = a ? `-${a}` : "";
+			s[`--cdr-layout-${i}${e}`] = o.map((e) => {
+				switch (typeof e) {
+					case "number": return `${e}fr`;
+					case "string": return e;
+					default: return "";
+				}
+			}).join(" ");
+			break;
+		}
+		case typeof o == "object":
+			e.forEach((e) => {
+				let r = t({
+					props: n,
+					styles: s,
+					structure: i,
+					breakpoint: e
+				});
+				Object.assign(s, r);
+			});
+			break;
+	}
+	return s;
 }
-export {
-  i as getStructureStyles
-};
+//#endregion
+export { t as getStructureStyles };

package/dist/utils/mapClasses.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Maps an array of class names to scoped class names from a given
+ * styles object. Flattens and splits only string values, maps to
+ * scoped class names, removes undefined or falsy values, and joins
+ * to a single string.
+ *
+ * @example
+ * mapClasses(styles, 'cdr-button', 'cdr-button--primary') => 'cdr-button cdr-button--primary'
+ * @example
+ * mapClasses(styles, ['cdr-button', 'cdr-button--primary']) => 'cdr-button cdr-button--primary'
+ * @example
+ * mapClasses(styles, 'cdr-button', false, 'cdr-button--primary', null, undefined) => 'cdr-button cdr-button--primary'
+ * @example
+ * mapClasses(styles, 'cdr-button cdr-button--primary') => 'cdr-button cdr-button--primary'
+ *
+ * @param {Record<string, string>} style - An object of scoped class names.
+ * @param {...(string | boolean | null | undefined)[]} classes - An array of class names to map.
+ * @returns {string} A string of scoped class names.
+ */
+export default function mapClasses(style: Record<string, string>, ...classes: (string | boolean | null | undefined)[]): string;

package/dist/utils/mapClasses.mjs

@@ -1,10 +1,6 @@
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.filter.js";
-import "core-js/modules/esnext.iterator.flat-map.js";
-import "core-js/modules/esnext.iterator.map.js";
-function m(o, ...p) {
-  return p.flatMap((t) => typeof t == "string" ? t.split(" ") : []).map((t) => o[t]).filter(Boolean).join(" ");
+//#region src/utils/mapClasses.ts
+function e(e, ...t) {
+	return t.flatMap((e) => typeof e == "string" ? e.split(" ") : []).map((t) => e[t]).filter(Boolean).join(" ");
 }
-export {
-  m as default
-};
+//#endregion
+export { e as default };

package/dist/utils/mediaObject.d.ts

@@ -0,0 +1,35 @@
+import { Layout, NameValuePair } from '../components/layout/types';
+import { MediaMeasurement, Position } from '../types/componentOptions';
+/**
+ * Generates layout styling configuration for media object components.
+ *
+ * Creates the necessary CSS Grid properties and inline styles to position
+ * media content relative to text content. Supports both static and responsive
+ * positioning with configurable media dimensions.
+ *
+ * @param mediaPosition - Where the media should be positioned ('left', 'right', 'top', 'bottom') or responsive object
+ * @param mediaWidth - Width of the media element, static or responsive
+ * @param mediaHeight - Height of the media element, static or responsive
+ * @returns Object containing layout props and inline CSS styles
+ *
+ * @example
+ * // Static positioning
+ * getLayoutStyling('left', '200px', 'auto')
+ * // => {
+ * //   props: { columns: ['200px', 1], rows: 'auto' },
+ * //   inlineStyles: { '--cdr-media-object-media-position': "'media content'" }
+ * // }
+ *
+ * @example
+ * // Responsive positioning
+ * getLayoutStyling(
+ *   { xs: 'top', sm: 'left', md: 'left', lg: 'left' },
+ *   { xs: '100%', sm: '200px', md: '300px', lg: '400px' },
+ *   'auto'
+ * )
+ * // Returns responsive grid configuration with breakpoint-specific styles
+ */
+export declare const getLayoutStyling: (mediaPosition: Position, mediaWidth: MediaMeasurement, mediaHeight: MediaMeasurement) => {
+    props: Layout;
+    inlineStyles: NameValuePair;
+};

package/dist/utils/mediaObject.mjs

@@ -1,69 +1,65 @@
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.for-each.js";
-import "core-js/modules/esnext.iterator.reduce.js";
-import { breakpoints as h } from "./other.mjs";
-const f = {
-  left: "'media content'",
-  right: "'content media'",
-  bottom: "'content' 'media'",
-  top: "'media' 'content'"
-}, e = (o) => o, a = (o) => [1, o], p = (o) => [o, 1], w = {
-  right: {
-    columns: a,
-    rows: e
-  },
-  left: {
-    columns: p,
-    rows: e
-  },
-  top: {
-    columns: e,
-    rows: p
-  },
-  bottom: {
-    columns: e,
-    rows: a
-  }
-}, d = (o, n) => {
-  if (!o)
-    return "auto";
-  let c;
-  return typeof o == "string" ? c = n(o) : c = h.reduce((s, u) => {
-    const r = o[u];
-    return s[u] = n(r), s;
-  }, {}), c;
-}, y = (o, n) => o ? typeof o == "string" ? o : o[n] : "auto", B = (o, n, c) => {
-  const s = {}, u = {};
-  if (typeof o == "string") {
-    const r = w[o];
-    s.rows = d(c, r.rows), s.columns = d(n, r.columns), u["--cdr-media-object-media-position"] = f[o];
-  } else {
-    const r = {
-      xs: "auto",
-      sm: "auto",
-      md: "auto",
-      lg: "auto"
-    }, m = {
-      xs: "auto",
-      sm: "auto",
-      md: "auto",
-      lg: "auto"
-    }, i = (t, l) => {
-      const g = w[l], x = y(c, t);
-      r[t] = g.rows(x);
-      const S = y(n, t);
-      m[t] = g.columns(S);
-    };
-    h.forEach((t) => {
-      const l = o[t];
-      i(t, l), i(t, l), u[`--cdr-media-object-media-position-${t}`] = f[l];
-    }), s.rows = r, s.columns = m;
-  }
-  return {
-    props: s,
-    inlineStyles: u
-  };
-};
-export {
-  B as getLayoutStyling
+import { breakpoints as e } from "./styleTokens.mjs";
+//#region src/utils/mediaObject.ts
+var t = {
+	left: "'media content'",
+	right: "'content media'",
+	bottom: "'content' 'media'",
+	top: "'media' 'content'"
+}, n = (e) => e, r = (e) => [1, e], i = (e) => [e, 1], a = {
+	right: {
+		columns: r,
+		rows: n
+	},
+	left: {
+		columns: i,
+		rows: n
+	},
+	top: {
+		columns: n,
+		rows: i
+	},
+	bottom: {
+		columns: n,
+		rows: r
+	}
+}, o = (t, n) => {
+	if (!t) return "auto";
+	let r;
+	return r = typeof t == "string" ? n(t) : e.reduce((e, r) => {
+		let i = t[r];
+		return e[r] = n(i), e;
+	}, {}), r;
+}, s = (e, t) => e ? typeof e == "string" ? e : e[t] : "auto", c = (n, r, i) => {
+	let c = {}, l = {};
+	if (typeof n == "string") {
+		let e = a[n];
+		c.rows = o(i, e.rows), c.columns = o(r, e.columns), l["--cdr-media-object-media-position"] = t[n];
+	} else {
+		let o = {
+			xs: "auto",
+			sm: "auto",
+			md: "auto",
+			lg: "auto"
+		}, u = {
+			xs: "auto",
+			sm: "auto",
+			md: "auto",
+			lg: "auto"
+		}, d = (e, t) => {
+			let n = a[t], c = s(i, e);
+			o[e] = n.rows(c);
+			let l = s(r, e);
+			u[e] = n.columns(l);
+		};
+		e.forEach((e) => {
+			let r = n[e];
+			d(e, r), d(e, r), l[`--cdr-media-object-media-position-${e}`] = t[r];
+		}), c.rows = o, c.columns = u;
+	}
+	return {
+		props: c,
+		inlineStyles: l
+	};
 };
+//#endregion
+export { c as getLayoutStyling };

package/dist/utils/propValidator.d.ts

@@ -0,0 +1,10 @@
+type ErrorHandler = null | ((x: string) => void);
+/**
+ * Validates space separated string against an array of accepted values.
+ * @param {String} propValue -- Space separated string (provided by the user)
+ * @param {Array} validArr -- Array of values that are considered "valid"
+ * @param {Boolean} responsive -- Enables validation of validArr values with '@sm', '@md', '@lg' added to them
+ * @param {Function} handler -- Allows for handling any errors
+ */
+declare function validateProp(propValue: string, validArr: string[], responsive?: boolean, handler?: ErrorHandler): boolean;
+export default validateProp;

package/dist/utils/propValidator.mjs

@@ -1,12 +1,9 @@
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.every.js";
-import "core-js/modules/esnext.iterator.some.js";
-function f(s, p, u = !0, t = null) {
-  return s.split(" ").every((r) => {
-    const n = p.some((e) => u ? r === e || r === `${e}@xs` || r === `${e}@sm` || r === `${e}@md` || r === `${e}@lg` : r === e);
-    return n || (t ? t(`Invalid prop value: ${r}`) : console.error(`Invalid prop value: ${r}`)), n;
-  });
+//#region src/utils/propValidator.ts
+function e(e, t, n = !0, r = null) {
+	return e.split(" ").every((e) => {
+		let i = t.some((t) => n ? e === t || e === `${t}@xs` || e === `${t}@sm` || e === `${t}@md` || e === `${t}@lg` : e === t);
+		return i || (r ? r(`Invalid prop value: ${e}`) : console.error(`Invalid prop value: ${e}`)), i;
+	});
 }
-export {
-  f as default
-};
+//#endregion
+export { e as default };

package/dist/utils/styleTokens.d.ts

@@ -0,0 +1,35 @@
+import { Breakpoint, Space } from '../types/componentOptions';
+/**
+ * Array of Cedar breakpoint names ordered from smallest to largest.
+ * Used for responsive layout calculations and media queries.
+ *
+ * @constant
+ * @type {Breakpoint[]}
+ *
+ * - **xs**: Extra small (mobile, < 768px)
+ * - **sm**: Small (tablet, >= 768px)
+ * - **md**: Medium (small desktop, >= 992px)
+ * - **lg**: Large (large desktop, >= 1232px)
+ */
+export declare const breakpoints: Breakpoint[];
+/**
+ * Map of Cedar spacing token names to their CSS values.
+ *
+ * Provides consistent spacing values across components. Includes both
+ * fixed spacing tokens (e.g., 'one-x', 'two-x') and fluid scale tokens
+ * (e.g., 'scale-0', 'scale-1') that respond to viewport size.
+ *
+ * @constant
+ * @type {Record<Space, string>}
+ *
+ * @example
+ * spacing['one-x'] // => '16px'
+ * spacing['half-x'] // => '8px'
+ * spacing['scale-3'] // => 'var(--cdr-space-scale-3)'
+ *
+ * @example
+ * // Using in a component
+ * const gap = spacing[props.gap] || props.gap;
+ * style.gap = gap;
+ */
+export declare const spacing: { [key in Space]: string; };

package/dist/utils/styleTokens.mjs

@@ -0,0 +1,15 @@
+import { spaceFixedTokens as e, spaceFluidTokens as t, spaceScaleTokens as n } from "../types/componentOptions.mjs";
+import { CdrBreakpointOrder as r } from "@rei/cdr-tokens/types/breakpoint-order";
+import { CdrSpace as i } from "@rei/cdr-tokens/types/space";
+//#region src/utils/styleTokens.ts
+var a = [...r];
+function o(e) {
+	return `var(--cdr-space-scale-${e.replace("CdrSpaceScale", "").split("").join("-")})`;
+}
+var s = Object.fromEntries(Object.entries(e).map(([e, t]) => [e, `${i[t]}px`])), c = Object.fromEntries(Object.entries(t).map(([e, t]) => [e, o(t)])), l = Object.fromEntries(Object.entries(n).map(([e, t]) => [e, o(t)])), u = {
+	...s,
+	...c,
+	...l
+};
+//#endregion
+export { a as breakpoints, u as spacing };

package/dist/utils/surface.d.ts

@@ -0,0 +1,54 @@
+import { CdrSurfaceProps } from '../components/surface/types';
+import { CdrSurfaceNavigationProps } from '../components/surfaceNavigation/types';
+import { CdrSurfaceSelectionProps } from '../components/surfaceSelection/types';
+import { Layout } from '../components/layout/types';
+/**
+ * Generates data attributes for surface component styling.
+ *
+ * Converts surface prop values into data attributes that are consumed by
+ * the surface CSS module. Handles both simple string values and complex
+ * state-based objects (hover, active, checked, etc.).
+ *
+ * @param props - Surface component props containing style configuration
+ * @returns Object containing data-* attributes for the surface element
+ *
+ * @example
+ * // Simple string values
+ * getSurfaceProps({ background: 'primary', borderColor: 'secondary' })
+ * // => {
+ * //   'data-palette': undefined,
+ * //   'data-background': 'primary',
+ * //   'data-border-color': 'secondary'
+ * // }
+ *
+ * @example
+ * // State-based values
+ * getSurfaceProps({
+ *   background: { rest: 'primary', hover: 'secondary' },
+ *   palette: 'sandstone'
+ * })
+ * // => {
+ * //   'data-palette': 'sandstone',
+ * //   'data-background': 'primary',
+ * //   'data-background-hover': 'secondary'
+ * // }
+ */
+export declare function getSurfaceProps(props: CdrSurfaceProps | CdrSurfaceNavigationProps | CdrSurfaceSelectionProps): Record<string, any>;
+/**
+ * Creates a default layout configuration with sensible defaults.
+ *
+ * Provides a base layout configuration that can be overridden with custom values.
+ * Used by layout-based components to ensure consistent default behavior.
+ *
+ * @param defaults - Optional custom default values to merge
+ * @returns Layout configuration object
+ *
+ * @example
+ * getDefaultLayout()
+ * // => { flow: 'column', gap: 'three-eighth-x' }
+ *
+ * @example
+ * getDefaultLayout({ gap: 'one-x', align: 'center' })
+ * // => { flow: 'column', gap: 'one-x', align: 'center' }
+ */
+export declare const getDefaultLayout: (defaults?: Partial<Layout>) => Layout;

package/dist/utils/surface.mjs

@@ -1,25 +1,35 @@
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.for-each.js";
-function c(t) {
-  return t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+//#region src/utils/surface.ts
+function e(e) {
+	return e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
 }
-function l(t) {
-  const e = {
-    "data-palette": t.palette || void 0
-  }, n = ["rest", "hover", "active", "checked", "loading", "disabled", "visited"];
-  return ["background", "borderColor", "borderStyle", "borderWidth", "borderRadius", "boxShadow"].forEach((s) => {
-    const r = c(s), o = t[s];
-    typeof o == "string" ? e[`data-${r}`] = o : typeof o == "object" && Object.entries(o).forEach(([a, i]) => {
-      i && n.includes(a) && (a === "rest" ? e[`data-${r}`] = i : e[`data-${r}-${a}`] = i);
-    });
-  }), e;
+function t(t) {
+	let n = { "data-palette": t.palette || void 0 }, r = [
+		"rest",
+		"hover",
+		"active",
+		"checked",
+		"loading",
+		"disabled",
+		"visited"
+	];
+	return [
+		"background",
+		"borderColor",
+		"borderStyle",
+		"borderWidth",
+		"borderRadius",
+		"boxShadow"
+	].forEach((i) => {
+		let a = e(i), o = t[i];
+		typeof o == "string" ? n[`data-${a}`] = o : typeof o == "object" && Object.entries(o).forEach(([e, t]) => {
+			t && r.includes(e) && (e === "rest" ? n[`data-${a}`] = t : n[`data-${a}-${e}`] = t);
+		});
+	}), n;
 }
-const u = (t = {}) => ({
-  flow: "column",
-  gap: "three-eighth-x",
-  ...t
+var n = (e = {}) => ({
+	flow: "column",
+	gap: "three-eighth-x",
+	...e
 });
-export {
-  u as getDefaultLayout,
-  l as getSurfaceProps
-};
+//#endregion
+export { n as getDefaultLayout, t as getSurfaceProps };

package/dist/utils/text.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Capitalizes the first letter of a string.
+ *
+ * @param text - The string to capitalize
+ * @returns The string with the first letter capitalized
+ *
+ * @example
+ * capitalize('hello') // => 'Hello'
+ * capitalize('world') // => 'World'
+ */
+export declare const capitalize: (text: string) => string;

package/dist/utils/uid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Generates a unique identifier string with a 'cdr-id-' prefix.
+ *
+ * Creates a random hexadecimal ID that can be used for component instance
+ * identification, ARIA attributes, or any scenario requiring unique IDs.
+ *
+ * Note: This uses Math.random() and is suitable for client-side uniqueness
+ * but should not be used for cryptographic purposes or guaranteed global uniqueness.
+ *
+ * @returns A unique ID string in the format 'cdr-id-{hex}'
+ *
+ * @example
+ * generateUid() // => 'cdr-id-a3f2b9'
+ * generateUid() // => 'cdr-id-7d4c1e'
+ *
+ * @example
+ * // Using in a component for accessibility
+ * const inputId = generateUid();
+ * // <label :for="inputId">Name</label>
+ * // <input :id="inputId" />
+ */
+export default function generateUid(): string;

package/dist/utils/uid.mjs

@@ -1,6 +1,6 @@
-function r() {
-  return `cdr-id-${Math.floor((1 + Math.random()) * 16777216).toString(16).substring(1)}`;
+//#region src/utils/uid.ts
+function e() {
+	return `cdr-id-${Math.floor((1 + Math.random()) * 16777216).toString(16).substring(1)}`;
 }
-export {
-  r as default
-};
+//#endregion
+export { e as default };