@erplora/outfitkit 0.1.1

package/dist/components/ok-audio/ok-audio.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+export interface OkAudioLabels {
+    /** aria-label del botón cuando está pausado (acción: reproducir). */
+    play: string;
+    /** aria-label del botón cuando reproduce (acción: pausar). */
+    pause: string;
+    /** aria-label del botón de mute cuando hay sonido (acción: silenciar). */
+    mute: string;
+    /** aria-label del botón de mute cuando está silenciado (acción: activar sonido). */
+    unmute: string;
+    /** aria-label del slider de volumen. */
+    volume: string;
+}
+export declare class OkAudio extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** URL del audio a reproducir. */
+    src: string;
+    /** Título opcional mostrado sobre los controles. */
+    title: string;
+    /** Textos i18n (parcial; se mezclan sobre los defaults en inglés). */
+    labels: Partial<OkAudioLabels>;
+    private get t();
+    private playing;
+    private current;
+    private duration;
+    private volume;
+    private muted;
+    private audioEl;
+    private togglePlay;
+    private onPlay;
+    private onPause;
+    private onEnded;
+    private onTimeUpdate;
+    private onLoadedMeta;
+    private seek;
+    private onVolume;
+    private toggleMute;
+    private fmt;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-audio': OkAudio;
+    }
+}

package/dist/components/ok-avatar/ok-avatar.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+export type OkAvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export type OkAvatarShape = 'circle' | 'rounded';
+export type OkAvatarTone = 'primary' | 'auto';
+export type OkAvatarStatus = 'online' | 'offline' | 'busy';
+export declare class OkAvatar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nombre completo; deriva las iniciales (1ª letra de las dos primeras palabras). */
+    name: string;
+    /** Email: fallback para las iniciales y para el title. */
+    email?: string;
+    /** URL de imagen; si carga sustituye a las iniciales (vuelve a iniciales si falla). */
+    src?: string;
+    /** Tamaño predefinido (o usa --ok-avatar-size para tamaño libre). */
+    size: OkAvatarSize;
+    /** Forma: círculo o esquinas redondeadas. */
+    shape: OkAvatarShape;
+    /** Color: primary fijo o derivado estable por hash del nombre (útil en listados). */
+    tone: OkAvatarTone;
+    /** Punto de estado opcional. */
+    status?: OkAvatarStatus;
+    /** Si se indica, el avatar se envuelve en un <a href>. */
+    href?: string;
+    /** La imagen falló al cargar → se vuelve a las iniciales. */
+    private imgFailed;
+    private initials;
+    private autoHue;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    private onImgError;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-avatar': OkAvatar;
+    }
+}

package/dist/components/ok-avatar-group/ok-avatar-group.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/** Tonos de color para un avatar (afecta solo al fondo cuando no hay imagen). */
+export type OkAvatarTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+/** Tamaños del stack (espejo del ux-avatar original). */
+export type OkAvatarGroupSize = 'xs' | 'sm' | 'md' | 'lg';
+/** Descriptor declarativo de un avatar dentro del grupo. */
+export interface OkAvatarItem {
+    /** URL de imagen; si falta se muestran las iniciales. */
+    src?: string;
+    /** Iniciales (1-3 chars) cuando no hay imagen. */
+    initials?: string;
+    /** Tono de fondo cuando se pintan iniciales. */
+    tone?: OkAvatarTone;
+    /** Texto accesible (title/alt). Por defecto las iniciales. */
+    label?: string;
+}
+export declare class OkAvatarGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Lista declarativa de avatares. */
+    avatars: OkAvatarItem[];
+    /** Máximo de avatares visibles antes de colapsar en "+N". 0 = sin límite. */
+    max: number;
+    /** Tamaño del stack. */
+    size: OkAvatarGroupSize;
+    /** Solape en px entre avatares (margen-izq negativo). Por defecto según tamaño. */
+    overlap?: number;
+    /** Métricas por tamaño: [diámetro, font-size, solape por defecto]. */
+    private static readonly SIZES;
+    /** Devuelve las iniciales normalizadas (máx 3 chars, mayúsculas). */
+    private initialsOf;
+    private renderAvatar;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-avatar-group': OkAvatarGroup;
+    }
+}

