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

package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.jsx

@@ -0,0 +1,261 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { FiX } from 'react-icons/fi';
+import { IoIosSearch } from 'react-icons/io';
+import { Each, Show } from '../../00-base';
+import { RenderErrorOrHelperText } from '../../01-atoms/Input/utils/RenderErrorOrHelperText';
+const normalize = (text) => text
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+const groupOptions = (options, order = []) => {
+    const names = [
+        ...new Set([...order, ...options.map((option) => option.group ?? '')]),
+    ];
+    let start = 0;
+    return names.flatMap((name) => {
+        const inGroup = options.filter((option) => (option.group ?? '') === name);
+        if (!inGroup.length)
+            return [];
+        const group = { name, start, options: inGroup };
+        start += inGroup.length;
+        return [group];
+    });
+};
+/**
+ * MultiAutocomplete picks several options by typing: the chosen ones sit as
+ * chips inside the field and the list, grouped under headings, filters as the
+ * user writes. All visible labels are provided by the consumer.
+ *
+ * Arrow keys move through the list, Enter adds the highlighted option,
+ * Backspace on an empty query removes the last chip and Escape closes the list.
+ *
+ * @component
+ * @example
+ * <MultiAutocomplete
+ *   label="Repositories"
+ *   options={[
+ *     { value: 'api', label: 'api', meta: 'GitHub', group: 'Indexed' },
+ *     { value: 'web', label: 'web', meta: 'GitHub', group: 'Indexed' },
+ *   ]}
+ *   value={repos}
+ *   onChange={setRepos}
+ *   noOptionsText="No repository matches"
+ *   removeLabel="Remove"
+ *   countText={(matches) => `${matches} repositories`}
+ *   limit={{ max: 3, text: 'Up to 3 repositories' }}
+ * />
+ *
+ * @param {MultiAutocompleteProps} props - The properties of the MultiAutocomplete component.
+ * @param {string} props.label - The label of the field, floating like `Input` unless `hideLabel`.
+ * @param {MultiAutocompleteOption[]} props.options - Options with `value`, `label`, and optional `meta` and `group`.
+ * @param {Array<string | number>} props.value - The values chosen, in order.
+ * @param {Function} props.onChange - Receives the new list of values.
+ * @param {string} props.noOptionsText - Shown when the query matches nothing.
+ * @param {string} props.removeLabel - Accessible name of each chip's remove button, followed by the chip label.
+ * @param {string[]} [props.groups] - Order of the group headings.
+ * @param {string | Function} [props.countText] - Line under the list; a function receives the number of matches and the query.
+ * @param {MultiAutocompleteLimit} [props.limit] - Maximum number of values and the text shown once it is reached.
+ * @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only. Use it when a heading outside the field already names it.
+ * @param {string} [props.placeholder] - Placeholder while nothing is chosen. With the floating label it only shows while focused.
+ * @param {string} [props.helperText] - Helper text under the field.
+ * @param {string} [props.error] - Error message under the field.
+ * @param {boolean} [props.disabled] - Disables typing and removing chips.
+ * @param {boolean} [props.isMutedWhenEmpty] - Renders the border and label in gray while nothing is chosen.
+ * @param {string} [props.id] - Id of the text input, for a `label` or for focusing it from outside.
+ *
+ * @returns {ReactNode} The rendered MultiAutocomplete component.
+ */
+export function MultiAutocomplete({ label, options, value, onChange, noOptionsText, removeLabel, groups, countText, limit, hideLabel = false, placeholder, helperText, error, disabled = false, isMutedWhenEmpty, ...restProps }) {
+    const { id: inputIdProp, className, ...rootProps } = restProps;
+    const generatedId = useId();
+    const inputId = inputIdProp ?? generatedId;
+    const listboxId = `${inputId}-listbox`;
+    const descriptionId = error || helperText ? `${inputId}-description` : undefined;
+    const inputRef = useRef(null);
+    const [query, setQuery] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const isFull = limit !== undefined && value.length >= limit.max;
+    const needle = normalize(query.trim());
+    const optionGroups = useMemo(() => {
+        const chosen = new Set(value);
+        const matches = options.filter((option) => !chosen.has(option.value) &&
+            (!needle ||
+                normalize(option.label).includes(needle) ||
+                normalize(option.meta ?? '').includes(needle)));
+        return groupOptions(matches, groups);
+    }, [options, value, needle, groups]);
+    const flat = optionGroups.flatMap((group) => group.options);
+    const active = activeIndex < flat.length && !isFull ? activeIndex : -1;
+    const optionId = (index) => `${listboxId}-${index}`;
+    const showList = isOpen && !disabled;
+    const isMuted = Boolean(isMutedWhenEmpty) && !value.length;
+    useEffect(() => {
+        if (!showList || active < 0)
+            return;
+        document.getElementById(`${listboxId}-${active}`)?.scrollIntoView({
+            block: 'nearest',
+        });
+    }, [showList, active, listboxId]);
+    const labelOf = (item) => options.find((option) => option.value === item)?.label ?? String(item);
+    const add = (option) => {
+        if (isFull)
+            return;
+        onChange([...value, option.value]);
+        setQuery('');
+        setActiveIndex(-1);
+    };
+    const remove = (item) => {
+        onChange(value.filter((current) => current !== item));
+        inputRef.current?.focus();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            setIsOpen(true);
+            if (!flat.length || isFull)
+                return;
+            setActiveIndex((current) => {
+                if (event.key === 'ArrowDown') {
+                    return current >= flat.length - 1 ? 0 : current + 1;
+                }
+                return current <= 0 ? flat.length - 1 : current - 1;
+            });
+            return;
+        }
+        if (event.key === 'Enter') {
+            const option = flat[active];
+            if (showList && option) {
+                event.preventDefault();
+                add(option);
+            }
+            return;
+        }
+        if (event.key === 'Backspace' && !query && value.length) {
+            onChange(value.slice(0, -1));
+            return;
+        }
+        if (event.key === 'Escape' && isOpen) {
+            event.preventDefault();
+            setIsOpen(false);
+            setActiveIndex(-1);
+        }
+    };
+    const handleBlur = (event) => {
+        if (event.currentTarget.contains(event.relatedTarget))
+            return;
+        setIsOpen(false);
+        setActiveIndex(-1);
+    };
+    const outlineColor = disabled
+        ? 'border-gray-3 dark:border-gray-2'
+        : error
+            ? 'border-error dark:border-error-dark'
+            : isMuted
+                ? 'border-gray-3 dark:border-gray-2 group-focus-within/field:border-black dark:group-focus-within/field:border-white'
+                : 'border-black dark:border-white';
+    const labelColor = disabled
+        ? 'text-gray-3 dark:text-gray-2'
+        : error
+            ? 'text-error dark:text-error-dark'
+            : isMuted
+                ? 'text-gray-2 dark:text-gray-2 group-focus-within/field:text-black dark:group-focus-within/field:text-white'
+                : 'text-black dark:text-white';
+    const isFloating = value.length > 0 || query !== '';
+    return (<div {...rootProps} data-orion-part="field" onBlur={handleBlur} className={clsx('relative w-full max-w-full', className)}>
+      <div data-orion-part="field-box" data-grows="" onClick={() => inputRef.current?.focus()} className={clsx('group/field relative flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-[1.125rem] py-1 pr-10', value.length ? 'pl-1.5' : 'pl-5', disabled ? 'cursor-not-allowed' : 'cursor-text')}>
+        <Each of={[...value]} render={(item) => (<span key={String(item)} className={clsx('bg-lavender-2 dark:bg-lavender-dark-1 inline-flex h-7 max-w-full items-center gap-1 rounded-full pr-1 pl-3 text-xs font-medium', disabled
+                ? 'text-gray-3 dark:text-gray-2'
+                : 'text-black dark:text-white')}>
+              <span className="truncate">{labelOf(item)}</span>
+              <button type="button" aria-label={`${removeLabel} ${labelOf(item)}`} disabled={disabled} onClick={(event) => {
+                event.stopPropagation();
+                remove(item);
+            }} className="text-gray-1 dark:text-gray-2 flex size-5 shrink-0 items-center justify-center rounded-full transition-colors not-disabled:hover:bg-black not-disabled:hover:text-white disabled:cursor-not-allowed dark:not-disabled:hover:bg-white dark:not-disabled:hover:text-black">
+                <FiX size={12} aria-hidden="true"/>
+              </button>
+            </span>)}/>
+        <input ref={inputRef} id={inputId} data-orion-part="field-control" type="text" role="combobox" autoComplete="off" value={query} disabled={disabled} placeholder={value.length ? '' : placeholder} aria-autocomplete="list" aria-expanded={showList} aria-controls={listboxId} aria-activedescendant={showList && active >= 0 ? optionId(active) : undefined} aria-invalid={Boolean(error)} aria-describedby={descriptionId} onChange={(event) => {
+            setQuery(event.target.value);
+            setIsOpen(true);
+            setActiveIndex(event.target.value.trim() ? 0 : -1);
+        }} onFocus={() => setIsOpen(true)} onKeyDown={handleKeyDown} className={clsx('h-7 min-w-20 flex-1 basis-28 bg-transparent text-sm text-black outline-0 disabled:cursor-not-allowed dark:text-white', 'disabled:text-gray-3 dark:disabled:text-gray-2', hideLabel
+            ? 'placeholder:text-gray-2'
+            : 'focus:placeholder:text-gray-2 placeholder:text-transparent')}/>
+        <Show>
+          <Show.When isTrue={hideLabel}>
+            <label htmlFor={inputId} className="sr-only">
+              {label}
+            </label>
+          </Show.When>
+          <Show.Else>
+            <label htmlFor={inputId} data-orion-part="field-label" className={clsx('pointer-events-none absolute left-[1.0625rem] truncate px-1 leading-tight transition-all select-none', isFloating
+            ? '-top-2 text-xs'
+            : 'top-2.5 text-sm group-focus-within/field:-top-2 group-focus-within/field:text-xs', labelColor)}>
+              {label}
+            </label>
+          </Show.Else>
+        </Show>
+        <fieldset aria-hidden="true" data-orion-part="field-outline" className={clsx('pointer-events-none absolute left-0 w-full rounded-[1.125rem] border px-4', hideLabel ? 'top-0 h-full' : '-top-2 h-[calc(100%+.5rem)]', outlineColor)}>
+          {!hideLabel && (<legend className={clsx('invisible text-left text-xs text-nowrap transition-all', isFloating
+                ? 'max-w-full px-1'
+                : 'max-w-0 px-0 group-focus-within/field:max-w-full group-focus-within/field:px-1')}>
+              {label}
+            </legend>)}
+        </fieldset>
+        <span aria-hidden="true" data-orion-part="field-icon" className={clsx('absolute top-1/2 right-4 flex -translate-y-1/2 items-center', disabled
+            ? 'text-gray-3 dark:text-gray-2'
+            : 'text-gray-1 dark:text-gray-2')}>
+          <IoIosSearch size={16}/>
+        </span>
+      </div>
+      {showList && (<div data-orion-part="listbox-panel" className="border-gray-5 dark:border-gray-1 dark:bg-black-1 absolute left-0 z-40 mt-2 w-full overflow-hidden rounded-2xl border bg-white shadow-lg">
+          <ul id={listboxId} role="listbox" aria-label={label} aria-multiselectable="true" className="max-h-72 overflow-y-auto p-1.5">
+            <Show>
+              <Show.When isTrue={isFull}>
+                <li role="presentation" className="text-gray-1 dark:text-gray-2 px-2.5 py-3 text-sm">
+                  {limit?.text}
+                </li>
+              </Show.When>
+              <Show.When isTrue={flat.length > 0}>
+                <Each of={optionGroups} render={(group) => (<li key={group.name || '-'} role="presentation">
+                      {!!group.name && (<p aria-hidden="true" className="text-gray-1 dark:text-gray-2 px-2.5 pt-2 pb-1 text-[0.6875rem] leading-4 font-semibold tracking-wide uppercase">
+                          {group.name}
+                        </p>)}
+                      <ul role="group" aria-label={group.name || undefined}>
+                        <Each of={group.options} render={(option, index) => {
+                    const flatIndex = group.start + index;
+                    const isActive = flatIndex === active;
+                    return (<li key={String(option.value)} id={optionId(flatIndex)} role="option" aria-selected={false} onMouseDown={(event) => event.preventDefault()} onMouseEnter={() => setActiveIndex(flatIndex)} onClick={() => add(option)} className={clsx('flex cursor-pointer items-center justify-between gap-3 rounded-[0.625rem] px-2.5 py-2 text-sm', isActive
+                            ? 'bg-lavender-3 text-lavender dark:bg-lavender-dark-1 dark:text-lavender-dark font-semibold'
+                            : 'text-black dark:text-white')}>
+                                <span className="min-w-0 truncate">
+                                  {option.label}
+                                </span>
+                                {!!option.meta && (<span className="text-gray-1 dark:text-gray-2 shrink-0 text-xs font-normal whitespace-nowrap">
+                                    {option.meta}
+                                  </span>)}
+                              </li>);
+                }}/>
+                      </ul>
+                    </li>)}/>
+              </Show.When>
+              <Show.Else>
+                <li role="presentation" className="text-gray-1 dark:text-gray-2 px-2.5 py-3 text-sm">
+                  {noOptionsText}
+                </li>
+              </Show.Else>
+            </Show>
+          </ul>
+          {countText !== undefined && !isFull && (<p className="border-gray-5 dark:border-gray-1 text-gray-1 dark:text-gray-2 border-t px-4 py-2 text-xs">
+              {typeof countText === 'function'
+                    ? countText(flat.length, query.trim())
+                    : countText}
+            </p>)}
+        </div>)}
+      <RenderErrorOrHelperText id={descriptionId} disabled={disabled} helperText={helperText} error={error} className="pl-6"/>
+    </div>);
+}
+//# sourceMappingURL=MultiAutocomplete.jsx.map

