import { jsx as a, jsxs as p } from "react/jsx-runtime";
import { createContext as N, useState as C, useMemo as k, useContext as u, useEffect as m } from "react";
import { createSlotRecipeContext as E } from "@chakra-ui/react";
import { useSlotRecipe as $ } from "@chakra-ui/react/styled-system";
import { S as j } from "./stack-CoNreM7B.es.js";
import { e as c } from "./extract-style-props-BdibuNZ7.es.js";
const { withProvider: w, withContext: f } = /* @__PURE__ */ E({
  key: "card"
}), V = /* @__PURE__ */ w("div", "root"), b = /* @__PURE__ */ f("div", "header"), g = /* @__PURE__ */ f("div", "content"), d = /* @__PURE__ */ N(
  void 0
), x = ({ ref: e, children: r, ...t }) => {
  const o = $({ key: "card" }), [n, s] = o.splitVariantProps(t), [v, H] = c(s), [R, l] = C(null), [S, i] = C(null), h = k(
    () => ({
      setHeader: l,
      setContent: i
    }),
    [l, i]
  );
  return /* @__PURE__ */ a(d.Provider, { value: h, children: /* @__PURE__ */ p(
    V,
    {
      ref: e,
      ...n,
      ...v,
      ...H,
      children: [
        /* @__PURE__ */ p(j, { direction: "column", gap: "200", children: [
          R,
          S
        ] }),
        r
      ]
    }
  ) });
};
x.displayName = "Card.Root";
const P = ({ children: e, ...r }) => {
  const t = u(d), [o, n] = c(r);
  return m(() => {
    if (t) {
      const s = /* @__PURE__ */ a(b, { ...o, ...n, children: e });
      return t.setHeader(s), () => t.setHeader(null);
    }
  }, [e, o, n, t]), null;
};
P.displayName = "Card.Header";
const y = ({ children: e, ...r }) => {
  const t = u(d), [o, n] = c(r);
  return m(() => {
    if (t) {
      const s = /* @__PURE__ */ a(g, { ...o, ...n, children: e });
      return t.setContent(s), () => t.setContent(null);
    }
  }, [e, o, n, t]), null;
};
y.displayName = "Card.Content";
const F = {
  /**
   * # Card.Root
   *
   * The root component that provides context and styling for the card.
   * Must wrap all card parts (Header, Content) to coordinate their behavior.
   * Accepts styling variants for padding, border, elevation, and background.
   *
   * @example
   * ```tsx
   * <Card.Root cardPadding="md" borderStyle="outlined" elevation="elevated">
   *   <Card.Header>Title</Card.Header>
   *   <Card.Content>Content</Card.Content>
   * </Card.Root>
   * ```
   */
  Root: x,
  /**
   * # Card.Header
   *
   * The header section of the card, typically containing the card title
   * or primary heading. Automatically positioned above the card content
   * in a consistent layout.
   *
   * @example
   * ```tsx
   * <Card.Root>
   *   <Card.Header>Card Title</Card.Header>
   *   <Card.Content>Content here</Card.Content>
   * </Card.Root>
   * ```
   */
  Header: P,
  /**
   * # Card.Content
   *
   * The main content area of the card. Contains the primary information,
   * body text, or interactive elements. Automatically positioned below
   * the card header in a consistent layout.
   *
   * @example
   * ```tsx
   * <Card.Root>
   *   <Card.Header>Title</Card.Header>
   *   <Card.Content>
   *     <Text>This is the main card content.</Text>
   *   </Card.Content>
   * </Card.Root>
   * ```
   */
  Content: y
};
export {
  F as C,
  x as a,
  P as b,
  y as c
};
//# sourceMappingURL=card-q5i119kB.es.js.map
