@clicoh/orion-library 1.2.0-beta.2 → 1.2.0-beta.20

package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type ExpMedalBadgeModifier = 'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled';
+export type ExpMedalBadgeProps = {
+    modifier: ExpMedalBadgeModifier;
+    /** One character or a tiny icon inside the medal. */
+    glyph?: ReactNode;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+/**
+ * Status badge drawn as an octagonal medal with a ribbon, pinned to a tinted
+ * pill. Same status modifiers as the core `Badge`; the label carries the
+ * message and the medal only decorates it.
+ *
+ * Outside an `ExpScope` it falls back to the core `Badge` with the same
+ * `modifier`.
+ *
+ * @component
+ * @example
+ * <ExpMedalBadge modifier="success" glyph="✓">Passed</ExpMedalBadge>
+ *
+ * @param {Object} props - The properties of the ExpMedalBadge component.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
+ * @param {ReactNode} [props.glyph='•'] - One character or a tiny icon inside the medal.
+ * @param {ReactNode} props.children - Label of the status.
+ *
+ * @returns {ReactNode} The medal badge, or a core `Badge` outside an `ExpScope`.
+ */
+export declare function ExpMedalBadge({ modifier, glyph, children, ...restProps }: ExpMedalBadgeProps): ReactNode;
+//# sourceMappingURL=ExpMedalBadge.d.ts.map

package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpMedalBadge.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/ExpMedalBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,qBAAqB,CAAC;IAChC,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAgDtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAW,EACX,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAkDhC"}

package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx

@@ -0,0 +1,87 @@
+'use client';
+import clsx from 'clsx';
+import { Badge } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+// The ribbon and the pill label use the strong shade: the base `warning`
+// and `success` hues sit below 4.5:1 on their tint.
+const colorMap = {
+    success: {
+        ring: 'bg-success',
+        ribbon: 'bg-success-strong',
+        pill: 'border-success bg-success-1 text-success-strong dark:bg-success/16 dark:text-success',
+    },
+    warning: {
+        ring: 'bg-amber',
+        ribbon: 'bg-amber-strong',
+        pill: 'border-amber bg-warning-1 text-amber-strong dark:bg-warning/16 dark:text-amber',
+    },
+    error: {
+        ring: 'bg-error',
+        ribbon: 'bg-error-strong',
+        pill: 'border-error bg-error-1 text-error-strong dark:bg-error/16 dark:text-error',
+    },
+    info: {
+        ring: 'bg-info',
+        ribbon: 'bg-info-dark-3 dark:bg-info',
+        pill: 'border-info bg-info-1 text-info-dark-3 dark:bg-info/16 dark:text-info',
+    },
+    progress: {
+        ring: 'bg-lavender',
+        ribbon: 'bg-lavender',
+        pill: 'border-lavender bg-lavender-2 text-lavender dark:bg-lavender/18 dark:text-lavender',
+    },
+    disabled: {
+        ring: 'bg-gray-1',
+        ribbon: 'bg-gray-1',
+        pill: 'border-gray-1 bg-gray-6 text-gray-1 dark:bg-gray-2/16 dark:text-gray-2',
+    },
+};
+const glyphColorMap = {
+    success: 'text-success',
+    warning: 'text-amber',
+    error: 'text-error',
+    info: 'text-info',
+    progress: 'text-lavender',
+    disabled: 'text-gray-1 dark:text-gray-2',
+};
+/**
+ * Status badge drawn as an octagonal medal with a ribbon, pinned to a tinted
+ * pill. Same status modifiers as the core `Badge`; the label carries the
+ * message and the medal only decorates it.
+ *
+ * Outside an `ExpScope` it falls back to the core `Badge` with the same
+ * `modifier`.
+ *
+ * @component
+ * @example
+ * <ExpMedalBadge modifier="success" glyph="✓">Passed</ExpMedalBadge>
+ *
+ * @param {Object} props - The properties of the ExpMedalBadge component.
+ * @param {'success' | 'warning' | 'error' | 'info' | 'progress' | 'disabled'} props.modifier - Status color.
+ * @param {ReactNode} [props.glyph='•'] - One character or a tiny icon inside the medal.
+ * @param {ReactNode} props.children - Label of the status.
+ *
+ * @returns {ReactNode} The medal badge, or a core `Badge` outside an `ExpScope`.
+ */
+export function ExpMedalBadge({ modifier, glyph = '•', children, ...restProps }) {
+    const inScope = useExpScope();
+    if (!inScope) {
+        return (<Badge {...restProps} modifier={modifier}>
+        {children}
+      </Badge>);
+    }
+    const colors = colorMap[modifier];
+    return (<span {...restProps} className={clsx('relative inline-flex h-[22px] items-center pl-2.5 whitespace-nowrap', restProps.className)}>
+      <span className={clsx('inline-flex h-[18px] items-center rounded-full border pr-2 pl-3.5 text-[11px] leading-4 font-semibold', colors.pill)}>
+        {children}
+      </span>
+      <span aria-hidden="true" className="absolute top-px left-0 size-5">
+        <span className={clsx('exp-medal-ribbon absolute top-3 left-[5px] h-[11px] w-2.5', colors.ribbon)}/>
+        <span className={clsx('exp-medal-octagon absolute inset-0', colors.ring)}/>
+        <span className={clsx('exp-medal-octagon absolute inset-0.5 flex items-center justify-center bg-white text-[10px] leading-none font-extrabold dark:bg-black', glyphColorMap[modifier])}>
+          {glyph}
+        </span>
+      </span>
+    </span>);
+}
+//# sourceMappingURL=ExpMedalBadge.jsx.map

package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpMedalBadge.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/ExpMedalBadge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD,yEAAyE;AACzE,oDAAoD;AACpD,MAAM,QAAQ,GAA+C;IAC3D,OAAO,EAAE;QACP,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,mBAAmB;QAC3B,IAAI,EAAE,sFAAsF;KAC7F;IACD,OAAO,EAAE;QACP,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,gFAAgF;KACvF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,iBAAiB;QACzB,IAAI,EAAE,4EAA4E;KACnF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,6BAA6B;QACrC,IAAI,EAAE,uEAAuE;KAC9E;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,oFAAoF;KAC3F;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,wEAAwE;KAC/E;CACF,CAAC;AAEF,MAAM,aAAa,GAA0C;IAC3D,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,eAAe;IACzB,QAAQ,EAAE,8BAA8B;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,QAAQ,EACR,GAAG,SAAS,EACO;IACnB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACvC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAElC,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,qEAAqE,EACrE,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,uGAAuG,EACvG,MAAM,CAAC,IAAI,CACZ,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,+BAA+B,CAChE;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,2DAA2D,EAC3D,MAAM,CAAC,MAAM,CACd,CAAC,EAEJ;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CAAC,oCAAoC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAErE;QAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,sIAAsI,EACtI,aAAa,CAAC,QAAQ,CAAC,CACxB,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/expresivo/ExpMedalBadge/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpMedalBadge } from './ExpMedalBadge';
+export type { ExpMedalBadgeModifier, ExpMedalBadgeProps, } from './ExpMedalBadge';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpMedalBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}

