@rojaostudio/ds 1.0.0

package/dist/components/badge.js

@@ -0,0 +1,114 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef } from "react";
+const LABEL_VARIANTS = {
+  default: "bg-surface-default text-fg-muted border border-stroke-default",
+  primary: "bg-brand-primary text-brand-on-primary",
+  success: "bg-success-soft text-success-text border border-success-border",
+  warning: "bg-warning-soft text-warning-text border border-warning-border",
+  danger: "bg-danger-soft  text-danger-text  border border-danger-border",
+  info: "bg-info-soft    text-info-text    border border-info-border",
+  neutral: "bg-neutral-soft text-neutral-text border border-neutral-border"
+};
+const STATUS_VARIANTS = {
+  active: { dot: "bg-success", text: "text-success-text" },
+  inactive: { dot: "bg-state-disabled-text", text: "text-state-disabled-text" },
+  pending: { dot: "bg-warning", text: "text-warning-text" },
+  error: { dot: "bg-danger", text: "text-danger-text" }
+};
+const BASE = "inline-flex items-center rounded-(--radius-badge) font-medium transition-colors";
+const SIZE_CLASS = {
+  sm: "text-[10px]",
+  md: "text-caption"
+};
+const DOT_BG = {
+  brand: "bg-brand-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  neutral: "bg-neutral"
+};
+const Badge = forwardRef(function Badge2(_a, ref) {
+  var _b = _a, {
+    variant = "default",
+    size = "md",
+    count,
+    max = 99,
+    dotColor = "brand",
+    className = "",
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "count",
+    "max",
+    "dotColor",
+    "className",
+    "children"
+  ]);
+  if (variant === "dot") {
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      __spreadValues({
+        ref,
+        role: "status",
+        className: [
+          "inline-block rounded-full",
+          size === "sm" ? "size-2" : "size-2.5",
+          DOT_BG[dotColor],
+          className
+        ].join(" ")
+      }, props)
+    );
+  }
+  if (variant === "count") {
+    const display = count !== void 0 ? count > max ? `${max}+` : String(count) : children;
+    if (count !== void 0 && count <= 0) return null;
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      __spreadValues({
+        ref,
+        className: [
+          BASE,
+          SIZE_CLASS[size],
+          size === "sm" ? "min-w-[16px] h-4 px-1" : "min-w-[20px] h-5 px-1.5",
+          "bg-brand-primary text-brand-on-primary justify-center tabular-nums",
+          className
+        ].join(" ")
+      }, props),
+      display
+    );
+  }
+  if (variant in STATUS_VARIANTS) {
+    const { dot, text } = STATUS_VARIANTS[variant];
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      __spreadValues({
+        ref,
+        className: [BASE, SIZE_CLASS[size], "gap-1.5", text, className].join(" ")
+      }, props),
+      /* @__PURE__ */ React.createElement("span", { className: ["shrink-0 size-1.5 rounded-full", dot].join(" "), "aria-hidden": "true" }),
+      children
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    __spreadValues({
+      ref,
+      className: [
+        BASE,
+        SIZE_CLASS[size],
+        size === "sm" ? "px-1.5 py-px" : "px-2 py-0.5",
+        LABEL_VARIANTS[variant],
+        className
+      ].join(" ")
+    }, props),
+    children
+  );
+});
+export {
+  Badge
+};

package/dist/components/blocker-card.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ReactNode, ComponentType } from 'react';
+
+/**
+ * BlockerCard — destaque bloqueante. Mostra que algo precisa de atenção pra
+ * o usuário poder seguir (limite atingido, plano expirado, feature gateada).
+ *
+ * Uso:
+ *   <BlockerCard
+ *     title="Limite de produtos atingido"
+ *     description="Você usou 50/50. Faça upgrade pra cadastrar mais."
+ *     action="Ver planos"
+ *     actionHref="/billing"
+ *   />
+ *
+ * Pra Next.js, passa `linkAs={Link}` pra usar next/link em vez de `<a>`.
+ */
+type BlockerCardTone = 'danger' | 'warning' | 'info';
+interface BlockerCardProps {
+    title: string;
+    description: ReactNode;
+    /** Label do botão de ação (opcional). */
+    action?: string;
+    /** URL/link da ação. Se ausente e `onAction` definido, vira botão. */
+    actionHref?: string;
+    /** Handler de ação (se preferir click handler em vez de href). */
+    onAction?: () => void;
+    /** Tom semântico. default = "danger". */
+    tone?: BlockerCardTone;
+    /** Eyebrow text antes do título (ex: "Bloqueio", "Limite"). */
+    eyebrow?: string;
+    /** Component de link customizado (ex: next/link). default = `<a>`. */
+    linkAs?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    className?: string;
+}
+declare function BlockerCard({ title, description, action, actionHref, onAction, tone, eyebrow, linkAs: LinkAs, className, }: BlockerCardProps): react.JSX.Element;
+
+export { BlockerCard, type BlockerCardProps, type BlockerCardTone };

