@1money/component-ui 0.0.95-alpha.1 → 0.0.95-alpha.3

package/es/components/PanelLayout/constants.js

@@ -0,0 +1,48 @@
+export var PANEL_LAYOUT_PREFIX = 'panel-layout';
+/** Back-arrow control: 24px icon, and its accessible name. */
+export var PANEL_LAYOUT_BACK_ICON_SIZE = 24;
+export var PANEL_LAYOUT_BACK_LABEL = 'Go back';
+/**
+ * THE density table for content panels — the single thing to edit when the
+ * design changes. Same shape as `FORM_LAYOUT_CONFIG`: one entry per host, so
+ * a divergence between the two is a value change, never a structural one.
+ *
+ * The two entries are currently IDENTICAL, and that is the design: a panel
+ * renders the same on a page and in a dialog, the only difference being
+ * whether a `Dialog(bare)` is wrapped around it. They are still spelled out
+ * separately so that (a) the sameness reads as deliberate rather than as an
+ * oversight, and (b) a divergence later is a value change here and nothing
+ * else — no consumer passes these numbers, they only pass `variant`.
+ *
+ * `width` is the panel width used in BOTH hosts (380). It is NOT inherited
+ * from FormLayout's `page/small` density — that entry is 448, the app's
+ * sign-in card, a different surface. Only the padding (24) and the region gap
+ * (16) come from that density, and those already match. Inside a dialog the
+ * value goes on the Dialog panel and the layout fills at 100%: sizing a bare
+ * panel from its child hits the shrink-to-fit percentage circularity (the
+ * same reason FormDialog gives).
+ */
+export var PANEL_LAYOUT_CONFIG = {
+  /** Standalone on a page. */
+  page: {
+    /** Panel width (px). */
+    width: 380,
+    /** Illustration above the header copy (px). */
+    illustrationSize: 52,
+    /** Footer action button size. */
+    buttonSize: 'medium',
+    /** Gap between footer action buttons (px); ActionBar reads it via var. */
+    actionGap: 8
+  },
+  /** Inside a dialog, wrapped by `BaseDialog` in a `Dialog(bare)`. */
+  modal: {
+    width: 380,
+    illustrationSize: 52,
+    buttonSize: 'medium',
+    actionGap: 8
+  }
+};
+export var resolvePanelLayoutConfig = function resolvePanelLayoutConfig(variant) {
+  return PANEL_LAYOUT_CONFIG[variant];
+};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvY29uc3RhbnRzLnRzIiwiY29tcG9uZW50cy9QYW5lbExheW91dC9jb25zdGFudHMuanMiXSwibmFtZXMiOlsiUEFORUxfTEFZT1VUX1BSRUZJWCIsIlBBTkVMX0xBWU9VVF9CQUNLX0lDT05fU0laRSIsIlBBTkVMX0xBWU9VVF9CQUNLX0xBQkVMIiwiUEFORUxfTEFZT1VUX0NPTkZJRyIsInBhZ2UiLCJ3aWR0aCIsImlsbHVzdHJhdGlvblNpemUiLCJidXR0b25TaXplIiwiYWN0aW9uR2FwIiwibW9kYWwiLCJyZXNvbHZlUGFuZWxMYXlvdXRDb25maWciLCJ2YXJpYW50Il0sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLElBQU1BLG1CQUFtQixHQUFHLGNBQWM7QUFFakQ7QUFDQSxPQUFPLElBQU1DLDJCQUEyQixHQUFHLEVBQUU7QUFDN0MsT0FBTyxJQUFNQyx1QkFBdUIsR0FBRyxTQUFTO0FBRWhEO0FDSEE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QURLQSxPQUFPLElBQU1DLG1CQUFtQixHQUFHO0VBQ2pDO0VBQ0FDLElBQUksRUFBRTtJQUNKO0lBQ0FDLEtBQUssRUFBRSxHQUFHO0lBQ1Y7SUFDQUMsZ0JBQWdCLEVBQUUsRUFBRTtJQUNwQjtJQUNBQyxVQUFVLEVBQUUsUUFBNkI7SUFDekM7SUFDQUMsU0FBUyxFQUFFO0VDSFgsQ0RJRDtFQUNEO0VBQ0FDLEtBQUssRUFBRTtJQUNMSixLQUFLLEVBQUUsR0FBRztJQUNWQyxnQkFBZ0IsRUFBRSxFQUFFO0lBQ3BCQyxVQUFVLEVBQUUsUUFBNkI7SUFDekNDLFNBQVMsRUFBRTtFQ0hYO0FBQ0osQ0RJVTtBQUlWLE9BQU8sSUFBTUUsd0JBQXdCLEdBQUcsU0FBM0JBLHdCQUF3QkEsQ0FBSUMsT0FBMkI7RUFBQSxPQUNsRVIsbUJBQW1CLENBQUNRLE9BQU8sQ0FBQztBQUFBIiwiZmlsZSI6ImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvY29uc3RhbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCJleHBvcnQgY29uc3QgUEFORUxfTEFZT1VUX1BSRUZJWCA9ICdwYW5lbC1sYXlvdXQnO1xuLyoqIEJhY2stYXJyb3cgY29udHJvbDogMjRweCBpY29uLCBhbmQgaXRzIGFjY2Vzc2libGUgbmFtZS4gKi9cbmV4cG9ydCBjb25zdCBQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUgPSAyNDtcbmV4cG9ydCBjb25zdCBQQU5FTF9MQVlPVVRfQkFDS19MQUJFTCA9ICdHbyBiYWNrJztcbi8qKlxuICogVEhFIGRlbnNpdHkgdGFibGUgZm9yIGNvbnRlbnQgcGFuZWxzIOKAlCB0aGUgc2luZ2xlIHRoaW5nIHRvIGVkaXQgd2hlbiB0aGVcbiAqIGRlc2lnbiBjaGFuZ2VzLiBTYW1lIHNoYXBlIGFzIGBGT1JNX0xBWU9VVF9DT05GSUdgOiBvbmUgZW50cnkgcGVyIGhvc3QsIHNvXG4gKiBhIGRpdmVyZ2VuY2UgYmV0d2VlbiB0aGUgdHdvIGlzIGEgdmFsdWUgY2hhbmdlLCBuZXZlciBhIHN0cnVjdHVyYWwgb25lLlxuICpcbiAqIFRoZSB0d28gZW50cmllcyBhcmUgY3VycmVudGx5IElERU5USUNBTCwgYW5kIHRoYXQgaXMgdGhlIGRlc2lnbjogYSBwYW5lbFxuICogcmVuZGVycyB0aGUgc2FtZSBvbiBhIHBhZ2UgYW5kIGluIGEgZGlhbG9nLCB0aGUgb25seSBkaWZmZXJlbmNlIGJlaW5nXG4gKiB3aGV0aGVyIGEgYERpYWxvZyhiYXJlKWAgaXMgd3JhcHBlZCBhcm91bmQgaXQuIFRoZXkgYXJlIHN0aWxsIHNwZWxsZWQgb3V0XG4gKiBzZXBhcmF0ZWx5IHNvIHRoYXQgKGEpIHRoZSBzYW1lbmVzcyByZWFkcyBhcyBkZWxpYmVyYXRlIHJhdGhlciB0aGFuIGFzIGFuXG4gKiBvdmVyc2lnaHQsIGFuZCAoYikgYSBkaXZlcmdlbmNlIGxhdGVyIGlzIGEgdmFsdWUgY2hhbmdlIGhlcmUgYW5kIG5vdGhpbmdcbiAqIGVsc2Ug4oCUIG5vIGNvbnN1bWVyIHBhc3NlcyB0aGVzZSBudW1iZXJzLCB0aGV5IG9ubHkgcGFzcyBgdmFyaWFudGAuXG4gKlxuICogYHdpZHRoYCBpcyB0aGUgcGFuZWwgd2lkdGggdXNlZCBpbiBCT1RIIGhvc3RzICgzODApLiBJdCBpcyBOT1QgaW5oZXJpdGVkXG4gKiBmcm9tIEZvcm1MYXlvdXQncyBgcGFnZS9zbWFsbGAgZGVuc2l0eSDigJQgdGhhdCBlbnRyeSBpcyA0NDgsIHRoZSBhcHAnc1xuICogc2lnbi1pbiBjYXJkLCBhIGRpZmZlcmVudCBzdXJmYWNlLiBPbmx5IHRoZSBwYWRkaW5nICgyNCkgYW5kIHRoZSByZWdpb24gZ2FwXG4gKiAoMTYpIGNvbWUgZnJvbSB0aGF0IGRlbnNpdHksIGFuZCB0aG9zZSBhbHJlYWR5IG1hdGNoLiBJbnNpZGUgYSBkaWFsb2cgdGhlXG4gKiB2YWx1ZSBnb2VzIG9uIHRoZSBEaWFsb2cgcGFuZWwgYW5kIHRoZSBsYXlvdXQgZmlsbHMgYXQgMTAwJTogc2l6aW5nIGEgYmFyZVxuICogcGFuZWwgZnJvbSBpdHMgY2hpbGQgaGl0cyB0aGUgc2hyaW5rLXRvLWZpdCBwZXJjZW50YWdlIGNpcmN1bGFyaXR5ICh0aGVcbiAqIHNhbWUgcmVhc29uIEZvcm1EaWFsb2cgZ2l2ZXMpLlxuICovXG5leHBvcnQgY29uc3QgUEFORUxfTEFZT1VUX0NPTkZJRyA9IHtcbiAgICAvKiogU3RhbmRhbG9uZSBvbiBhIHBhZ2UuICovXG4gICAgcGFnZToge1xuICAgICAgICAvKiogUGFuZWwgd2lkdGggKHB4KS4gKi9cbiAgICAgICAgd2lkdGg6IDM4MCxcbiAgICAgICAgLyoqIElsbHVzdHJhdGlvbiBhYm92ZSB0aGUgaGVhZGVyIGNvcHkgKHB4KS4gKi9cbiAgICAgICAgaWxsdXN0cmF0aW9uU2l6ZTogNTIsXG4gICAgICAgIC8qKiBGb290ZXIgYWN0aW9uIGJ1dHRvbiBzaXplLiAqL1xuICAgICAgICBidXR0b25TaXplOiAnbWVkaXVtJyxcbiAgICAgICAgLyoqIEdhcCBiZXR3ZWVuIGZvb3RlciBhY3Rpb24gYnV0dG9ucyAocHgpOyBBY3Rpb25CYXIgcmVhZHMgaXQgdmlhIHZhci4gKi9cbiAgICAgICAgYWN0aW9uR2FwOiA4LFxuICAgIH0sXG4gICAgLyoqIEluc2lkZSBhIGRpYWxvZywgd3JhcHBlZCBieSBgQmFzZURpYWxvZ2AgaW4gYSBgRGlhbG9nKGJhcmUpYC4gKi9cbiAgICBtb2RhbDoge1xuICAgICAgICB3aWR0aDogMzgwLFxuICAgICAgICBpbGx1c3RyYXRpb25TaXplOiA1MixcbiAgICAgICAgYnV0dG9uU2l6ZTogJ21lZGl1bScsXG4gICAgICAgIGFjdGlvbkdhcDogOCxcbiAgICB9LFxufTtcbmV4cG9ydCBjb25zdCByZXNvbHZlUGFuZWxMYXlvdXRDb25maWcgPSAodmFyaWFudCkgPT4gUEFORUxfTEFZT1VUX0NPTkZJR1t2YXJpYW50XTsiXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/es/components/PanelLayout/index.d.ts

