@spark-ui/components/dist/tabs/index.js

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/tabs/index.ts
var tabs_exports = {};
__export(tabs_exports, {
  Tabs: () => Tabs2
});
module.exports = __toCommonJS(tabs_exports);

// src/tabs/Tabs.tsx
var import_radix_ui = require("radix-ui");

// src/tabs/TabsContext.tsx
var import_react = require("react");
var TabsContext = (0, import_react.createContext)({});
var useTabsContext = () => {
  const context = (0, import_react.useContext)(TabsContext);
  if (!context) {
    throw Error("useTabsContext must be used within a TabsContext Provider");
  }
  return context;
};

// src/tabs/TabsRoot.styles.ts
var import_class_variance_authority = require("class-variance-authority");
var rootStyles = (0, import_class_variance_authority.cva)([
  "flex",
  "data-[orientation=horizontal]:flex-col",
  "data-[orientation=vertical]:flex-row",
  "max-w-full"
]);

// src/tabs/Tabs.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Tabs = ({
  intent = "basic",
  size = "md",
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#root
   */
  asChild = false,
  forceMount = false,
  orientation = "horizontal",
  children,
  className,
  ref,
  ...rest
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    TabsContext.Provider,
    {
      value: {
        intent,
        size,
        orientation,
        forceMount
      },
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_radix_ui.Tabs.Root,
        {
          ref,
          asChild,
          orientation,
          className: rootStyles({ className }),
          "data-spark-component": "tabs",
          activationMode: "automatic",
          ...rest,
          children
        }
      )
    }
  );
};
Tabs.displayName = "Tabs";

// src/tabs/TabsContent.tsx
var import_radix_ui2 = require("radix-ui");

// src/tabs/TabsContent.styles.ts
var import_class_variance_authority2 = require("class-variance-authority");
var contentStyles = (0, import_class_variance_authority2.cva)(["w-full p-lg", "focus-visible:u-outline-inset"], {
  variants: {
    forceMount: {
      true: "data-[state=inactive]:hidden",
      false: ""
    }
  }
});

// src/tabs/TabsContent.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var TabsContent = ({
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#content
   */
  children,
  asChild = false,
  className,
  ref,
  ...rest
}) => {
  const { forceMount } = useTabsContext();
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    import_radix_ui2.Tabs.Content,
    {
      ref,
      forceMount: forceMount || rest.forceMount,
      className: contentStyles({ className, forceMount }),
      asChild,
      ...rest,
      children
    }
  );
};
TabsContent.displayName = "Tabs.Content";

// src/tabs/TabsList.tsx
var import_ArrowVerticalLeft = require("@spark-ui/icons/ArrowVerticalLeft");
var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
var import_radix_ui4 = require("radix-ui");
var import_react6 = require("react");

// src/button/Button.tsx
var import_class_variance_authority5 = require("class-variance-authority");
var import_react3 = require("react");

// src/slot/Slot.tsx
var import_radix_ui3 = require("radix-ui");
var import_react2 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var Slottable = import_radix_ui3.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Slot.Root, { ref, ...props });
};
var wrapPolymorphicSlot = (asChild, children, callback) => {
  if (!asChild) return callback(children);
  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
    children,
    void 0,
    callback(children.props.children)
  ) : null;
};

// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    Component,
    {
      ...props,
      ref,
      style: {
        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
        position: "absolute",
        border: 0,
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...props.style
      }
    }
  );
};
VisuallyHidden.displayName = "VisuallyHidden";

// src/spinner/Spinner.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority3 = require("class-variance-authority");
var defaultVariants = {
  intent: "current",
  size: "current",
  isBackgroundVisible: false
};
var spinnerStyles = (0, import_class_variance_authority3.cva)(
  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
  {
    variants: {
      /**
       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
       */
      size: {
        current: ["u-current-font-size"],
        sm: ["w-sz-20", "h-sz-20"],
        md: ["w-sz-28", "h-sz-28"],
        full: ["w-full", "h-full"]
      },
      /**
       * Color scheme of the spinner.
       */
      intent: (0, import_internal_utils.makeVariants)({
        current: ["border-current"],
        main: ["border-main"],
        support: ["border-support"],
        accent: ["border-accent"],
        basic: ["border-basic"],
        success: ["border-success"],
        alert: ["border-alert"],
        error: ["border-error"],
        info: ["border-info"],
        neutral: ["border-neutral"]
      }),
      /**
       * Size of the button.
       */
      isBackgroundVisible: {
        true: ["border-b-neutral-container", "border-l-neutral-container"],
        false: ["border-b-transparent", "border-l-transparent"]
      }
    },
    defaultVariants
  }
);

