"use client";

// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/ui/label.tsx
import * as React from "react";
import { Label as LabelPrimitive } from "radix-ui";
import { jsx } from "react/jsx-runtime";
var Label = React.forwardRef(function Label2({ className, ...props }, ref) {
  return /* @__PURE__ */ jsx(
    LabelPrimitive.Root,
    {
      ref,
      "data-slot": "label",
      className: cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      ),
      ...props
    }
  );
});

// src/components/ui/radio-group.tsx
import * as React2 from "react";
import { cva } from "class-variance-authority";
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
import { jsx as jsx2 } from "react/jsx-runtime";
var radioGroupItemVariants = cva(
  [
    "group/radio-group-item peer relative flex shrink-0 aspect-square rounded-full border border-input",
    "outline-none transition-[color,box-shadow,transform,background-color,border-color] duration-150",
    "motion-reduce:transition-none",
    "group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2",
    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
    "disabled:cursor-not-allowed disabled:opacity-50",
    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:data-[state=checked]:border-primary",
    "dark:bg-input/15 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
  ].join(" "),
  {
    variants: {
      variant: {
        default: [
          "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary"
        ].join(" "),
        outline: [
          "bg-background",
          "data-[state=checked]:border-primary data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:ring-2 data-[state=checked]:ring-primary/25"
        ].join(" "),
        secondary: [
          "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground"
        ].join(" "),
        success: [
          "data-[state=checked]:border-chart-2 data-[state=checked]:bg-chart-2 data-[state=checked]:text-primary-foreground"
        ].join(" "),
        destructive: [
          "data-[state=checked]:border-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground"
        ].join(" "),
        warning: [
          "data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500 data-[state=checked]:text-amber-950"
        ].join(" "),
        muted: [
          "data-[state=checked]:border-muted-foreground/50 data-[state=checked]:bg-muted data-[state=checked]:text-foreground"
        ].join(" ")
      },
      size: {
        sm: "size-3.5 min-h-3.5 min-w-3.5 max-h-3.5 max-w-3.5",
        default: "size-4 min-h-4 min-w-4 max-h-4 max-w-4",
        lg: "size-5 min-h-5 min-w-5 max-h-5 max-w-5"
      },
      motion: {
        none: "",
        pop: [
          "motion-safe:active:scale-95",
          "data-[state=checked]:motion-safe:scale-[1.04]"
        ].join(" "),
        glow: "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35",
        "pop-glow": [
          "motion-safe:active:scale-95",
          "data-[state=checked]:motion-safe:scale-[1.04]",
          "data-[state=checked]:shadow-[0_0_0_3px] data-[state=checked]:shadow-primary/35"
        ].join(" ")
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      motion: "none"
    }
  }
);
var radioIndicatorDotVariants = cva(
  "pointer-events-none absolute top-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full",
  {
    variants: {
      variant: {
        default: "bg-primary-foreground",
        outline: "bg-primary",
        secondary: "bg-secondary-foreground",
        success: "bg-primary-foreground",
        destructive: "bg-destructive-foreground",
        warning: "bg-amber-950",
        muted: "bg-foreground"
      },
      size: {
        sm: "size-1.5",
        default: "size-2",
        lg: "size-2.5"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
var radioIndicatorWrapperVariants = cva("relative flex size-full items-center justify-center", {
  variants: {
    motion: {
      none: "",
      pop: "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150",
      glow: "",
      "pop-glow": "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-150"
    }
  },
  defaultVariants: { motion: "none" }
});
var RadioGroupItemChromeContext = React2.createContext({});
function RadioGroup({
  className,
  itemVariant,
  itemSize,
  itemMotion,
  ...props
}) {
  const ctx = React2.useMemo(
    () => ({ itemVariant, itemSize, itemMotion }),
    [itemVariant, itemSize, itemMotion]
  );
  return /* @__PURE__ */ jsx2(RadioGroupItemChromeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx2(
    RadioGroupPrimitive.Root,
    {
      "data-slot": "radio-group",
      className: cn("grid w-full gap-2", className),
      ...props
    }
  ) });
}
var RadioGroupItem = React2.forwardRef(function RadioGroupItem2({ className, variant: variantProp, size: sizeProp, motion: motionProp, ...props }, ref) {
  const ctx = React2.useContext(RadioGroupItemChromeContext);
  const variant = variantProp ?? ctx.itemVariant;
  const size = sizeProp ?? ctx.itemSize;
  const motion = motionProp ?? ctx.itemMotion ?? "none";
  const vResolved = variant ?? "default";
  const sResolved = size ?? "default";
  return /* @__PURE__ */ jsx2(
    RadioGroupPrimitive.Item,
    {
      ref,
      "data-slot": "radio-group-item",
      "data-variant": vResolved,
      "data-motion": motion,
      className: cn(radioGroupItemVariants({ variant, size, motion }), className),
      ...props,
      children: /* @__PURE__ */ jsx2(
        RadioGroupPrimitive.Indicator,
        {
          "data-slot": "radio-group-indicator",
          className: radioIndicatorWrapperVariants({ motion }),
          children: /* @__PURE__ */ jsx2("span", { className: radioIndicatorDotVariants({ variant: vResolved, size: sResolved }) })
        }
      )
    }
  );
});

// src/components/ui/selection-tile-grid.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
function selectionTileClassNames(selected) {
  return cn(
    "flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border px-2 py-3 text-xs leading-tight transition-colors",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
    selected ? "border-brand bg-brand/5 text-foreground font-medium shadow-sm" : "border-border bg-background text-muted-foreground hover:border-border/80 hover:text-interactive-hover-foreground"
  );
}
function selectionTilePreviewClassNames(selected) {
  return cn(
    "relative box-border flex aspect-square w-full max-w-full flex-col rounded-lg border p-1 transition-colors",
    selected ? "border-brand bg-brand/5 shadow-sm" : "border-border bg-background hover:border-border/80"
  );
}
function SelectionTileGraphic({
  option,
  selected
}) {
  if (option.leading != null) {
    return /* @__PURE__ */ jsx3("span", { className: "flex h-full min-h-0 w-full min-w-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:object-contain [&_svg]:object-center", children: option.leading });
  }
  if (option.icon) {
    return /* @__PURE__ */ jsx3(
      "i",
      {
        className: cn(
          "fa-light shrink-0 text-[18px] leading-none",
          option.icon,
          selected && "text-brand"
        ),
        "aria-hidden": "true"
      }
    );
  }
  return null;
}
function SelectionTileLabelText({
  option
}) {
  return /* @__PURE__ */ jsx3("span", { className: "text-center leading-tight", children: option.label });
}
function SelectionTileCaptionBelow({
  option,
  selected,
  ariaHidden = false
}) {
  return /* @__PURE__ */ jsx3(
    "span",
    {
      className: cn(
        "max-w-full px-0.5 text-center text-xs leading-tight",
        selected ? "font-medium text-foreground" : "text-muted-foreground"
      ),
      ...ariaHidden ? { "aria-hidden": true } : {},
      children: option.label
    }
  );
}
function SelectionTileGrid({
  sectionLabel,
  options,
  columns = 4,
  value,
  onValueChange,
  interaction,
  idPrefix = "tile",
  className,
  labelPlacement = "inside",
  itemVariant,
  itemSize,
  itemMotion
}) {
  const gridClass = cn(
    "gap-2",
    columns === 2 && "grid grid-cols-2",
    columns === 3 && "grid grid-cols-3",
    columns === 4 && "grid grid-cols-4"
  );
  if (interaction === "radio") {
    return /* @__PURE__ */ jsxs("div", { className, children: [
      sectionLabel ? /* @__PURE__ */ jsx3("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: sectionLabel }) : null,
      /* @__PURE__ */ jsx3(
        RadioGroup,
        {
          value,
          onValueChange: (v) => onValueChange(v),
          className: gridClass,
          itemVariant,
          itemSize,
          itemMotion,
          children: options.map((opt) => {
            const selected = value === opt.value;
            const id = `${idPrefix}-${opt.value}`;
            if (labelPlacement === "below") {
              return /* @__PURE__ */ jsxs(
                Label,
                {
                  htmlFor: id,
                  className: cn(
                    "flex min-w-0 cursor-pointer flex-col items-center gap-1.5 rounded-lg focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background"
                  ),
                  children: [
                    /* @__PURE__ */ jsxs("span", { className: cn("flex w-full justify-center", selectionTilePreviewClassNames(selected)), children: [
                      /* @__PURE__ */ jsx3(RadioGroupItem, { value: opt.value, id, className: "sr-only" }),
                      /* @__PURE__ */ jsx3("span", { className: "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectionTileGraphic, { option: opt, selected }) })
                    ] }),
                    /* @__PURE__ */ jsx3(SelectionTileCaptionBelow, { option: opt, selected })
                  ]
                },
                opt.value
              );
            }
            return /* @__PURE__ */ jsxs(
              Label,
              {
                htmlFor: id,
                className: cn(
                  "cursor-pointer rounded-lg focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring focus-within:outline-none",
                  selectionTileClassNames(selected)
                ),
                children: [
                  /* @__PURE__ */ jsx3(RadioGroupItem, { value: opt.value, id, className: "sr-only" }),
                  /* @__PURE__ */ jsx3(SelectionTileGraphic, { option: opt, selected }),
                  /* @__PURE__ */ jsx3(SelectionTileLabelText, { option: opt })
                ]
              },
              opt.value
            );
          })
        }
      )
    ] });
  }
  return /* @__PURE__ */ jsxs("div", { className, children: [
    sectionLabel ? /* @__PURE__ */ jsx3("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: sectionLabel }) : null,
    /* @__PURE__ */ jsx3("div", { className: gridClass, children: options.map((opt) => {
      const selected = value === opt.value;
      if (labelPlacement === "below") {
        return /* @__PURE__ */ jsxs(
          "button",
          {
            type: "button",
            "aria-label": opt.label,
            "aria-pressed": selected,
            onClick: () => onValueChange(opt.value),
            className: "flex min-w-0 flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
            children: [
              /* @__PURE__ */ jsx3("span", { className: cn("flex w-full justify-center", selectionTilePreviewClassNames(selected)), children: /* @__PURE__ */ jsx3("span", { className: "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx3(SelectionTileGraphic, { option: opt, selected }) }) }),
              /* @__PURE__ */ jsx3(SelectionTileCaptionBelow, { option: opt, selected, ariaHidden: true })
            ]
          },
          opt.value
        );
      }
      return /* @__PURE__ */ jsxs(
        "button",
        {
          type: "button",
          "aria-label": opt.label,
          "aria-pressed": selected,
          onClick: () => onValueChange(opt.value),
          className: selectionTileClassNames(selected),
          children: [
            /* @__PURE__ */ jsx3(SelectionTileGraphic, { option: opt, selected }),
            /* @__PURE__ */ jsx3(SelectionTileLabelText, { option: opt })
          ]
        },
        opt.value
      );
    }) })
  ] });
}
export {
  SelectionTileGrid,
  selectionTileClassNames,
  selectionTilePreviewClassNames
};
//# sourceMappingURL=selection-tile-grid.js.map