import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
const DescriptionContext = React.createContext({
  direction: "vertical",
  divided: false
});
const colsClass = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-3"
};
const DescriptionList = React.forwardRef(
  ({ cols = 1, direction = "vertical", divided = false, className, ...props }, ref) => {
    const isHorizontal = direction === "horizontal";
    const ctxValue = React.useMemo(() => ({ direction, divided }), [direction, divided]);
    return /* @__PURE__ */ jsx(DescriptionContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
      "dl",
      {
        ref,
        className: cn(
          isHorizontal ? "flex flex-col" : cn("grid gap-x-4 gap-y-[var(--layout-space-tight)]", colsClass[cols]),
          className
        ),
        ...props
      }
    ) });
  }
);
DescriptionList.displayName = "DescriptionList";
const DescriptionItem = React.forwardRef(
  ({ label, children, className, ...props }, ref) => {
    const { direction, divided } = React.useContext(DescriptionContext);
    if (direction === "horizontal") {
      return /* @__PURE__ */ jsxs(
        "div",
        {
          ref,
          className: cn(
            "flex items-baseline justify-between gap-4",
            divided ? "py-[var(--layout-space-tight)] border-b border-divider last:border-b-0" : "mb-[var(--layout-space-tight)] last:mb-0",
            className
          ),
          ...props,
          children: [
            /* @__PURE__ */ jsx("dt", { className: "text-body text-fg-secondary shrink-0", children: label }),
            /* @__PURE__ */ jsx("dd", { className: "text-body text-foreground text-right break-all min-w-0", children })
          ]
        }
      );
    }
    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col", className), ...props, children: [
      /* @__PURE__ */ jsx("dt", { className: "text-body text-fg-secondary", children: label }),
      /* @__PURE__ */ jsx("dd", { className: "text-body mt-[var(--item-gap-label-desc-reading)]", children })
    ] });
  }
);
DescriptionItem.displayName = "DescriptionItem";
const descriptionListMeta = {
  component: "DescriptionList",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: [],
  // 純唯讀 dl/dt/dd,無 hover/active/focus/disabled 互動 state(spec L181-189「為何無 ColorMatrix / SizeMatrix」)
  tokens: {
    bg: [],
    fg: ["text-fg-secondary", "text-foreground"],
    ring: []
  }
};
export {
  DescriptionItem,
  DescriptionList,
  descriptionListMeta
};
//# sourceMappingURL=description-list.js.map