@@ -0,0 +1,6 @@
+import { PanelLayout } from './PanelLayout';
+export { PanelLayout } from './PanelLayout';
+export default PanelLayout;
+export * from './interface';
+export { PANEL_LAYOUT_CONFIG, PANEL_LAYOUT_PREFIX, resolvePanelLayoutConfig, } from './constants';
+export type { PanelLayoutVariant } from './constants';

package/es/components/PanelLayout/index.js

@@ -0,0 +1,6 @@
+import { PanelLayout } from './PanelLayout';
+export { PanelLayout } from './PanelLayout';
+export default PanelLayout;
+export * from './interface';
+export { PANEL_LAYOUT_CONFIG, PANEL_LAYOUT_PREFIX, resolvePanelLayoutConfig } from './constants';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvaW5kZXgudHMiXSwibmFtZXMiOlsiUGFuZWxMYXlvdXQiLCJQQU5FTF9MQVlPVVRfQ09ORklHIiwiUEFORUxfTEFZT1VUX1BSRUZJWCIsInJlc29sdmVQYW5lbExheW91dENvbmZpZyJdLCJtYXBwaW5ncyI6IkFBQUEsU0FBU0EsV0FBVyxRQUFRLGVBQWU7QUFFM0MsU0FBU0EsV0FBVyxRQUFRLGVBQWU7QUFFM0MsZUFBZUEsV0FBVztBQUUxQixjQUFjLGFBQWE7QUFDM0IsU0FDRUMsbUJBQW1CLEVBQ25CQyxtQkFBbUIsRUFDbkJDLHdCQUF3QixRQUNuQixhQUFhIiwiZmlsZSI6ImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/PanelLayout/interface.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import type { ActionBarAction, ActionBarDirection, ActionBarFootnote } from "../ActionBar";
+import type { FormLayoutProps } from "../FormLayout";
+import type { IconName } from "../Icons";
+import type { PanelLayoutVariant } from './constants';
+export interface PanelLayoutProps extends Pick<FormLayoutProps, 'width' | 'className'> {
+    /**
+     * Which host this panel renders in. Selects the entry in
+     * `PANEL_LAYOUT_CONFIG` and the underlying FormLayout density / scroll
+     * policy. `page` (default) is the standalone card; `modal` is the panel
+     * `BaseDialog` wraps in a `Dialog(bare)`.
+     *
+     * There is deliberately no `size`: a result has ONE shape. `PageForm`
+     * exposes a size axis because a form's density varies with its field count.
+     */
+    variant?: PanelLayoutVariant;
+    /**
+     * Override the host's scroll policy. `page` never scrolls internally;
+     * `modal` pins header/footer and scrolls the content region when
+     * height-constrained. `BaseDialog` maps its `fixed` prop onto this — the
+     * two defaults are opposites, so that mapping must stay explicit.
+     */
+    scroll?: boolean;
+    /**
+     * Show the back arrow at the TOP of the header block, on the same 8px seam
+     * as everything else in it.
+     *
+     * The panel owns this control in BOTH hosts — stepped page flows (2FA setup)
+     * carry it just like dialog flows do. It belongs to the content flow, unlike
+     * the dialog's close icon, which is absolutely positioned overlay chrome and
+     * stays with Dialog. That is also why `Dialog(bare)` does not render it.
+     */
+    showBackIcon?: boolean;
+    /** Fires when the back arrow is activated. */
+    onBack?: () => void;
+    /** Replace the default back arrow node (keeps its slot and seam). */
+    backIcon?: ReactNode;
+    /**
+     * Small label row above the title ("Step 2 of 3"). Same contract as
+     * `title`: a plain string is rendered in the family style, a node passes
+     * through (e.g. a Tag). An empty string counts as absent, so a value held
+     * in state needs no guard at the call site.
+     */
+    eyebrow?: ReactNode;
+    /** Heading. A plain string renders as `Headline sm`. */
+    title?: ReactNode;
+    /** Supporting copy under the title. */
+    description?: ReactNode;
+    /**
+     * Render the description in the strong (medium) weight — the family spec.
+     * Defaults to `true`. Pass `false` for plain body copy, e.g. when the copy
+     * embeds an email (or other span) that should be the emphasized part.
+     */
+    descriptionStrong?: boolean;
+    /** Illustration above the title, `IconName` or node. */
+    illustration?: ReactNode | IconName;
+    /**
+     * Primary action. With only one action the button spans the full row; with
+     * both, secondary sits left and they split the row evenly.
+     */
+    primary?: ActionBarAction;
+    /** Optional secondary (left) action. */
+    secondary?: ActionBarAction;
+    /**
+     * Action arrangement, forwarded to ActionBar: `horizontal` (default,
+     * row-splitting) or `vertical` (stacked full-width).
+     */
+    direction?: ActionBarDirection;
+    /** Optional centered footnote row below the actions. */
+    footnote?: ActionBarFootnote;
+    /** Extra content between the header block and the actions (e.g. bricks). */
+    children?: ReactNode;
+}