package/dist/components/blocker-card.js

@@ -0,0 +1,45 @@
+import "../chunk-ORMEWXMH.js";
+const TONE = {
+  danger: {
+    container: "border-danger-border bg-danger-soft",
+    eyebrow: "text-danger-text",
+    action: "border-danger-border bg-surface-default text-danger-text hover:bg-danger-soft"
+  },
+  warning: {
+    container: "border-warning-border bg-warning-soft",
+    eyebrow: "text-warning-text",
+    action: "border-warning-border bg-surface-default text-warning-text hover:bg-warning-soft"
+  },
+  info: {
+    container: "border-info-border bg-info-soft",
+    eyebrow: "text-info-text",
+    action: "border-info-border bg-surface-default text-info-text hover:bg-info-soft"
+  }
+};
+const DEFAULT_EYEBROW = {
+  danger: "Bloqueio",
+  warning: "Aten\xE7\xE3o",
+  info: "Aviso"
+};
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+}
+function BlockerCard({
+  title,
+  description,
+  action,
+  actionHref,
+  onAction,
+  tone = "danger",
+  eyebrow,
+  linkAs: LinkAs = DefaultLink,
+  className = ""
+}) {
+  const palette = TONE[tone];
+  const eyebrowText = eyebrow != null ? eyebrow : DEFAULT_EYEBROW[tone];
+  const actionClass = ["shrink-0 rounded-(--radius-card) border px-3 py-1.5 text-caption font-medium transition-colors whitespace-nowrap", palette.action].join(" ");
+  return /* @__PURE__ */ React.createElement("div", { className: ["rounded-(--radius-card) border p-4", palette.container, className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: ["text-caption font-semibold uppercase tracking-wide", palette.eyebrow].join(" ") }, eyebrowText), /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 font-semibold text-fg-primary text-label" }, title), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-label text-fg-secondary" }, description)), action && actionHref && /* @__PURE__ */ React.createElement(LinkAs, { href: actionHref, className: actionClass }, action), action && !actionHref && onAction && /* @__PURE__ */ React.createElement("button", { type: "button", onClick: onAction, className: actionClass }, action)));
+}
+export {
+  BlockerCard
+};

package/dist/components/bottom-sheet.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * BottomSheet — drawer ancorado na borda inferior. Padrão mobile-first;
+ * em desktop renderiza centralizado mais estreito (responde ao viewport).
+ *
+ * Uso:
+ *   <BottomSheet open={open} onClose={() => setOpen(false)} title="Filtros">
+ *     <p>Conteúdo</p>
+ *   </BottomSheet>
+ *
+ * Recursos: backdrop com fade, swipe-to-dismiss (em mobile), trap focus básico,
+ * ESC fecha, snap points opcionais (full / half / auto).
+ */
+interface BottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: ReactNode;
+    /** Altura do sheet. default = "auto" (cresce até max-h). */
+    snap?: 'auto' | 'half' | 'full';
+    /** Esconde header + close button. default = false. */
+    hideHeader?: boolean;
+    /** Fecha ao clicar no backdrop. default = true. */
+    closeOnBackdrop?: boolean;
+    className?: string;
+}
+declare const BottomSheet: react.ForwardRefExoticComponent<BottomSheetProps & react.RefAttributes<HTMLDivElement>>;
+
+export { BottomSheet, type BottomSheetProps };

package/dist/components/bottom-sheet.js