package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.jsx.map

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

package/dist/components/02-molecules/MultiAutocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MultiAutocomplete';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/02-molecules/MultiAutocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/MultiAutocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/02-molecules/MultiAutocomplete/index.js

@@ -0,0 +1,2 @@
+export * from './MultiAutocomplete';
+//# sourceMappingURL=index.js.map

package/dist/components/02-molecules/MultiAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/MultiAutocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/02-molecules/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Table';
 export * from './Filter';
 export * from './Autocomplete';
+export * from './MultiAutocomplete';
 export * from './FilterChips';
 export * from './Dropdown';
 export * from './Container';

package/dist/components/02-molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/dist/components/02-molecules/index.js

@@ -1,6 +1,7 @@
 export * from './Table';
 export * from './Filter';
 export * from './Autocomplete';
+export * from './MultiAutocomplete';
 export * from './FilterChips';
 export * from './Dropdown';
 export * from './Container';

package/dist/components/02-molecules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts

@@ -9,6 +9,7 @@ type DashboardTemplateProps = {
     readonly titleAdornment?: ReactNode;
     readonly titleDescription?: ReactNode;
     readonly titleChildren?: ReactNode;
+    readonly heading?: ReactNode;
     readonly children: ReactNode;
     readonly breadcrumbLoadingLabel?: string;
     readonly headingLoadingLabel?: string;
@@ -39,6 +40,16 @@ type DashboardTemplateProps = {
  *   <OrderDetail />
  * </DashboardTemplate>
  *
+ * @example
+ * // A page header with its own layout under the breadcrumb
+ * <DashboardTemplate
+ *   headerProps={headerProps}
+ *   pageTitles={{ '/orders': 'Orders' }}
+ *   heading={<OrdersHeader />}
+ * >
+ *   <OrdersTable />
+ * </DashboardTemplate>
+ *
  * @param {Object} props - The properties of the DashboardTemplate component.
  * @param {HeaderProps} props.headerProps - The properties for the Header component.
  * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles, used by the breadcrumb and the heading.
@@ -47,10 +58,11 @@ type DashboardTemplateProps = {
  * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
  * @param {ReactNode} [props.titleDescription] - Content under the title, inside the title band.
  * @param {ReactNode} [props.titleChildren] - Content at the right of the title; it moves under the title on small screens.
+ * @param {ReactNode} [props.heading] - Replaces the title row under the breadcrumb. With it, `headingTitles`, `headingLevel`, `titleAdornment`, `titleDescription` and `titleChildren` are ignored; the breadcrumb still uses `pageTitles`.
  * @param {ReactNode} props.children - The main content to be rendered within the dashboard.
  *
  * @returns {ReactNode} The rendered DashboardTemplate component.
  */
-export declare function DashboardTemplate({ headerProps, pageTitles, headingTitles, headingLevel, titleAdornment, titleDescription, titleChildren, children, breadcrumbLoadingLabel, headingLoadingLabel, }: DashboardTemplateProps): ReactNode;
+export declare function DashboardTemplate({ headerProps, pageTitles, headingTitles, headingLevel, titleAdornment, titleDescription, titleChildren, heading, children, breadcrumbLoadingLabel, headingLoadingLabel, }: DashboardTemplateProps): ReactNode;
 export {};
 //# sourceMappingURL=DashboardTemplate.d.ts.map

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAU,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAC9C,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,sBAAsB,GAAG,SAAS,CAiDpC"}
+{"version":3,"file":"DashboardTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAU,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAC9C,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,sBAAsB,GAAG,SAAS,CAmDpC"}

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx

@@ -31,6 +31,16 @@ import { HeadingWithTitleSkeleton } from './HeadingWithTitleSkeleton';
  *   <OrderDetail />
  * </DashboardTemplate>
  *
+ * @example
+ * // A page header with its own layout under the breadcrumb
+ * <DashboardTemplate
+ *   headerProps={headerProps}
+ *   pageTitles={{ '/orders': 'Orders' }}
+ *   heading={<OrdersHeader />}
+ * >
+ *   <OrdersTable />
+ * </DashboardTemplate>
+ *
  * @param {Object} props - The properties of the DashboardTemplate component.
  * @param {HeaderProps} props.headerProps - The properties for the Header component.
  * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles, used by the breadcrumb and the heading.
@@ -39,11 +49,12 @@ import { HeadingWithTitleSkeleton } from './HeadingWithTitleSkeleton';
  * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
  * @param {ReactNode} [props.titleDescription] - Content under the title, inside the title band.
  * @param {ReactNode} [props.titleChildren] - Content at the right of the title; it moves under the title on small screens.
+ * @param {ReactNode} [props.heading] - Replaces the title row under the breadcrumb. With it, `headingTitles`, `headingLevel`, `titleAdornment`, `titleDescription` and `titleChildren` are ignored; the breadcrumb still uses `pageTitles`.
  * @param {ReactNode} props.children - The main content to be rendered within the dashboard.
  *
  * @returns {ReactNode} The rendered DashboardTemplate component.
  */
-export function DashboardTemplate({ headerProps, pageTitles, headingTitles, headingLevel, titleAdornment, titleDescription, titleChildren, children, breadcrumbLoadingLabel, headingLoadingLabel, }) {
+export function DashboardTemplate({ headerProps, pageTitles, headingTitles, headingLevel, titleAdornment, titleDescription, titleChildren, heading, children, breadcrumbLoadingLabel, headingLoadingLabel, }) {
     return (<>
       <Header {...headerProps}/>
       <hr className="border-gray-5 dark:border-gray-dark-1"/>
@@ -51,20 +62,20 @@ export function DashboardTemplate({ headerProps, pageTitles, headingTitles, head
         <Suspense fallback={<BreadcrumbSkeleton loadingLabel={breadcrumbLoadingLabel}/>}>
           <BreadcrumbWithPathname homeHref={headerProps.homeHref} pageTitles={pageTitles}/>
         </Suspense>
-        <div className="flex flex-col items-start gap-3 sm:flex-row sm:justify-between">
-          <div className="flex min-w-0 flex-col gap-1">
-            <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
-              <Suspense fallback={<HeadingWithTitleSkeleton loadingLabel={headingLoadingLabel}/>}>
-                <HeadingWithTitle pageTitles={pageTitles} headingTitles={headingTitles} level={headingLevel}/>
-              </Suspense>
-              {titleAdornment}
+        {heading ?? (<div className="flex flex-col items-start gap-3 sm:flex-row sm:justify-between">
+            <div className="flex min-w-0 flex-col gap-1">
+              <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+                <Suspense fallback={<HeadingWithTitleSkeleton loadingLabel={headingLoadingLabel}/>}>
+                  <HeadingWithTitle pageTitles={pageTitles} headingTitles={headingTitles} level={headingLevel}/>
+                </Suspense>
+                {titleAdornment}
+              </div>
+              {!!titleDescription && (<div className="text-gray-1 dark:text-gray-2 text-sm">
+                  {titleDescription}
+                </div>)}
             </div>
-            {!!titleDescription && (<div className="text-gray-1 dark:text-gray-2 text-sm">
-                {titleDescription}
-              </div>)}
-          </div>
-          {titleChildren}
-        </div>
+            {titleChildren}
+          </div>)}
       </Container>
       <hr className="border-gray-5 dark:border-gray-dark-1"/>
       <Container className="py-6" as="main">

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAe,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAetE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACI;IACvB,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,EACxB;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,iBAAiB,CACpC;QAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,sBAAsB,CAAC,EAC3D,CAAC,CAED;UAAA,CAAC,sBAAsB,CACrB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,UAAU,CAAC,CAAC,UAAU,CAAC,EAE3B;QAAA,EAAE,QAAQ,CACV;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,gEAAgE,CAC7E;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6BAA6B,CAC1C;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,qDAAqD,CAClE;cAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,wBAAwB,CACvB,YAAY,CAAC,CAAC,mBAAmB,CAAC,EAEtC,CAAC,CAED;gBAAA,CAAC,gBAAgB,CACf,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,KAAK,CAAC,CAAC,YAAY,CAAC,EAExB;cAAA,EAAE,QAAQ,CACV;cAAA,CAAC,cAAc,CACjB;YAAA,EAAE,GAAG,CACL;YAAA,CAAC,CAAC,CAAC,gBAAgB,IAAI,CACrB,CAAC,GAAG,CAAC,SAAS,CAAC,sCAAsC,CACnD;gBAAA,CAAC,gBAAgB,CACnB;cAAA,EAAE,GAAG,CAAC,CACP,CACH;UAAA,EAAE,GAAG,CACL;UAAA,CAAC,aAAa,CAChB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CACnC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DashboardTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAe,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAgBtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACI;IACvB,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,EACxB;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,iBAAiB,CACpC;QAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,sBAAsB,CAAC,EAC3D,CAAC,CAED;UAAA,CAAC,sBAAsB,CACrB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,UAAU,CAAC,CAAC,UAAU,CAAC,EAE3B;QAAA,EAAE,QAAQ,CACV;QAAA,CAAC,OAAO,IAAI,CACV,CAAC,GAAG,CAAC,SAAS,CAAC,gEAAgE,CAC7E;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6BAA6B,CAC1C;cAAA,CAAC,GAAG,CAAC,SAAS,CAAC,qDAAqD,CAClE;gBAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,wBAAwB,CACvB,YAAY,CAAC,CAAC,mBAAmB,CAAC,EAEtC,CAAC,CAED;kBAAA,CAAC,gBAAgB,CACf,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,KAAK,CAAC,CAAC,YAAY,CAAC,EAExB;gBAAA,EAAE,QAAQ,CACV;gBAAA,CAAC,cAAc,CACjB;cAAA,EAAE,GAAG,CACL;cAAA,CAAC,CAAC,CAAC,gBAAgB,IAAI,CACrB,CAAC,GAAG,CAAC,SAAS,CAAC,sCAAsC,CACnD;kBAAA,CAAC,gBAAgB,CACnB;gBAAA,EAAE,GAAG,CAAC,CACP,CACH;YAAA,EAAE,GAAG,CACL;YAAA,CAAC,aAAa,CAChB;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CACnC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}

package/expresivo/ExpMascot/ExpMascot.d.ts

@@ -13,9 +13,13 @@ export type ExpMascotProps = {
  *
  * Mascots are decorative and hidden from screen readers, so the text next to
  * them must carry the message. Use one per state (empty, loading, error, no
- * permission, success), above the title and the copy, and never on screens
- * full of data. Suggested sizes: 96–128px for desktop empty states, 80px on
- * small screens, 48–64px inside a message or a toast.
+ * permission, success), above the title and the copy, or one in the page
+ * header (`ExpPageHero`), even when the page shows data; never among the data
+ * itself (rows, cards, charts). Suggested sizes: 96–128px for desktop empty
+ * states, 80px on small screens, 48–64px inside a message or a toast.
+ *
+ * In dark mode Bugi sits on a light disc so it reads on the dark background;
+ * Oculus and Fixi need none.
  *
  * Renders nothing outside an `ExpScope`, or when the scope hides mascots.
  *

package/expresivo/ExpMascot/ExpMascot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpMascot.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAU,EACV,MAAgB,EAChB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CA6B5B"}
+{"version":3,"file":"ExpMascot.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAU,EACV,MAAgB,EAChB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAiC5B"}

package/expresivo/ExpMascot/ExpMascot.jsx

@@ -8,9 +8,13 @@ import { mascotCatalog } from './catalog';
  *
  * Mascots are decorative and hidden from screen readers, so the text next to
  * them must carry the message. Use one per state (empty, loading, error, no
- * permission, success), above the title and the copy, and never on screens
- * full of data. Suggested sizes: 96–128px for desktop empty states, 80px on
- * small screens, 48–64px inside a message or a toast.
+ * permission, success), above the title and the copy, or one in the page
+ * header (`ExpPageHero`), even when the page shows data; never among the data
+ * itself (rows, cards, charts). Suggested sizes: 96–128px for desktop empty
+ * states, 80px on small screens, 48–64px inside a message or a toast.
+ *
+ * In dark mode Bugi sits on a light disc so it reads on the dark background;
+ * Oculus and Fixi need none.
  *
  * Renders nothing outside an `ExpScope`, or when the scope hides mascots.
  *
@@ -35,7 +39,8 @@ export function ExpMascot({ name, size = 112, motion = 'still', ...restProps })
         return null;
     return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0 flex-col items-center', motion === 'float' && 'exp-float', motion === 'hang' && 'exp-hang', restProps.className)}>
       {motion === 'hang' && (<span className="bg-lavender-1 dark:bg-lavender-dark-1 h-3.5 w-[1.5px]"/>)}
-      <img src={mascotCatalog[name].src} alt="" width={size} height={size} draggable={false} className="block object-contain"/>
+      <img src={mascotCatalog[name].src} alt="" width={size} height={size} draggable={false} className={clsx('block object-contain', name.startsWith('bugi-') &&
+            'dark:bg-gray-6 dark:rounded-full dark:p-[8%]')}/>
     </span>);
 }
 //# sourceMappingURL=ExpMascot.jsx.map

package/expresivo/ExpMascot/ExpMascot.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpMascot.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,WAAW,CAAC;AAW9D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACG;IACf,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,4CAA4C,EAC5C,MAAM,KAAK,OAAO,IAAI,WAAW,EACjC,MAAM,KAAK,MAAM,IAAI,UAAU,EAC/B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,MAAM,KAAK,MAAM,IAAI,CACpB,CAAC,IAAI,CAAC,SAAS,CAAC,uDAAuD,EAAG,CAC3E,CACD;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC7B,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,sBAAsB,EAEpC;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ExpMascot.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,WAAW,CAAC;AAW9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACG;IACf,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,4CAA4C,EAC5C,MAAM,KAAK,OAAO,IAAI,WAAW,EACjC,MAAM,KAAK,MAAM,IAAI,UAAU,EAC/B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,MAAM,KAAK,MAAM,IAAI,CACpB,CAAC,IAAI,CAAC,SAAS,CAAC,uDAAuD,EAAG,CAC3E,CACD;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC7B,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,sBAAsB,EACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,8CAA8C,CACjD,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,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"}