hisd3-ui-kit 4.0.0 → 4.1.0

package/dist/index.d.ts

@@ -21,13 +21,32 @@ declare const HISD3_NEUTRALS: {
     readonly bgContainer: "#F3F2F0";
     readonly bgElevated: "#FFFFFF";
     readonly bgFilled: "#E6E4E1";
+    readonly bgFilledHover: "#DBD8D4";
     readonly text: "#171717";
     readonly textSecondary: "#4A4A4A";
     readonly textTertiary: "#6E6E6E";
-    readonly border: "#1F1F1F";
-    readonly borderSecondary: "#CFCDC9";
+    /** Structural rules: sidebar edge, header bottom, table header. */
+    readonly border: "#D9D5CE";
+    /** Quieter rules: table rows, dividers inside popups. */
+    readonly borderSecondary: "#E7E4DE";
+    /** Near-black, used for hover/focus emphasis on controls. */
+    readonly borderStrong: "#1F1F1F";
     readonly white: "#FFFFFF";
 };
+/** Border weights. "hairline" is the default modern look. */
+declare const HISD3_BORDER_PRESETS: {
+    readonly hairline: {
+        readonly width: 1;
+        readonly border: "#D9D5CE";
+        readonly borderSecondary: "#E7E4DE";
+    };
+    readonly bold: {
+        readonly width: 2;
+        readonly border: "#1F1F1F";
+        readonly borderSecondary: "#CFCDC9";
+    };
+};
+type HISD3Borders = keyof typeof HISD3_BORDER_PRESETS;
 declare const HISD3_FONT_FAMILY = "'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
 /** Archivo is used for both body (400) and headings (800). */
 declare const HISD3_FONT_WEIGHT_HEADING = 800;