package/dist/components/ok-bar-list/ok-bar-list.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/** Variante de color semántica predefinida para una barra. */
+export type BarListColor = 'brand' | 'leaf' | 'warn' | 'info' | 'danger';
+/** Formato de presentación del valor numérico. */
+export type BarListValueFormat = 'number' | 'compact' | 'currency' | 'percent';
+/** Un ítem de la lista de barras. */
+export interface BarListItem {
+    /** Texto de la fila (se trunca con ellipsis si no cabe). */
+    label: string;
+    /** Valor numérico; determina el ancho del relleno y el texto del valor. */
+    value: number;
+    /** Variante semántica o color CSS literal del relleno (def 'brand'). */
+    color?: BarListColor | string;
+}
+export declare class OkBarList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Lista de ítems a representar (se asigna como propiedad desde JS). */
+    items: BarListItem[];
+    /** Tope de la escala; si no se da, se usa el valor máximo del dataset. */
+    max?: number;
+    /** Formato de presentación del valor. */
+    valueFormat: BarListValueFormat;
+    /** Locale para Intl.NumberFormat (def: navegador). */
+    locale: string;
+    /** Divisa ISO 4217 cuando value-format='currency'. */
+    currency: string;
+    private get scaleMax();
+    private fillColor;
+    private formatValue;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-bar-list': OkBarList;
+    }
+}

package/dist/components/ok-bento/ok-bento.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class OkBento extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Nº de columnas de la rejilla en escritorio (def 6). */
+    cols: number;
+    /** Nº de columnas en tablet (≤900px, def 4). */
+    colsMd: number;
+    /** Separación entre celdas (CSS length, def 1rem). */
+    gap: string;
+    updated(): void;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-bento': OkBento;
+    }
+}

package/dist/components/ok-bento-item/ok-bento-item.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+type Tone = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export declare class OkBentoItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Columnas que ocupa en la rejilla (def 2). */
+    cols: number;
+    /** Filas que ocupa (def 1). */
+    rows: number;
+    /** Tono de acento. */
+    tone: Tone;
+    /** Cristal esmerilado. */
+    glass: boolean;
+    /** Eleva al hover (y cursor pointer / link si hay href). */
+    interactive: boolean;
+    /** Si se pasa, toda la celda es un enlace. */
+    href?: string;
+    /** Icono (nombre iconify, p.ej. "lucide:zap"). Para otro icono usa slot="icon". */
+    icon?: string;
+    /** Eyebrow opcional sobre el título. */
+    eyebrow?: string;
+    /** Título opcional. */
+    heading?: string;
+    updated(): void;
+    /** "lucide:box" → "https://api.iconify.design/lucide/box.svg". */
+    private iconUrl;
+    private body;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-bento-item': OkBentoItem;
+    }
+}
+export {};

package/dist/components/ok-calculator/ok-calculator.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/** Operador interno usado por la máquina de estados. */
+export type OkCalculatorOp = '+' | '-' | '*' | '/' | '';
+/** Detalle del evento ok-input emitido en cada pulsación de tecla. */
+export interface OkCalculatorInputDetail {
+    /** Tecla pulsada tal cual aparece en el teclado (dígito, operador, '=', 'AC', '⌫', '.'). */
+    key: string;
+}
+/** Detalle del evento ok-change emitido cuando cambia el valor mostrado. */
+export interface OkCalculatorChangeDetail {
+    /** Valor actual del display. */
+    value: string;
+}
+export declare class OkCalculator extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Valor mostrado. Si se setea desde fuera actúa como modo controlado (opcional);
+     * si no, el componente gestiona su propio estado interno.
+     */
+    value?: string;
+    private _display;
+    private _prev;
+    private _op;
+    private _stored;
+    private _justEvaluated;
+    private get _shownValue();
+    render(): unknown;
+    private _renderKey;
+    private _ariaForKey;
+    private _onKey;
+    private get _cur();
+    private _inputDigit;
+    private _inputDot;
+    private _applyOperator;
+    private _evaluate;
+    private _clear;
+    private _backspace;
+    private _setDisplay;
+    private _emitInput;
+    private _emitChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-calculator': OkCalculator;
+    }
+}

