@clicoh/orion-library 1.1.0-beta.7 → 1.1.0-beta.9

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

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type OptionType } from '../../01-atoms';
+import type { TFilterInputs, TFilterValues } from '../Filter/types';
+type FilterChipsProps = {
+    inputs: TFilterInputs;
+    values: Record<string, TFilterValues>;
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+    clearAllText?: string;
+    removeFilterLabel?: (filterLabel: string) => string;
+    extraOptions?: Record<string, OptionType[]>;
+} & Omit<HTMLAttributes<HTMLUListElement>, 'children'>;
+/**
+ * FilterChips component for rendering the applied filters as removable chips.
+ *
+ * Resolves every chip label against the same configuration the Filter uses, so
+ * the chips read the same inside the panel and outside of it. Renders nothing
+ * while no filter is applied.
+ *
+ * @component
+ * @example
+ * <FilterChips
+ *   inputs={config}
+ *   values={{ country: [{ value: 1, label: 'México' }] }}
+ *   onRemove={(key) => removeFilter(key)}
+ *   onClearAll={() => resetFilters()}
+ *   clearAllText="Limpiar todos"
+ * />
+ *
+ * @param {Object} props - The properties of the FilterChips component.
+ * @param {TFilterInputs} props.inputs - Filter configuration used to resolve the labels.
+ * @param {Object} props.values - Applied filter values, keyed by filter key.
+ * @param {Function} props.onRemove - Callback triggered with the key of the removed filter.
+ * @param {Function} [props.onClearAll] - Callback that clears every filter. The action is hidden when omitted.
+ * @param {string} [props.clearAllText] - Text of the clear all action.
+ * @param {Function} [props.removeFilterLabel] - Builds the accessible label of each remove button.
+ * @param {Object} [props.extraOptions] - Asynchronously loaded options, keyed by filter key.
+ * @param {HTMLAttributes<HTMLUListElement>} [props.restProps] - Additional attributes for the list element.
+ *
+ * @returns {ReactNode} The rendered FilterChips component.
+ */
+export declare function FilterChips({ inputs, values, onRemove, onClearAll, clearAllText, removeFilterLabel, extraOptions, ...restProps }: FilterChipsProps): ReactNode;
+export {};
+//# sourceMappingURL=FilterChips.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/FilterChips/FilterChips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAQ,KAAK,UAAU,EAAa,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGpE,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CA4C9B"}

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

