@vela-ui/react/dist/components/tabs.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/tabs.tsx
var tabs_exports = {};
__export(tabs_exports, {
  Tab: () => Tab,
  TabList: () => TabList,
  TabPanel: () => TabPanel,
  Tabs: () => Tabs
});
module.exports = __toCommonJS(tabs_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/tabs.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var tabsVariants = (0, import_tailwind_variants.tv)({
  slots: {
    root: "group/tabs",
    list: "relative isolate inline-flex",
    tab: "text-foreground/75 relative inline-flex cursor-pointer items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    panel: ""
  },
  variants: {
    variant: {
      default: {
        list: "bg-muted text-muted-foreground rounded-lg p-1",
        tab: "dark:text-muted-foreground data-[selected=true]:bg-background data-[selected=true]:dark:text-foreground data-[selected=true]:dark:border-input data-[selected=true]:dark:bg-input/30 rounded-md border border-transparent whitespace-nowrap transition-[color,box-shadow] data-[selected=true]:shadow-sm"
      },
      underline: {
        list: "border-input flex",
        tab: "data-[selected=true]:border-foreground data-[selected=true]:text-foreground border-transparent"
      },
      pills: {
        tab: "data-[selected=true]:bg-muted data-[selected=true]:text-foreground rounded-md"
      }
    },
    size: {
      sm: {
        tab: "h-9 text-sm"
      },
      md: {
        tab: "h-10 text-sm"
      },
      lg: {
        tab: "h-11 text-base"
      }
    },
    orientation: {
      horizontal: {
        root: "block",
        list: "flex-row",
        panel: "w-full pt-4"
      },
      vertical: {
        root: "flex",
        list: "flex-col",
        panel: "ps-4"
      }
    },
    fitted: {
      true: {
        list: "flex",
        tab: "flex-1 justify-center text-center"
      }
    },
    isDisabled: {
      true: {
        tab: "cursor-not-allowed opacity-50"
      }
    },
    isFocusVisible: {
      true: {
        tab: "border-ring ring-ring/50 outline-ring ring-[3px] outline-1",
        panel: "border-ring ring-ring/50 outline-ring ring-[3px] outline-1"
      }
    }
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      variant: "underline",
      className: {
        list: "border-b",
        tab: "-mb-px border-b-2"
      }
    },
    {
      orientation: "vertical",
      variant: "underline",
      className: {
        list: "border-r",
        tab: "-mr-px border-r-2"
      }
    }
  ],
  defaultVariants: {
    variant: "default",
    size: "md"
  }
});
var { root, list, tab, panel } = tabsVariants();
var [TabsProvider, useTabsContext] = createContext2({
  name: "TabsContext"
});
function Tabs({
  className,
  variant = "default",
  size = "md",
  fitted = false,
  children,
  ...props
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_aria_components.Tabs,
    {
      "data-slot": "tabs",
      className: (0, import_react_aria_components.composeRenderProps)(
        className,
        (className2, { orientation }) => root({ orientation, className: className2 })
      ),
      ...props,
      children: (0, import_react_aria_components.composeRenderProps)(children, (children2, { orientation }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsProvider, { value: { orientation, variant, size, fitted }, children: children2 }))
    }
  );
}
function TabList({ className, ...props }) {
  const { orientation, variant, fitted } = useTabsContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_aria_components.TabList,
    {
      "data-slot": "tab-list",
      className: (0, import_react_aria_components.composeRenderProps)(
        className,
        (className2) => list({ orientation, variant, fitted, className: className2 })
      ),
      ...props
    }
  );
}
function Tab({ className, ...props }) {
  const { orientation, variant, size, fitted } = useTabsContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_aria_components.Tab,
    {
      "data-slot": "tab",
      className: (0, import_react_aria_components.composeRenderProps)(
        className,
        (className2, renderProps) => tab({
          ...renderProps,
          orientation,
          variant,
          size,
          fitted,
          className: className2
        })
      ),
      ...props
    }
  );
}
function TabPanel({ className, ...props }) {
  const { orientation, variant, size } = useTabsContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_aria_components.TabPanel,
    {
      "data-slot": "tab-panel",
      className: (0, import_react_aria_components.composeRenderProps)(
        className,
        (className2, renderProps) => panel({ ...renderProps, orientation, variant, size, className: className2 })
      ),
      ...props
    }
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Tab,
  TabList,
  TabPanel,
  Tabs
});