// src/spinner/Spinner.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Spinner = ({
  className,
  size = "current",
  intent = "current",
  label,
  isBackgroundVisible,
  ref,
  ...others
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    "span",
    {
      role: "status",
      "data-spark-component": "spinner",
      ref,
      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
      ...others,
      children: label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
    }
  );
};

// src/button/Button.styles.tsx
var import_internal_utils7 = require("@spark-ui/internal-utils");
var import_class_variance_authority4 = require("class-variance-authority");

// src/button/variants/filled.ts
var import_internal_utils2 = require("@spark-ui/internal-utils");
var filledVariants = [
  // Main
  {
    intent: "main",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-main",
      "text-on-main",
      "hover:bg-main-hovered",
      "enabled:active:bg-main-hovered",
      "focus-visible:bg-main-hovered"
    ])
  },
  // Support
  {
    intent: "support",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-support",
      "text-on-support",
      "hover:bg-support-hovered",
      "enabled:active:bg-support-hovered",
      "focus-visible:bg-support-hovered"
    ])
  },
  // Accent
  {
    intent: "accent",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-accent",
      "text-on-accent",
      "hover:bg-accent-hovered",
      "enabled:active:bg-accent-hovered",
      "focus-visible:bg-accent-hovered"
    ])
  },
  // Basic
  {
    intent: "basic",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-basic",
      "text-on-basic",
      "hover:bg-basic-hovered",
      "enabled:active:bg-basic-hovered",
      "focus-visible:bg-basic-hovered"
    ])
  },
  // Success
  {
    intent: "success",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-success",
      "text-on-success",
      "hover:bg-success-hovered",
      "enabled:active:bg-success-hovered",
      "focus-visible:bg-success-hovered"
    ])
  },
  // Alert
  {
    intent: "alert",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-alert",
      "text-on-alert",
      "hover:bg-alert-hovered",
      "enabled:active:bg-alert-hovered",
      "focus-visible:bg-alert-hovered"
    ])
  },
  // Danger
  {
    intent: "danger",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "text-on-error bg-error",
      "hover:bg-error-hovered enabled:active:bg-error-hovered",
      "focus-visible:bg-error-hovered"
    ])
  },
  // Info
  {
    intent: "info",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "text-on-error bg-info",
      "hover:bg-info-hovered enabled:active:bg-info-hovered",
      "focus-visible:bg-info-hovered"
    ])
  },
  // Neutral
  {
    intent: "neutral",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-neutral",
      "text-on-neutral",
      "hover:bg-neutral-hovered",
      "enabled:active:bg-neutral-hovered",
      "focus-visible:bg-neutral-hovered"
    ])
  },
  // Surface
  {
    intent: "surface",
    design: "filled",
    class: (0, import_internal_utils2.tw)([
      "bg-surface",
      "text-on-surface",
      "hover:bg-surface-hovered",
      "enabled:active:bg-surface-hovered",
      "focus-visible:bg-surface-hovered"
    ])
  }
];

