tempest-react-sdk 0.23.0 → 0.25.0

package/dist/components/Form/Form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.cjs","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CSSProperties, FormHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Form.module.css\";\n\nexport type FormLayout = \"stack\" | \"inline\" | \"grid\";\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\ninterface LayoutProps {\n    /** Field arrangement. `stack` stacks fields vertically, `inline` lines them up in a wrapping row, `grid` arranges them in `columns` equal-width tracks. Default `stack`. */\n    layout?: FormLayout;\n    /** Number of columns when `layout=\"grid\"`, or a custom `grid-template-columns` value. Default `2`. */\n    columns?: number | string;\n    /** Gap between fields. Numbers map to a multiple of the 4px scale (default `4` → 16px). */\n    gap?: number | string;\n}\n\nfunction resolveGap(gap: number | string | undefined, fallback: number): string {\n    if (gap === undefined) return `${fallback * 4}px`;\n    return typeof gap === \"number\" ? `${gap * 4}px` : gap;\n}\n\nfunction resolveColumns(columns: number | string | undefined): string {\n    if (columns === undefined) return \"repeat(2, minmax(0, 1fr))\";\n    return typeof columns === \"number\" ? `repeat(${columns}, minmax(0, 1fr))` : columns;\n}\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement>, LayoutProps {}\n\n/**\n * Form wrapper with a built-in layout variant. Replaces ad-hoc `<form>` +\n * `<Stack>` / `<Grid>` boilerplate; pair with [[FormRow]], [[FormSection]],\n * and [[FormActions]] for richer layouts.\n *\n * @example\n * <Form layout=\"grid\" columns={2} gap={4} onSubmit={form.handleSubmit(save)}>\n *     <Input label=\"Nome\" {...form.register(\"name\")} />\n *     <Input label=\"Email\" {...form.register(\"email\")} />\n *     <FormActions align=\"end\">\n *         <Button type=\"submit\">Salvar</Button>\n *     </FormActions>\n * </Form>\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n    { layout = \"stack\", columns, gap, className, style, children, ...props },\n    ref,\n) {\n    const finalStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n        ...style,\n    };\n    return (\n        <form\n            ref={ref}\n            className={cn(styles.form, styles[layout], className)}\n            style={finalStyle}\n            {...props}\n        >\n            {children}\n        </form>\n    );\n});\n\nexport interface FormSectionProps extends Omit<HTMLAttributes<HTMLElement>, \"title\">, LayoutProps {\n    title?: ReactNode;\n    description?: ReactNode;\n}\n\n/**\n * Visually grouped subset of fields with an optional title and description.\n * Has its own `layout`/`columns`/`gap` so subsets can stack while the parent\n * grids (or vice versa).\n *\n * @example\n * <FormSection title=\"Endereço\" description=\"Usado para entrega\" layout=\"grid\" columns={3}>\n *     <Input label=\"CEP\" />\n *     <Input label=\"Rua\" />\n *     <Input label=\"Número\" />\n * </FormSection>\n */\nexport function FormSection({\n    title,\n    description,\n    layout = \"stack\",\n    columns,\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormSectionProps) {\n    const bodyStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n    };\n    return (\n        <section className={cn(styles.section, className)} style={style} {...props}>\n            {(title || description) && (\n                <header className={styles.sectionHeader}>\n                    {title && <h3 className={styles.sectionTitle}>{title}</h3>}\n                    {description && <p className={styles.sectionDescription}>{description}</p>}\n                </header>\n            )}\n            <div className={cn(styles.sectionBody, styles[layout])} style={bodyStyle}>\n                {children}\n            </div>\n        </section>\n    );\n}\n\nexport interface FormRowProps extends HTMLAttributes<HTMLDivElement> {\n    /** Gap between row items. Numbers map to a multiple of the 4px scale (default `3` → 12px). */\n    gap?: number | string;\n}\n\n/**\n * Forces a horizontal row regardless of parent layout — useful for grouping\n * two short fields side-by-side inside an otherwise stacked form (e.g. CEP +\n * city, expiry month + year).\n *\n * @example\n * <Form layout=\"stack\">\n *     <FormRow>\n *         <Input label=\"CEP\" />\n *         <Input label=\"Cidade\" />\n *     </FormRow>\n *     <Input label=\"Endereço completo\" />\n * </Form>\n */\nexport function FormRow({ gap, className, style, children, ...props }: FormRowProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 3), ...style };\n    return (\n        <div className={cn(styles.row, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n\nexport interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {\n    /** Horizontal alignment of buttons. Default `end`. */\n    align?: FormActionsAlign;\n    /** Gap between buttons. Numbers map to a multiple of the 4px scale (default `2` → 8px). */\n    gap?: number | string;\n}\n\n/**\n * Footer button row for a form. Use inside (or after) [[Form]] / [[FormSection]].\n *\n * @example\n * <FormActions align=\"end\">\n *     <Button variant=\"ghost\" onClick={onCancel}>Cancelar</Button>\n *     <Button type=\"submit\" loading={form.formState.isSubmitting}>Salvar</Button>\n * </FormActions>\n */\nexport function FormActions({\n    align = \"end\",\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormActionsProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 2), ...style };\n    return (\n        <div className={cn(styles.actions, styles[align], className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"names":["resolveGap","gap","fallback","resolveColumns","columns","Form","forwardRef","layout","className","style","children","props","ref","finalStyle","jsx","cn","styles","FormSection","title","description","bodyStyle","jsxs","FormRow","FormActions","align"],"mappings":"2MAiBA,SAASA,EAAWC,EAAkCC,EAA0B,CAC5E,OAAID,IAAQ,OAAkB,GAAGC,EAAW,CAAC,KACtC,OAAOD,GAAQ,SAAW,GAAGA,EAAM,CAAC,KAAOA,CACtD,CAEA,SAASE,EAAeC,EAA8C,CAClE,OAAIA,IAAY,OAAkB,4BAC3B,OAAOA,GAAY,SAAW,UAAUA,CAAO,oBAAsBA,CAChF,CAkBO,MAAMC,EAAOC,EAAAA,WAAuC,SACvD,CAAE,OAAAC,EAAS,QAAS,QAAAH,EAAS,IAAAH,EAAK,UAAAO,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAA,EACjEC,EACF,CACE,MAAMC,EAA4B,CAC9B,IAAKb,EAAWC,EAAK,CAAC,EACtB,GAAIM,IAAW,OAAS,CAAE,oBAAqBJ,EAAeC,CAAO,GAAM,KAC3E,GAAGK,CAAA,EAEP,OACIK,EAAAA,IAAC,OAAA,CACG,IAAAF,EACA,UAAWG,EAAAA,GAAGC,UAAO,KAAMA,EAAAA,QAAOT,CAAM,EAAGC,CAAS,EACpD,MAAOK,EACN,GAAGF,EAEH,SAAAD,CAAA,CAAA,CAGb,CAAC,EAmBM,SAASO,EAAY,CACxB,MAAAC,EACA,YAAAC,EACA,OAAAZ,EAAS,QACT,QAAAH,EACA,IAAAH,EACA,UAAAO,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,MAAMS,EAA2B,CAC7B,IAAKpB,EAAWC,EAAK,CAAC,EACtB,GAAIM,IAAW,OAAS,CAAE,oBAAqBJ,EAAeC,CAAO,GAAM,IAAA,EAE/E,OACIiB,OAAC,UAAA,CAAQ,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,QAASR,CAAS,EAAG,MAAAC,EAAe,GAAGE,EAC/D,SAAA,EAAAO,GAASC,IACPE,OAAC,SAAA,CAAO,UAAWL,EAAAA,QAAO,cACrB,SAAA,CAAAE,GAASJ,EAAAA,IAAC,KAAA,CAAG,UAAWE,EAAAA,QAAO,aAAe,SAAAE,EAAM,EACpDC,GAAeL,EAAAA,IAAC,IAAA,CAAE,UAAWE,EAAAA,QAAO,mBAAqB,SAAAG,CAAA,CAAY,CAAA,EAC1E,EAEJL,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,GAAGC,EAAAA,QAAO,YAAaA,EAAAA,QAAOT,CAAM,CAAC,EAAG,MAAOa,EAC1D,SAAAV,CAAA,CACL,CAAA,EACJ,CAER,CAqBO,SAASY,EAAQ,CAAE,IAAArB,EAAK,UAAAO,EAAW,MAAAC,EAAO,SAAAC,EAAU,GAAGC,GAAuB,CACjF,MAAME,EAA4B,CAAE,IAAKb,EAAWC,EAAK,CAAC,EAAG,GAAGQ,CAAA,EAChE,OACIK,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,GAAGC,EAAAA,QAAO,IAAKR,CAAS,EAAG,MAAOK,EAAa,GAAGF,EAC7D,SAAAD,CAAA,CACL,CAER,CAkBO,SAASa,EAAY,CACxB,MAAAC,EAAQ,MACR,IAAAvB,EACA,UAAAO,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,MAAME,EAA4B,CAAE,IAAKb,EAAWC,EAAK,CAAC,EAAG,GAAGQ,CAAA,EAChE,OACIK,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,GAAGC,EAAAA,QAAO,QAASA,EAAAA,QAAOQ,CAAK,EAAGhB,CAAS,EAAG,MAAOK,EAAa,GAAGF,EAChF,SAAAD,EACL,CAER"}
+{"version":3,"file":"Form.cjs","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CSSProperties, FormHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Form.module.css\";\n\nexport type FormLayout = \"stack\" | \"inline\" | \"grid\";\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\ninterface LayoutProps {\n    /** Field arrangement. `stack` stacks fields vertically, `inline` lines them up in a wrapping row, `grid` arranges them in `columns` equal-width tracks. Default `stack`. */\n    layout?: FormLayout;\n    /** Number of columns when `layout=\"grid\"`, or a custom `grid-template-columns` value. Default `2`. */\n    columns?: number | string;\n    /** Gap between fields. Numbers map to a multiple of the 4px scale (default `4` → 16px). */\n    gap?: number | string;\n}\n\nfunction resolveGap(gap: number | string | undefined, fallback: number): string {\n    if (gap === undefined) return `${fallback * 4}px`;\n    return typeof gap === \"number\" ? `${gap * 4}px` : gap;\n}\n\nfunction resolveColumns(columns: number | string | undefined): string {\n    if (columns === undefined) return \"repeat(2, minmax(0, 1fr))\";\n    return typeof columns === \"number\" ? `repeat(${columns}, minmax(0, 1fr))` : columns;\n}\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement>, LayoutProps {}\n\n/**\n * Form wrapper with a built-in layout variant. Replaces ad-hoc `<form>` +\n * `<Stack>` / `<Grid>` boilerplate; pair with [[FormRow]], [[FormSection]],\n * and [[FormActions]] for richer layouts.\n *\n * @example\n * <Form layout=\"grid\" columns={2} gap={4} onSubmit={form.handleSubmit(save)}>\n *     <Input label=\"Nome\" {...form.register(\"name\")} />\n *     <Input label=\"Email\" {...form.register(\"email\")} />\n *     <FormActions align=\"end\">\n *         <Button type=\"submit\">Salvar</Button>\n *     </FormActions>\n * </Form>\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n    { layout = \"stack\", columns, gap, className, style, children, ...props },\n    ref,\n) {\n    const finalStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n        ...style,\n    };\n    return (\n        <form\n            ref={ref}\n            className={cn(styles.form, styles[layout], className)}\n            style={finalStyle}\n            {...props}\n        >\n            {children}\n        </form>\n    );\n});\n\nexport interface FormSectionProps extends Omit<HTMLAttributes<HTMLElement>, \"title\">, LayoutProps {\n    title?: ReactNode;\n    description?: ReactNode;\n}\n\n/**\n * Visually grouped subset of fields with an optional title and description.\n * Has its own `layout`/`columns`/`gap` so subsets can stack while the parent\n * grids (or vice versa).\n *\n * @example\n * <FormSection title=\"Endereço\" description=\"Usado para entrega\" layout=\"grid\" columns={3}>\n *     <Input label=\"CEP\" />\n *     <Input label=\"Rua\" />\n *     <Input label=\"Número\" />\n * </FormSection>\n */\nexport function FormSection({\n    title,\n    description,\n    layout = \"stack\",\n    columns,\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormSectionProps) {\n    const bodyStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n    };\n    return (\n        <section className={cn(styles.section, className)} style={style} {...props}>\n            {(title || description) && (\n                <header className={styles.sectionHeader}>\n                    {title && <h3 className={styles.sectionTitle}>{title}</h3>}\n                    {description && <p className={styles.sectionDescription}>{description}</p>}\n                </header>\n            )}\n            <div className={cn(styles.sectionBody, styles[layout])} style={bodyStyle}>\n                {children}\n            </div>\n        </section>\n    );\n}\n\nexport interface FormRowProps extends HTMLAttributes<HTMLDivElement> {\n    /** Gap between row items. Numbers map to a multiple of the 4px scale (default `3` → 12px). */\n    gap?: number | string;\n}\n\n/**\n * Forces a horizontal row regardless of parent layout — useful for grouping\n * two short fields side-by-side inside an otherwise stacked form (e.g. CEP +\n * city, expiry month + year).\n *\n * @example\n * <Form layout=\"stack\">\n *     <FormRow>\n *         <Input label=\"CEP\" />\n *         <Input label=\"Cidade\" />\n *     </FormRow>\n *     <Input label=\"Endereço completo\" />\n * </Form>\n */\nexport function FormRow({ gap, className, style, children, ...props }: FormRowProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 3), ...style };\n    return (\n        <div className={cn(styles.row, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n\nexport interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {\n    /** Horizontal alignment of buttons. Default `end`. */\n    align?: FormActionsAlign;\n    /** Gap between buttons. Numbers map to a multiple of the 4px scale (default `2` → 8px). */\n    gap?: number | string;\n}\n\n/**\n * Footer button row for a form. Use inside (or after) [[Form]] / [[FormSection]].\n *\n * @example\n * <FormActions align=\"end\">\n *     <Button variant=\"ghost\" onClick={onCancel}>Cancelar</Button>\n *     <Button type=\"submit\" loading={form.formState.isSubmitting}>Salvar</Button>\n * </FormActions>\n */\nexport function FormActions({\n    align = \"end\",\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormActionsProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 2), ...style };\n    return (\n        <div className={cn(styles.actions, styles[align], className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"2HAiBA,SAAS,EAAW,EAAkC,EAA0B,CAE5E,OADI,IAAQ,IAAA,GAAkB,GAAG,EAAW,EAAE,IACvC,OAAO,GAAQ,SAAW,GAAG,EAAM,EAAE,IAAM,CACtD,CAEA,SAAS,EAAe,EAA8C,CAElE,OADI,IAAY,IAAA,GAAkB,4BAC3B,OAAO,GAAY,SAAW,UAAU,EAAQ,mBAAqB,CAChF,CAkBA,IAAa,GAAA,EAAA,EAAA,WAAA,CAA8C,SACvD,CAAE,SAAS,QAAS,UAAS,MAAK,YAAW,QAAO,WAAU,GAAG,GACjE,EACF,CACE,IAAM,EAA4B,CAC9B,IAAK,EAAW,EAAK,CAAC,EACtB,GAAI,IAAW,OAAS,CAAE,oBAAqB,EAAe,CAAO,CAAE,EAAI,KAC3E,GAAG,CACP,EACA,OACI,EAAA,EAAA,IAAA,CAAC,OAAD,CACS,MACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,EAAA,QAAO,GAAS,CAAS,EACpD,MAAO,EACP,GAAI,EAEH,UACC,CAAA,CAEd,CAAC,EAmBD,SAAgB,EAAY,CACxB,QACA,cACA,SAAS,QACT,UACA,MACA,YACA,QACA,WACA,GAAG,GACc,CACjB,IAAM,EAA2B,CAC7B,IAAK,EAAW,EAAK,CAAC,EACtB,GAAI,IAAW,OAAS,CAAE,oBAAqB,EAAe,CAAO,CAAE,EAAI,IAC/E,EACA,OACI,EAAA,EAAA,KAAA,CAAC,UAAD,CAAS,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAS,EAAU,QAAO,GAAI,WAArE,EACM,GAAS,KACP,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,uBAA1B,CACK,IAAS,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,sBAAe,CAAU,CAAA,EACxD,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,4BAAqB,CAAe,CAAA,CACrE,KAEZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,YAAa,EAAA,QAAO,EAAO,EAAG,MAAO,EAC1D,UACA,CAAA,CACA,GAEjB,CAqBA,SAAgB,EAAQ,CAAE,MAAK,YAAW,QAAO,WAAU,GAAG,GAAuB,CACjF,IAAM,EAA4B,CAAE,IAAK,EAAW,EAAK,CAAC,EAAG,GAAG,CAAM,EACtE,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,IAAK,CAAS,EAAG,MAAO,EAAY,GAAI,EAC7D,UACA,CAAA,CAEb,CAkBA,SAAgB,EAAY,CACxB,QAAQ,MACR,MACA,YACA,QACA,WACA,GAAG,GACc,CACjB,IAAM,EAA4B,CAAE,IAAK,EAAW,EAAK,CAAC,EAAG,GAAG,CAAM,EACtE,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,EAAA,QAAO,GAAQ,CAAS,EAAG,MAAO,EAAY,GAAI,EAChF,UACA,CAAA,CAEb"}

package/dist/components/Form/Form.js

@@ -1,72 +1,78 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { cn as m } from "../../utils/cn.js";
-import n from "./Form.module.css.js";
-function l(e, r) {
-  return e === void 0 ? `${r * 4}px` : typeof e == "number" ? `${e * 4}px` : e;
+import { cn as e } from "../../utils/cn.js";
+import t from "./Form.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Form/Form.tsx
+function a(e, t) {
+	return e === void 0 ? `${t * 4}px` : typeof e == "number" ? `${e * 4}px` : e;
 }
-function y(e) {
-  return e === void 0 ? "repeat(2, minmax(0, 1fr))" : typeof e == "number" ? `repeat(${e}, minmax(0, 1fr))` : e;
+function o(e) {
+	return e === void 0 ? "repeat(2, minmax(0, 1fr))" : typeof e == "number" ? `repeat(${e}, minmax(0, 1fr))` : e;
 }
-const F = N(function({ layout: r = "stack", columns: o, gap: t, className: s, style: i, children: c, ...f }, d) {
-  const u = {
-    gap: l(t, 4),
-    ...r === "grid" ? { gridTemplateColumns: y(o) } : null,
-    ...i
-  };
-  return /* @__PURE__ */ a(
-    "form",
-    {
-      ref: d,
-      className: m(n.form, n[r], s),
-      style: u,
-      ...f,
-      children: c
-    }
-  );
+var s = n(function({ layout: n = "stack", columns: i, gap: s, className: c, style: l, children: u, ...d }, f) {
+	let p = {
+		gap: a(s, 4),
+		...n === "grid" ? { gridTemplateColumns: o(i) } : null,
+		...l
+	};
+	return /* @__PURE__ */ r("form", {
+		ref: f,
+		className: e(t.form, t[n], c),
+		style: p,
+		...d,
+		children: u
+	});
 });
-function S({
-  title: e,
-  description: r,
-  layout: o = "stack",
-  columns: t,
-  gap: s,
-  className: i,
-  style: c,
-  children: f,
-  ...d
-}) {
-  const u = {
-    gap: l(s, 4),
-    ...o === "grid" ? { gridTemplateColumns: y(t) } : null
-  };
-  return /* @__PURE__ */ p("section", { className: m(n.section, i), style: c, ...d, children: [
-    (e || r) && /* @__PURE__ */ p("header", { className: n.sectionHeader, children: [
-      e && /* @__PURE__ */ a("h3", { className: n.sectionTitle, children: e }),
-      r && /* @__PURE__ */ a("p", { className: n.sectionDescription, children: r })
-    ] }),
-    /* @__PURE__ */ a("div", { className: m(n.sectionBody, n[o]), style: u, children: f })
-  ] });
+function c({ title: n, description: s, layout: c = "stack", columns: l, gap: u, className: d, style: f, children: p, ...m }) {
+	let h = {
+		gap: a(u, 4),
+		...c === "grid" ? { gridTemplateColumns: o(l) } : null
+	};
+	return /* @__PURE__ */ i("section", {
+		className: e(t.section, d),
+		style: f,
+		...m,
+		children: [(n || s) && /* @__PURE__ */ i("header", {
+			className: t.sectionHeader,
+			children: [n && /* @__PURE__ */ r("h3", {
+				className: t.sectionTitle,
+				children: n
+			}), s && /* @__PURE__ */ r("p", {
+				className: t.sectionDescription,
+				children: s
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: e(t.sectionBody, t[c]),
+			style: h,
+			children: p
+		})]
+	});
 }
-function b({ gap: e, className: r, style: o, children: t, ...s }) {
-  const i = { gap: l(e, 3), ...o };
-  return /* @__PURE__ */ a("div", { className: m(n.row, r), style: i, ...s, children: t });
+function l({ gap: n, className: i, style: o, children: s, ...c }) {
+	let l = {
+		gap: a(n, 3),
+		...o
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e(t.row, i),
+		style: l,
+		...c,
+		children: s
+	});
 }
-function w({
-  align: e = "end",
-  gap: r,
-  className: o,
-  style: t,
-  children: s,
-  ...i
-}) {
-  const c = { gap: l(r, 2), ...t };
-  return /* @__PURE__ */ a("div", { className: m(n.actions, n[e], o), style: c, ...i, children: s });
+function u({ align: n = "end", gap: i, className: o, style: s, children: c, ...l }) {
+	let u = {
+		gap: a(i, 2),
+		...s
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e(t.actions, t[n], o),
+		style: u,
+		...l,
+		children: c
+	});
 }
-export {
-  F as Form,
-  w as FormActions,
-  b as FormRow,
-  S as FormSection
-};
-//# sourceMappingURL=Form.js.map
+//#endregion
+export { s as Form, u as FormActions, l as FormRow, c as FormSection };
+
+//# sourceMappingURL=Form.js.map

package/dist/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CSSProperties, FormHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Form.module.css\";\n\nexport type FormLayout = \"stack\" | \"inline\" | \"grid\";\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\ninterface LayoutProps {\n    /** Field arrangement. `stack` stacks fields vertically, `inline` lines them up in a wrapping row, `grid` arranges them in `columns` equal-width tracks. Default `stack`. */\n    layout?: FormLayout;\n    /** Number of columns when `layout=\"grid\"`, or a custom `grid-template-columns` value. Default `2`. */\n    columns?: number | string;\n    /** Gap between fields. Numbers map to a multiple of the 4px scale (default `4` → 16px). */\n    gap?: number | string;\n}\n\nfunction resolveGap(gap: number | string | undefined, fallback: number): string {\n    if (gap === undefined) return `${fallback * 4}px`;\n    return typeof gap === \"number\" ? `${gap * 4}px` : gap;\n}\n\nfunction resolveColumns(columns: number | string | undefined): string {\n    if (columns === undefined) return \"repeat(2, minmax(0, 1fr))\";\n    return typeof columns === \"number\" ? `repeat(${columns}, minmax(0, 1fr))` : columns;\n}\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement>, LayoutProps {}\n\n/**\n * Form wrapper with a built-in layout variant. Replaces ad-hoc `<form>` +\n * `<Stack>` / `<Grid>` boilerplate; pair with [[FormRow]], [[FormSection]],\n * and [[FormActions]] for richer layouts.\n *\n * @example\n * <Form layout=\"grid\" columns={2} gap={4} onSubmit={form.handleSubmit(save)}>\n *     <Input label=\"Nome\" {...form.register(\"name\")} />\n *     <Input label=\"Email\" {...form.register(\"email\")} />\n *     <FormActions align=\"end\">\n *         <Button type=\"submit\">Salvar</Button>\n *     </FormActions>\n * </Form>\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n    { layout = \"stack\", columns, gap, className, style, children, ...props },\n    ref,\n) {\n    const finalStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n        ...style,\n    };\n    return (\n        <form\n            ref={ref}\n            className={cn(styles.form, styles[layout], className)}\n            style={finalStyle}\n            {...props}\n        >\n            {children}\n        </form>\n    );\n});\n\nexport interface FormSectionProps extends Omit<HTMLAttributes<HTMLElement>, \"title\">, LayoutProps {\n    title?: ReactNode;\n    description?: ReactNode;\n}\n\n/**\n * Visually grouped subset of fields with an optional title and description.\n * Has its own `layout`/`columns`/`gap` so subsets can stack while the parent\n * grids (or vice versa).\n *\n * @example\n * <FormSection title=\"Endereço\" description=\"Usado para entrega\" layout=\"grid\" columns={3}>\n *     <Input label=\"CEP\" />\n *     <Input label=\"Rua\" />\n *     <Input label=\"Número\" />\n * </FormSection>\n */\nexport function FormSection({\n    title,\n    description,\n    layout = \"stack\",\n    columns,\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormSectionProps) {\n    const bodyStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n    };\n    return (\n        <section className={cn(styles.section, className)} style={style} {...props}>\n            {(title || description) && (\n                <header className={styles.sectionHeader}>\n                    {title && <h3 className={styles.sectionTitle}>{title}</h3>}\n                    {description && <p className={styles.sectionDescription}>{description}</p>}\n                </header>\n            )}\n            <div className={cn(styles.sectionBody, styles[layout])} style={bodyStyle}>\n                {children}\n            </div>\n        </section>\n    );\n}\n\nexport interface FormRowProps extends HTMLAttributes<HTMLDivElement> {\n    /** Gap between row items. Numbers map to a multiple of the 4px scale (default `3` → 12px). */\n    gap?: number | string;\n}\n\n/**\n * Forces a horizontal row regardless of parent layout — useful for grouping\n * two short fields side-by-side inside an otherwise stacked form (e.g. CEP +\n * city, expiry month + year).\n *\n * @example\n * <Form layout=\"stack\">\n *     <FormRow>\n *         <Input label=\"CEP\" />\n *         <Input label=\"Cidade\" />\n *     </FormRow>\n *     <Input label=\"Endereço completo\" />\n * </Form>\n */\nexport function FormRow({ gap, className, style, children, ...props }: FormRowProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 3), ...style };\n    return (\n        <div className={cn(styles.row, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n\nexport interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {\n    /** Horizontal alignment of buttons. Default `end`. */\n    align?: FormActionsAlign;\n    /** Gap between buttons. Numbers map to a multiple of the 4px scale (default `2` → 8px). */\n    gap?: number | string;\n}\n\n/**\n * Footer button row for a form. Use inside (or after) [[Form]] / [[FormSection]].\n *\n * @example\n * <FormActions align=\"end\">\n *     <Button variant=\"ghost\" onClick={onCancel}>Cancelar</Button>\n *     <Button type=\"submit\" loading={form.formState.isSubmitting}>Salvar</Button>\n * </FormActions>\n */\nexport function FormActions({\n    align = \"end\",\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormActionsProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 2), ...style };\n    return (\n        <div className={cn(styles.actions, styles[align], className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"names":["resolveGap","gap","fallback","resolveColumns","columns","Form","forwardRef","layout","className","style","children","props","ref","finalStyle","jsx","cn","styles","FormSection","title","description","bodyStyle","jsxs","FormRow","FormActions","align"],"mappings":";;;;AAiBA,SAASA,EAAWC,GAAkCC,GAA0B;AAC5E,SAAID,MAAQ,SAAkB,GAAGC,IAAW,CAAC,OACtC,OAAOD,KAAQ,WAAW,GAAGA,IAAM,CAAC,OAAOA;AACtD;AAEA,SAASE,EAAeC,GAA8C;AAClE,SAAIA,MAAY,SAAkB,8BAC3B,OAAOA,KAAY,WAAW,UAAUA,CAAO,sBAAsBA;AAChF;AAkBO,MAAMC,IAAOC,EAAuC,SACvD,EAAE,QAAAC,IAAS,SAAS,SAAAH,GAAS,KAAAH,GAAK,WAAAO,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GACjEC,GACF;AACE,QAAMC,IAA4B;AAAA,IAC9B,KAAKb,EAAWC,GAAK,CAAC;AAAA,IACtB,GAAIM,MAAW,SAAS,EAAE,qBAAqBJ,EAAeC,CAAO,MAAM;AAAA,IAC3E,GAAGK;AAAA,EAAA;AAEP,SACI,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG,EAAGC,EAAO,MAAMA,EAAOT,CAAM,GAAGC,CAAS;AAAA,MACpD,OAAOK;AAAA,MACN,GAAGF;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAmBM,SAASO,EAAY;AAAA,EACxB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAZ,IAAS;AAAA,EACT,SAAAH;AAAA,EACA,KAAAH;AAAA,EACA,WAAAO;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,GAAqB;AACjB,QAAMS,IAA2B;AAAA,IAC7B,KAAKpB,EAAWC,GAAK,CAAC;AAAA,IACtB,GAAIM,MAAW,SAAS,EAAE,qBAAqBJ,EAAeC,CAAO,MAAM;AAAA,EAAA;AAE/E,SACI,gBAAAiB,EAAC,WAAA,EAAQ,WAAWN,EAAGC,EAAO,SAASR,CAAS,GAAG,OAAAC,GAAe,GAAGE,GAC/D,UAAA;AAAA,KAAAO,KAASC,MACP,gBAAAE,EAAC,UAAA,EAAO,WAAWL,EAAO,eACrB,UAAA;AAAA,MAAAE,KAAS,gBAAAJ,EAAC,MAAA,EAAG,WAAWE,EAAO,cAAe,UAAAE,GAAM;AAAA,MACpDC,KAAe,gBAAAL,EAAC,KAAA,EAAE,WAAWE,EAAO,oBAAqB,UAAAG,EAAA,CAAY;AAAA,IAAA,GAC1E;AAAA,IAEJ,gBAAAL,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,aAAaA,EAAOT,CAAM,CAAC,GAAG,OAAOa,GAC1D,UAAAV,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AAqBO,SAASY,EAAQ,EAAE,KAAArB,GAAK,WAAAO,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,KAAuB;AACjF,QAAME,IAA4B,EAAE,KAAKb,EAAWC,GAAK,CAAC,GAAG,GAAGQ,EAAA;AAChE,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,KAAKR,CAAS,GAAG,OAAOK,GAAa,GAAGF,GAC7D,UAAAD,EAAA,CACL;AAER;AAkBO,SAASa,EAAY;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,KAAAvB;AAAA,EACA,WAAAO;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,GAAqB;AACjB,QAAME,IAA4B,EAAE,KAAKb,EAAWC,GAAK,CAAC,GAAG,GAAGQ,EAAA;AAChE,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,SAASA,EAAOQ,CAAK,GAAGhB,CAAS,GAAG,OAAOK,GAAa,GAAGF,GAChF,UAAAD,GACL;AAER;"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/Form/Form.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { CSSProperties, FormHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Form.module.css\";\n\nexport type FormLayout = \"stack\" | \"inline\" | \"grid\";\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\ninterface LayoutProps {\n    /** Field arrangement. `stack` stacks fields vertically, `inline` lines them up in a wrapping row, `grid` arranges them in `columns` equal-width tracks. Default `stack`. */\n    layout?: FormLayout;\n    /** Number of columns when `layout=\"grid\"`, or a custom `grid-template-columns` value. Default `2`. */\n    columns?: number | string;\n    /** Gap between fields. Numbers map to a multiple of the 4px scale (default `4` → 16px). */\n    gap?: number | string;\n}\n\nfunction resolveGap(gap: number | string | undefined, fallback: number): string {\n    if (gap === undefined) return `${fallback * 4}px`;\n    return typeof gap === \"number\" ? `${gap * 4}px` : gap;\n}\n\nfunction resolveColumns(columns: number | string | undefined): string {\n    if (columns === undefined) return \"repeat(2, minmax(0, 1fr))\";\n    return typeof columns === \"number\" ? `repeat(${columns}, minmax(0, 1fr))` : columns;\n}\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement>, LayoutProps {}\n\n/**\n * Form wrapper with a built-in layout variant. Replaces ad-hoc `<form>` +\n * `<Stack>` / `<Grid>` boilerplate; pair with [[FormRow]], [[FormSection]],\n * and [[FormActions]] for richer layouts.\n *\n * @example\n * <Form layout=\"grid\" columns={2} gap={4} onSubmit={form.handleSubmit(save)}>\n *     <Input label=\"Nome\" {...form.register(\"name\")} />\n *     <Input label=\"Email\" {...form.register(\"email\")} />\n *     <FormActions align=\"end\">\n *         <Button type=\"submit\">Salvar</Button>\n *     </FormActions>\n * </Form>\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n    { layout = \"stack\", columns, gap, className, style, children, ...props },\n    ref,\n) {\n    const finalStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n        ...style,\n    };\n    return (\n        <form\n            ref={ref}\n            className={cn(styles.form, styles[layout], className)}\n            style={finalStyle}\n            {...props}\n        >\n            {children}\n        </form>\n    );\n});\n\nexport interface FormSectionProps extends Omit<HTMLAttributes<HTMLElement>, \"title\">, LayoutProps {\n    title?: ReactNode;\n    description?: ReactNode;\n}\n\n/**\n * Visually grouped subset of fields with an optional title and description.\n * Has its own `layout`/`columns`/`gap` so subsets can stack while the parent\n * grids (or vice versa).\n *\n * @example\n * <FormSection title=\"Endereço\" description=\"Usado para entrega\" layout=\"grid\" columns={3}>\n *     <Input label=\"CEP\" />\n *     <Input label=\"Rua\" />\n *     <Input label=\"Número\" />\n * </FormSection>\n */\nexport function FormSection({\n    title,\n    description,\n    layout = \"stack\",\n    columns,\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormSectionProps) {\n    const bodyStyle: CSSProperties = {\n        gap: resolveGap(gap, 4),\n        ...(layout === \"grid\" ? { gridTemplateColumns: resolveColumns(columns) } : null),\n    };\n    return (\n        <section className={cn(styles.section, className)} style={style} {...props}>\n            {(title || description) && (\n                <header className={styles.sectionHeader}>\n                    {title && <h3 className={styles.sectionTitle}>{title}</h3>}\n                    {description && <p className={styles.sectionDescription}>{description}</p>}\n                </header>\n            )}\n            <div className={cn(styles.sectionBody, styles[layout])} style={bodyStyle}>\n                {children}\n            </div>\n        </section>\n    );\n}\n\nexport interface FormRowProps extends HTMLAttributes<HTMLDivElement> {\n    /** Gap between row items. Numbers map to a multiple of the 4px scale (default `3` → 12px). */\n    gap?: number | string;\n}\n\n/**\n * Forces a horizontal row regardless of parent layout — useful for grouping\n * two short fields side-by-side inside an otherwise stacked form (e.g. CEP +\n * city, expiry month + year).\n *\n * @example\n * <Form layout=\"stack\">\n *     <FormRow>\n *         <Input label=\"CEP\" />\n *         <Input label=\"Cidade\" />\n *     </FormRow>\n *     <Input label=\"Endereço completo\" />\n * </Form>\n */\nexport function FormRow({ gap, className, style, children, ...props }: FormRowProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 3), ...style };\n    return (\n        <div className={cn(styles.row, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n\nexport interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {\n    /** Horizontal alignment of buttons. Default `end`. */\n    align?: FormActionsAlign;\n    /** Gap between buttons. Numbers map to a multiple of the 4px scale (default `2` → 8px). */\n    gap?: number | string;\n}\n\n/**\n * Footer button row for a form. Use inside (or after) [[Form]] / [[FormSection]].\n *\n * @example\n * <FormActions align=\"end\">\n *     <Button variant=\"ghost\" onClick={onCancel}>Cancelar</Button>\n *     <Button type=\"submit\" loading={form.formState.isSubmitting}>Salvar</Button>\n * </FormActions>\n */\nexport function FormActions({\n    align = \"end\",\n    gap,\n    className,\n    style,\n    children,\n    ...props\n}: FormActionsProps) {\n    const finalStyle: CSSProperties = { gap: resolveGap(gap, 2), ...style };\n    return (\n        <div className={cn(styles.actions, styles[align], className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAiBA,SAAS,EAAW,GAAkC,GAA0B;CAE5E,OADI,MAAQ,KAAA,IAAkB,GAAG,IAAW,EAAE,MACvC,OAAO,KAAQ,WAAW,GAAG,IAAM,EAAE,MAAM;AACtD;AAEA,SAAS,EAAe,GAA8C;CAElE,OADI,MAAY,KAAA,IAAkB,8BAC3B,OAAO,KAAY,WAAW,UAAU,EAAQ,qBAAqB;AAChF;AAkBA,IAAa,IAAO,EAAuC,SACvD,EAAE,YAAS,SAAS,YAAS,QAAK,cAAW,UAAO,aAAU,GAAG,KACjE,GACF;CACE,IAAM,IAA4B;EAC9B,KAAK,EAAW,GAAK,CAAC;EACtB,GAAI,MAAW,SAAS,EAAE,qBAAqB,EAAe,CAAO,EAAE,IAAI;EAC3E,GAAG;CACP;CACA,OACI,kBAAC,QAAD;EACS;EACL,WAAW,EAAG,EAAO,MAAM,EAAO,IAAS,CAAS;EACpD,OAAO;EACP,GAAI;EAEH;CACC,CAAA;AAEd,CAAC;AAmBD,SAAgB,EAAY,EACxB,UACA,gBACA,YAAS,SACT,YACA,QACA,cACA,UACA,aACA,GAAG,KACc;CACjB,IAAM,IAA2B;EAC7B,KAAK,EAAW,GAAK,CAAC;EACtB,GAAI,MAAW,SAAS,EAAE,qBAAqB,EAAe,CAAO,EAAE,IAAI;CAC/E;CACA,OACI,kBAAC,WAAD;EAAS,WAAW,EAAG,EAAO,SAAS,CAAS;EAAU;EAAO,GAAI;YAArE,EACM,KAAS,MACP,kBAAC,UAAD;GAAQ,WAAW,EAAO;aAA1B,CACK,KAAS,kBAAC,MAAD;IAAI,WAAW,EAAO;cAAe;GAAU,CAAA,GACxD,KAAe,kBAAC,KAAD;IAAG,WAAW,EAAO;cAAqB;GAAe,CAAA,CACrE;MAEZ,kBAAC,OAAD;GAAK,WAAW,EAAG,EAAO,aAAa,EAAO,EAAO;GAAG,OAAO;GAC1D;EACA,CAAA,CACA;;AAEjB;AAqBA,SAAgB,EAAQ,EAAE,QAAK,cAAW,UAAO,aAAU,GAAG,KAAuB;CACjF,IAAM,IAA4B;EAAE,KAAK,EAAW,GAAK,CAAC;EAAG,GAAG;CAAM;CACtE,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,KAAK,CAAS;EAAG,OAAO;EAAY,GAAI;EAC7D;CACA,CAAA;AAEb;AAkBA,SAAgB,EAAY,EACxB,WAAQ,OACR,QACA,cACA,UACA,aACA,GAAG,KACc;CACjB,IAAM,IAA4B;EAAE,KAAK,EAAW,GAAK,CAAC;EAAG,GAAG;CAAM;CACtE,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,EAAO,IAAQ,CAAS;EAAG,OAAO;EAAY,GAAI;EAChF;CACA,CAAA;AAEb"}

package/dist/components/Form/Form.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_form_jNBDR`,t=`tempest_stack_O1Hl-`,n=`tempest_inline_LBQAv`,r=`tempest_grid_-B86T`,i=`tempest_section_HGqw3`,a=`tempest_sectionHeader_ji9hQ`,o=`tempest_sectionTitle_GTPwe`,s=`tempest_sectionDescription_KjW7k`,c=`tempest_sectionBody_Vp2wz`,l=`tempest_row_1EkVR`,u=`tempest_actions_hK95I`,d=`tempest_start_gXnm3`,f=`tempest_center_mKkz4`,p=`tempest_end_O3yDQ`,m=`tempest_between_tte2z`,h={form:e,stack:t,inline:n,grid:r,section:i,sectionHeader:a,sectionTitle:o,sectionDescription:s,sectionBody:c,row:l,actions:u,start:d,center:f,end:p,between:m};exports.actions=u,exports.between=m,exports.center=f,exports.default=h,exports.end=p,exports.form=e,exports.grid=r,exports.inline=n,exports.row=l,exports.section=i,exports.sectionBody=c,exports.sectionDescription=s,exports.sectionHeader=a,exports.sectionTitle=o,exports.stack=t,exports.start=d;
+//# sourceMappingURL=Form.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.module.cjs","names":[],"sources":["../../../src/components/Form/Form.module.css"],"sourcesContent":[".form {\n    display: flex;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.form.stack {\n    flex-direction: column;\n}\n\n.form.inline {\n    flex-direction: row;\n    align-items: flex-end;\n    flex-wrap: wrap;\n}\n\n.form.grid {\n    display: grid;\n    width: 100%;\n}\n\n.section {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.sectionHeader {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: var(--tempest-space-3);\n}\n\n.sectionTitle {\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n    margin: 0;\n}\n\n.sectionDescription {\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    line-height: var(--tempest-leading-snug);\n    margin: var(--tempest-space-1) 0 0;\n}\n\n.sectionBody {\n    display: flex;\n    width: 100%;\n}\n\n.sectionBody.stack {\n    flex-direction: column;\n}\n\n.sectionBody.inline {\n    flex-direction: row;\n    align-items: flex-end;\n    flex-wrap: wrap;\n}\n\n.sectionBody.grid {\n    display: grid;\n}\n\n.row {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.row > * {\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n/* On mobile, rows collapse to single column for legibility. */\n@media (max-width: 639.98px) {\n    .row {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .row > * {\n        flex: 1 1 auto;\n    }\n}\n\n.actions {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    margin-top: var(--tempest-space-2);\n}\n\n.actions.start {\n    justify-content: flex-start;\n}\n\n.actions.center {\n    justify-content: center;\n}\n\n.actions.end {\n    justify-content: flex-end;\n}\n\n.actions.between {\n    justify-content: space-between;\n}\n"],"mappings":""}

package/dist/components/Form/Form.module.js

@@ -0,0 +1,22 @@
+//#region src/components/Form/Form.module.css
+var e = "tempest_form_jNBDR", t = "tempest_stack_O1Hl-", n = "tempest_inline_LBQAv", r = "tempest_grid_-B86T", i = "tempest_section_HGqw3", a = "tempest_sectionHeader_ji9hQ", o = "tempest_sectionTitle_GTPwe", s = "tempest_sectionDescription_KjW7k", c = "tempest_sectionBody_Vp2wz", l = "tempest_row_1EkVR", u = "tempest_actions_hK95I", d = "tempest_start_gXnm3", f = "tempest_center_mKkz4", p = "tempest_end_O3yDQ", m = "tempest_between_tte2z", h = {
+	form: e,
+	stack: t,
+	inline: n,
+	grid: r,
+	section: i,
+	sectionHeader: a,
+	sectionTitle: o,
+	sectionDescription: s,
+	sectionBody: c,
+	row: l,
+	actions: u,
+	start: d,
+	center: f,
+	end: p,
+	between: m
+};
+//#endregion
+export { u as actions, m as between, f as center, h as default, p as end, e as form, r as grid, n as inline, l as row, i as section, c as sectionBody, s as sectionDescription, a as sectionHeader, o as sectionTitle, t as stack, d as start };
+
+//# sourceMappingURL=Form.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.module.js","names":[],"sources":["../../../src/components/Form/Form.module.css"],"sourcesContent":[".form {\n    display: flex;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.form.stack {\n    flex-direction: column;\n}\n\n.form.inline {\n    flex-direction: row;\n    align-items: flex-end;\n    flex-wrap: wrap;\n}\n\n.form.grid {\n    display: grid;\n    width: 100%;\n}\n\n.section {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.sectionHeader {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: var(--tempest-space-3);\n}\n\n.sectionTitle {\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n    margin: 0;\n}\n\n.sectionDescription {\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    line-height: var(--tempest-leading-snug);\n    margin: var(--tempest-space-1) 0 0;\n}\n\n.sectionBody {\n    display: flex;\n    width: 100%;\n}\n\n.sectionBody.stack {\n    flex-direction: column;\n}\n\n.sectionBody.inline {\n    flex-direction: row;\n    align-items: flex-end;\n    flex-wrap: wrap;\n}\n\n.sectionBody.grid {\n    display: grid;\n}\n\n.row {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.row > * {\n    flex: 1 1 0;\n    min-width: 0;\n}\n\n/* On mobile, rows collapse to single column for legibility. */\n@media (max-width: 639.98px) {\n    .row {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    .row > * {\n        flex: 1 1 auto;\n    }\n}\n\n.actions {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    margin-top: var(--tempest-space-2);\n}\n\n.actions.start {\n    justify-content: flex-start;\n}\n\n.actions.center {\n    justify-content: center;\n}\n\n.actions.end {\n    justify-content: flex-end;\n}\n\n.actions.between {\n    justify-content: space-between;\n}\n"],"mappings":""}

package/dist/components/HoverCard/HoverCard.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),e=require("react"),g=require("../../utils/cn.cjs"),s=require("./HoverCard.module.css.cjs");function j({trigger:f,children:m,openDelay:n=300,closeDelay:c=150,placement:b="bottom",className:v,...C}){const[o,a]=e.useState(!1),l=e.useId(),t=e.useRef(null),r=e.useCallback(()=>{t.current!==null&&(clearTimeout(t.current),t.current=null)},[]),i=e.useCallback(()=>{r(),t.current=setTimeout(()=>a(!0),n)},[r,n]),d=e.useCallback(()=>{r(),t.current=setTimeout(()=>a(!1),c)},[r,c]);return e.useEffect(()=>r,[r]),u.jsxs("span",{className:s.default.root,onMouseEnter:i,onMouseLeave:d,onFocus:i,onBlur:d,children:[u.jsx("span",{"aria-describedby":o?l:void 0,className:s.default.trigger,children:f}),o&&u.jsx("div",{id:l,role:"dialog",className:g.cn(s.default.card,s.default[b],v),...C,children:m})]})}exports.HoverCard=j;
-//# sourceMappingURL=HoverCard.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./HoverCard.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({trigger:i,children:a,openDelay:o=300,closeDelay:s=150,placement:c=`bottom`,className:l,...u}){let[d,f]=(0,n.useState)(!1),p=(0,n.useId)(),m=(0,n.useRef)(null),h=(0,n.useCallback)(()=>{m.current!==null&&(clearTimeout(m.current),m.current=null)},[]),g=(0,n.useCallback)(()=>{h(),m.current=setTimeout(()=>f(!0),o)},[h,o]),_=(0,n.useCallback)(()=>{h(),m.current=setTimeout(()=>f(!1),s)},[h,s]);return(0,n.useEffect)(()=>h,[h]),(0,r.jsxs)(`span`,{className:t.default.root,onMouseEnter:g,onMouseLeave:_,onFocus:g,onBlur:_,children:[(0,r.jsx)(`span`,{"aria-describedby":d?p:void 0,className:t.default.trigger,children:i}),d&&(0,r.jsx)(`div`,{id:p,role:`dialog`,className:e.cn(t.default.card,t.default[c],l),...u,children:a})]})}exports.HoverCard=i;
+//# sourceMappingURL=HoverCard.cjs.map

package/dist/components/HoverCard/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n}\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    className,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    return (\n        <span\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.card, styles[placement], className)}\n                    {...rest}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"names":["HoverCard","trigger","children","openDelay","closeDelay","placement","className","rest","open","setOpen","useState","id","useId","timerRef","useRef","clearTimer","useCallback","scheduleOpen","scheduleClose","useEffect","jsxs","styles","jsx","cn"],"mappings":"gNA+BO,SAASA,EAAU,CACtB,QAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,IACZ,WAAAC,EAAa,IACb,UAAAC,EAAY,SACZ,UAAAC,EACA,GAAGC,CACP,EAAmB,CACf,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAChCC,EAAKC,EAAAA,MAAA,EACLC,EAAWC,EAAAA,OAA6C,IAAI,EAE5DC,EAAaC,EAAAA,YAAY,IAAY,CACnCH,EAAS,UAAY,OACrB,aAAaA,EAAS,OAAO,EAC7BA,EAAS,QAAU,KAE3B,EAAG,CAAA,CAAE,EAECI,EAAeD,EAAAA,YAAY,IAAY,CACzCD,EAAA,EACAF,EAAS,QAAU,WAAW,IAAMJ,EAAQ,EAAI,EAAGN,CAAS,CAChE,EAAG,CAACY,EAAYZ,CAAS,CAAC,EAEpBe,EAAgBF,EAAAA,YAAY,IAAY,CAC1CD,EAAA,EACAF,EAAS,QAAU,WAAW,IAAMJ,EAAQ,EAAK,EAAGL,CAAU,CAClE,EAAG,CAACW,EAAYX,CAAU,CAAC,EAE3Be,OAAAA,EAAAA,UAAU,IAAMJ,EAAY,CAACA,CAAU,CAAC,EAGpCK,EAAAA,KAAC,OAAA,CACG,UAAWC,EAAAA,QAAO,KAClB,aAAcJ,EACd,aAAcC,EACd,QAASD,EACT,OAAQC,EAER,SAAA,CAAAI,EAAAA,IAAC,OAAA,CAAK,mBAAkBd,EAAOG,EAAK,OAAW,UAAWU,EAAAA,QAAO,QAC5D,SAAApB,CAAA,CACL,EACCO,GACGc,EAAAA,IAAC,MAAA,CACG,GAAAX,EACA,KAAK,SACL,UAAWY,EAAAA,GAAGF,UAAO,KAAMA,EAAAA,QAAOhB,CAAS,EAAGC,CAAS,EACtD,GAAGC,EAEH,SAAAL,CAAA,CAAA,CACL,CAAA,CAAA,CAIhB"}
+{"version":3,"file":"HoverCard.cjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n}\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    className,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    return (\n        <span\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.card, styles[placement], className)}\n                    {...rest}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"mappings":"gIA+BA,SAAgB,EAAU,CACtB,UACA,WACA,YAAY,IACZ,aAAa,IACb,YAAY,SACZ,YACA,GAAG,GACY,CACf,GAAM,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAAoB,EAAK,EAChC,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,OAAA,CAAwD,IAAI,EAE5D,GAAA,EAAA,EAAA,YAAA,KAAqC,CACnC,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,YAAA,KAAuC,CACzC,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,CAChE,EAAG,CAAC,EAAY,CAAS,CAAC,EAEpB,GAAA,EAAA,EAAA,YAAA,KAAwC,CAC1C,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAK,EAAG,CAAU,CAClE,EAAG,CAAC,EAAY,CAAU,CAAC,EAI3B,OAFA,EAAA,EAAA,UAAA,KAAgB,EAAY,CAAC,CAAU,CAAC,GAGpC,EAAA,EAAA,KAAA,CAAC,OAAD,CACI,UAAW,EAAA,QAAO,KAClB,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,WALZ,EAOI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,mBAAkB,EAAO,EAAK,IAAA,GAAW,UAAW,EAAA,QAAO,iBAC5D,CACC,CAAA,EACL,IACG,EAAA,EAAA,IAAA,CAAC,MAAD,CACQ,KACJ,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,EAAA,QAAO,GAAY,CAAS,EACvD,GAAI,EAEH,UACA,CAAA,CAEP,GAEd"}

package/dist/components/HoverCard/HoverCard.js

@@ -1,48 +1,36 @@
-import { jsxs as v, jsx as m } from "react/jsx-runtime";
-import { useState as T, useId as g, useRef as x, useCallback as t, useEffect as C } from "react";
-import { cn as N } from "../../utils/cn.js";
-import s from "./HoverCard.module.css.js";
-function R({
-  trigger: d,
-  children: f,
-  openDelay: o = 300,
-  closeDelay: n = 150,
-  placement: p = "bottom",
-  className: b,
-  ...h
-}) {
-  const [c, u] = T(!1), l = g(), r = x(null), e = t(() => {
-    r.current !== null && (clearTimeout(r.current), r.current = null);
-  }, []), i = t(() => {
-    e(), r.current = setTimeout(() => u(!0), o);
-  }, [e, o]), a = t(() => {
-    e(), r.current = setTimeout(() => u(!1), n);
-  }, [e, n]);
-  return C(() => e, [e]), /* @__PURE__ */ v(
-    "span",
-    {
-      className: s.root,
-      onMouseEnter: i,
-      onMouseLeave: a,
-      onFocus: i,
-      onBlur: a,
-      children: [
-        /* @__PURE__ */ m("span", { "aria-describedby": c ? l : void 0, className: s.trigger, children: d }),
-        c && /* @__PURE__ */ m(
-          "div",
-          {
-            id: l,
-            role: "dialog",
-            className: N(s.card, s[p], b),
-            ...h,
-            children: f
-          }
-        )
-      ]
-    }
-  );
+import { cn as e } from "../../utils/cn.js";
+import t from "./HoverCard.module.js";
+import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/HoverCard/HoverCard.tsx
+function l({ trigger: l, children: u, openDelay: d = 300, closeDelay: f = 150, placement: p = "bottom", className: m, ...h }) {
+	let [g, _] = o(!1), v = i(), y = a(null), b = n(() => {
+		y.current !== null && (clearTimeout(y.current), y.current = null);
+	}, []), x = n(() => {
+		b(), y.current = setTimeout(() => _(!0), d);
+	}, [b, d]), S = n(() => {
+		b(), y.current = setTimeout(() => _(!1), f);
+	}, [b, f]);
+	return r(() => b, [b]), /* @__PURE__ */ c("span", {
+		className: t.root,
+		onMouseEnter: x,
+		onMouseLeave: S,
+		onFocus: x,
+		onBlur: S,
+		children: [/* @__PURE__ */ s("span", {
+			"aria-describedby": g ? v : void 0,
+			className: t.trigger,
+			children: l
+		}), g && /* @__PURE__ */ s("div", {
+			id: v,
+			role: "dialog",
+			className: e(t.card, t[p], m),
+			...h,
+			children: u
+		})]
+	});
 }
-export {
-  R as HoverCard
-};
-//# sourceMappingURL=HoverCard.js.map
+//#endregion
+export { l as HoverCard };
+
+//# sourceMappingURL=HoverCard.js.map

package/dist/components/HoverCard/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n}\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    className,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    return (\n        <span\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.card, styles[placement], className)}\n                    {...rest}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"names":["HoverCard","trigger","children","openDelay","closeDelay","placement","className","rest","open","setOpen","useState","id","useId","timerRef","useRef","clearTimer","useCallback","scheduleOpen","scheduleClose","useEffect","jsxs","styles","jsx","cn"],"mappings":";;;;AA+BO,SAASA,EAAU;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACP,GAAmB;AACf,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAKC,EAAA,GACLC,IAAWC,EAA6C,IAAI,GAE5DC,IAAaC,EAAY,MAAY;AACvC,IAAIH,EAAS,YAAY,SACrB,aAAaA,EAAS,OAAO,GAC7BA,EAAS,UAAU;AAAA,EAE3B,GAAG,CAAA,CAAE,GAECI,IAAeD,EAAY,MAAY;AACzC,IAAAD,EAAA,GACAF,EAAS,UAAU,WAAW,MAAMJ,EAAQ,EAAI,GAAGN,CAAS;AAAA,EAChE,GAAG,CAACY,GAAYZ,CAAS,CAAC,GAEpBe,IAAgBF,EAAY,MAAY;AAC1C,IAAAD,EAAA,GACAF,EAAS,UAAU,WAAW,MAAMJ,EAAQ,EAAK,GAAGL,CAAU;AAAA,EAClE,GAAG,CAACW,GAAYX,CAAU,CAAC;AAE3B,SAAAe,EAAU,MAAMJ,GAAY,CAACA,CAAU,CAAC,GAGpC,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,cAAcJ;AAAA,MACd,cAAcC;AAAA,MACd,SAASD;AAAA,MACT,QAAQC;AAAA,MAER,UAAA;AAAA,QAAA,gBAAAI,EAAC,QAAA,EAAK,oBAAkBd,IAAOG,IAAK,QAAW,WAAWU,EAAO,SAC5D,UAAApB,EAAA,CACL;AAAA,QACCO,KACG,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAWY,EAAGF,EAAO,MAAMA,EAAOhB,CAAS,GAAGC,CAAS;AAAA,YACtD,GAAGC;AAAA,YAEH,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"HoverCard.js","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./HoverCard.module.css\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface HoverCardProps extends HTMLAttributes<HTMLDivElement> {\n    /** Element the user hovers/focuses to reveal the card. */\n    trigger: ReactNode;\n    /** Card content shown while hovering/focusing the trigger or the card itself. */\n    children: ReactNode;\n    /** Delay in ms before opening on mouseenter/focus. Default 300. */\n    openDelay?: number;\n    /** Delay in ms before closing on mouseleave/blur. Default 150. */\n    closeDelay?: number;\n    /** Where the card is anchored relative to the trigger. Default \"bottom\". */\n    placement?: HoverCardPlacement;\n}\n\n/**\n * Content preview shown when the trigger is hovered or focused.\n *\n * - Opens after `openDelay` on `mouseenter`/`focus`.\n * - Closes after `closeDelay` on `mouseleave`/`blur`.\n * - Positioned relative to the trigger via `placement`.\n * - The card is rendered as a labelled `role=\"dialog\"` region; the trigger stays keyboard focusable.\n *\n * @param props - The hover card props.\n * @returns The trigger wrapper and the anchored card when open.\n */\nexport function HoverCard({\n    trigger,\n    children,\n    openDelay = 300,\n    closeDelay = 150,\n    placement = \"bottom\",\n    className,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const id = useId();\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const clearTimer = useCallback((): void => {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }, []);\n\n    const scheduleOpen = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }, [clearTimer, openDelay]);\n\n    const scheduleClose = useCallback((): void => {\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(false), closeDelay);\n    }, [clearTimer, closeDelay]);\n\n    useEffect(() => clearTimer, [clearTimer]);\n\n    return (\n        <span\n            className={styles.root}\n            onMouseEnter={scheduleOpen}\n            onMouseLeave={scheduleClose}\n            onFocus={scheduleOpen}\n            onBlur={scheduleClose}\n        >\n            <span aria-describedby={open ? id : undefined} className={styles.trigger}>\n                {trigger}\n            </span>\n            {open && (\n                <div\n                    id={id}\n                    role=\"dialog\"\n                    className={cn(styles.card, styles[placement], className)}\n                    {...rest}\n                >\n                    {children}\n                </div>\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;AA+BA,SAAgB,EAAU,EACtB,YACA,aACA,eAAY,KACZ,gBAAa,KACb,eAAY,UACZ,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,IAAK,EAAM,GACX,IAAW,EAA6C,IAAI,GAE5D,IAAa,QAAwB;EACvC,AAAI,EAAS,YAAY,SACrB,aAAa,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B,GAAG,CAAC,CAAC,GAEC,IAAe,QAAwB;EAEzC,AADA,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAI,GAAG,CAAS;CAChE,GAAG,CAAC,GAAY,CAAS,CAAC,GAEpB,IAAgB,QAAwB;EAE1C,AADA,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAK,GAAG,CAAU;CAClE,GAAG,CAAC,GAAY,CAAU,CAAC;CAI3B,OAFA,QAAgB,GAAY,CAAC,CAAU,CAAC,GAGpC,kBAAC,QAAD;EACI,WAAW,EAAO;EAClB,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;YALZ,CAOI,kBAAC,QAAD;GAAM,oBAAkB,IAAO,IAAK,KAAA;GAAW,WAAW,EAAO;aAC5D;EACC,CAAA,GACL,KACG,kBAAC,OAAD;GACQ;GACJ,MAAK;GACL,WAAW,EAAG,EAAO,MAAM,EAAO,IAAY,CAAS;GACvD,GAAI;GAEH;EACA,CAAA,CAEP;;AAEd"}

package/dist/components/HoverCard/HoverCard.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_root_2KoZA`,t=`tempest_trigger_OXsnr`,n=`tempest_card_CoGx4`,r=`tempest_tempest-hover-card-in_jD85J`,i=`tempest_top_AVcQ0`,a=`tempest_bottom_2rLAA`,o=`tempest_left_tqGPt`,s=`tempest_right_9Fe6S`,c={root:e,trigger:t,card:n,tempestHoverCardIn:r,top:i,bottom:a,left:o,right:s};exports.bottom=a,exports.card=n,exports.default=c,exports.left=o,exports.right=s,exports.root=e,exports.tempestHoverCardIn=r,exports.top=i,exports.trigger=t;
+//# sourceMappingURL=HoverCard.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.module.cjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.trigger {\n    display: inline-flex;\n}\n\n.card {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-hover-card-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.card:focus {\n    outline: none;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-hover-card-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .card {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/HoverCard/HoverCard.module.js

@@ -0,0 +1,15 @@
+//#region src/components/HoverCard/HoverCard.module.css
+var e = "tempest_root_2KoZA", t = "tempest_trigger_OXsnr", n = "tempest_card_CoGx4", r = "tempest_tempest-hover-card-in_jD85J", i = "tempest_top_AVcQ0", a = "tempest_bottom_2rLAA", o = "tempest_left_tqGPt", s = "tempest_right_9Fe6S", c = {
+	root: e,
+	trigger: t,
+	card: n,
+	tempestHoverCardIn: r,
+	top: i,
+	bottom: a,
+	left: o,
+	right: s
+};
+//#endregion
+export { a as bottom, n as card, c as default, o as left, s as right, e as root, r as tempestHoverCardIn, i as top, t as trigger };
+
+//# sourceMappingURL=HoverCard.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.module.js","names":[],"sources":["../../../src/components/HoverCard/HoverCard.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.trigger {\n    display: inline-flex;\n}\n\n.card {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-hover-card-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.card:focus {\n    outline: none;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-hover-card-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .card {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Image/Image.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),t=require("react"),S=require("../../utils/cn.cjs"),q=require("./Image.module.css.cjs");function f({src:s,fallback:e,alt:u,lazy:n=!0,className:c,onError:a,...o}){const[r,i]=t.useState(s),[g,l]=t.useState(!1);return d.jsx("img",{src:r,alt:u,loading:n?"lazy":"eager",className:S.cn(q.default.image,c),onError:m=>{e&&!g&&r!==e&&(l(!0),i(e)),a?.(m)},...o})}exports.Image=f;
-//# sourceMappingURL=Image.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./Image.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({src:i,fallback:a,alt:o,lazy:s=!0,className:c,onError:l,...u}){let[d,f]=(0,n.useState)(i),[p,m]=(0,n.useState)(!1);return(0,r.jsx)(`img`,{src:d,alt:o,loading:s?`lazy`:`eager`,className:e.cn(t.default.image,c),onError:e=>{a&&!p&&d!==a&&(m(!0),f(a)),l?.(e)},...u})}exports.Image=i;
+//# sourceMappingURL=Image.cjs.map

package/dist/components/Image/Image.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Image.module.css\";\n\nexport interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\"> {\n    /** Primary image source URL. */\n    src: string;\n    /** Fallback source swapped in once if the primary `src` fails to load. */\n    fallback?: string;\n    /** Alternative text describing the image (required for accessibility). */\n    alt: string;\n    /** When true (default) uses native lazy loading; otherwise loads eagerly. */\n    lazy?: boolean;\n}\n\n/**\n * Renders an `<img>` with native lazy loading and a one-shot fallback.\n *\n * On the first load error the source is swapped to `fallback` (when provided),\n * guarded so a failing fallback cannot loop the `onError` handler.\n *\n * @param src - The primary image source URL.\n * @param fallback - Optional source used once when `src` fails to load.\n * @param alt - Accessible alternative text for the image.\n * @param lazy - Whether to use `loading=\"lazy\"` (default `true`).\n * @returns The rendered image element.\n */\nexport function Image({\n    src,\n    fallback,\n    alt,\n    lazy = true,\n    className,\n    onError,\n    ...props\n}: ImageProps) {\n    const [currentSrc, setCurrentSrc] = useState<string>(src);\n    const [usedFallback, setUsedFallback] = useState<boolean>(false);\n\n    return (\n        <img\n            src={currentSrc}\n            alt={alt}\n            loading={lazy ? \"lazy\" : \"eager\"}\n            className={cn(styles.image, className)}\n            onError={(event) => {\n                if (fallback && !usedFallback && currentSrc !== fallback) {\n                    setUsedFallback(true);\n                    setCurrentSrc(fallback);\n                }\n                onError?.(event);\n            }}\n            {...props}\n        />\n    );\n}\n"],"names":["Image","src","fallback","alt","lazy","className","onError","props","currentSrc","setCurrentSrc","useState","usedFallback","setUsedFallback","jsx","cn","styles","event"],"mappings":"4MA4BO,SAASA,EAAM,CAClB,IAAAC,EACA,SAAAC,EACA,IAAAC,EACA,KAAAC,EAAO,GACP,UAAAC,EACA,QAAAC,EACA,GAAGC,CACP,EAAe,CACX,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAiBT,CAAG,EAClD,CAACU,EAAcC,CAAe,EAAIF,EAAAA,SAAkB,EAAK,EAE/D,OACIG,EAAAA,IAAC,MAAA,CACG,IAAKL,EACL,IAAAL,EACA,QAASC,EAAO,OAAS,QACzB,UAAWU,EAAAA,GAAGC,UAAO,MAAOV,CAAS,EACrC,QAAUW,GAAU,CACZd,GAAY,CAACS,GAAgBH,IAAeN,IAC5CU,EAAgB,EAAI,EACpBH,EAAcP,CAAQ,GAE1BI,IAAUU,CAAK,CACnB,EACC,GAAGT,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"Image.cjs","names":[],"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Image.module.css\";\n\nexport interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\"> {\n    /** Primary image source URL. */\n    src: string;\n    /** Fallback source swapped in once if the primary `src` fails to load. */\n    fallback?: string;\n    /** Alternative text describing the image (required for accessibility). */\n    alt: string;\n    /** When true (default) uses native lazy loading; otherwise loads eagerly. */\n    lazy?: boolean;\n}\n\n/**\n * Renders an `<img>` with native lazy loading and a one-shot fallback.\n *\n * On the first load error the source is swapped to `fallback` (when provided),\n * guarded so a failing fallback cannot loop the `onError` handler.\n *\n * @param src - The primary image source URL.\n * @param fallback - Optional source used once when `src` fails to load.\n * @param alt - Accessible alternative text for the image.\n * @param lazy - Whether to use `loading=\"lazy\"` (default `true`).\n * @returns The rendered image element.\n */\nexport function Image({\n    src,\n    fallback,\n    alt,\n    lazy = true,\n    className,\n    onError,\n    ...props\n}: ImageProps) {\n    const [currentSrc, setCurrentSrc] = useState<string>(src);\n    const [usedFallback, setUsedFallback] = useState<boolean>(false);\n\n    return (\n        <img\n            src={currentSrc}\n            alt={alt}\n            loading={lazy ? \"lazy\" : \"eager\"}\n            className={cn(styles.image, className)}\n            onError={(event) => {\n                if (fallback && !usedFallback && currentSrc !== fallback) {\n                    setUsedFallback(true);\n                    setCurrentSrc(fallback);\n                }\n                onError?.(event);\n            }}\n            {...props}\n        />\n    );\n}\n"],"mappings":"4HA4BA,SAAgB,EAAM,CAClB,MACA,WACA,MACA,OAAO,GACP,YACA,UACA,GAAG,GACQ,CACX,GAAM,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAAkC,CAAG,EAClD,CAAC,EAAc,IAAA,EAAA,EAAA,SAAA,CAAqC,EAAK,EAE/D,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACA,MACL,QAAS,EAAO,OAAS,QACzB,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EACrC,QAAU,GAAU,CACZ,GAAY,CAAC,GAAgB,IAAe,IAC5C,EAAgB,EAAI,EACpB,EAAc,CAAQ,GAE1B,IAAU,CAAK,CACnB,EACA,GAAI,CACP,CAAA,CAET"}

package/dist/components/Image/Image.js

@@ -1,32 +1,22 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useState as t } from "react";
-import { cn as p } from "../../utils/cn.js";
-import d from "./Image.module.css.js";
-function j({
-  src: o,
-  fallback: r,
-  alt: s,
-  lazy: m = !0,
-  className: n,
-  onError: a,
-  ...c
-}) {
-  const [e, i] = t(o), [u, f] = t(!1);
-  return /* @__PURE__ */ l(
-    "img",
-    {
-      src: e,
-      alt: s,
-      loading: m ? "lazy" : "eager",
-      className: p(d.image, n),
-      onError: (g) => {
-        r && !u && e !== r && (f(!0), i(r)), a?.(g);
-      },
-      ...c
-    }
-  );
+import { cn as e } from "../../utils/cn.js";
+import t from "./Image.module.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Image/Image.tsx
+function i({ src: i, fallback: a, alt: o, lazy: s = !0, className: c, onError: l, ...u }) {
+	let [d, f] = n(i), [p, m] = n(!1);
+	return /* @__PURE__ */ r("img", {
+		src: d,
+		alt: o,
+		loading: s ? "lazy" : "eager",
+		className: e(t.image, c),
+		onError: (e) => {
+			a && !p && d !== a && (m(!0), f(a)), l?.(e);
+		},
+		...u
+	});
 }
-export {
-  j as Image
-};
-//# sourceMappingURL=Image.js.map
+//#endregion
+export { i as Image };
+
+//# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Image.module.css\";\n\nexport interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\"> {\n    /** Primary image source URL. */\n    src: string;\n    /** Fallback source swapped in once if the primary `src` fails to load. */\n    fallback?: string;\n    /** Alternative text describing the image (required for accessibility). */\n    alt: string;\n    /** When true (default) uses native lazy loading; otherwise loads eagerly. */\n    lazy?: boolean;\n}\n\n/**\n * Renders an `<img>` with native lazy loading and a one-shot fallback.\n *\n * On the first load error the source is swapped to `fallback` (when provided),\n * guarded so a failing fallback cannot loop the `onError` handler.\n *\n * @param src - The primary image source URL.\n * @param fallback - Optional source used once when `src` fails to load.\n * @param alt - Accessible alternative text for the image.\n * @param lazy - Whether to use `loading=\"lazy\"` (default `true`).\n * @returns The rendered image element.\n */\nexport function Image({\n    src,\n    fallback,\n    alt,\n    lazy = true,\n    className,\n    onError,\n    ...props\n}: ImageProps) {\n    const [currentSrc, setCurrentSrc] = useState<string>(src);\n    const [usedFallback, setUsedFallback] = useState<boolean>(false);\n\n    return (\n        <img\n            src={currentSrc}\n            alt={alt}\n            loading={lazy ? \"lazy\" : \"eager\"}\n            className={cn(styles.image, className)}\n            onError={(event) => {\n                if (fallback && !usedFallback && currentSrc !== fallback) {\n                    setUsedFallback(true);\n                    setCurrentSrc(fallback);\n                }\n                onError?.(event);\n            }}\n            {...props}\n        />\n    );\n}\n"],"names":["Image","src","fallback","alt","lazy","className","onError","props","currentSrc","setCurrentSrc","useState","usedFallback","setUsedFallback","jsx","cn","styles","event"],"mappings":";;;;AA4BO,SAASA,EAAM;AAAA,EAClB,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACP,GAAe;AACX,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAiBT,CAAG,GAClD,CAACU,GAAcC,CAAe,IAAIF,EAAkB,EAAK;AAE/D,SACI,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,KAAAL;AAAA,MACA,SAASC,IAAO,SAAS;AAAA,MACzB,WAAWU,EAAGC,EAAO,OAAOV,CAAS;AAAA,MACrC,SAAS,CAACW,MAAU;AAChB,QAAId,KAAY,CAACS,KAAgBH,MAAeN,MAC5CU,EAAgB,EAAI,GACpBH,EAAcP,CAAQ,IAE1BI,IAAUU,CAAK;AAAA,MACnB;AAAA,MACC,GAAGT;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { ImgHTMLAttributes } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Image.module.css\";\n\nexport interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\"> {\n    /** Primary image source URL. */\n    src: string;\n    /** Fallback source swapped in once if the primary `src` fails to load. */\n    fallback?: string;\n    /** Alternative text describing the image (required for accessibility). */\n    alt: string;\n    /** When true (default) uses native lazy loading; otherwise loads eagerly. */\n    lazy?: boolean;\n}\n\n/**\n * Renders an `<img>` with native lazy loading and a one-shot fallback.\n *\n * On the first load error the source is swapped to `fallback` (when provided),\n * guarded so a failing fallback cannot loop the `onError` handler.\n *\n * @param src - The primary image source URL.\n * @param fallback - Optional source used once when `src` fails to load.\n * @param alt - Accessible alternative text for the image.\n * @param lazy - Whether to use `loading=\"lazy\"` (default `true`).\n * @returns The rendered image element.\n */\nexport function Image({\n    src,\n    fallback,\n    alt,\n    lazy = true,\n    className,\n    onError,\n    ...props\n}: ImageProps) {\n    const [currentSrc, setCurrentSrc] = useState<string>(src);\n    const [usedFallback, setUsedFallback] = useState<boolean>(false);\n\n    return (\n        <img\n            src={currentSrc}\n            alt={alt}\n            loading={lazy ? \"lazy\" : \"eager\"}\n            className={cn(styles.image, className)}\n            onError={(event) => {\n                if (fallback && !usedFallback && currentSrc !== fallback) {\n                    setUsedFallback(true);\n                    setCurrentSrc(fallback);\n                }\n                onError?.(event);\n            }}\n            {...props}\n        />\n    );\n}\n"],"mappings":";;;;;AA4BA,SAAgB,EAAM,EAClB,QACA,aACA,QACA,UAAO,IACP,cACA,YACA,GAAG,KACQ;CACX,IAAM,CAAC,GAAY,KAAiB,EAAiB,CAAG,GAClD,CAAC,GAAc,KAAmB,EAAkB,EAAK;CAE/D,OACI,kBAAC,OAAD;EACI,KAAK;EACA;EACL,SAAS,IAAO,SAAS;EACzB,WAAW,EAAG,EAAO,OAAO,CAAS;EACrC,UAAU,MAAU;GAKhB,AAJI,KAAY,CAAC,KAAgB,MAAe,MAC5C,EAAgB,EAAI,GACpB,EAAc,CAAQ,IAE1B,IAAU,CAAK;EACnB;EACA,GAAI;CACP,CAAA;AAET"}

package/dist/components/Image/Image.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_image_Zq9Zs`,t={image:e};exports.default=t,exports.image=e;
+//# sourceMappingURL=Image.module.cjs.map