import { jsx as a, jsxs as p } from "react/jsx-runtime";
import { useState as C, useMemo as N, createContext as b, useContext as u, useEffect as m } from "react";
import { createSlotRecipeContext as k } from "@chakra-ui/react";
import { useSlotRecipe as E } from "@chakra-ui/react/styled-system";
import { S as $ } from "./stack-CoNreM7B.es.js";
import { e as c } from "./extract-style-props-CMyV-es-.es.js";
const { withProvider: j, withContext: f } = /* @__PURE__ */ k({
  key: "nimbusCard"
}), w = /* @__PURE__ */ j("div", "root"), V = /* @__PURE__ */ f("div", "header"), g = /* @__PURE__ */ f("div", "content"), d = /* @__PURE__ */ b(
  void 0
), x = ({ ref: e, children: r, ...t }) => {
  const o = E({ key: "nimbusCard" }), [n, s] = o.splitVariantProps(t), [v, H] = c(s), [R, i] = C(null), [S, l] = C(null), h = N(
    () => ({
      setHeader: i,
      setContent: l
    }),
    [i, l]
  );
  return /* @__PURE__ */ a(d.Provider, { value: h, children: /* @__PURE__ */ p(
    w,
    {
      ref: e,
      ...n,
      ...v,
      ...H,
      children: [
        /* @__PURE__ */ p($, { 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(V, { ...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,
  y as a,
  P as b,
  x as c
};
//# sourceMappingURL=card-DOAYigZ-.es.js.map
