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

package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx

@@ -0,0 +1,160 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useState, } from 'react';
+import { FiCheck } from 'react-icons/fi';
+import { Each, Show, Stepper } from '@clicoh/orion-library';
+import { ExpMascot } from '../ExpMascot';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+const STEP_MS = 1100;
+const stateOf = (index, current) => {
+    if (index < current)
+        return 'done';
+    if (index === current)
+        return 'current';
+    return 'pending';
+};
+const dotMap = {
+    done: 'size-3.5 border-lavender bg-lavender dark:border-lavender-dark dark:bg-lavender-dark text-white',
+    current: 'size-[18px] border-lavender bg-white shadow-[0_0_0_5px_rgba(106,93,249,0.18)] dark:border-lavender-dark dark:bg-black',
+    pending: 'size-3.5 border-gray-4 bg-white dark:border-gray-1 dark:bg-black',
+};
+const labelMap = {
+    done: 'font-medium text-black dark:text-white',
+    current: 'font-semibold text-lavender dark:text-lavender-dark',
+    pending: 'font-medium text-gray-1 dark:text-gray-2',
+};
+const alignOf = (index, count) => {
+    if (index === 0)
+        return 'items-start text-left';
+    if (index === count - 1)
+        return 'items-end text-right';
+    return 'items-center text-center';
+};
+/**
+ * Progress line with a mascot that travels to the current stage and takes
+ * that stage's pose. Reached stages get a check and the travelled part of
+ * the line fills with the clicOH gradient. Like the core `Stepper`, it only
+ * displays progress: the consumer owns `current`.
+ *
+ * The line and the mascot are decorative; the stages are an ordered list
+ * whose current item carries `aria-current="step"`.
+ *
+ * Labels sit under their dots, so the first and last columns are half as wide
+ * as the rest. When the track is narrower than 28rem every label gets the same
+ * width instead, so the end labels don't spill onto their neighbours.
+ *
+ * Outside an `ExpScope` it falls back to the core `Stepper`. When the scope
+ * hides mascots, the line renders without its traveller.
+ *
+ * @component
+ * @example
+ * <ExpJourneyTrack
+ *   ariaLabel="Progress"
+ *   stateLabels={{ done: 'done', current: 'in progress', pending: 'pending' }}
+ *   current={1}
+ *   stages={[
+ *     { id: 'read', label: 'Read', mascot: 'oculus-04-analizando-documento' },
+ *     { id: 'search', label: 'Search', mascot: 'oculus-07-buscando-rapido' },
+ *     { id: 'answer', label: 'Answer', mascot: 'oculus-08-satisfecho' },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the ExpJourneyTrack component.
+ * @param {ExpJourneyStage[]} props.stages - Stages in order, each with `id`, `label`, `mascot`, and optional `meta` and `onSelect`.
+ * @param {number} props.current - Index of the current stage.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ * @param {ExpJourneyStateLabels} props.stateLabels - Words for `done`, `current` and `pending`.
+ * @param {number} [props.mascotSize=88] - Width and height of the mascot, in pixels.
+ * @param {boolean} [props.autoplay=false] - Walks from the first stage to `current` once when it mounts. Off with reduced motion.
+ *
+ * @returns {ReactNode} The journey track, a core `Stepper` outside an `ExpScope`, or `null` without stages.
+ */
+export function ExpJourneyTrack({ stages, current, ariaLabel, stateLabels, mascotSize = 88, autoplay = false, ...restProps }) {
+    const options = useExpScopeOptions();
+    const [step, setStep] = useState(autoplay ? 0 : current);
+    useEffect(() => {
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!autoplay || reduceMotion) {
+            setStep(current);
+            return;
+        }
+        setStep(0);
+        let index = 0;
+        const timer = setInterval(() => {
+            index += 1;
+            setStep(Math.min(index, current));
+            if (index >= current)
+                clearInterval(timer);
+        }, STEP_MS);
+        return () => clearInterval(timer);
+    }, [autoplay, current, stages.length]);
+    if (stages.length === 0)
+        return null;
+    if (!options) {
+        return (<Stepper ariaLabel={ariaLabel} stateLabels={{ ...stateLabels, skipped: stateLabels.pending }} steps={stages.map((stage, index) => ({
+                id: stage.id,
+                label: stage.label,
+                state: stateOf(index, current),
+            }))}/>);
+    }
+    const showMascot = options.mascots === 'shown';
+    const lastIndex = Math.max(1, stages.length - 1);
+    const percent = (Math.min(step, lastIndex) / lastIndex) * 100;
+    const labelColumns = stages.length > 2
+        ? `minmax(0, 1fr) repeat(${stages.length - 2}, minmax(0, 2fr)) minmax(0, 1fr)`
+        : `repeat(${stages.length}, minmax(0, 1fr))`;
+    return (<div {...restProps} className={clsx('@container relative', restProps.className)}>
+      <div aria-hidden="true" className="relative" style={{ paddingTop: showMascot ? mascotSize + 8 : 0 }}>
+        {!!showMascot && (<div className="exp-float absolute top-0 transition-[left] duration-900 ease-[cubic-bezier(.65,0,.35,1)] motion-reduce:transition-none" style={{
+                width: mascotSize,
+                height: mascotSize,
+                left: `clamp(0px, calc(${percent}% - ${mascotSize / 2}px), calc(100% - ${mascotSize}px))`,
+            }}>
+            <Each of={stages} render={(stage, index) => (<span key={stage.id} className={clsx('absolute inset-0 transition-[opacity,scale] delay-200 duration-300 motion-reduce:transition-none', index === step
+                    ? 'scale-100 opacity-100'
+                    : 'scale-85 opacity-0')}>
+                  <ExpMascot name={stage.mascot} size={mascotSize}/>
+                </span>)}/>
+          </div>)}
+        <div className="bg-gray-5 dark:bg-gray-dark-1 relative mx-1.5 h-1.5 rounded-full">
+          <span className="from-lavender to-violet absolute inset-y-0 left-0 rounded-full bg-linear-90 transition-[width] duration-900 ease-[cubic-bezier(.65,0,.35,1)] motion-reduce:transition-none" style={{ width: `${percent}%` }}/>
+          <Each of={stages} render={(stage, index) => {
+            const state = stateOf(index, step);
+            return (<span key={stage.id} className={clsx('absolute top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 transition-all duration-300', dotMap[state])} style={{ left: `${(index / lastIndex) * 100}%` }}>
+                  {state === 'done' && (<FiCheck strokeWidth={4} className="size-2"/>)}
+                </span>);
+        }}/>
+        </div>
+      </div>
+      <ol aria-label={ariaLabel} className="mt-3.5 grid grid-cols-(--exp-track-columns) @max-md:auto-cols-fr @max-md:grid-flow-col @max-md:grid-cols-none @max-md:gap-x-1" style={{ '--exp-track-columns': labelColumns }}>
+        <Each of={stages} render={(stage, index) => {
+            const state = stateOf(index, current);
+            const isReached = index <= current;
+            const body = (<>
+                <span className={clsx('text-xs leading-4 transition-colors duration-300', labelMap[stateOf(index, step)])}>
+                  {stage.label}
+                  <span className="sr-only">, {stateLabels[state]}</span>
+                </span>
+                {!!stage.meta && (<span className={clsx('text-gray-1 dark:text-gray-2 text-[11px] leading-4 transition-opacity duration-300', index <= step ? 'opacity-100' : 'opacity-0')}>
+                    {stage.meta}
+                  </span>)}
+              </>);
+            return (<li key={stage.id} aria-current={state === 'current' ? 'step' : undefined} className="flex min-w-0">
+                <Show>
+                  <Show.When isTrue={Boolean(stage.onSelect) && isReached}>
+                    <button type="button" onClick={stage.onSelect} className={clsx('focus-visible:ring-lavender -mx-1.5 -my-1 flex w-full flex-col gap-0.5 rounded-lg px-1.5 py-1 focus-visible:ring-2 focus-visible:outline-none', alignOf(index, stages.length))}>
+                      {body}
+                    </button>
+                  </Show.When>
+                  <Show.Else>
+                    <span className={clsx('flex w-full flex-col gap-0.5', alignOf(index, stages.length))}>
+                      {body}
+                    </span>
+                  </Show.Else>
+                </Show>
+              </li>);
+        }}/>
+      </ol>
+    </div>);
+}
+//# sourceMappingURL=ExpJourneyTrack.jsx.map