package/dist/components/ok-calendar/ok-calendar.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+export interface OkCalendarEvent {
+    /** Identificador único del evento. */
+    id: string;
+    /** Fecha del evento en `YYYY-MM-DD` o ISO (se normaliza al día local). */
+    date: string;
+    /** Texto visible del evento (chip / fila de agenda). */
+    title: string;
+    /** Color del chip; cadena CSS (hex, var, etc.). Por defecto, el primario. */
+    color?: string;
+}
+export type OkCalendarView = 'month' | 'agenda';
+export interface OkCalendarLabels {
+    /** Etiqueta del botón de vista Mes. */
+    month: string;
+    /** Etiqueta del botón de vista Agenda. */
+    agenda: string;
+    /** Indicador de eventos extra por día; `{n}` = cantidad. */
+    more: string;
+    /** Texto cuando la agenda no tiene próximos eventos. */
+    agendaEmpty: string;
+    /** aria-label del botón "mes anterior". */
+    prevMonth: string;
+    /** aria-label del botón "mes siguiente". */
+    nextMonth: string;
+}
+export declare class OkCalendar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Eventos a mostrar; el consumidor los pasa por propiedad. */
+    events: OkCalendarEvent[];
+    /** Día seleccionado (`YYYY-MM-DD`). */
+    value: string;
+    /** Vista actual: 'month' | 'agenda'. */
+    view: OkCalendarView;
+    /** Máximo de chips de evento por celda antes de mostrar "+X más". */
+    maxPerDay: number;
+    /** Locale BCP-47 para formatear meses/días/fechas (Intl). Default 'en-US'. */
+    locale: string;
+    /** Textos humanos sobreescribibles (i18n). Default INGLÉS. */
+    labels: Partial<OkCalendarLabels>;
+    /** Textos efectivos: defaults INGLÉS mezclados con los del consumidor. */
+    private get t();
+    private cursor;
+    private seeded;
+    private weekdays;
+    private dayKey;
+    private parseDate;
+    private indexEvents;
+    private navMonth;
+    private setView;
+    private selectDay;
+    private clickEvent;
+    private monthLabel;
+    private buildDays;
+    private renderMonth;
+    private renderAgenda;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-calendar': OkCalendar;
+    }
+}

package/dist/components/ok-carousel/ok-carousel.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+export interface OkCarouselLabels {
+    /** aria-label de la flecha anterior. */
+    previous: string;
+    /** aria-label de la flecha siguiente. */
+    next: string;
+    /** aria-label de cada punto indicador. `{n}` se reemplaza por el número de slide. */
+    goToSlide: string;
+}
+export declare class OkCarousel extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Slides aportados por datos (texto/HTML). Si está vacío, se usa el `<slot>`. */
+    slides: string[];
+    /** Índice del slide activo (controlable desde fuera). */
+    index: number;
+    /** Si > 0, avanza automáticamente cada N milisegundos. */
+    autoplay: number;
+    /** Permite saltar del último al primero (y viceversa). */
+    loop: boolean;
+    /** Textos i18n (parcial; se mezclan sobre los defaults en inglés). */
+    labels: Partial<OkCarouselLabels>;
+    private get t();
+    private slottedCount;
+    private trackEl;
+    private autoplayTimer?;
+    private dragStartX;
+    private dragging;
+    private dragDelta;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private get count();
+    private onSlotChange;
+    private goTo;
+    private next;
+    private prev;
+    private restartAutoplay;
+    private stopAutoplay;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    render(): unknown;
+    private unsafeSlide;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-carousel': OkCarousel;
+    }
+}