// src/button/variants/ghost.ts
var import_internal_utils3 = require("@spark-ui/internal-utils");
var ghostVariants = [
  {
    intent: "main",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-main",
      "hover:bg-main/dim-5",
      "enabled:active:bg-main/dim-5",
      "focus-visible:bg-main/dim-5"
    ])
  },
  {
    intent: "support",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-support",
      "hover:bg-support/dim-5",
      "enabled:active:bg-support/dim-5",
      "focus-visible:bg-support/dim-5"
    ])
  },
  {
    intent: "accent",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-accent",
      "hover:bg-accent/dim-5",
      "enabled:active:bg-accent/dim-5",
      "focus-visible:bg-accent/dim-5"
    ])
  },
  {
    intent: "basic",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-basic",
      "hover:bg-basic/dim-5",
      "enabled:active:bg-basic/dim-5",
      "focus-visible:bg-basic/dim-5"
    ])
  },
  {
    intent: "success",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-success",
      "hover:bg-success/dim-5",
      "enabled:active:bg-success/dim-5",
      "focus-visible:bg-success/dim-5"
    ])
  },
  {
    intent: "alert",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-alert",
      "hover:bg-alert/dim-5",
      "enabled:active:bg-alert/dim-5",
      "focus-visible:bg-alert/dim-5"
    ])
  },
  {
    intent: "danger",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-error",
      "hover:bg-error/dim-5",
      "enabled:active:bg-error/dim-5",
      "focus-visible:bg-error/dim-5"
    ])
  },
  {
    intent: "info",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-info",
      "hover:bg-info/dim-5",
      "enabled:active:bg-info/dim-5",
      "focus-visible:bg-info/dim-5"
    ])
  },
  {
    intent: "neutral",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-neutral",
      "hover:bg-neutral/dim-5",
      "enabled:active:bg-neutral/dim-5",
      "focus-visible:bg-neutral/dim-5"
    ])
  },
  {
    intent: "surface",
    design: "ghost",
    class: (0, import_internal_utils3.tw)([
      "text-surface",
      "hover:bg-surface/dim-5",
      "enabled:active:bg-surface/dim-5",
      "focus-visible:bg-surface/dim-5"
    ])
  }
];

// src/button/variants/outlined.ts
var import_internal_utils4 = require("@spark-ui/internal-utils");
var outlinedVariants = [
  {
    intent: "main",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-main/dim-5",
      "enabled:active:bg-main/dim-5",
      "focus-visible:bg-main/dim-5",
      "text-main"
    ])
  },
  {
    intent: "support",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-support/dim-5",
      "enabled:active:bg-support/dim-5",
      "focus-visible:bg-support/dim-5",
      "text-support"
    ])
  },
  {
    intent: "accent",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-accent/dim-5",
      "enabled:active:bg-accent/dim-5",
      "focus-visible:bg-accent/dim-5",
      "text-accent"
    ])
  },
  {
    intent: "basic",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-basic/dim-5",
      "enabled:active:bg-basic/dim-5",
      "focus-visible:bg-basic/dim-5",
      "text-basic"
    ])
  },
  {
    intent: "success",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-success/dim-5",
      "enabled:active:bg-success/dim-5",
      "focus-visible:bg-success/dim-5",
      "text-success"
    ])
  },
  {
    intent: "alert",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-alert/dim-5",
      "enabled:active:bg-alert/dim-5",
      "focus-visible:bg-alert/dim-5",
      "text-alert"
    ])
  },
  {
    intent: "danger",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-error/dim-5",
      "enabled:active:bg-error/dim-5",
      "focus-visible:bg-error/dim-5",
      "text-error"
    ])
  },
  {
    intent: "info",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-info/dim-5",
      "enabled:active:bg-info/dim-5",
      "focus-visible:bg-info/dim-5",
      "text-info"
    ])
  },
  {
    intent: "neutral",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-neutral/dim-5",
      "enabled:active:bg-neutral/dim-5",
      "focus-visible:bg-neutral/dim-5",
      "text-neutral"
    ])
  },
  {
    intent: "surface",
    design: "outlined",
    class: (0, import_internal_utils4.tw)([
      "hover:bg-surface/dim-5",
      "enabled:active:bg-surface/dim-5",
      "focus-visible:bg-surface/dim-5",
      "text-surface"
    ])
  }
];