package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpJourneyTrack.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/ExpJourneyTrack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAqB,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAsB,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAmC1D,MAAM,OAAO,GAAG,IAAI,CAAC;AAErB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,OAAe,EAAgB,EAAE;IAC/D,IAAI,KAAK,GAAG,OAAO;QAAE,OAAO,MAAM,CAAC;IACnC,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,SAAS,CAAC;IACxC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,MAAM,GAAiC;IAC3C,IAAI,EAAE,iGAAiG;IACvG,OAAO,EACL,uHAAuH;IACzH,OAAO,EAAE,kEAAkE;CAC5E,CAAC;AAEF,MAAM,QAAQ,GAAiC;IAC7C,IAAI,EAAE,wCAAwC;IAC9C,OAAO,EAAE,qDAAqD;IAC9D,OAAO,EAAE,0CAA0C;CACpD,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,KAAa,EAAU,EAAE;IACvD,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,uBAAuB,CAAC;IAChD,IAAI,KAAK,KAAK,KAAK,GAAG,CAAC;QAAE,OAAO,sBAAsB,CAAC;IACvD,OAAO,0BAA0B,CAAC;AACpC,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,MAAM,EACN,OAAO,EACP,SAAS,EACT,WAAW,EACX,UAAU,GAAG,EAAE,EACf,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACS;IACrB,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IACrC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CACpC,kCAAkC,CACnC,CAAC,OAAO,CAAC;QAEV,IAAI,CAAC,QAAQ,IAAI,YAAY,EAAE,CAAC;YAC9B,OAAO,CAAC,OAAO,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,OAAO,CAAC,CAAC,CAAC,CAAC;QACX,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,KAAK,IAAI,CAAC,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,IAAI,OAAO;gBAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAEvC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAErC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,OAAO,CACN,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,WAAW,CAAC,CAAC,EAAE,GAAG,WAAW,EAAE,OAAO,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAC9D,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;gBACnC,EAAE,EAAE,KAAK,CAAC,EAAE;gBACZ,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC;aAC/B,CAAC,CAAC,CAAC,EACJ,CACH,CAAC;IACJ,CAAC;IAED,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC;IAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC;IAC9D,MAAM,YAAY,GAChB,MAAM,CAAC,MAAM,GAAG,CAAC;QACf,CAAC,CAAC,yBAAyB,MAAM,CAAC,MAAM,GAAG,CAAC,kCAAkC;QAC9E,CAAC,CAAC,UAAU,MAAM,CAAC,MAAM,mBAAmB,CAAC;IAEjD,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAE5D;MAAA,CAAC,GAAG,CACF,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,UAAU,CACpB,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAEvD;QAAA,CAAC,CAAC,CAAC,UAAU,IAAI,CACf,CAAC,GAAG,CACF,SAAS,CAAC,wHAAwH,CAClI,KAAK,CAAC,CAAC;gBACL,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,UAAU;gBAClB,IAAI,EAAE,mBAAmB,OAAO,OAAO,UAAU,GAAG,CAAC,oBAAoB,UAAU,MAAM;aAC1F,CAAC,CAEF;YAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,MAAM,CAAC,CACX,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,kGAAkG,EAClG,KAAK,KAAK,IAAI;oBACZ,CAAC,CAAC,uBAAuB;oBACzB,CAAC,CAAC,oBAAoB,CACzB,CAAC,CAEF;kBAAA,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAClD;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC,EAEN;UAAA,EAAE,GAAG,CAAC,CACP,CACD;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,kEAAkE,CAC/E;UAAA,CAAC,IAAI,CACH,SAAS,CAAC,4KAA4K,CACtL,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC,EAElC;UAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,MAAM,CAAC,CACX,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACvB,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAEnC,OAAO,CACL,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,uIAAuI,EACvI,MAAM,CAAC,KAAK,CAAC,CACd,CAAC,CACF,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC,CAEjD;kBAAA,CAAC,KAAK,KAAK,MAAM,IAAI,CACnB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,EAAG,CAC/C,CACH;gBAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,CAAC,CAAC,EAEN;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,EAAE,CACD,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,SAAS,CAAC,+HAA+H,CACzI,KAAK,CAAC,CAAC,EAAE,qBAAqB,EAAE,YAAY,EAAmB,CAAC,CAEhE;QAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,MAAM,CAAC,CACX,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACvB,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;YACtC,MAAM,SAAS,GAAG,KAAK,IAAI,OAAO,CAAC;YACnC,MAAM,IAAI,GAAG,CACX,EACE;gBAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,kDAAkD,EAClD,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAC/B,CAAC,CAEF;kBAAA,CAAC,KAAK,CAAC,KAAK,CACZ;kBAAA,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CACxD;gBAAA,EAAE,IAAI,CACN;gBAAA,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CACf,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,oFAAoF,EACpF,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC5C,CAAC,CAEF;oBAAA,CAAC,KAAK,CAAC,IAAI,CACb;kBAAA,EAAE,IAAI,CAAC,CACR,CACH;cAAA,GAAG,CACJ,CAAC;YAEF,OAAO,CACL,CAAC,EAAE,CACD,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACd,YAAY,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CACvD,SAAS,CAAC,cAAc,CAExB;gBAAA,CAAC,IAAI,CACH;kBAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC,CACtD;oBAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CACb,+IAA+I,EAC/I,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAC9B,CAAC,CAEF;sBAAA,CAAC,IAAI,CACP;oBAAA,EAAE,MAAM,CACV;kBAAA,EAAE,IAAI,CAAC,IAAI,CACX;kBAAA,CAAC,IAAI,CAAC,IAAI,CACR;oBAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,8BAA8B,EAC9B,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAC9B,CAAC,CAEF;sBAAA,CAAC,IAAI,CACP;oBAAA,EAAE,IAAI,CACR;kBAAA,EAAE,IAAI,CAAC,IAAI,CACb;gBAAA,EAAE,IAAI,CACR;cAAA,EAAE,EAAE,CAAC,CACN,CAAC;QACJ,CAAC,CAAC,EAEN;MAAA,EAAE,EAAE,CACN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/expresivo/ExpJourneyTrack/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpJourneyTrack } from './ExpJourneyTrack';
+export type { ExpJourneyStage, ExpJourneyStateLabels, ExpJourneyTrackProps, } from './ExpJourneyTrack';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpJourneyTrack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC"}