@@ -0,0 +1,120 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { useFocusTrap } from "./use-focus-trap.js";
+const SNAP_HEIGHT = {
+  auto: "max-h-[90dvh]",
+  half: "h-1/2",
+  full: "h-[95dvh]"
+};
+const BottomSheet = forwardRef(function BottomSheet2({
+  open,
+  onClose,
+  title,
+  children,
+  snap = "auto",
+  hideHeader = false,
+  closeOnBackdrop = true,
+  className = ""
+}, ref) {
+  const [mounted, setMounted] = useState(false);
+  const sheetRef = useFocusTrap(open);
+  useImperativeHandle(ref, () => sheetRef.current);
+  const dragStartY = useRef(0);
+  const handleDragStart = (e) => {
+    var _a, _b;
+    dragStartY.current = (_b = (_a = e.touches[0]) == null ? void 0 : _a.clientY) != null ? _b : 0;
+  };
+  const handleDragMove = (e) => {
+    var _a, _b;
+    const container = (_a = sheetRef.current) == null ? void 0 : _a.querySelector("[data-scroll-container]");
+    if (container && container.scrollTop > 0) return;
+    const y = (_b = e.touches[0]) == null ? void 0 : _b.clientY;
+    if (y !== void 0 && y - dragStartY.current > 80) onClose();
+  };
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handler);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+  if (!mounted || !open) return null;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? "bottom-sheet-title" : void 0,
+        className: "fixed inset-0 z-[1000] flex items-end justify-center"
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-bottom-sheet-backdrop": true,
+          onClick: closeOnBackdrop ? onClose : void 0,
+          className: "absolute inset-0 [background:var(--overlay-scrim)] rojao-bottom-sheet--backdrop-enter",
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: sheetRef,
+          tabIndex: -1,
+          className: [
+            "relative w-full sm:max-w-md bg-surface-default rounded-t-(--radius-toast) shadow-2xl outline-none",
+            "flex flex-col rojao-bottom-sheet--enter",
+            SNAP_HEIGHT[snap],
+            className
+          ].join(" ")
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            "data-drag-handle": true,
+            onTouchStart: handleDragStart,
+            onTouchMove: handleDragMove,
+            className: "flex justify-center items-center min-h-[20px] pt-2 shrink-0 touch-none cursor-grab"
+          },
+          /* @__PURE__ */ React.createElement("span", { className: "w-10 h-1 rounded-full bg-(--border-strong)", "aria-hidden": true })
+        ),
+        !hideHeader && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onTouchStart: handleDragStart,
+            onTouchMove: handleDragMove,
+            className: "flex items-center justify-between px-5 pt-2 pb-3 border-b border-stroke-default shrink-0"
+          },
+          /* @__PURE__ */ React.createElement("h2", { id: "bottom-sheet-title", className: "text-body font-semibold text-fg-primary" }, title),
+          /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Fechar",
+              className: "text-fg-muted hover:text-fg-primary transition-colors p-3 -mr-3 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
+            },
+            /* @__PURE__ */ React.createElement(X, { size: 18 })
+          )
+        ),
+        /* @__PURE__ */ React.createElement("div", { "data-scroll-container": true, className: "flex-1 overflow-y-auto px-5 py-4" }, children)
+      )
+    ),
+    document.body
+  );
+});
+export {
+  BottomSheet
+};

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    /** Ícone leading opcional (ex: Home no primeiro item). */
+    icon?: ReactNode;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /** Separador customizado. default = ChevronRight. */
+    separator?: ReactNode;
+    /** Trunca pra mostrar só primeiro + último com `…` no meio quando > este número. */
+    maxItems?: number;
+    className?: string;
+    /** Tag de link (default = `<a>`). Pra Next.js, passa `Link` daqui. */
+    linkAs?: React.ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+declare function Breadcrumb({ items, separator, maxItems, className, linkAs: LinkAs, }: BreadcrumbProps): react.JSX.Element;
+/** Helper pra primeiro item sempre ter ícone Home. */
+declare function homeItem(href?: string): BreadcrumbItem;
+
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, homeItem };

package/dist/components/breadcrumb.js

@@ -0,0 +1,52 @@
+import "../chunk-ORMEWXMH.js";
+import { ChevronRight, Home } from "lucide-react";
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+}
+function Breadcrumb({
+  items,
+  separator,
+  maxItems = 4,
+  className = "",
+  linkAs: LinkAs = DefaultLink
+}) {
+  const sep = separator != null ? separator : /* @__PURE__ */ React.createElement(ChevronRight, { size: 14, className: "text-fg-muted shrink-0" });
+  let displayed = items;
+  if (items.length > maxItems) {
+    displayed = [
+      items[0],
+      { ellipsis: true },
+      ...items.slice(items.length - 2)
+    ];
+  }
+  return /* @__PURE__ */ React.createElement("nav", { "aria-label": "Breadcrumb", className }, /* @__PURE__ */ React.createElement("ol", { className: "flex items-center gap-1.5 text-label flex-wrap" }, displayed.map((entry, idx) => {
+    const isLast = idx === displayed.length - 1;
+    if ("ellipsis" in entry) {
+      return /* @__PURE__ */ React.createElement("li", { key: `ell-${idx}`, className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted px-1", "aria-hidden": true }, "\u2026"), !isLast && sep);
+    }
+    const item = entry;
+    const labelEl = /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1" }, item.icon, item.label);
+    return /* @__PURE__ */ React.createElement("li", { key: idx, className: "flex items-center gap-1.5" }, item.href && !isLast ? /* @__PURE__ */ React.createElement(
+      LinkAs,
+      {
+        href: item.href,
+        className: "text-fg-muted hover:text-fg-primary transition-colors"
+      },
+      labelEl
+    ) : /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: isLast ? "text-fg-primary font-medium" : "text-fg-muted",
+        "aria-current": isLast ? "page" : void 0
+      },
+      labelEl
+    ), !isLast && sep);
+  })));
+}
+function homeItem(href = "/") {
+  return { label: "In\xEDcio", href, icon: /* @__PURE__ */ React.createElement(Home, { size: 14 }) };
+}
+export {
+  Breadcrumb,
+  homeItem
+};

