"use client";
import * as React2 from 'react';
import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
import { Checkbox } from '@base-ui/react/checkbox';
import { MinusIcon, CheckIcon } from 'lucide-react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/primitives/portfolio-form-controls-visuals.tsx
var PORTFOLIO_FORM_CONTROL_BORDER_HEX = "#ebeced";
var PORTFOLIO_FORM_CONTROL_PRIMARY_ACCENT_HEX = "#319e83";
var PORTFOLIO_CHECKBOX_ACCENT_HEX = PORTFOLIO_FORM_CONTROL_PRIMARY_ACCENT_HEX;
var PORTFOLIO_FORM_CONTROL_DISABLED_FILL_HEX = "#a3a3a3";
var PORTFOLIO_FORM_CONTROL_GRADIENT_START_HEX = "#ECECED";
var PORTFOLIO_FORM_CONTROL_GRADIENT_MID_HEX = "#7A7B7F";
var PORTFOLIO_FORM_CONTROL_GRADIENT_END_HEX = "#ECECED";
var PORTFOLIO_FORM_CONTROL_SURFACE_HEX = "#fafafa";
var PORTFOLIO_CHECKBOX_DEFAULT_VISUALS = {
  accentColor: PORTFOLIO_CHECKBOX_ACCENT_HEX,
  gradientStartColor: PORTFOLIO_FORM_CONTROL_GRADIENT_START_HEX,
  gradientMidColor: PORTFOLIO_FORM_CONTROL_GRADIENT_MID_HEX,
  gradientEndColor: PORTFOLIO_FORM_CONTROL_GRADIENT_END_HEX,
  surfaceColor: PORTFOLIO_FORM_CONTROL_SURFACE_HEX,
  disabledFillColor: PORTFOLIO_FORM_CONTROL_DISABLED_FILL_HEX,
  glowSizePx: 12,
  glowBlurPx: 2,
  glowOpacity: 1,
  fillRadiusPx: 2
};
function hexToRgbaString(hexColor, alpha) {
  const normalizedHex = hexColor.replace("#", "");
  const safeAlpha = Math.min(1, Math.max(0, alpha));
  if (normalizedHex.length !== 6) {
    return hexColor;
  }
  const red = Number.parseInt(normalizedHex.slice(0, 2), 16);
  const green = Number.parseInt(normalizedHex.slice(2, 4), 16);
  const blue = Number.parseInt(normalizedHex.slice(4, 6), 16);
  return `rgba(${red}, ${green}, ${blue}, ${safeAlpha})`;
}
function PortfolioCheckboxControl(_a) {
  var _b = _a, {
    className,
    disabled,
    showFocusRing,
    visualDisabled,
    visualSpec = PORTFOLIO_CHECKBOX_DEFAULT_VISUALS,
    style
  } = _b, props = __objRest(_b, [
    "className",
    "disabled",
    "showFocusRing",
    "visualDisabled",
    "visualSpec",
    "style"
  ]);
  const isVisuallyDisabled = Boolean(disabled || visualDisabled);
  const fadeWhenDisabled = isVisuallyDisabled && !showFocusRing;
  return /* @__PURE__ */ jsx(
    Checkbox.Root,
    __spreadProps(__spreadValues({
      "data-slot": "portfolio-checkbox",
      "data-visual-disabled": visualDisabled ? "true" : void 0,
      disabled,
      className: cn(
        "group/portfolio-checkbox peer relative inline-flex h-[24px] w-[24px] min-h-[24px] min-w-[24px] shrink-0 cursor-pointer items-center justify-center outline-none transition-colors touch-manipulation",
        "focus-visible:outline-none",
        "disabled:cursor-not-allowed",
        !showFocusRing && "disabled:opacity-65",
        "data-checked:text-white data-indeterminate:text-white",
        fadeWhenDisabled && "opacity-65",
        className
      ),
      style: __spreadValues({
        "--portfolio-checkbox-border": PORTFOLIO_FORM_CONTROL_BORDER_HEX,
        "--portfolio-checkbox-green": visualSpec.accentColor,
        "--portfolio-checkbox-disabled": visualSpec.disabledFillColor,
        "--portfolio-checkbox-surface": visualSpec.surfaceColor,
        "--portfolio-form-control-focus-ring": hexToRgbaString(
          visualSpec.accentColor,
          0.32
        )
      }, style)
    }, props), {
      children: /* @__PURE__ */ jsxs(
        "span",
        {
          className: cn(
            "relative size-4 shrink-0 overflow-hidden rounded-[4px] transition-colors",
            "group-focus-visible/portfolio-checkbox:ring-2 group-focus-visible/portfolio-checkbox:ring-[color:var(--portfolio-form-control-focus-ring)] group-focus-visible/portfolio-checkbox:ring-offset-1 group-focus-visible/portfolio-checkbox:ring-offset-background",
            showFocusRing && "ring-2 ring-[color:var(--portfolio-form-control-focus-ring)] ring-offset-1 ring-offset-background"
          ),
          children: [
            /* @__PURE__ */ jsx(
              "span",
              {
                "aria-hidden": true,
                className: "pointer-events-none absolute inset-0 z-0 rounded-[4px]",
                style: {
                  background: `linear-gradient(to bottom right, ${visualSpec.gradientStartColor} 0%, ${visualSpec.gradientMidColor} 50%, ${visualSpec.gradientEndColor} 100%)`
                }
              }
            ),
            /* @__PURE__ */ jsx(
              "span",
              {
                "aria-hidden": true,
                className: "pointer-events-none absolute inset-px z-0 rounded-[3px] bg-[color:var(--portfolio-checkbox-surface)] transition-colors group-data-checked/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-green)] group-data-indeterminate/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-green)] group-disabled/portfolio-checkbox:bg-[#e3e5e8] group-disabled/portfolio-checkbox:group-data-checked/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-disabled)] group-disabled/portfolio-checkbox:group-data-indeterminate/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-disabled)] group-data-[visual-disabled=true]/portfolio-checkbox:bg-[#e3e5e8] group-data-[visual-disabled=true]/portfolio-checkbox:group-data-checked/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-disabled)] group-data-[visual-disabled=true]/portfolio-checkbox:group-data-indeterminate/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-disabled)]"
              }
            ),
            /* @__PURE__ */ jsx(
              "span",
              {
                "aria-hidden": true,
                className: "pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-[0.775px] opacity-0 transition-opacity group-data-checked/portfolio-checkbox:opacity-100 group-data-indeterminate/portfolio-checkbox:opacity-100 group-disabled/portfolio-checkbox:opacity-0 group-data-[visual-disabled=true]/portfolio-checkbox:opacity-0",
                style: {
                  width: visualSpec.glowSizePx,
                  height: visualSpec.glowSizePx,
                  backgroundColor: hexToRgbaString(
                    visualSpec.accentColor,
                    visualSpec.glowOpacity
                  ),
                  filter: `blur(${visualSpec.glowBlurPx}px)`
                }
              }
            ),
            /* @__PURE__ */ jsx(
              "span",
              {
                "aria-hidden": true,
                className: "pointer-events-none absolute left-1/2 top-1/2 z-10 size-3 -translate-x-1/2 -translate-y-1/2 bg-[color:var(--portfolio-checkbox-green)] opacity-0 transition-opacity group-data-checked/portfolio-checkbox:opacity-100 group-data-indeterminate/portfolio-checkbox:opacity-100 group-disabled/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-disabled)] group-data-[visual-disabled=true]/portfolio-checkbox:bg-[color:var(--portfolio-checkbox-disabled)]",
                style: {
                  borderRadius: visualSpec.fillRadiusPx
                }
              }
            ),
            /* @__PURE__ */ jsx(
              Checkbox.Indicator,
              {
                "data-slot": "portfolio-checkbox-indicator",
                keepMounted: true,
                className: "absolute inset-0 z-10 flex items-center justify-center leading-none text-current group-disabled/portfolio-checkbox:text-white/70 group-data-[visual-disabled=true]/portfolio-checkbox:text-white/70",
                render: (indicatorProps, state) => /* @__PURE__ */ jsx(
                  "span",
                  __spreadProps(__spreadValues({}, indicatorProps), {
                    className: cn(
                      indicatorProps.className,
                      "flex size-full items-center justify-center"
                    ),
                    children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, { className: "block size-2.5 text-white", strokeWidth: 2.25, "aria-hidden": true }) : state.checked ? /* @__PURE__ */ jsx(CheckIcon, { className: "block size-2.5 text-white", strokeWidth: 2.25, "aria-hidden": true }) : null
                  })
                )
              }
            )
          ]
        }
      )
    })
  );
}
function CheckboxGroup(_a) {
  var _b = _a, {
    className
  } = _b, props = __objRest(_b, [
    "className"
  ]);
  return /* @__PURE__ */ jsx(
    CheckboxGroup$1,
    __spreadValues({
      "data-slot": "checkbox-group",
      className: cn("grid w-full gap-2", className)
    }, props)
  );
}
function CheckboxCardGroup(_a) {
  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
  return /* @__PURE__ */ jsx(
    CheckboxGroup,
    __spreadValues({
      "data-slot": "checkbox-card-group",
      className: cn("grid gap-2 sm:grid-cols-2", className)
    }, props)
  );
}
function CheckboxCardOption(_a) {
  var _b = _a, {
    className,
    title,
    description,
    subDetail,
    trailing,
    id: idProp
  } = _b, props = __objRest(_b, [
    "className",
    "title",
    "description",
    "subDetail",
    "trailing",
    "id"
  ]);
  var _a2;
  const generatedId = React2.useId();
  const id = idProp != null ? idProp : `checkbox-card-${String((_a2 = props.value) != null ? _a2 : "").replace(/\s/g, "-")}-${generatedId.replace(/:/g, "")}`;
  const descriptionId = description ? `${id}-desc` : void 0;
  return /* @__PURE__ */ jsx(
    "label",
    {
      htmlFor: id,
      className: cn(
        "group/card-option flex cursor-pointer flex-col overflow-hidden rounded-md border border-border bg-card text-left transition-colors",
        "hover:bg-accent/30 hover:border-border",
        "has-[[data-checked]]:border-primary has-[[data-checked]]:bg-primary/5",
        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
        "[&_[data-slot=checkbox-card-trailing]]:text-muted-foreground has-[[data-checked]]:[&_[data-slot=checkbox-card-trailing]]:text-primary",
        "[&_[data-slot=checkbox-card-trailing]_[data-slot=badge]]:font-headline [&_[data-slot=checkbox-card-trailing]_[data-slot=badge]]:tracking-normal",
        className
      ),
      children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-3 p-4", children: [
        /* @__PURE__ */ jsx(
          PortfolioCheckboxControl,
          __spreadProps(__spreadValues({
            id,
            "aria-describedby": descriptionId
          }, props), {
            className: "shrink-0"
          })
        ),
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: cn(
              "min-w-0 flex-1 flex flex-col gap-0.5",
              trailing != null && "pr-20"
            ),
            children: [
              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-snug text-foreground", children: title }),
              description ? /* @__PURE__ */ jsx(
                "span",
                {
                  id: descriptionId,
                  className: "text-sm text-muted-foreground leading-snug",
                  children: description
                }
              ) : null,
              subDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subDetail }) : null
            ]
          }
        ),
        trailing != null ? /* @__PURE__ */ jsx(
          "span",
          {
            "data-slot": "checkbox-card-trailing",
            className: "absolute top-2 right-2 shrink-0 transition-colors",
            children: trailing
          }
        ) : null
      ] })
    }
  );
}

export { CheckboxCardGroup, CheckboxCardOption };
//# sourceMappingURL=checkbox-card.js.map
//# sourceMappingURL=checkbox-card.js.map