@ssa-ui-kit/core 3.17.0 → 3.19.0

package/dist/components/Breadcrumbs/BreadcrumbMenu.d.ts

@@ -0,0 +1,12 @@
+import { BreadcrumbSibling } from './types';
+export interface BreadcrumbMenuProps {
+    /** Element that opens the menu on hover/click. Must forward a ref. */
+    trigger: React.ReactElement;
+    /** Navigable options shown inside the menu. */
+    items: BreadcrumbSibling[];
+}
+/**
+ * A hover/click popover listing navigable routes. Shared by the collapsed `…`
+ * crumb and, in the route-aware mode, by crumbs that expose sibling routes.
+ */
+export declare const BreadcrumbMenu: ({ trigger, items }: BreadcrumbMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+import { BreadcrumbsProps } from './types';
+/**
+ * Breadcrumbs — navigational trail of the current page's location.
+ *
+ * Accepts a list of `{ label, to }` items and renders them as react-router
+ * links separated by a chevron, with the current (last) crumb shown as a
+ * non-navigable, emphasised label. When the trail is longer than `maxItems`
+ * it collapses to `first … last`, with the hidden crumbs available from the
+ * `…` menu.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   maxItems={4}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'People', to: '/people' },
+ *     { label: 'Jane Doe' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: ({ items, maxItems, separator, ariaLabel, className, css, }: BreadcrumbsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,5 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export { BreadcrumbMenu } from './BreadcrumbMenu';
+export { useBreadcrumbs, deriveBreadcrumbs } from './useBreadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbSibling, } from './types';
+export type { UseBreadcrumbsOptions, BreadcrumbRouteHandle, BreadcrumbMatchContext, } from './useBreadcrumbs';

package/dist/components/Breadcrumbs/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const nav: import("@emotion/react").SerializedStyles;
+export declare const list: import("@emotion/react").SerializedStyles;
+export declare const item: import("@emotion/react").SerializedStyles;
+export declare const separator: import("@emotion/react").SerializedStyles;
+export declare const crumbLink: import("@emotion/react").SerializedStyles;
+export declare const crumbText: import("@emotion/react").SerializedStyles;
+export declare const crumbCurrent: import("@emotion/react").SerializedStyles;
+export declare const menu: import("@emotion/react").SerializedStyles;
+export declare const menuItem: import("@emotion/react").SerializedStyles;

package/dist/components/Breadcrumbs/types.d.ts

@@ -0,0 +1,57 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { To } from 'react-router-dom';
+import { CommonProps } from '../../types/emotion';
+/**
+ * A sibling route option shown in a breadcrumb's hover menu.
+ *
+ * Reserved for the route-aware mode (Mode 2): when a crumb carries `siblings`,
+ * the crumb becomes a hover target that reveals these alternative routes.
+ */
+export interface BreadcrumbSibling {
+    label: React.ReactNode;
+    to: To;
+}
+/**
+ * A single breadcrumb entry.
+ *
+ * In the "dummy" mode you build these by hand. In the future route-aware mode
+ * the same shape is produced from the router matches, so the presentational
+ * `Breadcrumbs` component never needs to know which mode produced it.
+ */
+export interface BreadcrumbItem {
+    /** Visible label for the crumb. */
+    label: React.ReactNode;
+    /**
+     * react-router destination. Omit for a non-navigable crumb (e.g. the current
+     * page). When present, the crumb navigates via react-router.
+     */
+    to?: To;
+    /**
+     * Force the "current page" styling (blue, semibold, non-link). When not set,
+     * the last item in the list is treated as current automatically.
+     */
+    isCurrent?: boolean;
+    /** Optional click handler, fired in addition to navigation. */
+    onClick?: () => void;
+    /**
+     * Sibling routes for this crumb. When provided, the crumb reveals a hover
+     * menu offering these alternatives. Populated by the route-aware mode.
+     */
+    siblings?: BreadcrumbSibling[];
+}
+export interface BreadcrumbsProps extends CommonProps {
+    /** Ordered list of crumbs, root first, current page last. */
+    items: BreadcrumbItem[];
+    /**
+     * Collapse the trail into `first … last` once the number of items exceeds
+     * this value. The collapsed middle crumbs are revealed from the `…` menu.
+     * When omitted, the full trail is always shown.
+     */
+    maxItems?: number;
+    /** Custom separator between crumbs. Defaults to a right chevron. */
+    separator?: React.ReactNode;
+    /** Accessible label for the wrapping `nav`. */
+    ariaLabel?: string;
+    /** Custom Emotion styles applied to the wrapping `nav`. */
+    css?: Interpolation<Theme>;
+}

package/dist/components/Breadcrumbs/useBreadcrumbs.d.ts

@@ -0,0 +1,54 @@
+import { RouteObject } from 'react-router-dom';
+import { BreadcrumbItem } from './types';
+/** Context passed to a route's `crumb` resolver function. */
+export interface BreadcrumbMatchContext {
+    params: Record<string, string | undefined>;
+    pathname: string;
+}
+/**
+ * Shape read from a route's `handle` to build its crumb. Attach this to routes
+ * in your `createBrowserRouter` config:
+ *
+ * ```ts
+ * { path: 'people', handle: { crumb: 'People' } as BreadcrumbRouteHandle }
+ * ```
+ */
+export interface BreadcrumbRouteHandle {
+    /** Static label, or a resolver receiving the matched params/pathname. */
+    crumb?: React.ReactNode | ((ctx: BreadcrumbMatchContext) => React.ReactNode);
+    /** Fallback label used when `crumb` is absent (e.g. a page title). */
+    title?: React.ReactNode;
+    /** Explicitly exclude this route from the trail even if it has a title. */
+    hideCrumb?: boolean;
+}
+export interface UseBreadcrumbsOptions {
+    /** The route tree — the same array passed to `createBrowserRouter`. */
+    routes: RouteObject[];
+    /** Path to resolve against. Defaults to the current location. */
+    pathname?: string;
+    /** Attach sibling routes for the hover menu. Defaults to `true`. */
+    includeSiblings?: boolean;
+    /**
+     * Last-resort label resolver, called when a matched route has no
+     * `handle.crumb`/`handle.title`. Return `null`/`undefined` to skip the crumb.
+     */
+    getLabel?: (route: RouteObject, ctx: BreadcrumbMatchContext) => React.ReactNode;
+}
+/**
+ * Pure derivation of breadcrumb items from a route tree and a pathname.
+ * Extracted from the hook so it can be unit-tested without a router.
+ */
+export declare const deriveBreadcrumbs: (routes: RouteObject[], pathname: string, { includeSiblings, getLabel }?: Partial<UseBreadcrumbsOptions>) => BreadcrumbItem[];
+/**
+ * Route-aware breadcrumb builder. Reads the current location, matches it
+ * against your route tree, and returns `BreadcrumbItem[]` ready for
+ * `<Breadcrumbs>`. Labels come from each route's `handle.crumb`/`handle.title`;
+ * sibling routes (other children of a crumb's parent) power the hover menu.
+ *
+ * @example
+ * ```tsx
+ * const items = useBreadcrumbs({ routes });
+ * return <Breadcrumbs items={items} maxItems={4} />;
+ * ```
+ */
+export declare const useBreadcrumbs: ({ routes, pathname, includeSiblings, getLabel, }: UseBreadcrumbsOptions) => BreadcrumbItem[];

package/dist/components/Breadcrumbs/utils.d.ts

@@ -0,0 +1,17 @@
+import { BreadcrumbItem } from './types';
+/** A rendered slot in the trail: either a real crumb or the collapsed `…`. */
+export type BreadcrumbEntry = {
+    type: 'item';
+    item: BreadcrumbItem;
+    index: number;
+} | {
+    type: 'ellipsis';
+    items: BreadcrumbItem[];
+};
+/**
+ * Collapse the trail to `first … last` when it exceeds `maxItems`, per design.
+ * The hidden middle crumbs are returned on the ellipsis entry so they can be
+ * offered from its menu. When `maxItems` is falsy or not exceeded, every item
+ * is returned as-is.
+ */
+export declare const collapseItems: (items: BreadcrumbItem[], maxItems?: number) => BreadcrumbEntry[];

package/dist/components/DatePicker/styles.d.ts

@@ -8,7 +8,7 @@
  * - **`both`** — a standalone selection (or a one-cell range), fully rounded
  */
 export type RangeEdge = 'start' | 'end' | 'both';
-export declare const getCellRadius: (rangeEdge: RangeEdge | undefined, isHighlighted: boolean) => "6px" | "6px 0 0 6px" | "0 6px 6px 0" | "0";
+export declare const getCellRadius: (rangeEdge: RangeEdge | undefined, isHighlighted: boolean) => "6px" | "0" | "6px 0 0 6px" | "0 6px 6px 0";
 /**
  * Works out which edge of a highlighted range a selected cell sits on.
  *

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './Button';
 export type * from './Button/types';
 export * from './ButtonGroup';
 export * from './IconButton';
+export * from './Breadcrumbs';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 export type * from './Checkbox/types';