package/expresivo/ExpJourneyTrack/index.js

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

package/expresivo/ExpJourneyTrack/index.js.map

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

package/expresivo/ExpKeyButton/ExpKeyButton.d.ts

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ExpKeyButtonTone = 'brand' | 'white' | 'black';
+export type ExpKeyButtonSize = 'lg' | 'sm';
+export type ExpKeyButtonIcon = 'lens' | 'sync' | 'none';
+export type ExpKeyButtonProps = {
+    tone?: ExpKeyButtonTone;
+    size?: ExpKeyButtonSize;
+    icon?: ExpKeyButtonIcon;
+    /** Shows an arrow after the label that steps forward on hover. */
+    arrow?: boolean;
+    /** Sinks the key and blocks it 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>;
+/**
+ * Call to action shaped like a physical key: a gradient face over a darker
+ * edge that gives it depth. It lifts on hover, sinks when pressed and stays
+ * sunk while `busy`, with a shine crossing its face. Use one per screen, for
+ * the main action.
+ *
+ * Outside an `ExpScope` it falls back to the core `Button`: `white` maps to
+ * `second`, the other tones to `principal`, and `sm` to the `field` size.
+ *
+ * @component
+ * @example
+ * <ExpKeyButton onClick={start}>Start</ExpKeyButton>
+ *
+ * @example
+ * // Compact, in a row of form controls, without icon or arrow
+ * <ExpKeyButton size="sm" tone="white" icon="none" arrow={false}>Clear</ExpKeyButton>
+ *
+ * @param {Object} props - The properties of the ExpKeyButton component.
+ * @param {'brand' | 'white' | 'black'} [props.tone='brand'] - Color of the key face.
+ * @param {'lg' | 'sm'} [props.size='lg'] - `lg` is 52px tall; `sm` is 36px, the height of `Input`, `Select` and `DatePicker`.
+ * @param {'lens' | 'sync' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {boolean} [props.arrow=true] - Shows an arrow after the label.
+ * @param {boolean} [props.busy=false] - Sinks the key and blocks it while the action runs.
+ * @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 key, or a core `Button` outside an `ExpScope`.
+ */
+export declare function ExpKeyButton({ tone, size, icon, arrow, busy, busyLabel, block, disabled, children, ...restProps }: ExpKeyButtonProps): ReactNode;
+//# sourceMappingURL=ExpKeyButton.d.ts.map

package/expresivo/ExpKeyButton/ExpKeyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpKeyButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpKeyButton/ExpKeyButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,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;AAY5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAc,EACd,IAAW,EACX,IAAa,EACb,KAAY,EACZ,IAAY,EACZ,SAAS,EACT,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAmD/B"}

package/expresivo/ExpKeyButton/ExpKeyButton.jsx

@@ -0,0 +1,60 @@
+'use client';
+import clsx from 'clsx';
+import { FiArrowRight, FiRefreshCw, FiSearch } from 'react-icons/fi';
+import { Button } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+import { ArrowGlyph, LensGlyph, SyncBadgeGlyph } from '../shared/glyphs';
+const fallbackIconMap = {
+    lens: <FiSearch />,
+    sync: <FiRefreshCw />,
+    none: undefined,
+};
+const glyphSizeMap = { lg: 32, sm: 24 };
+const arrowSizeMap = { lg: 20, sm: 16 };
+/**
+ * Call to action shaped like a physical key: a gradient face over a darker
+ * edge that gives it depth. It lifts on hover, sinks when pressed and stays
+ * sunk while `busy`, with a shine crossing its face. Use one per screen, for
+ * the main action.
+ *
+ * Outside an `ExpScope` it falls back to the core `Button`: `white` maps to
+ * `second`, the other tones to `principal`, and `sm` to the `field` size.
+ *
+ * @component
+ * @example
+ * <ExpKeyButton onClick={start}>Start</ExpKeyButton>
+ *
+ * @example
+ * // Compact, in a row of form controls, without icon or arrow
+ * <ExpKeyButton size="sm" tone="white" icon="none" arrow={false}>Clear</ExpKeyButton>
+ *
+ * @param {Object} props - The properties of the ExpKeyButton component.
+ * @param {'brand' | 'white' | 'black'} [props.tone='brand'] - Color of the key face.
+ * @param {'lg' | 'sm'} [props.size='lg'] - `lg` is 52px tall; `sm` is 36px, the height of `Input`, `Select` and `DatePicker`.
+ * @param {'lens' | 'sync' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {boolean} [props.arrow=true] - Shows an arrow after the label.
+ * @param {boolean} [props.busy=false] - Sinks the key and blocks it while the action runs.
+ * @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 key, or a core `Button` outside an `ExpScope`.
+ */
+export function ExpKeyButton({ tone = 'brand', size = 'lg', icon = 'lens', arrow = true, busy = false, busyLabel, block = false, disabled = false, children, ...restProps }) {
+    const inScope = useExpScope();
+    const label = busy && busyLabel ? busyLabel : children;
+    if (!inScope) {
+        return (<Button {...restProps} modifier={tone === 'white' ? 'second' : 'principal'} size={size === 'lg' ? 'md' : 'field'} iconL={fallbackIconMap[icon]} iconR={arrow ? <FiArrowRight /> : undefined} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx(block && 'w-full', restProps.className)}>
+        {label}
+      </Button>);
+    }
+    return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} data-tone={tone} data-size={size} data-icon={icon} data-state={disabled ? 'disabled' : busy ? 'busy' : 'idle'} className={clsx('exp-key', block && 'exp-key--block', restProps.className)}>
+      {!!busy && <span aria-hidden="true" className="exp-key-shine"/>}
+      {icon === 'lens' && (<LensGlyph size={glyphSizeMap[size]} busy={busy} disabled={disabled}/>)}
+      {icon === 'sync' && (<SyncBadgeGlyph size={glyphSizeMap[size]} busy={busy} disabled={disabled}/>)}
+      <span className="exp-key-label">{label}</span>
+      {!!arrow && <ArrowGlyph size={arrowSizeMap[size]}/>}
+    </button>);
+}
+//# sourceMappingURL=ExpKeyButton.jsx.map

