@clicoh/orion-library 1.2.0-beta.11 → 1.2.0-beta.13

package/expresivo/ExpPillButton/ExpPillButton.jsx

@@ -0,0 +1,75 @@
+'use client';
+import clsx from 'clsx';
+import { FiLogIn, FiRefreshCw, FiSearch } from 'react-icons/fi';
+import { Button } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+import { EnterGlyph, LensGlyph, SyncBadgeGlyph, SyncGlyph, } from '../shared/glyphs';
+const fallbackIconMap = {
+    lens: <FiSearch />,
+    sync: <FiRefreshCw />,
+    enter: <FiLogIn />,
+    none: undefined,
+};
+const toneMap = {
+    brand: {
+        idle: clsx('bg-lavender dark:bg-lavender-dark text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]', 'hover:from-lavender hover:to-violet hover:bg-linear-135 hover:shadow-[0_8px_20px_rgba(200,84,228,0.28)]', 'hover:-translate-y-px active:translate-y-0 active:scale-[.98]'),
+        busy: 'bg-lavender dark:bg-lavender-dark cursor-progress text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]',
+        disabled: 'bg-gray-5 text-gray-2 dark:bg-gray-dark-1 cursor-not-allowed',
+    },
+    soft: {
+        idle: clsx('bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark', 'hover:bg-lavender-1 hover:-translate-y-px active:translate-y-0 active:scale-[.98]'),
+        busy: 'bg-lavender-2 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark cursor-progress',
+        disabled: 'bg-gray-5 text-gray-2 dark:bg-gray-dark-1 cursor-not-allowed',
+    },
+};
+/**
+ * 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 function ExpPillButton({ tone = 'brand', icon = 'lens', 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 === 'brand' ? 'principal' : 'second'} iconL={fallbackIconMap[icon]} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx(block && 'w-full', restProps.className)}>
+        {label}
+      </Button>);
+    }
+    const state = disabled ? 'disabled' : busy ? 'busy' : 'idle';
+    const hasDisc = tone === 'brand' && (icon === 'lens' || icon === 'sync');
+    return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx('h-11 items-center gap-2.5 rounded-full text-sm leading-5 font-semibold whitespace-nowrap', 'transition-[background-color,box-shadow,translate,scale] duration-200 motion-reduce:translate-none motion-reduce:scale-none motion-reduce:transition-none', block ? 'flex w-full justify-center' : 'inline-flex', icon === 'none' && 'px-6', icon !== 'none' && (hasDisc ? 'pr-[22px] pl-1.5' : 'pr-[18px] pl-3'), toneMap[tone][state], restProps.className)}>
+      {tone === 'brand' && icon === 'lens' && (<span aria-hidden="true" className={clsx('flex size-8 shrink-0 items-center justify-center rounded-full', disabled ? 'bg-gray-6' : 'bg-white')}>
+          <LensGlyph size={22} busy={busy} disabled={disabled}/>
+        </span>)}
+      {tone === 'brand' && icon === 'sync' && (<SyncBadgeGlyph size={32} busy={busy} disabled={disabled}/>)}
+      {tone === 'soft' && icon === 'lens' && (<LensGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {tone === 'soft' && icon === 'sync' && (<SyncGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {icon === 'enter' && (<EnterGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {label}
+    </button>);
+}
+//# sourceMappingURL=ExpPillButton.jsx.map

package/expresivo/ExpPillButton/ExpPillButton.jsx.map

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

package/expresivo/ExpPillButton/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpPillButton } from './ExpPillButton';
+export type { ExpPillButtonIcon, ExpPillButtonProps, ExpPillButtonTone, } from './ExpPillButton';
+//# sourceMappingURL=index.d.ts.map

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

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

package/expresivo/ExpPillButton/index.js

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

package/expresivo/ExpPillButton/index.js.map

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

package/expresivo/ExpScope/ExpScope.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+export type ExpScopeTitles = 'playful' | 'plain';
+export type ExpScopeTables = 'cards' | 'plain';
+export type ExpScopeMascots = 'shown' | 'hidden';
+export type ExpScopeOptions = {
+    /** `playful` sets core headings, top menu links and table headers in the title font. */
+    titles: ExpScopeTitles;
+    /** `cards` turns core table rows into separate cards that lift on hover. */
+    tables: ExpScopeTables;
+    /** `hidden` silences every mascot, for users who prefer a quiet interface. */
+    mascots: ExpScopeMascots;
+};
+export type ExpScopeProps = {
+    children: ReactNode;
+} & Partial<ExpScopeOptions>;
+/**
+ * ExpScope turns on Orion's expressive layer for the page it renders in.
+ *
+ * Inside it, `Exp*` components render in full; outside it, they fall back to
+ * their core equivalent. While it is mounted, `assets/css/expresivo.css`
+ * reskins the core parts marked with `data-orion-part`, including the ones
+ * rendered in portals (tooltips, side filters, header menus).
+ *
+ * The options tune how loud the layer is, so a product can let its users
+ * pick a calmer look without leaving the scope.
+ *
+ * Only for consumers whose own docs declare `capa expresiva: sí`.
+ *
+ * @component
+ * @example
+ * <ExpScope>
+ *   <App />
+ * </ExpScope>
+ *
+ * @example
+ * // Core table rows and plain titles, no mascots
+ * <ExpScope titles="plain" tables="plain" mascots="hidden">
+ *   <App />
+ * </ExpScope>
+ *
+ * @param {ExpScopeProps} props
+ * @param {ReactNode} props.children - Content that gets the expressive layer.
+ * @param {'playful' | 'plain'} [props.titles='playful'] - `playful` sets core headings, top menu links and table headers in the title font.
+ * @param {'cards' | 'plain'} [props.tables='cards'] - `cards` turns core table rows into separate cards; `plain` keeps the core rows.
+ * @param {'shown' | 'hidden'} [props.mascots='shown'] - `hidden` stops every `Exp*` component from drawing a mascot.
+ * @returns {ReactNode} The children inside a wrapper that adds no box.
+ */
+export declare function ExpScope({ children, titles, tables, mascots, }: ExpScopeProps): ReactNode;
+/**
+ * Tells whether the caller renders inside an `ExpScope`. `Exp*` components
+ * use it to choose between their full look and their core fallback.
+ *
+ * @returns {boolean} `true` inside an `ExpScope`.
+ */
+export declare function useExpScope(): boolean;
+/**
+ * Options of the nearest `ExpScope`, for `Exp*` components that change with
+ * them.
+ *
+ * @returns {ExpScopeOptions | null} The options, or `null` outside an `ExpScope`.
+ */
+export declare function useExpScopeOptions(): ExpScopeOptions | null;
+//# sourceMappingURL=ExpScope.d.ts.map