package/dist/components/ok-chart/ok-chart.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+/** Una serie de datos del gráfico. */
+export interface OkChartSeries {
+    /** Nombre (para la leyenda). */
+    name?: string;
+    /** Color del trazo/relleno/barra; cae a la cadena de tokens si se omite. */
+    color?: string;
+    /** Valores numéricos de la serie. */
+    data: number[];
+    /** En línea/área: dibuja la serie como trazo punteado (proyección). */
+    dashed?: boolean;
+    /** En barras: pinta esta serie/columna atenuada (variante mute). */
+    mute?: boolean;
+}
+export type OkChartType = 'line' | 'area' | 'bar';
+export declare class OkChart extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Tipo de gráfico. */
+    type: OkChartType;
+    /** Series de datos. */
+    series: OkChartSeries[];
+    /** Etiquetas del eje X (debajo). */
+    labels: string[];
+    /** Etiquetas del eje de valor (izquierda), de arriba a abajo. */
+    axis: string[];
+    /** Pinta las líneas de rejilla horizontales. */
+    gridlines: boolean;
+    /** Alto del SVG en px. */
+    height: number;
+    /** Punto + etiqueta de valor al final de la primera serie (líneas). */
+    endpoint: boolean;
+    /** Texto de la etiqueta del endpoint; si se omite usa el último dato. */
+    endpointLabel: string;
+    private readonly vbWidth;
+    private get vbHeight();
+    private get pad();
+    private get plotW();
+    private get plotH();
+    private get bounds();
+    private seriesColor;
+    private xAt;
+    private yAt;
+    private renderGrid;
+    private renderValueAxis;
+    private renderXLabels;
+    private renderLines;
+    private renderBars;
+    private renderLegend;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-chart': OkChart;
+    }
+}

package/dist/components/ok-chat/ok-chat.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+export interface OkChatMessage {
+    /** Identificador único del mensaje (clave de render). */
+    id: string;
+    /** Texto del mensaje. */
+    text: string;
+    /** Autor visible (solo se muestra en mensajes ajenos). */
+    author?: string;
+    /** Hora del mensaje (texto ya formateado, p.ej. '14:32'). */
+    time?: string;
+    /** Si es `true`, el mensaje es del usuario actual (alineado a la derecha). */
+    self?: boolean;
+    /** Avatar: URL de imagen o iniciales (texto corto). Solo en mensajes ajenos. */
+    avatar?: string;
+}
+/** Textos humanos de ok-chat (i18n; default inglés, override vía prop `labels`). */
+export interface OkChatLabels {
+    /** Placeholder del compositor. */
+    composerPlaceholder: string;
+    /** aria-label del botón de enviar. */
+    send: string;
+}
+export declare class OkChat extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Mensajes del hilo (orden cronológico ascendente). */
+    messages: OkChatMessage[];
+    /** Texto de la cabecera; si está vacío no se dibuja cabecera. */
+    title: string;
+    /** Placeholder del compositor. Si vacío, se deriva de `labels.composerPlaceholder`. */
+    placeholder: string;
+    /** Si está activo, oculta el compositor (chat de solo lectura). */
+    readonly: boolean;
+    /** Overrides de textos humanos (i18n). Se fusionan sobre los defaults en inglés. */
+    labels: Partial<OkChatLabels>;
+    /** Textos efectivos (defaults inglés + overrides). */
+    private get t();
+    /** Placeholder efectivo: prop explícita o el de labels. */
+    private get effectivePlaceholder();
+    private logEl?;
+    private textareaEl?;
+    private isGroupStart;
+    private isGroupEnd;
+    private renderAvatar;
+    private renderMessage;
+    private send;
+    private onKeydown;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-chat': OkChat;
+    }
+}