package/expresivo/ExpKeyButton/ExpKeyButton.jsx.map

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

package/expresivo/ExpKeyButton/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpKeyButton } from './ExpKeyButton';
+export type { ExpKeyButtonIcon, ExpKeyButtonProps, ExpKeyButtonSize, ExpKeyButtonTone, } from './ExpKeyButton';
+//# sourceMappingURL=index.d.ts.map

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

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

package/expresivo/ExpKeyButton/index.js

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

package/expresivo/ExpKeyButton/index.js.map

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

package/expresivo/ExpLadder/ExpLadder.d.ts

@@ -0,0 +1,42 @@
+import { type StepperStep, type StepperStepState } from '@clicoh/orion-library';
+import type { ReactNode } from 'react';
+export type ExpLadderProps = {
+    /** Steps in order, with the same shape as the core `Stepper`. */
+    steps: StepperStep[];
+    /** Accessible name of the list. */
+    ariaLabel: string;
+    /** Word for each state, read after every label. A skipped step also shows it. */
+    stateLabels: Record<StepperStepState, string>;
+    className?: string;
+};
+/**
+ * Vertical progress drawn as a staircase: every step that was not skipped
+ * sits a little further in, with a diamond in place of the dot. The current
+ * step is tinted lavender; skipped steps are struck through and say so.
+ *
+ * Outside an `ExpScope` it falls back to the core `Stepper`, vertical and
+ * `sm`, with the same steps.
+ *
+ * @component
+ * @example
+ * <ExpLadder
+ *   ariaLabel="Case lifecycle"
+ *   stateLabels={{ done: 'done', current: 'current', pending: 'pending', skipped: 'skipped' }}
+ *   steps={[
+ *     { id: 'new', label: 'New', state: 'done' },
+ *     { id: 'review', label: 'In review', state: 'skipped' },
+ *     { id: 'fixed', label: 'Fixed', state: 'current' },
+ *     { id: 'closed', label: 'Closed', state: 'pending' },
+ *   ]}
+ * />
+ *
+ * @param {ExpLadderProps} props - The properties of the ExpLadder component.
+ * @param {StepperStep[]} props.steps - Steps in order: `id`, `label` and `state`.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ * @param {Record<StepperStepState, string>} props.stateLabels - Word for each state.
+ * @param {string} [props.className] - Classes for the list.
+ *
+ * @returns {ReactNode} The staircase, or a core `Stepper` outside an `ExpScope`.
+ */
+export declare function ExpLadder({ steps, ariaLabel, stateLabels, className, }: ExpLadderProps): ReactNode;
+//# sourceMappingURL=ExpLadder.d.ts.map