package/expresivo/ExpScope/ExpScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpScope.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpScope/ExpScope.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC5B,wFAAwF;IACxF,MAAM,EAAE,cAAc,CAAC;IACvB,4EAA4E;IAC5E,MAAM,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAM7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAkB,EAClB,MAAgB,EAChB,OAAiB,GAClB,EAAE,aAAa,GAAG,SAAS,CAqB3B;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,GAAG,IAAI,CAE3D"}

package/expresivo/ExpScope/ExpScope.jsx

@@ -0,0 +1,67 @@
+'use client';
+import { DynaPuff } from 'next/font/google';
+import { createContext, useContext, useMemo } from 'react';
+const titleFont = DynaPuff({ subsets: ['latin'], display: 'swap' });
+const ExpScopeContext = createContext(null);
+/**
+ * ExpScope turns on Orion's expressive layer for the page it renders in.
+ *
+ * Inside it, `Exp*` components render in full; outside it, they fall back to
+ * their core equivalent. While it is mounted, `assets/css/expresivo.css`
+ * reskins the core parts marked with `data-orion-part`, including the ones
+ * rendered in portals (tooltips, side filters, header menus).
+ *
+ * The options tune how loud the layer is, so a product can let its users
+ * pick a calmer look without leaving the scope.
+ *
+ * Only for consumers whose own docs declare `capa expresiva: sí`.
+ *
+ * @component
+ * @example
+ * <ExpScope>
+ *   <App />
+ * </ExpScope>
+ *
+ * @example
+ * // Core table rows and plain titles, no mascots
+ * <ExpScope titles="plain" tables="plain" mascots="hidden">
+ *   <App />
+ * </ExpScope>
+ *
+ * @param {ExpScopeProps} props
+ * @param {ReactNode} props.children - Content that gets the expressive layer.
+ * @param {'playful' | 'plain'} [props.titles='playful'] - `playful` sets core headings, top menu links and table headers in the title font.
+ * @param {'cards' | 'plain'} [props.tables='cards'] - `cards` turns core table rows into separate cards; `plain` keeps the core rows.
+ * @param {'shown' | 'hidden'} [props.mascots='shown'] - `hidden` stops every `Exp*` component from drawing a mascot.
+ * @returns {ReactNode} The children inside a wrapper that adds no box.
+ */
+export function ExpScope({ children, titles = 'playful', tables = 'cards', mascots = 'shown', }) {
+    const options = useMemo(() => ({ titles, tables, mascots }), [titles, tables, mascots]);
+    return (<ExpScopeContext.Provider value={options}>
+      <style href="exp-title-font" precedence="exp">
+        {`:root{--exp-title-font:${titleFont.style.fontFamily}}`}
+      </style>
+      <div className="exp-scope" data-exp-titles={titles} data-exp-tables={tables} data-exp-mascots={mascots}>
+        {children}
+      </div>
+    </ExpScopeContext.Provider>);
+}
+/**
+ * Tells whether the caller renders inside an `ExpScope`. `Exp*` components
+ * use it to choose between their full look and their core fallback.
+ *
+ * @returns {boolean} `true` inside an `ExpScope`.
+ */
+export function useExpScope() {
+    return useContext(ExpScopeContext) !== null;
+}
+/**
+ * Options of the nearest `ExpScope`, for `Exp*` components that change with
+ * them.
+ *
+ * @returns {ExpScopeOptions | null} The options, or `null` outside an `ExpScope`.
+ */
+export function useExpScopeOptions() {
+    return useContext(ExpScopeContext);
+}
+//# sourceMappingURL=ExpScope.jsx.map