package/es/components/PanelLayout/interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50cy9QYW5lbExheW91dC9pbnRlcmZhY2UuanMiLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMiLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvaW50ZXJmYWNlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7fTsiXSwibWFwcGluZ3MiOiJBQUFBIiwiaWdub3JlTGlzdCI6W119

package/es/components/PanelLayout/style/PanelLayout.css

@@ -0,0 +1,50 @@
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-panel-layout .om-component-ui-panel-layout-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  align-items: flex-start;
+  width: 100%;
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-illustration {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 0;
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: var(--om-icon-default, #131313);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-back .om-component-ui-icons-wrapper {
+  --icon-color: currentcolor;
+}

package/es/components/PanelLayout/style/css.js

@@ -0,0 +1,2 @@
+import './PanelLayout.css';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxvQkFBb0IiLCJmaWxlIjoiY29tcG9uZW50cy9QYW5lbExheW91dC9zdHlsZS9jc3MuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/PanelLayout/style/index.d.ts

@@ -0,0 +1 @@
+import './PanelLayout.css';

package/es/components/PanelLayout/style/index.js

@@ -0,0 +1,2 @@
+import './PanelLayout.css';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxvQkFBb0IiLCJmaWxlIjoiY29tcG9uZW50cy9QYW5lbExheW91dC9zdHlsZS9pbmRleC5qcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbF0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==