package/expresivo/ExpLadder/ExpLadder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpLadder.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLadder/ExpLadder.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,WAAW,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE,cAAc,GAAG,SAAS,CA8D5B"}

package/expresivo/ExpLadder/ExpLadder.jsx

@@ -0,0 +1,82 @@
+'use client';
+import { Each, Stepper, } from '@clicoh/orion-library';
+import clsx from 'clsx';
+import { useExpScope } from '../ExpScope/ExpScope';
+const INDENTS = [
+    'ml-0',
+    'ml-[7px]',
+    'ml-[14px]',
+    'ml-[21px]',
+    'ml-[28px]',
+    'ml-[35px]',
+    'ml-[42px]',
+];
+const rowMap = {
+    done: '',
+    current: 'bg-lavender-3 ring-1 ring-lavender-1 ring-inset dark:bg-lavender-dark-1 dark:ring-0',
+    pending: '',
+    skipped: 'opacity-60',
+};
+const diamondMap = {
+    done: 'size-3 bg-black dark:bg-white',
+    current: 'size-3.5 bg-linear-135 from-lavender to-violet shadow-[0_0_0_4px_rgba(106,93,249,0.18)] dark:from-lavender-dark dark:to-violet-dark',
+    pending: 'size-3 border border-gray-2',
+    skipped: 'size-3 border border-dashed border-gray-2',
+};
+const textMap = {
+    done: 'font-medium text-black dark:text-white',
+    current: 'font-semibold text-lavender dark:text-lavender-dark',
+    pending: 'text-gray-1 dark:text-gray-2',
+    skipped: 'text-gray-1 line-through dark:text-gray-2',
+};
+/**
+ * Vertical progress drawn as a staircase: every step that was not skipped
+ * sits a little further in, with a diamond in place of the dot. The current
+ * step is tinted lavender; skipped steps are struck through and say so.
+ *
+ * Outside an `ExpScope` it falls back to the core `Stepper`, vertical and
+ * `sm`, with the same steps.
+ *
+ * @component
+ * @example
+ * <ExpLadder
+ *   ariaLabel="Case lifecycle"
+ *   stateLabels={{ done: 'done', current: 'current', pending: 'pending', skipped: 'skipped' }}
+ *   steps={[
+ *     { id: 'new', label: 'New', state: 'done' },
+ *     { id: 'review', label: 'In review', state: 'skipped' },
+ *     { id: 'fixed', label: 'Fixed', state: 'current' },
+ *     { id: 'closed', label: 'Closed', state: 'pending' },
+ *   ]}
+ * />
+ *
+ * @param {ExpLadderProps} props - The properties of the ExpLadder component.
+ * @param {StepperStep[]} props.steps - Steps in order: `id`, `label` and `state`.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ * @param {Record<StepperStepState, string>} props.stateLabels - Word for each state.
+ * @param {string} [props.className] - Classes for the list.
+ *
+ * @returns {ReactNode} The staircase, or a core `Stepper` outside an `ExpScope`.
+ */
+export function ExpLadder({ steps, ariaLabel, stateLabels, className, }) {
+    const inScope = useExpScope();
+    if (!inScope) {
+        return (<Stepper steps={steps} ariaLabel={ariaLabel} stateLabels={stateLabels} orientation="vertical" size="sm" className={className}/>);
+    }
+    const indents = steps.reduce((acc, step, index) => {
+        const before = index === 0 ? 0 : acc[index - 1];
+        const previous = steps[index - 1];
+        acc.push(index === 0 || previous.state === 'skipped' ? before : before + 1);
+        return acc;
+    }, []);
+    return (<ol aria-label={ariaLabel} className={clsx('flex flex-col', className)}>
+      <Each of={steps} render={(step, index) => (<li key={step.id} aria-current={step.state === 'current' ? 'step' : undefined} className={clsx('flex min-w-0 items-center gap-2.5 rounded-[10px] py-1.5 pr-2.5 pl-2', INDENTS[Math.min(indents[index], INDENTS.length - 1)], rowMap[step.state])}>
+            <span aria-hidden="true" className={clsx('flex-none rotate-45 rounded-[4px]', diamondMap[step.state])}/>
+            <span className={clsx('truncate text-[13px] leading-[18px]', textMap[step.state])}>
+              {step.label}
+              {step.state === 'skipped' ? (` · ${stateLabels.skipped}`) : (<span className="sr-only">{`, ${stateLabels[step.state]}`}</span>)}
+            </span>
+          </li>)}/>
+    </ol>);
+}
+//# sourceMappingURL=ExpLadder.jsx.map