package/expresivo/ExpMedalBadge/index.js

@@ -0,0 +1,2 @@
+export { ExpMedalBadge } from './ExpMedalBadge';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpMedalBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpMedalBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/expresivo/ExpPageHero/ExpPageHero.d.ts

@@ -0,0 +1,82 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ExpMascotName } from '../ExpMascot/catalog';
+export type ExpPageHeroLevel = 'h3' | 'h4' | 'h5';
+export type ExpPageHeroBubble = {
+    title?: ReactNode;
+    text?: ReactNode;
+    badge?: ReactNode;
+};
+export type ExpPageHeroCollapse = {
+    collapsed: boolean;
+    onToggle: () => void;
+    /** Accessible name while collapsed, such as "Expand header". */
+    expandLabel: string;
+    /** Accessible name while expanded, such as "Collapse header". */
+    collapseLabel: string;
+};
+export type ExpPageHeroProps = {
+    title: ReactNode;
+    eyebrow?: ReactNode;
+    headingLevel?: ExpPageHeroLevel;
+    titleAdornment?: ReactNode;
+    description?: ReactNode;
+    /** Content under the description, such as stat chips or a data line. */
+    children?: ReactNode;
+    actions?: ReactNode;
+    mascot?: ExpMascotName;
+    bubble?: ExpPageHeroBubble;
+    collapse?: ExpPageHeroCollapse;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
+/**
+ * Page header for the top of a screen, meant for the `heading` slot of
+ * `DashboardTemplate`: an eyebrow, the title, a description, optional content
+ * under it, and a mascot with a speech bubble on the right.
+ *
+ * On wide screens it draws a band with a dotted lavender background. With
+ * `collapse`, a corner button tucks it down to the title, and the mascot hangs
+ * from a thread instead; the consumer keeps the state. On small screens it is
+ * a plain title row without eyebrow, mascot or bubble, and `collapse` has no
+ * effect.
+ *
+ * Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
+ * title, adornment, description, children and actions.
+ *
+ * @component
+ * @example
+ * <ExpPageHero
+ *   eyebrow="Case memory"
+ *   title="Cases"
+ *   description="Review past diagnoses before starting from scratch."
+ *   mascot="fixi-02-investigando"
+ *   bubble={{ title: 'Lead found', text: 'Search by ticket or symptom.' }}
+ * />
+ *
+ * @example
+ * // Collapsible, with the state kept by the consumer
+ * <ExpPageHero
+ *   title="Cases"
+ *   mascot="fixi-02-investigando"
+ *   collapse={{
+ *     collapsed,
+ *     onToggle: () => setCollapsed(!collapsed),
+ *     expandLabel: 'Expand header',
+ *     collapseLabel: 'Collapse header',
+ *   }}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpPageHero component.
+ * @param {ReactNode} props.title - Page title.
+ * @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
+ * @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
+ * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
+ * @param {ReactNode} [props.description] - Text under the title; hidden while collapsed.
+ * @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
+ * @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
+ * @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
+ * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
+ * @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
+ *
+ * @returns {ReactNode} The page header.
+ */
+export declare function ExpPageHero({ title, eyebrow, headingLevel, titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }: ExpPageHeroProps): ReactNode;
+//# sourceMappingURL=ExpPageHero.d.ts.map

package/expresivo/ExpPageHero/ExpPageHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPageHero.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,YAAmB,EACnB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAmH9B"}

package/expresivo/ExpPageHero/ExpPageHero.jsx

@@ -0,0 +1,113 @@
+'use client';
+import clsx from 'clsx';
+import { useId } from 'react';
+import { Heading } from '@clicoh/orion-library';
+import { ExpBubble } from '../ExpBubble/ExpBubble';
+import { ExpCollapseToggle } from '../ExpCollapseToggle/ExpCollapseToggle';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+/**
+ * Page header for the top of a screen, meant for the `heading` slot of
+ * `DashboardTemplate`: an eyebrow, the title, a description, optional content
+ * under it, and a mascot with a speech bubble on the right.
+ *
+ * On wide screens it draws a band with a dotted lavender background. With
+ * `collapse`, a corner button tucks it down to the title, and the mascot hangs
+ * from a thread instead; the consumer keeps the state. On small screens it is
+ * a plain title row without eyebrow, mascot or bubble, and `collapse` has no
+ * effect.
+ *
+ * Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
+ * title, adornment, description, children and actions.
+ *
+ * @component
+ * @example
+ * <ExpPageHero
+ *   eyebrow="Case memory"
+ *   title="Cases"
+ *   description="Review past diagnoses before starting from scratch."
+ *   mascot="fixi-02-investigando"
+ *   bubble={{ title: 'Lead found', text: 'Search by ticket or symptom.' }}
+ * />
+ *
+ * @example
+ * // Collapsible, with the state kept by the consumer
+ * <ExpPageHero
+ *   title="Cases"
+ *   mascot="fixi-02-investigando"
+ *   collapse={{
+ *     collapsed,
+ *     onToggle: () => setCollapsed(!collapsed),
+ *     expandLabel: 'Expand header',
+ *     collapseLabel: 'Collapse header',
+ *   }}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpPageHero component.
+ * @param {ReactNode} props.title - Page title.
+ * @param {ReactNode} [props.eyebrow] - Short uppercase line above the title, only on wide screens.
+ * @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h3'] - Heading level of the title.
+ * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
+ * @param {ReactNode} [props.description] - Text under the title; hidden while collapsed.
+ * @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
+ * @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
+ * @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
+ * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
+ * @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
+ *
+ * @returns {ReactNode} The page header.
+ */
+export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }) {
+    const options = useExpScopeOptions();
+    const generatedId = useId();
+    const id = restProps.id ?? generatedId;
+    const collapsed = !!collapse?.collapsed;
+    const hasAside = !!mascot || !!bubble;
+    const titleRow = (<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+      <Heading level={headingLevel}>{title}</Heading>
+      {titleAdornment}
+    </div>);
+    if (!options) {
+        return (<div {...restProps} className={clsx('flex flex-col items-start gap-3 sm:flex-row sm:justify-between', restProps.className)}>
+        <div className="flex min-w-0 flex-col gap-1">
+          {titleRow}
+          {!!description && (<div className="text-gray-1 dark:text-gray-2 text-sm">
+              {description}
+            </div>)}
+          {children}
+        </div>
+        {actions}
+      </div>);
+    }
+    return (<div {...restProps} id={id} data-state={collapsed ? 'collapsed' : 'expanded'} className={clsx('exp-hero relative flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between lg:gap-6', collapsed
+            ? 'lg:min-h-[72px] lg:py-3.5 lg:pr-30 lg:pl-6'
+            : 'lg:px-8 lg:py-6', !collapsed && !!collapse && !hasAside && 'lg:pr-20', restProps.className)}>
+      <div className="flex min-w-0 flex-col items-start gap-1 lg:flex-[1_1_420px]">
+        {!!eyebrow && (<p className={clsx('text-lavender dark:text-lavender-dark hidden text-xs leading-4 font-semibold tracking-[0.04em] uppercase', !collapsed && 'lg:block')}>
+            <span aria-hidden="true">✦ </span>
+            {eyebrow}
+          </p>)}
+        {titleRow}
+        {!!description && (<div className={clsx('text-gray-1 dark:text-gray-2 max-w-[680px] text-sm leading-[22px] text-pretty', collapsed && 'lg:hidden')}>
+            {description}
+          </div>)}
+        {!!children && (<div className={clsx('mt-2 w-full', collapsed && 'lg:hidden')}>
+            {children}
+          </div>)}
+      </div>
+      {actions}
+      {!!hasAside && (<div className={clsx('hidden shrink-0 items-center gap-4', !collapsed && 'lg:flex', !!collapse && 'lg:mr-7')}>
+          {!!bubble && (<ExpBubble tail="right" title={bubble.title} badge={bubble.badge}>
+              {bubble.text}
+            </ExpBubble>)}
+          {!!mascot && <ExpMascot name={mascot} size={104}/>}
+        </div>)}
+      {!!collapsed && !!mascot && (<span className="absolute top-0 right-18 hidden lg:block">
+          <ExpMascot name={mascot} size={56} motion="hang"/>
+        </span>)}
+      {!!collapse && (<div className="absolute top-5 right-5 hidden lg:block">
+          <ExpCollapseToggle collapsed={collapsed} onToggle={collapse.onToggle} expandLabel={collapse.expandLabel} collapseLabel={collapse.collapseLabel} aria-controls={id}/>
+        </div>)}
+    </div>);
+}
+//# sourceMappingURL=ExpPageHero.jsx.map

