import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { omit, get, findKey, pick } from 'lodash-es';
import { createClassed } from '@tw-classed/react';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import clsx4 from 'clsx';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import { Checkbox } from 'react-aria-components';
import { Slot } from '@radix-ui/react-slot';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useToggleState } from 'react-stately';
import { getByPath as getByPath$1 } from '@clickbar/dot-diver';
import 'exhaustive';
import 'change-case';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';

// src/utils/classed/classed.ts
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });

// src/utils/notEmpty.ts
function notEmpty(value) {
  return value !== null && value !== void 0;
}

// src/utils/classed/expandVariant.ts
createVariatGroupTransfomer({});
var SvgIconWrapper = ({
  children,
  asChild,
  autoSize = true,
  viewbox = "20",
  className,
  svgProps,
  strokeWidth,
  rounded,
  ...props
}) => {
  const Svg = asChild ? Slot : "svg";
  const size = autoSize ? "100%" : viewbox;
  const { className: roundedClassName, ...roundedProps } = (rounded ? {
    className: "rounded-full",
    strokeLinejoin: "round",
    strokeLinecap: "round"
  } : void 0) ?? {};
  return /* @__PURE__ */ jsx(
    Svg,
    {
      className: twMerge$1(roundedClassName, className),
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: `0 0 ${viewbox} ${viewbox}`,
      height: size,
      width: size,
      fill: "currentColor",
      stroke: "currentColor",
      ...roundedProps,
      strokeWidth,
      ...props,
      children
    }
  );
};
var svgIcon = (svg, defaultProps) => {
  const SvgIcon = (props) => /* @__PURE__ */ jsx(SvgIconWrapper, { ...props, ...defaultProps, asChild: true, children: svg });
  return SvgIcon;
};

// src/utils/environment-utils.ts
function isClientSide() {
  return typeof window !== "undefined";
}
function isDevelopment() {
  if (typeof window === "undefined" && typeof process !== "undefined" && process.env.NODE_ENV === "development") {
    return true;
  }
  if (typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")) {
    return true;
  }
  return false;
}
function getByPath(object, path, _maxDepth) {
  return getByPath$1(object, path);
}

// src/utils/objectMap.ts
function objectMap(obj, fn) {
  return Object.fromEntries(
    Object.entries(obj).map(([k, v], index) => fn({ key: k, value: v, index, get: getByPath })).filter(notEmpty)
  );
}

// src/utils/pickProps.ts
function generatePropPickerFn(pickedRecord) {
  const pickedKeys = Object.keys(pickedRecord);
  const pickerFn = (props, options) => {
    const { defaultProps } = options ?? {};
    return { ...defaultProps, ...pick(props, pickedKeys) };
  };
  pickerFn.pickedKeys = pickedKeys;
  pickerFn.pickedRecord = pickedRecord;
  pickerFn.omit = (props) => omit(props, pickedKeys);
  return pickerFn;
}
var NO_DEFAULT_VALUE = "_pick_";
function pickProps(props, pickedProps, options) {
  const { shouldValidatePickProp = true } = options ?? {};
  const entries = Object.entries(pickedProps).map(([path, defaultValue]) => {
    const prop = get(props, path);
    if (defaultValue === NO_DEFAULT_VALUE) {
      return [path, prop];
    }
    if (shouldValidatePickProp) {
      validatePickProp(defaultValue, pickedProps);
    }
    return [path, prop ?? defaultValue];
  });
  return Object.fromEntries(entries);
}
function validatePickProp(input, pickedProps) {
  if (isDevelopment()) {
    const startsWith = ["_p", "pick"];
    const isLikelyTypo = typeof input === "string" && startsWith.some((typo) => input.startsWith(typo));
    if (isLikelyTypo) {
      const functionName = "`pickProps`";
      throw new Error(`
      Error thrown from ${functionName}
      
      A possible typo was detected in the arguments passed to the ${functionName} function.

      Expected value: "${NO_DEFAULT_VALUE}"

      Received value: "${input}" \u274C

      ${JSON.stringify(
        objectMap(pickedProps, ({ key, value }) => [
          key,
          value === input ? `${value} \u274C` : value
        ]),
        null,
        2
      )}
 
      If this is intended, add \`shouldValidatePickProp: true\` to the options.

      Note: This error is thrown only during development.

      `);
    }
  }
}
function Wrap({
  children,
  if: conditionProp,
  wrap: wrapper,
  fallback
}) {
  const fallbackWrapperFn = fallback ?? ((c) => /* @__PURE__ */ jsx(Fragment, { children: c }));
  if (!Boolean(conditionProp))
    return fallbackWrapperFn(children);
  const getCondition = () => {
    if (typeof conditionProp === "object") {
      return findKey(conditionProp, (e) => Boolean(e));
    }
    return conditionProp;
  };
  const condition = getCondition();
  const getWrapperFn = () => {
    if (typeof wrapper === "function")
      return wrapper;
    if (typeof wrapper === "object" && typeof condition === "string" && condition in wrapper) {
      return wrapper[condition];
    }
    return fallbackWrapperFn;
  };
  const wrapperFn = getWrapperFn();
  if (typeof condition === "boolean") {
    return Boolean(condition) ? wrapperFn(children) : /* @__PURE__ */ jsx(Fragment, { children });
  }
  return wrapperFn(children);
}

