tempest-react-sdk 0.78.0 → 0.80.0

package/dist/components/Scheduler/scheduler-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"scheduler-layout.js","names":[],"sources":["../../../src/components/Scheduler/scheduler-layout.ts"],"sourcesContent":["/** An event on the schedule. `start`/`end` are absolute instants in local time. */\nexport interface SchedulerEvent {\n    id: string;\n    title: string;\n    start: Date;\n    end: Date;\n    /** Render across the all-day lane instead of the time grid. */\n    allDay?: boolean;\n    /** Free-form payload the app passes through. */\n    data?: Record<string, unknown>;\n}\n\n/** An event placed in the grid: which day, where vertically, which column. */\nexport interface PlacedEvent {\n    event: SchedulerEvent;\n    /** Index into the rendered day list. */\n    dayIndex: number;\n    /** Distance from the top of the day column, as a fraction of its height. */\n    top: number;\n    /** Height as a fraction of the day column. */\n    height: number;\n    /** Column this event occupies among its overlapping cluster, zero-based. */\n    column: number;\n    /** How many columns the cluster was split into. */\n    columns: number;\n}\n\n/** The visible time window of a day, in minutes from midnight. */\nexport interface DayWindow {\n    startMinute: number;\n    endMinute: number;\n}\n\n/** Minutes from midnight, in local time. */\nexport function minutesOfDay(date: Date): number {\n    return date.getHours() * 60 + date.getMinutes();\n}\n\n/** Midnight local time on the same calendar day as `date`. */\nexport function startOfDay(date: Date): Date {\n    const copy = new Date(date);\n    copy.setHours(0, 0, 0, 0);\n    return copy;\n}\n\n/** `date` shifted by whole days, preserving local wall-clock time. */\nexport function addDays(date: Date, days: number): Date {\n    const copy = new Date(date);\n    copy.setDate(copy.getDate() + days);\n    return copy;\n}\n\n/** Whether two dates fall on the same local calendar day. */\nexport function isSameDay(a: Date, b: Date): boolean {\n    return (\n        a.getFullYear() === b.getFullYear() &&\n        a.getMonth() === b.getMonth() &&\n        a.getDate() === b.getDate()\n    );\n}\n\n/**\n * The consecutive local days a schedule should render.\n *\n * Built by incrementing the calendar day rather than adding 24 h of milliseconds:\n * across a DST boundary a day is 23 or 25 hours long, and millisecond arithmetic\n * would silently produce a duplicated or skipped date.\n *\n * @param anchor - Any instant within the first day.\n * @param count - How many days to produce.\n * @returns Midnight of each day, in order.\n */\nexport function dayRange(anchor: Date, count: number): Date[] {\n    const first = startOfDay(anchor);\n    return Array.from({ length: Math.max(0, count) }, (_, index) => addDays(first, index));\n}\n\n/**\n * Split an event into one segment per day it touches, clipped to the window.\n *\n * An event that crosses midnight has to appear in both columns, and each piece has\n * to be clipped to that day's visible window — otherwise a 23:00–01:00 booking\n * either vanishes or is drawn far outside its column.\n *\n * @param event - The event to place.\n * @param days - Midnight of each rendered day.\n * @param window - Visible minute range shared by every day.\n * @returns One entry per day the event is visible on.\n */\nfunction segmentsFor(\n    event: SchedulerEvent,\n    days: Date[],\n    window: DayWindow,\n): { dayIndex: number; from: number; to: number }[] {\n    const out: { dayIndex: number; from: number; to: number }[] = [];\n    days.forEach((day, dayIndex) => {\n        const dayStart = day.getTime();\n        const dayEnd = addDays(day, 1).getTime();\n        if (event.end.getTime() <= dayStart || event.start.getTime() >= dayEnd) return;\n\n        const from = event.start.getTime() <= dayStart ? 0 : minutesOfDay(event.start);\n        const to =\n            event.end.getTime() >= dayEnd\n                ? 24 * 60\n                : minutesOfDay(event.end) || (event.end.getTime() > dayStart ? 24 * 60 : 0);\n\n        const clippedFrom = Math.max(window.startMinute, from);\n        const clippedTo = Math.min(window.endMinute, to);\n        if (clippedTo <= clippedFrom) return;\n        out.push({ dayIndex, from: clippedFrom, to: clippedTo });\n    });\n    return out;\n}\n\n/**\n * Assign columns so overlapping events sit side by side instead of on top.\n *\n * Events are grouped into *clusters* of mutual overlap — a chain where each event\n * overlaps at least one other — and every event in a cluster is given the same\n * column count. That shared count is what makes the widths line up; assigning\n * columns per pair instead produces the ragged layout where two events claim half\n * the width and a third silently covers one of them.\n *\n * A column is reused as soon as it is free, so `9–10`, `9–10`, `10–11` needs two\n * columns rather than three.\n *\n * @param segments - Same-day segments, in any order.\n * @returns The same segments with `column` and `columns` filled in.\n */\nfunction assignColumns<T extends { from: number; to: number }>(\n    segments: T[],\n): (T & { column: number; columns: number })[] {\n    const sorted = [...segments].sort((a, b) => a.from - b.from || a.to - b.to);\n    const placed: (T & { column: number; columns: number })[] = [];\n\n    let cluster: (T & { column: number; columns: number })[] = [];\n    let clusterEnd = -Infinity;\n\n    /** Freeze the current cluster: everyone in it shares its column count. */\n    const closeCluster = (): void => {\n        const width = cluster.reduce((max, item) => Math.max(max, item.column + 1), 0);\n        for (const item of cluster) item.columns = width;\n        placed.push(...cluster);\n        cluster = [];\n        clusterEnd = -Infinity;\n    };\n\n    for (const segment of sorted) {\n        if (segment.from >= clusterEnd) closeCluster();\n\n        // Lowest column whose last event has already ended.\n        const taken = new Set(\n            cluster.filter((item) => item.to > segment.from).map((i) => i.column),\n        );\n        let column = 0;\n        while (taken.has(column)) column += 1;\n\n        cluster.push({ ...segment, column, columns: 1 });\n        clusterEnd = Math.max(clusterEnd, segment.to);\n    }\n    closeCluster();\n\n    return placed;\n}\n\n/**\n * Lay out timed events across the rendered days.\n *\n * All-day events are excluded — they belong in their own lane, where a vertical\n * position would be meaningless.\n *\n * @param params.events - Every event, all-day ones included.\n * @param params.days - Midnight of each rendered day.\n * @param params.window - Visible minute range.\n * @returns Placed events, positioned as fractions of the column height.\n */\nexport function layoutEvents({\n    events,\n    days,\n    window,\n}: {\n    events: readonly SchedulerEvent[];\n    days: Date[];\n    window: DayWindow;\n}): PlacedEvent[] {\n    const span = window.endMinute - window.startMinute;\n    if (span <= 0 || days.length === 0) return [];\n\n    const byDay = new Map<number, { event: SchedulerEvent; from: number; to: number }[]>();\n    for (const event of events) {\n        if (event.allDay) continue;\n        if (event.end.getTime() <= event.start.getTime()) continue;\n        for (const segment of segmentsFor(event, days, window)) {\n            const list = byDay.get(segment.dayIndex) ?? [];\n            list.push({ event, from: segment.from, to: segment.to });\n            byDay.set(segment.dayIndex, list);\n        }\n    }\n\n    const placed: PlacedEvent[] = [];\n    for (const [dayIndex, segments] of byDay) {\n        for (const item of assignColumns(segments)) {\n            placed.push({\n                event: item.event,\n                dayIndex,\n                top: (item.from - window.startMinute) / span,\n                height: (item.to - item.from) / span,\n                column: item.column,\n                columns: item.columns,\n            });\n        }\n    }\n    return placed;\n}\n\n/**\n * All-day events that intersect the rendered range, with their day span.\n *\n * @param params.events - Every event.\n * @param params.days - Midnight of each rendered day.\n * @returns One entry per all-day event, clipped to the visible days.\n */\nexport function layoutAllDay({\n    events,\n    days,\n}: {\n    events: readonly SchedulerEvent[];\n    days: Date[];\n}): { event: SchedulerEvent; dayIndex: number; span: number }[] {\n    if (days.length === 0) return [];\n    const rangeEnd = addDays(days[days.length - 1], 1).getTime();\n\n    return events\n        .filter((event) => event.allDay)\n        .filter(\n            (event) => event.end.getTime() > days[0].getTime() && event.start.getTime() < rangeEnd,\n        )\n        .map((event) => {\n            const firstIndex = days.findIndex(\n                (day) => addDays(day, 1).getTime() > event.start.getTime(),\n            );\n            const lastIndex = days.reduce(\n                (last, day, index) => (day.getTime() < event.end.getTime() ? index : last),\n                0,\n            );\n            const dayIndex = Math.max(0, firstIndex);\n            return { event, dayIndex, span: Math.max(1, lastIndex - dayIndex + 1) };\n        });\n}\n\n/**\n * Hour marks to label the time gutter with.\n *\n * @param window - Visible minute range.\n * @returns Each whole hour inside the window, in minutes from midnight.\n */\nexport function hourMarks(window: DayWindow): number[] {\n    const first = Math.ceil(window.startMinute / 60);\n    const last = Math.floor(window.endMinute / 60);\n    return Array.from({ length: Math.max(0, last - first + 1) }, (_, i) => (first + i) * 60);\n}\n\n/**\n * Where an instant falls within the window, as a fraction of the column height.\n *\n * @param date - The instant.\n * @param window - Visible minute range.\n * @returns A fraction in `0…1`, or `null` when outside the window.\n */\nexport function fractionOfWindow(date: Date, window: DayWindow): number | null {\n    const minute = minutesOfDay(date);\n    const span = window.endMinute - window.startMinute;\n    if (span <= 0 || minute < window.startMinute || minute > window.endMinute) return null;\n    return (minute - window.startMinute) / span;\n}\n"],"mappings":";AAkCA,SAAgB,EAAa,GAAoB;CAC7C,OAAO,EAAK,SAAS,IAAI,KAAK,EAAK,WAAW;AAClD;AAGA,SAAgB,EAAW,GAAkB;CACzC,IAAM,IAAO,IAAI,KAAK,CAAI;CAE1B,OADA,EAAK,SAAS,GAAG,GAAG,GAAG,CAAC,GACjB;AACX;AAGA,SAAgB,EAAQ,GAAY,GAAoB;CACpD,IAAM,IAAO,IAAI,KAAK,CAAI;CAE1B,OADA,EAAK,QAAQ,EAAK,QAAQ,IAAI,CAAI,GAC3B;AACX;AAGA,SAAgB,EAAU,GAAS,GAAkB;CACjD,OACI,EAAE,YAAY,MAAM,EAAE,YAAY,KAClC,EAAE,SAAS,MAAM,EAAE,SAAS,KAC5B,EAAE,QAAQ,MAAM,EAAE,QAAQ;AAElC;AAaA,SAAgB,EAAS,GAAc,GAAuB;CAC1D,IAAM,IAAQ,EAAW,CAAM;CAC/B,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,CAAK,EAAE,IAAI,GAAG,MAAU,EAAQ,GAAO,CAAK,CAAC;AACzF;AAcA,SAAS,EACL,GACA,GACA,GACgD;CAChD,IAAM,IAAwD,CAAC;CAiB/D,OAhBA,EAAK,SAAS,GAAK,MAAa;EAC5B,IAAM,IAAW,EAAI,QAAQ,GACvB,IAAS,EAAQ,GAAK,CAAC,CAAC,CAAC,QAAQ;EACvC,IAAI,EAAM,IAAI,QAAQ,KAAK,KAAY,EAAM,MAAM,QAAQ,KAAK,GAAQ;EAExE,IAAM,IAAO,EAAM,MAAM,QAAQ,KAAK,IAAW,IAAI,EAAa,EAAM,KAAK,GACvE,IACF,EAAM,IAAI,QAAQ,KAAK,IACjB,OACA,EAAa,EAAM,GAAG,MAAM,EAAM,IAAI,QAAQ,IAAI,IAAW,OAAU,IAE3E,IAAc,KAAK,IAAI,EAAO,aAAa,CAAI,GAC/C,IAAY,KAAK,IAAI,EAAO,WAAW,CAAE;EAC3C,KAAa,KACjB,EAAI,KAAK;GAAE;GAAU,MAAM;GAAa,IAAI;EAAU,CAAC;CAC3D,CAAC,GACM;AACX;AAiBA,SAAS,EACL,GAC2C;CAC3C,IAAM,IAAS,CAAC,GAAG,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GACpE,IAAsD,CAAC,GAEzD,IAAuD,CAAC,GACxD,IAAa,WAGX,UAA2B;EAC7B,IAAM,IAAQ,EAAQ,QAAQ,GAAK,MAAS,KAAK,IAAI,GAAK,EAAK,SAAS,CAAC,GAAG,CAAC;EAC7E,KAAK,IAAM,KAAQ,GAAS,EAAK,UAAU;EAG3C,AAFA,EAAO,KAAK,GAAG,CAAO,GACtB,IAAU,CAAC,GACX,IAAa;CACjB;CAEA,KAAK,IAAM,KAAW,GAAQ;EAC1B,AAAI,EAAQ,QAAQ,KAAY,EAAa;EAG7C,IAAM,IAAQ,IAAI,IACd,EAAQ,QAAQ,MAAS,EAAK,KAAK,EAAQ,IAAI,CAAC,CAAC,KAAK,MAAM,EAAE,MAAM,CACxE,GACI,IAAS;EACb,OAAO,EAAM,IAAI,CAAM,IAAG,KAAU;EAGpC,AADA,EAAQ,KAAK;GAAE,GAAG;GAAS;GAAQ,SAAS;EAAE,CAAC,GAC/C,IAAa,KAAK,IAAI,GAAY,EAAQ,EAAE;CAChD;CAGA,OAFA,EAAa,GAEN;AACX;AAaA,SAAgB,EAAa,EACzB,WACA,SACA,aAKc;CACd,IAAM,IAAO,EAAO,YAAY,EAAO;CACvC,IAAI,KAAQ,KAAK,EAAK,WAAW,GAAG,OAAO,CAAC;CAE5C,IAAM,oBAAQ,IAAI,IAAmE;CACrF,KAAK,IAAM,KAAS,GACZ,OAAM,UACN,IAAM,IAAI,QAAQ,KAAK,EAAM,MAAM,QAAQ,IAC/C,KAAK,IAAM,KAAW,EAAY,GAAO,GAAM,CAAM,GAAG;EACpD,IAAM,IAAO,EAAM,IAAI,EAAQ,QAAQ,KAAK,CAAC;EAE7C,AADA,EAAK,KAAK;GAAE;GAAO,MAAM,EAAQ;GAAM,IAAI,EAAQ;EAAG,CAAC,GACvD,EAAM,IAAI,EAAQ,UAAU,CAAI;CACpC;CAGJ,IAAM,IAAwB,CAAC;CAC/B,KAAK,IAAM,CAAC,GAAU,MAAa,GAC/B,KAAK,IAAM,KAAQ,EAAc,CAAQ,GACrC,EAAO,KAAK;EACR,OAAO,EAAK;EACZ;EACA,MAAM,EAAK,OAAO,EAAO,eAAe;EACxC,SAAS,EAAK,KAAK,EAAK,QAAQ;EAChC,QAAQ,EAAK;EACb,SAAS,EAAK;CAClB,CAAC;CAGT,OAAO;AACX;AASA,SAAgB,EAAa,EACzB,WACA,WAI4D;CAC5D,IAAI,EAAK,WAAW,GAAG,OAAO,CAAC;CAC/B,IAAM,IAAW,EAAQ,EAAK,EAAK,SAAS,IAAI,CAAC,CAAC,CAAC,QAAQ;CAE3D,OAAO,EACF,QAAQ,MAAU,EAAM,MAAM,CAAC,CAC/B,QACI,MAAU,EAAM,IAAI,QAAQ,IAAI,EAAK,EAAE,CAAC,QAAQ,KAAK,EAAM,MAAM,QAAQ,IAAI,CAClF,CAAC,CACA,KAAK,MAAU;EACZ,IAAM,IAAa,EAAK,WACnB,MAAQ,EAAQ,GAAK,CAAC,CAAC,CAAC,QAAQ,IAAI,EAAM,MAAM,QAAQ,CAC7D,GACM,IAAY,EAAK,QAClB,GAAM,GAAK,MAAW,EAAI,QAAQ,IAAI,EAAM,IAAI,QAAQ,IAAI,IAAQ,GACrE,CACJ,GACM,IAAW,KAAK,IAAI,GAAG,CAAU;EACvC,OAAO;GAAE;GAAO;GAAU,MAAM,KAAK,IAAI,GAAG,IAAY,IAAW,CAAC;EAAE;CAC1E,CAAC;AACT;AAQA,SAAgB,EAAU,GAA6B;CACnD,IAAM,IAAQ,KAAK,KAAK,EAAO,cAAc,EAAE,GACzC,IAAO,KAAK,MAAM,EAAO,YAAY,EAAE;CAC7C,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,IAAO,IAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,IAAQ,KAAK,EAAE;AAC3F;AASA,SAAgB,EAAiB,GAAY,GAAkC;CAC3E,IAAM,IAAS,EAAa,CAAI,GAC1B,IAAO,EAAO,YAAY,EAAO;CAEvC,OADI,KAAQ,KAAK,IAAS,EAAO,eAAe,IAAS,EAAO,YAAkB,QAC1E,IAAS,EAAO,eAAe;AAC3C"}
+{"version":3,"file":"scheduler-layout.js","names":["minutesOfDay","date","startOfDay","copy","addDays","days","isSameDay","a","b","dayRange","first","anchor","count","index","segmentsFor","out","dayStart","day","dayEnd","event","from","to","clippedFrom","window","clippedTo","assignColumns","sorted","segments","placed","cluster","clusterEnd","closeCluster","width","max","item","segment","taken","i","column","layoutEvents","span","byDay","events","list","dayIndex","layoutAllDay","rangeEnd","firstIndex","lastIndex","last","hourMarks","fractionOfWindow","minute"],"sources":["../../../src/components/Scheduler/scheduler-layout.ts"],"sourcesContent":["/** An event on the schedule. `start`/`end` are absolute instants in local time. */\nexport interface SchedulerEvent {\n    id: string;\n    title: string;\n    start: Date;\n    end: Date;\n    /** Render across the all-day lane instead of the time grid. */\n    allDay?: boolean;\n    /** Free-form payload the app passes through. */\n    data?: Record<string, unknown>;\n}\n\n/** An event placed in the grid: which day, where vertically, which column. */\nexport interface PlacedEvent {\n    event: SchedulerEvent;\n    /** Index into the rendered day list. */\n    dayIndex: number;\n    /** Distance from the top of the day column, as a fraction of its height. */\n    top: number;\n    /** Height as a fraction of the day column. */\n    height: number;\n    /** Column this event occupies among its overlapping cluster, zero-based. */\n    column: number;\n    /** How many columns the cluster was split into. */\n    columns: number;\n}\n\n/** The visible time window of a day, in minutes from midnight. */\nexport interface DayWindow {\n    startMinute: number;\n    endMinute: number;\n}\n\n/** Minutes from midnight, in local time. */\nexport function minutesOfDay(date: Date): number {\n    return date.getHours() * 60 + date.getMinutes();\n}\n\n/** Midnight local time on the same calendar day as `date`. */\nexport function startOfDay(date: Date): Date {\n    const copy = new Date(date);\n    copy.setHours(0, 0, 0, 0);\n    return copy;\n}\n\n/** `date` shifted by whole days, preserving local wall-clock time. */\nexport function addDays(date: Date, days: number): Date {\n    const copy = new Date(date);\n    copy.setDate(copy.getDate() + days);\n    return copy;\n}\n\n/** Whether two dates fall on the same local calendar day. */\nexport function isSameDay(a: Date, b: Date): boolean {\n    return (\n        a.getFullYear() === b.getFullYear() &&\n        a.getMonth() === b.getMonth() &&\n        a.getDate() === b.getDate()\n    );\n}\n\n/**\n * The consecutive local days a schedule should render.\n *\n * Built by incrementing the calendar day rather than adding 24 h of milliseconds:\n * across a DST boundary a day is 23 or 25 hours long, and millisecond arithmetic\n * would silently produce a duplicated or skipped date.\n *\n * @param anchor - Any instant within the first day.\n * @param count - How many days to produce.\n * @returns Midnight of each day, in order.\n */\nexport function dayRange(anchor: Date, count: number): Date[] {\n    const first = startOfDay(anchor);\n    return Array.from({ length: Math.max(0, count) }, (_, index) => addDays(first, index));\n}\n\n/**\n * Split an event into one segment per day it touches, clipped to the window.\n *\n * An event that crosses midnight has to appear in both columns, and each piece has\n * to be clipped to that day's visible window — otherwise a 23:00–01:00 booking\n * either vanishes or is drawn far outside its column.\n *\n * @param event - The event to place.\n * @param days - Midnight of each rendered day.\n * @param window - Visible minute range shared by every day.\n * @returns One entry per day the event is visible on.\n */\nfunction segmentsFor(\n    event: SchedulerEvent,\n    days: Date[],\n    window: DayWindow,\n): { dayIndex: number; from: number; to: number }[] {\n    const out: { dayIndex: number; from: number; to: number }[] = [];\n    days.forEach((day, dayIndex) => {\n        const dayStart = day.getTime();\n        const dayEnd = addDays(day, 1).getTime();\n        if (event.end.getTime() <= dayStart || event.start.getTime() >= dayEnd) return;\n\n        const from = event.start.getTime() <= dayStart ? 0 : minutesOfDay(event.start);\n        const to =\n            event.end.getTime() >= dayEnd\n                ? 24 * 60\n                : minutesOfDay(event.end) || (event.end.getTime() > dayStart ? 24 * 60 : 0);\n\n        const clippedFrom = Math.max(window.startMinute, from);\n        const clippedTo = Math.min(window.endMinute, to);\n        if (clippedTo <= clippedFrom) return;\n        out.push({ dayIndex, from: clippedFrom, to: clippedTo });\n    });\n    return out;\n}\n\n/**\n * Assign columns so overlapping events sit side by side instead of on top.\n *\n * Events are grouped into *clusters* of mutual overlap — a chain where each event\n * overlaps at least one other — and every event in a cluster is given the same\n * column count. That shared count is what makes the widths line up; assigning\n * columns per pair instead produces the ragged layout where two events claim half\n * the width and a third silently covers one of them.\n *\n * A column is reused as soon as it is free, so `9–10`, `9–10`, `10–11` needs two\n * columns rather than three.\n *\n * @param segments - Same-day segments, in any order.\n * @returns The same segments with `column` and `columns` filled in.\n */\nfunction assignColumns<T extends { from: number; to: number }>(\n    segments: T[],\n): (T & { column: number; columns: number })[] {\n    const sorted = [...segments].sort((a, b) => a.from - b.from || a.to - b.to);\n    const placed: (T & { column: number; columns: number })[] = [];\n\n    let cluster: (T & { column: number; columns: number })[] = [];\n    let clusterEnd = -Infinity;\n\n    /** Freeze the current cluster: everyone in it shares its column count. */\n    const closeCluster = (): void => {\n        const width = cluster.reduce((max, item) => Math.max(max, item.column + 1), 0);\n        for (const item of cluster) item.columns = width;\n        placed.push(...cluster);\n        cluster = [];\n        clusterEnd = -Infinity;\n    };\n\n    for (const segment of sorted) {\n        if (segment.from >= clusterEnd) closeCluster();\n\n        // Lowest column whose last event has already ended.\n        const taken = new Set(\n            cluster.filter((item) => item.to > segment.from).map((i) => i.column),\n        );\n        let column = 0;\n        while (taken.has(column)) column += 1;\n\n        cluster.push({ ...segment, column, columns: 1 });\n        clusterEnd = Math.max(clusterEnd, segment.to);\n    }\n    closeCluster();\n\n    return placed;\n}\n\n/**\n * Lay out timed events across the rendered days.\n *\n * All-day events are excluded — they belong in their own lane, where a vertical\n * position would be meaningless.\n *\n * @param params.events - Every event, all-day ones included.\n * @param params.days - Midnight of each rendered day.\n * @param params.window - Visible minute range.\n * @returns Placed events, positioned as fractions of the column height.\n */\nexport function layoutEvents({\n    events,\n    days,\n    window,\n}: {\n    events: readonly SchedulerEvent[];\n    days: Date[];\n    window: DayWindow;\n}): PlacedEvent[] {\n    const span = window.endMinute - window.startMinute;\n    if (span <= 0 || days.length === 0) return [];\n\n    const byDay = new Map<number, { event: SchedulerEvent; from: number; to: number }[]>();\n    for (const event of events) {\n        if (event.allDay) continue;\n        if (event.end.getTime() <= event.start.getTime()) continue;\n        for (const segment of segmentsFor(event, days, window)) {\n            const list = byDay.get(segment.dayIndex) ?? [];\n            list.push({ event, from: segment.from, to: segment.to });\n            byDay.set(segment.dayIndex, list);\n        }\n    }\n\n    const placed: PlacedEvent[] = [];\n    for (const [dayIndex, segments] of byDay) {\n        for (const item of assignColumns(segments)) {\n            placed.push({\n                event: item.event,\n                dayIndex,\n                top: (item.from - window.startMinute) / span,\n                height: (item.to - item.from) / span,\n                column: item.column,\n                columns: item.columns,\n            });\n        }\n    }\n    return placed;\n}\n\n/**\n * All-day events that intersect the rendered range, with their day span.\n *\n * @param params.events - Every event.\n * @param params.days - Midnight of each rendered day.\n * @returns One entry per all-day event, clipped to the visible days.\n */\nexport function layoutAllDay({\n    events,\n    days,\n}: {\n    events: readonly SchedulerEvent[];\n    days: Date[];\n}): { event: SchedulerEvent; dayIndex: number; span: number }[] {\n    if (days.length === 0) return [];\n    const rangeEnd = addDays(days[days.length - 1], 1).getTime();\n\n    return events\n        .filter((event) => event.allDay)\n        .filter(\n            (event) => event.end.getTime() > days[0].getTime() && event.start.getTime() < rangeEnd,\n        )\n        .map((event) => {\n            const firstIndex = days.findIndex(\n                (day) => addDays(day, 1).getTime() > event.start.getTime(),\n            );\n            const lastIndex = days.reduce(\n                (last, day, index) => (day.getTime() < event.end.getTime() ? index : last),\n                0,\n            );\n            const dayIndex = Math.max(0, firstIndex);\n            return { event, dayIndex, span: Math.max(1, lastIndex - dayIndex + 1) };\n        });\n}\n\n/**\n * Hour marks to label the time gutter with.\n *\n * @param window - Visible minute range.\n * @returns Each whole hour inside the window, in minutes from midnight.\n */\nexport function hourMarks(window: DayWindow): number[] {\n    const first = Math.ceil(window.startMinute / 60);\n    const last = Math.floor(window.endMinute / 60);\n    return Array.from({ length: Math.max(0, last - first + 1) }, (_, i) => (first + i) * 60);\n}\n\n/**\n * Where an instant falls within the window, as a fraction of the column height.\n *\n * @param date - The instant.\n * @param window - Visible minute range.\n * @returns A fraction in `0…1`, or `null` when outside the window.\n */\nexport function fractionOfWindow(date: Date, window: DayWindow): number | null {\n    const minute = minutesOfDay(date);\n    const span = window.endMinute - window.startMinute;\n    if (span <= 0 || minute < window.startMinute || minute > window.endMinute) return null;\n    return (minute - window.startMinute) / span;\n}\n"],"mappings":";AAkCA,SAAgBA,EAAa,GAAoB;CAC7C,OAAOC,EAAK,SAAS,IAAI,KAAKA,EAAK,WAAW;AAClD;AAGA,SAAgBC,EAAW,GAAkB;CACzC,IAAMC,IAAO,IAAI,KAAKF,CAAI;CAE1B,OADAE,EAAK,SAAS,GAAG,GAAG,GAAG,CAAC,GACjBA;AACX;AAGA,SAAgBC,EAAQ,GAAY,GAAoB;CACpD,IAAMD,IAAO,IAAI,KAAKF,CAAI;CAE1B,OADAE,EAAK,QAAQA,EAAK,QAAQ,IAAIE,CAAI,GAC3BF;AACX;AAGA,SAAgBG,EAAU,GAAS,GAAkB;CACjD,OACIC,EAAE,YAAY,MAAMC,EAAE,YAAY,KAClCD,EAAE,SAAS,MAAMC,EAAE,SAAS,KAC5BD,EAAE,QAAQ,MAAMC,EAAE,QAAQ;AAElC;AAaA,SAAgBC,EAAS,GAAc,GAAuB;CAC1D,IAAMC,IAAQR,EAAWS,CAAM;CAC/B,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAGC,CAAK,EAAE,IAAI,GAAG,MAAUR,EAAQM,GAAOG,CAAK,CAAC;AACzF;AAcA,SAASC,EACL,GACA,GACA,GACgD;CAChD,IAAMC,IAAwD,CAAC;CAiB/D,OAhBAV,EAAK,SAAS,GAAK,MAAa;EAC5B,IAAMW,IAAWC,EAAI,QAAQ,GACvBC,IAASd,EAAQa,GAAK,CAAC,CAAC,CAAC,QAAQ;EACvC,IAAIE,EAAM,IAAI,QAAQ,KAAKH,KAAYG,EAAM,MAAM,QAAQ,KAAKD,GAAQ;EAExE,IAAME,IAAOD,EAAM,MAAM,QAAQ,KAAKH,IAAW,IAAIhB,EAAamB,EAAM,KAAK,GACvEE,IACFF,EAAM,IAAI,QAAQ,KAAKD,IACjB,OACAlB,EAAamB,EAAM,GAAG,MAAMA,EAAM,IAAI,QAAQ,IAAIH,IAAW,OAAU,IAE3EM,IAAc,KAAK,IAAIC,EAAO,aAAaH,CAAI,GAC/CI,IAAY,KAAK,IAAID,EAAO,WAAWF,CAAE;EAC/C,AAAIG,KAAaF,KACjBP,EAAI,KAAK;GAAE;GAAU,MAAMO;GAAa,IAAIE;EAAU,CAAC;CAC3D,CAAC,GACMT;AACX;AAiBA,SAASU,EACL,GAC2C;CAC3C,IAAMC,IAAS,CAAC,GAAGC,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAMpB,EAAE,OAAOC,EAAE,QAAQD,EAAE,KAAKC,EAAE,EAAE,GACpEoB,IAAsD,CAAC,GAEzDC,IAAuD,CAAC,GACxDC,IAAa,WAGXC,UAA2B;EAC7B,IAAMC,IAAQH,EAAQ,QAAQ,GAAK,MAAS,KAAK,IAAII,GAAKC,EAAK,SAAS,CAAC,GAAG,CAAC;EAC7E,KAAK,IAAMA,KAAQL,GAAS,EAAK,UAAUG;EAG3C,AAFAJ,EAAO,KAAK,GAAGC,CAAO,GACtB,IAAU,CAAC,GACX,IAAa;CACjB;CAEA,KAAK,IAAMM,KAAWT,GAAQ;EAC1B,AAAIS,EAAQ,QAAQL,KAAYC,EAAa;EAG7C,IAAMK,IAAQ,IAAI,IACdP,EAAQ,QAAQ,MAASK,EAAK,KAAKC,EAAQ,IAAI,CAAC,CAAC,KAAK,MAAME,EAAE,MAAM,CACxE,GACIC,IAAS;EACb,OAAOF,EAAM,IAAIE,CAAM,IAAG,KAAU;EAGpC,AADAT,EAAQ,KAAK;GAAE,GAAGM;GAAS;GAAQ,SAAS;EAAE,CAAC,GAC/C,IAAa,KAAK,IAAIL,GAAYK,EAAQ,EAAE;CAChD;CAGA,OAFAJ,EAAa,GAENH;AACX;AAaA,SAAgBW,EAAa,EACzB,WACA,SACA,aAKc;CACd,IAAMC,IAAOjB,EAAO,YAAYA,EAAO;CACvC,IAAIiB,KAAQ,KAAKnC,EAAK,WAAW,GAAG,OAAO,CAAC;CAE5C,IAAMoC,oBAAQ,IAAI,IAAmE;CACrF,KAAK,IAAMtB,KAASuB,GAChB,IAAI,GAAM,UACN,IAAM,IAAI,QAAQ,KAAKvB,EAAM,MAAM,QAAQ,IAC/C,KAAK,IAAMgB,KAAWrB,EAAYK,GAAOd,GAAMkB,CAAM,GAAG;EACpD,IAAMoB,IAAOF,EAAM,IAAIN,EAAQ,QAAQ,KAAK,CAAC;EAE7C,AADAQ,EAAK,KAAK;GAAE;GAAO,MAAMR,EAAQ;GAAM,IAAIA,EAAQ;EAAG,CAAC,GACvDM,EAAM,IAAIN,EAAQ,UAAUQ,CAAI;CACpC;CAGJ,IAAMf,IAAwB,CAAC;CAC/B,KAAK,IAAM,CAACgB,GAAUjB,MAAac,GAC/B,KAAK,IAAMP,KAAQT,EAAcE,CAAQ,GACrC,EAAO,KAAK;EACR,OAAOO,EAAK;EACZ;EACA,MAAMA,EAAK,OAAOX,EAAO,eAAeiB;EACxC,SAASN,EAAK,KAAKA,EAAK,QAAQM;EAChC,QAAQN,EAAK;EACb,SAASA,EAAK;CAClB,CAAC;CAGT,OAAON;AACX;AASA,SAAgBiB,EAAa,EACzB,WACA,WAI4D;CAC5D,IAAIxC,EAAK,WAAW,GAAG,OAAO,CAAC;CAC/B,IAAMyC,IAAW1C,EAAQC,EAAKA,EAAK,SAAS,IAAI,CAAC,CAAC,CAAC,QAAQ;CAE3D,OAAOqC,EACF,QAAQ,MAAUvB,EAAM,MAAM,CAAC,CAC/B,QACI,MAAUA,EAAM,IAAI,QAAQ,IAAId,EAAK,EAAE,CAAC,QAAQ,KAAKc,EAAM,MAAM,QAAQ,IAAI2B,CAClF,CAAC,CACA,KAAK,MAAU;EACZ,IAAMC,IAAa1C,EAAK,WACnB,MAAQD,EAAQa,GAAK,CAAC,CAAC,CAAC,QAAQ,IAAIE,EAAM,MAAM,QAAQ,CAC7D,GACM6B,IAAY3C,EAAK,QAClB,GAAM,GAAK,MAAWY,EAAI,QAAQ,IAAIE,EAAM,IAAI,QAAQ,IAAIN,IAAQoC,GACrE,CACJ,GACML,IAAW,KAAK,IAAI,GAAGG,CAAU;EACvC,OAAO;GAAE;GAAO;GAAU,MAAM,KAAK,IAAI,GAAGC,IAAYJ,IAAW,CAAC;EAAE;CAC1E,CAAC;AACT;AAQA,SAAgBM,EAAU,GAA6B;CACnD,IAAMxC,IAAQ,KAAK,KAAKa,EAAO,cAAc,EAAE,GACzC0B,IAAO,KAAK,MAAM1B,EAAO,YAAY,EAAE;CAC7C,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG0B,IAAOvC,IAAQ,CAAC,EAAE,IAAI,GAAG,OAAOA,IAAQ2B,KAAK,EAAE;AAC3F;AASA,SAAgBc,EAAiB,GAAY,GAAkC;CAC3E,IAAMC,IAASpD,EAAaC,CAAI,GAC1BuC,IAAOjB,EAAO,YAAYA,EAAO;CAEvC,OADIiB,KAAQ,KAAKY,IAAS7B,EAAO,eAAe6B,IAAS7B,EAAO,YAAkB,QAC1E6B,IAAS7B,EAAO,eAAeiB;AAC3C"}