// src/button/variants/tinted.ts
var import_internal_utils5 = require("@spark-ui/internal-utils");
var tintedVariants = [
  {
    intent: "main",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-main-container",
      "text-on-main-container",
      "hover:bg-main-container-hovered",
      "enabled:active:bg-main-container-hovered",
      "focus-visible:bg-main-container-hovered"
    ])
  },
  {
    intent: "support",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-support-container",
      "text-on-support-container",
      "hover:bg-support-container-hovered",
      "enabled:active:bg-support-container-hovered",
      "focus-visible:bg-support-container-hovered"
    ])
  },
  {
    intent: "accent",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-accent-container",
      "text-on-accent-container",
      "hover:bg-accent-container-hovered",
      "enabled:active:bg-accent-container-hovered",
      "focus-visible:bg-accent-container-hovered"
    ])
  },
  {
    intent: "basic",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-basic-container",
      "text-on-basic-container",
      "hover:bg-basic-container-hovered",
      "enabled:active:bg-basic-container-hovered",
      "focus-visible:bg-basic-container-hovered"
    ])
  },
  {
    intent: "success",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-success-container",
      "text-on-success-container",
      "hover:bg-success-container-hovered",
      "enabled:active:bg-success-container-hovered",
      "focus-visible:bg-success-container-hovered"
    ])
  },
  {
    intent: "alert",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-alert-container",
      "text-on-alert-container",
      "hover:bg-alert-container-hovered",
      "enabled:active:bg-alert-container-hovered",
      "focus-visible:bg-alert-container-hovered"
    ])
  },
  {
    intent: "danger",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-error-container",
      "text-on-error-container",
      "hover:bg-error-container-hovered",
      "enabled:active:bg-error-container-hovered",
      "focus-visible:bg-error-container-hovered"
    ])
  },
  {
    intent: "info",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-info-container",
      "text-on-info-container",
      "hover:bg-info-container-hovered",
      "enabled:active:bg-info-container-hovered",
      "focus-visible:bg-info-container-hovered"
    ])
  },
  {
    intent: "neutral",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-neutral-container",
      "text-on-neutral-container",
      "hover:bg-neutral-container-hovered",
      "enabled:active:bg-neutral-container-hovered",
      "focus-visible:bg-neutral-container-hovered"
    ])
  },
  {
    intent: "surface",
    design: "tinted",
    class: (0, import_internal_utils5.tw)([
      "bg-surface",
      "text-on-surface",
      "hover:bg-surface-hovered",
      "enabled:active:bg-surface-hovered",
      "focus-visible:bg-surface-hovered"
    ])
  }
];

// src/button/variants/contrast.ts
var import_internal_utils6 = require("@spark-ui/internal-utils");
var contrastVariants = [
  {
    intent: "main",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-main",
      "hover:bg-main-container-hovered",
      "enabled:active:bg-main-container-hovered",
      "focus-visible:bg-main-container-hovered"
    ])
  },
  {
    intent: "support",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-support",
      "hover:bg-support-container-hovered",
      "enabled:active:bg-support-container-hovered",
      "focus-visible:bg-support-container-hovered"
    ])
  },
  {
    intent: "accent",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-accent",
      "hover:bg-accent-container-hovered",
      "enabled:active:bg-accent-container-hovered",
      "focus-visible:bg-accent-container-hovered"
    ])
  },
  {
    intent: "basic",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-basic",
      "hover:bg-basic-container-hovered",
      "enabled:active:bg-basic-container-hovered",
      "focus-visible:bg-basic-container-hovered"
    ])
  },
  {
    intent: "success",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-success",
      "hover:bg-success-container-hovered",
      "enabled:active:bg-success-container-hovered",
      "focus-visible:bg-success-container-hovered"
    ])
  },
  {
    intent: "alert",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-alert",
      "hover:bg-alert-container-hovered",
      "enabled:active:bg-alert-container-hovered",
      "focus-visible:bg-alert-container-hovered"
    ])
  },
  {
    intent: "danger",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-error",
      "hover:bg-error-container-hovered",
      "enabled:active:bg-error-container-hovered",
      "focus-visible:bg-error-container-hovered"
    ])
  },
  {
    intent: "info",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-info",
      "hover:bg-info-container-hovered",
      "enabled:active:bg-info-container-hovered",
      "focus-visible:bg-info-container-hovered"
    ])
  },
  {
    intent: "neutral",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-neutral",
      "hover:bg-neutral-container-hovered",
      "enabled:active:bg-neutral-container-hovered",
      "focus-visible:bg-neutral-container-hovered"
    ])
  },
  {
    intent: "surface",
    design: "contrast",
    class: (0, import_internal_utils6.tw)([
      "text-on-surface",
      "hover:bg-surface-hovered",
      "enabled:active:bg-surface-hovered",
      "focus-visible:bg-surface-hovered"
    ])
  }
];