package/expresivo/ExpLadder/ExpLadder.jsx.map

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

package/expresivo/ExpLadder/index.d.ts

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

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

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

package/expresivo/ExpLadder/index.js

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

package/expresivo/ExpLadder/index.js.map

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

package/expresivo/ExpLensIcon/ExpLensIcon.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export type ExpLensIconProps = {
+    /** Width and height in pixels. */
+    size?: number;
+    /** Scans from side to side while the action runs. */
+    busy?: boolean;
+    /** Grays out, to match a disabled button. */
+    disabled?: boolean;
+};
+/**
+ * Magnifier with an eye inside, for the `iconL` of a core `Button` that
+ * searches or investigates. It blinks at rest, looks towards the label while
+ * the button is hovered, and scans while `busy`. It is decorative.
+ *
+ * Outside an `ExpScope` it falls back to the plain search icon.
+ *
+ * @component
+ * @example
+ * <Button iconL={<ExpLensIcon busy={isSearching} />}>Search</Button>
+ *
+ * @param {Object} props - The properties of the ExpLensIcon component.
+ * @param {number} [props.size=20] - Width and height in pixels.
+ * @param {boolean} [props.busy=false] - Scans from side to side while the action runs.
+ * @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
+ *
+ * @returns {ReactNode} The lens, or `FiSearch` outside an `ExpScope`.
+ */
+export declare function ExpLensIcon({ size, busy, disabled, }: ExpLensIconProps): ReactNode;
+//# sourceMappingURL=ExpLensIcon.d.ts.map