package/dist/components/ScrollArea/ScrollArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.cjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useScrollOverflow } from \"@/hooks/use-scroll-overflow\";\nimport styles from \"./ScrollArea.module.css\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n    /** Caps the container height; numbers are treated as pixels. */\n    maxHeight?: number | string;\n    /** Which axis scrolls. Default `\"vertical\"`. */\n    orientation?: ScrollAreaOrientation;\n    /**\n     * Accessible name used while the content actually overflows, when the area\n     * takes a tab stop of its own. Defaults to a generic one; name it when the\n     * page holds several scroll areas.\n     */\n    scrollLabel?: string;\n}\n\n/**\n * A styled scroll container that overflows on the chosen axis and renders a\n * thin custom scrollbar (WebKit) while staying fully functional in browsers\n * without scrollbar styling. Forwards `className`, `style` and the ref to the\n * underlying `<div>`.\n *\n * While the content overflows, the container becomes a named, focusable group.\n * A scroll area whose children are plain text holds nothing focusable, so\n * without that a keyboard user can see the scrollbar and has no way to move it.\n * The tab stop disappears again once the content fits, so an area that does not\n * scroll never adds one. Callers may still override `tabIndex` or `role`.\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n    {\n        maxHeight,\n        orientation = \"vertical\",\n        scrollLabel = \"Área rolável\",\n        className,\n        style,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const innerRef = useRef<HTMLDivElement>(null);\n    const scrollable = useScrollOverflow(innerRef, orientation);\n\n    /**\n     * Keep the forwarded ref working while measuring internally: the caller's\n     * ref is the public contract, the inner one is what the observer needs.\n     */\n    const setRefs = useCallback(\n        (node: HTMLDivElement | null) => {\n            innerRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n        },\n        [ref],\n    );\n\n    const mergedStyle: CSSProperties = {\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"auto\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"auto\",\n        ...(maxHeight !== undefined ? { maxHeight } : {}),\n        ...style,\n    };\n\n    return (\n        <div\n            ref={setRefs}\n            className={cn(styles.root, className)}\n            style={mergedStyle}\n            tabIndex={scrollable ? 0 : undefined}\n            role={scrollable ? \"group\" : undefined}\n            aria-label={scrollable ? scrollLabel : undefined}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n});\n"],"mappings":"kLAiCA,IAAa,GAAA,EAAa,EAAA,WAAA,CAA4C,SAClE,CACI,YACA,cAAc,WACd,cAAc,eACd,YACA,QACA,WACA,GAAG,GAEP,EACF,CACE,IAAM,GAAA,EAAW,EAAA,OAAA,CAAuB,IAAI,EACtC,EAAa,EAAA,kBAAkB,EAAU,CAAW,EAMpD,GAAA,EAAU,EAAA,YAAA,CACX,GAAgC,CAC7B,EAAS,QAAU,EACf,OAAO,GAAQ,WAAY,EAAI,CAAI,EAC9B,IAAK,EAAI,QAAU,EAChC,EACA,CAAC,CAAG,CACR,EAEM,EAA6B,CAC/B,UAAW,IAAgB,WAAa,SAAW,OACnD,UAAW,IAAgB,aAAe,SAAW,OACrD,GAAI,IAAc,IAAA,GAA4B,CAAC,EAAjB,CAAE,WAAU,EAC1C,GAAG,CACP,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAS,EACpC,MAAO,EACP,SAAU,EAAa,EAAI,IAAA,GAC3B,KAAM,EAAa,QAAU,IAAA,GAC7B,aAAY,EAAa,EAAc,IAAA,GACvC,GAAI,EAEH,UACA,CAAA,CAEb,CAAC"}
+{"version":3,"file":"ScrollArea.cjs","names":["forwardRef","useRef","useScrollOverflow","useCallback","cn","styles","require_cn","require_use_scroll_overflow","require_ScrollArea_module","react","react_jsx_runtime","ScrollArea","props","innerRef","scrollable","orientation","setRefs","node","ref","mergedStyle","maxHeight","style","className","scrollLabel"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useScrollOverflow } from \"@/hooks/use-scroll-overflow\";\nimport styles from \"./ScrollArea.module.css\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n    /** Caps the container height; numbers are treated as pixels. */\n    maxHeight?: number | string;\n    /** Which axis scrolls. Default `\"vertical\"`. */\n    orientation?: ScrollAreaOrientation;\n    /**\n     * Accessible name used while the content actually overflows, when the area\n     * takes a tab stop of its own. Defaults to a generic one; name it when the\n     * page holds several scroll areas.\n     */\n    scrollLabel?: string;\n}\n\n/**\n * A styled scroll container that overflows on the chosen axis and renders a\n * thin custom scrollbar (WebKit) while staying fully functional in browsers\n * without scrollbar styling. Forwards `className`, `style` and the ref to the\n * underlying `<div>`.\n *\n * While the content overflows, the container becomes a named, focusable group.\n * A scroll area whose children are plain text holds nothing focusable, so\n * without that a keyboard user can see the scrollbar and has no way to move it.\n * The tab stop disappears again once the content fits, so an area that does not\n * scroll never adds one. Callers may still override `tabIndex` or `role`.\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n    {\n        maxHeight,\n        orientation = \"vertical\",\n        scrollLabel = \"Área rolável\",\n        className,\n        style,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const innerRef = useRef<HTMLDivElement>(null);\n    const scrollable = useScrollOverflow(innerRef, orientation);\n\n    /**\n     * Keep the forwarded ref working while measuring internally: the caller's\n     * ref is the public contract, the inner one is what the observer needs.\n     */\n    const setRefs = useCallback(\n        (node: HTMLDivElement | null) => {\n            innerRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n        },\n        [ref],\n    );\n\n    const mergedStyle: CSSProperties = {\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"auto\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"auto\",\n        ...(maxHeight !== undefined ? { maxHeight } : {}),\n        ...style,\n    };\n\n    return (\n        <div\n            ref={setRefs}\n            className={cn(styles.root, className)}\n            style={mergedStyle}\n            tabIndex={scrollable ? 0 : undefined}\n            role={scrollable ? \"group\" : undefined}\n            aria-label={scrollable ? scrollLabel : undefined}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n});\n"],"mappings":"A,kLAiCA,IAAaW,GAAA,EAAaX,EAAAA,WAAAA,CAA4C,SAClE,CACI,YACA,cAAc,WACd,cAAc,eACd,YACA,QACA,WACA,GAAGY,GAEP,EACF,CACE,IAAMC,GAAA,EAAWZ,EAAAA,OAAAA,CAAuB,IAAI,EACtCa,EAAaZ,EAAAA,kBAAkBW,EAAUE,CAAW,EAMpDC,GAAA,EAAUb,EAAAA,YAAAA,CACX,GAAgC,CAC7B,EAAS,QAAUc,EACf,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAChC,EACA,CAACC,CAAG,CACR,EAEMC,EAA6B,CAC/B,UAAWJ,IAAgB,WAAa,SAAW,OACnD,UAAWA,IAAgB,aAAe,SAAW,OACrD,GAAIK,IAAc,IAAA,GAA4B,CAAC,EAAjB,CAAE,WAAU,EAC1C,GAAGC,CACP,EAEA,OACI,EAAAX,EAAA,IAAA,CAAC,MAAD,CACI,IAAKM,EACL,UAAWZ,EAAAA,GAAGC,EAAAA,QAAO,KAAMiB,CAAS,EACpC,MAAOH,EACP,SAAUL,EAAa,EAAI,IAAA,GAC3B,KAAMA,EAAa,QAAU,IAAA,GAC7B,aAAYA,EAAaS,EAAc,IAAA,GACvC,GAAIX,EAEH,UACA,CAAA,CAEb,CAAC,E"}