// src/utils/getElement.ts
function getElement(elementOrRef) {
  if (!elementOrRef)
    return void 0;
  if (elementOrRef instanceof HTMLElement || elementOrRef instanceof Element) {
    return elementOrRef;
  }
  return elementOrRef.current;
}

// src/utils/getNearestColorSchemeAttribute.ts
function getNearestColorSchemeAttribute(element, fallback = "default") {
  if (!isClientSide() || !element)
    return fallback;
  const nearestScheme = element.closest("[data-color-scheme]")?.getAttribute("data-color-scheme");
  return nearestScheme ?? fallback;
}

// src/hooks/useNearestColorSchemeAttribute.tsx
function useNearestColorSchemeAttribute({
  element
}) {
  const [colorSchemeAttribute, setColorSchemeAttribute] = useState(
    void 0
  );
  useLayoutEffect(() => {
    queueMicrotask(() => {
      const el = getElement(element);
      const colorScheme = getNearestColorSchemeAttribute(el);
      setColorSchemeAttribute(colorScheme);
    });
  }, [element]);
  return colorSchemeAttribute;
}
var TooltipContentElement = classed(
  TooltipPrimitive.TooltipContent,
  "radix-side-top:animate-slide-down-fade",
  "radix-side-right:animate-slide-left-fade",
  "radix-side-bottom:animate-slide-up-fade",
  "radix-side-left:animate-slide-right-fade",
  "inline-flex items-center py-8 px-10",
  "text-sm font-body",
  "rounded",
  "bg-surface-soft text-content-strong",
  "ring-1 ring-inset ring-content-tint",
  "z-50 relative",
  {
    variants: {
      size: {
        xs: "text-xs py-2 px-4",
        sm: "text-sm py-4 px-6",
        md: "text-md py-6 px-8",
        lg: "text-lg py-4 px-12"
      },
      maxWidth: {
        false: "",
        xs: "max-w-[20ch]",
        sm: "max-w-[30ch]",
        md: "max-w-[38ch]",
        lg: "max-w-[65ch]"
      },
      selectNone: {
        true: "select-none"
      }
    },
    defaultVariants: {
      maxWidth: "md",
      selectNone: true
    }
  }
);
var pickTooltipContentProps = generatePropPickerFn({
  style: "_pick_",
  className: "_pick_",
  "aria-label": "_pick_",
  size: "_pick_",
  align: "_pick_",
  maxWidth: "_pick_",
  selectNone: "_pick_",
  side: "_pick_",
  sideOffset: "_pick_",
  alignOffset: "_pick_",
  arrowPadding: "_pick_",
  collisionBoundary: "_pick_",
  collisionPadding: "_pick_",
  sticky: "_pick_",
  hideWhenDetached: "_pick_",
  avoidCollisions: "_pick_",
  stopPropogation: "_pick_",
  onTooltipClick: "_pick_"
});
var Tooltip = (props) => {
  const triggerRef = useRef(null);
  const colorSchemeAttribute = useNearestColorSchemeAttribute({ element: triggerRef });
  const { children, tooltip, triggerProps, triggerAsChild } = pickProps(props, {
    triggerAsChild: true,
    children: "_pick_",
    tooltip: "_pick_",
    triggerProps: {},
    forceMount: "_pick_"
  });
  const tooltipContentProps = pickTooltipContentProps(props);
  const tooltipRootProps = pickProps(props, {
    defaultOpen: "_pick_",
    open: "_pick_",
    onOpenChange: "_pick_",
    delayDuration: "_pick_",
    disableHoverableContent: "_pick_"
  });
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { delayDuration: 100, ...tooltipRootProps, children: [
    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: triggerAsChild, ref: triggerRef, ...triggerProps, children }),
    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipContent2, { colorScheme: colorSchemeAttribute, ...tooltipContentProps, children: tooltip }) })
  ] }) });
};
var TooltipContent2 = ({
  children,
  colorScheme,
  onTooltipClick,
  stopPropogation,
  side = "bottom",
  asChild,
  ...contentProps
}) => {
  return /* @__PURE__ */ jsx(
    TooltipContentElement,
    {
      size: "md",
      side,
      sideOffset: 4,
      collisionPadding: 4,
      alignOffset: 4,
      "data-color-scheme": colorScheme,
      asChild,
      ...contentProps,
      onClick: (e) => {
        if (stopPropogation) {
          e.stopPropagation();
        }
        onTooltipClick?.(e);
      },
      children
    }
  );
};
Tooltip.Provider = TooltipPrimitive.Provider;
Tooltip.Root = TooltipPrimitive.Root;
Tooltip.Trigger = TooltipPrimitive.Trigger;
Tooltip.Portal = TooltipPrimitive.Portal;
Tooltip.PrimitiveContent = TooltipPrimitive.Content;
Tooltip.Content = TooltipContent2;
classed(
  InformationCircleIcon,
  "rounded-full min-w-[24px] min-h-[24px] h-full w-full"
);
classed("button", "focus:ring-boundary-tint rounded-full");
function getSizeVariant(prop) {
  return objectMap(sizePropVariants, ({ key, value }) => {
    return [key, value[prop]];
  });
}
var sizePropVariants = {
  auto: {
    children: "gap-8",
    checkbox: "h-full w-full"
  },
  xs: {
    checkbox: "h-16 w-16 p-1",
    children: "leading-[16px] text-xs gap-4"
  },
  sm: {
    checkbox: "h-20 w-20 p-[1.5px]",
    children: "leading-[20px] text-sm gap-6"
  },
  md: {
    checkbox: "h-22 w-22 p-2",
    children: "leading-[22px] text-md gap-8"
  },
  lg: {
    checkbox: "h-26 w-26 p-[3px]",
    children: "leading-[26px] text-h4 gap-8"
  }
};
var CheckboxElement = classed(
  "div",
  "shrink-0",
  "cursor-pointer",
  "border border-boundary-weak",
  "rounded-[0.185rem]",
  "text-content-intense",
  "relative",
  "ml-2 mt-2",
  {
    defaultVariants: {
      size: "md",
      focusVisibleRing: true
    },
    variants: {
      size: getSizeVariant("checkbox"),
      isSelected: {
        true: "bg-primary text-primary-content border-highlight",
        false: "bg-highlight-subtle"
      },
      isDisabled: {
        true: "text-content-moderate cursor-auto bg-surface-dark border-highlight-moderate"
      },
      isReadOnly: {
        true: "!cursor-not-allowed"
      },
      focusVisibleRing: {
        true: "group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-content-intense"
      }
    },
    compoundVariants: [
      {
        isReadOnly: true,
        isSelected: true,
        className: clsx4("bg-primary noisy-surface-texture before:opacity-5 text-primary-soft")
      },
      {
        isReadOnly: true,
        isSelected: false,
        class: "bg-surface-dark"
      }
    ]
  }
);
var CheckboxContainerElement = classed(
  "div",
  "flex items-center gap-8",
  "cursor-pointer select-none",
  "relative",
  "grow",
  {
    defaultVariants: {
      size: "md"
    },
    variants: {
      size: getSizeVariant("children"),
      isDisabled: {
        true: "text-content-moderate"
      },
      isReadOnly: {
        true: "cursor-auto text-content-moderate"
      }
    }
  }
);
var BasicCheckbox = forwardRef(
  ({
    children,
    size,
    isSelected: isSelectedProp,
    checkboxContainerClassName,
    checkboxClassName,
    value,
    pointerEventsNone,
    label,
    tooltip,
    containerElement,
    ...props
  }, forwardedRef) => {
    const toggleState = useToggleState({
      isSelected: isSelectedProp
    });
    const isSelected = toggleState.isSelected && !props.isIndeterminate;
    return /* @__PURE__ */ jsx(
      Checkbox,
      {
        ...props,
        onChange: (e) => {
          props.onChange?.(e);
        },
        ref: forwardedRef,
        value,
        isSelected,
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === "Space") {
            toggleState.toggle();
          }
          props.onKeyDown?.(e);
        },
        className: clsx4("group", { "pointer-events-none": pointerEventsNone }),
        children: (renderFnProps) => {
          const { isSelected: isSelected2, isIndeterminate } = renderFnProps;
          const renderProps = { size, ...renderFnProps };
          return /* @__PURE__ */ jsx(
            Wrap,
            {
              if: Boolean(tooltip),
              wrap: (c) => {
                return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
                  /* @__PURE__ */ jsx(Tooltip.Content, { side: "right", align: "center", size: "sm", children: tooltip }),
                  /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: c })
                ] });
              },
              children: /* @__PURE__ */ jsxs(
                CheckboxContainerElement,
                {
                  as: containerElement,
                  onClick: () => {
                    toggleState.toggle();
                  },
                  className: renderPropsClassName({
                    className: checkboxContainerClassName,
                    renderProps
                  }),
                  isReadOnly: renderProps.isReadOnly,
                  isDisabled: renderProps.isDisabled,
                  children: [
                    /* @__PURE__ */ jsx(
                      CheckboxElement,
                      {
                        isSelected: renderProps.isSelected,
                        isReadOnly: renderProps.isReadOnly,
                        isDisabled: renderProps.isDisabled,
                        className: renderPropsClassName({ className: checkboxClassName, renderProps }),
                        children: isSelected2 && /* @__PURE__ */ jsxs(Fragment, { children: [
                          !isIndeterminate && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(CheckedSvg, { autoSize: true }) }),
                          isIndeterminate && /* @__PURE__ */ jsx(IndertermidateSvg, { autoSize: true })
                        ] })
                      }
                    ),
                    label && /* @__PURE__ */ jsxs("div", { children: [
                      " ",
                      label
                    ] }),
                    typeof children === "function" ? children(renderProps) : children
                  ]
                }
              )
            }
          );
        }
      }
    );
  }
);
var pickCheckboxProps = generatePropPickerFn({
  children: "_pick_",
  label: "_pick_",
  tooltip: "_pick_",
  isRequired: "_pick_",
  size: "_pick_",
  slot: "_pick_",
  style: "_pick_",
  className: "_pick_",
  id: "_pick_",
  "aria-controls": "_pick_",
  "aria-describedby": "_pick_",
  "aria-details": "_pick_",
  "aria-errormessage": "_pick_",
  "aria-label": "_pick_",
  "aria-labelledby": "_pick_",
  onFocus: "_pick_",
  onBlur: "_pick_",
  onChange: "_pick_",
  onKeyDown: "_pick_",
  onKeyUp: "_pick_",
  autoFocus: "_pick_",
  name: "_pick_",
  value: "_pick_",
  excludeFromTabOrder: "_pick_",
  isDisabled: "_pick_",
  isReadOnly: "_pick_",
  validationState: "_pick_",
  onFocusChange: "_pick_",
  isIndeterminate: "_pick_",
  defaultSelected: "_pick_",
  isSelected: "_pick_",
  focusVisibleRing: "_pick_",
  checkboxClassName: "_pick_",
  checkboxContainerClassName: "_pick_",
  pointerEventsNone: "_pick_",
  containerElement: "_pick_"
});
function renderPropsClassName({
  className,
  renderProps
}) {
  return typeof className === "function" ? className(renderProps) : className;
}
var CheckedSvg = svgIcon(
  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 10", className: "fill-none stroke-current stroke-2", children: /* @__PURE__ */ jsx("polyline", { points: "1.5 6 4.5 9 10.5 1" }) }),
  { autoSize: true, "aria-hidden": true }
);
var IndertermidateSvg = svgIcon(
  /* @__PURE__ */ jsx("svg", { strokeWidth: "3.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 12H6" }) }),
  { autoSize: true, "aria-hidden": true }
);

export { BasicCheckbox, pickCheckboxProps };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map