package/expresivo/ExpPageHero/ExpPageHero.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPageHero.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"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"}

package/expresivo/ExpPageHero/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpPageHero } from './ExpPageHero';
+export type { ExpPageHeroBubble, ExpPageHeroCollapse, ExpPageHeroLevel, ExpPageHeroProps, } from './ExpPageHero';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpPageHero/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,eAAe,CAAC"}

package/expresivo/ExpPageHero/index.js

@@ -0,0 +1,2 @@
+export { ExpPageHero } from './ExpPageHero';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpPageHero/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/expresivo/ExpPeek/ExpPeek.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ExpMascotName } from '../ExpMascot/catalog';
+export type ExpPeekProps = {
+    /** What the mascots peek from behind, usually a single button. */
+    children: ReactNode;
+    /**
+     * Mascots in the order they take turns, as groups of poses. Each turn shows
+     * one pose of its group, picked at random, and the order repeats.
+     */
+    cast?: readonly (readonly ExpMascotName[])[];
+    /** Width and height of the mascot, in pixels. */
+    size?: number;
+    /** Hides the mascot and stops the turns, for instance while the action runs. */
+    paused?: boolean;
+    /** How long each mascot stays out, in milliseconds. */
+    visibleMs?: number;
+    /** Pause between one mascot and the next, in milliseconds. */
+    gapMs?: number;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Wraps a button so the clicOH mascots peek out from behind its edges, one at
+ * a time: from the top edge at any point, or from the left or right side, with
+ * a random pose and tilt. Each one springs out, stays a few seconds, hides and
+ * makes room for the next, in the order of `cast`.
+ *
+ * The mascot sits behind the wrapped element, which covers its lower part;
+ * nothing is clipped, so leave some room around it. It is decorative and
+ * never takes clicks. Pause it while the action runs.
+ *
+ * Shows no mascot with reduced motion, outside an `ExpScope`, or when the
+ * scope hides mascots; the wrapped element renders as usual.
+ *
+ * @component
+ * @example
+ * <ExpPeek paused={isSending} className="w-full">
+ *   <Button type="submit" className="w-full">Sign in</Button>
+ * </ExpPeek>
+ *
+ * @example
+ * // Only Fixi, bigger and slower
+ * <ExpPeek cast={[['fixi-01-feliz', 'fixi-06-celebrando']]} size={56} visibleMs={4000}>
+ *   <Button>Fix it</Button>
+ * </ExpPeek>
+ *
+ * @param {Object} props - The properties of the ExpPeek component.
+ * @param {ReactNode} props.children - What the mascots peek from behind, usually a single button.
+ * @param {ExpMascotName[][]} [props.cast] - Mascots in turn order, as groups of poses; each turn picks one pose of its group. Defaults to Oculus searching, Bugi showing up and Fixi fixing.
+ * @param {number} [props.size=44] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.paused=false] - Hides the mascot and stops the turns.
+ * @param {number} [props.visibleMs=3000] - How long each mascot stays out, in milliseconds.
+ * @param {number} [props.gapMs=2000] - Pause between one mascot and the next, in milliseconds.
+ *
+ * @returns {ReactNode} The wrapped element with the mascots behind it.
+ */
+export declare function ExpPeek({ children, cast, size, paused, visibleMs, gapMs, className, ...restProps }: ExpPeekProps): ReactNode;
+//# sourceMappingURL=ExpPeek.d.ts.map