package/dist/components/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useScrollOverflow } from \"@/hooks/use-scroll-overflow\";\nimport styles from \"./ScrollArea.module.css\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n    /** Caps the container height; numbers are treated as pixels. */\n    maxHeight?: number | string;\n    /** Which axis scrolls. Default `\"vertical\"`. */\n    orientation?: ScrollAreaOrientation;\n    /**\n     * Accessible name used while the content actually overflows, when the area\n     * takes a tab stop of its own. Defaults to a generic one; name it when the\n     * page holds several scroll areas.\n     */\n    scrollLabel?: string;\n}\n\n/**\n * A styled scroll container that overflows on the chosen axis and renders a\n * thin custom scrollbar (WebKit) while staying fully functional in browsers\n * without scrollbar styling. Forwards `className`, `style` and the ref to the\n * underlying `<div>`.\n *\n * While the content overflows, the container becomes a named, focusable group.\n * A scroll area whose children are plain text holds nothing focusable, so\n * without that a keyboard user can see the scrollbar and has no way to move it.\n * The tab stop disappears again once the content fits, so an area that does not\n * scroll never adds one. Callers may still override `tabIndex` or `role`.\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n    {\n        maxHeight,\n        orientation = \"vertical\",\n        scrollLabel = \"Área rolável\",\n        className,\n        style,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const innerRef = useRef<HTMLDivElement>(null);\n    const scrollable = useScrollOverflow(innerRef, orientation);\n\n    /**\n     * Keep the forwarded ref working while measuring internally: the caller's\n     * ref is the public contract, the inner one is what the observer needs.\n     */\n    const setRefs = useCallback(\n        (node: HTMLDivElement | null) => {\n            innerRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n        },\n        [ref],\n    );\n\n    const mergedStyle: CSSProperties = {\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"auto\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"auto\",\n        ...(maxHeight !== undefined ? { maxHeight } : {}),\n        ...style,\n    };\n\n    return (\n        <div\n            ref={setRefs}\n            className={cn(styles.root, className)}\n            style={mergedStyle}\n            tabIndex={scrollable ? 0 : undefined}\n            role={scrollable ? \"group\" : undefined}\n            aria-label={scrollable ? scrollLabel : undefined}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AAiCA,IAAa,IAAa,EAA4C,SAClE,EACI,cACA,iBAAc,YACd,iBAAc,gBACd,cACA,UACA,aACA,GAAG,KAEP,GACF;CACE,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAa,EAAkB,GAAU,CAAW,GAMpD,IAAU,GACX,MAAgC;EAE7B,AADA,EAAS,UAAU,GACf,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAAI,UAAU;CAChC,GACA,CAAC,CAAG,CACR,GAEM,IAA6B;EAC/B,WAAW,MAAgB,aAAa,WAAW;EACnD,WAAW,MAAgB,eAAe,WAAW;EACrD,GAAI,MAAc,KAAA,IAA4B,CAAC,IAAjB,EAAE,aAAU;EAC1C,GAAG;CACP;CAEA,OACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,EAAO,MAAM,CAAS;EACpC,OAAO;EACP,UAAU,IAAa,IAAI,KAAA;EAC3B,MAAM,IAAa,UAAU,KAAA;EAC7B,cAAY,IAAa,IAAc,KAAA;EACvC,GAAI;EAEH;CACA,CAAA;AAEb,CAAC"}
+{"version":3,"file":"ScrollArea.js","names":["styles","ScrollArea_module_default","ScrollArea","forwardRef","props","innerRef","useRef","scrollable","useScrollOverflow","orientation","setRefs","useCallback","node","ref","mergedStyle","maxHeight","style","cn","className","scrollLabel"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport type { CSSProperties, HTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useScrollOverflow } from \"@/hooks/use-scroll-overflow\";\nimport styles from \"./ScrollArea.module.css\";\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {\n    /** Caps the container height; numbers are treated as pixels. */\n    maxHeight?: number | string;\n    /** Which axis scrolls. Default `\"vertical\"`. */\n    orientation?: ScrollAreaOrientation;\n    /**\n     * Accessible name used while the content actually overflows, when the area\n     * takes a tab stop of its own. Defaults to a generic one; name it when the\n     * page holds several scroll areas.\n     */\n    scrollLabel?: string;\n}\n\n/**\n * A styled scroll container that overflows on the chosen axis and renders a\n * thin custom scrollbar (WebKit) while staying fully functional in browsers\n * without scrollbar styling. Forwards `className`, `style` and the ref to the\n * underlying `<div>`.\n *\n * While the content overflows, the container becomes a named, focusable group.\n * A scroll area whose children are plain text holds nothing focusable, so\n * without that a keyboard user can see the scrollbar and has no way to move it.\n * The tab stop disappears again once the content fits, so an area that does not\n * scroll never adds one. Callers may still override `tabIndex` or `role`.\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n    {\n        maxHeight,\n        orientation = \"vertical\",\n        scrollLabel = \"Área rolável\",\n        className,\n        style,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const innerRef = useRef<HTMLDivElement>(null);\n    const scrollable = useScrollOverflow(innerRef, orientation);\n\n    /**\n     * Keep the forwarded ref working while measuring internally: the caller's\n     * ref is the public contract, the inner one is what the observer needs.\n     */\n    const setRefs = useCallback(\n        (node: HTMLDivElement | null) => {\n            innerRef.current = node;\n            if (typeof ref === \"function\") ref(node);\n            else if (ref) ref.current = node;\n        },\n        [ref],\n    );\n\n    const mergedStyle: CSSProperties = {\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"auto\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"auto\",\n        ...(maxHeight !== undefined ? { maxHeight } : {}),\n        ...style,\n    };\n\n    return (\n        <div\n            ref={setRefs}\n            className={cn(styles.root, className)}\n            style={mergedStyle}\n            tabIndex={scrollable ? 0 : undefined}\n            role={scrollable ? \"group\" : undefined}\n            aria-label={scrollable ? scrollLabel : undefined}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AAiCA,IAAaE,IAAaC,EAA4C,SAClE,EACI,cACA,iBAAc,YACd,iBAAc,gBACd,cACA,UACA,aACA,GAAGC,KAEP,GACF;CACE,IAAMC,IAAWC,EAAuB,IAAI,GACtCC,IAAaC,EAAkBH,GAAUI,CAAW,GAMpDC,IAAUC,GACX,MAAgC;EAE7B,AADA,EAAS,UAAUC,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;CAChC,GACA,CAACC,CAAG,CACR,GAEMC,IAA6B;EAC/B,WAAWL,MAAgB,aAAa,WAAW;EACnD,WAAWA,MAAgB,eAAe,WAAW;EACrD,GAAIM,MAAc,KAAA,IAA4B,CAAC,IAAjB,EAAE,aAAU;EAC1C,GAAGC;CACP;CAEA,OACI,kBAAC,OAAD;EACI,KAAKN;EACL,WAAWO,EAAGjB,EAAO,MAAMkB,CAAS;EACpC,OAAOJ;EACP,UAAUP,IAAa,IAAI,KAAA;EAC3B,MAAMA,IAAa,UAAU,KAAA;EAC7B,cAAYA,IAAaY,IAAc,KAAA;EACvC,GAAIf;EAEH;CACA,CAAA;AAEb,CAAC"}

package/dist/components/ScrollArea/ScrollArea.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.module.cjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n    /* Overflow is set inline per orientation; this only styles the scrollbar.\n       Firefox thin scrollbar; degrades gracefully elsewhere. */\n    scrollbar-width: thin;\n    scrollbar-color: var(--tempest-border) transparent;\n    overscroll-behavior: contain;\n}\n\n.root::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.root::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.root::-webkit-scrollbar-thumb {\n    background-color: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    border: 2px solid transparent;\n    background-clip: padding-box;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .root::-webkit-scrollbar-thumb:hover {\n        background-color: var(--tempest-text-muted);\n    }\n}\n\n.root:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"ScrollArea.module.cjs","names":["root","ScrollArea_module_default"],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n    /* Overflow is set inline per orientation; this only styles the scrollbar.\n       Firefox thin scrollbar; degrades gracefully elsewhere. */\n    scrollbar-width: thin;\n    scrollbar-color: var(--tempest-border) transparent;\n    overscroll-behavior: contain;\n}\n\n.root::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.root::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.root::-webkit-scrollbar-thumb {\n    background-color: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    border: 2px solid transparent;\n    background-clip: padding-box;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .root::-webkit-scrollbar-thumb:hover {\n        background-color: var(--tempest-text-muted);\n    }\n}\n\n.root:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}

