@1money/component-ui 0.0.95-alpha.2 → 0.0.95-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1money/component-ui",
-  "version": "0.0.95-alpha.2",
+  "version": "0.0.95-alpha.4",
   "description": "React Components based on primereact for 1money front-end projects",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -360,6 +360,11 @@
       "import": "./es/business/Form/ResultForm/index.js",
       "require": "./lib/business/Form/ResultForm/index.js"
     },
+    "./business/Form/variants": {
+      "types": "./es/business/Form/variants/index.d.ts",
+      "import": "./es/business/Form/variants/index.js",
+      "require": "./lib/business/Form/variants/index.js"
+    },
     "./business/PageForm": {
       "types": "./es/business/Form/PageForm/index.d.ts",
       "import": "./es/business/Form/PageForm/index.js",

package/scripts/mcp-server/examples.generated.json

@@ -727,6 +727,18 @@
       "source": "readme",
       "compilable": true
     },
+    "39fe9935032c60c665210ee02ca12f4a68b4e311984cb2fe509d9eb96b10babc": {
+      "title": "Copy Only",
+      "code": "<PanelLayout\n      title='Just a title and a description'\n      description='With no illustration, no children and no actions, only the header region renders — there is no empty footer taking up space.'\n    />",
+      "source": "stories",
+      "compilable": true
+    },
+    "3a9e8bb02e0022b3f73c4c4244db569750d767f16770fc67712e4149488d1319": {
+      "title": "Canonical usage",
+      "code": "import type { PanelLayoutProps } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
     "3b1c013f838f3b6af14a9a63496b252a2639f729be7c2afe0f0aa6f72973e0fe": {
       "title": "Responsive",
       "code": "<Row gutter={GRID_GUTTER}>\n      <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n        <div style={DEMO_BOX_STYLE}>A</div>\n      </Col>\n      <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n        <div style={DEMO_BOX_STYLE}>B</div>\n      </Col>\n      <Col span={SPAN_THIRD} md={SPAN_HALF} sm={SPAN_FULL}>\n        <div style={DEMO_BOX_STYLE}>C</div>\n      </Col>\n    </Row>",
@@ -841,6 +853,12 @@
       "source": "stories",
       "compilable": true
     },
+    "48b287ad75a8ce2d2fc677e87875bb89c058f7727d65015ee04b2582f1104eb2": {
+      "title": "Canonical usage",
+      "code": "<PANEL_LAYOUT_CONFIG />",
+      "source": "canonical",
+      "compilable": true
+    },
     "48c240723515be69d8de101f9bfe1d2ff596d82504645cc07dfb281c0a6a8ca5": {
       "title": "Canonical usage",
       "code": "import { Typography } from '@1money/component-ui';\n// or\nimport {\n  Typography,\n  TypographyBody,\n  TypographyDisplay,\n  TypographyHeadline,\n  TypographyLabel,\n  TypographyLink,\n  TypographyTitle,\n} from '@1money/component-ui/Typography';",
@@ -1213,6 +1231,12 @@
       "source": "stories",
       "compilable": false
     },
+    "6ba971a4b0aeff2f7e112cdca257621245ec9775ed495e422836e453a3634c61": {
+      "title": "Canonical usage",
+      "code": "<PanelLayout />",
+      "source": "canonical",
+      "compilable": true
+    },
     "6bf195e98d5a455cd0e5d43c58373b8311a4178b49a2f00f1f029af3e4b24447": {
       "title": "Canonical usage",
       "code": "import { Empty } from '@1money/component-ui';\n// or\nimport { Empty } from '@1money/component-ui/Empty';",
@@ -1231,6 +1255,12 @@
       "source": "readme",
       "compilable": true
     },
+    "6ee4b32ff036174858e06d25b536f09d972e82dc933f56140471a5925f442f24": {
+      "title": "Anatomy",
+      "code": "<PanelLayout\n      showBackIcon\n      onBack={() => {}}\n      illustration='illusChecked'\n      eyebrow='eyebrow'\n      title='Title (Headline sm)'\n      description='Description — body md, strong, secondary. Together with the eyebrow and title it is ONE header block on 8px seams, and it lives in the header region rather than the content region.'\n      primary={{ label: 'Primary' }}\n      secondary={{ label: 'Secondary' }}\n      footnote={{ prompt: 'Footnote prompt', action: 'action', onClick: () => {} }}\n    >\n      <div\n        style={{\n          width: '100%',\n          padding: 16,\n          border: '1px dashed var(--om-border-default)',\n          borderRadius: 8,\n          textAlign: 'center',\n        }}\n      >\n        children — free-form content region (a QR code, an OTP input, rows…)\n      </div>\n    </PanelLayout>",
+      "source": "stories",
+      "compilable": true
+    },
     "6f097a82d83df1982f3f442539825fbae168fd100c8516f97657fdc82d8373f1": {
       "title": "Dependency In List",
       "code": "<ProForm\n      {...args}\n      initialValues={{ items: [{ type: 'fixed', amount: '100' }] }}\n      onFinish={(values) => alert(JSON.stringify(values, null, 2))}\n    >\n      <ProFormList name=\"items\" label=\"Discounts\" min={1} max={5}>\n        {(fields) =>\n          fields.map(({ name, key }) => (\n            <div key={key} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>\n              <ProFormSelect\n                name={`${name}.type`}\n                label=\"Type\"\n                valueEnum={{ fixed: 'Fixed amount', percent: 'Percentage' }}\n              />\n              <ProFormDependency name={[`${name}.type`]}>\n                {(values) =>\n                  values[`${name}.type`] === 'percent' ? (\n                    <ProFormText name={`${name}.rate`} label=\"Rate (%)\" placeholder=\"e.g. 10\" />\n                  ) : (\n                    <ProFormText name={`${name}.amount`} label=\"Amount ($)\" placeholder=\"e.g. 100\" />\n                  )\n                }\n              </ProFormDependency>\n            </div>\n          ))\n        }\n      </ProFormList>\n    </ProForm>",
@@ -1399,6 +1429,12 @@
       "source": "stories",
       "compilable": true
     },
+    "7ca726063e078417e7d43a4eb1c069ef6f4bd4c4a820fd7ff1123dcab72a6d97": {
+      "title": "Canonical usage",
+      "code": "import type { PanelLayoutVariant } from '@1money/component-ui';",
+      "source": "canonical",
+      "compilable": true
+    },
     "7d415c46958e4b98092da361ef3a5b5a788b71628f8dfaa3a8ee1021b6871cee": {
       "title": "Import",
       "code": "import { Button, Icons } from '@1money/component-ui';\n// or\nimport { Button } from '@1money/component-ui/Button';\nimport { Icons } from '@1money/component-ui/Icons';",
@@ -1993,6 +2029,12 @@
       "source": "stories",
       "compilable": true
     },
+    "acbf22e3c4c1387a1eecf9c090585d1ee32ba45a94e3c4c3472ba74b5f0a7ffa": {
+      "title": "Stepped Page",
+      "code": "<PanelLayout\n      showBackIcon\n      onBack={() => {}}\n      eyebrow='Step 2 of 3'\n      title='Scan the QR code'\n      description='Use your authenticator app to link it to your 1Money account.'\n      primary={{ label: 'Next' }}\n      footnote={{ action: \"Can't scan the QR code?\", onClick: () => {} }}\n    />",
+      "source": "stories",
+      "compilable": true
+    },
     "acd535782a8b3c08a8b1bb58612e250607a8c0fae373a31b2d8e0fc704d4721e": {
       "title": "Usage",
       "code": "const items = [\n  { key: '1', title: 'Section Title', children: 'Content here...' },\n  { key: '2', title: 'Another Section', children: 'More content...' },\n];\n\n<Accordion items={items} />\n<Accordion items={items} variant=\"stroke\" size=\"small\" />\n<Accordion items={items} multiple defaultActiveKeys={['1', '2']} />",

package/scripts/mcp-server/index.generated.json

@@ -172,7 +172,7 @@
           "type": "ActionBarDirection",
           "optional": true,
           "default": null,
-          "description": "Arrangement: `horizontal` (default) or `vertical` (stacked, each button full-width — result-dialog style).",
+          "description": "Arrangement: `horizontal` (default — two actions split the row) or `vertical` (stacked, each button full-width).",
           "inheritedFrom": null
         },
         {
@@ -7087,6 +7087,30 @@
         }
       ]
     },
