@molecule/app-ui-react 1.0.0

package/dist/components/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"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"}

package/dist/components/Icon.d.ts

@@ -0,0 +1,48 @@
+import React, { type SVGProps } from 'react';
+import { type IconName } from '@molecule/app-icons';
+/**
+ * Props for {@link Icon}.
+ *
+ * Extends `SVGProps<SVGSVGElement>` so callers can pass any SVG / HTML
+ * attribute the underlying `<svg>` accepts, including `data-mol-id`,
+ * `aria-*`, `role`, event handlers, `style`, etc. — without the
+ * component needing to enumerate them.
+ */
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'width' | 'height' | 'viewBox' | 'fill'> {
+    /**
+     * Name of the glyph to look up in the bonded icon set. Typed as
+     * {@link IconName} so a typo fails the type-check instead of throwing at
+     * render time; sets with extra glyphs augment `CustomIconNames` in
+     * `@molecule/app-icons` to widen it.
+     */
+    name: IconName;
+    /** Width and height of the rendered SVG in pixels. Defaults to 20. */
+    size?: number;
+    /** Class name forwarded to the root `<svg>`. */
+    className?: string;
+}
+/**
+ * Renders an SVG glyph looked up by `name` from the bonded
+ * `@molecule/app-icons` set.
+ *
+ * Handles two icon-data shapes returned by the bond:
+ *   1. Pre-rendered SVG markup (`icon.svg`) — injected via
+ *      `dangerouslySetInnerHTML`. The bond is the trust boundary; only
+ *      bond a set that controls its own SVG strings.
+ *   2. Structured paths (`icon.paths`) — rendered as discrete `<path>`
+ *      children, with optional stroke styling forwarded from the icon set.
+ *
+ * Any extra HTML/SVG attribute (e.g. `data-mol-id`, `aria-label`,
+ * `role="img"`, `onClick`) is forwarded to the root `<svg>` via spread.
+ *
+ * Decorative by default: when the caller passes no `aria-label` /
+ * `aria-labelledby` / `role`, the SVG is rendered `aria-hidden` +
+ * `focusable="false"` so screen readers skip it (an unnamed inline SVG is
+ * announced as a stray "image" by some combos). Passing any of those props
+ * opts the icon into the accessibility tree.
+ *
+ * @param props - {@link IconProps}
+ * @returns An `<svg>` element rendering the named glyph.
+ */
+export declare function Icon({ name, size, className, ...rest }: IconProps): React.JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE5D;;;;;;;GAOG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CACxC;IACC;;;;;OAKG;IACH,IAAI,EAAE,QAAQ,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,IAAS,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwD1F"}

