laif-ds/dist/components/ui/app-radio-group.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsxs as r, jsx as t, Fragment as C } from "react/jsx-runtime";
import { designTokens as h } from "../design-tokens.js";
import { cn as s } from "../../lib/utils.js";
import { Icon as F } from "./icon.js";
import { Label as I } from "./label.js";
import { RadioGroup as P, RadioGroupItem as T } from "./radio-group.js";
const d = ({ content: e }) => typeof e == "string" ? /* @__PURE__ */ t("span", { children: e }) : e, $ = ({ option: e }) => /* @__PURE__ */ r(C, { children: [
  /* @__PURE__ */ r(
    "div",
    {
      className: s(
        "text-d-foreground flex flex-row items-center gap-1.5",
        h.text.base
      ),
      children: [
        e.icon && /* @__PURE__ */ t(F, { size: "xs", className: "min-h-4 min-w-4", name: e.icon }),
        /* @__PURE__ */ t(d, { content: e.label })
      ]
    }
  ),
  e.description && /* @__PURE__ */ t("div", { className: "text-d-foreground text-xs font-light", children: /* @__PURE__ */ t(d, { content: e.description }) })
] }), k = ({
  option: e,
  optionId: l,
  isDisabled: o,
  isCard: n,
  optionClassName: a
}) => /* @__PURE__ */ r(
  I,
  {
    htmlFor: l,
    className: s(
      "flex items-center gap-2",
      o ? "cursor-not-allowed opacity-50" : "cursor-pointer",
      n && s(
        "bg-d-card border-d-border border p-2 shadow",
        h.radius.lg
        // Card layout uses lg radius
      ),
      a
    ),
    children: [
      /* @__PURE__ */ t(T, { value: e.value, id: l, disabled: o }),
      /* @__PURE__ */ t(
        "div",
        {
          className: s(
            "flex flex-1 flex-col items-start gap-1",
            o ? "cursor-not-allowed" : "cursor-pointer"
          ),
          children: /* @__PURE__ */ t($, { option: e })
        }
      )
    ]
  }
);
function K({
  options: e,
  value: l,
  defaultValue: o,
  onValueChange: n,
  label: a,
  description: i,
  disabled: x = !1,
  required: f = !1,
  name: u,
  orientation: p = "vertical",
  loop: g = !0,
  className: v = "",
  wrpClassName: N = "",
  optionClassName: w = "",
  layout: b = "default",
  error: m,
  id: y,
  "data-testid": R
}) {
  const z = p === "horizontal", G = b === "card";
  return /* @__PURE__ */ r("div", { className: s("flex w-full flex-col gap-2", N), children: [
    (a || i) && /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
      a && /* @__PURE__ */ r(
        "div",
        {
          className: s(
            "flex items-center gap-1 text-sm font-medium",
            m ? "text-d-destructive" : "text-d-foreground"
          ),
          children: [
            /* @__PURE__ */ t(d, { content: a }),
            f && /* @__PURE__ */ t("span", { children: "*" })
          ]
        }
      ),
      i && /* @__PURE__ */ t("div", { className: "text-bodySecondary text-xs", children: /* @__PURE__ */ t(d, { content: i }) })
    ] }),
    /* @__PURE__ */ t(
      P,
      {
        id: y,
        "data-testid": R,
        value: l,
        defaultValue: o,
        onValueChange: n,
        disabled: x,
        required: f,
        name: u,
        orientation: p,
        loop: g,
        className: s(
          "flex gap-2",
          z ? "flex-row" : "flex-col",
          v
        ),
        children: e.map((c) => {
          const O = `${u || "radio"}-${c.value}`, j = x || !!c.disabled;
          return /* @__PURE__ */ t(k, { isCard: G, ...{
            option: c,
            optionId: O,
            isDisabled: j,
            optionClassName: w
          } }, c.value);
        })
      }
    ),
    m && /* @__PURE__ */ r("div", { className: "text-d-destructive text-xs font-medium", children: [
      "*",
      m
    ] })
  ] });
}
export {
  K as AppRadioGroup
};