tempest-react-sdk 0.78.0 → 0.80.0

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

@@ -1 +1 @@
-{"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 * The header is deliberately not a `SectionHeader`: a field group sits one step\n * below a page section, and its title is `text-lg` / semibold / `leading-snug`\n * with `space-3` below, against `text-2xl` / bold / `leading-tight` with\n * `space-5` for `SectionHeader`. Sharing the component would either grow every\n * form group to page-section size or add a size switch to `SectionHeader` that\n * only this caller uses.\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,EAAO,EAAA,WAAA,CAAuC,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,EA0BD,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,EAArE,SAAA,EACM,GAAS,KACP,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,cAA1B,SAAA,CACK,IAAS,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,aAAe,SAAA,CAAU,CAAA,EACxD,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,mBAAqB,SAAA,CAAe,CAAA,CACrE,CAEZ,CAAA,GAAA,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"}
+{"version":3,"file":"Form.cjs","names":["forwardRef","cn","styles","require_cn","require_Form_module","react","react_jsx_runtime","resolveGap","gap","fallback","resolveColumns","columns","Form","props","finalStyle","layout","style","className","FormSection","bodyStyle","title","description","FormRow","FormActions","align"],"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 * The header is deliberately not a `SectionHeader`: a field group sits one step\n * below a page section, and its title is `text-lg` / semibold / `leading-snug`\n * with `space-3` below, against `text-2xl` / bold / `leading-tight` with\n * `space-5` for `SectionHeader`. Sharing the component would either grow every\n * form group to page-section size or add a size switch to `SectionHeader` that\n * only this caller uses.\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":"A,2HAiBA,SAASO,EAAW,EAAkC,EAA0B,CAE5E,OADIC,IAAQ,IAAA,GAAkB,GAAGC,EAAW,EAAE,IACvC,OAAOD,GAAQ,SAAW,GAAGA,EAAM,EAAE,IAAMA,CACtD,CAEA,SAASE,EAAe,EAA8C,CAElE,OADIC,IAAY,IAAA,GAAkB,4BAC3B,OAAOA,GAAY,SAAW,UAAUA,EAAQ,mBAAqBA,CAChF,CAkBA,IAAaC,GAAA,EAAOZ,EAAAA,WAAAA,CAAuC,SACvD,CAAE,SAAS,QAAS,UAAS,MAAK,YAAW,QAAO,WAAU,GAAGa,GACjE,EACF,CACE,IAAMC,EAA4B,CAC9B,IAAKP,EAAWC,EAAK,CAAC,EACtB,GAAIO,IAAW,OAAS,CAAE,oBAAqBL,EAAeC,CAAO,CAAE,EAAI,KAC3E,GAAGK,CACP,EACA,OACI,EAAAV,EAAA,IAAA,CAAC,OAAD,CACS,MACL,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,KAAMA,EAAAA,QAAOa,GAASE,CAAS,EACpD,MAAOH,EACP,GAAID,EAEH,UACC,CAAA,CAEd,CAAC,EA0BD,SAAgBK,EAAY,CACxB,QACA,cACA,SAAS,QACT,UACA,MACA,YACA,QACA,WACA,GAAGL,GACc,CACjB,IAAMM,EAA2B,CAC7B,IAAKZ,EAAWC,EAAK,CAAC,EACtB,GAAIO,IAAW,OAAS,CAAE,oBAAqBL,EAAeC,CAAO,CAAE,EAAI,IAC/E,EACA,OACI,EAAAL,EAAA,KAAA,CAAC,UAAD,CAAS,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,QAASe,CAAS,EAAU,QAAO,GAAIJ,EAArE,SAAA,EACMO,GAASC,KACP,EAAAf,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAWJ,EAAAA,QAAO,cAA1B,SAAA,CACKkB,IAAS,EAAAd,EAAA,IAAA,CAAC,KAAD,CAAI,UAAWJ,EAAAA,QAAO,aAAe,SAAAkB,CAAU,CAAA,EACxDC,IAAe,EAAAf,EAAA,IAAA,CAAC,IAAD,CAAG,UAAWJ,EAAAA,QAAO,mBAAqB,SAAAmB,CAAe,CAAA,CACrE,CAEZ,CAAA,GAAA,EAAAf,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,YAAaA,EAAAA,QAAOa,EAAO,EAAG,MAAOI,EAC1D,UACA,CAAA,CACA,C,EAEjB,CAqBA,SAAgBG,EAAQ,CAAE,MAAK,YAAW,QAAO,WAAU,GAAGT,GAAuB,CACjF,IAAMC,EAA4B,CAAE,IAAKP,EAAWC,EAAK,CAAC,EAAG,GAAGQ,CAAM,EACtE,OACI,EAAAV,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,IAAKe,CAAS,EAAG,MAAOH,EAAY,GAAID,EAC7D,UACA,CAAA,CAEb,CAkBA,SAAgBU,EAAY,CACxB,QAAQ,MACR,MACA,YACA,QACA,WACA,GAAGV,GACc,CACjB,IAAMC,EAA4B,CAAE,IAAKP,EAAWC,EAAK,CAAC,EAAG,GAAGQ,CAAM,EACtE,OACI,EAAAV,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,QAASA,EAAAA,QAAOsB,GAAQP,CAAS,EAAG,MAAOH,EAAY,GAAID,EAChF,UACA,CAAA,CAEb,C"}

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

@@ -1 +1 @@
-{"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 * The header is deliberately not a `SectionHeader`: a field group sits one step\n * below a page section, and its title is `text-lg` / semibold / `leading-snug`\n * with `space-3` below, against `text-2xl` / bold / `leading-tight` with\n * `space-5` for `SectionHeader`. Sharing the component would either grow every\n * form group to page-section size or add a size switch to `SectionHeader` that\n * only this caller uses.\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;AA0BD,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;EAArE,UAAA,EACM,KAAS,MACP,kBAAC,UAAD;GAAQ,WAAW,EAAO;GAA1B,UAAA,CACK,KAAS,kBAAC,MAAD;IAAI,WAAW,EAAO;IAAe,UAAA;GAAU,CAAA,GACxD,KAAe,kBAAC,KAAD;IAAG,WAAW,EAAO;IAAqB,UAAA;GAAe,CAAA,CACrE;EAEZ,CAAA,GAAA,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"}
+{"version":3,"file":"Form.js","names":["styles","Form_module_default","resolveGap","gap","fallback","resolveColumns","columns","Form","forwardRef","props","finalStyle","layout","style","cn","className","FormSection","bodyStyle","title","description","FormRow","FormActions","align"],"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 * The header is deliberately not a `SectionHeader`: a field group sits one step\n * below a page section, and its title is `text-lg` / semibold / `leading-snug`\n * with `space-3` below, against `text-2xl` / bold / `leading-tight` with\n * `space-5` for `SectionHeader`. Sharing the component would either grow every\n * form group to page-section size or add a size switch to `SectionHeader` that\n * only this caller uses.\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,SAASE,EAAW,GAAkC,GAA0B;CAE5E,OADIC,MAAQ,KAAA,IAAkB,GAAGC,IAAW,EAAE,MACvC,OAAOD,KAAQ,WAAW,GAAGA,IAAM,EAAE,MAAMA;AACtD;AAEA,SAASE,EAAe,GAA8C;CAElE,OADIC,MAAY,KAAA,IAAkB,8BAC3B,OAAOA,KAAY,WAAW,UAAUA,EAAQ,qBAAqBA;AAChF;AAkBA,IAAaC,IAAOC,EAAuC,SACvD,EAAE,YAAS,SAAS,YAAS,QAAK,cAAW,UAAO,aAAU,GAAGC,KACjE,GACF;CACE,IAAMC,IAA4B;EAC9B,KAAKR,EAAWC,GAAK,CAAC;EACtB,GAAIQ,MAAW,SAAS,EAAE,qBAAqBN,EAAeC,CAAO,EAAE,IAAI;EAC3E,GAAGM;CACP;CACA,OACI,kBAAC,QAAD;EACS;EACL,WAAWC,EAAGb,EAAO,MAAMA,EAAOW,IAASG,CAAS;EACpD,OAAOJ;EACP,GAAID;EAEH;CACC,CAAA;AAEd,CAAC;AA0BD,SAAgBM,EAAY,EACxB,UACA,gBACA,YAAS,SACT,YACA,QACA,cACA,UACA,aACA,GAAGN,KACc;CACjB,IAAMO,IAA2B;EAC7B,KAAKd,EAAWC,GAAK,CAAC;EACtB,GAAIQ,MAAW,SAAS,EAAE,qBAAqBN,EAAeC,CAAO,EAAE,IAAI;CAC/E;CACA,OACI,kBAAC,WAAD;EAAS,WAAWO,EAAGb,EAAO,SAASc,CAAS;EAAU;EAAO,GAAIL;EAArE,UAAA,EACMQ,KAASC,MACP,kBAAC,UAAD;GAAQ,WAAWlB,EAAO;GAA1B,UAAA,CACKiB,KAAS,kBAAC,MAAD;IAAI,WAAWjB,EAAO;IAAe,UAAAiB;GAAU,CAAA,GACxDC,KAAe,kBAAC,KAAD;IAAG,WAAWlB,EAAO;IAAqB,UAAAkB;GAAe,CAAA,CACrE;EAEZ,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAWL,EAAGb,EAAO,aAAaA,EAAOW,EAAO;GAAG,OAAOK;GAC1D;EACA,CAAA,CACA;;AAEjB;AAqBA,SAAgBG,EAAQ,EAAE,QAAK,cAAW,UAAO,aAAU,GAAGV,KAAuB;CACjF,IAAMC,IAA4B;EAAE,KAAKR,EAAWC,GAAK,CAAC;EAAG,GAAGS;CAAM;CACtE,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGb,EAAO,KAAKc,CAAS;EAAG,OAAOJ;EAAY,GAAID;EAC7D;CACA,CAAA;AAEb;AAkBA,SAAgBW,EAAY,EACxB,WAAQ,OACR,QACA,cACA,UACA,aACA,GAAGX,KACc;CACjB,IAAMC,IAA4B;EAAE,KAAKR,EAAWC,GAAK,CAAC;EAAG,GAAGS;CAAM;CACtE,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGb,EAAO,SAASA,EAAOqB,IAAQP,CAAS;EAAG,OAAOJ;EAAY,GAAID;EAChF;CACA,CAAA;AAEb"}

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