// src/button/Button.styles.tsx
var buttonStyles = (0, import_class_variance_authority4.cva)(
  [
    "u-shadow-border-transition",
    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
    "px-lg",
    "text-body-1 font-bold",
    "focus-visible:u-outline"
  ],
  {
    variants: {
      /**
       * Main style of the button.
       *
       * - `filled`: Button will be plain.
       *
       * - `outlined`: Button will be transparent with an outline.
       *
       * - `tinted`: Button will be filled but using a lighter color scheme.
       *
       * - `ghost`: Button will look like a link. No borders, plain text.
       *
       * - `contrast`: Button will be surface filled. No borders, plain text.
       *
       */
      design: (0, import_internal_utils7.makeVariants)({
        filled: [],
        outlined: ["bg-transparent", "border-sm", "border-current"],
        tinted: [],
        ghost: [],
        contrast: ["bg-surface"]
      }),
      /**
       * Color scheme of the button.
       */
      intent: (0, import_internal_utils7.makeVariants)({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: []
      }),
      /**
       * Size of the button.
       */
      size: (0, import_internal_utils7.makeVariants)({
        sm: ["min-w-sz-32", "h-sz-32"],
        md: ["min-w-sz-44", "h-sz-44"],
        lg: ["min-w-sz-56", "h-sz-56"]
      }),
      /**
       * Shape of the button.
       */
      shape: (0, import_internal_utils7.makeVariants)({
        rounded: ["rounded-lg"],
        square: ["rounded-0"],
        pill: ["rounded-full"]
      }),
      /**
       * Disable the button, preventing user interaction and adding opacity.
       */
      disabled: {
        true: ["cursor-not-allowed", "opacity-dim-3"],
        false: ["cursor-pointer"]
      }
    },
    compoundVariants: [
      ...filledVariants,
      ...outlinedVariants,
      ...tintedVariants,
      ...ghostVariants,
      ...contrastVariants
    ],
    defaultVariants: {
      design: "filled",
      intent: "main",
      size: "md",
      shape: "rounded"
    }
  }
);

// src/button/Button.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var blockedEventHandlers = [
  "onClick",
  "onMouseDown",
  "onMouseUp",
  "onMouseEnter",
  "onMouseLeave",
  "onMouseOver",
  "onMouseOut",
  "onKeyDown",
  "onKeyPress",
  "onKeyUp",
  "onSubmit"
];
var Button = ({
  children,
  design = "filled",
  disabled = false,
  intent = "main",
  isLoading = false,
  loadingLabel,
  loadingText,
  shape = "rounded",
  size = "md",
  asChild,
  className,
  ref,
  ...others
}) => {
  const Component = asChild ? Slot : "button";
  const shouldNotInteract = !!disabled || isLoading;
  const disabledEventHandlers = (0, import_react3.useMemo)(() => {
    const result = {};
    if (shouldNotInteract) {
      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
    }
    return result;
  }, [shouldNotInteract]);
  const spinnerProps = {
    size: "current",
    className: loadingText ? "inline-block" : "absolute",
    ...loadingLabel && { "aria-label": loadingLabel }
  };
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
    Component,
    {
      "data-spark-component": "button",
      ...Component === "button" && { type: "button" },
      ref,
      className: buttonStyles({
        className,
        design,
        disabled: shouldNotInteract,
        intent,
        shape,
        size
      }),
      disabled: !!disabled,
      "aria-busy": isLoading,
      "aria-live": isLoading ? "assertive" : "off",
      ...others,
      ...disabledEventHandlers,
      children: wrapPolymorphicSlot(
        asChild,
        children,
        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { ...spinnerProps }),
          loadingText && loadingText,
          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
            "div",
            {
              "aria-hidden": true,
              className: (0, import_class_variance_authority5.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
              children: slotted
            }
          )
        ] }) : slotted
      )
    }
  );
};
Button.displayName = "Button";

// src/icon/Icon.tsx
var import_react4 = require("react");

// src/icon/Icon.styles.tsx
var import_internal_utils8 = require("@spark-ui/internal-utils");
var import_class_variance_authority6 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority6.cva)(["fill-current shrink-0"], {
  variants: {
    /**
     * Color scheme of the icon.
     */
    intent: (0, import_internal_utils8.makeVariants)({
      current: ["text-current"],
      main: ["text-main"],
      support: ["text-support"],
      accent: ["text-accent"],
      basic: ["text-basic"],
      success: ["text-success"],
      alert: ["text-alert"],
      error: ["text-error"],
      info: ["text-info"],
      neutral: ["text-neutral"]
    }),
    /**
     * Sets the size of the icon.
     */
    size: (0, import_internal_utils8.makeVariants)({
      current: ["u-current-font-size"],
      sm: ["w-sz-16", "h-sz-16"],
      md: ["w-sz-24", "h-sz-24"],
      lg: ["w-sz-32", "h-sz-32"],
      xl: ["w-sz-40", "h-sz-40"]
    })
  }
});

