@12min/ds 0.1.0 → 3.0.0

package/dist/index.web.mjs

@@ -1,13 +1,653 @@
 import {
+  DEFAULT_OPTIONS,
   darkTheme,
   lightTheme
-} from "./chunk-QIJRSFZB.mjs";
+} from "./chunk-ZKPOS2PD.mjs";
 import {
-  colors
-} from "./chunk-E2C4G6H4.mjs";
+  borderWidth,
+  colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
+} from "./chunk-ZK7NW4WW.mjs";
+
+// src/components/Button/Button.web.tsx
+import { cva } from "class-variance-authority";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Button/Button.web.tsx
+import { jsx } from "react/jsx-runtime";
+var button = cva(
+  "inline-flex items-center justify-center gap-2 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white",
+  {
+    variants: {
+      variant: {
+        primary: "bg-marian-blue-600 text-white dark:text-midnight-900 enabled:hover:bg-marian-blue-700 dark:enabled:hover:bg-marian-blue-500 enabled:active:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-600 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        secondary: "bg-marian-blue-200 text-marian-blue-900 dark:bg-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-300 dark:enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-400 dark:enabled:active:bg-marian-blue-700 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        ghost: "bg-transparent text-marian-blue-600 dark:text-marian-blue-300 enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600"
+      },
+      size: {
+        sm: "h-8 px-3 text-button-small",
+        md: "h-10 px-4 text-button-default",
+        lg: "h-12 px-6 text-button-large"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "lg"
+    }
+  }
+);
+function Button({ variant, size, disabled, children, onClick, type = "button", className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      className: cn(button({ variant, size }), className),
+      children
+    }
+  );
+}
+
+// src/components/ButtonIcon/ButtonIcon.web.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonIcon = cva2(
+  "inline-flex items-center justify-center shrink-0 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white",
+  {
+    variants: {
+      variant: {
+        primary: "bg-marian-blue-600 text-white dark:text-midnight-900 enabled:hover:bg-marian-blue-700 dark:enabled:hover:bg-marian-blue-500 enabled:active:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-600 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        secondary: "bg-marian-blue-200 text-marian-blue-900 dark:bg-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-300 dark:enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-400 dark:enabled:active:bg-marian-blue-700 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        ghost: "bg-transparent text-marian-blue-600 dark:text-marian-blue-300 enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600",
+        overlay: "bg-overlay-black-8 text-marian-blue-900 dark:bg-overlay-white-8 dark:text-white enabled:hover:bg-overlay-black-12 dark:enabled:hover:bg-overlay-white-12 enabled:active:bg-overlay-black-16 dark:enabled:active:bg-overlay-white-16 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600"
+      },
+      size: {
+        sm: "size-10",
+        md: "size-12",
+        lg: "size-16"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function ButtonIcon({ variant, size, icon, label, disabled, onClick, type = "button", className }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type,
+      disabled,
+      onClick,
+      "aria-label": label,
+      className: cn(buttonIcon({ variant, size }), className),
+      children: icon
+    }
+  );
+}
+
+// src/components/DismissButton/DismissButton.web.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var dismissButton = cva3(
+  "inline-flex items-center justify-center shrink-0 rounded-full transition-colors disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white",
+  {
+    variants: {
+      variant: {
+        subtle: "bg-overlay-black-8 text-marian-blue-900 dark:bg-overlay-white-8 dark:text-white enabled:hover:bg-overlay-black-12 dark:enabled:hover:bg-overlay-white-12 enabled:active:bg-overlay-black-16 dark:enabled:active:bg-overlay-white-16 disabled:bg-gray-25 disabled:text-gray-400 dark:disabled:bg-midnight-700 dark:disabled:text-gray-600",
+        ghost: "bg-transparent text-marian-blue-900 dark:text-white enabled:hover:bg-marian-blue-200 dark:enabled:hover:bg-marian-blue-900 enabled:active:bg-marian-blue-300 dark:enabled:active:bg-marian-blue-800 disabled:text-gray-400 dark:disabled:text-gray-600"
+      },
+      size: {
+        xs: "size-5",
+        sm: "size-8",
+        md: "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "subtle",
+      size: "sm"
+    }
+  }
+);
+var glyphSize = {
+  xs: 12,
+  sm: 16,
+  md: 20
+};
+function DismissButton({ variant, size = "sm", label = "Fechar", disabled, onClick, className }) {
+  const s = glyphSize[size ?? "sm"];
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick,
+      "aria-label": label,
+      className: cn(dismissButton({ variant, size }), className),
+      children: /* @__PURE__ */ jsx3("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18M6 6l12 12" }) })
+    }
+  );
+}
+
+// src/components/Chip/Chip.web.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var sizeCls = {
+  sm: "h-8 px-3 text-xs leading-4 tracking-[0.5px]",
+  md: "h-11 px-4 text-sm leading-5"
+};
+function Chip({ children, checked = false, disabled = false, size = "md", leading, trailing, onClick, className }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "button",
+      "aria-pressed": checked,
+      disabled,
+      onClick,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 rounded-full border border-solid transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white",
+        sizeCls[size],
+        checked ? "font-semibold" : "font-medium",
+        disabled ? "cursor-not-allowed border-gray-50 bg-gray-25 text-gray-400 dark:border-midnight-700 dark:bg-midnight-700 dark:text-gray-600" : checked ? "cursor-pointer border-marian-blue-700 bg-marian-blue-700 text-white enabled:hover:bg-marian-blue-800 enabled:active:bg-marian-blue-900 dark:border-marian-blue-800 dark:bg-marian-blue-800 dark:enabled:hover:bg-marian-blue-900" : "cursor-pointer border-marian-blue-200 bg-transparent text-marian-blue-900 enabled:hover:bg-marian-blue-700/[0.08] enabled:active:bg-marian-blue-700/[0.12] dark:border-midnight-50 dark:text-white dark:enabled:hover:bg-marian-blue-800/[0.08] dark:enabled:active:bg-marian-blue-800/[0.12]",
+        className
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsx4("span", { className: "shrink-0", children: leading }),
+        children,
+        trailing && /* @__PURE__ */ jsx4("span", { className: "shrink-0", children: trailing })
+      ]
+    }
+  );
+}
+
+// src/components/Alert/Alert.web.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var variantStyles = {
+  success: { bg: "bg-green-100 dark:bg-green-800", icon: "text-green-text" },
+  info: { bg: "bg-blue-100 dark:bg-blue-700", icon: "text-blue-600 dark:text-blue-100" },
+  warning: { bg: "bg-amber-100 dark:bg-amber-800", icon: "text-amber-600 dark:text-amber-100" },
+  error: { bg: "bg-ketchup-100 dark:bg-ketchup-800", icon: "text-ketchup-600 dark:text-ketchup-text" }
+};
+function AlertIcon({ variant }) {
+  const common = { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M8.5 12.5 11 15l4.5-5" })
+      ] });
+    case "error":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M15 9l-6 6M9 9l6 6" })
+      ] });
+    case "warning":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M12 7.5v5M12 16h.01" })
+      ] });
+    case "info":
+      return /* @__PURE__ */ jsxs2("svg", { ...common, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx5("path", { d: "M12 11v5M12 8h.01" })
+      ] });
+  }
+}
+function Alert({ variant = "info", size = "default", layout = "stacked", title, description, onDismiss, className }) {
+  const styles = variantStyles[variant];
+  const pad = size === "compact" ? "p-3" : "p-5";
+  const gap = size === "compact" ? "gap-2" : "gap-3";
+  const icon = /* @__PURE__ */ jsx5("span", { className: cn("shrink-0", styles.icon), children: /* @__PURE__ */ jsx5(AlertIcon, { variant }) });
+  const body = description && /* @__PURE__ */ jsx5("p", { className: "text-body-default text-gray-700 dark:text-gray-300 w-full", children: description });
+  const close = onDismiss && /* @__PURE__ */ jsx5("button", { type: "button", onClick: onDismiss, "aria-label": "Fechar", className: "shrink-0 text-marian-blue-900 dark:text-white", children: /* @__PURE__ */ jsx5("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18M6 6l12 12" }) }) });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: variant === "error" ? "alert" : "status",
+      className: cn(
+        "flex w-full items-start rounded-tl-2xl rounded-tr-2xl rounded-br-2xl border border-solid border-overlay-black-5 dark:border-overlay-white-5",
+        pad,
+        gap,
+        styles.bg,
+        className
+      ),
+      children: [
+        layout === "inline" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          icon,
+          body
+        ] }) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+            icon,
+            title && /* @__PURE__ */ jsx5("p", { className: "flex-1 text-h3 text-marian-blue-900 dark:text-white", children: title })
+          ] }),
+          body
+        ] }),
+        close
+      ]
+    }
+  );
+}
+
+// src/components/ProgressBar/ProgressBar.web.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ProgressBar({ value, className }) {
+  const pct = Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": pct,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn(
+        "relative h-2 w-full rounded-full bg-gray-15 overflow-hidden dark:bg-midnight-800",
+        className
+      ),
+      children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 bg-marian-blue-600 rounded-full transition-[width]",
+          style: { width: `${pct}%` }
+        }
+      )
+    }
+  );
+}
+
+// src/components/Input/Input.web.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Input({ value, placeholder = "exemplo@email.com", state = "default", leadingIcon, trailingIcon, onChange, className }) {
+  const isDisabled = state === "disabled";
+  const isError = state === "error";
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 h-12 px-3 rounded-input border border-solid text-body-default transition-colors",
+        "focus-within:ring-2 focus-within:ring-black dark:focus-within:ring-white",
+        isDisabled ? "bg-gray-25 border-gray-50 text-gray-400 cursor-not-allowed dark:bg-midnight-700 dark:border-midnight-700 dark:text-gray-600" : isError ? "bg-white border-ketchup-600 text-ketchup-text dark:bg-midnight-900 dark:border-ketchup-500 dark:text-ketchup-600" : "bg-white border-marian-blue-200 text-marian-blue-900 dark:bg-midnight-900 dark:border-midnight-50 dark:text-white",
+        className
+      ),
+      children: [
+        leadingIcon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-current", children: leadingIcon }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "text",
+            value,
+            placeholder,
+            disabled: isDisabled,
+            onChange,
+            className: "flex-1 bg-transparent outline-none text-current placeholder:text-gray-500 min-w-0"
+          }
+        ),
+        trailingIcon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-current", children: trailingIcon })
+      ]
+    }
+  );
+}
+
+// src/components/InputField/InputField.web.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function InputField({
+  label,
+  required,
+  helperText,
+  error,
+  value,
+  placeholder,
+  disabled,
+  leadingIcon,
+  trailingIcon,
+  onChange,
+  className
+}) {
+  const state = disabled ? "disabled" : error ? "error" : "default";
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-2 w-full", className), children: [
+    /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-0.5 text-label-default text-marian-blue-900 dark:text-white", children: [
+        label,
+        required && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-ketchup-text dark:text-ketchup-600", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        Input,
+        {
+          state,
+          value,
+          placeholder,
+          leadingIcon,
+          trailingIcon,
+          onChange
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsx8("span", { className: cn("text-caption", error ? "text-ketchup-text dark:text-ketchup-600" : "text-gray-700 dark:text-gray-300"), children: helperText })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.web.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var boxSize = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-6"
+};
+function CheckIcon() {
+  return /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("path", { d: "M5 12.5 10 17.5 19 7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Checkbox({ checked = false, onChange, disabled = false, size = "sm", className }) {
+  return /* @__PURE__ */ jsxs5(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full p-1 transition-colors",
+        disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-marian-blue-700/[0.08] active:bg-marian-blue-700/[0.12] dark:hover:bg-marian-blue-800/[0.08] dark:active:bg-marian-blue-800/[0.12]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: () => onChange?.(!checked),
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center rounded-[6px] border-2 transition-colors",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-marian-blue-900 dark:peer-focus-visible:ring-white",
+              boxSize[size],
+              checked ? disabled ? "bg-gray-25 border-gray-25 text-gray-400 dark:bg-midnight-700 dark:border-midnight-700 dark:text-gray-600" : "bg-marian-blue-700 border-marian-blue-700 text-white dark:bg-marian-blue-800 dark:border-marian-blue-800" : disabled ? "border-gray-400 dark:border-gray-600" : "border-gray-600 dark:border-gray-400"
+            ),
+            children: checked && /* @__PURE__ */ jsx9(CheckIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ToggleSwitch/ToggleSwitch.web.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var trackSize = {
+  xs: "w-8 h-5",
+  sm: "w-10 h-6",
+  md: "w-[52px] h-8"
+};
+var knobSize = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-7"
+};
+var knobOn = {
+  xs: "translate-x-3",
+  sm: "translate-x-4",
+  md: "translate-x-5"
+};
+function ToggleSwitch({ value = false, onChange, disabled = false, size = "sm", label, className }) {
+  return /* @__PURE__ */ jsx10(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": value,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange?.(!value),
+      className: cn(
+        "inline-flex shrink-0 items-center rounded-full p-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white",
+        trackSize[size],
+        disabled ? "cursor-not-allowed bg-gray-25 dark:bg-midnight-700" : value ? "cursor-pointer bg-marian-blue-700 dark:bg-marian-blue-800" : "cursor-pointer bg-gray-25 dark:bg-midnight-700",
+        className
+      ),
+      children: /* @__PURE__ */ jsx10(
+        "span",
+        {
+          className: cn(
+            "rounded-full transition-transform",
+            knobSize[size],
+            disabled ? "bg-gray-400 dark:bg-gray-600" : "bg-white dark:bg-midnight-900",
+            value ? knobOn[size] : "translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/components/RadioGroup/RadioGroup.web.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function RadioGroup({ children, label, className }) {
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cn("flex flex-col gap-2", className),
+      children
+    }
+  );
+}
+
+// src/components/ChoiceCard/ChoiceCard.web.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function containerClass(selected, disabled) {
+  if (disabled) {
+    return "cursor-not-allowed border border-gray-50 bg-white dark:border-midnight-700 dark:bg-midnight-900";
+  }
+  if (selected) {
+    return "cursor-pointer border-2 border-marian-blue-600 bg-marian-blue-200 enabled:hover:bg-marian-blue-300 enabled:active:bg-marian-blue-400 dark:border-marian-blue-300 dark:bg-marian-blue-900 dark:enabled:hover:bg-marian-blue-800 dark:enabled:active:bg-marian-blue-700";
+  }
+  return "cursor-pointer border border-marian-blue-200 bg-white enabled:hover:bg-gray-15 enabled:active:bg-gray-35 dark:border-midnight-50 dark:bg-midnight-900 dark:enabled:hover:bg-midnight-800 dark:enabled:active:bg-midnight-600";
+}
+function CheckGlyph() {
+  return /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { d: "M5 12.5 10 17.5 19 7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Trailing({ type, selected, disabled }) {
+  const off = disabled ? "border-gray-400 dark:border-gray-600" : "border-gray-600 dark:border-gray-400";
+  const on = "border-marian-blue-700 dark:border-marian-blue-800";
+  if (type === "action") {
+    return /* @__PURE__ */ jsx12("span", { className: cn("shrink-0", disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"), children: /* @__PURE__ */ jsx12("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { d: "M9 6l6 6-6 6" }) }) });
+  }
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx12("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-[6px] border-2", selected ? cn(on, "bg-marian-blue-700 text-white dark:bg-marian-blue-800") : off), children: selected && /* @__PURE__ */ jsx12(CheckGlyph, {}) });
+  }
+  return /* @__PURE__ */ jsx12("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-full border-2", selected ? on : off), children: selected && /* @__PURE__ */ jsx12("span", { className: "size-3 rounded-full bg-marian-blue-700 dark:bg-marian-blue-800" }) });
+}
+function ChoiceCard({ type = "radio", label, description, selected = false, disabled = false, leading, showTrailing = true, onClick, className }) {
+  const isSelected = type === "action" ? false : selected;
+  const textColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-marian-blue-900 dark:text-white";
+  const descColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-700 dark:text-gray-300";
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      role: type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "button",
+      "aria-checked": type === "action" ? void 0 : isSelected,
+      disabled,
+      onClick,
+      className: cn(
+        "flex w-full items-center gap-3 rounded-[20px] p-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white",
+        containerClass(isSelected, disabled),
+        className
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsx12("span", { className: "flex size-6 shrink-0 items-center justify-center", children: leading }),
+        /* @__PURE__ */ jsxs6("span", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+          /* @__PURE__ */ jsx12("span", { className: cn("text-sm leading-5", description ? "font-semibold" : "font-medium", textColor), children: label }),
+          description && /* @__PURE__ */ jsx12("span", { className: cn("text-sm font-medium leading-5", descColor), children: description })
+        ] }),
+        showTrailing && /* @__PURE__ */ jsx12(Trailing, { type, selected: isSelected, disabled })
+      ]
+    }
+  );
+}
+
+// src/components/ListItem/ListItem.web.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function CheckGlyph2() {
+  return /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 24 24", fill: "none", className: "w-3/4 h-3/4", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M5 12.5 10 17.5 19 7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function TrailingVisual({ trailing, selected, disabled }) {
+  const off = disabled ? "border-gray-400 dark:border-gray-600" : "border-gray-600 dark:border-gray-400";
+  const on = "border-marian-blue-700 dark:border-marian-blue-800";
+  if (trailing === "action") {
+    return /* @__PURE__ */ jsx13("span", { className: cn("shrink-0", disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-600 dark:text-gray-400"), children: /* @__PURE__ */ jsx13("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M9 6l6 6-6 6" }) }) });
+  }
+  if (trailing === "checkbox") {
+    return /* @__PURE__ */ jsx13("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-[6px] border-2", selected ? cn(on, "bg-marian-blue-700 text-white dark:bg-marian-blue-800") : off), children: selected && /* @__PURE__ */ jsx13(CheckGlyph2, {}) });
+  }
+  return /* @__PURE__ */ jsx13("span", { className: cn("flex size-6 shrink-0 items-center justify-center rounded-full border-2", selected ? on : off), children: selected && /* @__PURE__ */ jsx13("span", { className: "size-3 rounded-full bg-marian-blue-700 dark:bg-marian-blue-800" }) });
+}
+function ListItem({ trailing = "none", label, description, selected = false, disabled = false, leading, switchValue = false, onSwitchChange, onClick, className }) {
+  const isSelected = trailing === "radio" || trailing === "checkbox" ? selected : false;
+  const pad = description ? "p-4" : "p-2.5";
+  const textColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-marian-blue-900 dark:text-white";
+  const descColor = disabled ? "text-gray-400 dark:text-gray-600" : "text-gray-700 dark:text-gray-300";
+  const hover = disabled ? "" : isSelected ? "hover:bg-marian-blue-300 active:bg-marian-blue-400 dark:hover:bg-marian-blue-800 dark:active:bg-marian-blue-700" : "hover:bg-gray-15 active:bg-gray-35 dark:hover:bg-midnight-800 dark:active:bg-midnight-600";
+  const base = cn("flex w-full items-center gap-3 text-left transition-colors", pad, isSelected && "bg-marian-blue-200 dark:bg-marian-blue-900", hover, className);
+  const content = /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    leading && /* @__PURE__ */ jsx13("span", { className: "flex size-6 shrink-0 items-center justify-center", children: leading }),
+    /* @__PURE__ */ jsxs7("span", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
+      /* @__PURE__ */ jsx13("span", { className: cn("text-sm leading-5", description ? "font-semibold" : "font-medium", textColor), children: label }),
+      description && /* @__PURE__ */ jsx13("span", { className: cn("text-sm font-medium leading-5", descColor), children: description })
+    ] }),
+    trailing === "switch" ? /* @__PURE__ */ jsx13(ToggleSwitch, { size: "sm", value: switchValue, onChange: onSwitchChange, disabled, label }) : trailing !== "none" ? /* @__PURE__ */ jsx13(TrailingVisual, { trailing, selected: isSelected, disabled }) : null
+  ] });
+  if (trailing === "switch" || trailing === "none") {
+    return /* @__PURE__ */ jsx13("div", { className: base, children: content });
+  }
+  return /* @__PURE__ */ jsx13(
+    "button",
+    {
+      type: "button",
+      role: trailing === "radio" ? "radio" : trailing === "checkbox" ? "checkbox" : "button",
+      "aria-checked": trailing === "radio" || trailing === "checkbox" ? isSelected : void 0,
+      disabled,
+      onClick,
+      className: cn(base, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-marian-blue-900 dark:focus-visible:ring-white"),
+      children: content
+    }
+  );
+}
+
+// src/components/Stepper/Stepper.web.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function segmentClass(index, currentStep) {
+  if (index < currentStep - 1) return "bg-marian-blue-600";
+  if (index === currentStep - 1) return "bg-marian-blue-200 dark:bg-marian-blue-900";
+  return "bg-gray-25 dark:bg-midnight-700";
+}
+function Stepper({ totalSteps, currentStep, className }) {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": currentStep,
+      "aria-valuemin": 1,
+      "aria-valuemax": totalSteps,
+      "aria-label": `Etapa ${currentStep} de ${totalSteps}`,
+      className: cn("flex w-full items-start gap-1", className),
+      children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx14("div", { "aria-hidden": "true", className: cn("h-1 flex-1 rounded-full", segmentClass(i, currentStep)) }, i))
+    }
+  );
+}
+
+// src/components/RatingScale/RatingScale.web.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function RatingScale({ value = null, onChange, options = DEFAULT_OPTIONS, disabled = false, className }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Avalia\xE7\xE3o de 1 a 5",
+      className: cn("flex items-center justify-center gap-2 p-4", className),
+      children: options.map((option, index) => {
+        const itemValue = index + 1;
+        const selected = value === itemValue;
+        return /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            "aria-label": option.label.replace("\n", " "),
+            disabled,
+            onClick: () => onChange?.(itemValue),
+            className: "flex flex-1 flex-col items-center justify-center gap-1.5 py-1 disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ jsx15(
+                "div",
+                {
+                  className: cn(
+                    "flex size-[60px] items-center justify-center overflow-hidden rounded-full transition-colors",
+                    disabled ? "border border-gray-50 bg-gray-25 dark:border-midnight-700 dark:bg-midnight-700" : selected ? "border-2 border-marian-blue-600 bg-marian-blue-200 dark:border-marian-blue-300 dark:bg-marian-blue-900" : "border border-marian-blue-200 bg-white dark:border-midnight-50 dark:bg-midnight-900"
+                  ),
+                  children: /* @__PURE__ */ jsx15("span", { className: cn("select-none text-[28px] leading-none", disabled && "opacity-40"), children: option.emoji })
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                "span",
+                {
+                  className: cn(
+                    "w-full whitespace-pre-line text-center text-caption",
+                    disabled ? "text-gray-400 dark:text-gray-600" : "text-marian-blue-900 dark:text-white"
+                  ),
+                  children: option.label
+                }
+              ),
+              /* @__PURE__ */ jsx15("span", { className: "text-[10px] font-semibold leading-none tracking-[0.8px] text-gray-400 dark:text-gray-600", children: itemValue })
+            ]
+          },
+          itemValue
+        );
+      })
+    }
+  );
+}
 export {
+  Alert,
+  Button,
+  ButtonIcon,
+  Checkbox,
+  Chip,
+  ChoiceCard,
+  DismissButton,
+  Input,
+  InputField,
+  ListItem,
+  ProgressBar,
+  RadioGroup,
+  RatingScale,
+  Stepper,
+  ToggleSwitch,
+  borderWidth,
   colors,
   darkTheme,
-  lightTheme
+  grid,
+  lightTheme,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
 };
 //# sourceMappingURL=index.web.mjs.map