@the-portland-company/shell 0.88.0 → 0.89.0

package/dist/{index-tfcLFAni.d.cts → index-CZylXAP4.d.cts}

@@ -3,15 +3,38 @@ import * as react from 'react';
 import { ReactNode, CSSProperties, ButtonHTMLAttributes, AnchorHTMLAttributes, ElementType, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ComponentType } from 'react';
 import { ThemePreference as ThemePreference$1 } from './theme-preference.cjs';
 
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 type CardProps = {
-    title?: string;
-    children: ReactNode;
+    /** Heading text. With none of the structured props below it renders as a plain `<h3>` inside the padded box. */
+    title?: ReactNode;
+    /** Secondary line under the title. Switches the card to the structured header layout. */
+    subtitle?: ReactNode;
+    /** Right-aligned header content (a link, chip or count). Same as `actions`; both may be set. */
+    aside?: ReactNode;
+    /** Right-aligned header buttons. */
+    actions?: ReactNode;
+    /** Bottom strip separated by a top border. */
+    footer?: ReactNode;
+    children?: ReactNode;
+    /** Padding of the card (legacy layout) or of the body (structured layout). Default `md` (p-6). */
+    padding?: CardPadding;
+    /** Replaces the body padding classes in the structured layout (e.g. `px-7 pb-6 pt-6`). */
+    bodyClassName?: string;
     minH?: string | number;
     className?: string;
     style?: CSSProperties;
     [key: string]: unknown;
 };