@@ -37,7 +56,12 @@ interface HISD3ThemeOptions {
     primary?: HISD3Preset | string;
     /** Corner radius in px. The Backoffice look is square (0). */
     radius?: number;
-    /** Border width in px used by buttons, inputs, dividers. Default 2. */
+    /**
+     * Border treatment. "hairline" (default) uses 1px warm-grey rules;
+     * "bold" restores the 2px near-black look.
+     */
+    borders?: HISD3Borders;
+    /** Explicit border width in px; overrides the `borders` preset. */
     lineWidth?: number;
     /** Override / extend the generated antd theme. */
     overrides?: ThemeConfig;
@@ -52,7 +76,9 @@ declare const tint: (hex: string, amount: number) => string;
  * <ConfigProvider theme={createHisd3Theme({ primary: "teal" })}>
  * ```
  */
-declare const createHisd3Theme: ({ primary, radius, lineWidth, overrides, }?: HISD3ThemeOptions) => ThemeConfig;
+declare const createHisd3Theme: ({ primary, radius, borders, lineWidth, overrides, }?: HISD3ThemeOptions) => ThemeConfig;
+/** CSS emitted by HISD3Provider so styled components follow the border preset. */
+declare const borderVarsCss: (borders?: HISD3Borders, lineWidth?: number) => string;
 /** Default HISD3 theme — the red "Backoffice" look. */
 declare const hisd3AntdTheme: ThemeConfig;
 /** @deprecated use HISD3_PRESETS / createHisd3Theme */
@@ -707,6 +733,11 @@ interface HISD3SidebarProps {
     hideHeaderBar?: boolean;
     /** Where the brand block links to. Default "/". */
     brandHref?: string;
+    /**
+     * Hide the account card in the sider footer / top nav — use when the account
+     * lives in the header instead (`HISD3AvatarMenu`).
+     */
+    hideAccountCard?: boolean;
     children: React.ReactNode;
 }
 declare const HISD3Sidebar: React.FC<HISD3SidebarProps>;
@@ -754,6 +785,79 @@ declare const HISD3PageBody: styled_components_dist_types.IStyledComponentBase<"
  */
 declare const HISD3PageHeader: React.FC<HISD3PageHeaderProps>;
 
+interface HISD3Notification {
+    id: string;
+    title: React.ReactNode;
+    /** Secondary line, e.g. "Folio 19370 was posted". */
+    description?: React.ReactNode;
+    /** Right-aligned relative time, e.g. "2h". */
+    time?: React.ReactNode;
+    /** Unread items get a tinted row and a dot. */
+    unread?: boolean;
+    /** Leading avatar image; falls back to `icon`. */
+    avatarSrc?: string;
+    icon?: React.ReactNode;
+    onClick?: (notification: HISD3Notification) => void;
+}
+interface HISD3NotificationButtonProps {
+    items?: HISD3Notification[];
+    /** Diameter of the circular button in px. Default 40. */
+    size?: number;
+    /** Badge count. Defaults to the number of unread items. */
+    count?: number;
+    loading?: boolean;
+    title?: React.ReactNode;
+    /** Shown as a link in the panel header when there are unread items. */
+    onMarkAllRead?: () => void;
+    /** Renders a footer row, e.g. "See all notifications". */
+    onSeeAll?: () => void;
+    seeAllLabel?: React.ReactNode;
+    emptyText?: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+declare const HeaderIconButton: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $size?: number;
+}>> & string;
+/** Bell button with an unread badge and a Facebook-style notifications panel. */
+declare const HISD3NotificationButton: React.FC<HISD3NotificationButtonProps>;
+
+interface HISD3AvatarMenuProps {
+    account: IUserEmployee;
+    avatarSrc?: string;
+    /** Settings entry target. Pass `null` to hide the Settings entry. */
+    settingsUrl?: string | null;
+    onSettings?: () => void;
+    onLogout: () => Promise<void> | void;
+    /** Ask for confirmation before logging out. Default true. */
+    confirmLogout?: boolean;
+    /** Extra entries above Settings / Logout. */
+    extraItems?: MenuProps["items"];
+    /** Circle (Facebook-style) or square to match the rest of the design. */
+    shape?: "circle" | "square";
+    /** Diameter in px. Default 40. */
+    size?: number;
+    /** Hide the small chevron badge on the avatar. */
+    hideChevron?: boolean;
+    className?: string;
+}
+declare const getInitials: (fullName?: string) => string;
+/**
+ * Circular avatar button for the top-right of the header. Clicking it opens a
+ * menu showing who is signed in, plus Settings and Logout (with a confirm
+ * dialog by default).
+ */
+declare const HISD3AvatarMenu: React.FC<HISD3AvatarMenuProps>;
+
+interface HISD3HeaderActionsProps {
+    children: React.ReactNode;
+    /** Insert a vertical rule before the last child (e.g. before the avatar). */
+    divided?: boolean;
+    className?: string;
+}
+/** Spacing wrapper for the top-right header controls. */
+declare const HISD3HeaderActions: React.FC<HISD3HeaderActionsProps>;
+
 interface HISD3TablePagination {
     current: number;
     pageSize: number;
@@ -827,11 +931,13 @@ declare const HISD3SearchInput: React.FC<HISD3SearchInputProps>;
 
 /** Shared layout metrics so the sidebar brand block and page top bar line up. */
 declare const HISD3_LAYOUT: {
-    readonly siderWidth: 280;
-    readonly siderCollapsedWidth: 72;
-    readonly topBarHeight: 88;
-    readonly pageGutter: 40;
+    readonly siderWidth: 260;
+    readonly siderCollapsedWidth: 64;
+    /** Height of both the sidebar brand block and the page top bar. */
+    readonly topBarHeight: 60;
+    /** Horizontal padding used by the top bar, title block and page body. */
+    readonly pageGutter: 28;
 };
 
-export { AppAnimateGroups, AppAnimates, AppMotionAnimate, AuthType, Fonts, FooterType, HISD3Button, HISD3Input, HISD3PageBody, HISD3PageHeader, HISD3Provider, HISD3SearchInput, HISD3Sidebar, HISD3Table, HISD3Tabs, HISD3Tag, HISD3_COLORS, HISD3_FONT_FAMILY, HISD3_FONT_WEIGHT_BODY, HISD3_FONT_WEIGHT_HEADING, HISD3_LAYOUT, HISD3_NEUTRALS, HISD3_PRESETS, HeaderType, LayoutDirection, LayoutType, MenuStyle, MessageType, NavStyle, RoutePermittedRole, RouteTransition, ThemeMode, ThemeStyle, ThemeStyleRadius, UserMenu, createHisd3Theme, hisd3AntdTheme, resolvePrimary, tint, useInsideHISD3Provider };
-export type { HISD3BreadcrumbItem, HISD3ButtonProps, HISD3ButtonVariant, HISD3InputProps, HISD3MenuItem, HISD3PageHeaderProps, HISD3Preset, HISD3ProviderProps, HISD3SearchInputProps, HISD3SidebarProps, HISD3TabItem, HISD3TablePagination, HISD3TableProps, HISD3TabsProps, HISD3TagProps, HISD3TagTone, HISD3TagVariant, HISD3ThemeOptions, IUserEmployee, StyledTheme, UserMenuProps };
+export { AppAnimateGroups, AppAnimates, AppMotionAnimate, AuthType, Fonts, FooterType, HISD3AvatarMenu, HISD3Button, HISD3HeaderActions, HISD3Input, HISD3NotificationButton, HISD3PageBody, HISD3PageHeader, HISD3Provider, HISD3SearchInput, HISD3Sidebar, HISD3Table, HISD3Tabs, HISD3Tag, HISD3_BORDER_PRESETS, HISD3_COLORS, HISD3_FONT_FAMILY, HISD3_FONT_WEIGHT_BODY, HISD3_FONT_WEIGHT_HEADING, HISD3_LAYOUT, HISD3_NEUTRALS, HISD3_PRESETS, HeaderIconButton, HeaderType, LayoutDirection, LayoutType, MenuStyle, MessageType, NavStyle, RoutePermittedRole, RouteTransition, ThemeMode, ThemeStyle, ThemeStyleRadius, UserMenu, borderVarsCss, createHisd3Theme, getInitials, hisd3AntdTheme, resolvePrimary, tint, useInsideHISD3Provider };
+export type { HISD3AvatarMenuProps, HISD3Borders, HISD3BreadcrumbItem, HISD3ButtonProps, HISD3ButtonVariant, HISD3HeaderActionsProps, HISD3InputProps, HISD3MenuItem, HISD3Notification, HISD3NotificationButtonProps, HISD3PageHeaderProps, HISD3Preset, HISD3ProviderProps, HISD3SearchInputProps, HISD3SidebarProps, HISD3TabItem, HISD3TablePagination, HISD3TableProps, HISD3TabsProps, HISD3TagProps, HISD3TagTone, HISD3TagVariant, HISD3ThemeOptions, IUserEmployee, StyledTheme, UserMenuProps };