package/dist/components/ScrollArea/ScrollArea.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.module.js","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n    /* Overflow is set inline per orientation; this only styles the scrollbar.\n       Firefox thin scrollbar; degrades gracefully elsewhere. */\n    scrollbar-width: thin;\n    scrollbar-color: var(--tempest-border) transparent;\n    overscroll-behavior: contain;\n}\n\n.root::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.root::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.root::-webkit-scrollbar-thumb {\n    background-color: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    border: 2px solid transparent;\n    background-clip: padding-box;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .root::-webkit-scrollbar-thumb:hover {\n        background-color: var(--tempest-text-muted);\n    }\n}\n\n.root:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"ScrollArea.module.js","names":["root","ScrollArea_module_default"],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n    /* Overflow is set inline per orientation; this only styles the scrollbar.\n       Firefox thin scrollbar; degrades gracefully elsewhere. */\n    scrollbar-width: thin;\n    scrollbar-color: var(--tempest-border) transparent;\n    overscroll-behavior: contain;\n}\n\n.root::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.root::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.root::-webkit-scrollbar-thumb {\n    background-color: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    border: 2px solid transparent;\n    background-clip: padding-box;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .root::-webkit-scrollbar-thumb:hover {\n        background-color: var(--tempest-text-muted);\n    }\n}\n\n.root:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}