package/dist/components/Icon.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getIcon } from '@molecule/app-icons';
+/**
+ * Renders an SVG glyph looked up by `name` from the bonded
+ * `@molecule/app-icons` set.
+ *
+ * Handles two icon-data shapes returned by the bond:
+ *   1. Pre-rendered SVG markup (`icon.svg`) — injected via
+ *      `dangerouslySetInnerHTML`. The bond is the trust boundary; only
+ *      bond a set that controls its own SVG strings.
+ *   2. Structured paths (`icon.paths`) — rendered as discrete `<path>`
+ *      children, with optional stroke styling forwarded from the icon set.
+ *
+ * Any extra HTML/SVG attribute (e.g. `data-mol-id`, `aria-label`,
+ * `role="img"`, `onClick`) is forwarded to the root `<svg>` via spread.
+ *
+ * Decorative by default: when the caller passes no `aria-label` /
+ * `aria-labelledby` / `role`, the SVG is rendered `aria-hidden` +
+ * `focusable="false"` so screen readers skip it (an unnamed inline SVG is
+ * announced as a stray "image" by some combos). Passing any of those props
+ * opts the icon into the accessibility tree.
+ *
+ * @param props - {@link IconProps}
+ * @returns An `<svg>` element rendering the named glyph.
+ */
+export function Icon({ name, size = 20, className, ...rest }) {
+    const icon = getIcon(name);
+    const viewBox = icon.viewBox || '0 0 20 20';
+    // Placed BEFORE {...rest} so an explicit caller aria-hidden/role wins.
+    const decorativeProps = rest['aria-label'] == null && rest['aria-labelledby'] == null && rest.role == null
+        ? { 'aria-hidden': true, focusable: 'false' }
+        : {};
+    if (icon.svg) {
+        return (_jsx("svg", { width: size, height: size, viewBox: viewBox, fill: icon.fill || 'none', className: className, dangerouslySetInnerHTML: { __html: icon.svg }, ...decorativeProps, ...rest }));
+    }
+    const isStroked = !!icon.stroke;
+    return (_jsx("svg", { width: size, height: size, viewBox: viewBox, fill: isStroked ? 'none' : icon.fill || 'currentColor', ...decorativeProps, ...(isStroked
+            ? {
+                stroke: icon.stroke,
+                strokeWidth: icon.strokeWidth,
+                strokeLinecap: icon.strokeLinecap,
+                strokeLinejoin: icon.strokeLinejoin,
+            }
+            : {}), className: className, ...rest, children: icon.paths.map((p, i) => (_jsx("path", { d: p.d, ...(p.fill ? { fill: p.fill } : {}), ...(p.fillRule ? { fillRule: p.fillRule } : {}), ...(p.clipRule ? { clipRule: p.clipRule } : {}), ...(p.opacity !== undefined ? { opacity: p.opacity } : {}) }, i))) }));
+}
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAiB,MAAM,qBAAqB,CAAA;AA2B5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAa;IACrE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,WAAW,CAAA;IAC3C,uEAAuE;IACvE,MAAM,eAAe,GACnB,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;QAChF,CAAC,CAAE,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAY;QACxD,CAAC,CAAC,EAAE,CAAA;IAER,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;QACb,OAAO,CACL,cACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,EACzB,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,KACzC,eAAe,KACf,IAAI,GACR,CACH,CAAA;IACH,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAA;IAE/B,OAAO,CACL,cACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,KAClD,eAAe,KACf,CAAC,SAAS;YACZ,CAAC,CAAC;gBACE,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,cAAc,EAAE,IAAI,CAAC,cAAc;aACpC;YACH,CAAC,CAAC,EAAE,CAAC,EACP,SAAS,EAAE,SAAS,KAChB,IAAI,YAEP,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,eAEE,CAAC,EAAE,CAAC,CAAC,CAAC,KACF,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAChC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC5C,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC5C,CAAC,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IALtD,CAAC,CAMN,CACH,CAAC,GACE,CACP,CAAA;AACH,CAAC"}