// src/icon/Icon.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Icon = ({
  label,
  className,
  size = "current",
  intent = "current",
  children,
  ...others
}) => {
  const child = import_react4.Children.only(children);
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
    (0, import_react4.cloneElement)(child, {
      className: iconStyles({ className, size, intent }),
      "data-spark-component": "icon",
      "aria-hidden": "true",
      focusable: "false",
      ...others
    }),
    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
  ] });
};
Icon.displayName = "Icon";

// src/tabs/TabsList.styles.ts
var import_class_variance_authority7 = require("class-variance-authority");
var wrapperStyles = (0, import_class_variance_authority7.cva)(["relative flex"]);
var listStyles = (0, import_class_variance_authority7.cva)([
  "flex w-full",
  "data-[orientation=horizontal]:flex-row",
  "data-[orientation=vertical]:flex-col",
  "overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden",
  "after:flex after:shrink after:grow after:border-outline",
  "data-[orientation=horizontal]:after:border-b-sm",
  "data-[orientation=vertical]:after:border-r-sm"
]);
var navigationArrowStyles = (0, import_class_variance_authority7.cva)([
  "h-auto! flex-none",
  "border-b-sm border-outline",
  "outline-hidden",
  "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
]);

// src/tabs/useResizeObserver.ts
var import_react5 = require("react");
var useResizeObserver = (target, onResize) => {
  const [size, setSize] = (0, import_react5.useState)({ width: void 0, height: void 0 });
  const resizeObserverRef = (0, import_react5.useRef)(null);
  const resizeCallbackRef = (0, import_react5.useRef)(onResize);
  (0, import_react5.useEffect)(() => {
    resizeCallbackRef.current = onResize;
  }, [onResize]);
  (0, import_react5.useEffect)(() => {
    const targetElm = target && "current" in target ? target.current : target;
    if (!targetElm || resizeObserverRef.current) {
      return;
    }
    resizeObserverRef.current = new ResizeObserver(([entry]) => {
      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {};
      resizeCallbackRef.current?.(entry);
      setSize({ width, height });
    });
    resizeObserverRef.current.observe(targetElm);
    return () => {
      resizeObserverRef.current && resizeObserverRef.current.unobserve(targetElm);
    };
  }, [target, resizeObserverRef, resizeCallbackRef]);
  return size;
};

