@ramme-io/ui 4.1.0 → 4.2.0

package/src/wizardManifest.ts

@@ -600,7 +600,7 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "login-page",
       "name": "LoginPage",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "description": "The standard sign-in screen — email and password, with inline error and loading states already wired. Strategic purpose: a drop-in credential form so products don't rebuild one; `quickProfiles` adds one-click demo personas, which is what makes a prototype instantly explorable without real accounts.",
       "tags": [
         "auth",
@@ -630,6 +630,21 @@ export const wizardManifest: WizardManifest = {
           "name": "quickProfiles",
           "type": "Array<QuickProfile>",
           "description": "Optional one-click demo identities, each `{ name, email, role }`."
+        },
+        {
+          "name": "signupHref",
+          "type": "string",
+          "description": "Where \"Create one\" points. Pass `null` to hide that line entirely, which is what an invite-only product wants. Defaults to `/auth/signup`."
+        },
+        {
+          "name": "signupLabel",
+          "type": "string",
+          "description": "Text for that link. Defaults to \"Create one\"."
+        },
+        {
+          "name": "forgotHref",
+          "type": "string",
+          "description": "Where \"Forgot?\" points. Pass `null` to hide it — a product with no reset email has nothing to link to. Defaults to `#`."
         }
       ],
       "importPath": "./components/auth/LoginPage",
@@ -1087,7 +1102,7 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "status-badge",
       "name": "StatusBadge",
