hisd3-ui-kit 4.3.0 → 4.4.0

package/README.md

@@ -120,6 +120,7 @@ const menuItems = [
 | `HISD3HeaderActions` | Spacing wrapper for the top-right controls; `divided` inserts a rule before the last child. |
 | `HISD3NotificationButton` | Soft-grey circular button with a solid bell glyph and a count pill on its top-right edge; tints to the primary color while its panel is open. Pass `icon` to swap the glyph. Props: `items` (`{ id, title, description, time, unread, avatarSrc, icon, onClick }`), `count` (defaults to the unread tally), `loading`, `size` (default 40), `icon`, `onMarkAllRead`, `onSeeAll`, `emptyText`. |
 | `HISD3AvatarMenu` | Circular avatar button with a small chevron badge (Facebook-style); clicking it opens a menu with the signed-in identity plus Settings and Logout (confirm dialog by default). Falls back to initials on a grey circle when there is no photo. Props: `account`, `avatarSrc`, `settingsUrl` / `onSettings`, `onLogout`, `confirmLogout`, `extraItems`, `shape` (`circle` \| `square`), `size` (default 40), `hideChevron`. |
+| `HISD3LoginPage` | Split-screen sign-in: a brand panel in the app's primary colour plus a floating form card. Per-app: `appName` (the module name shown on the card), `tagline`, `logoSrc`, `title`/`subtitle`, `panelTitle`/`panelSubtitle`, `panelImage`, `variant` (`"soft"` default, or `"square"`), `side` (`"right"` default, or `"left"`). Form: `onSubmit({ identifier, password, remember })`, `loading`, `error`, `onForgotPassword`, `hideRemember`, the label/placeholder props, and `footer`. The HISD3 watermark on the panel is fixed, so every module still reads as one system. |
 | `UserMenu` | The sidebar-footer account card, on its own. |
 
 Theme utilities: `createHisd3Theme`, `hisd3AntdTheme` (red default),
@@ -163,6 +164,43 @@ Inside styled-components or CSS you can rely on antd's variables:
 `--hisd3-popup-radius`, `--hisd3-bell-stretch` (how wide the bell glyph is drawn, default `1.12`), `--hisd3-edge-trigger-bg` / `--hisd3-edge-trigger-color` (the sidebar collapse chevron, primary-filled by default), so you can retune them per app without forking the
 components.
 
+## Sign-in page
+
+Every module renders the same component and differs only by name, logo and
+primary colour:
+
+```tsx
+<HISD3Provider primary="brandBlue">
+  <HISD3LoginPage
+    appName="Backoffice"
+    tagline="Hospital Information System"
+    // panel copy defaults to a hospital-system line; override per module:
+    panelTitle="Every charge, every folio, in one ledger."
+    panelSubtitle="Receivables, cashiering and accounts — reconciled daily."
+    loading={submitting}
+    error={errorMessage}
+    onForgotPassword={() => router.push("/forgot-password")}
+    onSubmit={async ({ identifier, password, remember }) => login(identifier, password, remember)}
+    footer={<>Need an account? <b>Contact your administrator</b></>}
+  />
+</HISD3Provider>
+```
+
+Responsive by default: the split layout holds down to 1024px, below which the
+brand panel drops and the card centres on a tinted background; under 560px it
+switches to a phone layout: a branded hero carrying the logo, module name and
+panel copy, with a white sheet rising over it that holds the form and runs to
+the bottom of the screen. Inputs are 16px there so iOS Safari does not zoom on
+focus.
+
+The panel copy (`panelTitle` / `panelSubtitle`) defaults to
+"One system for every part of your hospital." with a supporting line; pass your
+own for a module-specific message, or `panelSubtitle={null}` for headline only.
+`logoSrc` swaps the card logo for a module mark; leave it off and the HISD3
+logo is used. `HISD3_LOGO_SRC` is exported if you need the mark elsewhere.
+`primary` accepts the brand presets `"brand"` (the logo's gear, `#E5533B`) and
+`"brandBlue"` (its cloud, `#1B6FE0`), any other preset, or a hex value.
+
 ## Migrating
 
 ### from 3.x