package/expresivo/ExpScope/ExpScope.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpScope.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpScope/ExpScope.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAqB3E,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;AAEpE,MAAM,eAAe,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,GAAG,SAAS,EAClB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,OAAO,GACH;IACd,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EACnC,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAC1B,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAC3C;QAAA,CAAC,0BAA0B,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,CAC1D;MAAA,EAAE,KAAK,CACP;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,WAAW,CACrB,eAAe,CAAC,CAAC,MAAM,CAAC,CACxB,eAAe,CAAC,CAAC,MAAM,CAAC,CACxB,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAE1B;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,eAAe,CAAC,QAAQ,CAAC,CAC5B,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;AAC9C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,UAAU,CAAC,eAAe,CAAC,CAAC;AACrC,CAAC"}

package/expresivo/ExpScope/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpScope, useExpScope } from './ExpScope';
+export type { ExpScopeMascots, ExpScopeOptions, ExpScopeProps, ExpScopeTables, ExpScopeTitles, } from './ExpScope';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpScope/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,YAAY,EACV,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC"}

package/expresivo/ExpScope/index.js

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

package/expresivo/ExpScope/index.js.map

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

package/expresivo/ExpScoreRing/ExpScoreRing.d.ts

@@ -0,0 +1,35 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ExpScoreRingProps = {
+    /** Score between 0 and 100. */
+    value: number;
+    /** Target score between 0 and 100, marked with a tick on the ring. */
+    goal?: number;
+    /** Width and height in pixels. */
+    size?: number;
+    /** Content centered inside the ring, such as the score and its caption. */
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Score ring with an optional goal tick. The arc grows in the clicOH
+ * gradient when it mounts. The ring is decorative: put the score as text in
+ * `children`, centered inside it.
+ *
+ * Outside an `ExpScope` it falls back to the core `RadialProgressBar`, with
+ * `children` still centered on top.
+ *
+ * @component
+ * @example
+ * <ExpScoreRing value={57} goal={70}>
+ *   <Heading level="h4">57</Heading>
+ * </ExpScoreRing>
+ *
+ * @param {Object} props - The properties of the ExpScoreRing component.
+ * @param {number} props.value - Score between 0 and 100.
+ * @param {number} [props.goal] - Target score, marked with a tick.
+ * @param {number} [props.size=120] - Width and height in pixels.
+ * @param {ReactNode} [props.children] - Content centered inside the ring.
+ *
+ * @returns {ReactNode} The ring, or a core `RadialProgressBar` outside an `ExpScope`.
+ */
+export declare function ExpScoreRing({ value, goal, size, children, ...restProps }: ExpScoreRingProps): ReactNode;
+//# sourceMappingURL=ExpScoreRing.d.ts.map

package/expresivo/ExpScoreRing/ExpScoreRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpScoreRing.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpScoreRing/ExpScoreRing.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAOrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,IAAU,EACV,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,iBAAiB,GAAG,SAAS,CAoF/B"}

package/expresivo/ExpScoreRing/ExpScoreRing.jsx

@@ -0,0 +1,67 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useId, useState, } from 'react';
+import { RadialProgressBar, Show } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+const RADIUS = 50;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const clamp = (value) => Math.min(100, Math.max(0, value));
+/**
+ * Score ring with an optional goal tick. The arc grows in the clicOH
+ * gradient when it mounts. The ring is decorative: put the score as text in
+ * `children`, centered inside it.
+ *
+ * Outside an `ExpScope` it falls back to the core `RadialProgressBar`, with
+ * `children` still centered on top.
+ *
+ * @component
+ * @example
+ * <ExpScoreRing value={57} goal={70}>
+ *   <Heading level="h4">57</Heading>
+ * </ExpScoreRing>
+ *
+ * @param {Object} props - The properties of the ExpScoreRing component.
+ * @param {number} props.value - Score between 0 and 100.
+ * @param {number} [props.goal] - Target score, marked with a tick.
+ * @param {number} [props.size=120] - Width and height in pixels.
+ * @param {ReactNode} [props.children] - Content centered inside the ring.
+ *
+ * @returns {ReactNode} The ring, or a core `RadialProgressBar` outside an `ExpScope`.
+ */
+export function ExpScoreRing({ value, goal, size = 120, children, ...restProps }) {
+    const inScope = useExpScope();
+    const gradientId = useId();
+    const [shown, setShown] = useState(0);
+    const percent = clamp(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setShown(percent), 60);
+        return () => clearTimeout(timer);
+    }, [percent]);
+    const goalAngle = typeof goal === 'number'
+        ? ((clamp(goal) / 100) * 360 - 90) * (Math.PI / 180)
+        : null;
+    return (<div {...restProps} style={{ width: size, height: size, ...restProps.style }} className={clsx('relative inline-flex shrink-0', restProps.className)}>
+      <Show>
+        <Show.When isTrue={inScope}>
+          <svg aria-hidden="true" width={size} height={size} viewBox="0 0 120 120">
+            <defs>
+              <linearGradient id={gradientId} x1={0} y1={0} x2={1} y2={1}>
+                <stop offset={0} className="[stop-color:var(--color-lavender)]"/>
+                <stop offset={1} className="[stop-color:var(--color-violet)]"/>
+              </linearGradient>
+            </defs>
+            <circle cx={60} cy={60} r={RADIUS} fill="none" strokeWidth={10} className="stroke-gray-5 dark:stroke-gray-dark-1"/>
+            <circle cx={60} cy={60} r={RADIUS} fill="none" stroke={`url(#${gradientId})`} strokeWidth={10} strokeLinecap="round" strokeDasharray={CIRCUMFERENCE} strokeDashoffset={CIRCUMFERENCE * (1 - shown / 100)} transform="rotate(-90 60 60)" className="transition-[stroke-dashoffset] duration-900 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none"/>
+            {goalAngle !== null && (<line x1={60 + Math.cos(goalAngle) * 42} y1={60 + Math.sin(goalAngle) * 42} x2={60 + Math.cos(goalAngle) * 58} y2={60 + Math.sin(goalAngle) * 58} strokeWidth={2.5} strokeLinecap="round" className="stroke-black dark:stroke-white"/>)}
+          </svg>
+        </Show.When>
+        <Show.Else>
+          <RadialProgressBar value={percent} className="h-full w-full"/>
+        </Show.Else>
+      </Show>
+      {!!children && (<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
+          {children}
+        </div>)}
+    </div>);
+}
+//# sourceMappingURL=ExpScoreRing.jsx.map