package/expresivo/ExpLensIcon/ExpLensIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpLensIcon.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLensIcon/ExpLensIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,IAAY,EACZ,QAAgB,GACjB,EAAE,gBAAgB,GAAG,SAAS,CAM9B"}

package/expresivo/ExpLensIcon/ExpLensIcon.jsx

@@ -0,0 +1,29 @@
+'use client';
+import { FiSearch } from 'react-icons/fi';
+import { useExpScope } from '../ExpScope/ExpScope';
+import { LensGlyph } from '../shared/glyphs';
+/**
+ * Magnifier with an eye inside, for the `iconL` of a core `Button` that
+ * searches or investigates. It blinks at rest, looks towards the label while
+ * the button is hovered, and scans while `busy`. It is decorative.
+ *
+ * Outside an `ExpScope` it falls back to the plain search icon.
+ *
+ * @component
+ * @example
+ * <Button iconL={<ExpLensIcon busy={isSearching} />}>Search</Button>
+ *
+ * @param {Object} props - The properties of the ExpLensIcon component.
+ * @param {number} [props.size=20] - Width and height in pixels.
+ * @param {boolean} [props.busy=false] - Scans from side to side while the action runs.
+ * @param {boolean} [props.disabled=false] - Grays out, to match a disabled button.
+ *
+ * @returns {ReactNode} The lens, or `FiSearch` outside an `ExpScope`.
+ */
+export function ExpLensIcon({ size = 20, busy = false, disabled = false, }) {
+    const inScope = useExpScope();
+    if (!inScope)
+        return <FiSearch aria-hidden="true"/>;
+    return <LensGlyph size={size} busy={busy} disabled={disabled}/>;
+}
+//# sourceMappingURL=ExpLensIcon.jsx.map

