@spark-ui/components 10.0.0

package/dist/tabs/index.js

@@ -0,0 +1,1315 @@
+"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