+    {
+      "name": "PANEL_LAYOUT_CONFIG",
+      "kind": "component",
+      "category": "misc",
+      "summary": "THE density table for content panels — the single thing to edit when the design changes.",
+      "importPath": "@1money/component-ui",
+      "subpathImport": "@1money/component-ui/PanelLayout",
+      "sourceFile": "src/components/PanelLayout/constants.ts",
+      "props": [],
+      "extends": [],
+      "relatedSymbols": [
+        "PanelLayout",
+        "PanelLayoutProps",
+        "PanelLayoutVariant"
+      ],
+      "searchTags": [],
+      "canonicalUsage": "<PANEL_LAYOUT_CONFIG />",
+      "examples": [
+        {
+          "hash": "48b287ad75a8ce2d2fc677e87875bb89c058f7727d65015ee04b2582f1104eb2",
+          "source": "canonical"
+        }
+      ]
+    },
     {
       "name": "PageInfo",
       "kind": "type",
@@ -7332,6 +7356,215 @@
         }
       ]
     },
+    {
+      "name": "PanelLayout",
+      "kind": "component",
+      "category": "misc",
+      "summary": "",
+      "importPath": "@1money/component-ui",
+      "subpathImport": "@1money/component-ui/PanelLayout",
+      "sourceFile": "src/components/PanelLayout/PanelLayout.tsx",
+      "props": [
+        {
+          "name": "variant",
+          "type": "PanelLayoutVariant",
+          "optional": true,
+          "default": null,
+          "description": "Which host this panel renders in.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "scroll",
+          "type": "boolean",
+          "optional": true,
+          "default": null,
+          "description": "Override the host's scroll policy.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "showBackIcon",
+          "type": "boolean",
+          "optional": true,
+          "default": null,
+          "description": "Show the back arrow at the TOP of the header block, on the same 8px seam as everything else in it.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "onBack",
+          "type": "() => void",
+          "optional": true,
+          "default": null,
+          "description": "Fires when the back arrow is activated.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "backIcon",
+          "type": "ReactNode",
+          "optional": true,
+          "default": null,
+          "description": "Replace the default back arrow node (keeps its slot and seam).",
+          "inheritedFrom": null
+        },
+        {
+          "name": "eyebrow",
+          "type": "ReactNode",
+          "optional": true,
+          "default": null,
+          "description": "Small label row above the title (\"Step 2 of 3\").",
+          "inheritedFrom": null
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "optional": true,
+          "default": null,
+          "description": "Heading.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "optional": true,
+          "default": null,
+          "description": "Supporting copy under the title.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "descriptionStrong",
+          "type": "boolean",
+          "optional": true,
+          "default": null,
+          "description": "Render the description in the strong (medium) weight — the family spec.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "illustration",
+          "type": "ReactNode | IconName",
+          "optional": true,
+          "default": null,
+          "description": "Illustration above the title, `IconName` or node.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "primary",
+          "type": "ActionBarAction",
+          "optional": true,
+          "default": null,
+          "description": "Primary action.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "secondary",
+          "type": "ActionBarAction",
+          "optional": true,
+          "default": null,
+          "description": "Optional secondary (left) action.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "direction",
+          "type": "ActionBarDirection",
+          "optional": true,
+          "default": null,
+          "description": "Action arrangement, forwarded to ActionBar: `horizontal` (default, row-splitting) or `vertical` (stacked full-width).",
+          "inheritedFrom": null
+        },
+        {
+          "name": "footnote",
+          "type": "ActionBarFootnote",
+          "optional": true,
+          "default": null,
+          "description": "Optional centered footnote row below the actions.",
+          "inheritedFrom": null
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "optional": true,
+          "default": null,
+          "description": "Extra content between the header block and the actions (e.g.",
+          "inheritedFrom": null
+        }
+      ],
+      "extends": [
+        "Pick<FormLayoutProps, 'width' | 'className'>"
+      ],
+      "relatedSymbols": [
+        "PANEL_LAYOUT_CONFIG",
+        "PanelLayoutProps",
+        "PanelLayoutVariant"
+      ],
+      "searchTags": [],
+      "canonicalUsage": "<PanelLayout />",
+      "examples": [
+        {
+          "hash": "6ba971a4b0aeff2f7e112cdca257621245ec9775ed495e422836e453a3634c61",
+          "source": "canonical"
+        },
+        {
+          "hash": "6ee4b32ff036174858e06d25b536f09d972e82dc933f56140471a5925f442f24",
+          "source": "stories"
+        },
+        {
+          "hash": "acbf22e3c4c1387a1eecf9c090585d1ee32ba45a94e3c4c3472ba74b5f0a7ffa",
+          "source": "stories"
+        },
+        {
+          "hash": "39fe9935032c60c665210ee02ca12f4a68b4e311984cb2fe509d9eb96b10babc",
+          "source": "stories"
+        }
+      ]
+    },
+    {
+      "name": "PanelLayoutProps",
+      "kind": "type",
+      "category": "misc",
+      "summary": "",
+      "importPath": "@1money/component-ui",
+      "subpathImport": "@1money/component-ui/PanelLayout",
+      "sourceFile": "src/components/PanelLayout/interface.ts",
+      "props": [],
+      "extends": [],
+      "relatedSymbols": [
+        "PANEL_LAYOUT_CONFIG",
+        "PanelLayout",
+        "PanelLayoutVariant"
+      ],
+      "searchTags": [],
+      "typeText": "interface PanelLayoutProps extends Pick<FormLayoutProps, 'width' | 'className'> { ... }",
+      "canonicalUsage": "import type { PanelLayoutProps } from '@1money/component-ui';",
+      "examples": [
+        {
+          "hash": "3a9e8bb02e0022b3f73c4c4244db569750d767f16770fc67712e4149488d1319",
+          "source": "canonical"
+        }
+      ]
+    },
+    {
+      "name": "PanelLayoutVariant",
+      "kind": "type",
+      "category": "misc",
+      "summary": "",
+      "importPath": "@1money/component-ui",
+      "subpathImport": "@1money/component-ui/PanelLayout",
+      "sourceFile": "src/components/PanelLayout/constants.ts",
+      "props": [],
+      "extends": [],
+      "relatedSymbols": [
+        "PANEL_LAYOUT_CONFIG",
+        "PanelLayout",
+        "PanelLayoutProps"
+      ],
+      "searchTags": [],
+      "typeText": "keyof typeof PANEL_LAYOUT_CONFIG",
+      "canonicalUsage": "import type { PanelLayoutVariant } from '@1money/component-ui';",
+      "examples": [
+        {
+          "hash": "7ca726063e078417e7d43a4eb1c069ef6f4bd4c4a820fd7ff1123dcab72a6d97",
+          "source": "canonical"
+        }
+      ]
+    },
     {
       "name": "Popconfirm",
       "kind": "component",