@telefonica/mistica 17.3.0 → 17.5.0

package/dist/sidenav-bar-types.d.ts

@@ -0,0 +1,192 @@
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { IconProps } from './utils/types';
+import type { InteractiveProps } from './navigation-shared';
+type SidenavAsset = ((props: IconProps) => JSX.Element) | React.ReactElement;
+/** Props shared by every navigation item, at any level. */
+type SidenavItemBaseProps = {
+    /** Unique identifier within the sidenav for selection tracking and panel state. */
+    id: string;
+    /** Display text (truncated if too long). */
+    label: string;
+    /** Custom content on right side (e.g., Badge). */
+    rightSlot?: React.ReactNode;
+};
+/**
+ * Parent item: it owns the items of the second level, it only opens and closes them, and it cannot
+ * navigate (`href`, `to`, and `onPress` are not allowed).
+ */
+type SidenavParentItemProps = {
+    /** Second-level items (max 1 level, level 0 items only). A parent item cannot navigate. */
+    children: ReadonlyArray<SidenavSecondLevelItem>;
+    /** Initial open state of the children. @default false */
+    defaultOpen?: boolean;
+};
+/**
+ * Navigable item: it navigates with exactly one of `href`, `to`, or `onPress`, and it cannot have
+ * children.
+ */
+type SidenavNavigableItemProps = InteractiveProps & {
+    /** Called after navigation (when item has href, to, or onPress). */
+    onNavigate?: () => void | Promise<void>;
+    /** Open link in new tab. Only applies when href or to is set. @default false */
+    newTab?: boolean;
+};
+/**
+ * Navigation item data for SidenavBar.
+ *
+ * Supports 2-level nesting:
+ * - **Level 0 items** can have children. They always carry an `asset`, because the collapsed rail shows
+ *   nothing else of them.
+ * - **Level 1 items** (children) cannot have children (leaf nodes). See `SidenavSecondLevelItem`.
+ *
+ * Each item is exactly one of:
+ * - **Parent** — has `children` and only opens/closes them. It cannot navigate, so
+ *   `href`, `to`, and `onPress` are not allowed (enforced by the type).
+ * - **Navigable** — has `href`, `to`, or `onPress`. It cannot have `children`.
+ *
+ * @example
+ * // Navigable item (leaf)
+ * {id: 'home', label: 'Home', asset: IconHome, href: '/', onNavigate: () => {}}
+ *
+ * // Parent item (only opens/closes its children, no navigation prop allowed)
+ * {
+ *   id: 'projects',
+ *   label: 'Projects',
+ *   asset: IconFolder,
+ *   children: [
+ *     {id: 'active', label: 'Active', href: '/projects/active'},
+ *     {id: 'archived', label: 'Archived', href: '/projects/archived'}
+ *   ]
+ * }
+ *
+ * // Item with right slot (e.g., badge)
+ * {id: 'notifications', label: 'Notifications', asset: IconBell, href: '#', rightSlot: <Badge value={5} />}
+ */
+type SidenavFirstLevelItem = SidenavItemBaseProps & {
+    /** Icon component or element. It is the only visible part of the item on the collapsed rail. */
+    asset: SidenavAsset;
+    /** Show asset when expanded (not collapsed). @default true */
+    showAssetWhenExpanded?: boolean;
+} & ExclusifyUnion<SidenavParentItemProps | SidenavNavigableItemProps>;
+/**
+ * Second-level item data: a child of a parent item. It is always navigable, and it cannot have children of its
+ * own. See `SidenavFirstLevelItem`.
+ *
+ * The collapsed rail never shows a second-level item, so the asset is optional and `showAssetWhenExpanded` has
+ * no meaning. The `undefined` members let a consumer read both item types through one union.
+ *
+ * @example
+ * {id: 'active', label: 'Active', href: '/projects/active'}
+ */
+type SidenavSecondLevelItem = SidenavItemBaseProps & SidenavNavigableItemProps & {
+    /** Icon component or element. */
+    asset?: SidenavAsset;
+    showAssetWhenExpanded?: undefined;
+    children?: undefined;
+    defaultOpen?: undefined;
+};
+/**
+ * Title of a section. Every section declares one, because it names the list of the section for a screen
+ * reader. A plain string also paints the heading. The object form with `hidden: true` keeps the name and
+ * paints no heading, so only assistive technology reads it.
+ *
+ * @example
+ * // Visible heading, and name of the list
+ * 'Workspace'
+ *
+ * // Name of the list only: no heading appears
+ * {text: 'Workspace', hidden: true}
+ */
+type SidenavSectionTitle = string | {
+    /** Text of the heading, and name of the list of the section. */
+    text: string;
+    /** Hide the heading. The list keeps this text as its name. @default false */
+    hidden?: boolean;
+};
+/**
+ * Section data that groups navigation items under a title, with optional dividers.
+ *
+ * Sections provide visual organization of items within a SidenavBar.
+ * The title is mandatory, because the list of the section takes its accessible name from it. When the
+ * sidenav is collapsed, the title is hidden visually but remains available to screen readers.
+ *
+ * @example
+ * // Section with a visible title and items
+ * {
+ *   title: 'Workspace',
+ *   dividerTop: true,
+ *   items: [
+ *     {id: 'projects', label: 'Projects', asset: IconFolder, href: '/projects'},
+ *     {id: 'teams', label: 'Teams', asset: IconPeople, href: '/teams'}
+ *   ]
+ * }
+ *
+ * // Section that groups items without a visible heading. Only a screen reader reads the title.
+ * {
+ *   title: {text: 'Workspace', hidden: true},
+ *   items: [{id: 'teams', label: 'Teams', asset: IconPeople, href: '/teams'}]
+ * }
+ */
+type SidenavSection = {
+    /**
+     * Section heading, and accessible name of the list of the section. It is mandatory, because a list
+     * without a name leaves a screen reader with no way to tell one section from another. Give
+     * `{text, hidden: true}` to keep the name and paint no heading.
+     */
+    title: SidenavSectionTitle;
+    /** Show divider above section. The first entry of the body draws none: a line parts two entries. */
+    dividerTop?: boolean;
+    /** Show divider below section. The last entry of the body draws none: a line parts two entries. */
+    dividerBottom?: boolean;
+    /** Navigation items in this section. */
+    items: ReadonlyArray<SidenavFirstLevelItem>;
+};
+/**
+ * First-level entry of the sidenav body. The first level admits sections and stand-alone items,
+ * in any order, so an item does not need a section around it.
+ *
+ * Each entry is exactly one of:
+ * - **Section** — has `items` and groups them under a title and optional dividers.
+ * - **Stand-alone item** — a `SidenavFirstLevelItem` placed directly at the first level. It carries no
+ *   title, so it is the entry to use when a group of one item needs no name.
+ *
+ * A stand-alone item aligns with the items of a section, and every first-level entry is
+ * separated from the next one by the same vertical space.
+ *
+ * @example
+ * // A stand-alone item, then a section, then another stand-alone item
+ * [
+ *   {id: 'home', label: 'Home', asset: IconHome, href: '/'},
+ *   {title: 'Workspace', items: [{id: 'teams', label: 'Teams', asset: IconPeople, href: '/teams'}]},
+ *   {id: 'settings', label: 'Settings', asset: IconSettings, href: '/settings'}
+ * ]
+ */
+type SidenavEntry = ExclusifyUnion<SidenavSection | SidenavFirstLevelItem>;
+/**
+ * Phase of the collapse motion of the desktop rail. `collapsing` and `expanding` last for the movement of
+ * the rail, and they never appear when motion is off. The mobile top bar always reports `expanded`.
+ */
+type SidenavCollapseState = 'expanded' | 'collapsing' | 'collapsed' | 'expanding';
+declare const isSidenavMoving: (state: SidenavCollapseState) => boolean;
+/**
+ * Props of the slots that render per state: the logo, the header slot, the footer slot, and the collapse
+ * action. `collapsed` flips at the first frame of the motion, and `state` tells the phase, so a slot can
+ * keep its content while the rail moves and swap it when the rail rests.
+ */
+type SidenavSlotRenderProps = {
+    /** Target collapsed state. The mobile top bar reports false, because it is not a rail. */
+    collapsed: boolean;
+    /** Phase of the collapse motion. */
+    state: SidenavCollapseState;
+};
+/** Props of the logo of the header. The default logo keeps the isotype in both states. */
+type SidenavLogoRenderProps = SidenavSlotRenderProps;
+/**
+ * Logo of the header. It takes true for the logo of the skin, false to hide the logo, an element of your
+ * own, or a function that receives the collapse state and returns one logo for each state.
+ */
+type SidenavLogo = React.ReactElement | boolean | ((props: SidenavLogoRenderProps) => React.ReactNode);
+/** Content of the header slot or of the footer slot: an element, or a function of the collapse state. */
+type SidenavSlot = React.ReactNode | ((props: SidenavSlotRenderProps) => React.ReactNode);
+export type { SidenavAsset, SidenavFirstLevelItem, SidenavSecondLevelItem, SidenavSection, SidenavSectionTitle, SidenavEntry, SidenavLogo, SidenavLogoRenderProps, SidenavSlot, SidenavSlotRenderProps, SidenavCollapseState, };
+export { isSidenavMoving };