@@ -1 +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":";"}
+{"version":3,"file":"Form.module.cjs","names":["form","stack","inline","grid","section","sectionHeader","sectionTitle","sectionDescription","sectionBody","row","actions","start","center","end","between","Form_module_default"],"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.map

@@ -1 +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":";"}
+{"version":3,"file":"Form.module.js","names":["form","stack","inline","grid","section","sectionHeader","sectionTitle","sectionDescription","sectionBody","row","actions","start","center","end","between","Form_module_default"],"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.map

@@ -1 +1 @@
-{"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 { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\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     * Render the card in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the card — a\n     * user handle in the last row of a `DataTable` showed 17% of it (measured in\n     * Chrome at 1440 px). In a portal it escapes the clip and flips to the\n     * opposite side at the viewport edge.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and card, in px — the in-flow CSS uses the same 8 px. */\nconst CARD_OFFSET = 8;\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`, in a portal by default.\n * - Moving the pointer from the trigger into the card keeps it open: React\n *   dispatches `mouseenter`/`mouseleave` along the component tree, and the\n *   portalled card is still inside the trigger's wrapper there.\n * - A link or button in the card is the next `Tab` stop after the trigger, as it\n *   was in flow.\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    portal = true,\n    className,\n    style,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [cardNode, setCardNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: cardNode,\n        side: placement,\n        align: \"center\",\n        offset: CARD_OFFSET,\n        enabled: portal && open,\n    });\n    usePortalTabOrder({ enabled: portal && open, anchor: rootNode, panel: cardNode });\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    const card = (\n        <div\n            ref={setCardNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.card, styles[placement], portal && styles.portalled, className)}\n            style={{ ...style, ...floatingStyle }}\n            {...rest}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span\n            ref={setRootNode}\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 && (portal ? <Portal>{card}</Portal> : card)}\n        </span>\n    );\n}\n"],"mappings":"mPAiCA,IAAM,EAAc,EAkBpB,SAAgB,EAAU,CACtB,UACA,WACA,YAAY,IACZ,aAAa,IACb,YAAY,SACZ,SAAS,GACT,YACA,QACA,GAAG,GACY,CACf,GAAM,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAS,EAAK,EAChC,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAiC,IAAI,EAC/D,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAgC,IAAI,EAC9D,EAAgB,EAAA,kBAAkB,CACpC,OAAQ,EACR,SAAU,EACV,KAAM,EACN,MAAO,SACP,OAAQ,EACR,QAAS,GAAU,CACvB,CAAC,EACD,EAAA,kBAAkB,CAAE,QAAS,GAAU,EAAM,OAAQ,EAAU,MAAO,CAAS,CAAC,EAChF,IAAM,GAAA,EAAK,EAAA,MAAA,CAAM,EACX,GAAA,EAAW,EAAA,OAAA,CAA6C,IAAI,EAE5D,GAAA,EAAa,EAAA,YAAA,KAAwB,CACnC,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,EAAG,CAAC,CAAC,EAEC,GAAA,EAAe,EAAA,YAAA,KAAwB,CACzC,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,CAChE,EAAG,CAAC,EAAY,CAAS,CAAC,EAEpB,GAAA,EAAgB,EAAA,YAAA,KAAwB,CAC1C,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAK,EAAG,CAAU,CAClE,EAAG,CAAC,EAAY,CAAU,CAAC,GAE3B,EAAA,EAAA,UAAA,KAAgB,EAAY,CAAC,CAAU,CAAC,EAExC,IAAM,GACF,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACD,KACJ,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,EAAA,QAAO,GAAY,GAAU,EAAA,QAAO,UAAW,CAAS,EACnF,MAAO,CAAE,GAAG,EAAO,GAAG,CAAc,EACpC,GAAI,EAEH,UACA,CAAA,EAGT,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CACI,IAAK,EACL,UAAW,EAAA,QAAO,KAClB,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EANZ,SAAA,EAQI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,mBAAkB,EAAO,EAAK,IAAA,GAAW,UAAW,EAAA,QAAO,QAC5D,SAAA,CACC,CAAA,EACL,IAAS,GAAS,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAA,SAAS,CAAa,CAAA,EAAI,EAC3C,GAEd"}
+{"version":3,"file":"HoverCard.cjs","names":["useState","useAnchorPosition","useId","useRef","useCallback","cn","styles","Portal","require_cn","require_Portal","require_anchor_position","require_tab_bridge","require_HoverCard_module","react","react_jsx_runtime","CARD_OFFSET","HoverCard","rest","open","setOpen","rootNode","setRootNode","cardNode","setCardNode","floatingStyle","placement","portal","id","timerRef","clearTimer","scheduleOpen","openDelay","scheduleClose","closeDelay","card","className","style","trigger"],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\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     * Render the card in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the card — a\n     * user handle in the last row of a `DataTable` showed 17% of it (measured in\n     * Chrome at 1440 px). In a portal it escapes the clip and flips to the\n     * opposite side at the viewport edge.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and card, in px — the in-flow CSS uses the same 8 px. */\nconst CARD_OFFSET = 8;\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`, in a portal by default.\n * - Moving the pointer from the trigger into the card keeps it open: React\n *   dispatches `mouseenter`/`mouseleave` along the component tree, and the\n *   portalled card is still inside the trigger's wrapper there.\n * - A link or button in the card is the next `Tab` stop after the trigger, as it\n *   was in flow.\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    portal = true,\n    className,\n    style,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [cardNode, setCardNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: cardNode,\n        side: placement,\n        align: \"center\",\n        offset: CARD_OFFSET,\n        enabled: portal && open,\n    });\n    usePortalTabOrder({ enabled: portal && open, anchor: rootNode, panel: cardNode });\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    const card = (\n        <div\n            ref={setCardNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.card, styles[placement], portal && styles.portalled, className)}\n            style={{ ...style, ...floatingStyle }}\n            {...rest}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span\n            ref={setRootNode}\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 && (portal ? <Portal>{card}</Portal> : card)}\n        </span>\n    );\n}\n"],"mappings":"A,mPAiCA,IAAMe,EAAc,EAkBpB,SAAgBC,EAAU,CACtB,UACA,WACA,YAAY,IACZ,aAAa,IACb,YAAY,SACZ,SAAS,GACT,YACA,QACA,GAAGC,GACY,CACf,GAAM,CAACC,EAAMC,IAAA,EAAWnB,EAAAA,SAAAA,CAAS,EAAK,EAChC,CAACoB,EAAUC,IAAA,EAAerB,EAAAA,SAAAA,CAAiC,IAAI,EAC/D,CAACsB,EAAUC,IAAA,EAAevB,EAAAA,SAAAA,CAAgC,IAAI,EAC9DwB,EAAgBvB,EAAAA,kBAAkB,CACpC,OAAQmB,EACR,SAAUE,EACV,KAAMG,EACN,MAAO,SACP,OAAQV,EACR,QAASW,GAAUR,CACvB,CAAC,EACDP,EAAA,kBAAkB,CAAE,QAASe,GAAUR,EAAM,OAAQE,EAAU,MAAOE,CAAS,CAAC,EAChF,IAAMK,GAAA,EAAKzB,EAAAA,MAAAA,CAAM,EACX0B,GAAA,EAAWzB,EAAAA,OAAAA,CAA6C,IAAI,EAE5D0B,GAAA,EAAazB,EAAAA,YAAAA,KAAwB,CACnCwB,EAAS,UAAY,OACrB,aAAaA,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,EAAG,CAAC,CAAC,EAECE,GAAA,EAAe1B,EAAAA,YAAAA,KAAwB,CACzCyB,EAAW,EACX,EAAS,QAAU,eAAiBV,EAAQ,EAAI,EAAGY,CAAS,CAChE,EAAG,CAACF,EAAYE,CAAS,CAAC,EAEpBC,GAAA,EAAgB5B,EAAAA,YAAAA,KAAwB,CAC1CyB,EAAW,EACX,EAAS,QAAU,eAAiBV,EAAQ,EAAK,EAAGc,CAAU,CAClE,EAAG,CAACJ,EAAYI,CAAU,CAAC,GAE3B,EAAApB,EAAA,UAAA,KAAgBgB,EAAY,CAACA,CAAU,CAAC,EAExC,IAAMK,GACF,EAAApB,EAAA,IAAA,CAAC,MAAD,CACI,IAAKS,EACD,KACJ,KAAK,SACL,UAAWlB,EAAAA,GAAGC,EAAAA,QAAO,KAAMA,EAAAA,QAAOmB,GAAYC,GAAUpB,EAAAA,QAAO,UAAW6B,CAAS,EACnF,MAAO,CAAE,GAAGC,EAAO,GAAGZ,CAAc,EACpC,GAAIP,EAEH,UACA,CAAA,EAGT,OACI,EAAAH,EAAA,KAAA,CAAC,OAAD,CACI,IAAKO,EACL,UAAWf,EAAAA,QAAO,KAClB,aAAcwB,EACd,aAAcE,EACd,QAASF,EACT,OAAQE,EANZ,SAAA,EAQI,EAAAlB,EAAA,IAAA,CAAC,OAAD,CAAM,mBAAkBI,EAAOS,EAAK,IAAA,GAAW,UAAWrB,EAAAA,QAAO,QAC5D,SAAA+B,CACC,CAAA,EACLnB,IAASQ,GAAS,EAAAZ,EAAA,IAAA,CAACP,EAAAA,OAAD,CAAA,SAAS2B,CAAa,CAAA,EAAIA,EAC3C,C,EAEd,C"}

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

@@ -1 +1 @@
-{"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 { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\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     * Render the card in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the card — a\n     * user handle in the last row of a `DataTable` showed 17% of it (measured in\n     * Chrome at 1440 px). In a portal it escapes the clip and flips to the\n     * opposite side at the viewport edge.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and card, in px — the in-flow CSS uses the same 8 px. */\nconst CARD_OFFSET = 8;\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`, in a portal by default.\n * - Moving the pointer from the trigger into the card keeps it open: React\n *   dispatches `mouseenter`/`mouseleave` along the component tree, and the\n *   portalled card is still inside the trigger's wrapper there.\n * - A link or button in the card is the next `Tab` stop after the trigger, as it\n *   was in flow.\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    portal = true,\n    className,\n    style,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [cardNode, setCardNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: cardNode,\n        side: placement,\n        align: \"center\",\n        offset: CARD_OFFSET,\n        enabled: portal && open,\n    });\n    usePortalTabOrder({ enabled: portal && open, anchor: rootNode, panel: cardNode });\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    const card = (\n        <div\n            ref={setCardNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.card, styles[placement], portal && styles.portalled, className)}\n            style={{ ...style, ...floatingStyle }}\n            {...rest}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span\n            ref={setRootNode}\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 && (portal ? <Portal>{card}</Portal> : card)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAiCA,IAAM,IAAc;AAkBpB,SAAgB,EAAU,EACtB,YACA,aACA,eAAY,KACZ,gBAAa,KACb,eAAY,UACZ,YAAS,IACT,cACA,UACA,GAAG,KACY;CACf,IAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAU,KAAe,EAAiC,IAAI,GAC/D,CAAC,GAAU,KAAe,EAAgC,IAAI,GAC9D,IAAgB,EAAkB;EACpC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,KAAU;CACvB,CAAC;CACD,EAAkB;EAAE,SAAS,KAAU;EAAM,QAAQ;EAAU,OAAO;CAAS,CAAC;CAChF,IAAM,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;CAE3B,QAAgB,GAAY,CAAC,CAAU,CAAC;CAExC,IAAM,IACF,kBAAC,OAAD;EACI,KAAK;EACD;EACJ,MAAK;EACL,WAAW,EAAG,EAAO,MAAM,EAAO,IAAY,KAAU,EAAO,WAAW,CAAS;EACnF,OAAO;GAAE,GAAG;GAAO,GAAG;EAAc;EACpC,GAAI;EAEH;CACA,CAAA;CAGT,OACI,kBAAC,QAAD;EACI,KAAK;EACL,WAAW,EAAO;EAClB,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EANZ,UAAA,CAQI,kBAAC,QAAD;GAAM,oBAAkB,IAAO,IAAK,KAAA;GAAW,WAAW,EAAO;GAC5D,UAAA;EACC,CAAA,GACL,MAAS,IAAS,kBAAC,GAAD,EAAA,UAAS,EAAa,CAAA,IAAI,EAC3C;;AAEd"}
+{"version":3,"file":"HoverCard.js","names":["styles","HoverCard_module_default","CARD_OFFSET","HoverCard","rest","open","setOpen","useState","rootNode","setRootNode","cardNode","setCardNode","floatingStyle","useAnchorPosition","placement","portal","id","useId","timerRef","useRef","clearTimer","useCallback","scheduleOpen","openDelay","scheduleClose","closeDelay","card","cn","className","style","trigger","Portal"],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\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     * Render the card in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the card — a\n     * user handle in the last row of a `DataTable` showed 17% of it (measured in\n     * Chrome at 1440 px). In a portal it escapes the clip and flips to the\n     * opposite side at the viewport edge.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and card, in px — the in-flow CSS uses the same 8 px. */\nconst CARD_OFFSET = 8;\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`, in a portal by default.\n * - Moving the pointer from the trigger into the card keeps it open: React\n *   dispatches `mouseenter`/`mouseleave` along the component tree, and the\n *   portalled card is still inside the trigger's wrapper there.\n * - A link or button in the card is the next `Tab` stop after the trigger, as it\n *   was in flow.\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    portal = true,\n    className,\n    style,\n    ...rest\n}: HoverCardProps) {\n    const [open, setOpen] = useState(false);\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [cardNode, setCardNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: cardNode,\n        side: placement,\n        align: \"center\",\n        offset: CARD_OFFSET,\n        enabled: portal && open,\n    });\n    usePortalTabOrder({ enabled: portal && open, anchor: rootNode, panel: cardNode });\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    const card = (\n        <div\n            ref={setCardNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.card, styles[placement], portal && styles.portalled, className)}\n            style={{ ...style, ...floatingStyle }}\n            {...rest}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span\n            ref={setRootNode}\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 && (portal ? <Portal>{card}</Portal> : card)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAiCA,IAAME,IAAc;AAkBpB,SAAgBC,EAAU,EACtB,YACA,aACA,eAAY,KACZ,gBAAa,KACb,eAAY,UACZ,YAAS,IACT,cACA,UACA,GAAGC,KACY;CACf,IAAM,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChC,CAACC,GAAUC,KAAeF,EAAiC,IAAI,GAC/D,CAACG,GAAUC,KAAeJ,EAAgC,IAAI,GAC9DK,IAAgBC,EAAkB;EACpC,QAAQL;EACR,UAAUE;EACV,MAAMI;EACN,OAAO;EACP,QAAQZ;EACR,SAASa,KAAUV;CACvB,CAAC;CACD,EAAkB;EAAE,SAASU,KAAUV;EAAM,QAAQG;EAAU,OAAOE;CAAS,CAAC;CAChF,IAAMM,IAAKC,EAAM,GACXC,IAAWC,EAA6C,IAAI,GAE5DC,IAAaC,QAAwB;EACvC,AAAIH,EAAS,YAAY,SACrB,aAAaA,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B,GAAG,CAAC,CAAC,GAECI,IAAeD,QAAwB;EAEzC,AADAD,EAAW,GACX,EAAS,UAAU,iBAAiBd,EAAQ,EAAI,GAAGiB,CAAS;CAChE,GAAG,CAACH,GAAYG,CAAS,CAAC,GAEpBC,IAAgBH,QAAwB;EAE1C,AADAD,EAAW,GACX,EAAS,UAAU,iBAAiBd,EAAQ,EAAK,GAAGmB,CAAU;CAClE,GAAG,CAACL,GAAYK,CAAU,CAAC;CAE3B,QAAgBL,GAAY,CAACA,CAAU,CAAC;CAExC,IAAMM,IACF,kBAAC,OAAD;EACI,KAAKf;EACD;EACJ,MAAK;EACL,WAAWgB,EAAG3B,EAAO,MAAMA,EAAOc,IAAYC,KAAUf,EAAO,WAAW4B,CAAS;EACnF,OAAO;GAAE,GAAGC;GAAO,GAAGjB;EAAc;EACpC,GAAIR;EAEH;CACA,CAAA;CAGT,OACI,kBAAC,QAAD;EACI,KAAKK;EACL,WAAWT,EAAO;EAClB,cAAcsB;EACd,cAAcE;EACd,SAASF;EACT,QAAQE;EANZ,UAAA,CAQI,kBAAC,QAAD;GAAM,oBAAkBnB,IAAOW,IAAK,KAAA;GAAW,WAAWhB,EAAO;GAC5D,UAAA8B;EACC,CAAA,GACLzB,MAASU,IAAS,kBAACgB,GAAD,EAAA,UAASL,EAAa,CAAA,IAAIA,EAC3C;;AAEd"}

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

@@ -1 +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.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\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":";"}
+{"version":3,"file":"HoverCard.module.cjs","names":["root","trigger","card","tempestHoverCardIn","top","bottom","left","right","portalled","HoverCard_module_default"],"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.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\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.map

@@ -1 +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.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\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":";"}
+{"version":3,"file":"HoverCard.module.js","names":["root","trigger","card","tempestHoverCardIn","top","bottom","left","right","portalled","HoverCard_module_default"],"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.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\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.map

@@ -1 +1 @@
-{"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,EAAiB,EAAA,SAAA,CAAiB,CAAG,EAClD,CAAC,EAAc,IAAA,EAAmB,EAAA,SAAA,CAAkB,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"}
+{"version":3,"file":"Image.cjs","names":["useState","cn","styles","require_cn","require_Image_module","react","react_jsx_runtime","Image","props","currentSrc","setCurrentSrc","src","usedFallback","setUsedFallback","lazy","className","fallback","onError","event"],"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":"A,4HA4BA,SAAgBO,EAAM,CAClB,MACA,WACA,MACA,OAAO,GACP,YACA,UACA,GAAGC,GACQ,CACX,GAAM,CAACC,EAAYC,IAAA,EAAiBV,EAAAA,SAAAA,CAAiBW,CAAG,EAClD,CAACC,EAAcC,IAAA,EAAmBb,EAAAA,SAAAA,CAAkB,EAAK,EAE/D,OACI,EAAAM,EAAA,IAAA,CAAC,MAAD,CACI,IAAKG,EACA,MACL,QAASK,EAAO,OAAS,QACzB,UAAWb,EAAAA,GAAGC,EAAAA,QAAO,MAAOa,CAAS,EACrC,QAAU,GAAU,CACZC,GAAY,CAACJ,GAAgBH,IAAeO,IAC5CH,EAAgB,EAAI,EACpBH,EAAcM,CAAQ,GAE1BC,IAAUC,CAAK,CACnB,EACA,GAAIV,CACP,CAAA,CAET,C"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Image.js","names":["styles","Image_module_default","Image","props","currentSrc","setCurrentSrc","useState","src","usedFallback","setUsedFallback","lazy","cn","className","fallback","onError","event"],"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,SAAgBE,EAAM,EAClB,QACA,aACA,QACA,UAAO,IACP,cACA,YACA,GAAGC,KACQ;CACX,IAAM,CAACC,GAAYC,KAAiBC,EAAiBC,CAAG,GAClD,CAACC,GAAcC,KAAmBH,EAAkB,EAAK;CAE/D,OACI,kBAAC,OAAD;EACI,KAAKF;EACA;EACL,SAASM,IAAO,SAAS;EACzB,WAAWC,EAAGX,EAAO,OAAOY,CAAS;EACrC,UAAU,MAAU;GAKhB,AAJIC,KAAY,CAACL,KAAgBJ,MAAeS,MAC5CJ,EAAgB,EAAI,GACpBJ,EAAcQ,CAAQ,IAE1BC,IAAUC,CAAK;EACnB;EACA,GAAIZ;CACP,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"Image.module.cjs","names":[],"sources":["../../../src/components/Image/Image.module.css"],"sourcesContent":[".image {\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n"],"mappings":";"}
+{"version":3,"file":"Image.module.cjs","names":["image","Image_module_default"],"sources":["../../../src/components/Image/Image.module.css"],"sourcesContent":[".image {\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Image.module.js","names":[],"sources":["../../../src/components/Image/Image.module.css"],"sourcesContent":[".image {\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n"],"mappings":";"}
+{"version":3,"file":"Image.module.js","names":["image","Image_module_default"],"sources":["../../../src/components/Image/Image.module.css"],"sourcesContent":[".image {\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n"],"mappings":";"}

package/dist/components/ImageCropper/ImageCropper.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./crop-geometry.cjs"),n=require("./ImageCropper.module.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=12,o=.15;function s({src:s,aspect:c=1,maxZoom:l=4,maxSize:u,outputType:d=`image/png`,outputQuality:f=.92,shape:p=`rect`,onCropChange:m,label:h=`Área de recorte`,className:g,ref:_,...v}){let y=`${(0,r.useId)()}-hint`,b=(0,r.useRef)(null),x=(0,r.useRef)(null),S=(0,r.useRef)(null),[C,w]=(0,r.useState)(null),[T,E]=(0,r.useState)(null),[D,O]=(0,r.useState)({width:0,height:0}),[k,A]=(0,r.useState)(1),[j,M]=(0,r.useState)({x:0,y:0});(0,r.useEffect)(()=>{if(typeof s==`string`){w(s);return}let e=URL.createObjectURL(s);return w(e),()=>URL.revokeObjectURL(e)},[s]),(0,r.useEffect)(()=>{E(null),A(1),M({x:0,y:0})},[C]),(0,r.useEffect)(()=>{let e=b.current;if(!e)return;let t=()=>O({width:e.clientWidth,height:e.clientHeight});if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let N=T?t.coverScale(T,D)*k:0,P=(0,r.useMemo)(()=>T?{width:T.width*N,height:T.height*N}:{width:0,height:0},[T,N]),F=(0,r.useCallback)(e=>{M(n=>{let r=t.clampOffset(e,P,D);return r.x===n.x&&r.y===n.y?n:(m?.({zoom:k,offset:r}),r)})},[P,D,m,k]),I=(0,r.useCallback)(e=>{let n=Math.min(l,Math.max(1,e));if(A(n),!T)return;let r=t.coverScale(T,D)*n,i={width:T.width*r,height:T.height*r};M(e=>{let r=t.clampOffset(e,i,D);return m?.({zoom:n,offset:r}),r})},[D,l,T,m]),L=(0,r.useCallback)(()=>{A(1),M({x:0,y:0}),m?.({zoom:1,offset:{x:0,y:0}})},[m]),R=(0,r.useCallback)(async()=>{let e=x.current;if(!e||!T)return null;let n=t.computeCropRect({image:T,frame:D,zoom:k,offset:j});if(n.sWidth<=0||n.sHeight<=0)return null;let r=t.outputSize(n,u),i=document.createElement(`canvas`);i.width=r.width,i.height=r.height;let a=i.getContext(`2d`);return a?(a.drawImage(e,n.sx,n.sy,n.sWidth,n.sHeight,0,0,r.width,r.height),new Promise(e=>{i.toBlob(t=>e(t),d,f)})):null},[D,u,T,j,f,d,k]);(0,r.useImperativeHandle)(_,()=>({crop:R,reset:L}),[R,L]);let z=e=>{T&&(S.current={pointerId:e.pointerId,startX:e.clientX,startY:e.clientY,from:j},e.currentTarget.setPointerCapture?.(e.pointerId))},B=e=>{let t=S.current;t&&t.pointerId===e.pointerId&&F({x:t.from.x+(e.clientX-t.startX),y:t.from.y+(e.clientY-t.startY)})},V=e=>{S.current?.pointerId===e.pointerId&&(S.current=null)},H=e=>{let t=e.shiftKey?48:a,n={ArrowLeft:{x:-t,y:0},ArrowRight:{x:t,y:0},ArrowUp:{x:0,y:-t},ArrowDown:{x:0,y:t}}[e.key];if(n){e.preventDefault(),F({x:j.x+n.x,y:j.y+n.y});return}e.key===`+`||e.key===`=`?(e.preventDefault(),I(k+o)):e.key===`-`||e.key===`_`?(e.preventDefault(),I(k-o)):e.key===`0`&&(e.preventDefault(),L())};return(0,i.jsxs)(`div`,{className:e.cn(n.default.wrapper,g),...v,children:[(0,i.jsx)(`div`,{ref:b,className:e.cn(n.default.frame,p===`circle`&&n.default.circle),style:{aspectRatio:String(c)},role:`group`,"aria-label":h,"aria-describedby":y,tabIndex:0,onPointerDown:z,onPointerMove:B,onPointerUp:V,onPointerCancel:V,onKeyDown:H,onWheel:e=>{e.preventDefault(),I(k+(e.deltaY<0?o:-.15))},children:C&&(0,i.jsx)(`img`,{ref:x,src:C,alt:``,draggable:!1,className:n.default.image,style:{width:P.width||void 0,height:P.height||void 0,transform:`translate(${j.x}px, ${j.y}px)`},onLoad:e=>{let t=e.currentTarget;t.naturalWidth>0&&t.naturalHeight>0&&E({width:t.naturalWidth,height:t.naturalHeight})}})}),(0,i.jsxs)(`div`,{className:n.default.controls,children:[(0,i.jsx)(`input`,{type:`range`,className:n.default.zoom,min:1,max:l,step:.01,value:k,onChange:e=>I(Number(e.target.value)),"aria-label":`Zoom`,disabled:!T}),(0,i.jsx)(`button`,{type:`button`,className:n.default.reset,onClick:L,disabled:!T,children:`Centralizar`})]}),(0,i.jsxs)(`p`,{id:y,className:n.default.hint,children:[`Arraste para reposicionar. Setas movem, `,(0,i.jsx)(`kbd`,{children:`+`}),` e `,(0,i.jsx)(`kbd`,{children:`−`}),` dão zoom,`,` `,(0,i.jsx)(`kbd`,{children:`0`}),` centraliza.`]})]})}exports.ImageCropper=s;
+const e=require("../../utils/cn.cjs"),t=require("./crop-geometry.cjs"),n=require("./ImageCropper.module.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=12,o=.15;function s({src:s,aspect:c=1,maxZoom:l=4,maxSize:u,outputType:d=`image/png`,outputQuality:f=.92,shape:p=`rect`,onCropChange:m,label:h=`Área de recorte`,className:g,ref:_,...v}){let y=`${(0,r.useId)()}-hint`,b=(0,r.useRef)(null),x=(0,r.useRef)(null),S=(0,r.useRef)(null),[C,w]=(0,r.useState)(null),[T,E]=(0,r.useState)(null),[D,O]=(0,r.useState)({width:0,height:0}),[k,A]=(0,r.useState)(1),[j,M]=(0,r.useState)({x:0,y:0});(0,r.useEffect)(()=>{if(typeof s==`string`){w(s);return}let e=URL.createObjectURL(s);return w(e),()=>URL.revokeObjectURL(e)},[s]),(0,r.useEffect)(()=>{E(null),A(1),M({x:0,y:0})},[C]),(0,r.useEffect)(()=>{let e=b.current;if(!e)return;let t=()=>O({width:e.clientWidth,height:e.clientHeight});if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let N=T?t.coverScale(T,D)*k:0,P=(0,r.useMemo)(()=>T?{width:T.width*N,height:T.height*N}:{width:0,height:0},[T,N]),F=(0,r.useCallback)(e=>{M(n=>{let r=t.clampOffset(e,P,D);return r.x===n.x&&r.y===n.y?n:(m?.({zoom:k,offset:r}),r)})},[P,D,m,k]),I=(0,r.useCallback)(e=>{let n=Math.min(l,Math.max(1,e));if(A(n),!T)return;let r=t.coverScale(T,D)*n,i={width:T.width*r,height:T.height*r};M(e=>{let r=t.clampOffset(e,i,D);return m?.({zoom:n,offset:r}),r})},[D,l,T,m]),L=(0,r.useCallback)(()=>{A(1),M({x:0,y:0}),m?.({zoom:1,offset:{x:0,y:0}})},[m]),R=(0,r.useCallback)(async()=>{let e=x.current;if(!e||!T)return null;let n=t.computeCropRect({image:T,frame:D,zoom:k,offset:j});if(n.sWidth<=0||n.sHeight<=0)return null;let r=t.outputSize(n,u),i=document.createElement(`canvas`);i.width=r.width,i.height=r.height;let a=i.getContext(`2d`);return a?(a.drawImage(e,n.sx,n.sy,n.sWidth,n.sHeight,0,0,r.width,r.height),new Promise(e=>{i.toBlob(t=>e(t),d,f)})):null},[D,u,T,j,f,d,k]);(0,r.useImperativeHandle)(_,()=>({crop:R,reset:L}),[R,L]);let z=e=>{T&&(S.current={pointerId:e.pointerId,startX:e.clientX,startY:e.clientY,from:j},e.currentTarget.setPointerCapture?.(e.pointerId))},B=e=>{let t=S.current;t&&t.pointerId===e.pointerId&&F({x:t.from.x+(e.clientX-t.startX),y:t.from.y+(e.clientY-t.startY)})},V=e=>{S.current?.pointerId===e.pointerId&&(S.current=null)},H=e=>{let t=e.shiftKey?48:a,n={ArrowLeft:{x:-t,y:0},ArrowRight:{x:t,y:0},ArrowUp:{x:0,y:-t},ArrowDown:{x:0,y:t}}[e.key];n?(e.preventDefault(),F({x:j.x+n.x,y:j.y+n.y})):e.key===`+`||e.key===`=`?(e.preventDefault(),I(k+o)):e.key===`-`||e.key===`_`?(e.preventDefault(),I(k-o)):e.key===`0`&&(e.preventDefault(),L())};return(0,i.jsxs)(`div`,{className:e.cn(n.default.wrapper,g),...v,children:[(0,i.jsx)(`div`,{ref:b,className:e.cn(n.default.frame,p===`circle`&&n.default.circle),style:{aspectRatio:String(c)},role:`group`,"aria-label":h,"aria-describedby":y,tabIndex:0,onPointerDown:z,onPointerMove:B,onPointerUp:V,onPointerCancel:V,onKeyDown:H,onWheel:e=>{e.preventDefault(),I(k+(e.deltaY<0?o:-.15))},children:C&&(0,i.jsx)(`img`,{ref:x,src:C,alt:``,draggable:!1,className:n.default.image,style:{width:P.width||void 0,height:P.height||void 0,transform:`translate(${j.x}px, ${j.y}px)`},onLoad:e=>{let t=e.currentTarget;t.naturalWidth>0&&t.naturalHeight>0&&E({width:t.naturalWidth,height:t.naturalHeight})}})}),(0,i.jsxs)(`div`,{className:n.default.controls,children:[(0,i.jsx)(`input`,{type:`range`,className:n.default.zoom,min:1,max:l,step:.01,value:k,onChange:e=>I(Number(e.target.value)),"aria-label":`Zoom`,disabled:!T}),(0,i.jsx)(`button`,{type:`button`,className:n.default.reset,onClick:L,disabled:!T,children:`Centralizar`})]}),(0,i.jsxs)(`p`,{id:y,className:n.default.hint,children:[`Arraste para reposicionar. Setas movem, `,(0,i.jsx)(`kbd`,{children:`+`}),` e `,(0,i.jsx)(`kbd`,{children:`−`}),` dão zoom,`,` `,(0,i.jsx)(`kbd`,{children:`0`}),` centraliza.`]})]})}exports.ImageCropper=s;
 //# sourceMappingURL=ImageCropper.cjs.map

package/dist/components/ImageCropper/ImageCropper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCropper.cjs","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — pointer drag, wheel\n * zoom, aspect clamping and canvas export share one piece of geometry state, and the\n * props are the two halves of that: the frame (aspect, shape, maxZoom, label) and\n * the export (maxSize, outputType, outputQuality, onCropChange, ref). Threading the\n * geometry through props would duplicate the clamp maths.\n */\nimport {\n    type HTMLAttributes,\n    type KeyboardEvent,\n    type PointerEvent as ReactPointerEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport {\n    clampOffset,\n    computeCropRect,\n    coverScale,\n    type Offset,\n    outputSize,\n    type Size,\n} from \"./crop-geometry\";\nimport styles from \"./ImageCropper.module.css\";\n\n/** Imperative handle for exporting the current crop. */\nexport interface ImageCropperHandle {\n    /**\n     * Render the current crop and resolve with it.\n     *\n     * Resolves `null` when the image has not loaded yet or the browser refuses to\n     * encode — never throws, so a submit handler does not need a try/catch.\n     */\n    crop: () => Promise<Blob | null>;\n    /** Recentre at zoom 1. */\n    reset: () => void;\n}\n\nexport interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** The image to crop: a `File`/`Blob` from an input, or a URL. */\n    src: File | Blob | string;\n    /** Crop aspect ratio as `width / height`. Default `1` (square). */\n    aspect?: number;\n    /** Maximum zoom over the cover scale. Default `4`. */\n    maxZoom?: number;\n    /**\n     * Cap on the longest edge of the exported image, in px.\n     *\n     * Without it the export keeps the source resolution, which is right for a\n     * document scan and wasteful for an avatar.\n     */\n    maxSize?: number;\n    /** Output MIME type. Default `\"image/png\"`. */\n    outputType?: string;\n    /** Output quality for lossy types, `0`–`1`. Default `0.92`. */\n    outputQuality?: number;\n    /** Overlay shape. `\"circle\"` for an avatar, `\"rect\"` for a document. Default `\"rect\"`. */\n    shape?: \"rect\" | \"circle\";\n    /** Called whenever the crop changes, e.g. to enable a submit button. */\n    onCropChange?: (state: { zoom: number; offset: Offset }) => void;\n    /** Accessible name for the crop area. */\n    label?: string;\n    ref?: React.Ref<ImageCropperHandle>;\n}\n\n/** Pixels moved per arrow-key press. */\nconst KEY_STEP = 12;\n\n/** Zoom added or removed per `+`/`-` press, and per wheel notch. */\nconst ZOOM_STEP = 0.15;\n\n/**\n * Crop an image to a fixed aspect ratio.\n *\n * The frame stays put and the image pans and zooms behind it — the model an avatar\n * or document-photo flow wants, where the output shape is decided by the app and\n * the user only chooses what lands inside it. (A free-form draggable rectangle is a\n * different component; this one cannot produce an off-ratio crop by construction.)\n *\n * The export reads the *natural* pixels through a canvas, so a 4000 px photo is not\n * silently downsampled to whatever the on-screen preview measured. The image is\n * also always clamped to cover the frame, so an export can never contain the empty\n * bands you get from panning past an edge.\n *\n * Works by pointer, wheel and keyboard: arrows pan, `+`/`-` zoom, `0` resets.\n *\n * @example\n * const cropper = useRef<ImageCropperHandle>(null);\n *\n * <ImageCropper ref={cropper} src={file} aspect={1} shape=\"circle\" maxSize={512} />\n * <Button onClick={async () => upload(await cropper.current?.crop())}>Salvar</Button>\n */\nexport function ImageCropper({\n    src,\n    aspect = 1,\n    maxZoom = 4,\n    maxSize,\n    outputType = \"image/png\",\n    outputQuality = 0.92,\n    shape = \"rect\",\n    onCropChange,\n    label = \"Área de recorte\",\n    className,\n    ref,\n    ...rest\n}: ImageCropperProps) {\n    /**\n     * Id for the shortcut hint.\n     *\n     * Generated rather than derived from `label`: a label with spaces would produce\n     * an id with spaces, and `aria-describedby` splits on whitespace — so the\n     * description would silently never associate with the frame.\n     */\n    const hintId = `${useId()}-hint`;\n\n    const frameRef = useRef<HTMLDivElement>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const dragRef = useRef<{\n        pointerId: number;\n        startX: number;\n        startY: number;\n        from: Offset;\n    } | null>(null);\n\n    const [url, setUrl] = useState<string | null>(null);\n    const [natural, setNatural] = useState<Size | null>(null);\n    const [frame, setFrame] = useState<Size>({ width: 0, height: 0 });\n    const [zoom, setZoom] = useState(1);\n    const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });\n\n    /**\n     * Resolve `src` to a displayable URL.\n     *\n     * A `File`/`Blob` needs `createObjectURL`, and the URL must be revoked when the\n     * source changes or the component unmounts — otherwise every re-pick of a photo\n     * leaks the previous one for the lifetime of the document.\n     */\n    useEffect(() => {\n        if (typeof src === \"string\") {\n            setUrl(src);\n            return;\n        }\n        const objectUrl = URL.createObjectURL(src);\n        setUrl(objectUrl);\n        return () => URL.revokeObjectURL(objectUrl);\n    }, [src]);\n\n    // A new source invalidates the previous framing.\n    useEffect(() => {\n        setNatural(null);\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n    }, [url]);\n\n    /** Track the frame's rendered size — the crop math is all relative to it. */\n    useEffect(() => {\n        const element = frameRef.current;\n        if (!element) return;\n        const measure = () =>\n            setFrame({ width: element.clientWidth, height: element.clientHeight });\n        measure();\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const scale = natural ? coverScale(natural, frame) * zoom : 0;\n\n    /**\n     * On-screen image size.\n     *\n     * Memoized because the pan callback depends on it: a fresh object every render\n     * would rebuild that callback every render, and the pointer handlers close over\n     * it during a drag.\n     */\n    const displayed = useMemo<Size>(\n        () =>\n            natural\n                ? { width: natural.width * scale, height: natural.height * scale }\n                : { width: 0, height: 0 },\n        [natural, scale],\n    );\n\n    /** Apply a pan, clamped so the frame stays covered. */\n    const pan = useCallback(\n        (next: Offset) => {\n            setOffset((current) => {\n                const clamped = clampOffset(next, displayed, frame);\n                if (clamped.x === current.x && clamped.y === current.y) return current;\n                onCropChange?.({ zoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [displayed, frame, onCropChange, zoom],\n    );\n\n    /**\n     * Apply a zoom, then re-clamp the offset.\n     *\n     * Re-clamping is not optional: zooming *out* shrinks the image, so an offset\n     * that was legal a moment ago can now expose background.\n     */\n    const applyZoom = useCallback(\n        (next: number) => {\n            const clampedZoom = Math.min(maxZoom, Math.max(1, next));\n            setZoom(clampedZoom);\n            if (!natural) return;\n            const nextScale = coverScale(natural, frame) * clampedZoom;\n            const nextDisplayed = {\n                width: natural.width * nextScale,\n                height: natural.height * nextScale,\n            };\n            setOffset((current) => {\n                const clamped = clampOffset(current, nextDisplayed, frame);\n                onCropChange?.({ zoom: clampedZoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [frame, maxZoom, natural, onCropChange],\n    );\n\n    const reset = useCallback(() => {\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n        onCropChange?.({ zoom: 1, offset: { x: 0, y: 0 } });\n    }, [onCropChange]);\n\n    /**\n     * Draw the current crop and encode it.\n     *\n     * Returns `null` rather than throwing on the paths a caller cannot do anything\n     * about: no image yet, no 2D context, or an encoder that declined.\n     */\n    const crop = useCallback(async (): Promise<Blob | null> => {\n        const image = imageRef.current;\n        if (!image || !natural) return null;\n\n        const rect = computeCropRect({ image: natural, frame, zoom, offset });\n        if (rect.sWidth <= 0 || rect.sHeight <= 0) return null;\n\n        const out = outputSize(rect, maxSize);\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = out.width;\n        canvas.height = out.height;\n        const context = canvas.getContext(\"2d\");\n        if (!context) return null;\n\n        context.drawImage(\n            image,\n            rect.sx,\n            rect.sy,\n            rect.sWidth,\n            rect.sHeight,\n            0,\n            0,\n            out.width,\n            out.height,\n        );\n\n        return new Promise((resolve) => {\n            canvas.toBlob((blob) => resolve(blob), outputType, outputQuality);\n        });\n    }, [frame, maxSize, natural, offset, outputQuality, outputType, zoom]);\n\n    useImperativeHandle(ref, () => ({ crop, reset }), [crop, reset]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (!natural) return;\n        dragRef.current = {\n            pointerId: event.pointerId,\n            startX: event.clientX,\n            startY: event.clientY,\n            from: offset,\n        };\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        const drag = dragRef.current;\n        if (!drag || drag.pointerId !== event.pointerId) return;\n        pan({\n            x: drag.from.x + (event.clientX - drag.startX),\n            y: drag.from.y + (event.clientY - drag.startY),\n        });\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (dragRef.current?.pointerId !== event.pointerId) return;\n        dragRef.current = null;\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        const step = event.shiftKey ? KEY_STEP * 4 : KEY_STEP;\n        const moves: Record<string, Offset> = {\n            ArrowLeft: { x: -step, y: 0 },\n            ArrowRight: { x: step, y: 0 },\n            ArrowUp: { x: 0, y: -step },\n            ArrowDown: { x: 0, y: step },\n        };\n        const move = moves[event.key];\n        if (move) {\n            event.preventDefault();\n            pan({ x: offset.x + move.x, y: offset.y + move.y });\n            return;\n        }\n        if (event.key === \"+\" || event.key === \"=\") {\n            event.preventDefault();\n            applyZoom(zoom + ZOOM_STEP);\n        } else if (event.key === \"-\" || event.key === \"_\") {\n            event.preventDefault();\n            applyZoom(zoom - ZOOM_STEP);\n        } else if (event.key === \"0\") {\n            event.preventDefault();\n            reset();\n        }\n    };\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            <div\n                ref={frameRef}\n                className={cn(styles.frame, shape === \"circle\" && styles.circle)}\n                style={{ aspectRatio: String(aspect) }}\n                role=\"group\"\n                aria-label={label}\n                aria-describedby={hintId}\n                tabIndex={0}\n                onPointerDown={onPointerDown}\n                onPointerMove={onPointerMove}\n                onPointerUp={endDrag}\n                onPointerCancel={endDrag}\n                onKeyDown={onKeyDown}\n                onWheel={(event) => {\n                    event.preventDefault();\n                    applyZoom(zoom + (event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP));\n                }}\n            >\n                {url && (\n                    <img\n                        ref={imageRef}\n                        src={url}\n                        alt=\"\"\n                        draggable={false}\n                        className={styles.image}\n                        style={{\n                            width: displayed.width || undefined,\n                            height: displayed.height || undefined,\n                            transform: `translate(${offset.x}px, ${offset.y}px)`,\n                        }}\n                        onLoad={(event) => {\n                            const element = event.currentTarget;\n                            // A decode can succeed and still report no intrinsic size —\n                            // an SVG without a viewBox is the common case. Accepting\n                            // that would enable the controls over an image the crop\n                            // maths can do nothing with.\n                            if (element.naturalWidth > 0 && element.naturalHeight > 0) {\n                                setNatural({\n                                    width: element.naturalWidth,\n                                    height: element.naturalHeight,\n                                });\n                            }\n                        }}\n                    />\n                )}\n            </div>\n\n            <div className={styles.controls}>\n                <input\n                    type=\"range\"\n                    className={styles.zoom}\n                    min={1}\n                    max={maxZoom}\n                    step={0.01}\n                    value={zoom}\n                    onChange={(event) => applyZoom(Number(event.target.value))}\n                    aria-label=\"Zoom\"\n                    disabled={!natural}\n                />\n                <button type=\"button\" className={styles.reset} onClick={reset} disabled={!natural}>\n                    Centralizar\n                </button>\n            </div>\n\n            <p id={hintId} className={styles.hint}>\n                Arraste para reposicionar. Setas movem, <kbd>+</kbd> e <kbd>−</kbd> dão zoom,{\" \"}\n                <kbd>0</kbd> centraliza.\n            </p>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ImageCropper.cjs","names":["useId","useRef","useState","coverScale","useMemo","useCallback","clampOffset","computeCropRect","outputSize","cn","styles","require_cn","require_crop_geometry","require_ImageCropper_module","react","react_jsx_runtime","KEY_STEP","ZOOM_STEP","ImageCropper","rest","hintId","frameRef","imageRef","dragRef","url","setUrl","natural","setNatural","frame","setFrame","zoom","setZoom","offset","setOffset","src","objectUrl","element","measure","observer","scale","displayed","pan","clamped","next","current","onCropChange","applyZoom","clampedZoom","maxZoom","nextScale","nextDisplayed","reset","crop","image","rect","out","maxSize","canvas","context","resolve","blob","outputType","outputQuality","ref","onPointerDown","event","onPointerMove","drag","endDrag","onKeyDown","step","move","className","shape","aspect","label"],"sources":["../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — pointer drag, wheel\n * zoom, aspect clamping and canvas export share one piece of geometry state, and the\n * props are the two halves of that: the frame (aspect, shape, maxZoom, label) and\n * the export (maxSize, outputType, outputQuality, onCropChange, ref). Threading the\n * geometry through props would duplicate the clamp maths.\n */\nimport {\n    type HTMLAttributes,\n    type KeyboardEvent,\n    type PointerEvent as ReactPointerEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport {\n    clampOffset,\n    computeCropRect,\n    coverScale,\n    type Offset,\n    outputSize,\n    type Size,\n} from \"./crop-geometry\";\nimport styles from \"./ImageCropper.module.css\";\n\n/** Imperative handle for exporting the current crop. */\nexport interface ImageCropperHandle {\n    /**\n     * Render the current crop and resolve with it.\n     *\n     * Resolves `null` when the image has not loaded yet or the browser refuses to\n     * encode — never throws, so a submit handler does not need a try/catch.\n     */\n    crop: () => Promise<Blob | null>;\n    /** Recentre at zoom 1. */\n    reset: () => void;\n}\n\nexport interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** The image to crop: a `File`/`Blob` from an input, or a URL. */\n    src: File | Blob | string;\n    /** Crop aspect ratio as `width / height`. Default `1` (square). */\n    aspect?: number;\n    /** Maximum zoom over the cover scale. Default `4`. */\n    maxZoom?: number;\n    /**\n     * Cap on the longest edge of the exported image, in px.\n     *\n     * Without it the export keeps the source resolution, which is right for a\n     * document scan and wasteful for an avatar.\n     */\n    maxSize?: number;\n    /** Output MIME type. Default `\"image/png\"`. */\n    outputType?: string;\n    /** Output quality for lossy types, `0`–`1`. Default `0.92`. */\n    outputQuality?: number;\n    /** Overlay shape. `\"circle\"` for an avatar, `\"rect\"` for a document. Default `\"rect\"`. */\n    shape?: \"rect\" | \"circle\";\n    /** Called whenever the crop changes, e.g. to enable a submit button. */\n    onCropChange?: (state: { zoom: number; offset: Offset }) => void;\n    /** Accessible name for the crop area. */\n    label?: string;\n    ref?: React.Ref<ImageCropperHandle>;\n}\n\n/** Pixels moved per arrow-key press. */\nconst KEY_STEP = 12;\n\n/** Zoom added or removed per `+`/`-` press, and per wheel notch. */\nconst ZOOM_STEP = 0.15;\n\n/**\n * Crop an image to a fixed aspect ratio.\n *\n * The frame stays put and the image pans and zooms behind it — the model an avatar\n * or document-photo flow wants, where the output shape is decided by the app and\n * the user only chooses what lands inside it. (A free-form draggable rectangle is a\n * different component; this one cannot produce an off-ratio crop by construction.)\n *\n * The export reads the *natural* pixels through a canvas, so a 4000 px photo is not\n * silently downsampled to whatever the on-screen preview measured. The image is\n * also always clamped to cover the frame, so an export can never contain the empty\n * bands you get from panning past an edge.\n *\n * Works by pointer, wheel and keyboard: arrows pan, `+`/`-` zoom, `0` resets.\n *\n * @example\n * const cropper = useRef<ImageCropperHandle>(null);\n *\n * <ImageCropper ref={cropper} src={file} aspect={1} shape=\"circle\" maxSize={512} />\n * <Button onClick={async () => upload(await cropper.current?.crop())}>Salvar</Button>\n */\nexport function ImageCropper({\n    src,\n    aspect = 1,\n    maxZoom = 4,\n    maxSize,\n    outputType = \"image/png\",\n    outputQuality = 0.92,\n    shape = \"rect\",\n    onCropChange,\n    label = \"Área de recorte\",\n    className,\n    ref,\n    ...rest\n}: ImageCropperProps) {\n    /**\n     * Id for the shortcut hint.\n     *\n     * Generated rather than derived from `label`: a label with spaces would produce\n     * an id with spaces, and `aria-describedby` splits on whitespace — so the\n     * description would silently never associate with the frame.\n     */\n    const hintId = `${useId()}-hint`;\n\n    const frameRef = useRef<HTMLDivElement>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const dragRef = useRef<{\n        pointerId: number;\n        startX: number;\n        startY: number;\n        from: Offset;\n    } | null>(null);\n\n    const [url, setUrl] = useState<string | null>(null);\n    const [natural, setNatural] = useState<Size | null>(null);\n    const [frame, setFrame] = useState<Size>({ width: 0, height: 0 });\n    const [zoom, setZoom] = useState(1);\n    const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });\n\n    /**\n     * Resolve `src` to a displayable URL.\n     *\n     * A `File`/`Blob` needs `createObjectURL`, and the URL must be revoked when the\n     * source changes or the component unmounts — otherwise every re-pick of a photo\n     * leaks the previous one for the lifetime of the document.\n     */\n    useEffect(() => {\n        if (typeof src === \"string\") {\n            setUrl(src);\n            return;\n        }\n        const objectUrl = URL.createObjectURL(src);\n        setUrl(objectUrl);\n        return () => URL.revokeObjectURL(objectUrl);\n    }, [src]);\n\n    // A new source invalidates the previous framing.\n    useEffect(() => {\n        setNatural(null);\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n    }, [url]);\n\n    /** Track the frame's rendered size — the crop math is all relative to it. */\n    useEffect(() => {\n        const element = frameRef.current;\n        if (!element) return;\n        const measure = () =>\n            setFrame({ width: element.clientWidth, height: element.clientHeight });\n        measure();\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const scale = natural ? coverScale(natural, frame) * zoom : 0;\n\n    /**\n     * On-screen image size.\n     *\n     * Memoized because the pan callback depends on it: a fresh object every render\n     * would rebuild that callback every render, and the pointer handlers close over\n     * it during a drag.\n     */\n    const displayed = useMemo<Size>(\n        () =>\n            natural\n                ? { width: natural.width * scale, height: natural.height * scale }\n                : { width: 0, height: 0 },\n        [natural, scale],\n    );\n\n    /** Apply a pan, clamped so the frame stays covered. */\n    const pan = useCallback(\n        (next: Offset) => {\n            setOffset((current) => {\n                const clamped = clampOffset(next, displayed, frame);\n                if (clamped.x === current.x && clamped.y === current.y) return current;\n                onCropChange?.({ zoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [displayed, frame, onCropChange, zoom],\n    );\n\n    /**\n     * Apply a zoom, then re-clamp the offset.\n     *\n     * Re-clamping is not optional: zooming *out* shrinks the image, so an offset\n     * that was legal a moment ago can now expose background.\n     */\n    const applyZoom = useCallback(\n        (next: number) => {\n            const clampedZoom = Math.min(maxZoom, Math.max(1, next));\n            setZoom(clampedZoom);\n            if (!natural) return;\n            const nextScale = coverScale(natural, frame) * clampedZoom;\n            const nextDisplayed = {\n                width: natural.width * nextScale,\n                height: natural.height * nextScale,\n            };\n            setOffset((current) => {\n                const clamped = clampOffset(current, nextDisplayed, frame);\n                onCropChange?.({ zoom: clampedZoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [frame, maxZoom, natural, onCropChange],\n    );\n\n    const reset = useCallback(() => {\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n        onCropChange?.({ zoom: 1, offset: { x: 0, y: 0 } });\n    }, [onCropChange]);\n\n    /**\n     * Draw the current crop and encode it.\n     *\n     * Returns `null` rather than throwing on the paths a caller cannot do anything\n     * about: no image yet, no 2D context, or an encoder that declined.\n     */\n    const crop = useCallback(async (): Promise<Blob | null> => {\n        const image = imageRef.current;\n        if (!image || !natural) return null;\n\n        const rect = computeCropRect({ image: natural, frame, zoom, offset });\n        if (rect.sWidth <= 0 || rect.sHeight <= 0) return null;\n\n        const out = outputSize(rect, maxSize);\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = out.width;\n        canvas.height = out.height;\n        const context = canvas.getContext(\"2d\");\n        if (!context) return null;\n\n        context.drawImage(\n            image,\n            rect.sx,\n            rect.sy,\n            rect.sWidth,\n            rect.sHeight,\n            0,\n            0,\n            out.width,\n            out.height,\n        );\n\n        return new Promise((resolve) => {\n            canvas.toBlob((blob) => resolve(blob), outputType, outputQuality);\n        });\n    }, [frame, maxSize, natural, offset, outputQuality, outputType, zoom]);\n\n    useImperativeHandle(ref, () => ({ crop, reset }), [crop, reset]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (!natural) return;\n        dragRef.current = {\n            pointerId: event.pointerId,\n            startX: event.clientX,\n            startY: event.clientY,\n            from: offset,\n        };\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        const drag = dragRef.current;\n        if (!drag || drag.pointerId !== event.pointerId) return;\n        pan({\n            x: drag.from.x + (event.clientX - drag.startX),\n            y: drag.from.y + (event.clientY - drag.startY),\n        });\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (dragRef.current?.pointerId !== event.pointerId) return;\n        dragRef.current = null;\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        const step = event.shiftKey ? KEY_STEP * 4 : KEY_STEP;\n        const moves: Record<string, Offset> = {\n            ArrowLeft: { x: -step, y: 0 },\n            ArrowRight: { x: step, y: 0 },\n            ArrowUp: { x: 0, y: -step },\n            ArrowDown: { x: 0, y: step },\n        };\n        const move = moves[event.key];\n        if (move) {\n            event.preventDefault();\n            pan({ x: offset.x + move.x, y: offset.y + move.y });\n            return;\n        }\n        if (event.key === \"+\" || event.key === \"=\") {\n            event.preventDefault();\n            applyZoom(zoom + ZOOM_STEP);\n        } else if (event.key === \"-\" || event.key === \"_\") {\n            event.preventDefault();\n            applyZoom(zoom - ZOOM_STEP);\n        } else if (event.key === \"0\") {\n            event.preventDefault();\n            reset();\n        }\n    };\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            <div\n                ref={frameRef}\n                className={cn(styles.frame, shape === \"circle\" && styles.circle)}\n                style={{ aspectRatio: String(aspect) }}\n                role=\"group\"\n                aria-label={label}\n                aria-describedby={hintId}\n                tabIndex={0}\n                onPointerDown={onPointerDown}\n                onPointerMove={onPointerMove}\n                onPointerUp={endDrag}\n                onPointerCancel={endDrag}\n                onKeyDown={onKeyDown}\n                onWheel={(event) => {\n                    event.preventDefault();\n                    applyZoom(zoom + (event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP));\n                }}\n            >\n                {url && (\n                    <img\n                        ref={imageRef}\n                        src={url}\n                        alt=\"\"\n                        draggable={false}\n                        className={styles.image}\n                        style={{\n                            width: displayed.width || undefined,\n                            height: displayed.height || undefined,\n                            transform: `translate(${offset.x}px, ${offset.y}px)`,\n                        }}\n                        onLoad={(event) => {\n                            const element = event.currentTarget;\n                            // A decode can succeed and still report no intrinsic size —\n                            // an SVG without a viewBox is the common case. Accepting\n                            // that would enable the controls over an image the crop\n                            // maths can do nothing with.\n                            if (element.naturalWidth > 0 && element.naturalHeight > 0) {\n                                setNatural({\n                                    width: element.naturalWidth,\n                                    height: element.naturalHeight,\n                                });\n                            }\n                        }}\n                    />\n                )}\n            </div>\n\n            <div className={styles.controls}>\n                <input\n                    type=\"range\"\n                    className={styles.zoom}\n                    min={1}\n                    max={maxZoom}\n                    step={0.01}\n                    value={zoom}\n                    onChange={(event) => applyZoom(Number(event.target.value))}\n                    aria-label=\"Zoom\"\n                    disabled={!natural}\n                />\n                <button type=\"button\" className={styles.reset} onClick={reset} disabled={!natural}>\n                    Centralizar\n                </button>\n            </div>\n\n            <p id={hintId} className={styles.hint}>\n                Arraste para reposicionar. Setas movem, <kbd>+</kbd> e <kbd>−</kbd> dão zoom,{\" \"}\n                <kbd>0</kbd> centraliza.\n            </p>\n        </div>\n    );\n}\n"],"mappings":"A,oKAyEA,IAAMgB,EAAW,GAGXC,EAAY,IAuBlB,SAAgBC,EAAa,CACzB,MACA,SAAS,EACT,UAAU,EACV,UACA,aAAa,YACb,gBAAgB,IAChB,QAAQ,OACR,eACA,QAAQ,kBACR,YACA,MACA,GAAGC,GACe,CAQlB,IAAMC,EAAS,IAAA,EAAGpB,EAAAA,MAAAA,CAAM,EAAE,OAEpBqB,GAAA,EAAWpB,EAAAA,OAAAA,CAAuB,IAAI,EACtCqB,GAAA,EAAWrB,EAAAA,OAAAA,CAAgC,IAAI,EAC/CsB,GAAA,EAAUtB,EAAAA,OAAAA,CAKN,IAAI,EAER,CAACuB,EAAKC,IAAA,EAAUvB,EAAAA,SAAAA,CAAwB,IAAI,EAC5C,CAACwB,EAASC,IAAA,EAAczB,EAAAA,SAAAA,CAAsB,IAAI,EAClD,CAAC0B,EAAOC,IAAA,EAAY3B,EAAAA,SAAAA,CAAe,CAAE,MAAO,EAAG,OAAQ,CAAE,CAAC,EAC1D,CAAC4B,EAAMC,IAAA,EAAW7B,EAAAA,SAAAA,CAAS,CAAC,EAC5B,CAAC8B,EAAQC,IAAA,EAAa/B,EAAAA,SAAAA,CAAiB,CAAE,EAAG,EAAG,EAAG,CAAE,CAAC,GAS3D,EAAAY,EAAA,UAAA,KAAgB,CACZ,GAAI,OAAOoB,GAAQ,SAAU,CACzBT,EAAOS,CAAG,EACV,MACJ,CACA,IAAMC,EAAY,IAAI,gBAAgBD,CAAG,EAEzC,OADAT,EAAOU,CAAS,MACH,IAAI,gBAAgBA,CAAS,CAC9C,EAAG,CAACD,CAAG,CAAC,GAGR,EAAApB,EAAA,UAAA,KAAgB,CACZa,EAAW,IAAI,EACfI,EAAQ,CAAC,EACTE,EAAU,CAAE,EAAG,EAAG,EAAG,CAAE,CAAC,CAC5B,EAAG,CAACT,CAAG,CAAC,GAGR,EAAAV,EAAA,UAAA,KAAgB,CACZ,IAAMsB,EAAUf,EAAS,QACzB,GAAI,CAACe,EAAS,OACd,IAAMC,MACFR,EAAS,CAAE,MAAOO,EAAQ,YAAa,OAAQA,EAAQ,YAAa,CAAC,EAEzE,GADAC,EAAQ,EACJ,OAAO,eAAmB,IAAa,OAC3C,IAAMC,EAAW,IAAI,eAAeD,CAAO,EAE3C,OADAC,EAAS,QAAQF,CAAO,MACXE,EAAS,WAAW,CACrC,EAAG,CAAC,CAAC,EAEL,IAAMC,EAAQb,EAAUvB,EAAAA,WAAWuB,EAASE,CAAK,EAAIE,EAAO,EAStDU,GAAA,EAAYpC,EAAAA,QAAAA,KAEVsB,EACM,CAAE,MAAOA,EAAQ,MAAQa,EAAO,OAAQb,EAAQ,OAASa,CAAM,EAC/D,CAAE,MAAO,EAAG,OAAQ,CAAE,EAChC,CAACb,EAASa,CAAK,CACnB,EAGME,GAAA,EAAMpC,EAAAA,YAAAA,CACP,GAAiB,CACd4B,EAAW,GAAY,CACnB,IAAMS,EAAUpC,EAAAA,YAAYqC,EAAMH,EAAWZ,CAAK,EAGlD,OAFIc,EAAQ,IAAME,EAAQ,GAAKF,EAAQ,IAAME,EAAQ,EAAUA,GAC/DC,IAAe,CAAE,OAAM,OAAQH,CAAQ,CAAC,EACjCA,EACX,CAAC,CACL,EACA,CAACF,EAAWZ,EAAOiB,EAAcf,CAAI,CACzC,EAQMgB,GAAA,EAAYzC,EAAAA,YAAAA,CACb,GAAiB,CACd,IAAM0C,EAAc,KAAK,IAAIC,EAAS,KAAK,IAAI,EAAGL,CAAI,CAAC,EAEvD,GADAZ,EAAQgB,CAAW,EACf,CAACrB,EAAS,OACd,IAAMuB,EAAY9C,EAAAA,WAAWuB,EAASE,CAAK,EAAImB,EACzCG,EAAgB,CAClB,MAAOxB,EAAQ,MAAQuB,EACvB,OAAQvB,EAAQ,OAASuB,CAC7B,EACAhB,EAAW,GAAY,CACnB,IAAMS,EAAUpC,EAAAA,YAAYsC,EAASM,EAAetB,CAAK,EAEzD,OADAiB,IAAe,CAAE,KAAME,EAAa,OAAQL,CAAQ,CAAC,EAC9CA,CACX,CAAC,CACL,EACA,CAACd,EAAOoB,EAAStB,EAASmB,CAAY,CAC1C,EAEMM,GAAA,EAAQ9C,EAAAA,YAAAA,KAAkB,CAC5B0B,EAAQ,CAAC,EACTE,EAAU,CAAE,EAAG,EAAG,EAAG,CAAE,CAAC,EACxBY,IAAe,CAAE,KAAM,EAAG,OAAQ,CAAE,EAAG,EAAG,EAAG,CAAE,CAAE,CAAC,CACtD,EAAG,CAACA,CAAY,CAAC,EAQXO,GAAA,EAAO/C,EAAAA,YAAAA,CAAY,SAAkC,CACvD,IAAMgD,EAAQ/B,EAAS,QACvB,GAAI,CAAC+B,GAAS,CAAC3B,EAAS,OAAO,KAE/B,IAAM4B,EAAO/C,EAAAA,gBAAgB,CAAE,MAAOmB,EAAS,QAAO,OAAM,QAAO,CAAC,EACpE,GAAI4B,EAAK,QAAU,GAAKA,EAAK,SAAW,EAAG,OAAO,KAElD,IAAMC,EAAM/C,EAAAA,WAAW8C,EAAME,CAAO,EAC9BC,EAAS,SAAS,cAAc,QAAQ,EAC9C,EAAO,MAAQF,EAAI,MACnB,EAAO,OAASA,EAAI,OACpB,IAAMG,EAAUD,EAAO,WAAW,IAAI,EAetC,OAdKC,GAELA,EAAQ,UACJL,EACAC,EAAK,GACLA,EAAK,GACLA,EAAK,OACLA,EAAK,QACL,EACA,EACAC,EAAI,MACJA,EAAI,MACR,EAEO,IAAI,QAAS,GAAY,CAC5BE,EAAO,OAAQ,GAASE,EAAQC,CAAI,EAAGC,EAAYC,CAAa,CACpE,CAAC,GAhBoB,IAiBzB,EAAG,CAAClC,EAAO4B,EAAS9B,EAASM,EAAQ8B,EAAeD,EAAY/B,CAAI,CAAC,GAErE,EAAAhB,EAAA,oBAAA,CAAoBiD,OAAY,CAAE,OAAM,OAAM,GAAI,CAACX,EAAMD,CAAK,CAAC,EAE/D,IAAMa,EAAiB,GAAmD,CACjEtC,IACL,EAAQ,QAAU,CACd,UAAWuC,EAAM,UACjB,OAAQA,EAAM,QACd,OAAQA,EAAM,QACd,KAAMjC,CACV,EACAiC,EAAM,cAAc,oBAAoBA,EAAM,SAAS,EAC3D,EAEMC,EAAiB,GAAmD,CACtE,IAAMC,EAAO5C,EAAQ,QAChB4C,GAAQA,EAAK,YAAcF,EAAM,WACtCxB,EAAI,CACA,EAAG0B,EAAK,KAAK,GAAKF,EAAM,QAAUE,EAAK,QACvC,EAAGA,EAAK,KAAK,GAAKF,EAAM,QAAUE,EAAK,OAC3C,CAAC,CACL,EAEMC,EAAW,GAAmD,CAC5D7C,EAAQ,SAAS,YAAc0C,EAAM,YACzC,EAAQ,QAAU,KACtB,EAEMI,EAAa,GAA+C,CAC9D,IAAMC,EAAOL,EAAM,SAAW,GAAejD,EAOvCuD,EAAO,CALT,UAAW,CAAE,EAAG,CAACD,EAAM,EAAG,CAAE,EAC5B,WAAY,CAAE,EAAGA,EAAM,EAAG,CAAE,EAC5B,QAAS,CAAE,EAAG,EAAG,EAAG,CAACA,CAAK,EAC1B,UAAW,CAAE,EAAG,EAAG,EAAGA,CAAK,CAElB,EAAML,EAAM,KACrBM,GACAN,EAAM,eAAe,EACrBxB,EAAI,CAAE,EAAGT,EAAO,EAAIuC,EAAK,EAAG,EAAGvC,EAAO,EAAIuC,EAAK,CAAE,CAAC,GAGlDN,EAAM,MAAQ,KAAOA,EAAM,MAAQ,KACnCA,EAAM,eAAe,EACrBnB,EAAUhB,EAAOb,CAAS,GACnBgD,EAAM,MAAQ,KAAOA,EAAM,MAAQ,KAC1CA,EAAM,eAAe,EACrBnB,EAAUhB,EAAOb,CAAS,GACnBgD,EAAM,MAAQ,MACrBA,EAAM,eAAe,EACrBd,EAAM,EAEd,EAEA,OACI,EAAApC,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,QAAS8D,CAAS,EAAG,GAAIrD,EAAnD,SAAA,EACI,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACI,IAAKM,EACL,UAAWZ,EAAAA,GAAGC,EAAAA,QAAO,MAAO+D,IAAU,UAAY/D,EAAAA,QAAO,MAAM,EAC/D,MAAO,CAAE,YAAa,OAAOgE,CAAM,CAAE,EACrC,KAAK,QACL,aAAYC,EACZ,mBAAkBvD,EAClB,SAAU,EACK,gBACA,gBACf,YAAagD,EACb,gBAAiBA,EACN,YACX,QAAU,GAAU,CAChBH,EAAM,eAAe,EACrBnB,EAAUhB,GAAQmC,EAAM,OAAS,EAAIhD,EAAY,KAAW,CAChE,EAEC,SAAAO,IACG,EAAAT,EAAA,IAAA,CAAC,MAAD,CACI,IAAKO,EACL,IAAKE,EACL,IAAI,GACJ,UAAW,GACX,UAAWd,EAAAA,QAAO,MAClB,MAAO,CACH,MAAO8B,EAAU,OAAS,IAAA,GAC1B,OAAQA,EAAU,QAAU,IAAA,GAC5B,UAAW,aAAaR,EAAO,EAAE,MAAMA,EAAO,EAAE,IACpD,EACA,OAAS,GAAU,CACf,IAAMI,EAAU6B,EAAM,cAKlB7B,EAAQ,aAAe,GAAKA,EAAQ,cAAgB,GACpDT,EAAW,CACP,MAAOS,EAAQ,aACf,OAAQA,EAAQ,aACpB,CAAC,CAET,CACH,CAAA,CAEJ,CAAA,GAEL,EAAArB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,QAAO,SAAvB,SAAA,EACI,EAAAK,EAAA,IAAA,CAAC,QAAD,CACI,KAAK,QACL,UAAWL,EAAAA,QAAO,KAClB,IAAK,EACL,IAAKsC,EACL,KAAM,IACN,MAAOlB,EACP,SAAW,GAAUgB,EAAU,OAAOmB,EAAM,OAAO,KAAK,CAAC,EACzD,aAAW,OACX,SAAU,CAACvC,CACd,CAAA,GACD,EAAAX,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAWL,EAAAA,QAAO,MAAO,QAASyC,EAAO,SAAU,CAACzB,EAAS,SAAA,aAE3E,CAAA,CACP,C,IAEL,EAAAX,EAAA,KAAA,CAAC,IAAD,CAAG,GAAIK,EAAQ,UAAWV,EAAAA,QAAO,KAAjC,SAAA,CAAuC,4CACK,EAAAK,EAAA,IAAA,CAAC,MAAD,CAAA,SAAK,GAAM,CAAA,EAAC,OAAG,EAAAA,EAAA,IAAA,CAAC,MAAD,CAAA,SAAK,GAAM,CAAA,EAAC,aAAW,KAC9E,EAAAA,EAAA,IAAA,CAAC,MAAD,CAAA,SAAK,GAAM,CAAA,EAAC,cACb,C,EACF,C,EAEb,C"}

package/dist/components/ImageCropper/ImageCropper.js

@@ -148,14 +148,10 @@ function _({ src: _, aspect: v = 1, maxZoom: y = 4, maxSize: b, outputType: x =
 				y: t
 			}
 		}[e.key];
-		if (n) {
-			e.preventDefault(), G({
-				x: V.x + n.x,
-				y: V.y + n.y
-			});
-			return;
-		}
-		e.key === "+" || e.key === "=" ? (e.preventDefault(), K(z + g)) : e.key === "-" || e.key === "_" ? (e.preventDefault(), K(z - g)) : e.key === "0" && (e.preventDefault(), q());
+		n ? (e.preventDefault(), G({
+			x: V.x + n.x,
+			y: V.y + n.y
+		})) : e.key === "+" || e.key === "=" ? (e.preventDefault(), K(z + g)) : e.key === "-" || e.key === "_" ? (e.preventDefault(), K(z - g)) : e.key === "0" && (e.preventDefault(), q());
 	};
 	return /* @__PURE__ */ m("div", {
 		className: e(a.wrapper, E),

package/dist/components/ImageCropper/ImageCropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCropper.js","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — pointer drag, wheel\n * zoom, aspect clamping and canvas export share one piece of geometry state, and the\n * props are the two halves of that: the frame (aspect, shape, maxZoom, label) and\n * the export (maxSize, outputType, outputQuality, onCropChange, ref). Threading the\n * geometry through props would duplicate the clamp maths.\n */\nimport {\n    type HTMLAttributes,\n    type KeyboardEvent,\n    type PointerEvent as ReactPointerEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport {\n    clampOffset,\n    computeCropRect,\n    coverScale,\n    type Offset,\n    outputSize,\n    type Size,\n} from \"./crop-geometry\";\nimport styles from \"./ImageCropper.module.css\";\n\n/** Imperative handle for exporting the current crop. */\nexport interface ImageCropperHandle {\n    /**\n     * Render the current crop and resolve with it.\n     *\n     * Resolves `null` when the image has not loaded yet or the browser refuses to\n     * encode — never throws, so a submit handler does not need a try/catch.\n     */\n    crop: () => Promise<Blob | null>;\n    /** Recentre at zoom 1. */\n    reset: () => void;\n}\n\nexport interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** The image to crop: a `File`/`Blob` from an input, or a URL. */\n    src: File | Blob | string;\n    /** Crop aspect ratio as `width / height`. Default `1` (square). */\n    aspect?: number;\n    /** Maximum zoom over the cover scale. Default `4`. */\n    maxZoom?: number;\n    /**\n     * Cap on the longest edge of the exported image, in px.\n     *\n     * Without it the export keeps the source resolution, which is right for a\n     * document scan and wasteful for an avatar.\n     */\n    maxSize?: number;\n    /** Output MIME type. Default `\"image/png\"`. */\n    outputType?: string;\n    /** Output quality for lossy types, `0`–`1`. Default `0.92`. */\n    outputQuality?: number;\n    /** Overlay shape. `\"circle\"` for an avatar, `\"rect\"` for a document. Default `\"rect\"`. */\n    shape?: \"rect\" | \"circle\";\n    /** Called whenever the crop changes, e.g. to enable a submit button. */\n    onCropChange?: (state: { zoom: number; offset: Offset }) => void;\n    /** Accessible name for the crop area. */\n    label?: string;\n    ref?: React.Ref<ImageCropperHandle>;\n}\n\n/** Pixels moved per arrow-key press. */\nconst KEY_STEP = 12;\n\n/** Zoom added or removed per `+`/`-` press, and per wheel notch. */\nconst ZOOM_STEP = 0.15;\n\n/**\n * Crop an image to a fixed aspect ratio.\n *\n * The frame stays put and the image pans and zooms behind it — the model an avatar\n * or document-photo flow wants, where the output shape is decided by the app and\n * the user only chooses what lands inside it. (A free-form draggable rectangle is a\n * different component; this one cannot produce an off-ratio crop by construction.)\n *\n * The export reads the *natural* pixels through a canvas, so a 4000 px photo is not\n * silently downsampled to whatever the on-screen preview measured. The image is\n * also always clamped to cover the frame, so an export can never contain the empty\n * bands you get from panning past an edge.\n *\n * Works by pointer, wheel and keyboard: arrows pan, `+`/`-` zoom, `0` resets.\n *\n * @example\n * const cropper = useRef<ImageCropperHandle>(null);\n *\n * <ImageCropper ref={cropper} src={file} aspect={1} shape=\"circle\" maxSize={512} />\n * <Button onClick={async () => upload(await cropper.current?.crop())}>Salvar</Button>\n */\nexport function ImageCropper({\n    src,\n    aspect = 1,\n    maxZoom = 4,\n    maxSize,\n    outputType = \"image/png\",\n    outputQuality = 0.92,\n    shape = \"rect\",\n    onCropChange,\n    label = \"Área de recorte\",\n    className,\n    ref,\n    ...rest\n}: ImageCropperProps) {\n    /**\n     * Id for the shortcut hint.\n     *\n     * Generated rather than derived from `label`: a label with spaces would produce\n     * an id with spaces, and `aria-describedby` splits on whitespace — so the\n     * description would silently never associate with the frame.\n     */\n    const hintId = `${useId()}-hint`;\n\n    const frameRef = useRef<HTMLDivElement>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const dragRef = useRef<{\n        pointerId: number;\n        startX: number;\n        startY: number;\n        from: Offset;\n    } | null>(null);\n\n    const [url, setUrl] = useState<string | null>(null);\n    const [natural, setNatural] = useState<Size | null>(null);\n    const [frame, setFrame] = useState<Size>({ width: 0, height: 0 });\n    const [zoom, setZoom] = useState(1);\n    const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });\n\n    /**\n     * Resolve `src` to a displayable URL.\n     *\n     * A `File`/`Blob` needs `createObjectURL`, and the URL must be revoked when the\n     * source changes or the component unmounts — otherwise every re-pick of a photo\n     * leaks the previous one for the lifetime of the document.\n     */\n    useEffect(() => {\n        if (typeof src === \"string\") {\n            setUrl(src);\n            return;\n        }\n        const objectUrl = URL.createObjectURL(src);\n        setUrl(objectUrl);\n        return () => URL.revokeObjectURL(objectUrl);\n    }, [src]);\n\n    // A new source invalidates the previous framing.\n    useEffect(() => {\n        setNatural(null);\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n    }, [url]);\n\n    /** Track the frame's rendered size — the crop math is all relative to it. */\n    useEffect(() => {\n        const element = frameRef.current;\n        if (!element) return;\n        const measure = () =>\n            setFrame({ width: element.clientWidth, height: element.clientHeight });\n        measure();\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const scale = natural ? coverScale(natural, frame) * zoom : 0;\n\n    /**\n     * On-screen image size.\n     *\n     * Memoized because the pan callback depends on it: a fresh object every render\n     * would rebuild that callback every render, and the pointer handlers close over\n     * it during a drag.\n     */\n    const displayed = useMemo<Size>(\n        () =>\n            natural\n                ? { width: natural.width * scale, height: natural.height * scale }\n                : { width: 0, height: 0 },\n        [natural, scale],\n    );\n\n    /** Apply a pan, clamped so the frame stays covered. */\n    const pan = useCallback(\n        (next: Offset) => {\n            setOffset((current) => {\n                const clamped = clampOffset(next, displayed, frame);\n                if (clamped.x === current.x && clamped.y === current.y) return current;\n                onCropChange?.({ zoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [displayed, frame, onCropChange, zoom],\n    );\n\n    /**\n     * Apply a zoom, then re-clamp the offset.\n     *\n     * Re-clamping is not optional: zooming *out* shrinks the image, so an offset\n     * that was legal a moment ago can now expose background.\n     */\n    const applyZoom = useCallback(\n        (next: number) => {\n            const clampedZoom = Math.min(maxZoom, Math.max(1, next));\n            setZoom(clampedZoom);\n            if (!natural) return;\n            const nextScale = coverScale(natural, frame) * clampedZoom;\n            const nextDisplayed = {\n                width: natural.width * nextScale,\n                height: natural.height * nextScale,\n            };\n            setOffset((current) => {\n                const clamped = clampOffset(current, nextDisplayed, frame);\n                onCropChange?.({ zoom: clampedZoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [frame, maxZoom, natural, onCropChange],\n    );\n\n    const reset = useCallback(() => {\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n        onCropChange?.({ zoom: 1, offset: { x: 0, y: 0 } });\n    }, [onCropChange]);\n\n    /**\n     * Draw the current crop and encode it.\n     *\n     * Returns `null` rather than throwing on the paths a caller cannot do anything\n     * about: no image yet, no 2D context, or an encoder that declined.\n     */\n    const crop = useCallback(async (): Promise<Blob | null> => {\n        const image = imageRef.current;\n        if (!image || !natural) return null;\n\n        const rect = computeCropRect({ image: natural, frame, zoom, offset });\n        if (rect.sWidth <= 0 || rect.sHeight <= 0) return null;\n\n        const out = outputSize(rect, maxSize);\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = out.width;\n        canvas.height = out.height;\n        const context = canvas.getContext(\"2d\");\n        if (!context) return null;\n\n        context.drawImage(\n            image,\n            rect.sx,\n            rect.sy,\n            rect.sWidth,\n            rect.sHeight,\n            0,\n            0,\n            out.width,\n            out.height,\n        );\n\n        return new Promise((resolve) => {\n            canvas.toBlob((blob) => resolve(blob), outputType, outputQuality);\n        });\n    }, [frame, maxSize, natural, offset, outputQuality, outputType, zoom]);\n\n    useImperativeHandle(ref, () => ({ crop, reset }), [crop, reset]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (!natural) return;\n        dragRef.current = {\n            pointerId: event.pointerId,\n            startX: event.clientX,\n            startY: event.clientY,\n            from: offset,\n        };\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        const drag = dragRef.current;\n        if (!drag || drag.pointerId !== event.pointerId) return;\n        pan({\n            x: drag.from.x + (event.clientX - drag.startX),\n            y: drag.from.y + (event.clientY - drag.startY),\n        });\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (dragRef.current?.pointerId !== event.pointerId) return;\n        dragRef.current = null;\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        const step = event.shiftKey ? KEY_STEP * 4 : KEY_STEP;\n        const moves: Record<string, Offset> = {\n            ArrowLeft: { x: -step, y: 0 },\n            ArrowRight: { x: step, y: 0 },\n            ArrowUp: { x: 0, y: -step },\n            ArrowDown: { x: 0, y: step },\n        };\n        const move = moves[event.key];\n        if (move) {\n            event.preventDefault();\n            pan({ x: offset.x + move.x, y: offset.y + move.y });\n            return;\n        }\n        if (event.key === \"+\" || event.key === \"=\") {\n            event.preventDefault();\n            applyZoom(zoom + ZOOM_STEP);\n        } else if (event.key === \"-\" || event.key === \"_\") {\n            event.preventDefault();\n            applyZoom(zoom - ZOOM_STEP);\n        } else if (event.key === \"0\") {\n            event.preventDefault();\n            reset();\n        }\n    };\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            <div\n                ref={frameRef}\n                className={cn(styles.frame, shape === \"circle\" && styles.circle)}\n                style={{ aspectRatio: String(aspect) }}\n                role=\"group\"\n                aria-label={label}\n                aria-describedby={hintId}\n                tabIndex={0}\n                onPointerDown={onPointerDown}\n                onPointerMove={onPointerMove}\n                onPointerUp={endDrag}\n                onPointerCancel={endDrag}\n                onKeyDown={onKeyDown}\n                onWheel={(event) => {\n                    event.preventDefault();\n                    applyZoom(zoom + (event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP));\n                }}\n            >\n                {url && (\n                    <img\n                        ref={imageRef}\n                        src={url}\n                        alt=\"\"\n                        draggable={false}\n                        className={styles.image}\n                        style={{\n                            width: displayed.width || undefined,\n                            height: displayed.height || undefined,\n                            transform: `translate(${offset.x}px, ${offset.y}px)`,\n                        }}\n                        onLoad={(event) => {\n                            const element = event.currentTarget;\n                            // A decode can succeed and still report no intrinsic size —\n                            // an SVG without a viewBox is the common case. Accepting\n                            // that would enable the controls over an image the crop\n                            // maths can do nothing with.\n                            if (element.naturalWidth > 0 && element.naturalHeight > 0) {\n                                setNatural({\n                                    width: element.naturalWidth,\n                                    height: element.naturalHeight,\n                                });\n                            }\n                        }}\n                    />\n                )}\n            </div>\n\n            <div className={styles.controls}>\n                <input\n                    type=\"range\"\n                    className={styles.zoom}\n                    min={1}\n                    max={maxZoom}\n                    step={0.01}\n                    value={zoom}\n                    onChange={(event) => applyZoom(Number(event.target.value))}\n                    aria-label=\"Zoom\"\n                    disabled={!natural}\n                />\n                <button type=\"button\" className={styles.reset} onClick={reset} disabled={!natural}>\n                    Centralizar\n                </button>\n            </div>\n\n            <p id={hintId} className={styles.hint}>\n                Arraste para reposicionar. Setas movem, <kbd>+</kbd> e <kbd>−</kbd> dão zoom,{\" \"}\n                <kbd>0</kbd> centraliza.\n            </p>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAyEA,IAAM,IAAW,IAGX,IAAY;AAuBlB,SAAgB,EAAa,EACzB,QACA,YAAS,GACT,aAAU,GACV,YACA,gBAAa,aACb,mBAAgB,KAChB,WAAQ,QACR,iBACA,WAAQ,mBACR,cACA,QACA,GAAG,KACe;CAQlB,IAAM,IAAS,GAAG,EAAM,EAAE,QAEpB,IAAW,EAAuB,IAAI,GACtC,IAAW,EAAgC,IAAI,GAC/C,IAAU,EAKN,IAAI,GAER,CAAC,GAAK,KAAU,EAAwB,IAAI,GAC5C,CAAC,GAAS,KAAc,EAAsB,IAAI,GAClD,CAAC,GAAO,KAAY,EAAe;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC,GAC1D,CAAC,GAAM,KAAW,EAAS,CAAC,GAC5B,CAAC,GAAQ,KAAa,EAAiB;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CA2B3D,AAlBA,QAAgB;EACZ,IAAI,OAAO,KAAQ,UAAU;GACzB,EAAO,CAAG;GACV;EACJ;EACA,IAAM,IAAY,IAAI,gBAAgB,CAAG;EAEzC,OADA,EAAO,CAAS,SACH,IAAI,gBAAgB,CAAS;CAC9C,GAAG,CAAC,CAAG,CAAC,GAGR,QAAgB;EAGZ,AAFA,EAAW,IAAI,GACf,EAAQ,CAAC,GACT,EAAU;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC;CAC5B,GAAG,CAAC,CAAG,CAAC,GAGR,QAAgB;EACZ,IAAM,IAAU,EAAS;EACzB,IAAI,CAAC,GAAS;EACd,IAAM,UACF,EAAS;GAAE,OAAO,EAAQ;GAAa,QAAQ,EAAQ;EAAa,CAAC;EAEzE,IADA,EAAQ,GACJ,OAAO,iBAAmB,KAAa;EAC3C,IAAM,IAAW,IAAI,eAAe,CAAO;EAE3C,OADA,EAAS,QAAQ,CAAO,SACX,EAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,IAAM,IAAQ,IAAU,EAAW,GAAS,CAAK,IAAI,IAAO,GAStD,IAAY,QAEV,IACM;EAAE,OAAO,EAAQ,QAAQ;EAAO,QAAQ,EAAQ,SAAS;CAAM,IAC/D;EAAE,OAAO;EAAG,QAAQ;CAAE,GAChC,CAAC,GAAS,CAAK,CACnB,GAGM,IAAM,GACP,MAAiB;EACd,GAAW,MAAY;GACnB,IAAM,IAAU,EAAY,GAAM,GAAW,CAAK;GAGlD,OAFI,EAAQ,MAAM,EAAQ,KAAK,EAAQ,MAAM,EAAQ,IAAU,KAC/D,IAAe;IAAE;IAAM,QAAQ;GAAQ,CAAC,GACjC;EACX,CAAC;CACL,GACA;EAAC;EAAW;EAAO;EAAc;CAAI,CACzC,GAQM,IAAY,GACb,MAAiB;EACd,IAAM,IAAc,KAAK,IAAI,GAAS,KAAK,IAAI,GAAG,CAAI,CAAC;EAEvD,IADA,EAAQ,CAAW,GACf,CAAC,GAAS;EACd,IAAM,IAAY,EAAW,GAAS,CAAK,IAAI,GACzC,IAAgB;GAClB,OAAO,EAAQ,QAAQ;GACvB,QAAQ,EAAQ,SAAS;EAC7B;EACA,GAAW,MAAY;GACnB,IAAM,IAAU,EAAY,GAAS,GAAe,CAAK;GAEzD,OADA,IAAe;IAAE,MAAM;IAAa,QAAQ;GAAQ,CAAC,GAC9C;EACX,CAAC;CACL,GACA;EAAC;EAAO;EAAS;EAAS;CAAY,CAC1C,GAEM,IAAQ,QAAkB;EAG5B,AAFA,EAAQ,CAAC,GACT,EAAU;GAAE,GAAG;GAAG,GAAG;EAAE,CAAC,GACxB,IAAe;GAAE,MAAM;GAAG,QAAQ;IAAE,GAAG;IAAG,GAAG;GAAE;EAAE,CAAC;CACtD,GAAG,CAAC,CAAY,CAAC,GAQX,IAAO,EAAY,YAAkC;EACvD,IAAM,IAAQ,EAAS;EACvB,IAAI,CAAC,KAAS,CAAC,GAAS,OAAO;EAE/B,IAAM,IAAO,EAAgB;GAAE,OAAO;GAAS;GAAO;GAAM;EAAO,CAAC;EACpE,IAAI,EAAK,UAAU,KAAK,EAAK,WAAW,GAAG,OAAO;EAElD,IAAM,IAAM,EAAW,GAAM,CAAO,GAC9B,IAAS,SAAS,cAAc,QAAQ;EAE9C,AADA,EAAO,QAAQ,EAAI,OACnB,EAAO,SAAS,EAAI;EACpB,IAAM,IAAU,EAAO,WAAW,IAAI;EAetC,OAdK,KAEL,EAAQ,UACJ,GACA,EAAK,IACL,EAAK,IACL,EAAK,QACL,EAAK,SACL,GACA,GACA,EAAI,OACJ,EAAI,MACR,GAEO,IAAI,SAAS,MAAY;GAC5B,EAAO,QAAQ,MAAS,EAAQ,CAAI,GAAG,GAAY,CAAa;EACpE,CAAC,KAhBoB;CAiBzB,GAAG;EAAC;EAAO;EAAS;EAAS;EAAQ;EAAe;EAAY;CAAI,CAAC;CAErE,EAAoB,UAAY;EAAE;EAAM;CAAM,IAAI,CAAC,GAAM,CAAK,CAAC;CAE/D,IAAM,KAAiB,MAAmD;EACjE,MACL,EAAQ,UAAU;GACd,WAAW,EAAM;GACjB,QAAQ,EAAM;GACd,QAAQ,EAAM;GACd,MAAM;EACV,GACA,EAAM,cAAc,oBAAoB,EAAM,SAAS;CAC3D,GAEM,KAAiB,MAAmD;EACtE,IAAM,IAAO,EAAQ;EACjB,AAAC,KAAQ,EAAK,cAAc,EAAM,aACtC,EAAI;GACA,GAAG,EAAK,KAAK,KAAK,EAAM,UAAU,EAAK;GACvC,GAAG,EAAK,KAAK,KAAK,EAAM,UAAU,EAAK;EAC3C,CAAC;CACL,GAEM,KAAW,MAAmD;EAC5D,EAAQ,SAAS,cAAc,EAAM,cACzC,EAAQ,UAAU;CACtB,GAEM,KAAa,MAA+C;EAC9D,IAAM,IAAO,EAAM,WAAW,KAAe,GAOvC,IAAO;GALT,WAAW;IAAE,GAAG,CAAC;IAAM,GAAG;GAAE;GAC5B,YAAY;IAAE,GAAG;IAAM,GAAG;GAAE;GAC5B,SAAS;IAAE,GAAG;IAAG,GAAG,CAAC;GAAK;GAC1B,WAAW;IAAE,GAAG;IAAG,GAAG;GAAK;EAElB,EAAM,EAAM;EACzB,IAAI,GAAM;GAEN,AADA,EAAM,eAAe,GACrB,EAAI;IAAE,GAAG,EAAO,IAAI,EAAK;IAAG,GAAG,EAAO,IAAI,EAAK;GAAE,CAAC;GAClD;EACJ;EACA,AAAI,EAAM,QAAQ,OAAO,EAAM,QAAQ,OACnC,EAAM,eAAe,GACrB,EAAU,IAAO,CAAS,KACnB,EAAM,QAAQ,OAAO,EAAM,QAAQ,OAC1C,EAAM,eAAe,GACrB,EAAU,IAAO,CAAS,KACnB,EAAM,QAAQ,QACrB,EAAM,eAAe,GACrB,EAAM;CAEd;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,CAAS;EAAG,GAAI;EAAnD,UAAA;GACI,kBAAC,OAAD;IACI,KAAK;IACL,WAAW,EAAG,EAAO,OAAO,MAAU,YAAY,EAAO,MAAM;IAC/D,OAAO,EAAE,aAAa,OAAO,CAAM,EAAE;IACrC,MAAK;IACL,cAAY;IACZ,oBAAkB;IAClB,UAAU;IACK;IACA;IACf,aAAa;IACb,iBAAiB;IACN;IACX,UAAU,MAAU;KAEhB,AADA,EAAM,eAAe,GACrB,EAAU,KAAQ,EAAM,SAAS,IAAI,IAAY,KAAW;IAChE;IAEC,UAAA,KACG,kBAAC,OAAD;KACI,KAAK;KACL,KAAK;KACL,KAAI;KACJ,WAAW;KACX,WAAW,EAAO;KAClB,OAAO;MACH,OAAO,EAAU,SAAS,KAAA;MAC1B,QAAQ,EAAU,UAAU,KAAA;MAC5B,WAAW,aAAa,EAAO,EAAE,MAAM,EAAO,EAAE;KACpD;KACA,SAAS,MAAU;MACf,IAAM,IAAU,EAAM;MAKtB,AAAI,EAAQ,eAAe,KAAK,EAAQ,gBAAgB,KACpD,EAAW;OACP,OAAO,EAAQ;OACf,QAAQ,EAAQ;MACpB,CAAC;KAET;IACH,CAAA;GAEJ,CAAA;GAEL,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACI,kBAAC,SAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,KAAK;KACL,KAAK;KACL,MAAM;KACN,OAAO;KACP,WAAW,MAAU,EAAU,OAAO,EAAM,OAAO,KAAK,CAAC;KACzD,cAAW;KACX,UAAU,CAAC;IACd,CAAA,GACD,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW,EAAO;KAAO,SAAS;KAAO,UAAU,CAAC;KAAS,UAAA;IAE3E,CAAA,CACP;;GAEL,kBAAC,KAAD;IAAG,IAAI;IAAQ,WAAW,EAAO;IAAjC,UAAA;KAAuC;KACK,kBAAC,OAAD,EAAA,UAAK,IAAM,CAAA;KAAC;KAAG,kBAAC,OAAD,EAAA,UAAK,IAAM,CAAA;KAAC;KAAW;KAC9E,kBAAC,OAAD,EAAA,UAAK,IAAM,CAAA;KAAC;IACb;;EACF;;AAEb"}
+{"version":3,"file":"ImageCropper.js","names":["styles","ImageCropper_module_default","KEY_STEP","ZOOM_STEP","ImageCropper","rest","hintId","useId","frameRef","useRef","imageRef","dragRef","url","setUrl","useState","natural","setNatural","frame","setFrame","zoom","setZoom","offset","setOffset","useEffect","src","objectUrl","element","measure","observer","scale","coverScale","displayed","useMemo","pan","useCallback","clamped","clampOffset","next","current","onCropChange","applyZoom","clampedZoom","maxZoom","nextScale","nextDisplayed","reset","crop","image","rect","computeCropRect","out","outputSize","maxSize","canvas","context","resolve","blob","outputType","outputQuality","ref","onPointerDown","event","onPointerMove","drag","endDrag","onKeyDown","step","move","cn","className","shape","aspect","label"],"sources":["../../../src/components/ImageCropper/ImageCropper.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — pointer drag, wheel\n * zoom, aspect clamping and canvas export share one piece of geometry state, and the\n * props are the two halves of that: the frame (aspect, shape, maxZoom, label) and\n * the export (maxSize, outputType, outputQuality, onCropChange, ref). Threading the\n * geometry through props would duplicate the clamp maths.\n */\nimport {\n    type HTMLAttributes,\n    type KeyboardEvent,\n    type PointerEvent as ReactPointerEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport {\n    clampOffset,\n    computeCropRect,\n    coverScale,\n    type Offset,\n    outputSize,\n    type Size,\n} from \"./crop-geometry\";\nimport styles from \"./ImageCropper.module.css\";\n\n/** Imperative handle for exporting the current crop. */\nexport interface ImageCropperHandle {\n    /**\n     * Render the current crop and resolve with it.\n     *\n     * Resolves `null` when the image has not loaded yet or the browser refuses to\n     * encode — never throws, so a submit handler does not need a try/catch.\n     */\n    crop: () => Promise<Blob | null>;\n    /** Recentre at zoom 1. */\n    reset: () => void;\n}\n\nexport interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** The image to crop: a `File`/`Blob` from an input, or a URL. */\n    src: File | Blob | string;\n    /** Crop aspect ratio as `width / height`. Default `1` (square). */\n    aspect?: number;\n    /** Maximum zoom over the cover scale. Default `4`. */\n    maxZoom?: number;\n    /**\n     * Cap on the longest edge of the exported image, in px.\n     *\n     * Without it the export keeps the source resolution, which is right for a\n     * document scan and wasteful for an avatar.\n     */\n    maxSize?: number;\n    /** Output MIME type. Default `\"image/png\"`. */\n    outputType?: string;\n    /** Output quality for lossy types, `0`–`1`. Default `0.92`. */\n    outputQuality?: number;\n    /** Overlay shape. `\"circle\"` for an avatar, `\"rect\"` for a document. Default `\"rect\"`. */\n    shape?: \"rect\" | \"circle\";\n    /** Called whenever the crop changes, e.g. to enable a submit button. */\n    onCropChange?: (state: { zoom: number; offset: Offset }) => void;\n    /** Accessible name for the crop area. */\n    label?: string;\n    ref?: React.Ref<ImageCropperHandle>;\n}\n\n/** Pixels moved per arrow-key press. */\nconst KEY_STEP = 12;\n\n/** Zoom added or removed per `+`/`-` press, and per wheel notch. */\nconst ZOOM_STEP = 0.15;\n\n/**\n * Crop an image to a fixed aspect ratio.\n *\n * The frame stays put and the image pans and zooms behind it — the model an avatar\n * or document-photo flow wants, where the output shape is decided by the app and\n * the user only chooses what lands inside it. (A free-form draggable rectangle is a\n * different component; this one cannot produce an off-ratio crop by construction.)\n *\n * The export reads the *natural* pixels through a canvas, so a 4000 px photo is not\n * silently downsampled to whatever the on-screen preview measured. The image is\n * also always clamped to cover the frame, so an export can never contain the empty\n * bands you get from panning past an edge.\n *\n * Works by pointer, wheel and keyboard: arrows pan, `+`/`-` zoom, `0` resets.\n *\n * @example\n * const cropper = useRef<ImageCropperHandle>(null);\n *\n * <ImageCropper ref={cropper} src={file} aspect={1} shape=\"circle\" maxSize={512} />\n * <Button onClick={async () => upload(await cropper.current?.crop())}>Salvar</Button>\n */\nexport function ImageCropper({\n    src,\n    aspect = 1,\n    maxZoom = 4,\n    maxSize,\n    outputType = \"image/png\",\n    outputQuality = 0.92,\n    shape = \"rect\",\n    onCropChange,\n    label = \"Área de recorte\",\n    className,\n    ref,\n    ...rest\n}: ImageCropperProps) {\n    /**\n     * Id for the shortcut hint.\n     *\n     * Generated rather than derived from `label`: a label with spaces would produce\n     * an id with spaces, and `aria-describedby` splits on whitespace — so the\n     * description would silently never associate with the frame.\n     */\n    const hintId = `${useId()}-hint`;\n\n    const frameRef = useRef<HTMLDivElement>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const dragRef = useRef<{\n        pointerId: number;\n        startX: number;\n        startY: number;\n        from: Offset;\n    } | null>(null);\n\n    const [url, setUrl] = useState<string | null>(null);\n    const [natural, setNatural] = useState<Size | null>(null);\n    const [frame, setFrame] = useState<Size>({ width: 0, height: 0 });\n    const [zoom, setZoom] = useState(1);\n    const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });\n\n    /**\n     * Resolve `src` to a displayable URL.\n     *\n     * A `File`/`Blob` needs `createObjectURL`, and the URL must be revoked when the\n     * source changes or the component unmounts — otherwise every re-pick of a photo\n     * leaks the previous one for the lifetime of the document.\n     */\n    useEffect(() => {\n        if (typeof src === \"string\") {\n            setUrl(src);\n            return;\n        }\n        const objectUrl = URL.createObjectURL(src);\n        setUrl(objectUrl);\n        return () => URL.revokeObjectURL(objectUrl);\n    }, [src]);\n\n    // A new source invalidates the previous framing.\n    useEffect(() => {\n        setNatural(null);\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n    }, [url]);\n\n    /** Track the frame's rendered size — the crop math is all relative to it. */\n    useEffect(() => {\n        const element = frameRef.current;\n        if (!element) return;\n        const measure = () =>\n            setFrame({ width: element.clientWidth, height: element.clientHeight });\n        measure();\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const scale = natural ? coverScale(natural, frame) * zoom : 0;\n\n    /**\n     * On-screen image size.\n     *\n     * Memoized because the pan callback depends on it: a fresh object every render\n     * would rebuild that callback every render, and the pointer handlers close over\n     * it during a drag.\n     */\n    const displayed = useMemo<Size>(\n        () =>\n            natural\n                ? { width: natural.width * scale, height: natural.height * scale }\n                : { width: 0, height: 0 },\n        [natural, scale],\n    );\n\n    /** Apply a pan, clamped so the frame stays covered. */\n    const pan = useCallback(\n        (next: Offset) => {\n            setOffset((current) => {\n                const clamped = clampOffset(next, displayed, frame);\n                if (clamped.x === current.x && clamped.y === current.y) return current;\n                onCropChange?.({ zoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [displayed, frame, onCropChange, zoom],\n    );\n\n    /**\n     * Apply a zoom, then re-clamp the offset.\n     *\n     * Re-clamping is not optional: zooming *out* shrinks the image, so an offset\n     * that was legal a moment ago can now expose background.\n     */\n    const applyZoom = useCallback(\n        (next: number) => {\n            const clampedZoom = Math.min(maxZoom, Math.max(1, next));\n            setZoom(clampedZoom);\n            if (!natural) return;\n            const nextScale = coverScale(natural, frame) * clampedZoom;\n            const nextDisplayed = {\n                width: natural.width * nextScale,\n                height: natural.height * nextScale,\n            };\n            setOffset((current) => {\n                const clamped = clampOffset(current, nextDisplayed, frame);\n                onCropChange?.({ zoom: clampedZoom, offset: clamped });\n                return clamped;\n            });\n        },\n        [frame, maxZoom, natural, onCropChange],\n    );\n\n    const reset = useCallback(() => {\n        setZoom(1);\n        setOffset({ x: 0, y: 0 });\n        onCropChange?.({ zoom: 1, offset: { x: 0, y: 0 } });\n    }, [onCropChange]);\n\n    /**\n     * Draw the current crop and encode it.\n     *\n     * Returns `null` rather than throwing on the paths a caller cannot do anything\n     * about: no image yet, no 2D context, or an encoder that declined.\n     */\n    const crop = useCallback(async (): Promise<Blob | null> => {\n        const image = imageRef.current;\n        if (!image || !natural) return null;\n\n        const rect = computeCropRect({ image: natural, frame, zoom, offset });\n        if (rect.sWidth <= 0 || rect.sHeight <= 0) return null;\n\n        const out = outputSize(rect, maxSize);\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = out.width;\n        canvas.height = out.height;\n        const context = canvas.getContext(\"2d\");\n        if (!context) return null;\n\n        context.drawImage(\n            image,\n            rect.sx,\n            rect.sy,\n            rect.sWidth,\n            rect.sHeight,\n            0,\n            0,\n            out.width,\n            out.height,\n        );\n\n        return new Promise((resolve) => {\n            canvas.toBlob((blob) => resolve(blob), outputType, outputQuality);\n        });\n    }, [frame, maxSize, natural, offset, outputQuality, outputType, zoom]);\n\n    useImperativeHandle(ref, () => ({ crop, reset }), [crop, reset]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (!natural) return;\n        dragRef.current = {\n            pointerId: event.pointerId,\n            startX: event.clientX,\n            startY: event.clientY,\n            from: offset,\n        };\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        const drag = dragRef.current;\n        if (!drag || drag.pointerId !== event.pointerId) return;\n        pan({\n            x: drag.from.x + (event.clientX - drag.startX),\n            y: drag.from.y + (event.clientY - drag.startY),\n        });\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>): void => {\n        if (dragRef.current?.pointerId !== event.pointerId) return;\n        dragRef.current = null;\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        const step = event.shiftKey ? KEY_STEP * 4 : KEY_STEP;\n        const moves: Record<string, Offset> = {\n            ArrowLeft: { x: -step, y: 0 },\n            ArrowRight: { x: step, y: 0 },\n            ArrowUp: { x: 0, y: -step },\n            ArrowDown: { x: 0, y: step },\n        };\n        const move = moves[event.key];\n        if (move) {\n            event.preventDefault();\n            pan({ x: offset.x + move.x, y: offset.y + move.y });\n            return;\n        }\n        if (event.key === \"+\" || event.key === \"=\") {\n            event.preventDefault();\n            applyZoom(zoom + ZOOM_STEP);\n        } else if (event.key === \"-\" || event.key === \"_\") {\n            event.preventDefault();\n            applyZoom(zoom - ZOOM_STEP);\n        } else if (event.key === \"0\") {\n            event.preventDefault();\n            reset();\n        }\n    };\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            <div\n                ref={frameRef}\n                className={cn(styles.frame, shape === \"circle\" && styles.circle)}\n                style={{ aspectRatio: String(aspect) }}\n                role=\"group\"\n                aria-label={label}\n                aria-describedby={hintId}\n                tabIndex={0}\n                onPointerDown={onPointerDown}\n                onPointerMove={onPointerMove}\n                onPointerUp={endDrag}\n                onPointerCancel={endDrag}\n                onKeyDown={onKeyDown}\n                onWheel={(event) => {\n                    event.preventDefault();\n                    applyZoom(zoom + (event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP));\n                }}\n            >\n                {url && (\n                    <img\n                        ref={imageRef}\n                        src={url}\n                        alt=\"\"\n                        draggable={false}\n                        className={styles.image}\n                        style={{\n                            width: displayed.width || undefined,\n                            height: displayed.height || undefined,\n                            transform: `translate(${offset.x}px, ${offset.y}px)`,\n                        }}\n                        onLoad={(event) => {\n                            const element = event.currentTarget;\n                            // A decode can succeed and still report no intrinsic size —\n                            // an SVG without a viewBox is the common case. Accepting\n                            // that would enable the controls over an image the crop\n                            // maths can do nothing with.\n                            if (element.naturalWidth > 0 && element.naturalHeight > 0) {\n                                setNatural({\n                                    width: element.naturalWidth,\n                                    height: element.naturalHeight,\n                                });\n                            }\n                        }}\n                    />\n                )}\n            </div>\n\n            <div className={styles.controls}>\n                <input\n                    type=\"range\"\n                    className={styles.zoom}\n                    min={1}\n                    max={maxZoom}\n                    step={0.01}\n                    value={zoom}\n                    onChange={(event) => applyZoom(Number(event.target.value))}\n                    aria-label=\"Zoom\"\n                    disabled={!natural}\n                />\n                <button type=\"button\" className={styles.reset} onClick={reset} disabled={!natural}>\n                    Centralizar\n                </button>\n            </div>\n\n            <p id={hintId} className={styles.hint}>\n                Arraste para reposicionar. Setas movem, <kbd>+</kbd> e <kbd>−</kbd> dão zoom,{\" \"}\n                <kbd>0</kbd> centraliza.\n            </p>\n        </div>\n    );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ImageCropper.module.cjs","names":[],"sources":["../../../src/components/ImageCropper/ImageCropper.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    max-width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.frame {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    /*\n     * `grab` rather than `move`: nothing is being moved to a destination, the\n     * image is being dragged under a fixed frame.\n     */\n    cursor: grab;\n    /*\n     * The frame owns dragging on touch, so the browser must not also scroll the\n     * page from the same gesture.\n     */\n    touch-action: none;\n    user-select: none;\n}\n\n.frame:active {\n    cursor: grabbing;\n}\n\n.frame:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.circle {\n    border-radius: var(--tempest-radius-full);\n}\n\n.image {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    /*\n     * Both `max-*`, not just the width. The size is set inline from the zoom, so\n     * either cap silently overrides it — and an app reset carrying\n     * `img { max-height: 100% }` is enough, since a 0-0-1 element rule meets no\n     * competition here. The failure is worse than it looks: `crop()` builds its\n     * rectangle from `computeCropRect({ image: natural, ... })` and never reads the\n     * rendered element, so the export stays correct while the preview is squashed\n     * on one axis. The user drags against a distorted image and gets a framing they\n     * never saw. A component that sizes itself inline owns neutralising both caps.\n     */\n    max-width: none;\n    max-height: none;\n    pointer-events: none;\n    /*\n     * Centring lives in `translate` and the pan in the inline `transform`, which\n     * are separate CSS properties applied in that order. Keeping them apart means\n     * a pan is just `transform: translate(x, y)` — it never has to re-derive the\n     * `-50% -50%` centring, and the two cannot overwrite each other.\n     */\n    translate: -50% -50%;\n}\n\n.controls {\n    display: flex;\n    /*\n     * Wraps rather than squeezing. The zoom slider is the flexible item, so on a\n     * narrow row it is the one that gives — and a range input has no useful floor\n     * of its own, so it gave all the way to `width: 0`, leaving the thumb alone and\n     * no visible focus ring while the button beside it kept both. Measured at 390px\n     * with a crowded row. Wrapping moves the slider to its own line instead.\n     */\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n}\n\n.zoom {\n    /*\n     * `min-width: 0` is what let it collapse to nothing: it exists to let a flex\n     * item shrink past its min-content size, which for a range input is the whole\n     * control. A real floor keeps the slider draggable and its focus ring visible;\n     * the wrap on `.controls` is what absorbs the width this refuses to give up.\n     */\n    flex: 1 1 6rem;\n    min-width: 6rem;\n    accent-color: var(--tempest-primary);\n}\n\n.zoom:disabled {\n    opacity: 0.5;\n}\n\n.reset {\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .reset:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.reset:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.reset:disabled {\n    opacity: 0.5;\n    cursor: default;\n}\n\n.hint {\n    margin: 0;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.hint kbd {\n    padding: 0 var(--tempest-space-1);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    background-color: var(--tempest-surface);\n    font-family: var(--tempest-font-mono, monospace);\n    font-size: inherit;\n}\n"],"mappings":";"}
+{"version":3,"file":"ImageCropper.module.cjs","names":["wrapper","frame","circle","image","controls","zoom","reset","hint","ImageCropper_module_default"],"sources":["../../../src/components/ImageCropper/ImageCropper.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    max-width: 100%;\n    font-family: var(--tempest-font-sans);\n}\n\n.frame {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    /*\n     * `grab` rather than `move`: nothing is being moved to a destination, the\n     * image is being dragged under a fixed frame.\n     */\n    cursor: grab;\n    /*\n     * The frame owns dragging on touch, so the browser must not also scroll the\n     * page from the same gesture.\n     */\n    touch-action: none;\n    user-select: none;\n}\n\n.frame:active {\n    cursor: grabbing;\n}\n\n.frame:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.circle {\n    border-radius: var(--tempest-radius-full);\n}\n\n.image {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    /*\n     * Both `max-*`, not just the width. The size is set inline from the zoom, so\n     * either cap silently overrides it — and an app reset carrying\n     * `img { max-height: 100% }` is enough, since a 0-0-1 element rule meets no\n     * competition here. The failure is worse than it looks: `crop()` builds its\n     * rectangle from `computeCropRect({ image: natural, ... })` and never reads the\n     * rendered element, so the export stays correct while the preview is squashed\n     * on one axis. The user drags against a distorted image and gets a framing they\n     * never saw. A component that sizes itself inline owns neutralising both caps.\n     */\n    max-width: none;\n    max-height: none;\n    pointer-events: none;\n    /*\n     * Centring lives in `translate` and the pan in the inline `transform`, which\n     * are separate CSS properties applied in that order. Keeping them apart means\n     * a pan is just `transform: translate(x, y)` — it never has to re-derive the\n     * `-50% -50%` centring, and the two cannot overwrite each other.\n     */\n    translate: -50% -50%;\n}\n\n.controls {\n    display: flex;\n    /*\n     * Wraps rather than squeezing. The zoom slider is the flexible item, so on a\n     * narrow row it is the one that gives — and a range input has no useful floor\n     * of its own, so it gave all the way to `width: 0`, leaving the thumb alone and\n     * no visible focus ring while the button beside it kept both. Measured at 390px\n     * with a crowded row. Wrapping moves the slider to its own line instead.\n     */\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n}\n\n.zoom {\n    /*\n     * `min-width: 0` is what let it collapse to nothing: it exists to let a flex\n     * item shrink past its min-content size, which for a range input is the whole\n     * control. A real floor keeps the slider draggable and its focus ring visible;\n     * the wrap on `.controls` is what absorbs the width this refuses to give up.\n     */\n    flex: 1 1 6rem;\n    min-width: 6rem;\n    accent-color: var(--tempest-primary);\n}\n\n.zoom:disabled {\n    opacity: 0.5;\n}\n\n.reset {\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .reset:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.reset:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.reset:disabled {\n    opacity: 0.5;\n    cursor: default;\n}\n\n.hint {\n    margin: 0;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.hint kbd {\n    padding: 0 var(--tempest-space-1);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    background-color: var(--tempest-surface);\n    font-family: var(--tempest-font-mono, monospace);\n    font-size: inherit;\n}\n"],"mappings":";"}