package/expresivo/ExpPeek/ExpPeek.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPeek.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/ExpPeek.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAe1D,MAAM,MAAM,YAAY,GAAG;IACzB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,CAAC;IAC7C,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAoDrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAiB,EACjB,IAAS,EACT,MAAc,EACd,SAAgB,EAChB,KAAY,EACZ,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CA6D1B"}

package/expresivo/ExpPeek/ExpPeek.jsx

@@ -0,0 +1,131 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useState, } from 'react';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+/** Oculus searches, Bugi shows up, Fixi fixes it. */
+const STORY_CAST = [
+    [
+        'oculus-02-investigando',
+        'oculus-07-buscando-rapido',
+        'oculus-04-analizando-documento',
+    ],
+    ['bugi-01-alerta', 'bugi-05-sorprendido', 'bugi-02-investigando'],
+    ['fixi-04-reparando', 'fixi-01-feliz', 'fixi-06-celebrando'],
+];
+/** The top edge comes up three times as often as each side. */
+const SPOTS = ['top', 'top', 'top', 'left', 'right'];
+const FIRST_DELAY_MS = 900;
+const RISE_DELAY_MS = 40;
+const HIDE_MS = 420;
+const BOUNCE = 'cubic-bezier(.34,1.56,.64,1)';
+const SINK = 'cubic-bezier(.55,0,.75,.2)';
+function pick(items) {
+    return items[Math.floor(Math.random() * items.length)];
+}
+function peekStyle(peek, size, out) {
+    const sideways = { top: '50%', marginTop: -size / 2 };
+    const place = {
+        top: { top: 0, left: `calc(${12 + peek.along * 74}% - ${size / 2}px)` },
+        left: { ...sideways, left: 10 },
+        right: { ...sideways, right: 10 },
+    };
+    const outTransform = {
+        top: `translateY(-${Math.round(size * 0.68)}px) rotate(${peek.tilt}deg)`,
+        left: `translateX(-${size * 0.95}px) rotate(-10deg)`,
+        right: `translateX(${size * 0.95}px) rotate(10deg)`,
+    };
+    return {
+        width: size,
+        height: size,
+        ...place[peek.spot],
+        transformOrigin: peek.spot === 'top' ? '50% 100%' : '50% 50%',
+        transform: out ? outTransform[peek.spot] : 'none',
+        opacity: out ? 1 : 0,
+        transition: out
+            ? `transform 520ms ${BOUNCE}, opacity 80ms linear`
+            : `transform 360ms ${SINK}, opacity 120ms linear 260ms`,
+    };
+}
+/**
+ * Wraps a button so the clicOH mascots peek out from behind its edges, one at
+ * a time: from the top edge at any point, or from the left or right side, with
+ * a random pose and tilt. Each one springs out, stays a few seconds, hides and
+ * makes room for the next, in the order of `cast`.
+ *
+ * The mascot sits behind the wrapped element, which covers its lower part;
+ * nothing is clipped, so leave some room around it. It is decorative and
+ * never takes clicks. Pause it while the action runs.
+ *
+ * Shows no mascot with reduced motion, outside an `ExpScope`, or when the
+ * scope hides mascots; the wrapped element renders as usual.
+ *
+ * @component
+ * @example
+ * <ExpPeek paused={isSending} className="w-full">
+ *   <Button type="submit" className="w-full">Sign in</Button>
+ * </ExpPeek>
+ *
+ * @example
+ * // Only Fixi, bigger and slower
+ * <ExpPeek cast={[['fixi-01-feliz', 'fixi-06-celebrando']]} size={56} visibleMs={4000}>
+ *   <Button>Fix it</Button>
+ * </ExpPeek>
+ *
+ * @param {Object} props - The properties of the ExpPeek component.
+ * @param {ReactNode} props.children - What the mascots peek from behind, usually a single button.
+ * @param {ExpMascotName[][]} [props.cast] - Mascots in turn order, as groups of poses; each turn picks one pose of its group. Defaults to Oculus searching, Bugi showing up and Fixi fixing.
+ * @param {number} [props.size=44] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.paused=false] - Hides the mascot and stops the turns.
+ * @param {number} [props.visibleMs=3000] - How long each mascot stays out, in milliseconds.
+ * @param {number} [props.gapMs=2000] - Pause between one mascot and the next, in milliseconds.
+ *
+ * @returns {ReactNode} The wrapped element with the mascots behind it.
+ */
+export function ExpPeek({ children, cast = STORY_CAST, size = 44, paused = false, visibleMs = 3000, gapMs = 2000, className, ...restProps }) {
+    const options = useExpScopeOptions();
+    const [peek, setPeek] = useState(null);
+    const [out, setOut] = useState(false);
+    const active = !!options && options.mascots !== 'hidden' && !paused;
+    const castKey = cast.map((group) => group.join(',')).join('|');
+    useEffect(() => {
+        const groups = castKey
+            .split('|')
+            .map((group) => group.split(','))
+            .filter((group) => group[0] !== '');
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!active || reduceMotion || groups.length === 0)
+            return;
+        let turn = 0;
+        const timers = [];
+        const later = (run, ms) => {
+            timers.push(setTimeout(run, ms));
+        };
+        const next = () => {
+            const group = groups[turn % groups.length];
+            turn += 1;
+            setPeek({
+                turn,
+                name: pick(group),
+                spot: pick(SPOTS),
+                along: Math.random(),
+                tilt: Math.round((Math.random() - 0.5) * 24),
+            });
+            later(() => setOut(true), RISE_DELAY_MS);
+            later(() => setOut(false), RISE_DELAY_MS + visibleMs);
+            later(next, RISE_DELAY_MS + visibleMs + HIDE_MS + gapMs);
+        };
+        later(next, FIRST_DELAY_MS);
+        return () => {
+            timers.forEach(clearTimeout);
+            setOut(false);
+        };
+    }, [active, castKey, visibleMs, gapMs]);
+    return (<div {...restProps} className={clsx('relative isolate', className)}>
+      {!!peek && (<span key={peek.turn} aria-hidden="true" className="pointer-events-none absolute z-0" style={peekStyle(peek, size, out && active)}>
+          <ExpMascot name={peek.name} size={size}/>
+        </span>)}
+      <div className="relative z-1">{children}</div>
+    </div>);
+}
+//# sourceMappingURL=ExpPeek.jsx.map