package/dist/sidenav-bar-types.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "isSidenavMoving", {
+    enumerable: true,
+    get: function() {
+        return i;
+    }
+});
+const i = (n)=>n === "collapsing" || n === "expanding";

package/dist/sidenav-bar.css-mistica.js

@@ -0,0 +1,325 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get COLLAPSED_WIDTH () {
+        return v;
+    },
+    get COLLAPSE_DURATION_MS () {
+        return t;
+    },
+    get CONTENT_DURATION_MS () {
+        return x;
+    },
+    get DEFAULT_WIDTH () {
+        return i;
+    },
+    get LOGO_SIZE () {
+        return n;
+    },
+    get accordion () {
+        return pe;
+    },
+    get accordionContainer () {
+        return ue;
+    },
+    get accordionRows () {
+        return Ce;
+    },
+    get accordionTransitionClasses () {
+        return he;
+    },
+    get bodyBase () {
+        return y;
+    },
+    get bodyContent () {
+        return B;
+    },
+    get bodyWithFixedFooter () {
+        return W;
+    },
+    get boxed () {
+        return h;
+    },
+    get boxedBorder () {
+        return p;
+    },
+    get collapseDurationVar () {
+        return o;
+    },
+    get columnSeparator () {
+        return ye;
+    },
+    get columnsWhileMoving () {
+        return u;
+    },
+    get container () {
+        return c;
+    },
+    get contentDurationVar () {
+        return l;
+    },
+    get dialogPanel () {
+        return fe;
+    },
+    get dialogPanelTitle () {
+        return Te;
+    },
+    get doublePanelColumn () {
+        return Se;
+    },
+    get doublePanelContent () {
+        return Ae;
+    },
+    get doublePanelTitle () {
+        return Le;
+    },
+    get doublePanelTransitionClasses () {
+        return De;
+    },
+    get footerBase () {
+        return I;
+    },
+    get footerCollapsed () {
+        return E;
+    },
+    get footerFixed () {
+        return F;
+    },
+    get footerScrollDivider () {
+        return O;
+    },
+    get footerScrollSpacer () {
+        return P;
+    },
+    get headerBase () {
+        return C;
+    },
+    get headerControls () {
+        return g;
+    },
+    get headerControlsCollapsed () {
+        return f;
+    },
+    get headerNegativeBoxedBackground () {
+        return d;
+    },
+    get headerScrollSpacer () {
+        return V;
+    },
+    get headerSlot () {
+        return A;
+    },
+    get headerSlotCollapsed () {
+        return L;
+    },
+    get itemAccent () {
+        return _e;
+    },
+    get itemAccentVariant () {
+        return ie;
+    },
+    get itemAsset () {
+        return ve;
+    },
+    get itemAssetVariant () {
+        return ne;
+    },
+    get itemChevron () {
+        return ce;
+    },
+    get itemChevronCollapsed () {
+        return se;
+    },
+    get itemChevronRotated () {
+        return me;
+    },
+    get itemChevronVariant () {
+        return be;
+    },
+    get itemLabel () {
+        return ae;
+    },
+    get itemLabelCollapsed () {
+        return te;
+    },
+    get itemLabelContent () {
+        return re;
+    },
+    get itemLabelFrozenWidth () {
+        return xe;
+    },
+    get itemLabelKeepsWidth () {
+        return oe;
+    },
+    get itemRightSlot () {
+        return le;
+    },
+    get itemRightSlotCollapsed () {
+        return de;
+    },
+    get itemRow () {
+        return Q;
+    },
+    get itemTouchable () {
+        return X;
+    },
+    get itemTouchableCollapsed () {
+        return $;
+    },
+    get itemTouchableSelected () {
+        return ee;
+    },
+    get itemTouchableVariant () {
+        return Y;
+    },
+    get logo () {
+        return T;
+    },
+    get logoCollapsed () {
+        return D;
+    },
+    get logoDefault () {
+        return S;
+    },
+    get mainColumn () {
+        return s;
+    },
+    get panelRows () {
+        return ge;
+    },
+    get regionBackground () {
+        return b;
+    },
+    get scrollDivider () {
+        return w;
+    },
+    get scrollDividerVariant () {
+        return k;
+    },
+    get scrollSpacerDivider () {
+        return R;
+    },
+    get section () {
+        return N;
+    },
+    get sectionContent () {
+        return K;
+    },
+    get sectionDividerBottom () {
+        return J;
+    },
+    get sectionDividerTop () {
+        return Z;
+    },
+    get sectionTitle () {
+        return j;
+    },
+    get sectionTitleCollapsed () {
+        return H;
+    },
+    get sectionTitleContent () {
+        return z;
+    },
+    get sectionTitleHidden () {
+        return M;
+    },
+    get sectionTitleKeepsWidth () {
+        return U;
+    },
+    get sectionTitleVariant () {
+        return q;
+    },
+    get sidenavPanelWidthVar () {
+        return r;
+    },
+    get sidenavWidthVar () {
+        return a;
+    },
+    get standaloneItem () {
+        return G;
+    },
+    get withRightDivider () {
+        return m;
+    }
+});
+/* empty css                                     */ /* empty css                                       */ var i = 240, v = 72, n = 32, a = "var(--v17_5_e1inx40)", r = "var(--v17_5_e1inx41)", t = 350, x = 400, o = "var(--v17_5_e1inx42)", l = "var(--v17_5_e1inx43)", d = "v17_5_e1inx44", c = "v17_5_e1inx46 v17_5_e1inx45 v17_5_1y2v1nfre v17_5_1y2v1nfrj", s = "v17_5_e1inx48 v17_5_e1inx47 v17_5_1y2v1nfre v17_5_1y2v1nfrk", m = {
+    default: "v17_5_e1inx49",
+    brand: "v17_5_e1inx4a",
+    alternative: "v17_5_e1inx4b",
+    negative: "v17_5_e1inx4c",
+    media: "v17_5_e1inx4d"
+}, b = {
+    default: "v17_5_e1inx4e",
+    brand: "v17_5_e1inx4f",
+    alternative: "v17_5_e1inx4g",
+    negative: "v17_5_e1inx4h",
+    media: "v17_5_e1inx4i"
+}, u = "v17_5_e1inx4j", h = "v17_5_e1inx4k", p = "v17_5_e1inx4l", C = "v17_5_e1inx4m", g = "v17_5_e1inx4n", f = "v17_5_e1inx4o", T = "v17_5_e1inx4p", S = "v17_5_e1inx4q", D = "v17_5_e1inx4r", A = "v17_5_e1inx4s", L = "v17_5_e1inx4t", y = "v17_5_e1inx4u", V = "v17_5_e1inx4v", P = "v17_5_e1inx4w", R = "v17_5_e1inx4x", W = "v17_5_e1inx4y", B = "v17_5_e1inx4z", w = "v17_5_e1inx410", O = "v17_5_e1inx411", k = {
+    default: "v17_5_e1inx412",
+    brand: "v17_5_e1inx413",
+    alternative: "v17_5_e1inx414",
+    negative: "v17_5_e1inx415",
+    media: "v17_5_e1inx416"
+}, I = "v17_5_e1inx417", E = "v17_5_e1inx418", F = "v17_5_e1inx419", N = "v17_5_e1inx41a", j = "v17_5_e1inx41b", z = "v17_5_e1inx41c", q = {
+    default: "v17_5_e1inx41d",
+    brand: "v17_5_e1inx41e",
+    alternative: "v17_5_e1inx41f",
+    negative: "v17_5_e1inx41g",
+    media: "v17_5_e1inx41h"
+}, H = "v17_5_e1inx41i", M = "v17_5_e1inx41j", U = "v17_5_e1inx41k", K = "v17_5_e1inx41l", G = "v17_5_e1inx41m v17_5_e1inx41l", Z = "v17_5_e1inx41o v17_5_e1inx41n", J = "v17_5_e1inx41p v17_5_e1inx41n", Q = "v17_5_e1inx41q", X = "v17_5_e1inx41r", Y = {
+    default: "v17_5_e1inx41s",
+    brand: "v17_5_e1inx41t",
+    alternative: "v17_5_e1inx41u",
+    negative: "v17_5_e1inx41v",
+    media: "v17_5_e1inx41w"
+}, $ = "v17_5_e1inx41x", ee = {
+    default: "v17_5_e1inx41y",
+    brand: "v17_5_e1inx41z",
+    alternative: "v17_5_e1inx420",
+    negative: "v17_5_e1inx421",
+    media: "v17_5_e1inx422"
+}, _e = "v17_5_e1inx423", ie = {
+    default: "v17_5_e1inx424",
+    brand: "v17_5_e1inx425",
+    alternative: "v17_5_e1inx426",
+    negative: "v17_5_e1inx427",
+    media: "v17_5_e1inx428"
+}, ve = "v17_5_e1inx429", ne = {
+    default: "v17_5_e1inx42a",
+    brand: "v17_5_e1inx42b",
+    alternative: "v17_5_e1inx42c",
+    negative: "v17_5_e1inx42d",
+    media: "v17_5_e1inx42e"
+}, ae = "v17_5_e1inx42f", re = "v17_5_e1inx42g", te = "v17_5_e1inx42h", xe = "v17_5_e1inx42i", oe = "v17_5_e1inx42j", le = "v17_5_e1inx42k", de = "v17_5_e1inx42l", ce = "v17_5_e1inx42m", se = "v17_5_e1inx42n", me = "v17_5_e1inx42o", be = {
+    default: "v17_5_e1inx42p",
+    brand: "v17_5_e1inx42q",
+    alternative: "v17_5_e1inx42r",
+    negative: "v17_5_e1inx42s",
+    media: "v17_5_e1inx42t"
+}, ue = "v17_5_e1inx42u", he = {
+    enter: "v17_5_e1inx42v",
+    enterActive: "v17_5_e1inx42w",
+    exit: "v17_5_e1inx42x",
+    exitActive: "v17_5_e1inx42y"
+}, pe = "v17_5_e1inx42z", Ce = "v17_5_e1inx430", ge = "v17_5_e1inx431", fe = "v17_5_e1inx432", Te = "v17_5_e1inx433", Se = "v17_5_e1inx434", De = {
+    appear: "v17_5_e1inx435",
+    appearActive: "v17_5_e1inx436",
+    enter: "v17_5_e1inx435",
+    enterActive: "v17_5_e1inx436",
+    exit: "v17_5_e1inx437",
+    exitActive: "v17_5_e1inx438"
+}, Ae = "v17_5_e1inx439", Le = "v17_5_e1inx43a", ye = {
+    default: "v17_5_e1inx43b",
+    brand: "v17_5_e1inx43c",
+    alternative: "v17_5_e1inx43d",
+    negative: "v17_5_e1inx43e",
+    media: "v17_5_e1inx43f"
+};

