@smartsoft001/react 0.0.0-stage → 2.193.0

package/src/lib/components/modal/preset/modal-preset.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartModalPreset = SmartModalPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_names_1 = require("../../../utils/class-names");
+const use_modal_1 = require("../use-modal");
+const preset_classes_1 = require("./preset-classes");
+/**
+ * Styled modal variation (preset). Register it as `components.modal` on
+ * `SmartProvider` to restyle every `<SmartModal>`, or render it directly.
+ *
+ * Preline's Overlay JS plugin is NOT used: open/close is driven by the shared
+ * `open` state; a click on the backdrop itself (not the panel) and Escape on
+ * the document close the modal, as the dismiss button does. Rendered inline
+ * (no portal): the backdrop is `fixed` over the viewport.
+ */
+function SmartModalPreset(props) {
+    const { title, description, actions = [], options, className, children, } = props;
+    const { open, invokeAction, close } = (0, use_modal_1.useModal)(props);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return undefined;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape' || event.key === 'Esc')
+                close();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, close]);
+    if (!open)
+        return null;
+    const variant = options?.variant ?? 'centered';
+    const footerStyle = options?.footerStyle ?? 'default';
+    const withDismiss = Boolean(options?.withDismiss);
+    const onBackdropClick = (event) => {
+        // Only dismiss when the backdrop itself is clicked, not the panel.
+        if (event.target === event.currentTarget) {
+            close();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: preset_classes_1.MODAL_BACKDROP, role: "presentation", onClick: onBackdropClick, children: (0, jsx_runtime_1.jsx)("div", { className: (0, class_names_1.cn)((0, preset_classes_1.getModalWrapperClasses)(variant), className), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, preset_classes_1.getModalPanelClasses)(variant), role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? 'smart-modal-preset-title' : undefined, "aria-label": !title ? (options?.ariaLabel ?? undefined) : undefined, children: [(title || withDismiss) && ((0, jsx_runtime_1.jsxs)("div", { className: preset_classes_1.MODAL_HEADER, children: [title && ((0, jsx_runtime_1.jsx)("h3", { id: "smart-modal-preset-title", className: preset_classes_1.MODAL_TITLE, children: title })), withDismiss && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: preset_classes_1.MODAL_DISMISS, "aria-label": "Close", onClick: close, children: [(0, jsx_runtime_1.jsx)("span", { className: "smart:sr-only", children: "Close" }), (0, jsx_runtime_1.jsxs)("svg", { className: "smart:shrink-0 smart:size-4", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 6 6 18" }), (0, jsx_runtime_1.jsx)("path", { d: "m6 6 12 12" })] })] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: preset_classes_1.MODAL_BODY, children: [description && (0, jsx_runtime_1.jsx)("p", { className: preset_classes_1.MODAL_DESCRIPTION, children: description }), children] }), actions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, preset_classes_1.getModalFooterClasses)(variant, footerStyle), children: actions.map((action) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, preset_classes_1.getModalActionClasses)(action.variant), onClick: () => invokeAction(action.id), children: action.label }, action.id))) }))] }) }) }));
+}
+//# sourceMappingURL=modal-preset.js.map

package/src/lib/components/modal/preset/modal-preset.js.map

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

package/src/lib/components/modal/preset/preset-classes.d.ts

@@ -0,0 +1,19 @@
+import { SmartModalActionVariant, SmartModalFooterStyle, SmartModalVariant } from '../../../models';
+/**
+ * Class recipes for the styled modal preset.
+ *
+ * Preline semantic tokens are translated to `smart:`-prefixed vanilla Tailwind
+ * palette classes with explicit `dark:` variants (Preline is not installed in
+ * the fork). All symbols are prefixed with `Modal` to stay collision-free once
+ * the library is barrelled with `export *`.
+ */
+export declare const MODAL_BACKDROP: string;
+export declare const MODAL_HEADER: string;
+export declare const MODAL_TITLE: string;
+export declare const MODAL_DISMISS: string;
+export declare const MODAL_BODY: string;
+export declare const MODAL_DESCRIPTION: string;
+export declare function getModalWrapperClasses(variant: SmartModalVariant): string;
+export declare function getModalPanelClasses(variant: SmartModalVariant): string;
+export declare function getModalFooterClasses(variant: SmartModalVariant, footerStyle: SmartModalFooterStyle): string;
+export declare function getModalActionClasses(variant?: SmartModalActionVariant): string;

package/src/lib/components/modal/preset/preset-classes.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MODAL_DESCRIPTION = exports.MODAL_BODY = exports.MODAL_DISMISS = exports.MODAL_TITLE = exports.MODAL_HEADER = exports.MODAL_BACKDROP = void 0;
+exports.getModalWrapperClasses = getModalWrapperClasses;
+exports.getModalPanelClasses = getModalPanelClasses;
+exports.getModalFooterClasses = getModalFooterClasses;
+exports.getModalActionClasses = getModalActionClasses;
+/**
+ * Class recipes for the styled modal preset.
+ *
+ * Preline semantic tokens are translated to `smart:`-prefixed vanilla Tailwind
+ * palette classes with explicit `dark:` variants (Preline is not installed in
+ * the fork). All symbols are prefixed with `Modal` to stay collision-free once
+ * the library is barrelled with `export *`.
+ */
+// Full-screen scrollable backdrop that hosts the modal panel.
+exports.MODAL_BACKDROP = [
+    'smart:fixed',
+    'smart:inset-0',
+    'smart:z-[80]',
+    'smart:overflow-x-hidden',
+    'smart:overflow-y-auto',
+    'smart:bg-gray-900/50',
+    'smart:dark:bg-gray-900/80',
+].join(' ');
+const WRAPPER_BASE = ['smart:m-3', 'smart:sm:mx-auto'].join(' ');
+const WRAPPER_WIDTH_BY_VARIANT = {
+    centered: 'smart:sm:max-w-lg smart:sm:w-full',
+    wide: 'smart:lg:max-w-4xl smart:lg:w-full',
+    alert: 'smart:sm:max-w-md smart:sm:w-full',
+    'left-aligned-buttons': 'smart:sm:max-w-lg smart:sm:w-full',
+};
+// Vertically-centered variants need the flex + min-height treatment.
+const WRAPPER_CENTERED = [
+    'smart:min-h-[calc(100%-56px)]',
+    'smart:flex',
+    'smart:items-center',
+].join(' ');
+const PANEL_BASE = [
+    'smart:flex',
+    'smart:flex-col',
+    'smart:bg-white',
+    'smart:dark:bg-gray-800',
+    'smart:border',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-700',
+    'smart:shadow-2xs',
+    'smart:rounded-xl',
+    'smart:pointer-events-auto',
+].join(' ');
+exports.MODAL_HEADER = [
+    'smart:flex',
+    'smart:justify-between',
+    'smart:items-center',
+    'smart:py-3',
+    'smart:px-4',
+    'smart:border-b',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-700',
+].join(' ');
+exports.MODAL_TITLE = [
+    'smart:font-semibold',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+exports.MODAL_DISMISS = [
+    'smart:size-8',
+    'smart:inline-flex',
+    'smart:justify-center',
+    'smart:items-center',
+    'smart:gap-x-2',
+    'smart:rounded-full',
+    'smart:bg-gray-100',
+    'smart:dark:bg-gray-700',
+    'smart:border',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-600',
+    'smart:text-gray-800',
+    'smart:dark:text-gray-200',
+    'smart:hover:bg-gray-200',
+    'smart:dark:hover:bg-gray-600',
+    'smart:focus:outline-none',
+    'smart:disabled:opacity-50',
+    'smart:disabled:pointer-events-none',
+].join(' ');
+exports.MODAL_BODY = ['smart:p-4', 'smart:overflow-y-auto'].join(' ');
+exports.MODAL_DESCRIPTION = [
+    'smart:mt-1',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const FOOTER_BASE = [
+    'smart:flex',
+    'smart:items-center',
+    'smart:gap-x-2',
+    'smart:py-3',
+    'smart:px-4',
+    'smart:border-t',
+    'smart:border-gray-200',
+    'smart:dark:border-gray-700',
+].join(' ');
+const FOOTER_GRAY = [
+    'smart:bg-gray-50',
+    'smart:dark:bg-gray-800/50',
+    'smart:rounded-b-xl',
+].join(' ');
+const ACTION_BASE = [
+    'smart:py-2',
+    'smart:px-3',
+    'smart:inline-flex',
+    'smart:items-center',
+    'smart:gap-x-2',
+    'smart:text-sm',
+    'smart:font-medium',
+    'smart:rounded-lg',
+    'smart:focus:outline-none',
+    'smart:disabled:opacity-50',
+    'smart:disabled:pointer-events-none',
+].join(' ');
+const ACTION_BY_VARIANT = {
+    primary: 'smart:bg-blue-600 smart:dark:bg-blue-500 smart:border smart:border-blue-600 smart:dark:border-blue-500 smart:text-white smart:hover:bg-blue-700 smart:dark:hover:bg-blue-600',
+    secondary: 'smart:bg-white smart:dark:bg-gray-800 smart:border smart:border-gray-200 smart:dark:border-gray-700 smart:text-gray-800 smart:dark:text-gray-200 smart:shadow-2xs smart:hover:bg-gray-100 smart:dark:hover:bg-gray-700',
+    danger: 'smart:bg-red-600 smart:dark:bg-red-500 smart:border smart:border-red-600 smart:dark:border-red-500 smart:text-white smart:hover:bg-red-700 smart:dark:hover:bg-red-600',
+};
+function isCentered(variant) {
+    return variant === 'centered' || variant === 'alert';
+}
+function getModalWrapperClasses(variant) {
+    return [
+        WRAPPER_BASE,
+        WRAPPER_WIDTH_BY_VARIANT[variant],
+        isCentered(variant) ? WRAPPER_CENTERED : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+function getModalPanelClasses(variant) {
+    // Centered wrappers stretch the panel to the wrapper width.
+    return [PANEL_BASE, isCentered(variant) ? 'smart:w-full' : '']
+        .filter(Boolean)
+        .join(' ');
+}
+function getModalFooterClasses(variant, footerStyle) {
+    const alignment = variant === 'left-aligned-buttons'
+        ? 'smart:justify-start'
+        : 'smart:justify-end';
+    return [FOOTER_BASE, alignment, footerStyle === 'gray' ? FOOTER_GRAY : '']
+        .filter(Boolean)
+        .join(' ');
+}
+function getModalActionClasses(variant = 'primary') {
+    return `${ACTION_BASE} ${ACTION_BY_VARIANT[variant]}`;
+}
+//# sourceMappingURL=preset-classes.js.map

package/src/lib/components/modal/preset/preset-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-classes.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/modal/preset/preset-classes.ts"],"names":[],"mappings":"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"}

package/src/lib/components/modal/standard/modal-standard.d.ts

@@ -0,0 +1,7 @@
+import { SmartModalProps } from '../modal.types';
+/**
+ * The default modal rendering (`<smart-modal-standard>`): a native `<dialog>`
+ * always in the DOM, shown through its `open` attribute (not `showModal()`).
+ * Its native `close` event closes the modal as well.
+ */
+export declare function SmartModalStandard(props: SmartModalProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/modal/standard/modal-standard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartModalStandard = SmartModalStandard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_modal_1 = require("../use-modal");
+/**
+ * The default modal rendering (`<smart-modal-standard>`): a native `<dialog>`
+ * always in the DOM, shown through its `open` attribute (not `showModal()`).
+ * Its native `close` event closes the modal as well.
+ */
+function SmartModalStandard(props) {
+    const { title, description, actions = [], options, className, children, } = props;
+    const { open, invokeAction, close } = (0, use_modal_1.useModal)(props);
+    return ((0, jsx_runtime_1.jsxs)("dialog", { open: open, className: className, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'smart-modal-title' : undefined, "aria-label": !title ? (options?.ariaLabel ?? undefined) : undefined, onClose: close, children: [options?.withDismiss && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "smart-modal-dismiss", "aria-label": "Close", onClick: close, children: "\u00D7" })), title && (0, jsx_runtime_1.jsx)("h2", { id: "smart-modal-title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { children: description }), children, actions.length > 0 && ((0, jsx_runtime_1.jsx)("footer", { children: actions.map((action) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-variant": action.variant ?? 'primary', onClick: () => invokeAction(action.id), children: action.label }, action.id))) }))] }));
+}
+//# sourceMappingURL=modal-standard.js.map

package/src/lib/components/modal/standard/modal-standard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-standard.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/modal/standard/modal-standard.tsx"],"names":[],"mappings":";;AAQA,gDAkDC;;AAzDD,4CAAwC;AAExC;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,KAAsB;IACvD,MAAM,EACJ,KAAK,EACL,WAAW,EACX,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAQ,EAAC,KAAK,CAAC,CAAC;IAEtD,OAAO,CACL,oCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACA,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,gBAC5C,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAClE,OAAO,EAAE,KAAK,aAEb,OAAO,EAAE,WAAW,IAAI,CACvB,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,gBACpB,OAAO,EAClB,OAAO,EAAE,KAAK,uBAGP,CACV,EACA,KAAK,IAAI,+BAAI,EAAE,EAAC,mBAAmB,YAAE,KAAK,GAAM,EAChD,WAAW,IAAI,wCAAI,WAAW,GAAK,EACnC,QAAQ,EACR,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,6CACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,mCAEE,IAAI,EAAC,QAAQ,kBACC,MAAM,CAAC,OAAO,IAAI,SAAS,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,YAErC,MAAM,CAAC,KAAK,IALR,MAAM,CAAC,EAAE,CAMP,CACV,CAAC,GACK,CACV,IACM,CACV,CAAC;AACJ,CAAC"}

package/src/lib/components/modal/use-modal.d.ts

@@ -0,0 +1,14 @@
+import { SmartModalProps } from './modal.types';
+/**
+ * The behaviour every modal variant shares (the Angular
+ * `ModalBaseComponent`): the `open` state, controlled through `open` /
+ * `onOpenChange` or kept internally from `defaultOpen`; `invokeAction(id)`,
+ * which reports `onActionClick` without closing, and `close()`, which hides
+ * the modal and reports `onClosed`.
+ */
+export declare function useModal({ open: openProp, defaultOpen, onOpenChange, onActionClick, onClosed, }: SmartModalProps): {
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    invokeAction: (actionId: string) => void | undefined;
+    close: () => void;
+};

package/src/lib/components/modal/use-modal.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModal = useModal;
+const react_1 = require("react");
+/**
+ * The behaviour every modal variant shares (the Angular
+ * `ModalBaseComponent`): the `open` state, controlled through `open` /
+ * `onOpenChange` or kept internally from `defaultOpen`; `invokeAction(id)`,
+ * which reports `onActionClick` without closing, and `close()`, which hides
+ * the modal and reports `onClosed`.
+ */
+function useModal({ open: openProp, defaultOpen = false, onOpenChange, onActionClick, onClosed, }) {
+    const [innerOpen, setInnerOpen] = (0, react_1.useState)(defaultOpen);
+    const controlled = openProp !== undefined;
+    const open = controlled ? openProp : innerOpen;
+    const setOpen = (0, react_1.useCallback)((value) => {
+        if (value === open)
+            return;
+        if (!controlled)
+            setInnerOpen(value);
+        onOpenChange?.(value);
+    }, [open, controlled, onOpenChange]);
+    const invokeAction = (0, react_1.useCallback)((actionId) => onActionClick?.({ actionId }), [onActionClick]);
+    const close = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        onClosed?.();
+    }, [setOpen, onClosed]);
+    return { open, setOpen, invokeAction, close };
+}
+//# sourceMappingURL=use-modal.js.map

package/src/lib/components/modal/use-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal.js","sourceRoot":"","sources":["../../../../../../../../packages/shared/react/src/lib/components/modal/use-modal.ts"],"names":[],"mappings":";;AAWA,4BA+BC;AA1CD,iCAA8C;AAI9C;;;;;;GAMG;AACH,SAAgB,QAAQ,CAAC,EACvB,IAAI,EAAE,QAAQ,EACd,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,aAAa,EACb,QAAQ,GACQ;IAChB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,QAAQ,KAAK,SAAS,CAAC;IAC1C,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,KAAc,EAAE,EAAE;QACjB,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO;QAC3B,IAAI,CAAC,UAAU;YAAE,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EACD,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,CAAC,CACjC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,QAAgB,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EACnD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;AAChD,CAAC"}

package/src/lib/components/multi-column-layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from './multi-column-layout';
+export * from './multi-column-layout.types';
+export * from './preset/multi-column-layout-preset';
+export * from './preset/preset-classes';
+export * from './standard/multi-column-layout-standard';

package/src/lib/components/multi-column-layout/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./multi-column-layout"), exports);
+tslib_1.__exportStar(require("./multi-column-layout.types"), exports);
+tslib_1.__exportStar(require("./preset/multi-column-layout-preset"), exports);
+tslib_1.__exportStar(require("./preset/preset-classes"), exports);
+tslib_1.__exportStar(require("./standard/multi-column-layout-standard"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/components/multi-column-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/shared/react/src/lib/components/multi-column-layout/index.ts"],"names":[],"mappings":";;;AAAA,gEAAsC;AACtC,sEAA4C;AAC5C,8EAAoD;AACpD,kEAAwC;AACxC,kFAAwD"}

package/src/lib/components/multi-column-layout/multi-column-layout.d.ts

@@ -0,0 +1,9 @@
+import { SmartMultiColumnLayoutProps } from './multi-column-layout.types';
+/**
+ * `<smart-multi-column-layout>`: renders the implementation registered as
+ * `components['multi-column-layout']` on `SmartProvider` (the Angular
+ * `MULTI_COLUMN_LAYOUT_STANDARD_COMPONENT_TOKEN`),
+ * `SmartMultiColumnLayoutStandard` by default. `children` are passed through
+ * to the implementation.
+ */
+export declare function SmartMultiColumnLayout(props: SmartMultiColumnLayoutProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/multi-column-layout/multi-column-layout.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartMultiColumnLayout = SmartMultiColumnLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const multi_column_layout_standard_1 = require("./standard/multi-column-layout-standard");
+const hooks_1 = require("../../providers/hooks");
+/**
+ * `<smart-multi-column-layout>`: renders the implementation registered as
+ * `components['multi-column-layout']` on `SmartProvider` (the Angular
+ * `MULTI_COLUMN_LAYOUT_STANDARD_COMPONENT_TOKEN`),
+ * `SmartMultiColumnLayoutStandard` by default. `children` are passed through
+ * to the implementation.
+ */
+function SmartMultiColumnLayout(props) {
+    const Component = (0, hooks_1.useSmartComponent)('multi-column-layout', multi_column_layout_standard_1.SmartMultiColumnLayoutStandard);
+    return (0, jsx_runtime_1.jsx)(Component, { ...props });
+}
+//# sourceMappingURL=multi-column-layout.js.map

package/src/lib/components/multi-column-layout/multi-column-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-layout.js","sourceRoot":"","sources":["../../../../../../../../packages/shared/react/src/lib/components/multi-column-layout/multi-column-layout.tsx"],"names":[],"mappings":";;AAWA,wDAOC;;AAjBD,0FAAyF;AACzF,iDAA0D;AAE1D;;;;;;GAMG;AACH,SAAgB,sBAAsB,CAAC,KAAkC;IACvE,MAAM,SAAS,GAAG,IAAA,yBAAiB,EACjC,qBAAqB,EACrB,6DAA8B,CAC/B,CAAC;IAEF,OAAO,uBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;AAClC,CAAC"}

package/src/lib/components/multi-column-layout/multi-column-layout.types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import { IMultiColumnLayoutOptions } from '../../models';
+export interface SmartMultiColumnLayoutProps {
+    options?: IMultiColumnLayoutOptions;
+    className?: string;
+    /** The main content (the Angular `<ng-content>`). */
+    children?: ReactNode;
+}

package/src/lib/components/multi-column-layout/multi-column-layout.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=multi-column-layout.types.js.map

package/src/lib/components/multi-column-layout/multi-column-layout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-layout.types.js","sourceRoot":"","sources":["../../../../../../../../packages/shared/react/src/lib/components/multi-column-layout/multi-column-layout.types.ts"],"names":[],"mappings":""}

package/src/lib/components/multi-column-layout/preset/multi-column-layout-preset.d.ts

@@ -0,0 +1,15 @@
+import { SmartMultiColumnLayoutProps } from '../multi-column-layout.types';
+/**
+ * Styled multi-column-layout variation (preset). Register it as
+ * `components['multi-column-layout']` on `SmartProvider` to restyle every
+ * `<SmartMultiColumnLayout>`, or render it directly.
+ *
+ * Renders a full-height gray page root, an optional white header zone
+ * (`options.headerTpl`, or `options.title` as fallback), and a flex row
+ * pairing an optional bordered nav aside (`options.navTpl`), a gray main
+ * region with `children` and an optional bordered secondary aside
+ * (`options.secondaryTpl`). `options.width` toggles the main container between
+ * constrained (`max-w-7xl`) and full width (default); `options.secondaryWidth`
+ * sizes the secondary aside (`sm` by default).
+ */
+export declare function SmartMultiColumnLayoutPreset({ options, className, children, }: SmartMultiColumnLayoutProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/multi-column-layout/preset/multi-column-layout-preset.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartMultiColumnLayoutPreset = SmartMultiColumnLayoutPreset;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_names_1 = require("../../../utils/class-names");
+const preset_classes_1 = require("./preset-classes");
+/**
+ * Styled multi-column-layout variation (preset). Register it as
+ * `components['multi-column-layout']` on `SmartProvider` to restyle every
+ * `<SmartMultiColumnLayout>`, or render it directly.
+ *
+ * Renders a full-height gray page root, an optional white header zone
+ * (`options.headerTpl`, or `options.title` as fallback), and a flex row
+ * pairing an optional bordered nav aside (`options.navTpl`), a gray main
+ * region with `children` and an optional bordered secondary aside
+ * (`options.secondaryTpl`). `options.width` toggles the main container between
+ * constrained (`max-w-7xl`) and full width (default); `options.secondaryWidth`
+ * sizes the secondary aside (`sm` by default).
+ */
+function SmartMultiColumnLayoutPreset({ options, className = '', children, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, class_names_1.cn)((0, preset_classes_1.getMultiColumnLayoutRootClasses)(), className), "data-role": "root", children: [(options?.headerTpl || options?.title) && ((0, jsx_runtime_1.jsx)("header", { className: (0, preset_classes_1.getMultiColumnLayoutHeaderClasses)(), "data-role": "header", children: options.headerTpl ? (options.headerTpl) : ((0, jsx_runtime_1.jsx)("h1", { className: (0, preset_classes_1.getMultiColumnLayoutTitleClasses)(), "data-role": "title", children: options.title })) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, preset_classes_1.getMultiColumnLayoutRowClasses)(), children: [options?.navTpl && ((0, jsx_runtime_1.jsx)("aside", { className: (0, preset_classes_1.getMultiColumnLayoutNavClasses)(), "data-role": "nav", children: options.navTpl })), (0, jsx_runtime_1.jsx)("main", { className: (0, preset_classes_1.getMultiColumnLayoutMainClasses)(), "data-role": "content", children: (0, jsx_runtime_1.jsx)("div", { className: (0, preset_classes_1.getMultiColumnLayoutContentContainerClasses)(options?.width), children: children }) }), options?.secondaryTpl && ((0, jsx_runtime_1.jsx)("aside", { className: (0, preset_classes_1.getMultiColumnLayoutSecondaryClasses)(options.secondaryWidth), "data-role": "secondary", children: options.secondaryTpl }))] })] }));
+}
+//# sourceMappingURL=multi-column-layout-preset.js.map

package/src/lib/components/multi-column-layout/preset/multi-column-layout-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-layout-preset.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/multi-column-layout/preset/multi-column-layout-preset.tsx"],"names":[],"mappings":";;AA0BA,oEAuDC;;AAjFD,4DAAgD;AAEhD,qDAS0B;AAE1B;;;;;;;;;;;;GAYG;AACH,SAAgB,4BAA4B,CAAC,EAC3C,OAAO,EACP,SAAS,GAAG,EAAE,EACd,QAAQ,GACoB;IAC5B,OAAO,CACL,iCACE,SAAS,EAAE,IAAA,gBAAE,EAAC,IAAA,gDAA+B,GAAE,EAAE,SAAS,CAAC,eACjD,MAAM,aAEf,CAAC,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,KAAK,CAAC,IAAI,CACzC,mCACE,SAAS,EAAE,IAAA,kDAAiC,GAAE,eACpC,QAAQ,YAEjB,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CACnB,OAAO,CAAC,SAAS,CAClB,CAAC,CAAC,CAAC,CACF,+BACE,SAAS,EAAE,IAAA,iDAAgC,GAAE,eACnC,OAAO,YAEhB,OAAO,CAAC,KAAK,GACX,CACN,GACM,CACV,EACD,iCAAK,SAAS,EAAE,IAAA,+CAA8B,GAAE,aAC7C,OAAO,EAAE,MAAM,IAAI,CAClB,kCAAO,SAAS,EAAE,IAAA,+CAA8B,GAAE,eAAY,KAAK,YAChE,OAAO,CAAC,MAAM,GACT,CACT,EACD,iCAAM,SAAS,EAAE,IAAA,gDAA+B,GAAE,eAAY,SAAS,YACrE,gCACE,SAAS,EAAE,IAAA,4DAA2C,EACpD,OAAO,EAAE,KAAK,CACf,YAEA,QAAQ,GACL,GACD,EACN,OAAO,EAAE,YAAY,IAAI,CACxB,kCACE,SAAS,EAAE,IAAA,qDAAoC,EAC7C,OAAO,CAAC,cAAc,CACvB,eACS,WAAW,YAEpB,OAAO,CAAC,YAAY,GACf,CACT,IACG,IACF,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/multi-column-layout/preset/preset-classes.d.ts

@@ -0,0 +1,9 @@
+import { SmartMultiColumnLayoutSecondaryWidth, SmartMultiColumnLayoutWidth } from '../../../models';
+export declare function getMultiColumnLayoutRootClasses(): string;
+export declare function getMultiColumnLayoutHeaderClasses(): string;
+export declare function getMultiColumnLayoutTitleClasses(): string;
+export declare function getMultiColumnLayoutRowClasses(): string;
+export declare function getMultiColumnLayoutNavClasses(): string;
+export declare function getMultiColumnLayoutMainClasses(): string;
+export declare function getMultiColumnLayoutContentContainerClasses(width: SmartMultiColumnLayoutWidth | undefined): string;
+export declare function getMultiColumnLayoutSecondaryClasses(secondaryWidth: SmartMultiColumnLayoutSecondaryWidth | undefined): string;

package/src/lib/components/multi-column-layout/preset/preset-classes.js

@@ -0,0 +1,102 @@
+"use strict";
+// Preset class recipes for the multi-column-layout preset.
+// Every utility is `smart:`-prefixed (Tailwind v4 `prefix(smart)`), and every
+// color carries an explicit `dark:` variant so the same template covers both
+// light and dark modes. Surfaces mirror the stacked-layout and sidebar-layout
+// presets: white header and column asides over a gray page body.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMultiColumnLayoutRootClasses = getMultiColumnLayoutRootClasses;
+exports.getMultiColumnLayoutHeaderClasses = getMultiColumnLayoutHeaderClasses;
+exports.getMultiColumnLayoutTitleClasses = getMultiColumnLayoutTitleClasses;
+exports.getMultiColumnLayoutRowClasses = getMultiColumnLayoutRowClasses;
+exports.getMultiColumnLayoutNavClasses = getMultiColumnLayoutNavClasses;
+exports.getMultiColumnLayoutMainClasses = getMultiColumnLayoutMainClasses;
+exports.getMultiColumnLayoutContentContainerClasses = getMultiColumnLayoutContentContainerClasses;
+exports.getMultiColumnLayoutSecondaryClasses = getMultiColumnLayoutSecondaryClasses;
+const ROOT = [
+    'smart:min-h-full',
+    'smart:bg-gray-50',
+    'smart:dark:bg-gray-900',
+].join(' ');
+const HEADER = [
+    'smart:border-b',
+    'smart:border-gray-200',
+    'smart:bg-white',
+    'smart:px-4',
+    'smart:py-4',
+    'smart:sm:px-6',
+    'smart:lg:px-8',
+    'smart:dark:border-gray-700',
+    'smart:dark:bg-gray-800',
+].join(' ');
+const TITLE = [
+    'smart:text-2xl',
+    'smart:font-semibold',
+    'smart:text-gray-900',
+    'smart:dark:text-white',
+].join(' ');
+const ROW = 'smart:flex';
+const NAV = [
+    'smart:w-64',
+    'smart:shrink-0',
+    'smart:border-e',
+    'smart:border-gray-200',
+    'smart:bg-white',
+    'smart:dark:border-gray-700',
+    'smart:dark:bg-gray-800',
+].join(' ');
+const MAIN = [
+    'smart:flex-1',
+    'smart:bg-gray-50',
+    'smart:py-8',
+    'smart:dark:bg-gray-900',
+].join(' ');
+const CONTENT_CONTAINER_BASE = [
+    'smart:px-4',
+    'smart:sm:px-6',
+    'smart:lg:px-8',
+].join(' ');
+const CONTENT_WIDTH = {
+    constrained: 'smart:mx-auto smart:max-w-7xl',
+    full: 'smart:max-w-none',
+};
+const DEFAULT_WIDTH = 'full';
+const SECONDARY_BASE = [
+    'smart:shrink-0',
+    'smart:border-s',
+    'smart:border-gray-200',
+    'smart:bg-white',
+    'smart:dark:border-gray-700',
+    'smart:dark:bg-gray-800',
+].join(' ');
+const SECONDARY_WIDTH = {
+    sm: 'smart:w-64',
+    md: 'smart:w-80',
+    lg: 'smart:w-96',
+};
+const DEFAULT_SECONDARY_WIDTH = 'sm';
+function getMultiColumnLayoutRootClasses() {
+    return ROOT;
+}
+function getMultiColumnLayoutHeaderClasses() {
+    return HEADER;
+}
+function getMultiColumnLayoutTitleClasses() {
+    return TITLE;
+}
+function getMultiColumnLayoutRowClasses() {
+    return ROW;
+}
+function getMultiColumnLayoutNavClasses() {
+    return NAV;
+}
+function getMultiColumnLayoutMainClasses() {
+    return MAIN;
+}
+function getMultiColumnLayoutContentContainerClasses(width) {
+    return `${CONTENT_CONTAINER_BASE} ${CONTENT_WIDTH[width ?? DEFAULT_WIDTH]}`;
+}
+function getMultiColumnLayoutSecondaryClasses(secondaryWidth) {
+    return `${SECONDARY_BASE} ${SECONDARY_WIDTH[secondaryWidth ?? DEFAULT_SECONDARY_WIDTH]}`;
+}
+//# sourceMappingURL=preset-classes.js.map

package/src/lib/components/multi-column-layout/preset/preset-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-classes.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/multi-column-layout/preset/preset-classes.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAC3D,8EAA8E;AAC9E,6EAA6E;AAC7E,8EAA8E;AAC9E,iEAAiE;;AAiFjE,0EAEC;AAED,8EAEC;AAED,4EAEC;AAED,wEAEC;AAED,wEAEC;AAED,0EAEC;AAED,kGAIC;AAED,oFAIC;AA5GD,MAAM,IAAI,GAAG;IACX,kBAAkB;IAClB,kBAAkB;IAClB,wBAAwB;CACzB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,MAAM,GAAG;IACb,gBAAgB;IAChB,uBAAuB;IACvB,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,eAAe;IACf,4BAA4B;IAC5B,wBAAwB;CACzB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,KAAK,GAAG;IACZ,gBAAgB;IAChB,qBAAqB;IACrB,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,GAAG,GAAG,YAAY,CAAC;AAEzB,MAAM,GAAG,GAAG;IACV,YAAY;IACZ,gBAAgB;IAChB,gBAAgB;IAChB,uBAAuB;IACvB,gBAAgB;IAChB,4BAA4B;IAC5B,wBAAwB;CACzB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,IAAI,GAAG;IACX,cAAc;IACd,kBAAkB;IAClB,YAAY;IACZ,wBAAwB;CACzB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,sBAAsB,GAAG;IAC7B,YAAY;IACZ,eAAe;IACf,eAAe;CAChB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,aAAa,GAAgD;IACjE,WAAW,EAAE,+BAA+B;IAC5C,IAAI,EAAE,kBAAkB;CACzB,CAAC;AAEF,MAAM,aAAa,GAAgC,MAAM,CAAC;AAE1D,MAAM,cAAc,GAAG;IACrB,gBAAgB;IAChB,gBAAgB;IAChB,uBAAuB;IACvB,gBAAgB;IAChB,4BAA4B;IAC5B,wBAAwB;CACzB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,eAAe,GAAyD;IAC5E,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,YAAY;CACjB,CAAC;AAEF,MAAM,uBAAuB,GAAyC,IAAI,CAAC;AAE3E,SAAgB,+BAA+B;IAC7C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAgB,iCAAiC;IAC/C,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAgB,gCAAgC;IAC9C,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAgB,8BAA8B;IAC5C,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,8BAA8B;IAC5C,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,+BAA+B;IAC7C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAgB,2CAA2C,CACzD,KAA8C;IAE9C,OAAO,GAAG,sBAAsB,IAAI,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,EAAE,CAAC;AAC9E,CAAC;AAED,SAAgB,oCAAoC,CAClD,cAAgE;IAEhE,OAAO,GAAG,cAAc,IAAI,eAAe,CAAC,cAAc,IAAI,uBAAuB,CAAC,EAAE,CAAC;AAC3F,CAAC"}

package/src/lib/components/multi-column-layout/standard/multi-column-layout-standard.d.ts

@@ -0,0 +1,8 @@
+import { SmartMultiColumnLayoutProps } from '../multi-column-layout.types';
+/**
+ * The default multi-column layout (`<smart-multi-column-layout-standard>`):
+ * an optional `<header>` (`options.headerTpl`), then `<aside class="nav">`
+ * (`options.navTpl`), `<main>` with `children` and `<aside class="secondary">`
+ * (`options.secondaryTpl`).
+ */
+export declare function SmartMultiColumnLayoutStandard({ options, className, children, }: SmartMultiColumnLayoutProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/multi-column-layout/standard/multi-column-layout-standard.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartMultiColumnLayoutStandard = SmartMultiColumnLayoutStandard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The default multi-column layout (`<smart-multi-column-layout-standard>`):
+ * an optional `<header>` (`options.headerTpl`), then `<aside class="nav">`
+ * (`options.navTpl`), `<main>` with `children` and `<aside class="secondary">`
+ * (`options.secondaryTpl`).
+ */
+function SmartMultiColumnLayoutStandard({ options, className = '', children, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className || undefined, children: [options?.headerTpl && (0, jsx_runtime_1.jsx)("header", { children: options.headerTpl }), (0, jsx_runtime_1.jsx)("aside", { className: "nav", children: options?.navTpl }), (0, jsx_runtime_1.jsx)("main", { children: children }), (0, jsx_runtime_1.jsx)("aside", { className: "secondary", children: options?.secondaryTpl })] }));
+}
+//# sourceMappingURL=multi-column-layout-standard.js.map

package/src/lib/components/multi-column-layout/standard/multi-column-layout-standard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-layout-standard.js","sourceRoot":"","sources":["../../../../../../../../../packages/shared/react/src/lib/components/multi-column-layout/standard/multi-column-layout-standard.tsx"],"names":[],"mappings":";;AAQA,wEAaC;;AAnBD;;;;;GAKG;AACH,SAAgB,8BAA8B,CAAC,EAC7C,OAAO,EACP,SAAS,GAAG,EAAE,EACd,QAAQ,GACoB;IAC5B,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,IAAI,SAAS,aACnC,OAAO,EAAE,SAAS,IAAI,6CAAS,OAAO,CAAC,SAAS,GAAU,EAC3D,kCAAO,SAAS,EAAC,KAAK,YAAE,OAAO,EAAE,MAAM,GAAS,EAChD,2CAAO,QAAQ,GAAQ,EACvB,kCAAO,SAAS,EAAC,WAAW,YAAE,OAAO,EAAE,YAAY,GAAS,IACxD,CACP,CAAC;AACJ,CAAC"}

package/src/lib/components/navbar/index.d.ts

@@ -0,0 +1,6 @@
+export * from './navbar';
+export * from './navbar.types';
+export * from './preset/navbar-preset';
+export * from './preset/preset-classes';
+export * from './standard/navbar-standard';
+export * from './use-navbar';

package/src/lib/components/navbar/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./navbar"), exports);
+tslib_1.__exportStar(require("./navbar.types"), exports);
+tslib_1.__exportStar(require("./preset/navbar-preset"), exports);
+tslib_1.__exportStar(require("./preset/preset-classes"), exports);
+tslib_1.__exportStar(require("./standard/navbar-standard"), exports);
+tslib_1.__exportStar(require("./use-navbar"), exports);
+//# sourceMappingURL=index.js.map

package/src/lib/components/navbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/shared/react/src/lib/components/navbar/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,yDAA+B;AAC/B,iEAAuC;AACvC,kEAAwC;AACxC,qEAA2C;AAC3C,uDAA6B"}