-declare function Card({ title, children, minH, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+/**
+ * Shared Card. Surface, border and text come from the `--app-card-*` tokens, which
+ * have light values on `:root` and dark values under `.dark`
+ * (chrome.css), so a card is correct in both themes.
+ *
+ * Plain `<Card title>` keeps the original layout (padding on the card, h3 above the
+ * content). Passing `subtitle`, `aside`, `actions`, `footer` or `bodyClassName` switches to
+ * the structured layout: bordered header, body, bordered footer.
+ */
+declare function Card({ title, subtitle, aside, actions, footer, children, padding, bodyClassName, minH, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type FormColumnProps = {
     children: ReactNode;
@@ -114,8 +137,9 @@ type FieldChromeProps = {
 };
 
 /**
- * Text-like input types the field styling supports. Checkbox, radio, range,
- * file and color need their own native layout and are not supported here.
+ * Text-like input types the field styling supports. Checkbox has `Checkbox` and
+ * file has `FileInput`; radio, range and color need their own native layout and are
+ * not supported here.
  */
 type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & FieldChromeProps & {
@@ -179,6 +203,57 @@ declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<H
     invalid?: boolean;
 } & react.RefAttributes<HTMLTextAreaElement>>;
 
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /** Visible label, clickable. */
+    label?: ReactNode;
+    /** Secondary text under the label. */
+    description?: ReactNode;
+    /** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
+    indeterminate?: boolean;
+    /** Marks the checkbox invalid (red outline, aria-invalid). */
+    invalid?: boolean;
+    /** Class for the `<input>`; the row takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+};
+/**
+ * Shared Checkbox. The whole row is a 44px-tall touch target (label wraps the
+ * control); colors come from the shell tokens, with the accent as the fill.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    /** Visible label, clickable. */
+    label?: ReactNode;
+    /** Secondary text under the label. */
+    description?: ReactNode;
+    /** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
+    indeterminate?: boolean;
+    /** Marks the checkbox invalid (red outline, aria-invalid). */
+    invalid?: boolean;
+    /** Class for the `<input>`; the row takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> & FieldChromeProps & {
+    /** Class for the control itself; the wrapper takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+    /** Marks the control invalid without an error message. */
+    invalid?: boolean;
+};
+/**
+ * Shared file picker (`<input type="file">`). Same label/helper/error chrome and
+ * field tokens as `Input`; the native "Choose file" button is styled with the
+ * secondary-button tokens. Use `accept` / `multiple` as usual.
+ */
+declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue"> & FieldChromeProps & {
+    /** Class for the control itself; the wrapper takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+    /** Marks the control invalid without an error message. */
+    invalid?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type BreadcrumbItem = {
     label: string;
     href?: string;
@@ -1260,4 +1335,4 @@ type NavAppShellProps = {
 };
 declare function NavAppShell({ sidebar, topBar, betaBanner, contentWrapper, accountMenuPlacement, modeId, children, }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type CreditTypeKey as $, type NavDisplayMode as A, type BreadcrumbBarProps as B, Card as C, BETA_BANNER_DISMISS_KEY as D, BreadcrumbBar as E, FormColumn as F, CAMPAIGN_FEATURE_AVAILABILITY as G, HeaderTabBar as H, Input as I, CORE_APP_ORIGIN as J, CORE_BILLING_PATH as K, CREDIT_TYPE_LABELS as L, CREDIT_TYPE_ORDER as M, type NavItem as N, type CampaignFeatureAvailability as O, type PageHeaderProps as P, type ChromeMe as Q, type ChromeNotificationAlert as R, Select as S, Textarea as T, type ChromeNotificationImport as U, type ChromeNotificationQuarantine as V, type ChromeNotificationReply as W, type ChromeNotificationsPayload as X, type ChromeOrgSummary as Y, type CommunicationsFuelStatus as Z, type CreditHealthState as _, Button as a, CreditsAction as a0, type CreditsIconState as a1, FuelAction as a2, type FuelChannelStatus as a3, NavAppShell as a4, type NavAppShellProps as a5, NavBetaBanner as a6, type NavBetaBannerProps as a7, type NavBrand as a8, NavChromeProvider as a9, TopBarPanelArrow as aA, TopBarPopover as aB, TopBarTooltip as aC, TopBarWidgetSlot as aD, clearBetaBannerDismissal as aE, creditGaugeRatio as aF, creditStateWord as aG, creditTooltipLine as aH, creditsAriaLabel as aI, creditsIconState as aJ, envChipClasses as aK, isNavItemActive as aL, modeIdFromLabel as aM, resolveOrgLogoUrl as aN, shortEnvLabel as aO, shortUserName as aP, standardPolitogyNav as aQ, topBarIconButtonClass as aR, useChromeMe as aS, useChromeOrgs as aT, useNavChromeDedupedFetch as aU, useNavChromeFetcher as aV, useThemePreference as aW, NavDisplayAction as aa, type NavLinkProps as ab, type NavLinkedAccount as ac, type NavModeOption as ad, type NavOrg as ae, type NavRoleBadge as af, NavSidebar as ag, type NavSidebarProps as ah, type NavTab as ai, NavTabStrip as aj, type NavTabStripProps as ak, NavThemeControl as al, NavTopBar as am, type NavTopBarAction as an, type NavTopBarProps as ao, type NavUser as ap, NotificationsAction as aq, PageHeader as ar, type PageHeaderMode as as, SPECS_ORIGIN as at, SpecOverlayAction as au, type StandardNavOptions as av, SupportAction as aw, type ThemePreference as ax, TopBarCountBadge as ay, type TopBarIconTone as az, type ButtonProps as b, type ButtonSize as c, type ButtonVariant as d, type CommsNotification as e, type CommsNotificationKind as f, type HeaderTabBarItem as g, type InputProps as h, type NotificationsAdapter as i, type NotificationsFeed as j, type SelectProps as k, type TextareaProps as l, createCommsNotificationsAdapter as m, emptyNotificationsFeed as n, normalizeNotificationsFeed as o, type StandardNavIconKey as p, type NavIcon as q, type NavBreadcrumb as r, type StandardNavMode as s, type NavLinkComponent as t, type NavChromeFetcher as u, type NavMode as v, type NavUserMenu as w, type NavOrgOption as x, type NavFooterLink as y, type NavFooter as z };
+export { type ChromeNotificationQuarantine as $, type NavChromeFetcher as A, type BreadcrumbBarProps as B, Card as C, type NavMode as D, type NavUserMenu as E, FileInput as F, type NavOrgOption as G, HeaderTabBar as H, Input as I, type NavFooterLink as J, type NavFooter as K, type NavDisplayMode as L, BETA_BANNER_DISMISS_KEY as M, type NavItem as N, BreadcrumbBar as O, type PageHeaderProps as P, CAMPAIGN_FEATURE_AVAILABILITY as Q, CORE_APP_ORIGIN as R, Select as S, Textarea as T, CORE_BILLING_PATH as U, CREDIT_TYPE_LABELS as V, CREDIT_TYPE_ORDER as W, type CampaignFeatureAvailability as X, type ChromeMe as Y, type ChromeNotificationAlert as Z, type ChromeNotificationImport as _, Button as a, useNavChromeFetcher as a$, type ChromeNotificationReply as a0, type ChromeNotificationsPayload as a1, type ChromeOrgSummary as a2, type CommunicationsFuelStatus as a3, type CreditHealthState as a4, type CreditTypeKey as a5, CreditsAction as a6, type CreditsIconState as a7, FuelAction as a8, type FuelChannelStatus as a9, SpecOverlayAction as aA, type StandardNavOptions as aB, SupportAction as aC, type ThemePreference as aD, TopBarCountBadge as aE, type TopBarIconTone as aF, TopBarPanelArrow as aG, TopBarPopover as aH, TopBarTooltip as aI, TopBarWidgetSlot as aJ, clearBetaBannerDismissal as aK, creditGaugeRatio as aL, creditStateWord as aM, creditTooltipLine as aN, creditsAriaLabel as aO, creditsIconState as aP, envChipClasses as aQ, isNavItemActive as aR, modeIdFromLabel as aS, resolveOrgLogoUrl as aT, shortEnvLabel as aU, shortUserName as aV, standardPolitogyNav as aW, topBarIconButtonClass as aX, useChromeMe as aY, useChromeOrgs as aZ, useNavChromeDedupedFetch as a_, NavAppShell as aa, type NavAppShellProps as ab, NavBetaBanner as ac, type NavBetaBannerProps as ad, type NavBrand as ae, NavChromeProvider as af, NavDisplayAction as ag, type NavLinkProps as ah, type NavLinkedAccount as ai, type NavModeOption as aj, type NavOrg as ak, type NavRoleBadge as al, NavSidebar as am, type NavSidebarProps as an, type NavTab as ao, NavTabStrip as ap, type NavTabStripProps as aq, NavThemeControl as ar, NavTopBar as as, type NavTopBarAction as at, type NavTopBarProps as au, type NavUser as av, NotificationsAction as aw, PageHeader as ax, type PageHeaderMode as ay, SPECS_ORIGIN as az, type ButtonProps as b, useThemePreference as b0, type ButtonSize as c, type ButtonVariant as d, type CardPadding as e, type CardProps as f, Checkbox as g, type CheckboxProps as h, type CommsNotification as i, type CommsNotificationKind as j, type FileInputProps as k, FormColumn as l, type HeaderTabBarItem as m, type InputProps as n, type NotificationsAdapter as o, type NotificationsFeed as p, type SelectProps as q, type TextareaProps as r, createCommsNotificationsAdapter as s, emptyNotificationsFeed as t, normalizeNotificationsFeed as u, type StandardNavIconKey as v, type NavIcon as w, type NavBreadcrumb as x, type StandardNavMode as y, type NavLinkComponent as z };

package/dist/{index-DEiOABW2.d.ts → index-DwkSyAip.d.ts}

@@ -3,15 +3,38 @@ import * as react from 'react';
 import { ReactNode, CSSProperties, ButtonHTMLAttributes, AnchorHTMLAttributes, ElementType, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ComponentType } from 'react';
 import { ThemePreference as ThemePreference$1 } from './theme-preference.js';
 
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 type CardProps = {
-    title?: string;
-    children: ReactNode;
+    /** Heading text. With none of the structured props below it renders as a plain `<h3>` inside the padded box. */
+    title?: ReactNode;
+    /** Secondary line under the title. Switches the card to the structured header layout. */
+    subtitle?: ReactNode;
+    /** Right-aligned header content (a link, chip or count). Same as `actions`; both may be set. */
+    aside?: ReactNode;
+    /** Right-aligned header buttons. */
+    actions?: ReactNode;
+    /** Bottom strip separated by a top border. */
+    footer?: ReactNode;
+    children?: ReactNode;
+    /** Padding of the card (legacy layout) or of the body (structured layout). Default `md` (p-6). */
+    padding?: CardPadding;
+    /** Replaces the body padding classes in the structured layout (e.g. `px-7 pb-6 pt-6`). */
+    bodyClassName?: string;
     minH?: string | number;
     className?: string;
     style?: CSSProperties;
     [key: string]: unknown;
 };
-declare function Card({ title, children, minH, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+/**
+ * Shared Card. Surface, border and text come from the `--app-card-*` tokens, which
+ * have light values on `:root` and dark values under `.dark`
+ * (chrome.css), so a card is correct in both themes.
+ *
+ * Plain `<Card title>` keeps the original layout (padding on the card, h3 above the
+ * content). Passing `subtitle`, `aside`, `actions`, `footer` or `bodyClassName` switches to
+ * the structured layout: bordered header, body, bordered footer.
+ */
+declare function Card({ title, subtitle, aside, actions, footer, children, padding, bodyClassName, minH, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type FormColumnProps = {
     children: ReactNode;
@@ -114,8 +137,9 @@ type FieldChromeProps = {
 };
 
 /**
- * Text-like input types the field styling supports. Checkbox, radio, range,
- * file and color need their own native layout and are not supported here.
+ * Text-like input types the field styling supports. Checkbox has `Checkbox` and
+ * file has `FileInput`; radio, range and color need their own native layout and are
+ * not supported here.
  */
 type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & FieldChromeProps & {
@@ -179,6 +203,57 @@ declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<H
     invalid?: boolean;
 } & react.RefAttributes<HTMLTextAreaElement>>;
 
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /** Visible label, clickable. */
+    label?: ReactNode;
+    /** Secondary text under the label. */
+    description?: ReactNode;
+    /** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
+    indeterminate?: boolean;
+    /** Marks the checkbox invalid (red outline, aria-invalid). */
+    invalid?: boolean;
+    /** Class for the `<input>`; the row takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+};
+/**
+ * Shared Checkbox. The whole row is a 44px-tall touch target (label wraps the
+ * control); colors come from the shell tokens, with the accent as the fill.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    /** Visible label, clickable. */
+    label?: ReactNode;
+    /** Secondary text under the label. */
+    description?: ReactNode;
+    /** Mixed state (set on the DOM node; `checked` still controls the underlying value). */
+    indeterminate?: boolean;
+    /** Marks the checkbox invalid (red outline, aria-invalid). */
+    invalid?: boolean;
+    /** Class for the `<input>`; the row takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'> & FieldChromeProps & {
+    /** Class for the control itself; the wrapper takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+    /** Marks the control invalid without an error message. */
+    invalid?: boolean;
+};
+/**
+ * Shared file picker (`<input type="file">`). Same label/helper/error chrome and
+ * field tokens as `Input`; the native "Choose file" button is styled with the
+ * secondary-button tokens. Use `accept` / `multiple` as usual.
+ */
+declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue"> & FieldChromeProps & {
+    /** Class for the control itself; the wrapper takes `wrapperClassName`. */
+    className?: string;
+    wrapperClassName?: string;
+    /** Marks the control invalid without an error message. */
+    invalid?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type BreadcrumbItem = {
     label: string;
     href?: string;
@@ -1260,4 +1335,4 @@ type NavAppShellProps = {
 };
 declare function NavAppShell({ sidebar, topBar, betaBanner, contentWrapper, accountMenuPlacement, modeId, children, }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type CreditTypeKey as $, type NavDisplayMode as A, type BreadcrumbBarProps as B, Card as C, BETA_BANNER_DISMISS_KEY as D, BreadcrumbBar as E, FormColumn as F, CAMPAIGN_FEATURE_AVAILABILITY as G, HeaderTabBar as H, Input as I, CORE_APP_ORIGIN as J, CORE_BILLING_PATH as K, CREDIT_TYPE_LABELS as L, CREDIT_TYPE_ORDER as M, type NavItem as N, type CampaignFeatureAvailability as O, type PageHeaderProps as P, type ChromeMe as Q, type ChromeNotificationAlert as R, Select as S, Textarea as T, type ChromeNotificationImport as U, type ChromeNotificationQuarantine as V, type ChromeNotificationReply as W, type ChromeNotificationsPayload as X, type ChromeOrgSummary as Y, type CommunicationsFuelStatus as Z, type CreditHealthState as _, Button as a, CreditsAction as a0, type CreditsIconState as a1, FuelAction as a2, type FuelChannelStatus as a3, NavAppShell as a4, type NavAppShellProps as a5, NavBetaBanner as a6, type NavBetaBannerProps as a7, type NavBrand as a8, NavChromeProvider as a9, TopBarPanelArrow as aA, TopBarPopover as aB, TopBarTooltip as aC, TopBarWidgetSlot as aD, clearBetaBannerDismissal as aE, creditGaugeRatio as aF, creditStateWord as aG, creditTooltipLine as aH, creditsAriaLabel as aI, creditsIconState as aJ, envChipClasses as aK, isNavItemActive as aL, modeIdFromLabel as aM, resolveOrgLogoUrl as aN, shortEnvLabel as aO, shortUserName as aP, standardPolitogyNav as aQ, topBarIconButtonClass as aR, useChromeMe as aS, useChromeOrgs as aT, useNavChromeDedupedFetch as aU, useNavChromeFetcher as aV, useThemePreference as aW, NavDisplayAction as aa, type NavLinkProps as ab, type NavLinkedAccount as ac, type NavModeOption as ad, type NavOrg as ae, type NavRoleBadge as af, NavSidebar as ag, type NavSidebarProps as ah, type NavTab as ai, NavTabStrip as aj, type NavTabStripProps as ak, NavThemeControl as al, NavTopBar as am, type NavTopBarAction as an, type NavTopBarProps as ao, type NavUser as ap, NotificationsAction as aq, PageHeader as ar, type PageHeaderMode as as, SPECS_ORIGIN as at, SpecOverlayAction as au, type StandardNavOptions as av, SupportAction as aw, type ThemePreference as ax, TopBarCountBadge as ay, type TopBarIconTone as az, type ButtonProps as b, type ButtonSize as c, type ButtonVariant as d, type CommsNotification as e, type CommsNotificationKind as f, type HeaderTabBarItem as g, type InputProps as h, type NotificationsAdapter as i, type NotificationsFeed as j, type SelectProps as k, type TextareaProps as l, createCommsNotificationsAdapter as m, emptyNotificationsFeed as n, normalizeNotificationsFeed as o, type StandardNavIconKey as p, type NavIcon as q, type NavBreadcrumb as r, type StandardNavMode as s, type NavLinkComponent as t, type NavChromeFetcher as u, type NavMode as v, type NavUserMenu as w, type NavOrgOption as x, type NavFooterLink as y, type NavFooter as z };
+export { type ChromeNotificationQuarantine as $, type NavChromeFetcher as A, type BreadcrumbBarProps as B, Card as C, type NavMode as D, type NavUserMenu as E, FileInput as F, type NavOrgOption as G, HeaderTabBar as H, Input as I, type NavFooterLink as J, type NavFooter as K, type NavDisplayMode as L, BETA_BANNER_DISMISS_KEY as M, type NavItem as N, BreadcrumbBar as O, type PageHeaderProps as P, CAMPAIGN_FEATURE_AVAILABILITY as Q, CORE_APP_ORIGIN as R, Select as S, Textarea as T, CORE_BILLING_PATH as U, CREDIT_TYPE_LABELS as V, CREDIT_TYPE_ORDER as W, type CampaignFeatureAvailability as X, type ChromeMe as Y, type ChromeNotificationAlert as Z, type ChromeNotificationImport as _, Button as a, useNavChromeFetcher as a$, type ChromeNotificationReply as a0, type ChromeNotificationsPayload as a1, type ChromeOrgSummary as a2, type CommunicationsFuelStatus as a3, type CreditHealthState as a4, type CreditTypeKey as a5, CreditsAction as a6, type CreditsIconState as a7, FuelAction as a8, type FuelChannelStatus as a9, SpecOverlayAction as aA, type StandardNavOptions as aB, SupportAction as aC, type ThemePreference as aD, TopBarCountBadge as aE, type TopBarIconTone as aF, TopBarPanelArrow as aG, TopBarPopover as aH, TopBarTooltip as aI, TopBarWidgetSlot as aJ, clearBetaBannerDismissal as aK, creditGaugeRatio as aL, creditStateWord as aM, creditTooltipLine as aN, creditsAriaLabel as aO, creditsIconState as aP, envChipClasses as aQ, isNavItemActive as aR, modeIdFromLabel as aS, resolveOrgLogoUrl as aT, shortEnvLabel as aU, shortUserName as aV, standardPolitogyNav as aW, topBarIconButtonClass as aX, useChromeMe as aY, useChromeOrgs as aZ, useNavChromeDedupedFetch as a_, NavAppShell as aa, type NavAppShellProps as ab, NavBetaBanner as ac, type NavBetaBannerProps as ad, type NavBrand as ae, NavChromeProvider as af, NavDisplayAction as ag, type NavLinkProps as ah, type NavLinkedAccount as ai, type NavModeOption as aj, type NavOrg as ak, type NavRoleBadge as al, NavSidebar as am, type NavSidebarProps as an, type NavTab as ao, NavTabStrip as ap, type NavTabStripProps as aq, NavThemeControl as ar, NavTopBar as as, type NavTopBarAction as at, type NavTopBarProps as au, type NavUser as av, NotificationsAction as aw, PageHeader as ax, type PageHeaderMode as ay, SPECS_ORIGIN as az, type ButtonProps as b, useThemePreference as b0, type ButtonSize as c, type ButtonVariant as d, type CardPadding as e, type CardProps as f, Checkbox as g, type CheckboxProps as h, type CommsNotification as i, type CommsNotificationKind as j, type FileInputProps as k, FormColumn as l, type HeaderTabBarItem as m, type InputProps as n, type NotificationsAdapter as o, type NotificationsFeed as p, type SelectProps as q, type TextareaProps as r, createCommsNotificationsAdapter as s, emptyNotificationsFeed as t, normalizeNotificationsFeed as u, type StandardNavIconKey as v, type NavIcon as w, type NavBreadcrumb as x, type StandardNavMode as y, type NavLinkComponent as z };

package/dist/index.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
 var react = require('@chakra-ui/react');
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
-var clsx2 = require('clsx');
 var reactRouterDom = require('react-router-dom');
 var react$1 = require('react');
 require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 // src/theme/index.ts
 
@@ -839,29 +839,72 @@ var politogyTheme = react.extendTheme({
     full: "9999px"
   }
 });
+var PADDING = {
+  none: "p-0",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
 function Card({
   title,
+  subtitle,
+  aside,
+  actions,
+  footer,
   children,
+  padding = "md",
+  bodyClassName,
   minH,
   className,
   style,
   ...props
 }) {
+  const structured = Boolean(subtitle || aside || actions || footer || bodyClassName);
+  const surface = "rounded-lg border border-[color:var(--app-card-border,var(--color-border))] bg-[color:var(--app-card-bg,var(--color-panel))] text-[color:var(--app-card-fg,var(--color-text))] shadow-sm";
+  if (!structured) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-shell-card": "",
+        className: clsx__default.default(surface, PADDING[padding], className),
+        style: { minHeight: minH, ...style },
+        ...props,
+        children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }) : null,
+          children
+        ]
+      }
+    );
+  }
+  const hasHeader = Boolean(title || subtitle || aside || actions);
+  const divider = "border-[color:var(--app-card-border,var(--color-border))]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `rounded-lg border border-slate-200 bg-white p-6 shadow-sm ${className || ""}`,
+      "data-shell-card": "",
+      "data-shell-card-structured": "",
+      className: clsx__default.default(surface, "overflow-hidden", className),
       style: { minHeight: minH, ...style },
       ...props,
       children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }),
-        children
+        hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("flex flex-wrap items-start justify-between gap-3 border-b px-5 py-4", divider), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-sm text-[color:var(--app-card-fg-muted,var(--color-text-muted))]", children: subtitle }) : null
+          ] }),
+          aside || actions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            aside,
+            actions
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyClassName ?? PADDING[padding], children }),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("border-t px-5 py-3", divider), children: footer }) : null
       ]
     }
   );
 }
 function FormColumn({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx2__default.default("w-full max-w-[960px]", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx__default.default("w-full max-w-[960px]", className), children });
 }
 var MODE_EYEBROW_LABEL = {
   relationship: "Relationship mode",
@@ -903,11 +946,11 @@ function PageHeaderView({
     "div",
     {
       style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
-      className: clsx2__default.default("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
+      className: clsx__default.default("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
         "md:ml-60": !hideSidebar
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             eyebrowText ? /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -934,7 +977,7 @@ function PageHeaderView({
               "nav",
               {
                 "aria-label": "Breadcrumb",
-                className: clsx2__default.default("min-w-0 text-slate-100", title ? "mt-1" : ""),
+                className: clsx__default.default("min-w-0 text-slate-100", title ? "mt-1" : ""),
                 children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-nowrap items-center gap-2 overflow-hidden text-sm text-gray-600", children: breadcrumbsWithoutCurrent.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "li",
                   {
@@ -1003,7 +1046,7 @@ var Button = react$1.forwardRef(function Button2({
       "data-shell-button": "",
       "data-variant": variant,
       "aria-busy": loading || void 0,
-      className: clsx2__default.default(
+      className: clsx__default.default(
         "inline-flex items-center justify-center gap-2 rounded-[5px] px-3 text-sm font-semibold no-underline transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--app-field-focus,var(--color-accent))] focus-visible:ring-offset-2",
         SIZE_CLASS[size],
         VARIANT_CLASS[variant],
@@ -1040,7 +1083,7 @@ function FormField({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx2__default.default("flex w-full flex-col gap-1", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("flex w-full flex-col gap-1", className), children: [
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: "text-sm font-semibold text-[color:var(--color-text)]", children: [
       label,
       required ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " *" }) : null
@@ -1089,7 +1132,7 @@ var Input = react$1.forwardRef(function Input2({ label, helperText, error, inval
           "data-shell-field": "",
           "aria-invalid": isInvalid || void 0,
           "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
-          className: clsx2__default.default(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          className: clsx__default.default(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
           ...props
         }
       )
@@ -1119,7 +1162,7 @@ var Select = react$1.forwardRef(function Select2({ label, helperText, error, inv
           "data-shell-field": "",
           "aria-invalid": isInvalid || void 0,
           "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
-          className: clsx2__default.default(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          className: clsx__default.default(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
           ...props,
           children
         }
@@ -1150,7 +1193,7 @@ var Textarea = react$1.forwardRef(function Textarea2({ label, helperText, error,
           "data-shell-field": "",
           "aria-invalid": isInvalid || void 0,
           "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
-          className: clsx2__default.default(FIELD_BASE, "min-h-[88px] py-3", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          className: clsx__default.default(FIELD_BASE, "min-h-[88px] py-3", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
           ...props
         }
       )
@@ -1158,6 +1201,118 @@ var Textarea = react$1.forwardRef(function Textarea2({ label, helperText, error,
   );
 });
 var Textarea_default = Textarea;
+var Checkbox = react$1.forwardRef(function Checkbox2({
+  label,
+  description,
+  indeterminate,
+  invalid,
+  className,
+  wrapperClassName,
+  id,
+  disabled,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const descId = description ? `${fieldId}-description` : void 0;
+  const inner = react$1.useRef(null);
+  const setRef = react$1.useCallback(
+    (node) => {
+      inner.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  react$1.useEffect(() => {
+    if (inner.current) inner.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const describedBy2 = [descId, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: fieldId,
+      "data-shell-checkbox": "",
+      className: clsx__default.default(
+        "flex min-h-[44px] items-start gap-3 py-[10px] text-sm text-[color:var(--app-card-fg,var(--color-text))]",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...props,
+            ref: setRef,
+            id: fieldId,
+            type: "checkbox",
+            disabled,
+            "data-shell-field": "",
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy2,
+            className: clsx__default.default(
+              "mt-[2px] h-5 w-5 shrink-0 rounded-[5px] border focus:outline-none focus-visible:ring-2",
+              "accent-[color:var(--color-accent-bg-safe,var(--color-accent))]",
+              "focus-visible:ring-[color:var(--app-field-focus,var(--color-accent))]",
+              invalid ? "border-[color:var(--chrome-danger,var(--color-race-red))] outline outline-2 outline-[color:var(--chrome-danger,var(--color-race-red))]" : "border-[color:var(--app-field-border,var(--color-border))]",
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+              className
+            )
+          }
+        ),
+        label || description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+          label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium", children: label }) : null,
+          description ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: descId,
+              className: "block text-xs text-[color:var(--app-card-fg-muted,var(--color-text-muted))]",
+              children: description
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var Checkbox_default = Checkbox;
+var FileInput = react$1.forwardRef(function FileInput2({ label, helperText, error, invalid, className, wrapperClassName, id, required, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = react$1.useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...props,
+          ref,
+          id: fieldId,
+          type: "file",
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx__default.default(
+            FIELD_BASE,
+            "h-[44px] cursor-pointer py-[5px] file:mr-3 file:h-[32px] file:cursor-pointer file:rounded-[5px] file:border file:border-[color:var(--app-btn-secondary-border,var(--color-border))] file:bg-[color:var(--app-btn-secondary-bg,var(--color-white))] file:px-3 file:text-sm file:font-medium file:text-[color:var(--app-btn-secondary-fg,var(--color-text))]",
+            isInvalid ? FIELD_INVALID : FIELD_VALID,
+            className
+          )
+        }
+      )
+    }
+  );
+});
+var FileInput_default = FileInput;
 
 // src/lib/deprecation.ts
 var warned = /* @__PURE__ */ new Set();
@@ -1201,7 +1356,7 @@ function PageContainer({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: clsx2__default.default(
+          className: clsx__default.default(
             "mx-auto w-full",
             maxWClass,
             pxClass,
@@ -1234,7 +1389,7 @@ function BreadcrumbBarView({
     {
       className: "ml-0 border-b border-gray-200 px-4 py-3 md:ml-60",
       style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx2__default.default("mx-auto w-full px-0", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("mx-auto w-full px-0", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
         breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-2 text-sm text-slate-100", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2", children: [
           index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: ">" }) : null,
           item.href ? renderCrumbLink(item.href, item.label, "text-slate-100 hover:underline") : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-100", children: item.label })
@@ -1401,7 +1556,7 @@ function HeaderTabBar({
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: clsx2__default.default(
+      className: clsx__default.default(
         // Header-wide tab strip: background + bottom border only (no outer box).
         // Left-aligned and fluid: the container spans the full content width,
         // the tabs keep their natural width packed from the left (Global-Rules
@@ -1425,7 +1580,7 @@ function HeaderTabBar({
             "aria-label": item.label,
             disabled: isDisabled,
             onClick: () => onChange(item.id),
-            className: clsx2__default.default(
+            className: clsx__default.default(
               // `group/tbtip relative` powers the shared <TopBarTooltip>.
               // Natural width (no flex-1 stretch); 40px square hit area for the
               // icon-only tab so the strip stays tappable.
@@ -1989,6 +2144,8 @@ exports.BrandLogo = BrandLogo;
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Button = Button_default;
 exports.Card = Card;
+exports.Checkbox = Checkbox_default;
+exports.FileInput = FileInput_default;
 exports.FormColumn = FormColumn;
 exports.GlobalUiIdProvider = GlobalUiIdProvider;
 exports.HeaderTabBar = HeaderTabBar;