-      "version": "1.0.1",
+      "version": "1.0.2",
       "description": "A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states.",
       "tags": [
         "status",
@@ -1106,7 +1121,7 @@ export const wizardManifest: WizardManifest = {
         {
           "name": "color",
           "type": "string",
-          "description": "Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given."
+          "description": "Background class for the dot (e.g. 'bg-success'). Use a semantic token — a numeric shade does not adapt to the active theme. Overrides the `status` preset's colour when both are given."
         },
         {
           "name": "label",
@@ -1965,31 +1980,53 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "textarea",
       "name": "Textarea",
-      "version": "1.0.0",
-      "description": "A theme-aware textarea component for multi-line text input.",
+      "version": "1.0.1",
+      "description": "A theme-aware multi-line text input with label, helper text, and validation state support. Strategic purpose: the multi-line sibling of Input, styled identically so the two are indistinguishable when stacked in one form. Forwards all standard HTML textarea attributes via spread.",
       "tags": [
         "form",
         "input",
-        "ui"
+        "ui",
+        "text",
+        "multiline"
       ],
       "category": "form",
       "props": [
         {
           "name": "label",
           "type": "string",
-          "description": "An optional label to display above the textarea."
+          "description": "Optional label displayed above the textarea."
+        },
+        {
+          "name": "helperText",
+          "type": "string",
+          "description": "Supporting text rendered below the textarea. Appears in destructive color when error is true."
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "description": "If true, applies destructive border styling to indicate a validation error. Defaults to false."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "description": "If true, appends a required (*) indicator next to the label. Defaults to false."
+        },
+        {
+          "name": "showOptionalLabel",
+          "type": "boolean",
+          "description": "If true, appends an (optional) label when the field is not required. Defaults to false."
         },
         {
           "name": "containerClassName",
           "type": "string",
-          "description": "Optional additional CSS classes for the container div."
+          "description": "Additional CSS classes applied to the outer container div."
         }
       ],
       "importPath": "./components/forms/Textarea",
       "filePath": "src/components/forms/Textarea.tsx",
       "sku": "@atom/form/textarea",
       "humanLabel": "Textarea",
-      "humanDescription": "A theme-aware textarea component for multi-line text input."
+      "humanDescription": "A theme-aware multi-line text input with label, helper text, and validation state support. Strategic purpose: the multi-line sibling of Input, styled identically so the two are indistinguishable when stacked in one form. Forwards all standard HTML textarea attributes via spread."
     },
     {
       "id": "toggle-switch",
@@ -2623,8 +2660,8 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "mobile-nav",
       "name": "MobileNav",
-      "version": "1.0.0",
-      "description": "A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a \"More\" drawer for secondary links. Hidden on md: and up via Tailwind. Designed as the mobile counterpart to the desktop Sidebar.",
+      "version": "1.0.3",
+      "description": "Mobile navigation, in two shapes. 'bar' is a fixed bottom tab bar with icon+label tabs and a \"More\" drawer for secondary links. 'sheet' drops the bar entirely and puts every destination in a bottom drawer the host opens from its own trigger — the right choice when a mobile browser's toolbar already owns the bottom edge. Hidden on md: and up via Tailwind. The mobile counterpart to the desktop Sidebar.",
       "tags": [
         "navigation",
         "mobile",
@@ -2673,13 +2710,33 @@ export const wizardManifest: WizardManifest = {
           "name": "className",
           "type": "string",
           "description": "Additional CSS classes on the root nav bar."
+        },
+        {
+          "name": "variant",
+          "type": "string",
+          "description": "'bar' (default) renders the fixed bottom tab bar with a \"More\" Drawer. 'sheet' renders no bar at all and puts every destination in a Sheet — opening at 60% and growing to full as you drag or scroll it up — which the host opens itself — use it when a top header can hold the trigger, since a fixed bar and a mobile browser's own toolbar stack into ~120px of lost screen."
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Controlled drawer state. Required by 'sheet', which has no trigger of its own; ignored by 'bar'."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "function",
+          "description": "Fired when the sheet wants to close (backdrop, Escape, or an item tapped)."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "description": "Extra content rendered in the panel body after the destinations, scrolling with them. The mirror of drawerHeader; use it instead of drawerFooter when the content belongs with the list rather than pinned under it."
         }
       ],
       "importPath": "./components/navigation/MobileNav",
       "filePath": "src/components/navigation/MobileNav.tsx",
       "sku": "@molecule/nav/mobile-nav",
       "humanLabel": "MobileNav",
-      "humanDescription": "A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a \"More\" drawer for secondary links. Hidden on md: and up via Tailwind. Designed as the mobile counterpart to the desktop Sidebar."
+      "humanDescription": "Mobile navigation, in two shapes. 'bar' is a fixed bottom tab bar with icon+label tabs and a \"More\" drawer for secondary links. 'sheet' drops the bar entirely and puts every destination in a bottom drawer the host opens from its own trigger — the right choice when a mobile browser's toolbar already owns the bottom edge. Hidden on md: and up via Tailwind. The mobile counterpart to the desktop Sidebar."
     },
     {
       "id": "pagination",
@@ -3618,7 +3675,7 @@ export const wizardManifest: WizardManifest = {
     {
       "id": "detail-drawer",
       "name": "DetailDrawer",
-      "version": "1.0.0",
+      "version": "1.0.2",
       "description": "A resizable side panel for inspecting one record without leaving the list. Strategic purpose: the master-detail companion — `push` compresses its siblings in a flex layout so the list stays visible and usable, while `overlay` floats above the page like a classic drawer. Use this for \"click a row, see the detail\" flows; use Modal when the task must block everything else.",
       "tags": [
         "layout",
@@ -3643,7 +3700,7 @@ export const wizardManifest: WizardManifest = {
         {
           "name": "variant",
           "type": "string",
-          "description": "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to push."
+          "description": "'push' compresses sibling flex content so the list stays visible; 'overlay' floats fixed above the page. Defaults to overlay."
         },
         {
           "name": "side",
@@ -3675,6 +3732,11 @@ export const wizardManifest: WizardManifest = {
           "type": "number",
           "description": "Upper bound for resizing. Defaults to 60% of the window width."
         },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Names the panel for assistive technology. Not rendered: there is no header row to put it in, and adding one is a design decision. Without it an overlay announces only as \"dialog\"."
+        },
         {
           "name": "children",
           "type": "ReactNode",
@@ -4090,6 +4152,69 @@ export const wizardManifest: WizardManifest = {
       "humanLabel": "SettingsContainer",
       "humanDescription": "The canonical settings page arrangement, with a fixed slot per section so every app's settings read the same way. Strategic purpose: settings sprawl fast — this pins the section order and navigation so General, AI Gateway, Theme Lab, and About always live in the same place."
     },
+    {
+      "id": "sheet",
+      "name": "Sheet",
+      "version": "1.0.0",
+      "description": "A bottom sheet that opens at a partial height and grows to full screen as you drag or scroll it up. Strategic purpose: the native-feeling surface for mobile navigation, settings and pickers — reachable by thumb, dismissed by flicking down. Use instead of Drawer when the surface is primarily touched.",
+      "tags": [
+        "layout",
+        "overlay",
+        "sheet",
+        "mobile",
+        "touch",
+        "drawer",
+        "ui"
+      ],
+      "category": "layout",
+      "props": [
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Controls the open/closed state. Required."
+        },
+        {
+          "name": "onClose",
+          "type": "function",
+          "description": "Fired when the sheet requests dismissal (flick down, drag below the smallest detent, Escape, overlay tap, or the close button). Required."
+        },
+        {
+          "name": "detents",
+          "type": "Array<number>",
+          "description": "Resting heights as fractions of the viewport, ascending. Defaults to [0.6, 1] — opens at 60%, expands to full."
+        },
+        {
+          "name": "initialDetent",
+          "type": "number",
+          "description": "Index into detents to open at. Defaults to 0."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Optional title in the sticky header, beside the close button."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "description": "Optional sticky footer, kept clear of the home indicator."
+        },
+        {
+          "name": "overlayDismiss",
+          "type": "boolean",
+          "description": "Tap the dimmed backdrop to close. Defaults to true."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Extra classes for the sheet panel."
+        }
+      ],
+      "importPath": "./components/layout/Sheet",
+      "filePath": "src/components/layout/Sheet.tsx",
+      "sku": "@chassis/layout/sheet",
+      "humanLabel": "Sheet",
+      "humanDescription": "A bottom sheet that opens at a partial height and grows to full screen as you drag or scroll it up. Strategic purpose: the native-feeling surface for mobile navigation, settings and pickers — reachable by thumb, dismissed by flicking down. Use instead of Drawer when the surface is primarily touched."
+    },
     {
       "id": "sidebar",
       "name": "Sidebar",

package/tailwind.preset.js

@@ -38,6 +38,11 @@ module.exports = {
         destructive: {
           DEFAULT:    'rgb(var(--app-danger-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-danger-foreground-color) / <alpha-value>)',
+          // Severity text on the PAGE ground, not on the fill. `DEFAULT` is the
+          // fill and fails as body copy (success on white is 2.8:1); `strong` is
+          // the per-theme value that passes. Named `strong` rather than `text`
+          // so the utility reads `text-destructive-strong`, not `-text-text`.
+          strong:     'rgb(var(--app-danger-text-color) / <alpha-value>)',
         },
         accent: {
           DEFAULT:    'rgb(var(--app-accent-color) / <alpha-value>)',
@@ -56,14 +61,17 @@ module.exports = {
         info: {
           DEFAULT:    'rgb(var(--app-info-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-info-foreground-color) / <alpha-value>)',
+          strong:     'rgb(var(--app-info-text-color) / <alpha-value>)',
         },
         success: {
           DEFAULT:    'rgb(var(--app-success-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-success-foreground-color) / <alpha-value>)',
+          strong:     'rgb(var(--app-success-text-color) / <alpha-value>)',
         },
         warning: {
           DEFAULT:    'rgb(var(--app-warning-color) / <alpha-value>)',
           foreground: 'rgb(var(--app-warning-foreground-color) / <alpha-value>)',
+          strong:     'rgb(var(--app-warning-text-color) / <alpha-value>)',
         },
         error: {
           DEFAULT:    'rgb(var(--app-danger-color) / <alpha-value>)',