package/dist/components/ok-coachmark/ok-coachmark.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+export interface OkCoachStep {
+    /** Selector CSS del elemento a destacar (spotlight). Si no resuelve, el bubble se centra. */
+    target: string;
+    /** Título del paso (negrita). */
+    title?: string;
+    /** Cuerpo descriptivo del paso. */
+    text?: string;
+    /**
+     * Lado preferido del bubble respecto al target: `top` | `bottom` | `left` | `right`.
+     * Default `bottom`. Igualmente se voltea si no cabe en el viewport (edge-aware).
+     */
+    placement?: OkCoachPlacement;
+}
+export type OkCoachPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface OkCoachmarkLabels {
+    /** Botón anterior. */
+    prev: string;
+    /** Botón siguiente. */
+    next: string;
+    /** Botón del último paso (finaliza el tour). */
+    finish: string;
+    /** Botón saltar (cierra el tour). */
+    skip: string;
+    /** Plantilla de etiqueta de paso; `{n}` = actual (1-based), `{total}` = total. */
+    step: string;
+}
+export declare class OkCoachmark extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Pasos del tour. */
+    steps: OkCoachStep[];
+    /** Índice del paso activo (0-based). Reflejado para control externo. */
+    current: number;
+    /** Si el tour está abierto/visible. */
+    open: boolean;
+    /** Textos traducibles (merge sobre los defaults en inglés). */
+    labels: Partial<OkCoachmarkLabels>;
+    private rect;
+    private bubble;
+    private portalRoot;
+    private get t();
+    private get step();
+    private get isLast();
+    private readonly onReflow;
+    private readonly onKeydown;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private bind;
+    private unbind;
+    private ensurePortal;
+    private measure;
+    private computeBubble;
+    private emit;
+    private goTo;
+    private next;
+    private prev;
+    private finish;
+    private skip;
+    render(): unknown;
+    private scrimTemplate;
+    private spotTemplate;
+    private bubbleTemplate;
+    private overlayTemplate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-coachmark': OkCoachmark;
+    }
+}

package/dist/components/ok-code/ok-code.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export declare class OkCode extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Texto de código a mostrar. */
+    code: string;
+    /** Variante inline (pill dentro de texto) en vez de bloque. */
+    inline: boolean;
+    /** Etiqueta del lenguaje (solo informativa, no hay resaltado). */
+    language: string;
+    /** Muestra el botón de copiar (solo en variante bloque). */
+    copy: boolean;
+    /** Estado transitorio tras copiar (feedback visual). */
+    private copied;
+    private handleCopy;
+    render(): unknown;
+}
+/** Detalle del evento `ok-copy`. */
+export interface OkCodeCopyDetail {
+    /** Código que se intentó copiar. */
+    code: string;
+    /** Si la copia al portapapeles tuvo éxito. */
+    ok: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-code': OkCode;
+    }
+}

package/dist/components/ok-color-picker/ok-color-picker.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+export interface OkRgb {
+    /** Canal rojo (0–255). */
+    r: number;
+    /** Canal verde (0–255). */
+    g: number;
+    /** Canal azul (0–255). */
+    b: number;
+}
+export interface OkColorPickerLabels {
+    /** aria-label del botón swatch que abre el panel. */
+    triggerLabel: string;
+    /** aria-label del panel/popover. */
+    panelLabel: string;
+    /** aria-label del input de valor hexadecimal. */
+    hexLabel: string;
+}
+export declare class OkColorPicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Color actual en hex (#rrggbb). */
+    value: string;
+    /** Swatches preset (array de hex). Si no se pasa, se usa una paleta razonable. */
+    presets: string[];
+    /** Textos i18n (default inglés); pasa solo las claves que quieras sobreescribir. */
+    labels: Partial<OkColorPickerLabels>;
+    private get t();
+    private open;
+    private h;
+    private s;
+    private v;
+    private hexInput;
+    private hexInvalid;
+    private dragging;
+    private syncFromValue;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private readonly onDocClick;
+    private readonly onKeydown;
+    private bindGlobal;
+    private unbindGlobal;
+    private toggle;
+    private openPanel;
+    private close;
+    private commitFromHsv;
+    private emit;
+    private updateSvFromPointer;
+    private updateHueFromPointer;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
+    private bindDrag;
+    private unbindDrag;
+    private onSvPointerDown;
+    private onHuePointerDown;
+    private onHexInput;
+    private selectPreset;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-color-picker': OkColorPicker;
+    }
+}