import { useState, useMemo, useCallback, useEffect } from 'react';
import clsx from 'clsx';
import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { createClassed, classed } from '@tw-classed/react';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { mergeWith } from 'lodash-es';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import { jsx } from 'react/jsx-runtime';

// src/components/ToggleGroup/ToggleGroup.tsx
var sizeVariants = {
  width: {
    xs: clsx("w-28"),
    sm: clsx("w-34"),
    md: clsx("w-40"),
    lg: clsx("w-48")
  },
  height: {
    xs: clsx("h-28"),
    sm: clsx("h-34"),
    md: clsx("h-40"),
    lg: clsx("h-48")
  },
  inlineWidth: {
    xs: clsx("w-16 text-xs"),
    sm: clsx("w-20 text-xs"),
    md: clsx("w-22 text-xs"),
    lg: clsx("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx("h-16 text-xs"),
    sm: clsx("h-20 text-xs"),
    md: clsx("h-22 text-xs"),
    lg: clsx("h-26 text-xs")
  },
  textSize: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg"
  },
  lineHeight: {
    xs: "leading-xs",
    sm: "leading-sm",
    md: "leading-md",
    lg: "leading-lg"
  },
  paddingY: {
    xs: "py-4",
    sm: "py-6",
    md: "py-8",
    lg: "py-10"
  },
  paddingX: {
    xs: clsx("px-4"),
    sm: clsx("px-6"),
    md: clsx("px-8"),
    lg: clsx("px-10")
  },
  extraPaddingX: {
    xs: clsx("px-14"),
    sm: clsx("px-16"),
    md: clsx("px-18"),
    lg: clsx("px-20")
  }
};
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
var classedVariantMap = (variantMap) => variantMap;
var expandVariant = createVariatGroupTransfomer({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => twMerge$1(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}

// src/styles/input-component.variants.ts
var inputComponentVariants = classedVariantMap({
  size: sizeVariants,
  rounded: {
    roundedLeft: "rounded-r-0 rounded-l-md",
    roundedRight: "rounded-l-0 rounded-r-md",
    rounded: "rounded-md"
  }
});
classed("div", {
  variants: {
    orientation: {
      horizontal: "inline-flex flex-row items-center ",
      vertical: "flex flex-col justify-center"
    }
  }
});
var inputComponentWidths = {
  xs: clsx("w-168"),
  sm: clsx("w-184"),
  md: clsx("w-216"),
  lg: clsx("w-400")
};
var inputComponentMinWidths = {
  none: "",
  xs: clsx("min-w-[168px]"),
  sm: clsx("min-w-[184px]"),
  md: clsx("min-w-[216px]"),
  lg: clsx("min-w-[400px]")
};
classed("div", {
  variants: {
    size: {
      xs: "",
      sm: "",
      md: "",
      lg: ""
    },
    minWidth: inputComponentMinWidths,
    width: {
      autoWidth: "w-auto",
      fullWidth: "!w-full",
      fixedWidth: ""
    }
  },
  defaultVariants: {
    width: "fixedWidth",
    size: "md"
  },
  compoundVariants: [
    { size: "xs", width: "fixedWidth", class: inputComponentWidths.xs },
    { size: "sm", width: "fixedWidth", class: inputComponentWidths.sm },
    { size: "md", width: "fixedWidth", class: inputComponentWidths.md },
    { size: "lg", width: "fixedWidth", class: inputComponentWidths.lg }
  ]
});
var inputSizeVariants = mergeVariants([
  inputComponentVariants.size.lineHeight,
  inputComponentVariants.size.paddingX,
  inputComponentVariants.size.paddingY,
  inputComponentVariants.size.textSize
]);
classed("div", "inline-flex", {
  variants: {
    size: inputSizeVariants
  }
});

// src/components/ToggleGroup/ToggleGroup.styles.tsx
var ToggleGroupContainerElement = classed(
  ToggleGroupPrimitive.ToggleGroup,
  "group inline-flex  bg-surface-soft",
  {
    variants: {
      variant: {
        ghost: "gap-4 bg-transparent shadow-none",
        outlined: "rounded-md shadow-sm"
      },
      fullWidth: {
        true: "flex w-full"
      },
      border: {
        true: "shadow-sm  rounded-md",
        false: ""
      }
    },
    defaultVariants: {
      fullWidth: false,
      variant: "outlined"
    }
  }
);
var ToggleGroupItemElement = classed(
  ToggleGroupPrimitive.Item,
  "relative",
  "border-y",
  "group/tgi",
  "whitespace-nowrap",
  "flex items-center justify-center",
  "ring-offset-0",
  "flex-grow shrink-0",
  "select-none",
  "before-absolute-content",
  expandVariant(
    `radix-state-on:(text-primary-content,bg-primary,border-highlight-strong)
    radix-state-off:(text-content-subtle,border-boundary-ghost,focus-visible:text-content-weak)
    radix-state-off:hover:(text-content-weak,bg-highlight-subtle)
    focus-visible:(outline-none,-outline-offset-2,ring-2)
    radix-state-off:focus-visible:(outline-primary-content/70,ring-highlight-intense,text-content-high)
    radix-state-on:focus-visible:(outline-primary,outline-offset-0,ring-inset,ring-[1.5px],ring-primary-content/90)
    `
  ),
  {
    variants: {
      size: mergeVariants([
        inputComponentVariants.size.textSize,
        inputComponentVariants.size.paddingY,
        inputComponentVariants.size.paddingX
      ]),
      border: {
        true: "first:rounded-l-md last:rounded-r-md outline-offset",
        false: "rounded-md border-none radix-state-on:bg-secondary/20 radix-state-on:text-content"
      },
      fontWeight: {
        medium: "font-medium",
        semibold: "font-semibold"
      }
    },
    defaultVariants: {
      fontWeight: "medium",
      border: true
    }
  }
);
classed(
  "div",
  "absolute inset-0",
  expandVariant(
    `
    group-radix-state-on:(-left-px,-right-px)
    group-radix-state-on:(first:border-r-2,middle:border-l-2,right:border-l-2)
    `
  )
);
var getToggleItemBorderWidth = ({
  isLeftSiblingSelected,
  isRightSiblingSelected,
  isFirst,
  isLast,
  isMiddle,
  isSelected
}) => {
  if (isSelected) {
    return "border-l border-r";
  }
  if (isLeftSiblingSelected && isLast) {
    return "border-r border-l-0 border-l-0";
  }
  if (isRightSiblingSelected && isFirst) {
    return "border-l border-r-0";
  }
  if (isLeftSiblingSelected) {
    return "border-l-0 border-r";
  }
  if (isRightSiblingSelected) {
    return "border-r-0";
  }
  if (isFirst) {
    return "border-l border-r";
  }
  if (isLast) {
    return "border-r";
  }
  if (isMiddle) {
    return "border-r";
  }
  return "";
};

// src/components/ToggleGroup/ToggleGroup.helpers.ts
var getElementPositionData = ({
  index,
  lastIndex,
  selectedIndex
}) => {
  const isFirst = index === 0;
  const isSecondLast = index === lastIndex - 1;
  const isSecond = index === 1;
  const isLast = index === lastIndex;
  const isMiddle = !isFirst && !isLast;
  const isSelected = index === selectedIndex;
  const isFirstSelected = selectedIndex === 0;
  const isLastSelected = selectedIndex === lastIndex;
  const isLeftSiblingSelected = index - 1 === selectedIndex;
  const isRightSiblingSelected = index + 1 === selectedIndex;
  const isFirstAndSelected = isSelected && isFirstSelected;
  const isLastAndSelected = isSelected && isLastSelected;
  return {
    isFirst,
    isLast,
    isMiddle,
    isSelected,
    isFirstSelected,
    isLastSelected,
    isLeftSiblingSelected,
    isRightSiblingSelected,
    isFirstAndSelected,
    isLastAndSelected,
    isSecond,
    isSecondLast
  };
};
function ToggleGroup2(props) {
  const {
    disabled,
    onValueChange,
    defaultValue: defaultValueProp,
    items,
    className,
    fullWidth,
    value
  } = props;
  const defaultValue = defaultValueProp ?? items[0]?.value;
  const [selectedValue, setSelectedValue] = useState(defaultValue);
  const selectedIndex = useMemo(() => {
    return items.findIndex((e) => e.value === selectedValue);
  }, [items, selectedValue]);
  const handleValueChange = useCallback(
    (val) => {
      if (val) {
        setSelectedValue(val);
        onValueChange?.(val);
      }
    },
    [setSelectedValue, onValueChange]
  );
  useEffect(() => {
    if (value && items.find((item) => item.value === value)) {
      setSelectedValue(value);
    }
  }, [value, setSelectedValue, items]);
  return /* @__PURE__ */ jsx(
    ToggleGroupContainerElement,
    {
      type: "single",
      id: "toggle-group",
      value: selectedValue,
      onValueChange: handleValueChange,
      disabled,
      fullWidth,
      className: clsx(className),
      rovingFocus: true,
      children: items.map((item, index) => {
        return /* @__PURE__ */ jsx(
          ToggleGroupItem,
          {
            index,
            item,
            selectedIndex,
            ...props
          },
          item.value
        );
      })
    }
  );
}
var ToggleGroupItem = ({
  item,
  className,
  index,
  selectedIndex,
  ...props
}) => {
  const { disabled, size = "md" } = props;
  const { value, label } = item;
  const elementPositonData = getElementPositionData({
    index,
    lastIndex: props.items.length - 1,
    selectedIndex
  });
  return /* @__PURE__ */ jsx(
    ToggleGroupItemElement,
    {
      value,
      disabled,
      size,
      className: twMerge$1(getToggleItemBorderWidth(elementPositonData)),
      children: label
    }
  );
};

export { ToggleGroup2 as ToggleGroup };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map