package/dist/sidenav-bar.css.d.ts

@@ -0,0 +1,93 @@
+import type { NonDeprecatedVariant } from './theme-variant-context';
+export declare const DEFAULT_WIDTH = 240;
+export declare const COLLAPSED_WIDTH = 72;
+export declare const LOGO_SIZE = 32;
+export declare const sidenavWidthVar: `var(--${string})`;
+export declare const sidenavPanelWidthVar: `var(--${string})`;
+export declare const COLLAPSE_DURATION_MS = 350;
+export declare const CONTENT_DURATION_MS = 400;
+export declare const collapseDurationVar: `var(--${string})`;
+export declare const contentDurationVar: `var(--${string})`;
+export declare const headerNegativeBoxedBackground: string;
+export declare const container: string;
+export declare const mainColumn: string;
+export declare const withRightDivider: Record<NonDeprecatedVariant, string>;
+export declare const regionBackground: Record<NonDeprecatedVariant, string>;
+export declare const columnsWhileMoving: string;
+export declare const boxed: string;
+export declare const boxedBorder: string;
+export declare const headerBase: string;
+export declare const headerControls: string;
+export declare const headerControlsCollapsed: string;
+export declare const logo: string;
+export declare const logoDefault: string;
+export declare const logoCollapsed: string;
+export declare const headerSlot: string;
+export declare const headerSlotCollapsed: string;
+export declare const bodyBase: string;
+export declare const headerScrollSpacer: string;
+export declare const footerScrollSpacer: string;
+export declare const scrollSpacerDivider: string;
+export declare const bodyWithFixedFooter: string;
+export declare const bodyContent: string;
+export declare const scrollDivider: string;
+export declare const footerScrollDivider: string;
+export declare const scrollDividerVariant: Record<NonDeprecatedVariant, string>;
+export declare const footerBase: string;
+export declare const footerCollapsed: string;
+export declare const footerFixed: string;
+export declare const section: string;
+export declare const sectionTitle: string;
+export declare const sectionTitleContent: string;
+export declare const sectionTitleVariant: Record<NonDeprecatedVariant, string>;
+export declare const sectionTitleCollapsed: string;
+export declare const sectionTitleHidden: string;
+export declare const sectionTitleKeepsWidth: string;
+export declare const sectionContent: string;
+export declare const standaloneItem: string;
+export declare const sectionDividerTop: string;
+export declare const sectionDividerBottom: string;
+export declare const itemRow: string;
+export declare const itemTouchable: string;
+export declare const itemTouchableVariant: Record<NonDeprecatedVariant, string>;
+export declare const itemTouchableCollapsed: string;
+export declare const itemTouchableSelected: Record<NonDeprecatedVariant, string>;
+export declare const itemAccent: string;
+export declare const itemAccentVariant: Record<NonDeprecatedVariant, string>;
+export declare const itemAsset: string;
+export declare const itemAssetVariant: Record<NonDeprecatedVariant, string>;
+export declare const itemLabel: string;
+export declare const itemLabelContent: string;
+export declare const itemLabelCollapsed: string;
+export declare const itemLabelFrozenWidth: string;
+export declare const itemLabelKeepsWidth: string;
+export declare const itemRightSlot: string;
+export declare const itemRightSlotCollapsed: string;
+export declare const itemChevron: string;
+export declare const itemChevronCollapsed: string;
+export declare const itemChevronRotated: string;
+export declare const itemChevronVariant: Record<NonDeprecatedVariant, string>;
+export declare const accordionContainer: string;
+export declare const accordionTransitionClasses: {
+    enter: string;
+    enterActive: string;
+    exit: string;
+    exitActive: string;
+};
+export declare const accordion: string;
+export declare const accordionRows: string;
+export declare const panelRows: string;
+export declare const dialogPanel: string;
+export declare const dialogPanelTitle: string;
+export declare const doublePanelColumn: string;
+export declare const doublePanelTransitionClasses: {
+    appear: string;
+    appearActive: string;
+    enter: string;
+    enterActive: string;
+    exit: string;
+    exitActive: string;
+};
+export declare const doublePanelContent: string;
+export declare const doublePanelTitle: string;
+export declare const columnSeparator: Record<NonDeprecatedVariant, string>;