package/expresivo/ExpScoreRing/ExpScoreRing.jsx.map

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

package/expresivo/ExpScoreRing/index.d.ts

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

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

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

package/expresivo/ExpScoreRing/index.js

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

package/expresivo/ExpScoreRing/index.js.map

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

package/expresivo/index.d.ts

@@ -0,0 +1,12 @@
+export * from './ExpScope';
+export * from './ExpMascot';
+export * from './ExpLensIcon';
+export * from './ExpKeyButton';
+export * from './ExpPillButton';
+export * from './ExpMedalBadge';
+export * from './ExpScoreRing';
+export * from './ExpGrowBar';
+export * from './ExpJourneyTrack';
+export * from './ExpBubble';
+export * from './ExpCollapseToggle';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}

package/expresivo/index.js

@@ -0,0 +1,12 @@
+export * from './ExpScope';
+export * from './ExpMascot';
+export * from './ExpLensIcon';
+export * from './ExpKeyButton';
+export * from './ExpPillButton';
+export * from './ExpMedalBadge';
+export * from './ExpScoreRing';
+export * from './ExpGrowBar';
+export * from './ExpJourneyTrack';
+export * from './ExpBubble';
+export * from './ExpCollapseToggle';
+//# sourceMappingURL=index.js.map

package/expresivo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/expresivo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}

