@sbkbs/ui 1.0.3 → 1.0.5

package/dist/components/Header/Header.js

@@ -0,0 +1,114 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useState as u, useEffect as x } from "react";
+const v = () => typeof document > "u" ? "light" : document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light", M = ({
+  logoSrc: h,
+  logoDarkSrc: i,
+  logoAlt: p = "Logo",
+  title: l,
+  subtitle: d,
+  theme: s,
+  onLogoClick: e,
+  rightContent: m,
+  className: b = ""
+}) => {
+  const [o, w] = u(!1), [y, c] = u(() => s ?? v()), f = y === "dark" && i ? i : h;
+  x(() => {
+    const t = () => w(window.scrollY > 10);
+    return window.addEventListener("scroll", t, { passive: !0 }), () => window.removeEventListener("scroll", t);
+  }, []), x(() => {
+    if (s) {
+      c(s);
+      return;
+    }
+    const t = () => c(v());
+    if (t(), typeof MutationObserver > "u")
+      return;
+    const n = new MutationObserver(t);
+    return n.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme"]
+    }), () => n.disconnect();
+  }, [s]);
+  const N = () => e == null ? void 0 : e(), E = (t) => {
+    t.key === "Enter" && (e == null || e());
+  };
+  return /* @__PURE__ */ a(
+    "header",
+    {
+      className: ["fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]", b].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ r("div", { className: "h-0.5 w-full bg-[var(--md-primary)]" }),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "flex items-center justify-between px-6 py-2 shadow-[var(--shadow-sm)] max-md:flex-col max-md:gap-3 max-md:px-4 max-md:py-3",
+            style: {
+              color: "var(--md-on-surface)",
+              background: `color-mix(in srgb, var(--md-surface) ${o ? "14%" : "18%"}, transparent)`,
+              borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${o ? "22%" : "30%"}, transparent)`
+            },
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: "flex cursor-pointer items-center gap-3 transition-opacity duration-200 ease-in-out hover:opacity-80",
+                  onClick: e ? N : void 0,
+                  onKeyDown: e ? E : void 0,
+                  role: e ? "button" : void 0,
+                  tabIndex: e ? 0 : void 0,
+                  children: [
+                    f && /* @__PURE__ */ a("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center", children: [
+                      /* @__PURE__ */ r(
+                        "img",
+                        {
+                          alt: p,
+                          className: "h-full w-full object-contain",
+                          onError: (t) => {
+                            t.target.style.display = "none";
+                            const n = t.target.nextElementSibling;
+                            n && (n.style.display = "block");
+                          },
+                          src: f
+                        }
+                      ),
+                      /* @__PURE__ */ a(
+                        "svg",
+                        {
+                          className: "hidden h-full w-full",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ r("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                            /* @__PURE__ */ r("path", { d: "M2 17l10 5 10-5M2 12l10 5 10-5" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    (l || d) && /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+                      l && /* @__PURE__ */ r(
+                        "h1",
+                        {
+                          className: "m-0 inline-flex items-baseline text-[1.375rem] font-bold leading-[1.2] tracking-[0.05em] text-[var(--md-on-surface)] max-md:text-xl",
+                          style: { fontFamily: "var(--font-logo)" },
+                          children: l
+                        }
+                      ),
+                      d && /* @__PURE__ */ r("p", { className: "m-0 text-[0.8125rem] font-normal text-[var(--md-on-surface-variant)] max-md:text-xs", children: d })
+                    ] })
+                  ]
+                }
+              ),
+              m && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between", children: m })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  M as Header
+};
+//# sourceMappingURL=Header.js.map

package/dist/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport type { Theme } from '../../theme/ThemeProvider';\n\nexport interface HeaderProps {\n  /** Classe CSS adicional */\n  className?: string;\n  /** Texto alternativo do logo */\n  logoAlt?: string;\n  /** URL da imagem do logo (tema escuro). Se não informado, usa logoSrc. */\n  logoDarkSrc?: string;\n  /** URL da imagem do logo (tema claro) */\n  logoSrc?: string;\n  /** Callback ao clicar na área do logo/título */\n  onLogoClick?: () => void;\n  /** Conteúdo da área direita (ex.: seletor de idioma, toggle tema, menu usuário) */\n  rightContent?: React.ReactNode;\n  /** Subtítulo abaixo do título */\n  subtitle?: React.ReactNode;\n  /** Tema opcional para escolher o logo correto sem depender do ThemeProvider do UI */\n  theme?: Theme;\n  /** Título exibido ao lado do logo (ex.: \"OFÍCIO.IA\") */\n  title?: React.ReactNode;\n}\n\nconst detectTheme = (): Theme => {\n  if (typeof document === 'undefined') {\n    return 'light';\n  }\n\n  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n  logoSrc,\n  logoDarkSrc,\n  logoAlt = 'Logo',\n  title,\n  subtitle,\n  theme,\n  onLogoClick,\n  rightContent,\n  className = '',\n}) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n  const [resolvedTheme, setResolvedTheme] = useState<Theme>(() => theme ?? detectTheme());\n\n  const logoSrcResolved = resolvedTheme === 'dark' && logoDarkSrc ? logoDarkSrc : logoSrc;\n\n  useEffect(() => {\n    const handleScroll = () => setIsScrolled(window.scrollY > 10);\n    window.addEventListener('scroll', handleScroll, { passive: true });\n    return () => window.removeEventListener('scroll', handleScroll);\n  }, []);\n\n  useEffect(() => {\n    if (theme) {\n      setResolvedTheme(theme);\n      return;\n    }\n\n    const syncTheme = () => setResolvedTheme(detectTheme());\n    syncTheme();\n\n    if (typeof MutationObserver === 'undefined') {\n      return;\n    }\n\n    const observer = new MutationObserver(syncTheme);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n\n    return () => observer.disconnect();\n  }, [theme]);\n\n  const handleClick = () => onLogoClick?.();\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      onLogoClick?.();\n    }\n  };\n\n  return (\n    <header\n      className={['fixed inset-x-0 top-0 z-[1000] w-full backdrop-blur-[12px]', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"h-0.5 w-full bg-[var(--md-primary)]\" />\n      <div\n        className=\"flex items-center justify-between px-6 py-2 shadow-[var(--shadow-sm)] max-md:flex-col max-md:gap-3 max-md:px-4 max-md:py-3\"\n        style={{\n          color: 'var(--md-on-surface)',\n          background: `color-mix(in srgb, var(--md-surface) ${\n            isScrolled ? '14%' : '18%'\n          }, transparent)`,\n          borderBottom: `1px solid color-mix(in srgb, var(--md-outline-variant) ${\n            isScrolled ? '22%' : '30%'\n          }, transparent)`,\n        }}\n      >\n        <div\n          className=\"flex cursor-pointer items-center gap-3 transition-opacity duration-200 ease-in-out hover:opacity-80\"\n          onClick={onLogoClick ? handleClick : undefined}\n          onKeyDown={onLogoClick ? handleKeyDown : undefined}\n          role={onLogoClick ? 'button' : undefined}\n          tabIndex={onLogoClick ? 0 : undefined}\n        >\n          {logoSrcResolved && (\n            <div className=\"flex h-16 w-16 shrink-0 items-center justify-center\">\n              <img\n                alt={logoAlt}\n                className=\"h-full w-full object-contain\"\n                onError={(e) => {\n                  (e.target as HTMLImageElement).style.display = 'none';\n                  const next = (e.target as HTMLElement).nextElementSibling as HTMLElement;\n                  if (next) {\n                    next.style.display = 'block';\n                  }\n                }}\n                src={logoSrcResolved}\n              />\n              <svg\n                className=\"hidden h-full w-full\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path d=\"M12 2L2 7l10 5 10-5-10-5z\" />\n                <path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\" />\n              </svg>\n            </div>\n          )}\n          {(title || subtitle) && (\n            <div className=\"flex flex-col gap-1\">\n              {title && (\n                <h1\n                  className=\"m-0 inline-flex items-baseline text-[1.375rem] font-bold leading-[1.2] tracking-[0.05em] text-[var(--md-on-surface)] max-md:text-xl\"\n                  style={{ fontFamily: 'var(--font-logo)' }}\n                >\n                  {title}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"m-0 text-[0.8125rem] font-normal text-[var(--md-on-surface-variant)] max-md:text-xs\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n          )}\n        </div>\n        {rightContent && (\n          <div className=\"flex shrink-0 items-center gap-3 max-md:w-full max-md:flex-wrap max-md:justify-between\">\n            {rightContent}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n};\n"],"names":["detectTheme","Header","logoSrc","logoDarkSrc","logoAlt","title","subtitle","theme","onLogoClick","rightContent","className","isScrolled","setIsScrolled","useState","resolvedTheme","setResolvedTheme","logoSrcResolved","useEffect","handleScroll","syncTheme","observer","handleClick","handleKeyDown","e","jsxs","jsx","next"],"mappings":"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"}

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from 'react';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     error?: string;
     fullWidth?: boolean;
@@ -8,4 +8,4 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     rightIcon?: React.ReactNode;
     size?: 'sm' | 'md' | 'lg';
 }
-export declare const Input: React.FC<InputProps>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,78 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import g from "react";
+import { cn as c } from "../../utils/cn.js";
+const b = g.forwardRef(
+  ({
+    label: i,
+    error: e,
+    helperText: s,
+    leftIcon: t,
+    rightIcon: o,
+    fullWidth: l = !1,
+    size: m = "md",
+    className: v,
+    id: p,
+    ...f
+  }, u) => {
+    const r = p || `input-${Math.random().toString(36).substring(2, 9)}`, n = !!e, x = c(
+      "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:bg-[var(--md-surface-container-high)] disabled:opacity-60",
+      n && "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]",
+      {
+        sm: "min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]",
+        md: "min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]",
+        lg: "min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]"
+      }[m],
+      // icon padding vem depois do sizeClassMap para não ser sobrescrito pelo px-* do tamanho
+      t && "pl-10",
+      o && "pr-10",
+      v
+    );
+    return /* @__PURE__ */ d("div", { className: c("flex flex-col gap-[var(--spacing-xs)]", l && "w-full"), children: [
+      i && /* @__PURE__ */ a(
+        "label",
+        {
+          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+          htmlFor: r,
+          children: i
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "group relative flex w-full items-center", children: [
+        t && /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: t }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            ref: u,
+            "aria-describedby": e ? `${r}-error` : s ? `${r}-helper` : void 0,
+            "aria-invalid": n ? !0 : void 0,
+            className: x,
+            id: r,
+            ...f
+          }
+        ),
+        o && /* @__PURE__ */ a("span", { className: "pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: o })
+      ] }),
+      e && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]",
+          id: `${r}-error`,
+          role: "alert",
+          children: e
+        }
+      ),
+      s && !e && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
+          id: `${r}-helper`,
+          children: s
+        }
+      )
+    ] });
+  }
+);
+b.displayName = "Input";
+export {
+  b as Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  error?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  label?: string;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      error,\n      helperText,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      size = 'md',\n      className,\n      id,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;\n    const hasError = !!error;\n\n    const sizeClassMap: Record<NonNullable<InputProps['size']>, string> = {\n      sm: 'min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]',\n      md: 'min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]',\n      lg: 'min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]',\n    };\n\n    const combinedClass = cn(\n      'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:bg-[var(--md-surface-container-high)] disabled:opacity-60',\n      hasError &&\n        'border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]',\n      sizeClassMap[size],\n      // icon padding vem depois do sizeClassMap para não ser sobrescrito pelo px-* do tamanho\n      leftIcon && 'pl-10',\n      rightIcon && 'pr-10',\n      className,\n    );\n\n    return (\n      <div className={cn('flex flex-col gap-[var(--spacing-xs)]', fullWidth && 'w-full')}>\n        {label && (\n          <label\n            className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n            htmlFor={inputId}\n          >\n            {label}\n          </label>\n        )}\n        <div className=\"group relative flex w-full items-center\">\n          {leftIcon && (\n            <span className=\"pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]\">\n              {leftIcon}\n            </span>\n          )}\n          <input\n            ref={ref}\n            aria-describedby={\n              error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n            }\n            aria-invalid={hasError ? true : undefined}\n            className={combinedClass}\n            id={inputId}\n            {...props}\n          />\n          {rightIcon && (\n            <span className=\"pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]\">\n              {rightIcon}\n            </span>\n          )}\n        </div>\n        {error && (\n          <span\n            className=\"mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]\"\n            id={`${inputId}-error`}\n            role=\"alert\"\n          >\n            {error}\n          </span>\n        )}\n        {helperText && !error && (\n          <span\n            className=\"mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\"\n            id={`${inputId}-helper`}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","React","label","error","helperText","leftIcon","rightIcon","fullWidth","size","className","id","props","ref","inputId","hasError","combinedClass","cn","jsx","jsxs"],"mappings":";;;AAaO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUH,KAAM,SAAS,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC,IACnEI,IAAW,CAAC,CAACX,GAQbY,IAAgBC;AAAA,MACpB;AAAA,MACAF,KACE;AAAA,MATkE;AAAA,QACpE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,EAOSN,CAAI;AAAA;AAAA,MAEjBH,KAAY;AAAA,MACZC,KAAa;AAAA,MACbG;AAAA,IAAA;AAGF,6BACG,OAAA,EAAI,WAAWO,EAAG,yCAAyCT,KAAa,QAAQ,GAC9E,UAAA;AAAA,MAAAL,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASJ;AAAA,UAER,UAAAX;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAgB,EAAC,OAAA,EAAI,WAAU,2CACZ,UAAA;AAAA,QAAAb,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAU,0NACb,UAAAZ,GACH;AAAA,QAEF,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAL;AAAA,YACA,oBACET,IAAQ,GAAGU,CAAO,WAAWT,IAAa,GAAGS,CAAO,YAAY;AAAA,YAElE,gBAAcC,IAAW,KAAO;AAAA,YAChC,WAAWC;AAAA,YACX,IAAIF;AAAA,YACH,GAAGF;AAAA,UAAA;AAAA,QAAA;AAAA,QAELL,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAU,2NACb,UAAAX,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACCH,KACC,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGJ,CAAO;AAAA,UACd,MAAK;AAAA,UAEJ,UAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAc,CAACD,KACd,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGJ,CAAO;AAAA,UAEb,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAJ,EAAM,cAAc;"}

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from './Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Playground: Story;
+export declare const States: Story;
+export declare const Sizes: Story;
+export declare const WithIcons: Story;

package/dist/components/Layout/Layout.js

@@ -0,0 +1,41 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn.js";
+const t = ({ size: s = "lg", className: a, ...l }) => {
+  const g = {
+    sm: "max-w-2xl",
+    md: "max-w-4xl",
+    lg: "max-w-6xl",
+    xl: "max-w-7xl",
+    full: "max-w-none"
+  }[s];
+  return /* @__PURE__ */ m("div", { className: o("mx-auto w-full px-4", g, a), ...l });
+}, n = ({ gap: s = "md", className: a, ...l }) => {
+  const g = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  }[s];
+  return /* @__PURE__ */ m("div", { className: o("flex flex-col", g, a), ...l });
+}, d = ({ cols: s = 2, gap: a = "md", className: l, ...g }) => {
+  const x = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
+  }[s], c = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  }[a];
+  return /* @__PURE__ */ m("div", { className: o("grid", x, c, l), ...g });
+};
+export {
+  t as Container,
+  d as Grid,
+  n as Stack
+};
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sources":["../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\nexport const Container: React.FC<ContainerProps> = ({ size = 'lg', className, ...props }) => {\n  const sizeClass = {\n    sm: 'max-w-2xl',\n    md: 'max-w-4xl',\n    lg: 'max-w-6xl',\n    xl: 'max-w-7xl',\n    full: 'max-w-none',\n  }[size];\n  return <div className={cn('mx-auto w-full px-4', sizeClass, className)} {...props} />;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Stack: React.FC<StackProps> = ({ gap = 'md', className, ...props }) => {\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('flex flex-col', gapClass, className)} {...props} />;\n};\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: 1 | 2 | 3 | 4;\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Grid: React.FC<GridProps> = ({ cols = 2, gap = 'md', className, ...props }) => {\n  const colsClass = {\n    1: 'grid-cols-1',\n    2: 'grid-cols-2',\n    3: 'grid-cols-3',\n    4: 'grid-cols-4',\n  }[cols];\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('grid', colsClass, gapClass, className)} {...props} />;\n};\n"],"names":["Container","size","className","props","sizeClass","jsx","cn","Stack","gap","gapClass","Grid","cols","colsClass"],"mappings":";;AAOO,MAAMA,IAAsC,CAAC,EAAE,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,QAAY;AAC3F,QAAMC,IAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA,EACNH,CAAI;AACN,SAAO,gBAAAI,EAAC,SAAI,WAAWC,EAAG,uBAAuBF,GAAWF,CAAS,GAAI,GAAGC,GAAO;AACrF,GAMaI,IAA8B,CAAC,EAAE,KAAAC,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAClF,QAAMM,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,SAAI,WAAWC,EAAG,iBAAiBG,GAAUP,CAAS,GAAI,GAAGC,GAAO;AAC9E,GAOaO,IAA4B,CAAC,EAAE,MAAAC,IAAO,GAAG,KAAAH,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAC1F,QAAMS,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,EACHD,CAAI,GACAF,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAG,QAAQM,GAAWH,GAAUP,CAAS,GAAI,GAAGC,EAAA,CAAO;AAChF;"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,113 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { useRef as b, useEffect as y } from "react";
+const K = ({
+  isOpen: t,
+  onClose: o,
+  title: l,
+  subtitle: i,
+  children: g,
+  size: w = "md",
+  showCloseButton: m = !0,
+  closeOnOverlayClick: u = !0,
+  className: p = ""
+}) => {
+  const d = b(null), s = b(null);
+  if (y(() => (t ? (s.current = document.activeElement, document.body.style.overflow = "hidden") : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "", s.current && s.current.focus();
+  }), [t]), y(() => {
+    const r = (e) => {
+      e.key === "Escape" && t && o();
+    }, f = (e) => {
+      if (e.key !== "Tab" || !d.current || !t)
+        return;
+      const a = d.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (a.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const v = a[0], x = a[a.length - 1], h = document.activeElement;
+      e.shiftKey && h === v ? (e.preventDefault(), x.focus()) : !e.shiftKey && h === x && (e.preventDefault(), v.focus());
+    };
+    return t && (document.addEventListener("keydown", r), document.addEventListener("keydown", f), requestAnimationFrame(() => {
+      var a;
+      const e = ((a = d.current) == null ? void 0 : a.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )) ?? d.current;
+      e == null || e.focus();
+    })), () => {
+      document.removeEventListener("keydown", r), document.removeEventListener("keydown", f);
+    };
+  }, [t, o]), !t)
+    return null;
+  const k = (r) => {
+    u && r.target === r.currentTarget && o();
+  }, E = (r) => {
+    u && (r.key === "Enter" || r.key === " ") && r.target === r.currentTarget && o();
+  }, N = [
+    "relative z-[var(--z-index-modal)] m-auto flex w-full max-h-[90vh] max-w-full flex-col overflow-hidden rounded-[var(--border-radius-2xl)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] shadow-[var(--shadow-2xl)]",
+    {
+      sm: "max-w-[25rem]",
+      md: "max-w-[31.25rem]",
+      lg: "max-w-[43.75rem]",
+      xl: "max-w-[56.25rem]",
+      full: "max-h-[90vh] max-w-[90vw]"
+    }[w],
+    p
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "aria-labelledby": l ? "modal-title" : void 0,
+      "aria-modal": "true",
+      className: "fixed inset-0 z-[var(--z-index-modal-backdrop)] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 p-[var(--spacing-lg)] backdrop-blur-[8px]",
+      onClick: k,
+      onKeyDown: E,
+      role: "dialog",
+      children: /* @__PURE__ */ c("div", { className: N, ref: d, tabIndex: -1, children: [
+        (l || i || m) && /* @__PURE__ */ c("div", { className: "flex shrink-0 items-start justify-between gap-[var(--spacing-lg)] border-b border-[var(--md-outline-variant)] p-[var(--spacing-2xl)]", children: [
+          (l || i) && /* @__PURE__ */ c("div", { className: "flex-1", children: [
+            l && /* @__PURE__ */ n(
+              "h2",
+              {
+                className: "mb-[var(--spacing-xs)] mt-0 text-[var(--font-size-2xl)] font-[var(--font-weight-semibold)] leading-[var(--line-height-tight)] text-[var(--md-on-surface)]",
+                id: "modal-title",
+                children: l
+              }
+            ),
+            i && /* @__PURE__ */ n("p", { className: "m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]", children: i })
+          ] }),
+          m && /* @__PURE__ */ n(
+            "button",
+            {
+              "aria-label": "Fechar modal",
+              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--border-radius-md)] border-0 bg-[var(--md-surface-container-high)] text-[var(--md-on-surface)] transition-[var(--transition-all)] hover:bg-[color:color-mix(in_srgb,var(--md-error)_15%,var(--md-surface))] hover:text-[var(--md-error)]",
+              onClick: o,
+              type: "button",
+              children: /* @__PURE__ */ c(
+                "svg",
+                {
+                  fill: "none",
+                  className: "h-5 w-5",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ n("line", { x1: "18", x2: "6", y1: "6", y2: "18" }),
+                    /* @__PURE__ */ n("line", { x1: "6", x2: "18", y1: "6", y2: "18" })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]", children: g })
+      ] })
+    }
+  );
+};
+export {
+  K as Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport interface ModalProps {\n  children: React.ReactNode;\n  className?: string;\n  closeOnOverlayClick?: boolean;\n  isOpen: boolean;\n  onClose: () => void;\n  showCloseButton?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  subtitle?: string;\n  title?: string | React.ReactNode;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  children,\n  size = 'md',\n  showCloseButton = true,\n  closeOnOverlayClick = true,\n  className = '',\n}) => {\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const lastFocusedElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      lastFocusedElementRef.current = document.activeElement as HTMLElement | null;\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n      if (lastFocusedElementRef.current) {\n        lastFocusedElementRef.current.focus();\n      }\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen) {\n        onClose();\n      }\n    };\n    const handleTabTrap = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || !dialogRef.current || !isOpen) {\n        return;\n      }\n\n      const focusable = dialogRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      );\n\n      if (focusable.length === 0) {\n        e.preventDefault();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape);\n      document.addEventListener('keydown', handleTabTrap);\n      requestAnimationFrame(() => {\n        const initialTarget =\n          dialogRef.current?.querySelector<HTMLElement>(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n          ) ?? dialogRef.current;\n        initialTarget?.focus();\n      });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n      document.removeEventListener('keydown', handleTabTrap);\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && e.target === e.currentTarget) {\n      onClose();\n    }\n  };\n\n  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      closeOnOverlayClick &&\n      (e.key === 'Enter' || e.key === ' ') &&\n      e.target === e.currentTarget\n    ) {\n      onClose();\n    }\n  };\n\n  const sizeClassMap: Record<NonNullable<ModalProps['size']>, string> = {\n    sm: 'max-w-[25rem]',\n    md: 'max-w-[31.25rem]',\n    lg: 'max-w-[43.75rem]',\n    xl: 'max-w-[56.25rem]',\n    full: 'max-h-[90vh] max-w-[90vw]',\n  };\n  const combinedClass = [\n    'relative z-[var(--z-index-modal)] m-auto flex w-full max-h-[90vh] max-w-full flex-col overflow-hidden rounded-[var(--border-radius-2xl)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] shadow-[var(--shadow-2xl)]',\n    sizeClassMap[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      aria-labelledby={title ? 'modal-title' : undefined}\n      aria-modal=\"true\"\n      className=\"fixed inset-0 z-[var(--z-index-modal-backdrop)] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 p-[var(--spacing-lg)] backdrop-blur-[8px]\"\n      onClick={handleOverlayClick}\n      onKeyDown={handleOverlayKeyDown}\n      role=\"dialog\"\n    >\n      <div className={combinedClass} ref={dialogRef} tabIndex={-1}>\n        {(title || subtitle || showCloseButton) && (\n          <div className=\"flex shrink-0 items-start justify-between gap-[var(--spacing-lg)] border-b border-[var(--md-outline-variant)] p-[var(--spacing-2xl)]\">\n            {(title || subtitle) && (\n              <div className=\"flex-1\">\n                {title && (\n                  <h2\n                    className=\"mb-[var(--spacing-xs)] mt-0 text-[var(--font-size-2xl)] font-[var(--font-weight-semibold)] leading-[var(--line-height-tight)] text-[var(--md-on-surface)]\"\n                    id=\"modal-title\"\n                  >\n                    {title}\n                  </h2>\n                )}\n                {subtitle && (\n                  <p className=\"m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]\">\n                    {subtitle}\n                  </p>\n                )}\n              </div>\n            )}\n            {showCloseButton && (\n              <button\n                aria-label=\"Fechar modal\"\n                className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--border-radius-md)] border-0 bg-[var(--md-surface-container-high)] text-[var(--md-on-surface)] transition-[var(--transition-all)] hover:bg-[color:color-mix(in_srgb,var(--md-error)_15%,var(--md-surface))] hover:text-[var(--md-error)]\"\n                onClick={onClose}\n                type=\"button\"\n              >\n                <svg\n                  fill=\"none\"\n                  className=\"h-5 w-5\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <line x1=\"18\" x2=\"6\" y1=\"6\" y2=\"18\" />\n                  <line x1=\"6\" x2=\"18\" y1=\"6\" y2=\"18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","isOpen","onClose","title","subtitle","children","size","showCloseButton","closeOnOverlayClick","className","dialogRef","useRef","lastFocusedElementRef","useEffect","handleEscape","handleTabTrap","focusable","first","last","active","initialTarget","_a","handleOverlayClick","e","handleOverlayKeyDown","combinedClass","jsx","jsxs"],"mappings":"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"}

package/dist/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const WithForm: Story;

package/dist/components/Navigation/Navigation.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+const s = ({ className: r, ...e }) => /* @__PURE__ */ o(
+  "aside",
+  {
+    className: a(
+      "h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
+      r
+    ),
+    ...e
+  }
+), c = ({ className: r, ...e }) => /* @__PURE__ */ o(
+  "header",
+  {
+    className: a(
+      "flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4",
+      r
+    ),
+    ...e
+  }
+);
+export {
+  s as Sidebar,
+  c as Topbar
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/components/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {}\nexport const Sidebar: React.FC<SidebarProps> = ({ className, ...props }) => (\n  <aside\n    className={cn(\n      'h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport interface TopbarProps extends React.HTMLAttributes<HTMLElement> {}\nexport const Topbar: React.FC<TopbarProps> = ({ className, ...props }) => (\n  <header\n    className={cn(\n      'flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4',\n      className,\n    )}\n    {...props}\n  />\n);\n"],"names":["Sidebar","className","props","jsx","cn","Topbar"],"mappings":";;AAIO,MAAMA,IAAkC,CAAC,EAAE,WAAAC,GAAW,GAAGC,QAC9D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,GAIWG,IAAgC,CAAC,EAAE,WAAAJ,GAAW,GAAGC,QAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
+    error?: string;
+    helperText?: string;
+    label?: string;
+    max?: number;
+    min?: number;
+    onChange?: (value: number | null) => void;
+    size?: 'sm' | 'md' | 'lg';
+    step?: number;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,135 @@
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import _ from "react";
+import { cn as l } from "../../utils/cn.js";
+const M = _.forwardRef(
+  ({
+    label: x,
+    error: i,
+    helperText: v,
+    size: u = "md",
+    min: s,
+    max: n,
+    step: m = 1,
+    onChange: r,
+    className: w,
+    id: y,
+    value: b,
+    defaultValue: a,
+    disabled: c,
+    ...g
+  }, z) => {
+    const e = y || `number-input-${Math.random().toString(36).slice(2, 9)}`, p = !!i, $ = {
+      sm: "min-h-8 text-[var(--font-size-sm)]",
+      md: "min-h-10 text-[var(--font-size-base)]",
+      lg: "min-h-12 text-[var(--font-size-lg)]"
+    }, h = {
+      sm: "h-8 w-7 text-sm",
+      md: "h-10 w-8 text-base",
+      lg: "h-12 w-9 text-lg"
+    }, d = b !== void 0 ? Number(b) : void 0, j = () => {
+      const t = (d ?? (a !== void 0 ? Number(a) : 0)) - m;
+      (s === void 0 || t >= s) && (r == null || r(t));
+    }, k = () => {
+      const t = (d ?? (a !== void 0 ? Number(a) : 0)) + m;
+      (n === void 0 || t <= n) && (r == null || r(t));
+    }, I = (f) => {
+      const t = f.target.value;
+      r == null || r(t === "" ? null : Number(t));
+    };
+    return /* @__PURE__ */ N("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
+      x && /* @__PURE__ */ o(
+        "label",
+        {
+          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+          htmlFor: e,
+          children: x
+        }
+      ),
+      /* @__PURE__ */ N(
+        "div",
+        {
+          className: l(
+            "inline-flex overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] transition focus-within:border-[var(--border-color-focus)] focus-within:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)]",
+            p && "border-[var(--md-error)] focus-within:border-[var(--md-error)]",
+            c && "cursor-not-allowed opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                "aria-label": "Diminuir",
+                className: l(
+                  "flex shrink-0 items-center justify-center border-r border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-color-focus)]",
+                  h[u]
+                ),
+                disabled: c || s !== void 0 && (d ?? 0) <= s,
+                onClick: j,
+                type: "button",
+                children: "−"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: z,
+                "aria-describedby": i ? `${e}-error` : v ? `${e}-helper` : void 0,
+                "aria-invalid": p ? !0 : void 0,
+                className: l(
+                  "w-full min-w-0 bg-transparent px-3 text-center text-[var(--md-on-surface)] outline-none",
+                  $[u],
+                  w
+                ),
+                defaultValue: a,
+                disabled: c,
+                id: e,
+                max: n,
+                min: s,
+                step: m,
+                type: "number",
+                value: b,
+                onChange: I,
+                ...g
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                "aria-label": "Aumentar",
+                className: l(
+                  "flex shrink-0 items-center justify-center border-l border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-color-focus)]",
+                  h[u]
+                ),
+                disabled: c || n !== void 0 && (d ?? 0) >= n,
+                onClick: k,
+                type: "button",
+                children: "+"
+              }
+            )
+          ]
+        }
+      ),
+      i && /* @__PURE__ */ o(
+        "span",
+        {
+          className: "text-[var(--font-size-xs)] text-[var(--md-error)]",
+          id: `${e}-error`,
+          role: "alert",
+          children: i
+        }
+      ),
+      v && !i && /* @__PURE__ */ o(
+        "span",
+        {
+          className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
+          id: `${e}-helper`,
+          children: v
+        }
+      )
+    ] });
+  }
+);
+M.displayName = "NumberInput";
+export {
+  M as NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map