package/dist/components/button.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'filled' | 'tonal' | 'outline' | 'ghost' | 'link';
+type ButtonColor = 'primary' | 'secondary' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+declare function buttonVariants({ variant, color, size, fullWidth, className, }?: {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    className?: string;
+}): string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Ícone leading (à esquerda do texto). */
+    iconLeft?: ReactNode;
+    /** Ícone trailing (à direita do texto). */
+    iconRight?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,124 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef } from "react";
+const variantColorClasses = {
+  // secondary = ação de BAIXA ÊNFASE, neutra por construção (não a 2ª cor de marca).
+  // Usa fg-secondary (4.5:1) + border-default (3:1) + surface-raised, que o motor
+  // garante contra a surface em light e dark. Uma cor de marca como traço/texto
+  // sobre a surface não tem garantia de contraste → sumia (navy no escuro, branco
+  // no claro). A 2ª cor de marca (--brand-secondary) segue viva pra FILL explícito.
+  filled: {
+    // Borda de AFFORDANCE: transparente por padrão (filled não tem borda visível). O motor só
+    // colore --brand-primary-border quando o fill da marca quase encosta na superfície — aí o
+    // hairline evita o botão "sumir" no fundo sem tocar na cor escolhida pelo lojista.
+    primary: "bg-brand-primary text-brand-on-primary hover:bg-brand-hover border border-[var(--brand-primary-border,transparent)]",
+    secondary: "bg-surface-raised text-fg-primary hover:opacity-90",
+    danger: "bg-danger text-fg-inverse hover:bg-danger-text"
+  },
+  tonal: {
+    primary: "bg-brand-primary/10 text-brand-primary hover:bg-brand-primary/20",
+    secondary: "bg-surface-raised/60 text-fg-secondary hover:bg-surface-raised",
+    danger: "bg-danger-soft text-danger-text hover:bg-danger-soft/70"
+  },
+  outline: {
+    primary: "ring-1 ring-inset ring-brand-primary bg-transparent text-brand-primary hover:bg-surface-raised",
+    secondary: "ring-1 ring-inset ring-border-default bg-transparent text-fg-secondary hover:bg-surface-raised",
+    danger: "ring-1 ring-inset ring-danger bg-transparent text-danger-text hover:bg-danger-soft"
+  },
+  ghost: {
+    primary: "bg-transparent text-brand-primary hover:bg-surface-raised",
+    secondary: "bg-transparent text-fg-secondary hover:bg-surface-raised",
+    danger: "bg-transparent text-danger-text hover:bg-danger-soft"
+  },
+  link: {
+    primary: "bg-transparent text-brand-primary underline-offset-4 hover:underline",
+    secondary: "bg-transparent text-fg-secondary underline-offset-4 hover:underline",
+    danger: "bg-transparent text-danger-text underline-offset-4 hover:underline"
+  }
+};
+const sizeClasses = {
+  sm: "box-border h-control-sm px-3 text-caption gap-1.5",
+  md: "box-border h-control-md px-4 text-label gap-2",
+  lg: "box-border h-control-lg px-5 text-body gap-2"
+};
+const linkSizeClasses = {
+  sm: "text-caption gap-1",
+  md: "text-label gap-1.5",
+  lg: "text-body gap-2"
+};
+function buttonVariants({
+  variant = "filled",
+  color = "primary",
+  size = "md",
+  fullWidth = false,
+  className = ""
+} = {}) {
+  return [
+    "inline-flex items-center justify-center font-medium transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2",
+    "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
+    // Radius vem do token semântico — nunca hardcode (governança em base.css)
+    variant === "link" ? linkSizeClasses[size] : `rounded-(--radius-control) ${sizeClasses[size]}`,
+    variantColorClasses[variant][color],
+    fullWidth && "w-full",
+    className
+  ].filter(Boolean).join(" ");
+}
+const Spinner = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    className: "animate-spin size-4 shrink-0",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true"
+  },
+  /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+  /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+);
+const Button = forwardRef(function Button2(_a, ref) {
+  var _b = _a, {
+    variant = "filled",
+    color = "primary",
+    size = "md",
+    loading = false,
+    fullWidth = false,
+    iconLeft,
+    iconRight,
+    disabled,
+    className = "",
+    children,
+    type = "button"
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "color",
+    "size",
+    "loading",
+    "fullWidth",
+    "iconLeft",
+    "iconRight",
+    "disabled",
+    "className",
+    "children",
+    "type"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    __spreadValues({
+      ref,
+      type,
+      disabled: disabled || loading,
+      className: buttonVariants({ variant, color, size, fullWidth, className })
+    }, rest),
+    loading ? /* @__PURE__ */ React.createElement(Spinner, null) : iconLeft && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-4" }, iconLeft),
+    children,
+    iconRight && !loading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-4" }, iconRight)
+  );
+});
+export {
+  Button,
+  buttonVariants
+};