package/expresivo/ExpLensIcon/ExpLensIcon.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpLensIcon.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpLensIcon/ExpLensIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAW7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,GACC;IACjB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAE9B,IAAI,CAAC,OAAO;QAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAG,CAAC;IAErD,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAAC;AACnE,CAAC"}

package/expresivo/ExpLensIcon/index.d.ts

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

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

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

package/expresivo/ExpLensIcon/index.js

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

package/expresivo/ExpLensIcon/index.js.map

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

package/expresivo/ExpLogo/ExpLogo.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { type ExpLogoName } from './catalog';
+export type ExpLogoProps = {
+    name: ExpLogoName;
+    /** Accessible name of the logo, usually the product name. */
+    alt: string;
+    className?: string;
+};
+/**
+ * Logo of a clicOH product, for `Header.logo`. From `lg` up it shows the full
+ * logo, light or dark after the `dark` class on `<html>` (not the system
+ * preference); below `lg`, only the symbol. The files are drawn at their own
+ * size: never redrawn, recolored, stretched or padded.
+ *
+ * Outside an `ExpScope` it falls back to the core clicOH `Logo`.
+ *
+ * @component
+ * @example
+ * <DashboardTemplate
+ *   headerProps={{ logo: <ExpLogo name="oculus" alt="Oculus clicOH" /> }}
+ * >
+ *   {children}
+ * </DashboardTemplate>
+ *
+ * @param {ExpLogoProps} props - The properties of the ExpLogo component.
+ * @param {ExpLogoName} props.name - Product whose logo is shown.
+ * @param {string} props.alt - Accessible name of the logo.
+ * @param {string} [props.className] - Classes for the wrapper.
+ *
+ * @returns {ReactNode} The product logo, or the core `Logo` outside an `ExpScope`.
+ */
+export declare function ExpLogo({ name, alt, className }: ExpLogoProps): ReactNode;
+//# sourceMappingURL=ExpLogo.d.ts.map

package/expresivo/ExpLogo/ExpLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpLogo.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpLogo/ExpLogo.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,WAAW,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;IAClB,6DAA6D;IAC7D,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,YAAY,GAAG,SAAS,CAqCzE"}