package/dist/components/Input.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Input component.
+ *
+ * @module
+ */
+import React from 'react';
+import type { InputProps } from '@molecule/app-ui';
+/**
+ * Input component.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAKlD;;GAEG;AACH,eAAO,MAAM,KAAK,qFA+GjB,CAAA"}

package/dist/components/Input.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Input component.
+ *
+ * @module
+ */
+import { forwardRef, useId } from 'react';
+import { t } from '@molecule/app-i18n';
+import { getClassMap } from '@molecule/app-ui';
+import { renderIcon } from '../utilities/renderIcon.js';
+/**
+ * Input component.
+ */
+export const Input = forwardRef(({ type = 'text', size = 'md', align, label, error, hint, leftElement, rightElement, clearable, onClear, clearLabel, className, style, testId, disabled, required, value, defaultValue, placeholder, name, id, onChange, onFocus, onBlur, ...rest }, ref) => {
+    const cm = getClassMap();
+    // Fall back to a generated id so label htmlFor / aria-describedby never
+    // point at `undefined-error` (which also collides across multiple
+    // id-less inputs on the same page).
+    const generatedId = useId();
+    const inputId = id || name || generatedId;
+    const inputClasses = cm.cn(cm.input({ error: !!error, size, align }), !!leftElement && cm.inputPadLeft, !!(rightElement || clearable) && cm.inputPadRight, className);
+    return (_jsxs("div", { className: cm.inputWrapper, children: [label && (_jsx("label", { htmlFor: inputId, className: cm.cn(cm.label({ required: !!required }), cm.labelBlock), children: label })), _jsxs("div", { className: cm.inputInner, children: [!!leftElement && (_jsx("div", { className: cm.inputLeftElement, children: leftElement })), _jsx("input", { ref: ref, type: type, id: inputId, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, required: required, "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined, className: inputClasses, style: style, "data-testid": testId, onChange: onChange, onFocus: onFocus, onBlur: onBlur, ...rest }), (rightElement || (clearable && value)) && (_jsx("div", { className: cm.inputRightElement, children: clearable && value ? (_jsx("button", { type: "button", onClick: onClear, className: cm.inputClearButton, "aria-label": clearLabel ?? t('ui.input.clear', undefined, { defaultValue: 'Clear' }), children: renderIcon('x-mark', cm.iconSm) })) : (_jsx("span", { className: cm.textMuted, children: rightElement })) }))] }), error && (_jsx("p", { id: `${inputId}-error`, className: cm.formError, children: error })), hint && !error && (_jsx("p", { id: `${inputId}-hint`, className: cm.formHint, children: hint }))] }));
+});
+Input.displayName = 'Input';
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}

package/dist/components/LanguagePicker.d.ts

@@ -0,0 +1,60 @@
+import { type ButtonHTMLAttributes, type JSX, type ReactNode } from 'react';
+import type { IconName } from '@molecule/app-icons';
+/**
+ * Props for {@link LanguagePicker}.
+ *
+ * Extends standard `<button>` attributes so callers can pass any extra
+ * `data-*`, `aria-*`, event handler, or `style` prop without forking the
+ * component. The named props let apps customize the trigger label, icon,
+ * size, and modal heading without spreading attribute concerns.
+ */
+export interface LanguagePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'onClick' | 'type' | 'children'> {
+    /** i18n key for the trigger button label / aria-label. Defaults to `'footer.language'`. */
+    labelKey?: string;
+    /** Fallback label if the i18n key is missing. Defaults to `'Language'`. */
+    labelDefault?: string;
+    /** i18n key for the modal title. Defaults to `'languagePicker.modalTitle'`. */
+    modalTitleKey?: string;
+    /** Fallback modal title if the i18n key is missing. Defaults to `'Choose language'`. */
+    modalTitleDefault?: string;
+    /** Icon glyph to render before the current locale name. Defaults to `'globe'`. */
+    icon?: IconName;
+    /** Pixel size for the rendered icon. Defaults to `16`. */
+    iconSize?: number;
+    /**
+     * What to render inside the trigger button.
+     *
+     * - `'name'` — globe icon + current locale's native name (e.g. `🌐 English`).
+     *   This is the default; matches the molecule-dev footer pattern.
+     * - `'code'` — globe icon + lowercase locale code (e.g. `🌐 en`). Useful in
+     *   tight chrome where the long native name (e.g. "Bahasa Indonesia") would wrap.
+     * - `'icon'` — globe icon only. Useful in icon-bar headers.
+     */
+    display?: 'name' | 'code' | 'icon';
+    /** Optional className appended to the trigger button. */
+    className?: string;
+    /** Optional render override: receives `{ open }` and replaces the default trigger. */
+    renderTrigger?: (open: () => void) => ReactNode;
+}
+/**
+ * Globe-icon button that opens a modal grid of every locale registered
+ * with the bonded i18n provider. Clicking a locale calls `setLocale`
+ * and closes the modal.
+ *
+ * Reads `locale`, `setLocale`, and `locales` from {@link useTranslation},
+ * so the list of choices stays in sync with whatever set the
+ * `setupI18nDefault` (or any other i18n setup) registered. No hardcoded
+ * language list — adding a locale to the i18n bond adds it to the picker.
+ *
+ * Molecule-convention defaults baked in:
+ *
+ * - `data-mol-id="language-picker-trigger"` on the trigger button
+ * - `data-mol-id="language-picker-modal"` on the modal dialog
+ * - `data-mol-id="language-picker-option-<code>"` on each locale button
+ * - `data-active` on the currently-selected locale button
+ * - `aria-label` from the `footer.language` i18n key (default `"Language"`)
+ *
+ * @param props - {@link LanguagePickerProps}
+ */
+export declare function LanguagePicker({ labelKey, labelDefault, modalTitleKey, modalTitleDefault, icon, iconSize, display, className, renderTrigger, ...rest }?: LanguagePickerProps): JSX.Element;
+//# sourceMappingURL=LanguagePicker.d.ts.map

package/dist/components/LanguagePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguagePicker.d.ts","sourceRoot":"","sources":["../../src/components/LanguagePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAErF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAOnD;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAC/C;IACC,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,wFAAwF;IACxF,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kFAAkF;IAClF,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IAClC,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sFAAsF;IACtF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,IAAI,KAAK,SAAS,CAAA;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAA4B,EAC5B,YAAyB,EACzB,aAA2C,EAC3C,iBAAqC,EACrC,IAAc,EACd,QAAa,EACb,OAAgB,EAChB,SAAS,EACT,aAAa,EACb,GAAG,IAAI,EACR,GAAE,mBAAwB,GAAG,GAAG,CAAC,OAAO,CA6DxC"}

package/dist/components/LanguagePicker.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Icon } from './Icon.js';
+import { Modal } from './Modal.js';
+/**
+ * Globe-icon button that opens a modal grid of every locale registered
+ * with the bonded i18n provider. Clicking a locale calls `setLocale`
+ * and closes the modal.
+ *
+ * Reads `locale`, `setLocale`, and `locales` from {@link useTranslation},
+ * so the list of choices stays in sync with whatever set the
+ * `setupI18nDefault` (or any other i18n setup) registered. No hardcoded
+ * language list — adding a locale to the i18n bond adds it to the picker.
+ *
+ * Molecule-convention defaults baked in:
+ *
+ * - `data-mol-id="language-picker-trigger"` on the trigger button
+ * - `data-mol-id="language-picker-modal"` on the modal dialog
+ * - `data-mol-id="language-picker-option-<code>"` on each locale button
+ * - `data-active` on the currently-selected locale button
+ * - `aria-label` from the `footer.language` i18n key (default `"Language"`)
+ *
+ * @param props - {@link LanguagePickerProps}
+ */
+export function LanguagePicker({ labelKey = 'footer.language', labelDefault = 'Language', modalTitleKey = 'languagePicker.modalTitle', modalTitleDefault = 'Choose language', icon = 'globe', iconSize = 16, display = 'name', className, renderTrigger, ...rest } = {}) {
+    const cm = getClassMap();
+    const { t, locale, setLocale, locales } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const ariaLabel = t(labelKey, {}, { defaultValue: labelDefault });
+    const current = locales.find((l) => l.code === locale);
+    const currentName = current?.name ?? locale;
+    const triggerLabel = display === 'icon' ? null : display === 'code' ? locale : currentName;
+    return (_jsxs(_Fragment, { children: [renderTrigger ? (renderTrigger(() => setOpen(true))) : (_jsxs("button", { type: "button", "data-mol-id": "language-picker-trigger", "aria-label": ariaLabel, onClick: () => setOpen(true), className: cm.cn(cm.languagePickerTrigger, className), ...rest, children: [_jsx(Icon, { name: icon, size: iconSize }), triggerLabel != null ? _jsx("span", { children: triggerLabel }) : null] })), _jsx(Modal, { open: open, onClose: () => setOpen(false), title: t(modalTitleKey, {}, { defaultValue: modalTitleDefault }), size: "lg", "data-mol-id": "language-picker-modal", children: _jsx("div", { className: cm.languageGrid, children: [...locales]
+                        .sort((a, b) => a.name.localeCompare(b.name))
+                        .map((l) => {
+                        const active = l.code === locale;
+                        return (_jsx("button", { type: "button", "data-mol-id": `language-picker-option-${l.code}`, "data-active": active || undefined, "aria-pressed": active, onClick: async () => {
+                                await setLocale(l.code);
+                                setOpen(false);
+                            }, className: active ? cm.languageActive : cm.languageOption, children: l.name }, l.code));
+                    }) }) })] }));
+}
+//# sourceMappingURL=LanguagePicker.js.map

package/dist/components/LanguagePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguagePicker.js","sourceRoot":"","sources":["../../src/components/LanguagePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/Layout.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Layout components.
+ *
+ * @module
+ */
+import React from 'react';
+import type { ContainerProps, FlexProps, GridProps, SpacerProps } from '@molecule/app-ui';
+/**
+ * Container component.
+ */
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Flex container component.
+ */
+export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Grid container component.
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Spacer component.
+ */
+export declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAQ,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAK/F;;GAEG;AACH,eAAO,MAAM,SAAS,uFAiCrB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,kFAkEhB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,kFA2ChB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,MAAM,oFAoClB,CAAA"}

package/dist/components/Layout.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Layout components.
+ *
+ * @module
+ */
+import { forwardRef } from 'react';
+import { getClassMap } from '@molecule/app-ui';
+// spacerSizeMap removed — use cm.spacer({ size, horizontal }) instead
+/**
+ * Container component.
+ */
+export const Container = forwardRef(({ children, maxWidth = 'lg', centered = true, paddingX: _paddingX, className, style, testId, ...rest }, ref) => {
+    const cm = getClassMap();
+    const containerClasses = cm.cn(cm.container({ size: maxWidth }), centered && cm.mxAuto, className);
+    return (_jsx("div", { ref: ref, className: containerClasses, style: style, "data-testid": testId, ...rest, children: children }));
+});
+Container.displayName = 'Container';
+/**
+ * Flex container component.
+ */
+export const Flex = forwardRef(({ children, direction = 'row', justify, align, wrap, gap, className, style, testId, onClick, ...rest }, ref) => {
+    const cm = getClassMap();
+    // Map direction names to classMap API ('column' -> 'col', etc.)
+    const dirMap = {
+        row: 'row',
+        column: 'col',
+        'row-reverse': 'row-reverse',
+        'column-reverse': 'col-reverse',
+    };
+    const cmDirection = dirMap[direction] || 'row';
+    // Map gap to classMap accepted values
+    const cmGap = typeof gap === 'string' && ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(gap)
+        ? gap
+        : undefined;
+    const flexClasses = cm.cn(cm.flex({
+        direction: cmDirection,
+        align: align,
+        justify: justify,
+        wrap: wrap,
+        gap: cmGap,
+    }), className);
+    // If gap is a number or non-standard string, use inline style
+    const gapStyle = typeof gap === 'number'
+        ? { gap }
+        : typeof gap === 'string' && !['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(gap)
+            ? { gap }
+            : undefined;
+    return (_jsx("div", { ref: ref, className: flexClasses, style: { ...style, ...gapStyle }, "data-testid": testId, onClick: onClick, ...rest, children: children }));
+});
+Flex.displayName = 'Flex';
+/**
+ * Grid container component.
+ */
+export const Grid = forwardRef(({ children, columns, rows, gap, columnGap, rowGap, className, style, testId, ...rest }, ref) => {
+    const cm = getClassMap();
+    const cmCols = typeof columns === 'number' ? columns : undefined;
+    const cmGap = typeof gap === 'string' && ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(gap)
+        ? gap
+        : undefined;
+    const gridClasses = cm.cn(cm.grid({ cols: cmCols, gap: cmGap }), className);
+    const gridStyle = {
+        ...style,
+        gridTemplateColumns: typeof columns === 'string' ? columns : undefined,
+        gridTemplateRows: typeof rows === 'string' ? rows : undefined,
+        gap: typeof gap === 'number'
+            ? gap
+            : typeof gap === 'string' && !['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(gap)
+                ? gap
+                : undefined,
+        columnGap: typeof columnGap === 'number'
+            ? columnGap
+            : typeof columnGap === 'string'
+                ? columnGap
+                : undefined,
+        rowGap: typeof rowGap === 'number' ? rowGap : typeof rowGap === 'string' ? rowGap : undefined,
+    };
+    return (_jsx("div", { ref: ref, className: gridClasses, style: gridStyle, "data-testid": testId, ...rest, children: children }));
+});
+Grid.displayName = 'Grid';
+/**
+ * Spacer component.
+ */
+export const Spacer = forwardRef(({ size = 'md', horizontal, className, style, testId, ...rest }, ref) => {
+    const cm = getClassMap();
+    const isNamedSize = typeof size === 'string' && ['xs', 'sm', 'md', 'lg', 'xl'].includes(size);
+    const spacerClasses = cm.cn(isNamedSize
+        ? cm.spacer({ size: size, horizontal: !!horizontal })
+        : horizontal
+            ? cm.displayInlineBlock
+            : cm.displayBlock, className);
+    const sizeStyle = typeof size === 'number'
+        ? horizontal
+            ? { width: size, height: '1px' }
+            : { height: size, width: '1px' }
+        : typeof size === 'string' && !isNamedSize
+            ? horizontal
+                ? { width: size }
+                : { height: size }
+            : undefined;
+    return (_jsx("div", { ref: ref, className: spacerClasses, style: { ...style, ...sizeStyle }, "data-testid": testId, ...rest }));
+});
+Spacer.displayName = 'Spacer';
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/components/Layout.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,sEAAsE;AAEtE;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,IAAI,EACf,QAAQ,EAAE,SAAS,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,MAAM,gBAAgB,GAAG,EAAE,CAAC,EAAE,CAC5B,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,QAAsD,EAAE,CAAC,EAC9E,QAAQ,IAAI,EAAE,CAAC,MAAM,EACrB,SAAS,CACV,CAAA;IAED,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,KAAK,iBACC,MAAM,KACd,IAA6C,YAEjD,QAA2B,GACxB,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAExB,gEAAgE;IAChE,MAAM,MAAM,GAAkE;QAC5E,GAAG,EAAE,KAAK;QACV,MAAM,EAAE,KAAK;QACb,aAAa,EAAE,aAAa;QAC5B,gBAAgB,EAAE,aAAa;KAChC,CAAA;IACD,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,KAAK,CAAA;IAE9C,sCAAsC;IACtC,MAAM,KAAK,GACT,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;QAC7E,CAAC,CAAE,GAAiD;QACpD,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CACvB,EAAE,CAAC,IAAI,CAAC;QACN,SAAS,EAAE,WAAW;QACtB,KAAK,EAAE,KAA2B;QAClC,OAAO,EAAE,OAA+B;QACxC,IAAI,EAAE,IAAyB;QAC/B,GAAG,EAAE,KAAK;KACX,CAAC,EACF,SAAS,CACV,CAAA;IAED,8DAA8D;IAC9D,MAAM,QAAQ,GACZ,OAAO,GAAG,KAAK,QAAQ;QACrB,CAAC,CAAC,EAAE,GAAG,EAAE;QACT,CAAC,CAAC,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;YAChF,CAAC,CAAC,EAAE,GAAG,EAAE;YACT,CAAC,CAAC,SAAS,CAAA;IAEjB,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,QAAQ,EAAE,iBACnB,MAAM,EACnB,OAAO,EAAE,OAA6D,KACjE,IAA6C,YAEjD,QAA2B,GACxB,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9F,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAExB,MAAM,MAAM,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAA;IAChE,MAAM,KAAK,GACT,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;QAC7E,CAAC,CAAE,GAAiD;QACpD,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;IAE3E,MAAM,SAAS,GAAwB;QACrC,GAAG,KAAK;QACR,mBAAmB,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACtE,gBAAgB,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC7D,GAAG,EACD,OAAO,GAAG,KAAK,QAAQ;YACrB,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;gBAChF,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,SAAS;QACjB,SAAS,EACP,OAAO,SAAS,KAAK,QAAQ;YAC3B,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,OAAO,SAAS,KAAK,QAAQ;gBAC7B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,SAAS;QACjB,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;KAC9F,CAAA;IAED,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,SAAS,iBACH,MAAM,KACd,IAA6C,YAEjD,QAA2B,GACxB,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAExB,MAAM,WAAW,GAAG,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE7F,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,CACzB,WAAW;QACT,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,IAAY,EAAE,UAAU,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC;QAC7D,CAAC,CAAC,UAAU;YACV,CAAC,CAAC,EAAE,CAAC,kBAAkB;YACvB,CAAC,CAAC,EAAE,CAAC,YAAY,EACrB,SAAS,CACV,CAAA;IAED,MAAM,SAAS,GACb,OAAO,IAAI,KAAK,QAAQ;QACtB,CAAC,CAAC,UAAU;YACV,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;YAChC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;QAClC,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,UAAU;gBACV,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;gBACjB,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE;YACpB,CAAC,CAAC,SAAS,CAAA;IAEjB,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,iBACpB,MAAM,KACd,IAA6C,GAClD,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}

package/dist/components/Modal.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Modal component.
+ *
+ * @module
+ */
+import React from 'react';
+import type { ModalProps } from '@molecule/app-ui';
+/**
+ * Modal component.
+ *
+ * Renders into a `document.body` portal. Forwards any extra `data-*` or
+ * `aria-*` props on the rest spread to the inner dialog `<div>` (e.g.
+ * callers commonly pass `data-mol-id="some-modal"` for AI-agent / e2e
+ * selectors).
+ *
+ * The internal close button always carries `data-mol-id="modal-close"`
+ * as the molecule-convention default for the one fixed interactive
+ * element inside the chrome.
+ *
+ * Implements the WAI-ARIA APG dialog (modal) pattern: on open, focus moves
+ * to the first focusable element inside the dialog (or the dialog itself
+ * when it has none); Tab/Shift+Tab are trapped inside the dialog; on close,
+ * focus returns to whatever was focused before the dialog opened. Stacked
+ * dialogs (a confirm above a drawer) each register on a module-level stack —
+ * Escape and the Tab trap only act for the TOPMOST dialog, and the body
+ * scroll lock is reference-counted so closing one of several open dialogs
+ * never unlocks scroll behind the ones still open.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & {
+    'data-mol-id'?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAwD,MAAM,OAAO,CAAA;AAI5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAwFlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,KAAK;oBAA6D,MAAM;wCAkNpF,CAAA"}