package/expresivo/shared/glyphs.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type GlyphProps = {
+    size: number;
+    busy?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Magnifier with an eye inside. Blinks at rest, looks towards the label
+ * while its button is hovered and scans while busy.
+ */
+export declare function LensGlyph({ size, busy, disabled }: GlyphProps): ReactNode;
+/** Two arrows in a white disc. Turn while hovered, spin while busy. */
+export declare function SyncBadgeGlyph({ size, busy, disabled, }: GlyphProps): ReactNode;
+/** Two arrows in the text color. Half turn while hovered, spin while busy. */
+export declare function SyncGlyph({ size, busy, disabled }: GlyphProps): ReactNode;
+/** A door with an arrow going in. The arrow steps in while hovered or busy. */
+export declare function EnterGlyph({ size, busy, disabled }: GlyphProps): ReactNode;
+/** Right arrow that steps forward while its button is hovered. */
+export declare function ArrowGlyph({ size }: Pick<GlyphProps, 'size'>): ReactNode;
+//# sourceMappingURL=glyphs.d.ts.map

package/expresivo/shared/glyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.d.ts","sourceRoot":"","sources":["../../src/expresivo/shared/glyphs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,SAAS,CAqDzE;AAED,uEAAuE;AACvE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,QAAQ,GACT,EAAE,UAAU,GAAG,SAAS,CAwCxB;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,SAAS,CA4BzE;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,SAAS,CAyB1E;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,SAAS,CAiBxE"}

package/expresivo/shared/glyphs.jsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+/**
+ * Magnifier with an eye inside. Blinks at rest, looks towards the label
+ * while its button is hovered and scans while busy.
+ */
+export function LensGlyph({ size, busy, disabled }) {
+    return (<svg aria-hidden="true" width={size} height={size} viewBox="0 0 34 34" className={clsx('exp-lens shrink-0 overflow-visible', busy && 'exp-glyph--busy', disabled && 'exp-glyph--disabled')}>
+      <path d="M22.5 22.5 30 30" strokeWidth={4.5} strokeLinecap="round" className={disabled ? 'stroke-gray-3' : 'stroke-amber'}/>
+      <path d="M22.5 22.5 30 30" strokeWidth={2} strokeLinecap="round" className={disabled ? 'stroke-gray-4' : 'stroke-warning'}/>
+      <circle cx={14} cy={14} r={12.5} strokeWidth={2} className={clsx('fill-white', disabled ? 'stroke-gray-4' : 'stroke-lavender-1')}/>
+      <g className="exp-lens-lid">
+        <path d="M5 14C7.2 10.2 10.4 8.3 14 8.3S20.8 10.2 23 14C20.8 17.8 17.6 19.7 14 19.7S7.2 17.8 5 14Z" className={disabled ? 'fill-gray-6' : 'fill-lavender-2'}/>
+        <g className="exp-lens-pupil">
+          <circle cx={14} cy={14} r={4.6} className={disabled ? 'fill-gray-2' : 'fill-lavender'}/>
+          <circle cx={14} cy={14} r={2.2} className="fill-black"/>
+          <circle cx={15.6} cy={12.4} r={1.2} className="fill-white"/>
+        </g>
+      </g>
+    </svg>);
+}
+/** Two arrows in a white disc. Turn while hovered, spin while busy. */
+export function SyncBadgeGlyph({ size, busy, disabled, }) {
+    return (<svg aria-hidden="true" width={size} height={size} viewBox="0 0 34 34" className={clsx('shrink-0 overflow-visible [--exp-rotor-turn:150deg]', busy && 'exp-glyph--busy', disabled && 'exp-glyph--disabled')}>
+      <circle cx={17} cy={17} r={15.5} strokeWidth={2} className={clsx('fill-white', disabled ? 'stroke-gray-4' : 'stroke-lavender-1')}/>
+      <g fill="none" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" className={clsx('exp-rotor', disabled ? 'stroke-gray-2' : 'stroke-lavender')}>
+        <path d="M24.5 13.5A8 8 0 0 0 10 12"/>
+        <polyline points="24.8 8.5 24.8 13.8 19.5 13.8"/>
+        <path d="M9.5 20.5A8 8 0 0 0 24 22"/>
+        <polyline points="9.2 25.5 9.2 20.2 14.5 20.2"/>
+      </g>
+    </svg>);
+}
+/** Two arrows in the text color. Half turn while hovered, spin while busy. */
+export function SyncGlyph({ size, busy, disabled }) {
+    return (<svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" className={clsx('shrink-0 overflow-visible', busy && 'exp-glyph--busy', disabled && 'exp-glyph--disabled')}>
+      <g fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" className="exp-rotor">
+        <path d="M20 9A8 8 0 0 0 5.6 7.2"/>
+        <polyline points="20.5 4 20.5 9.2 15.3 9.2"/>
+        <path d="M4 15a8 8 0 0 0 14.4 1.8"/>
+        <polyline points="3.5 20 3.5 14.8 8.7 14.8"/>
+      </g>
+    </svg>);
+}
+/** A door with an arrow going in. The arrow steps in while hovered or busy. */
+export function EnterGlyph({ size, busy, disabled }) {
+    return (<svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" className={clsx('shrink-0 overflow-visible', busy && 'exp-glyph--busy', disabled && 'exp-glyph--disabled')}>
+      <path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/>
+      <g className="exp-enter-arrow">
+        <polyline points="10 17 15 12 10 7"/>
+        <line x1={15} y1={12} x2={3} y2={12}/>
+      </g>
+    </svg>);
+}
+/** Right arrow that steps forward while its button is hovered. */
+export function ArrowGlyph({ size }) {
+    return (<svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" className="exp-arrow shrink-0">
+      <path d="M5 12h14M13 6l6 6-6 6"/>
+    </svg>);
+}
+//# sourceMappingURL=glyphs.jsx.map

package/expresivo/shared/glyphs.jsx.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "1.2.0-beta.11",
+  "version": "1.2.0-beta.13",
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "0.26.19",
@@ -50,6 +50,7 @@
     "index.d.ts",
     "tailwind.config.ts",
     "dist",
+    "expresivo",
     "assets"
   ],
   "publishConfig": {
@@ -62,7 +63,7 @@
   "author": "",
   "license": "ISC",
   "scripts": {
-    "build": "node scripts/sync-rules.mjs --check && tsc --project tsconfig.components.json",
+    "build": "node scripts/sync-rules.mjs --check && node scripts/check-expresivo.mjs && tsc --project tsconfig.components.json && tsc --project tsconfig.expresivo.json",
     "rules:sync": "node scripts/sync-rules.mjs",
     "format": "prettier --write src",
     "storybook": "storybook dev -p 6006 --ci",