package/dist/components/SearchBar/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n    value: string;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    wrapperClassName?: string;\n}\n\n/**\n * Search input with magnifier icon and a clear button. Controlled component:\n * pass `value` and `onChange`.\n */\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(function SearchBar(\n    { value, onChange, onClear, wrapperClassName, placeholder = \"Buscar...\", className, ...props },\n    ref,\n) {\n    function handleClear(): void {\n        onChange(\"\");\n        onClear?.();\n    }\n\n    return (\n        <div className={cn(styles.wrapper, wrapperClassName)}>\n            <span className={styles.iconLeft} aria-hidden>\n                <SearchIcon />\n            </span>\n            <input\n                ref={ref}\n                type=\"search\"\n                value={value}\n                onChange={(event) => onChange(event.target.value)}\n                placeholder={placeholder}\n                className={cn(styles.input, className)}\n                {...props}\n            />\n            {value && (\n                <button\n                    type=\"button\"\n                    className={styles.clear}\n                    aria-label=\"Limpar busca\"\n                    onClick={handleClear}\n                >\n                    <ClearIcon />\n                </button>\n            )}\n        </div>\n    );\n});\n\nfunction SearchIcon() {\n    return (\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\nfunction ClearIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"gIAgBA,IAAa,GAAA,EAAY,EAAA,WAAA,CAA6C,SAClE,CAAE,QAAO,WAAU,UAAS,mBAAkB,cAAc,YAAa,YAAW,GAAG,GACvF,EACF,CACE,SAAS,GAAoB,CACzB,EAAS,EAAE,EACX,IAAU,CACd,CAEA,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAgB,EAAnD,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,cAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAa,CAAA,CACX,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,QAAD,CACS,MACL,KAAK,SACE,QACP,SAAW,GAAU,EAAS,EAAM,OAAO,KAAK,EACnC,cACb,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EACrC,GAAI,CACP,CAAA,EACA,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,MAClB,aAAW,eACX,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAEX,GAEb,CAAC,EAED,SAAS,GAAa,CAClB,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAArD,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,OAAO,eAAe,YAAY,GAAK,CAAA,GACrE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAE,kBAAkB,OAAO,eAAe,YAAY,IAAI,cAAc,OAAS,CAAA,CACtF,GAEb,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}
+{"version":3,"file":"SearchBar.cjs","names":["forwardRef","cn","styles","require_cn","require_SearchBar_module","react","react_jsx_runtime","SearchBar","props","handleClear","onChange","onClear","wrapperClassName","SearchIcon","event","className","value","ClearIcon"],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n    value: string;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    wrapperClassName?: string;\n}\n\n/**\n * Search input with magnifier icon and a clear button. Controlled component:\n * pass `value` and `onChange`.\n */\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(function SearchBar(\n    { value, onChange, onClear, wrapperClassName, placeholder = \"Buscar...\", className, ...props },\n    ref,\n) {\n    function handleClear(): void {\n        onChange(\"\");\n        onClear?.();\n    }\n\n    return (\n        <div className={cn(styles.wrapper, wrapperClassName)}>\n            <span className={styles.iconLeft} aria-hidden>\n                <SearchIcon />\n            </span>\n            <input\n                ref={ref}\n                type=\"search\"\n                value={value}\n                onChange={(event) => onChange(event.target.value)}\n                placeholder={placeholder}\n                className={cn(styles.input, className)}\n                {...props}\n            />\n            {value && (\n                <button\n                    type=\"button\"\n                    className={styles.clear}\n                    aria-label=\"Limpar busca\"\n                    onClick={handleClear}\n                >\n                    <ClearIcon />\n                </button>\n            )}\n        </div>\n    );\n});\n\nfunction SearchIcon() {\n    return (\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\nfunction ClearIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"A,gIAgBA,IAAaO,GAAA,EAAYP,EAAAA,WAAAA,CAA6C,SAClE,CAAE,QAAO,WAAU,UAAS,mBAAkB,cAAc,YAAa,YAAW,GAAGQ,GACvF,EACF,CACE,SAASC,GAAoB,CACzBC,EAAS,EAAE,EACXC,IAAU,CACd,CAEA,OACI,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,QAASU,CAAgB,EAAnD,SAAA,EACI,EAAAN,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWJ,EAAAA,QAAO,SAAU,cAAA,GAC9B,UAAA,EAAAI,EAAA,IAAA,CAACO,EAAD,CAAa,CAAA,CACX,CAAA,GACN,EAAAP,EAAA,IAAA,CAAC,QAAD,CACS,MACL,KAAK,SACE,QACP,SAAW,GAAUI,EAASI,EAAM,OAAO,KAAK,EACnC,cACb,UAAWb,EAAAA,GAAGC,EAAAA,QAAO,MAAOa,CAAS,EACrC,GAAIP,CACP,CAAA,EACAQ,IACG,EAAAV,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWJ,EAAAA,QAAO,MAClB,aAAW,eACX,QAASO,EAET,UAAA,EAAAH,EAAA,IAAA,CAACW,EAAD,CAAY,CAAA,CACR,CAAA,CAEX,C,EAEb,CAAC,EAED,SAASJ,GAAa,CAClB,OACI,EAAAP,EAAA,KAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAArD,SAAA,EACI,EAAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,OAAO,eAAe,YAAY,GAAK,CAAA,GACrE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAE,kBAAkB,OAAO,eAAe,YAAY,IAAI,cAAc,OAAS,CAAA,CACtF,C,EAEb,CAEA,SAASW,GAAY,CACjB,OACI,EAAAX,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb,C"}

package/dist/components/SearchBar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n    value: string;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    wrapperClassName?: string;\n}\n\n/**\n * Search input with magnifier icon and a clear button. Controlled component:\n * pass `value` and `onChange`.\n */\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(function SearchBar(\n    { value, onChange, onClear, wrapperClassName, placeholder = \"Buscar...\", className, ...props },\n    ref,\n) {\n    function handleClear(): void {\n        onChange(\"\");\n        onClear?.();\n    }\n\n    return (\n        <div className={cn(styles.wrapper, wrapperClassName)}>\n            <span className={styles.iconLeft} aria-hidden>\n                <SearchIcon />\n            </span>\n            <input\n                ref={ref}\n                type=\"search\"\n                value={value}\n                onChange={(event) => onChange(event.target.value)}\n                placeholder={placeholder}\n                className={cn(styles.input, className)}\n                {...props}\n            />\n            {value && (\n                <button\n                    type=\"button\"\n                    className={styles.clear}\n                    aria-label=\"Limpar busca\"\n                    onClick={handleClear}\n                >\n                    <ClearIcon />\n                </button>\n            )}\n        </div>\n    );\n});\n\nfunction SearchIcon() {\n    return (\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\nfunction ClearIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;AAgBA,IAAa,IAAY,EAA6C,SAClE,EAAE,UAAO,aAAU,YAAS,qBAAkB,iBAAc,aAAa,cAAW,GAAG,KACvF,GACF;CACE,SAAS,IAAoB;EAEzB,AADA,EAAS,EAAE,GACX,IAAU;CACd;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,CAAgB;EAAnD,UAAA;GACI,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAU,eAAA;IAC9B,UAAA,kBAAC,GAAD,CAAa,CAAA;GACX,CAAA;GACN,kBAAC,SAAD;IACS;IACL,MAAK;IACE;IACP,WAAW,MAAU,EAAS,EAAM,OAAO,KAAK;IACnC;IACb,WAAW,EAAG,EAAO,OAAO,CAAS;IACrC,GAAI;GACP,CAAA;GACA,KACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,SAAS;IAET,UAAA,kBAAC,GAAD,CAAY,CAAA;GACR,CAAA;EAEX;;AAEb,CAAC;AAED,SAAS,IAAa;CAClB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAArD,UAAA,CACI,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,QAAO;GAAe,aAAY;EAAK,CAAA,GACrE,kBAAC,QAAD;GAAM,GAAE;GAAkB,QAAO;GAAe,aAAY;GAAI,eAAc;EAAS,CAAA,CACtF;;AAEb;AAEA,SAAS,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}
+{"version":3,"file":"SearchBar.js","names":["styles","SearchBar_module_default","SearchBar","forwardRef","props","handleClear","onChange","onClear","cn","wrapperClassName","SearchIcon","event","className","value","ClearIcon"],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n    value: string;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    wrapperClassName?: string;\n}\n\n/**\n * Search input with magnifier icon and a clear button. Controlled component:\n * pass `value` and `onChange`.\n */\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(function SearchBar(\n    { value, onChange, onClear, wrapperClassName, placeholder = \"Buscar...\", className, ...props },\n    ref,\n) {\n    function handleClear(): void {\n        onChange(\"\");\n        onClear?.();\n    }\n\n    return (\n        <div className={cn(styles.wrapper, wrapperClassName)}>\n            <span className={styles.iconLeft} aria-hidden>\n                <SearchIcon />\n            </span>\n            <input\n                ref={ref}\n                type=\"search\"\n                value={value}\n                onChange={(event) => onChange(event.target.value)}\n                placeholder={placeholder}\n                className={cn(styles.input, className)}\n                {...props}\n            />\n            {value && (\n                <button\n                    type=\"button\"\n                    className={styles.clear}\n                    aria-label=\"Limpar busca\"\n                    onClick={handleClear}\n                >\n                    <ClearIcon />\n                </button>\n            )}\n        </div>\n    );\n});\n\nfunction SearchIcon() {\n    return (\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\nfunction ClearIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;AAgBA,IAAaE,IAAYC,EAA6C,SAClE,EAAE,UAAO,aAAU,YAAS,qBAAkB,iBAAc,aAAa,cAAW,GAAGC,KACvF,GACF;CACE,SAASC,IAAoB;EAEzB,AADAC,EAAS,EAAE,GACXC,IAAU;CACd;CAEA,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGR,EAAO,SAASS,CAAgB;EAAnD,UAAA;GACI,kBAAC,QAAD;IAAM,WAAWT,EAAO;IAAU,eAAA;IAC9B,UAAA,kBAACU,GAAD,CAAa,CAAA;GACX,CAAA;GACN,kBAAC,SAAD;IACS;IACL,MAAK;IACE;IACP,WAAW,MAAUJ,EAASK,EAAM,OAAO,KAAK;IACnC;IACb,WAAWH,EAAGR,EAAO,OAAOY,CAAS;IACrC,GAAIR;GACP,CAAA;GACAS,KACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAWb,EAAO;IAClB,cAAW;IACX,SAASK;IAET,UAAA,kBAACS,GAAD,CAAY,CAAA;GACR,CAAA;EAEX;;AAEb,CAAC;AAED,SAASJ,IAAa;CAClB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAArD,UAAA,CACI,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,QAAO;GAAe,aAAY;EAAK,CAAA,GACrE,kBAAC,QAAD;GAAM,GAAE;GAAkB,QAAO;GAAe,aAAY;GAAI,eAAc;EAAS,CAAA,CACtF;;AAEb;AAEA,SAASI,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}

package/dist/components/SearchBar/SearchBar.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.module.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":[".wrapper {\n    position: relative;\n    width: 100%;\n    max-width: 360px;\n    font-family: var(--tempest-font-sans);\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 36px 0 36px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:hover:not(:focus):not(:disabled) {\n    border-color: var(--tempest-border-strong);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.iconLeft,\n.clear {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--tempest-text-muted);\n}\n\n.iconLeft {\n    left: 12px;\n    pointer-events: none;\n}\n\n.clear {\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-full);\n    transition: var(--tempest-transition-color);\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .clear:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.clear:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"SearchBar.module.cjs","names":["wrapper","input","iconLeft","clear","SearchBar_module_default"],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":[".wrapper {\n    position: relative;\n    width: 100%;\n    max-width: 360px;\n    font-family: var(--tempest-font-sans);\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 36px 0 36px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:hover:not(:focus):not(:disabled) {\n    border-color: var(--tempest-border-strong);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.iconLeft,\n.clear {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--tempest-text-muted);\n}\n\n.iconLeft {\n    left: 12px;\n    pointer-events: none;\n}\n\n.clear {\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-full);\n    transition: var(--tempest-transition-color);\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .clear:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.clear:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}

package/dist/components/SearchBar/SearchBar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.module.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":[".wrapper {\n    position: relative;\n    width: 100%;\n    max-width: 360px;\n    font-family: var(--tempest-font-sans);\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 36px 0 36px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:hover:not(:focus):not(:disabled) {\n    border-color: var(--tempest-border-strong);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.iconLeft,\n.clear {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--tempest-text-muted);\n}\n\n.iconLeft {\n    left: 12px;\n    pointer-events: none;\n}\n\n.clear {\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-full);\n    transition: var(--tempest-transition-color);\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .clear:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.clear:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"SearchBar.module.js","names":["wrapper","input","iconLeft","clear","SearchBar_module_default"],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":[".wrapper {\n    position: relative;\n    width: 100%;\n    max-width: 360px;\n    font-family: var(--tempest-font-sans);\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 36px 0 36px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:hover:not(:focus):not(:disabled) {\n    border-color: var(--tempest-border-strong);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.iconLeft,\n.clear {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--tempest-text-muted);\n}\n\n.iconLeft {\n    left: 12px;\n    pointer-events: none;\n}\n\n.clear {\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    border: none;\n    background: transparent;\n    border-radius: var(--tempest-radius-full);\n    transition: var(--tempest-transition-color);\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .clear:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.clear:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}

package/dist/components/SectionHeader/SectionHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.cjs","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":"oIA6CA,IAAM,GAAA,EAAiB,EAAA,cAAA,CAA0C,IAAI,EAoCrE,SAAgB,EAAc,CAC1B,QACA,UACA,cACA,UACA,QAAQ,EACR,QAAQ,QACR,KACA,YACA,GAAG,GACgB,CACnB,IAAM,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,GAAA,EAAU,EAAA,WAAA,CAAW,CAAc,EACnC,EAAW,EAAQ,EACnB,EAAc,IAAY,MAAQ,GAAY,EAAQ,MAAM,CAAM,EAClE,EAAY,IAAO,EAAc,EAAQ,UAAY,GACrD,EAAW,GAAS,SAK1B,IAJA,EAAA,EAAA,gBAAA,KAAsB,CACd,GAAC,GAAa,EAClB,OAAO,EAAS,CAAS,CAC7B,EAAG,CAAC,EAAU,EAAU,CAAS,CAAC,EAC9B,CAAC,GAAS,CAAC,GAAW,CAAC,GAAe,CAAC,EAAS,OAAO,KAC3D,IAAM,EAAU,IAAI,IACpB,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,IAAU,UAAY,EAAA,QAAO,OAAQ,CAAS,EAC3E,GAAI,EAFR,SAAA,EAII,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,WAAvB,SAAA,CACK,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,EACzD,IACG,EAAA,EAAA,IAAA,CAAC,EAAD,CAAS,GAAI,EAAW,UAAW,EAAA,QAAO,MACrC,SAAA,CACI,CAAA,EAEZ,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,YAAc,SAAA,CAAe,CAAA,CACjE,CACJ,CAAA,EAAA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,CACtD,GAEhB,CAiEA,SAAgB,EAAQ,CAAE,WAAU,OAAM,GAAG,GAAuB,CAChE,IAAM,GAAA,EAAY,EAAA,MAAA,CAAM,EAClB,GAAA,EAAW,EAAA,OAAA,CAAsB,IAAI,EACrC,CAAC,EAAY,IAAA,EAAiB,EAAA,SAAA,CAA0B,IAAI,EAC5D,GAAA,EAAU,EAAA,QAAA,MACL,CACH,YACA,MAAQ,IACJ,EAAS,UAAY,EACd,EAAS,UAAY,GAEhC,SAAW,IACP,EAAe,GAAY,CAAC,GAAI,GAAW,CAAC,EAAI,CAAE,CAAC,MAE/C,EAAe,IAAa,GAAW,CAAC,EAAA,CAAG,OAAQ,GAAU,IAAU,CAAE,CAAC,EAEtF,GACA,CAAC,CAAS,CACd,GACA,EAAA,EAAA,gBAAA,KAAsB,CAClB,EAAe,GAAY,GAAW,CAAC,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,IAAM,EAAQ,EAAM,qBAAuB,IAAA,IAAa,EAAM,gBAAkB,IAAA,GAC1E,EAAa,IAAe,KAAO,EAAY,EAAW,GAChE,OACI,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,EAC5B,UAAA,EAAA,EAAA,IAAA,CAAC,UAAD,CACI,kBAAiB,EAAQ,IAAA,GAAY,EACrC,oBAAmB,EACnB,GAAI,EAEH,UACI,CAAA,CACY,CAAA,CAEjC"}
+{"version":3,"file":"SectionHeader.cjs","names":["createContext","useId","useContext","cn","styles","useRef","useState","useMemo","require_cn","require_SectionHeader_module","react","react_jsx_runtime","SectionContext","SectionHeader","props","autoId","section","hasTitle","title","ownsSection","headingId","id","register","eyebrow","description","actions","Heading","level","align","className","Section","sectionId","ownerRef","headingIds","setHeadingIds","context","headerKey","current","entry","named","labelledBy","tone"],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":"A,oIA6CA,IAAMY,GAAA,EAAiBZ,EAAAA,cAAAA,CAA0C,IAAI,EAoCrE,SAAgBa,EAAc,CAC1B,QACA,UACA,cACA,UACA,QAAQ,EACR,QAAQ,QACR,KACA,YACA,GAAGC,GACgB,CACnB,IAAMC,GAAA,EAASd,EAAAA,MAAAA,CAAM,EACfe,GAAA,EAAUd,EAAAA,WAAAA,CAAWU,CAAc,EACnCK,EAAW,EAAQC,EACnBC,EAAcH,IAAY,MAAQC,GAAYD,EAAQ,MAAMD,CAAM,EAClEK,EAAYC,IAAOF,EAAcH,EAAQ,UAAYD,GACrDO,EAAWN,GAAS,SAK1B,IAJA,EAAAN,EAAA,gBAAA,KAAsB,CAClB,GAAKY,GAAaL,EAClB,OAAOK,EAASF,CAAS,CAC7B,EAAG,CAACE,EAAUL,EAAUG,CAAS,CAAC,EAC9B,CAACF,GAAS,CAACK,GAAW,CAACC,GAAe,CAACC,EAAS,OAAO,KAC3D,IAAMC,EAAU,IAAIC,IACpB,OACI,EAAAhB,EAAA,KAAA,CAAC,SAAD,CACI,UAAWR,EAAAA,GAAGC,EAAAA,QAAO,OAAQwB,IAAU,UAAYxB,EAAAA,QAAO,OAAQyB,CAAS,EAC3E,GAAIf,EAFR,SAAA,EAII,EAAAH,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,WAAvB,SAAA,CACKmB,IAAW,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,QAAU,SAAAmB,CAAa,CAAA,EACzDL,IACG,EAAAP,EAAA,IAAA,CAACe,EAAD,CAAS,GAAIN,EAAW,UAAWhB,EAAAA,QAAO,MACrC,SAAAc,CACI,CAAA,EAEZM,IAAe,EAAAb,EAAA,IAAA,CAAC,IAAD,CAAG,UAAWP,EAAAA,QAAO,YAAc,SAAAoB,CAAe,CAAA,CACjE,CACJ,CAAA,EAAAC,IAAW,EAAAd,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,QAAO,QAAU,SAAAqB,CAAa,CAAA,CACtD,C,EAEhB,CAiEA,SAAgBK,EAAQ,CAAE,WAAU,OAAM,GAAGhB,GAAuB,CAChE,IAAMiB,GAAA,EAAY9B,EAAAA,MAAAA,CAAM,EAClB+B,GAAA,EAAW3B,EAAAA,OAAAA,CAAsB,IAAI,EACrC,CAAC4B,EAAYC,IAAA,EAAiB5B,EAAAA,SAAAA,CAA0B,IAAI,EAC5D6B,GAAA,EAAU5B,EAAAA,QAAAA,MACL,CACH,YACA,MAAQ,IACJ,EAAS,UAAY6B,EACdJ,EAAS,UAAYI,GAEhC,SAAW,IACPF,EAAe,GAAY,CAAC,GAAIG,GAAW,CAAC,EAAIhB,CAAE,CAAC,MAE/Ca,EAAe,IAAaG,GAAW,CAAC,EAAA,CAAG,OAAQ,GAAUC,IAAUjB,CAAE,CAAC,EAEtF,GACA,CAACU,CAAS,CACd,GACA,EAAArB,EAAA,gBAAA,KAAsB,CAClBwB,EAAe,GAAYG,GAAW,CAAC,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,IAAME,EAAQzB,EAAM,qBAAuB,IAAA,IAAaA,EAAM,gBAAkB,IAAA,GAC1E0B,EAAaP,IAAe,KAAOF,EAAYE,EAAW,GAChE,OACI,EAAAtB,EAAA,IAAA,CAACC,EAAe,SAAhB,CAAyB,MAAOuB,EAC5B,UAAA,EAAAxB,EAAA,IAAA,CAAC,UAAD,CACI,kBAAiB4B,EAAQ,IAAA,GAAYC,EACrC,oBAAmBC,EACnB,GAAI3B,EAEH,UACI,CAAA,CACY,CAAA,CAEjC,C"}

package/dist/components/SectionHeader/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAM,IAAiB,EAA0C,IAAI;AAoCrE,SAAgB,EAAc,EAC1B,UACA,YACA,gBACA,YACA,WAAQ,GACR,WAAQ,SACR,OACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAS,EAAM,GACf,IAAU,EAAW,CAAc,GACnC,IAAW,EAAQ,GACnB,IAAc,MAAY,QAAQ,KAAY,EAAQ,MAAM,CAAM,GAClE,IAAY,MAAO,IAAc,EAAQ,YAAY,IACrD,IAAW,GAAS;CAK1B,IAJA,QAAsB;EACd,IAAC,KAAa,GAClB,OAAO,EAAS,CAAS;CAC7B,GAAG;EAAC;EAAU;EAAU;CAAS,CAAC,GAC9B,CAAC,KAAS,CAAC,KAAW,CAAC,KAAe,CAAC,GAAS,OAAO;CAC3D,IAAM,IAAU,IAAI;CACpB,OACI,kBAAC,UAAD;EACI,WAAW,EAAG,EAAO,QAAQ,MAAU,YAAY,EAAO,QAAQ,CAAS;EAC3E,GAAI;EAFR,UAAA,CAII,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACK,KAAW,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,UAAA;IAAa,CAAA;IACzD,KACG,kBAAC,GAAD;KAAS,IAAI;KAAW,WAAW,EAAO;KACrC,UAAA;IACI,CAAA;IAEZ,KAAe,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAc,UAAA;IAAe,CAAA;GACjE;EACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAU,UAAA;EAAa,CAAA,CACtD;;AAEhB;AAiEA,SAAgB,EAAQ,EAAE,aAAU,SAAM,GAAG,KAAuB;CAChE,IAAM,IAAY,EAAM,GAClB,IAAW,EAAsB,IAAI,GACrC,CAAC,GAAY,KAAiB,EAA0B,IAAI,GAC5D,IAAU,SACL;EACH;EACA,QAAQ,OACJ,EAAS,YAAY,GACd,EAAS,YAAY;EAEhC,WAAW,OACP,GAAe,MAAY,CAAC,GAAI,KAAW,CAAC,GAAI,CAAE,CAAC,SAE/C,GAAe,OAAa,KAAW,CAAC,EAAA,CAAG,QAAQ,MAAU,MAAU,CAAE,CAAC;CAEtF,IACA,CAAC,CAAS,CACd;CACA,QAAsB;EAClB,GAAe,MAAY,KAAW,CAAC,CAAC;CAC5C,GAAG,CAAC,CAAC;CACL,IAAM,IAAQ,EAAM,uBAAuB,KAAA,KAAa,EAAM,kBAAkB,KAAA,GAC1E,IAAa,MAAe,OAAO,IAAY,EAAW;CAChE,OACI,kBAAC,EAAe,UAAhB;EAAyB,OAAO;EAC5B,UAAA,kBAAC,WAAD;GACI,mBAAiB,IAAQ,KAAA,IAAY;GACrC,qBAAmB;GACnB,GAAI;GAEH;EACI,CAAA;CACY,CAAA;AAEjC"}
+{"version":3,"file":"SectionHeader.js","names":["styles","SectionHeader_module_default","SectionContext","createContext","SectionHeader","props","autoId","useId","section","useContext","hasTitle","title","ownsSection","headingId","id","register","useLayoutEffect","eyebrow","description","actions","Heading","level","cn","align","className","Section","sectionId","ownerRef","useRef","headingIds","setHeadingIds","useState","context","useMemo","headerKey","current","entry","named","labelledBy","tone"],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAME,IAAiBC,EAA0C,IAAI;AAoCrE,SAAgBC,EAAc,EAC1B,UACA,YACA,gBACA,YACA,WAAQ,GACR,WAAQ,SACR,OACA,cACA,GAAGC,KACgB;CACnB,IAAMC,IAASC,EAAM,GACfC,IAAUC,EAAWP,CAAc,GACnCQ,IAAW,EAAQC,GACnBC,IAAcJ,MAAY,QAAQE,KAAYF,EAAQ,MAAMF,CAAM,GAClEO,IAAYC,MAAOF,IAAcJ,EAAQ,YAAYF,IACrDS,IAAWP,GAAS;CAK1B,IAJAQ,QAAsB;EAClB,IAAKD,KAAaL,GAClB,OAAOK,EAASF,CAAS;CAC7B,GAAG;EAACE;EAAUL;EAAUG;CAAS,CAAC,GAC9B,CAACF,KAAS,CAACM,KAAW,CAACC,KAAe,CAACC,GAAS,OAAO;CAC3D,IAAMC,IAAU,IAAIC;CACpB,OACI,kBAAC,UAAD;EACI,WAAWC,EAAGtB,EAAO,QAAQuB,MAAU,YAAYvB,EAAO,QAAQwB,CAAS;EAC3E,GAAInB;EAFR,UAAA,CAII,kBAAC,OAAD;GAAK,WAAWL,EAAO;GAAvB,UAAA;IACKiB,KAAW,kBAAC,OAAD;KAAK,WAAWjB,EAAO;KAAU,UAAAiB;IAAa,CAAA;IACzDN,KACG,kBAACS,GAAD;KAAS,IAAIP;KAAW,WAAWb,EAAO;KACrC,UAAAW;IACI,CAAA;IAEZO,KAAe,kBAAC,KAAD;KAAG,WAAWlB,EAAO;KAAc,UAAAkB;IAAe,CAAA;GACjE;EACJ,CAAA,GAAAC,KAAW,kBAAC,OAAD;GAAK,WAAWnB,EAAO;GAAU,UAAAmB;EAAa,CAAA,CACtD;;AAEhB;AAiEA,SAAgBM,EAAQ,EAAE,aAAU,SAAM,GAAGpB,KAAuB;CAChE,IAAMqB,IAAYnB,EAAM,GAClBoB,IAAWC,EAAsB,IAAI,GACrC,CAACC,GAAYC,KAAiBC,EAA0B,IAAI,GAC5DC,IAAUC,SACL;EACH;EACA,QAAQ,OACJ,EAAS,YAAYC,GACdP,EAAS,YAAYO;EAEhC,WAAW,OACPJ,GAAe,MAAY,CAAC,GAAIK,KAAW,CAAC,GAAIrB,CAAE,CAAC,SAE/CgB,GAAe,OAAaK,KAAW,CAAC,EAAA,CAAG,QAAQ,MAAUC,MAAUtB,CAAE,CAAC;CAEtF,IACA,CAACY,CAAS,CACd;CACA,QAAsB;EAClB,GAAe,MAAYS,KAAW,CAAC,CAAC;CAC5C,GAAG,CAAC,CAAC;CACL,IAAME,IAAQhC,EAAM,uBAAuB,KAAA,KAAaA,EAAM,kBAAkB,KAAA,GAC1EiC,IAAaT,MAAe,OAAOH,IAAYG,EAAW;CAChE,OACI,kBAAC3B,EAAe,UAAhB;EAAyB,OAAO8B;EAC5B,UAAA,kBAAC,WAAD;GACI,mBAAiBK,IAAQ,KAAA,IAAYC;GACrC,qBAAmBC;GACnB,GAAIlC;GAEH;EACI,CAAA;CACY,CAAA;AAEjC"}

package/dist/components/SectionHeader/SectionHeader.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.module.cjs","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.module.css"],"sourcesContent":[".header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.center {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.center .actions {\n    justify-content: center;\n}\n"],"mappings":";"}
+{"version":3,"file":"SectionHeader.module.cjs","names":["header","headerText","eyebrow","title","description","actions","center","SectionHeader_module_default"],"sources":["../../../src/components/SectionHeader/SectionHeader.module.css"],"sourcesContent":[".header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.center {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.center .actions {\n    justify-content: center;\n}\n"],"mappings":";"}

package/dist/components/SectionHeader/SectionHeader.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.module.js","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.module.css"],"sourcesContent":[".header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.center {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.center .actions {\n    justify-content: center;\n}\n"],"mappings":";"}
+{"version":3,"file":"SectionHeader.module.js","names":["header","headerText","eyebrow","title","description","actions","center","SectionHeader_module_default"],"sources":["../../../src/components/SectionHeader/SectionHeader.module.css"],"sourcesContent":[".header {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    margin-bottom: var(--tempest-space-5);\n    flex-wrap: wrap;\n}\n\n.headerText {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.eyebrow {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n    margin-bottom: var(--tempest-space-1);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-2xl);\n    font-weight: var(--tempest-weight-bold);\n    line-height: var(--tempest-leading-tight);\n}\n\n.description {\n    margin: var(--tempest-space-2) 0 0;\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    flex-wrap: wrap;\n}\n\n.center {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.center .actions {\n    justify-content: center;\n}\n"],"mappings":";"}

package/dist/components/SegmentedControl/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"oHA2CA,SAAgB,EAAiD,CAC7D,UACA,QACA,WACA,OAAO,KACP,YAAY,GACZ,YACA,aAAc,EACd,GAAG,GAC2B,CAC9B,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,KAAK,aACL,aAAY,EACZ,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAO,GAAa,EAAA,QAAO,UAAW,CAAS,EAClF,GAAI,EAEH,SAAA,EAAQ,IAAK,GAAW,CACrB,IAAM,EAAW,EAAO,QAAU,EAClC,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CAEI,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAO,SACjB,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAY,EAAA,QAAO,MAAM,EACvD,YAAe,EAAS,EAAO,KAAK,EAPxC,SAAA,CASK,EAAO,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,SAAA,EAAO,IAAW,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAO,KAAY,CAAA,CAC/C,CAVC,EAAA,EAAO,KAUR,CAEhB,CAAC,CACA,CAAA,CAEb"}
+{"version":3,"file":"SegmentedControl.cjs","names":["cn","styles","require_cn","require_SegmentedControl_module","react_jsx_runtime","SegmentedControl","ariaLabel","props","size","fullWidth","className","options","selected","option","value","onChange"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"A,oHA2CA,SAAgBK,EAAiD,CAC7D,UACA,QACA,WACA,OAAO,KACP,YAAY,GACZ,YACA,aAAcC,EACd,GAAGC,GAC2B,CAC9B,OACI,EAAAH,EAAA,IAAA,CAAC,MAAD,CACI,KAAK,aACL,aAAYE,EACZ,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,MAAOA,EAAAA,QAAOO,GAAOC,GAAaR,EAAAA,QAAO,UAAWS,CAAS,EAClF,GAAIH,EAEH,SAAAI,EAAQ,IAAK,GAAW,CACrB,IAAMC,EAAWC,EAAO,QAAUC,EAClC,OACI,EAAAV,EAAA,KAAA,CAAC,SAAD,CAEI,KAAK,SACL,KAAK,QACL,eAAcQ,EACd,SAAUC,EAAO,SACjB,UAAWb,EAAAA,GAAGC,EAAAA,QAAO,QAASW,GAAYX,EAAAA,QAAO,MAAM,EACvD,YAAec,EAASF,EAAO,KAAK,EAPxC,SAAA,CASKA,EAAO,OAAQ,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,KAAO,SAAAY,EAAO,IAAW,CAAA,GACjE,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,MAAQ,SAAAY,EAAO,KAAY,CAAA,CAC/C,CAVC,EAAAA,EAAO,KAUR,CAEhB,CAAC,CACA,CAAA,CAEb,C"}

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":";;;;AA2CA,SAAgB,EAAiD,EAC7D,YACA,UACA,aACA,UAAO,MACP,eAAY,IACZ,cACA,cAAc,GACd,GAAG,KAC2B;CAC9B,OACI,kBAAC,OAAD;EACI,MAAK;EACL,cAAY;EACZ,WAAW,EAAG,EAAO,OAAO,EAAO,IAAO,KAAa,EAAO,WAAW,CAAS;EAClF,GAAI;EAEH,UAAA,EAAQ,KAAK,MAAW;GACrB,IAAM,IAAW,EAAO,UAAU;GAClC,OACI,kBAAC,UAAD;IAEI,MAAK;IACL,MAAK;IACL,gBAAc;IACd,UAAU,EAAO;IACjB,WAAW,EAAG,EAAO,SAAS,KAAY,EAAO,MAAM;IACvD,eAAe,EAAS,EAAO,KAAK;IAPxC,UAAA,CASK,EAAO,QAAQ,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAO,UAAA,EAAO;IAAW,CAAA,GACjE,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAQ,UAAA,EAAO;IAAY,CAAA,CAC/C;GAVC,GAAA,EAAO,KAUR;EAEhB,CAAC;CACA,CAAA;AAEb"}
+{"version":3,"file":"SegmentedControl.js","names":["styles","SegmentedControl_module_default","SegmentedControl","ariaLabel","props","cn","size","fullWidth","className","options","selected","option","value","onChange"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":";;;;AA2CA,SAAgBE,EAAiD,EAC7D,YACA,UACA,aACA,UAAO,MACP,eAAY,IACZ,cACA,cAAcC,GACd,GAAGC,KAC2B;CAC9B,OACI,kBAAC,OAAD;EACI,MAAK;EACL,cAAYD;EACZ,WAAWE,EAAGL,EAAO,OAAOA,EAAOM,IAAOC,KAAaP,EAAO,WAAWQ,CAAS;EAClF,GAAIJ;EAEH,UAAAK,EAAQ,KAAK,MAAW;GACrB,IAAMC,IAAWC,EAAO,UAAUC;GAClC,OACI,kBAAC,UAAD;IAEI,MAAK;IACL,MAAK;IACL,gBAAcF;IACd,UAAUC,EAAO;IACjB,WAAWN,EAAGL,EAAO,SAASU,KAAYV,EAAO,MAAM;IACvD,eAAea,EAASF,EAAO,KAAK;IAPxC,UAAA,CASKA,EAAO,QAAQ,kBAAC,QAAD;KAAM,WAAWX,EAAO;KAAO,UAAAW,EAAO;IAAW,CAAA,GACjE,kBAAC,QAAD;KAAM,WAAWX,EAAO;KAAQ,UAAAW,EAAO;IAAY,CAAA,CAC/C;GAVC,GAAAA,EAAO,KAUR;EAEhB,CAAC;CACA,CAAA;AAEb"}

package/dist/components/SegmentedControl/SegmentedControl.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}
+{"version":3,"file":"SegmentedControl.module.cjs","names":["group","fullWidth","segment","sm","md","lg","active","icon","label","SegmentedControl_module_default"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}

package/dist/components/SegmentedControl/SegmentedControl.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.js","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}
+{"version":3,"file":"SegmentedControl.module.js","names":["group","fullWidth","segment","sm","md","lg","active","icon","label","SegmentedControl_module_default"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    background: var(--tempest-surface-2);\n    border-radius: var(--tempest-radius-md);\n    padding: 2px;\n    font-family: var(--tempest-font-sans);\n    gap: 0;\n}\n\n.group.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    flex: 1 1 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: 6px 12px;\n    border: 0;\n    background: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    border-radius: calc(var(--tempest-radius-md) - 2px);\n    font-weight: var(--tempest-weight-medium);\n    transition:\n        background var(--tempest-duration-fast, 120ms),\n        color var(--tempest-duration-fast, 120ms);\n    white-space: nowrap;\n}\n\n.group.sm .segment {\n    padding: 4px 10px;\n    font-size: var(--tempest-text-xs);\n    min-height: 24px;\n}\n\n.group.md .segment {\n    padding: 6px 12px;\n    font-size: var(--tempest-text-sm);\n    min-height: 32px;\n}\n\n.group.lg .segment {\n    padding: 8px 14px;\n    font-size: var(--tempest-text-md);\n    min-height: 40px;\n}\n\n.segment:hover {\n    color: var(--tempest-text);\n}\n\n.segment.active {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow:\n        inset 0 0 0 2px var(--tempest-selected-indicator),\n        var(--tempest-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.08));\n}\n\n.segment:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n}\n\n.label {\n    line-height: 1;\n}\n"],"mappings":";"}

package/dist/components/Select/CaretIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CaretIcon.cjs","names":[],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"mCAYA,SAAgB,GAA0B,CACtC,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,eACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAClB,CAAA,CACA,CAAA,CAEb"}
+{"version":3,"file":"CaretIcon.cjs","names":["react_jsx_runtime","CaretIcon"],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"A,mCAYA,SAAgBC,GAA0B,CACtC,OACI,EAAAD,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,eACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,OAClB,CAAA,CACA,CAAA,CAEb,C"}

package/dist/components/Select/CaretIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaretIcon.js","names":[],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;AAYA,SAAgB,IAA0B;CACtC,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAClB,CAAA;CACA,CAAA;AAEb"}
+{"version":3,"file":"CaretIcon.js","names":["CaretIcon"],"sources":["../../../src/components/Select/CaretIcon.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\n/**\n * The chevron `Select` and `Combobox` draw on the right of the control.\n *\n * Internal to the SDK: the public way to change it is `Select`'s `caretIcon`\n * prop. Its size comes from the `--tempest-control-caret-size` token through the\n * caret slot's stylesheet, so the `width`/`height` attributes here are only the\n * fallback for a page that loaded no SDK CSS.\n *\n * @returns The chevron as an inline SVG drawn in `currentColor`.\n */\nexport function CaretIcon(): ReactElement {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 9l6 6 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;AAYA,SAAgBA,IAA0B;CACtC,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAClB,CAAA;CACA,CAAA;AAEb"}

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"0JAkGA,IAAa,GAAA,EAAS,EAAA,WAAA,CAA2C,SAAgB,EAAO,EAAK,CACzF,GAAM,CACF,UACA,cACA,mBACA,YACA,WACA,KACA,WACA,UAAU,QACV,QACA,aACA,QACA,YACA,GAAG,GACH,EAME,EAAS,IAAY,OACrB,EAAS,IAAY,OACrB,GAAA,EAAc,EAAA,MAAA,CAAM,EACpB,EAAW,GAAM,EAEjB,GACF,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,MACP,GAAU,EAAA,QAAO,KACjB,GAAU,EAAA,QAAO,KACjB,GAAU,CACd,EANJ,SAAA,EAQI,EAAA,EAAA,KAAA,CAAC,SAAD,CACS,MACL,GAAI,EACJ,eAAc,CAAC,CAAC,EACN,WACV,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,GAAI,EANR,SAAA,CAQK,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GAAS,OAAA,GACrB,SAAA,CACG,CAAA,EAEX,GAAS,IAAK,IACX,EAAA,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAO,EAAI,MAAO,SAAU,EAAI,SACnD,SAAA,EAAI,KACD,EAFK,EAAI,KAET,CACX,EACA,CACG,CACR,CAAA,GAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAA,GAC1B,SAAA,IAAa,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAY,CAAA,CACxB,CAAA,CACL,IAWT,OARI,EACO,EAGP,GACO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,YAAa,CAAgB,EAAI,SAAA,CAAa,CAAA,GAI/E,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAS,EAAA,QAAO,MAAO,CAAgB,EAA1E,SAAA,CACK,IACG,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,QAAS,EAAU,UAAW,EAAA,QAAO,MAA5C,SAAA,CACK,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,SAAA,GAAO,CAAA,CACnD,IAEV,EACA,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAY,SAAA,CAAY,CAAA,EAChD,GACA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,OAAS,SAAA,CAAiB,CAAA,EAClD,IACH,GAEb,CAAC"}
+{"version":3,"file":"Select.cjs","names":["forwardRef","useId","cn","styles","CaretIcon","require_cn","require_CaretIcon","require_Select_module","react","react_jsx_runtime","Select","rest","props","isChip","variant","isBare","generatedId","selectId","id","control","wrapperClassName","error","className","placeholder","options","opt","children","caretIcon","label","required","helperText"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"A,0JAkGA,IAAaU,GAAA,EAASV,EAAAA,WAAAA,CAA2C,SAAgB,EAAO,EAAK,CACzF,GAAM,CACF,UACA,cACA,mBACA,YACA,WACA,KACA,WACA,UAAU,QACV,QACA,aACA,QACA,YACA,GAAGW,GACHC,EAMEC,EAASC,IAAY,OACrBC,EAASD,IAAY,OACrBE,GAAA,EAAcf,EAAAA,MAAAA,CAAM,EACpBgB,EAAWC,GAAMF,EAEjBG,GACF,EAAAV,EAAA,KAAA,CAAC,MAAD,CACI,UAAWP,EAAAA,GACPC,EAAAA,QAAO,MACPU,GAAUV,EAAAA,QAAO,KACjBY,GAAUZ,EAAAA,QAAO,KACjBY,GAAUK,CACd,EANJ,SAAA,EAQI,EAAAX,EAAA,KAAA,CAAC,SAAD,CACS,MACL,GAAIQ,EACJ,eAAc,CAAC,CAACI,EACN,WACV,UAAWnB,EAAAA,GAAGC,EAAAA,QAAO,OAAQmB,CAAS,EACtC,GAAIX,EANR,SAAA,CAQKY,IACG,EAAAd,EAAA,IAAA,CAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,GAAS,OAAA,GACrB,SAAAc,CACG,CAAA,EAEXC,GAAS,IAAK,IACX,EAAAf,EAAA,IAAA,CAAC,SAAD,CAAwB,MAAOgB,EAAI,MAAO,SAAUA,EAAI,SACnD,SAAAA,EAAI,KACD,EAFKA,EAAI,KAET,CACX,EACAC,CACG,CACR,CAAA,GAAA,EAAAjB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,MAAO,cAAA,GAC1B,SAAAwB,IAAa,EAAAlB,EAAA,IAAA,CAACL,EAAAA,UAAD,CAAY,CAAA,CACxB,CAAA,CACL,C,GAWT,OARIW,EACOI,EAGPN,GACO,EAAAJ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,GAAGC,EAAAA,QAAO,YAAaiB,CAAgB,EAAI,SAAAD,CAAa,CAAA,GAI/E,EAAAV,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWP,EAAAA,GAAGC,EAAAA,QAAO,QAASkB,GAASlB,EAAAA,QAAO,MAAOiB,CAAgB,EAA1E,SAAA,CACKQ,IACG,EAAAnB,EAAA,KAAA,CAAC,QAAD,CAAO,QAASQ,EAAU,UAAWd,EAAAA,QAAO,MAA5C,SAAA,CACKyB,EACAC,IAAY,EAAApB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,SAAU,SAAA,GAAO,CAAA,CACnD,C,GAEVgB,EACAE,GACG,EAAAZ,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,UAAY,SAAAkB,CAAY,CAAA,EAChDS,GACA,EAAArB,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,QAAO,OAAS,SAAA2B,CAAiB,CAAA,EAClD,IACH,C,EAEb,CAAC,E"}

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AAkGA,IAAa,IAAS,EAA2C,SAAgB,GAAO,GAAK;CACzF,IAAM,EACF,YACA,gBACA,qBACA,cACA,aACA,OACA,aACA,aAAU,SACV,UACA,eACA,UACA,cACA,GAAG,MACH,GAME,IAAS,MAAY,QACrB,IAAS,MAAY,QACrB,IAAc,EAAM,GACpB,IAAW,KAAM,GAEjB,IACF,kBAAC,OAAD;EACI,WAAW,EACP,EAAO,OACP,KAAU,EAAO,MACjB,KAAU,EAAO,MACjB,KAAU,CACd;EANJ,UAAA,CAQI,kBAAC,UAAD;GACS;GACL,IAAI;GACJ,gBAAc,CAAC,CAAC;GACN;GACV,WAAW,EAAG,EAAO,QAAQ,CAAS;GACtC,GAAI;GANR,UAAA;IAQK,KACG,kBAAC,UAAD;KAAQ,OAAM;KAAG,UAAA;KAAS,QAAA;KACrB,UAAA;IACG,CAAA;IAEX,GAAS,KAAK,MACX,kBAAC,UAAD;KAAwB,OAAO,EAAI;KAAO,UAAU,EAAI;KACnD,UAAA,EAAI;IACD,GAFK,EAAI,KAET,CACX;IACA;GACG;EACR,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAO,eAAA;GAC1B,UAAA,KAAa,kBAAC,GAAD,CAAY,CAAA;EACxB,CAAA,CACL;;CAWT,OARI,IACO,IAGP,IACO,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,aAAa,CAAgB;EAAI,UAAA;CAAa,CAAA,IAI/E,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,KAAS,EAAO,OAAO,CAAgB;EAA1E,UAAA;GACK,KACG,kBAAC,SAAD;IAAO,SAAS;IAAU,WAAW,EAAO;IAA5C,UAAA,CACK,GACA,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAU,UAAA;IAAO,CAAA,CACnD;;GAEV;GACA,IACG,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAY,UAAA;GAAY,CAAA,IAChD,IACA,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAS,UAAA;GAAiB,CAAA,IAClD;EACH;;AAEb,CAAC"}
+{"version":3,"file":"Select.js","names":["styles","Select_module_default","Select","forwardRef","rest","props","isChip","variant","isBare","generatedId","useId","selectId","id","control","cn","wrapperClassName","error","className","placeholder","options","opt","children","caretIcon","CaretIcon","label","required","helperText"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ReactNode, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CaretIcon } from \"./CaretIcon\";\nimport styles from \"./Select.module.css\";\n\nexport interface SelectOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n}\n\n/** What every variant of {@link Select} accepts. */\nexport interface SelectBaseProps extends SelectHTMLAttributes<HTMLSelectElement> {\n    options?: SelectOption[];\n    placeholder?: string;\n    /**\n     * Class for the outermost element. On `\"bare\"` that element is the shell\n     * holding the `<select>` and the caret, which is where the app's own look goes.\n     */\n    wrapperClassName?: string;\n    /**\n     * Replaces the built-in chevron, following the `icon?: ReactNode` convention\n     * the rest of the SDK uses.\n     *\n     * The icon is drawn in the caret slot, which is positioned by\n     * `--tempest-control-caret-offset` and sized by `--tempest-control-caret-size`;\n     * an `<svg>` passed here is stretched to that size, so the token — not the\n     * icon's own `width`/`height` — decides how big the caret is in every density.\n     */\n    caretIcon?: ReactNode;\n}\n\n/** The full form field: label, control, helper text and error slot. */\nexport interface SelectFieldProps extends SelectBaseProps {\n    variant?: \"field\";\n    label?: string;\n    helperText?: string;\n    error?: string;\n}\n\n/**\n * The bare control, sized to its content.\n *\n * `aria-label` is required rather than optional, because the variant removes the\n * only visible label the component had. A settings row names the control in the\n * row's own text, which the `<select>` has no relationship to — so without this\n * the screen reader announces a combobox with no name at all.\n */\nexport interface SelectChipProps extends SelectBaseProps {\n    variant: \"chip\";\n    \"aria-label\": string;\n}\n\n/**\n * The mechanism without the look: `appearance: none`, the caret and the focus\n * ring, and no border, background, radius, shadow or height.\n *\n * The `<select>` inherits `background-color` and `color` from the shell (the\n * element `wrapperClassName` lands on). The background is not cosmetic: the\n * native popup paints each `<option>` from the `<select>`'s background, so a\n * transparent control would hand the menu back to the system white.\n *\n * Like `\"chip\"`, the variant has no visible label, so an accessible name is\n * required — through `aria-label` or `aria-labelledby`.\n */\nexport type SelectBareProps = SelectBaseProps & { variant: \"bare\" } & (\n        { \"aria-label\": string } | { \"aria-labelledby\": string }\n    );\n\nexport type SelectProps = SelectFieldProps | SelectChipProps | SelectBareProps;\n\n/**\n * Native `<select>` wrapper. Either provide `options` for a quick render, or\n * pass `<option>` children directly.\n *\n * Three variants:\n *\n * - `\"field\"` (default) — label, control, helper text and error slot, for a form.\n * - `\"chip\"` — the control alone, sized to its content, for a settings row where\n *   the icon and the label are already on the left and the control belongs on the\n *   right. Rendering the full field there stacks two labelled fields inside one\n *   list item, which is why every app ended up hand-rolling a native `<select>`\n *   with `appearance: none` — and hand-rolling it loses the focus ring, the\n *   disabled styling and the caret this component already solves.\n * - `\"bare\"` — the same mechanism with none of the look, for an app with its own\n *   visual identity: the shell renders `wrapper > select + caret`, and the app\n *   dresses the wrapper through `wrapperClassName`. See {@link SelectBareProps}.\n *\n * @example\n * <Select label=\"Estado\" options={states} placeholder=\"Selecione\" />\n *\n * @example\n * <ListTile title=\"Idioma\" trailing={<Select variant=\"chip\" aria-label=\"Idioma\" options={langs} />} />\n *\n * @example\n * <Select variant=\"bare\" wrapperClassName={styles.filtro} aria-label=\"Status\" options={status} />\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {\n    const {\n        options,\n        placeholder,\n        wrapperClassName,\n        className,\n        children,\n        id,\n        required,\n        variant = \"field\",\n        label,\n        helperText,\n        error,\n        caretIcon,\n        ...rest\n    } = props as SelectBaseProps & {\n        variant?: SelectProps[\"variant\"];\n        label?: string;\n        helperText?: string;\n        error?: string;\n    };\n    const isChip = variant === \"chip\";\n    const isBare = variant === \"bare\";\n    const generatedId = useId();\n    const selectId = id ?? generatedId;\n\n    const control = (\n        <div\n            className={cn(\n                styles.field,\n                isChip && styles.chip,\n                isBare && styles.bare,\n                isBare && wrapperClassName,\n            )}\n        >\n            <select\n                ref={ref}\n                id={selectId}\n                aria-invalid={!!error}\n                required={required}\n                className={cn(styles.select, className)}\n                {...rest}\n            >\n                {placeholder && (\n                    <option value=\"\" disabled hidden>\n                        {placeholder}\n                    </option>\n                )}\n                {options?.map((opt) => (\n                    <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                        {opt.label}\n                    </option>\n                ))}\n                {children}\n            </select>\n            <span className={styles.caret} aria-hidden>\n                {caretIcon ?? <CaretIcon />}\n            </span>\n        </div>\n    );\n\n    if (isBare) {\n        return control;\n    }\n\n    if (isChip) {\n        return <div className={cn(styles.chipWrapper, wrapperClassName)}>{control}</div>;\n    }\n\n    return (\n        <div className={cn(styles.wrapper, error && styles.error, wrapperClassName)}>\n            {label && (\n                <label htmlFor={selectId} className={styles.label}>\n                    {label}\n                    {required && <span className={styles.required}>*</span>}\n                </label>\n            )}\n            {control}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":";;;;;;AAkGA,IAAaE,IAASC,EAA2C,SAAgB,GAAO,GAAK;CACzF,IAAM,EACF,YACA,gBACA,qBACA,cACA,aACA,OACA,aACA,aAAU,SACV,UACA,eACA,UACA,cACA,GAAGC,MACHC,GAMEC,IAASC,MAAY,QACrBC,IAASD,MAAY,QACrBE,IAAcC,EAAM,GACpBC,IAAWC,KAAMH,GAEjBI,IACF,kBAAC,OAAD;EACI,WAAWC,EACPd,EAAO,OACPM,KAAUN,EAAO,MACjBQ,KAAUR,EAAO,MACjBQ,KAAUO,CACd;EANJ,UAAA,CAQI,kBAAC,UAAD;GACS;GACL,IAAIJ;GACJ,gBAAc,CAAC,CAACK;GACN;GACV,WAAWF,EAAGd,EAAO,QAAQiB,CAAS;GACtC,GAAIb;GANR,UAAA;IAQKc,KACG,kBAAC,UAAD;KAAQ,OAAM;KAAG,UAAA;KAAS,QAAA;KACrB,UAAAA;IACG,CAAA;IAEXC,GAAS,KAAK,MACX,kBAAC,UAAD;KAAwB,OAAOC,EAAI;KAAO,UAAUA,EAAI;KACnD,UAAAA,EAAI;IACD,GAFKA,EAAI,KAET,CACX;IACAC;GACG;EACR,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAWrB,EAAO;GAAO,eAAA;GAC1B,UAAAsB,KAAa,kBAACC,GAAD,CAAY,CAAA;EACxB,CAAA,CACL;;CAWT,OARIf,IACOK,IAGPP,IACO,kBAAC,OAAD;EAAK,WAAWQ,EAAGd,EAAO,aAAae,CAAgB;EAAI,UAAAF;CAAa,CAAA,IAI/E,kBAAC,OAAD;EAAK,WAAWC,EAAGd,EAAO,SAASgB,KAAShB,EAAO,OAAOe,CAAgB;EAA1E,UAAA;GACKS,KACG,kBAAC,SAAD;IAAO,SAASb;IAAU,WAAWX,EAAO;IAA5C,UAAA,CACKwB,GACAC,KAAY,kBAAC,QAAD;KAAM,WAAWzB,EAAO;KAAU,UAAA;IAAO,CAAA,CACnD;;GAEVa;GACAG,IACG,kBAAC,QAAD;IAAM,WAAWhB,EAAO;IAAY,UAAAgB;GAAY,CAAA,IAChDU,IACA,kBAAC,QAAD;IAAM,WAAW1B,EAAO;IAAS,UAAA0B;GAAiB,CAAA,IAClD;EACH;;AAEb,CAAC"}