@@ -0,0 +1,60 @@
+'use client';
+import clsx from 'clsx';
+import { MdClose } from 'react-icons/md';
+import { Each, Show } from '../../00-base';
+import { List, Paragraph } from '../../01-atoms';
+import { getFilterChips } from '../Filter/utils/getFilterChips';
+/**
+ * FilterChips component for rendering the applied filters as removable chips.
+ *
+ * Resolves every chip label against the same configuration the Filter uses, so
+ * the chips read the same inside the panel and outside of it. Renders nothing
+ * while no filter is applied.
+ *
+ * @component
+ * @example
+ * <FilterChips
+ *   inputs={config}
+ *   values={{ country: [{ value: 1, label: 'México' }] }}
+ *   onRemove={(key) => removeFilter(key)}
+ *   onClearAll={() => resetFilters()}
+ *   clearAllText="Limpiar todos"
+ * />
+ *
+ * @param {Object} props - The properties of the FilterChips component.
+ * @param {TFilterInputs} props.inputs - Filter configuration used to resolve the labels.
+ * @param {Object} props.values - Applied filter values, keyed by filter key.
+ * @param {Function} props.onRemove - Callback triggered with the key of the removed filter.
+ * @param {Function} [props.onClearAll] - Callback that clears every filter. The action is hidden when omitted.
+ * @param {string} [props.clearAllText] - Text of the clear all action.
+ * @param {Function} [props.removeFilterLabel] - Builds the accessible label of each remove button.
+ * @param {Object} [props.extraOptions] - Asynchronously loaded options, keyed by filter key.
+ * @param {HTMLAttributes<HTMLUListElement>} [props.restProps] - Additional attributes for the list element.
+ *
+ * @returns {ReactNode} The rendered FilterChips component.
+ */
+export function FilterChips({ inputs, values, onRemove, onClearAll, clearAllText, removeFilterLabel, extraOptions, ...restProps }) {
+    const chips = getFilterChips({ inputs, values, extraOptions });
+    if (!chips.length)
+        return null;
+    return (<List {...restProps} orientation="horizontal" className={clsx('flex-wrap gap-2', restProps.className)}>
+      <Each of={chips} render={({ key, label, text }) => (<li key={key}>
+            <div className="bg-gray-5 dark:bg-gray-1 inline-flex items-center rounded-full px-4 py-2 dark:text-white">
+              <Paragraph size="chips">{text}</Paragraph>
+              <button type="button" aria-label={removeFilterLabel?.(label) ?? label} onClick={() => onRemove(key)} className="bg-error ml-1.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full p-0.5 text-white">
+                <MdClose aria-hidden="true"/>
+              </button>
+            </div>
+          </li>)}/>
+      <Show>
+        <Show.When isTrue={Boolean(onClearAll && clearAllText)}>
+          <li>
+            <button type="button" onClick={onClearAll} className="hover:text-gray-1 dark:hover:text-gray-2 cursor-pointer text-sm underline underline-offset-2 dark:text-white">
+              {clearAllText}
+            </button>
+          </li>
+        </Show.When>
+      </Show>
+    </List>);
+}
+//# sourceMappingURL=FilterChips.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/FilterChips/FilterChips.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAmB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAYhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,GAAG,SAAS,EACK;IACjB,MAAM,KAAK,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAE/D,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,YAAY,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAExD;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAChC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CACX;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,0FAA0F,CACvG;cAAA,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,CACzC;cAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,UAAU,CAAC,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAChD,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAC7B,SAAS,CAAC,8GAA8G,CAExH;gBAAA,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,EAC7B;cAAA,EAAE,MAAM,CACV;YAAA,EAAE,GAAG,CACP;UAAA,EAAE,EAAE,CAAC,CACN,CAAC,EAEJ;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC,CACrD;UAAA,CAAC,EAAE,CACD;YAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,SAAS,CAAC,8GAA8G,CAExH;cAAA,CAAC,YAAY,CACf;YAAA,EAAE,MAAM,CACV;UAAA,EAAE,EAAE,CACN;QAAA,EAAE,IAAI,CAAC,IAAI,CACb;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type TImageView = {
+    id: string;
+    label: string;
+    src: string;
+    alt: string;
+};
+export type TImageViewerLabels = {
+    zoomIn: string;
+    zoomOut: string;
+    rotate: string;
+    enterFullscreen: string;
+    exitFullscreen: string;
+};
+type ImageViewerProps = {
+    views: TImageView[];
+    labels: TImageViewerLabels;
+    title?: ReactNode;
+    emptyState?: ReactNode;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'>;
+/**
+ * ImageViewer component for inspecting one or more images of the same subject.
+ *
+ * Each view is a tab, so a subject photographed from several angles reads as one
+ * piece instead of a gallery. Zoom and rotation reset when the view changes: a
+ * transform that made sense for one angle rarely makes sense for the next.
+ *
+ * Renders `emptyState` while `views` is empty, and disables the toolbar with it,
+ * so the frame keeps its size instead of collapsing.
+ *
+ * @component
+ * @example
+ * <ImageViewer
+ *   title="Identity document"
+ *   views={[
+ *     { id: 'front', label: 'Front', src: '/front.jpg', alt: 'Document front' },
+ *     { id: 'back', label: 'Back', src: '/back.jpg', alt: 'Document back' },
+ *   ]}
+ *   labels={{
+ *     zoomIn: 'Zoom in',
+ *     zoomOut: 'Zoom out',
+ *     rotate: 'Rotate',
+ *     enterFullscreen: 'Full screen',
+ *     exitFullscreen: 'Exit full screen',
+ *   }}
+ *   emptyState={<p>Nothing uploaded yet</p>}
+ * />
+ *
+ * @param {Object} props - The properties of the ImageViewer component.
+ * @param {TImageView[]} props.views - Images to display. More than one renders a tab per view.
+ * @param {TImageViewerLabels} props.labels - Accessible names of the toolbar actions.
+ * @param {ReactNode} [props.title] - Optional heading rendered on the left of the toolbar.
+ * @param {ReactNode} [props.emptyState] - Content rendered when there is no image.
+ * @param {HTMLAttributes<HTMLElement>} [props.restProps] - Additional attributes for the root element.
+ *
+ * @returns {ReactNode} The rendered ImageViewer component.
+ */
+export declare function ImageViewer({ views, labels, title, emptyState, ...restProps }: ImageViewerProps): ReactNode;
+export {};
+//# sourceMappingURL=ImageViewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CA6K9B"}

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

@@ -0,0 +1,144 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useId, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { MdFullscreen, MdFullscreenExit, MdRotateRight, MdZoomIn, MdZoomOut, } from 'react-icons/md';
+import { Each, Show } from '../../00-base';
+import { List, Paragraph } from '../../01-atoms';
+import { TabItem } from '../Tab/TabItem';
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 3;
+const ZOOM_STEP = 0.5;
+const QUARTER_TURN = 90;
+const FULL_TURN = 360;
+const TOOL_CLASSNAME = 'hover:bg-gray-5 focus-visible:ring-lavender disabled:text-gray-3 dark:disabled:text-gray-1 dark:hover:bg-gray-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-black focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-transparent dark:text-white';
+/**
+ * ImageViewer component for inspecting one or more images of the same subject.
+ *
+ * Each view is a tab, so a subject photographed from several angles reads as one
+ * piece instead of a gallery. Zoom and rotation reset when the view changes: a
+ * transform that made sense for one angle rarely makes sense for the next.
+ *
+ * Renders `emptyState` while `views` is empty, and disables the toolbar with it,
+ * so the frame keeps its size instead of collapsing.
+ *
+ * @component
+ * @example
+ * <ImageViewer
+ *   title="Identity document"
+ *   views={[
+ *     { id: 'front', label: 'Front', src: '/front.jpg', alt: 'Document front' },
+ *     { id: 'back', label: 'Back', src: '/back.jpg', alt: 'Document back' },
+ *   ]}
+ *   labels={{
+ *     zoomIn: 'Zoom in',
+ *     zoomOut: 'Zoom out',
+ *     rotate: 'Rotate',
+ *     enterFullscreen: 'Full screen',
+ *     exitFullscreen: 'Exit full screen',
+ *   }}
+ *   emptyState={<p>Nothing uploaded yet</p>}
+ * />
+ *
+ * @param {Object} props - The properties of the ImageViewer component.
+ * @param {TImageView[]} props.views - Images to display. More than one renders a tab per view.
+ * @param {TImageViewerLabels} props.labels - Accessible names of the toolbar actions.
+ * @param {ReactNode} [props.title] - Optional heading rendered on the left of the toolbar.
+ * @param {ReactNode} [props.emptyState] - Content rendered when there is no image.
+ * @param {HTMLAttributes<HTMLElement>} [props.restProps] - Additional attributes for the root element.
+ *
+ * @returns {ReactNode} The rendered ImageViewer component.
+ */
+export function ImageViewer({ views, labels, title, emptyState, ...restProps }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [zoom, setZoom] = useState(MIN_ZOOM);
+    const [rotation, setRotation] = useState(0);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const generatedId = useId();
+    /**
+     * Se sigue la firma de las vistas y no el arreglo: un consumidor que lo
+     * declare en linea entrega una referencia nueva en cada render y el visor se
+     * reiniciaria mientras el usuario lo esta usando.
+     */
+    const viewsSignature = views.map(({ id }) => id).join('|');
+    useEffect(() => {
+        setActiveIndex(0);
+        setZoom(MIN_ZOOM);
+        setRotation(0);
+    }, [viewsSignature]);
+    useEffect(() => {
+        if (!isFullscreen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                setIsFullscreen(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isFullscreen]);
+    const activeView = views[activeIndex] ?? views[0];
+    const hasImage = Boolean(activeView);
+    const selectView = (index) => {
+        setActiveIndex(index);
+        setZoom(MIN_ZOOM);
+        setRotation(0);
+    };
+    const frame = (<section {...restProps} className={clsx('border-gray-5 dark:border-gray-1 flex min-h-0 flex-col overflow-hidden rounded-lg border', isFullscreen ? 'h-full w-full bg-white dark:bg-black' : undefined, !isFullscreen ? restProps.className : undefined)}>
+      <div className="border-gray-5 bg-gray-6 dark:border-gray-1 dark:bg-black-1 flex flex-none items-center justify-between gap-4 border-b px-4 py-3">
+        <Show>
+          <Show.When isTrue={Boolean(title)}>
+            <Paragraph size="subtitle-1" className="dark:text-white">
+              {title}
+            </Paragraph>
+          </Show.When>
+        </Show>
+        <div className="ml-auto flex items-center gap-1.5">
+          <button type="button" aria-label={labels.zoomOut} disabled={!hasImage || zoom <= MIN_ZOOM} onClick={() => setZoom((current) => current - ZOOM_STEP)} className={TOOL_CLASSNAME}>
+            <MdZoomOut aria-hidden="true"/>
+          </button>
+          <button type="button" aria-label={labels.zoomIn} disabled={!hasImage || zoom >= MAX_ZOOM} onClick={() => setZoom((current) => current + ZOOM_STEP)} className={TOOL_CLASSNAME}>
+            <MdZoomIn aria-hidden="true"/>
+          </button>
+          <button type="button" aria-label={labels.rotate} disabled={!hasImage} onClick={() => setRotation((current) => (current + QUARTER_TURN) % FULL_TURN)} className={TOOL_CLASSNAME}>
+            <MdRotateRight aria-hidden="true"/>
+          </button>
+          <button type="button" aria-label={isFullscreen ? labels.exitFullscreen : labels.enterFullscreen} aria-pressed={isFullscreen} disabled={!hasImage} onClick={() => setIsFullscreen((current) => !current)} className={TOOL_CLASSNAME}>
+            {isFullscreen ? (<MdFullscreenExit aria-hidden="true"/>) : (<MdFullscreen aria-hidden="true"/>)}
+          </button>
+        </div>
+      </div>
+
+      <Show>
+        <Show.When isTrue={views.length > 1}>
+          <List role="tablist" aria-orientation="horizontal" orientation="horizontal" className="border-gray-5 dark:border-gray-1 flex-none items-end gap-6 border-b px-4">
+            <Each of={views} render={({ id, label }, index) => (<li key={id} role="presentation">
+                  <TabItem id={`${generatedId}-tab-${index}`} aria-controls={`${generatedId}-panel`} aria-selected={index === activeIndex} tabIndex={index === activeIndex ? 0 : -1} isActive={index === activeIndex} onClick={() => selectView(index)} className="pb-2">
+                    {label}
+                  </TabItem>
+                </li>)}/>
+          </List>
+        </Show.When>
+      </Show>
+
+      <div id={`${generatedId}-panel`} role={views.length > 1 ? 'tabpanel' : undefined} aria-labelledby={views.length > 1 ? `${generatedId}-tab-${activeIndex}` : undefined} className="bg-gray-7 dark:bg-black-2 flex min-h-0 flex-1 items-center justify-center overflow-hidden p-5">
+        <Show>
+          <Show.When isTrue={hasImage}>
+            {/**
+         * `next/image` exigiria que cada consumidor declare el dominio de
+         * sus imagenes en `remotePatterns`. Estas son cargas de usuario en
+         * almacenamiento externo, asi que la lista no se puede conocer.
+         */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={activeView?.src} alt={activeView?.alt} style={{ transform: `rotate(${rotation}deg) scale(${zoom})` }} className="max-h-full max-w-full object-contain transition-transform duration-200 ease-out"/>
+          </Show.When>
+          <Show.Else>{emptyState}</Show.Else>
+        </Show>
+      </div>
+    </section>);
+    if (!isFullscreen)
+        return frame;
+    return createPortal(<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6">
+      <div className="h-full w-full max-w-5xl">{frame}</div>
+    </div>, document.body);
+}
+//# sourceMappingURL=ImageViewer.jsx.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type TSideNavItem = {
+    id: string;
+    label: ReactNode;
+    indicator?: ReactNode;
+    isMuted?: boolean;
+    disabled?: boolean;
+};
+export type TSideNavGroup = {
+    id: string;
+    items: TSideNavItem[];
+};
+type SideNavProps = {
+    groups: TSideNavGroup[];
+    activeId?: string;
+    onSelect: (id: string) => void;
+    navigationLabel?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'onSelect'>;
+/**
+ * SideNav component for navigating between the sections of a single page.
+ *
+ * Unlike `Menu`, it does not read the route: the consumer owns which section is
+ * active. That makes it usable for panels that live inside one page, where
+ * moving between sections must not push a history entry.
+ *
+ * Groups are separated by a rule and carry no heading, so a group of one row
+ * still reads as its own thing without inventing a label for it.
+ *
+ * @component
+ * @example
+ * <SideNav
+ *   navigationLabel="Sections"
+ *   activeId="profile"
+ *   onSelect={setSection}
+ *   groups={[
+ *     { id: 'general', items: [{ id: 'profile', label: 'Profile data' }] },
+ *     {
+ *       id: 'documents',
+ *       items: [
+ *         { id: 'id-card', label: 'Identity document', indicator: <MdCheck /> },
+ *         { id: 'license', label: 'Driver license', isMuted: true },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the SideNav component.
+ * @param {TSideNavGroup[]} props.groups - Groups of rows, rendered in order and separated by a rule.
+ * @param {string} [props.activeId] - Id of the current row.
+ * @param {Function} props.onSelect - Callback triggered with the id of the selected row.
+ * @param {string} [props.navigationLabel] - Accessible name of the navigation region.
+ * @param {HTMLAttributes<HTMLElement>} [props.restProps] - Additional attributes for the nav element.
+ *
+ * @returns {ReactNode} The rendered SideNav component.
+ */
+export declare function SideNav({ groups, activeId, onSelect, navigationLabel, ...restProps }: SideNavProps): ReactNode;
+export {};
+//# sourceMappingURL=SideNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/SideNav/SideNav.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CAqC1B"}

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

@@ -0,0 +1,53 @@
+'use client';
+import clsx from 'clsx';
+import { Fragment } from 'react';
+import { Each } from '../../00-base';
+import { SideNavItem } from './SideNavItem';
+/**
+ * SideNav component for navigating between the sections of a single page.
+ *
+ * Unlike `Menu`, it does not read the route: the consumer owns which section is
+ * active. That makes it usable for panels that live inside one page, where
+ * moving between sections must not push a history entry.
+ *
+ * Groups are separated by a rule and carry no heading, so a group of one row
+ * still reads as its own thing without inventing a label for it.
+ *
+ * @component
+ * @example
+ * <SideNav
+ *   navigationLabel="Sections"
+ *   activeId="profile"
+ *   onSelect={setSection}
+ *   groups={[
+ *     { id: 'general', items: [{ id: 'profile', label: 'Profile data' }] },
+ *     {
+ *       id: 'documents',
+ *       items: [
+ *         { id: 'id-card', label: 'Identity document', indicator: <MdCheck /> },
+ *         { id: 'license', label: 'Driver license', isMuted: true },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the SideNav component.
+ * @param {TSideNavGroup[]} props.groups - Groups of rows, rendered in order and separated by a rule.
+ * @param {string} [props.activeId] - Id of the current row.
+ * @param {Function} props.onSelect - Callback triggered with the id of the selected row.
+ * @param {string} [props.navigationLabel] - Accessible name of the navigation region.
+ * @param {HTMLAttributes<HTMLElement>} [props.restProps] - Additional attributes for the nav element.
+ *
+ * @returns {ReactNode} The rendered SideNav component.
+ */
+export function SideNav({ groups, activeId, onSelect, navigationLabel, ...restProps }) {
+    return (<nav {...restProps} aria-label={navigationLabel ?? restProps['aria-label']} className={clsx('bg-gray-6 dark:bg-black-1 flex flex-col py-4', restProps.className)}>
+      <Each of={groups} render={({ id, items }, groupIndex) => (<Fragment key={id}>
+            {groupIndex > 0 && (<hr className="border-gray-5 dark:border-gray-1 mx-4 my-2"/>)}
+            <Each of={items} render={(item) => (<SideNavItem key={item.id} isActive={item.id === activeId} isMuted={item.isMuted} indicator={item.indicator} disabled={item.disabled} onClick={() => onSelect(item.id)}>
+                  {item.label}
+                </SideNavItem>)}/>
+          </Fragment>)}/>
+    </nav>);
+}
+//# sourceMappingURL=SideNav.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/SideNav/SideNav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAsB5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,GAAG,SAAS,EACC;IACb,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,UAAU,CAAC,CAAC,eAAe,IAAI,SAAS,CAAC,YAAY,CAAC,CAAC,CACvD,SAAS,CAAC,CAAC,IAAI,CACb,8CAA8C,EAC9C,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,MAAM,CAAC,CACX,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,CAAC,CACrC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAChB;YAAA,CAAC,UAAU,GAAG,CAAC,IAAI,CACjB,CAAC,EAAE,CAAC,SAAS,CAAC,4CAA4C,EAAG,CAC9D,CACD;YAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACb,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAC/B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAEjC;kBAAA,CAAC,IAAI,CAAC,KAAK,CACb;gBAAA,EAAE,WAAW,CAAC,CACf,CAAC,EAEN;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,EAEN;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/02-molecules/SideNav/SideNavItem.d.ts

@@ -0,0 +1,36 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type SideNavItemProps = {
+    isActive?: boolean;
+    isMuted?: boolean;
+    indicator?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * SideNavItem component for rendering a row of a vertical navigation rail.
+ *
+ * The active row is marked with a bar on the leading edge, the vertical
+ * counterpart of the bottom bar the horizontal navigation uses.
+ *
+ * `isMuted` is for rows that exist but have nothing behind them yet. It reads
+ * as unavailable without disabling the row, so it stays reachable.
+ *
+ * @component
+ * @example
+ * <SideNavItem
+ *   isActive
+ *   indicator={<MdCheck />}
+ *   onClick={() => select('profile')}
+ * >
+ *   Profile data
+ * </SideNavItem>
+ *
+ * @param {Object} props - The properties of the SideNavItem component.
+ * @param {boolean} [props.isActive] - Whether the row is the current one.
+ * @param {boolean} [props.isMuted] - Renders the row as available but empty.
+ * @param {ReactNode} [props.indicator] - Optional element aligned to the trailing edge.
+ * @param {ReactNode} props.children - The label of the row.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} [props.restProps] - Additional attributes for the button.
+ *
+ * @returns {ReactNode} The rendered SideNavItem component.
+ */
+export declare function SideNavItem({ children, isActive, isMuted, indicator, ...restProps }: SideNavItemProps): ReactNode;
+//# sourceMappingURL=SideNavItem.d.ts.map

package/dist/components/02-molecules/SideNav/SideNavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAoB9B"}

package/dist/components/02-molecules/SideNav/SideNavItem.jsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+/**
+ * SideNavItem component for rendering a row of a vertical navigation rail.
+ *
+ * The active row is marked with a bar on the leading edge, the vertical
+ * counterpart of the bottom bar the horizontal navigation uses.
+ *
+ * `isMuted` is for rows that exist but have nothing behind them yet. It reads
+ * as unavailable without disabling the row, so it stays reachable.
+ *
+ * @component
+ * @example
+ * <SideNavItem
+ *   isActive
+ *   indicator={<MdCheck />}
+ *   onClick={() => select('profile')}
+ * >
+ *   Profile data
+ * </SideNavItem>
+ *
+ * @param {Object} props - The properties of the SideNavItem component.
+ * @param {boolean} [props.isActive] - Whether the row is the current one.
+ * @param {boolean} [props.isMuted] - Renders the row as available but empty.
+ * @param {ReactNode} [props.indicator] - Optional element aligned to the trailing edge.
+ * @param {ReactNode} props.children - The label of the row.
+ * @param {ButtonHTMLAttributes<HTMLButtonElement>} [props.restProps] - Additional attributes for the button.
+ *
+ * @returns {ReactNode} The rendered SideNavItem component.
+ */
+export function SideNavItem({ children, isActive, isMuted, indicator, ...restProps }) {
+    return (<button type="button" {...restProps} aria-current={isActive || undefined} className={clsx('focus-visible:ring-lavender disabled:text-gray-3 dark:disabled:text-gray-1 flex min-h-[52px] w-full cursor-pointer items-center justify-between gap-2 border-l-2 px-4 py-2 text-left text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed', isActive
+            ? 'border-lavender font-medium text-black dark:text-white'
+            : 'hover:text-lavender dark:hover:text-lavender-dark border-transparent font-normal', !isActive && isMuted && 'text-gray-3 italic', !isActive && !isMuted && 'text-gray-1 dark:text-gray-2', restProps.className)}>
+      <span className="flex-1 leading-snug">{children}</span>
+      {!!indicator && <span className="flex-none">{indicator}</span>}
+    </button>);
+}
+//# sourceMappingURL=SideNavItem.jsx.map

package/dist/components/02-molecules/SideNav/SideNavItem.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItem.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,GAAG,SAAS,EACK;IACjB,OAAO,CACL,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,IAAI,SAAS,CAAC,CACd,YAAY,CAAC,CAAC,QAAQ,IAAI,SAAS,CAAC,CACpC,SAAS,CAAC,CAAC,IAAI,CACb,0QAA0Q,EAC1Q,QAAQ;YACN,CAAC,CAAC,wDAAwD;YAC1D,CAAC,CAAC,kFAAkF,EACtF,CAAC,QAAQ,IAAI,OAAO,IAAI,oBAAoB,EAC5C,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,8BAA8B,EACvD,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CACtD;MAAA,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAChE;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './SideNav';
+export * from './SideNavItem';
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/02-molecules/Tab/TabItem.d.ts

@@ -2,6 +2,7 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export type TabItemProps = {
     icon?: ReactNode | string;
     isActive?: boolean;
+    count?: number | string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * TabItem component for rendering a tab item with optional icon and active state.
@@ -12,6 +13,7 @@ export type TabItemProps = {
  * <TabItem
  *   icon={<SomeIcon />}
  *   isActive={true}
+ *   count={12}
  *   className="custom-class"
  * >
  *   Tab Content
@@ -20,10 +22,11 @@ export type TabItemProps = {
  * @param {Object} props - The properties of the TabItem component.
  * @param {ReactNode|string} [props.icon] - Optional icon to display alongside the tab content.
  * @param {boolean} [props.isActive] - Whether the tab item is currently active.
+ * @param {number|string} [props.count] - Optional counter rendered as plain text after the label.
  * @param {ReactNode} props.children - The content to be displayed inside the tab item.
  * @param {Object} [props.restProps] - Additional HTML attributes for the container div.
  *
  * @returns {ReactNode} The rendered TabItem component.
  */
-export declare function TabItem({ children, icon, isActive, ...restProps }: TabItemProps): ReactNode;
+export declare function TabItem({ children, icon, isActive, count, ...restProps }: TabItemProps): ReactNode;
 //# sourceMappingURL=TabItem.d.ts.map

package/dist/components/02-molecules/Tab/TabItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Tab/TabItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CAiB1B"}
+{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Tab/TabItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CA6B1B"}