package/expresivo/ExpPeek/ExpPeek.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPeek.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/ExpPeek.tsx"],"names":[],"mappings":"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"}

package/expresivo/ExpPeek/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpPeek } from './ExpPeek';
+export type { ExpPeekProps } from './ExpPeek';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpPeek/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/expresivo/ExpPeek/index.js

@@ -0,0 +1,2 @@
+export { ExpPeek } from './ExpPeek';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpPeek/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpPeek/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/expresivo/ExpPillButton/ExpPillButton.d.ts

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ExpPillButtonTone = 'brand' | 'soft';
+export type ExpPillButtonIcon = 'lens' | 'sync' | 'enter' | 'none';
+export type ExpPillButtonProps = {
+    tone?: ExpPillButtonTone;
+    icon?: ExpPillButtonIcon;
+    /** Blocks the button and animates its glyph while the action runs. */
+    busy?: boolean;
+    /** Label shown while `busy`. Defaults to `children`. */
+    busyLabel?: string;
+    /** Takes the full width of its container. */
+    block?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Light pill-shaped call to action, the same 44px height as the core
+ * `Button`. `brand` is a filled lavender pill that turns into the clicOH
+ * gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
+ * for secondary actions, such as a button inside a field.
+ *
+ * Outside an `ExpScope` it falls back to the core `Button`: `brand` maps to
+ * `principal` and `soft` to `second`.
+ *
+ * @component
+ * @example
+ * <ExpPillButton onClick={search}>Search</ExpPillButton>
+ *
+ * @example
+ * <ExpPillButton tone="soft" icon="sync" busy={isSyncing} busyLabel="Syncing…">
+ *   Sync
+ * </ExpPillButton>
+ *
+ * @param {Object} props - The properties of the ExpPillButton component.
+ * @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
+ * @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
+ * @param {string} [props.busyLabel] - Label shown while `busy`.
+ * @param {boolean} [props.block=false] - Takes the full width of its container.
+ * @param {ReactNode} props.children - Label of the action.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} restProps - Additional properties for the button element.
+ *
+ * @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
+ */
+export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
+//# sourceMappingURL=ExpPillButton.d.ts.map

package/expresivo/ExpPillButton/ExpPillButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AA+B5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAY,EACZ,SAAS,EACT,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CA+DhC"}