// src/tabs/TabsList.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var TabsList = ({
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#list
   */
  asChild = false,
  loop = false,
  children,
  className,
  ref,
  ...rest
}) => {
  const wrapperRef = (0, import_react6.useRef)(null);
  const innerRef = (0, import_react6.useRef)(null);
  const listRef = ref || innerRef;
  const { orientation } = useTabsContext();
  const { width } = useResizeObserver(wrapperRef);
  const [arrows, setArrows] = (0, import_react6.useState)({
    prev: "hidden",
    next: "hidden"
  });
  (0, import_react6.useEffect)(() => {
    if (typeof listRef === "function" || !listRef.current) {
      return;
    }
    if (orientation !== "horizontal") {
      setArrows({ prev: "hidden", next: "hidden" });
    } else {
      setArrows({
        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? "visible" : "hidden",
        next: listRef.current.scrollWidth > listRef.current.clientWidth ? "visible" : "hidden"
      });
    }
  }, [orientation, listRef, width]);
  (0, import_react6.useEffect)(() => {
    if (typeof listRef === "function" || !listRef.current || arrows.prev === "hidden" || loop) {
      return;
    }
    const toggleArrowsVisibility = (target) => {
      setArrows({
        prev: target.scrollLeft > 0 ? "visible" : "disabled",
        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? "visible" : "disabled"
      });
    };
    const currentList = listRef.current;
    toggleArrowsVisibility(currentList);
    currentList.addEventListener(
      "scroll",
      ({ target }) => toggleArrowsVisibility(target)
    );
    return () => currentList.removeEventListener(
      "scroll",
      ({ target }) => toggleArrowsVisibility(target)
    );
  }, [listRef, arrows.prev, loop]);
  const handlePrevClick = () => {
    if (typeof listRef === "function" || !listRef.current) {
      return;
    }
    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0;
    listRef.current.scrollTo({
      left: shouldLoopForward ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth : listRef.current.scrollLeft - listRef.current.clientWidth,
      behavior: "smooth"
    });
  };
  const handleNextClick = () => {
    if (typeof listRef === "function" || !listRef.current) {
      return;
    }
    const shouldLoopBackward = loop && listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
    listRef.current.scrollTo({
      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,
      behavior: "smooth"
    });
  };
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: wrapperStyles({ className }), ref: wrapperRef, children: [
    arrows.prev !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
      Button,
      {
        shape: "square",
        intent: "surface",
        size: "sm",
        className: navigationArrowStyles(),
        onClick: handlePrevClick,
        disabled: arrows.prev === "disabled",
        "aria-label": "Scroll left",
        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ArrowVerticalLeft.ArrowVerticalLeft, {}) })
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
      import_radix_ui4.Tabs.List,
      {
        ref: listRef,
        className: listStyles(),
        asChild,
        loop,
        ...rest,
        children
      }
    ),
    arrows.next !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
      Button,
      {
        shape: "square",
        intent: "surface",
        size: "sm",
        className: navigationArrowStyles(),
        onClick: handleNextClick,
        disabled: arrows.next === "disabled",
        "aria-label": "Scroll right",
        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ArrowVerticalRight.ArrowVerticalRight, {}) })
      }
    )
  ] });
};
TabsList.displayName = "Tabs.List";

// src/tabs/TabsTrigger.tsx
var import_radix_ui5 = require("radix-ui");

// src/tabs/TabsTrigger.styles.ts
var import_internal_utils9 = require("@spark-ui/internal-utils");
var import_class_variance_authority8 = require("class-variance-authority");
var triggerVariants = (0, import_class_variance_authority8.cva)(
  [
    "px-md",
    "relative flex flex-none items-center",
    "border-outline",
    "outline-hidden",
    "hover:bg-surface-hovered",
    "after:absolute",
    "data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2",
    "data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2",
    "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset",
    "disabled:cursor-not-allowed disabled:opacity-dim-3",
    "duration-300 ease-linear",
    "gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md",
    "[&>svg:last-child:first-child]:mx-auto"
  ],
  {
    variants: {
      /**
       * Change the color scheme of the tabs
       * @default basic
       */
      intent: (0, import_internal_utils9.makeVariants)({
        main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
        support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"],
        basic: ["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]
      }),
      /**
       * Change the size of the tabs
       * @default md
       */
      size: {
        xs: ["h-sz-32 min-w-sz-32 text-caption"],
        sm: ["h-sz-36 min-w-sz-36 text-body-2"],
        md: ["h-sz-40 min-w-sz-40 text-body-1"]
      }
    },
    defaultVariants: {
      intent: "basic",
      size: "md"
    }
  }
);

// src/tabs/TabsTrigger.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var TabsTrigger = ({
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
   */
  asChild = false,
  value,
  disabled = false,
  children,
  className,
  ref,
  ...rest
}) => {
  const { intent, size } = useTabsContext();
  const scrollToFocusedElement = ({ target }) => target.scrollIntoView({
    behavior: "smooth",
    block: "nearest",
    inline: "nearest"
  });
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
    import_radix_ui5.Tabs.Trigger,
    {
      ref,
      className: triggerVariants({ intent, size, className }),
      asChild,
      disabled,
      value,
      onFocus: scrollToFocusedElement,
      ...rest,
      children
    }
  );
};
TabsTrigger.displayName = "Tabs.Trigger";

// src/tabs/index.ts
var Tabs2 = Object.assign(Tabs, {
  List: TabsList,
  Trigger: TabsTrigger,
  Content: TabsContent
});
Tabs2.displayName = "Tabs";
TabsList.displayName = "Tabs.List";
TabsTrigger.displayName = "Tabs.Trigger";
TabsContent.displayName = "Tabs.Content";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Tabs
});
//# sourceMappingURL=index.js.map