@vela-ui/react/dist/chunk-L732RLIU.mjs

Vela UI React components

import {
  createContext
} from "./chunk-UHLSIXAN.mjs";

// src/components/toggle-button-group.tsx
import {
  ToggleButtonGroup as AriaToggleButtonGroup,
  composeRenderProps
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx } from "react/jsx-runtime";
var toggleButtonGroupVariants = tv({
  base: "isolate inline-flex items-center",
  variants: {
    variant: {
      default: "gap-1",
      ghost: "gap-1",
      outline: "[&_button]:rounded-none"
    },
    orientation: {
      horizontal: "flex-row",
      vertical: "flex-col [&_button]:w-full"
    }
  },
  compoundVariants: [
    {
      variant: "outline",
      orientation: "horizontal",
      className: "[&_button]:first:rounded-s-md [&_button]:last:rounded-e-md [&_button:not(:first-child)]:-ml-px"
    },
    {
      variant: "outline",
      orientation: "vertical",
      className: "[&_button]:-mt-px [&_button]:first:rounded-t-md [&_button]:last:rounded-b-md"
    }
  ],
  defaultVariants: {
    variant: "default",
    orientation: "horizontal"
  }
});
var [ToggleGroupProvider, useToggleGroupContext] = createContext({
  name: "ToggleButtonGroupContext",
  strict: false
});
function ToggleButtonGroup({
  className,
  variant,
  size,
  shape,
  orientation = "horizontal",
  ...props
}) {
  return /* @__PURE__ */ jsx(ToggleGroupProvider, { value: { variant, size, shape }, children: /* @__PURE__ */ jsx(
    AriaToggleButtonGroup,
    {
      "data-slot": "toggle-button-group",
      orientation,
      className: composeRenderProps(
        className,
        (className2, renderProps) => toggleButtonGroupVariants({
          ...renderProps,
          orientation,
          variant,
          className: className2
        })
      ),
      ...props
    }
  ) });
}

export {
  useToggleGroupContext,
  ToggleButtonGroup
};