@vela-ui/react/dist/components/toggle-button-group.js

Vela UI React components

"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/toggle-button-group.tsx
var toggle_button_group_exports = {};
__export(toggle_button_group_exports, {
  ToggleButtonGroup: () => ToggleButtonGroup,
  useToggleGroupContext: () => useToggleGroupContext
});
module.exports = __toCommonJS(toggle_button_group_exports);
var import_react_aria_components = require("react-aria-components");
var import_tailwind_variants = require("tailwind-variants");

// src/lib/context.ts
var React = __toESM(require("react"));
function createContext2(options = {}) {
  const {
    strict = true,
    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
    name
  } = options;
  const Context = React.createContext(void 0);
  Context.displayName = name;
  function useContext2() {
    var _a;
    const context = React.useContext(Context);
    if (!context && strict) {
      const error = new Error(errorMessage);
      error.name = "ContextError";
      (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext2);
      throw error;
    }
    return context;
  }
  return [Context.Provider, useContext2, Context];
}

// src/components/toggle-button-group.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var toggleButtonGroupVariants = (0, import_tailwind_variants.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] = createContext2({
  name: "ToggleButtonGroupContext",
  strict: false
});
function ToggleButtonGroup({
  className,
  variant,
  size,
  shape,
  orientation = "horizontal",
  ...props
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupProvider, { value: { variant, size, shape }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_aria_components.ToggleButtonGroup,
    {
      "data-slot": "toggle-button-group",
      orientation,
      className: (0, import_react_aria_components.composeRenderProps)(
        className,
        (className2, renderProps) => toggleButtonGroupVariants({
          ...renderProps,
          orientation,
          variant,
          className: className2
        })
      ),
      ...props
    }
  ) });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ToggleButtonGroup,
  useToggleGroupContext
});