package/dist/components/card.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type CardVariant = 'outlined' | 'elevated' | 'filled' | 'flat' | 'invert';
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    /** Renderiza como botão clicável (link card). default = false. */
+    interactive?: boolean;
+}
+declare function Card({ variant, interactive, className, children, ...props }: CardProps): react.JSX.Element;
+interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    badge?: ReactNode;
+    /** Ícone exibido à esquerda do título num container 40×40 bg-surface-raised. */
+    icon?: ReactNode;
+}
+declare function CardHeader({ title, description, action, badge, icon, className, children, ...props }: CardHeaderProps): react.JSX.Element;
+declare function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
+interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    noPadding?: boolean;
+}
+declare function CardBody({ noPadding, className, children, ...props }: CardBodyProps): react.JSX.Element;
+declare function CardFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+export { Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardVariant };

package/dist/components/card.js

@@ -0,0 +1,52 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+const VARIANT_CLASS = {
+  outlined: "border border-stroke-default bg-surface-default",
+  elevated: "border border-transparent bg-surface-default shadow-sm",
+  filled: "border border-transparent bg-surface-raised",
+  flat: "border-0 bg-transparent shadow-none",
+  invert: "border border-transparent bg-surface-invert text-fg-inverse"
+};
+function Card(_a) {
+  var _b = _a, { variant = "elevated", interactive = false, className = "", children } = _b, props = __objRest(_b, ["variant", "interactive", "className", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      className: [
+        "rounded-(--radius-card) overflow-hidden",
+        VARIANT_CLASS[variant],
+        interactive && "transition-shadow hover:shadow-md cursor-pointer",
+        className
+      ].filter(Boolean).join(" ")
+    }, props),
+    children
+  );
+}
+function CardHeader(_c) {
+  var _d = _c, { title, description, action, badge, icon, className = "", children } = _d, props = __objRest(_d, ["title", "description", "action", "badge", "icon", "className", "children"]);
+  if (children) {
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: ["ds-card-header flex items-center justify-between gap-4 px-4 py-4", className].join(" ") }, props), children);
+  }
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: ["ds-card-header flex items-start justify-between gap-4 px-4 py-4", className].join(" ") }, props), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3 min-w-0 flex-1" }, icon && /* @__PURE__ */ React.createElement("div", { className: "shrink-0 size-10 rounded-(--radius-card) bg-surface-raised flex items-center justify-center text-fg-secondary" }, icon), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-label font-semibold text-fg-primary leading-snug" }, title), badge), description && /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-caption text-fg-muted" }, description))), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action));
+}
+function CardTitle(_e) {
+  var _f = _e, { className = "", children } = _f, props = __objRest(_f, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement("h3", __spreadValues({ className: ["text-body font-semibold text-fg-primary", className].join(" ") }, props), children);
+}
+function CardBody(_g) {
+  var _h = _g, { noPadding, className = "", children } = _h, props = __objRest(_h, ["noPadding", "className", "children"]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: [noPadding ? "" : "px-4 pb-4 pt-4 [.ds-card-header+&]:pt-0", className].join(" ").trim() }, props), children);
+}
+function CardFooter(_i) {
+  var _j = _i, { className = "", children } = _j, props = __objRest(_j, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: ["flex items-center justify-end gap-3 px-4 pt-2 pb-4", className].join(" ") }, props), children);
+}
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};