@spark-ui/components 12.0.1 → 12.1.0

package/dist/tabs/index.js

@@ -1272,12 +1272,422 @@ var TabsList = ({
 TabsList.displayName = "Tabs.List";
 
 // src/tabs/TabsTrigger.tsx
-var import_radix_ui5 = require("radix-ui");
+var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
+var import_radix_ui12 = require("radix-ui");
+var import_react10 = require("react");
 
-// src/tabs/TabsTrigger.styles.ts
+// src/tabs/TabsPopoverAbstraction.tsx
+var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_MoreMenuHorizontal = require("@spark-ui/icons/MoreMenuHorizontal");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react9 = require("react");
+
+// src/icon-button/IconButton.styles.tsx
 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)(
+var iconButtonStyles = (0, import_class_variance_authority8.cva)(["pl-0 pr-0"], {
+  variants: {
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils9.makeVariants)({
+      sm: ["text-body-1"],
+      md: ["text-body-1"],
+      lg: ["text-display-3"]
+    })
+  }
+});
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var IconButton = ({
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  shape = "rounded",
+  size = "md",
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Button,
+    {
+      "data-spark-component": "icon-button",
+      ref,
+      className: iconButtonStyles({ size, className }),
+      design,
+      disabled,
+      intent,
+      shape,
+      size,
+      ...others
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/popover/Popover.tsx
+var import_radix_ui5 = require("radix-ui");
+
+// src/popover/PopoverContext.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PopoverContext = (0, import_react7.createContext)(null);
+var ID_PREFIX = ":popover";
+var PopoverProvider = ({
+  children,
+  intent
+}) => {
+  const [headerId, setHeaderId] = (0, import_react7.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    PopoverContext.Provider,
+    {
+      value: {
+        headerId,
+        setHeaderId,
+        intent
+      },
+      children
+    }
+  );
+};
+var usePopover = () => {
+  const context = (0, import_react7.useContext)(PopoverContext);
+  if (!context) {
+    throw Error("usePopover must be used within a Popover provider");
+  }
+  return context;
+};
+
+// src/popover/Popover.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverProvider, { intent, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui5.Popover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
+};
+Popover.displayName = "Popover";
+
+// src/popover/PopoverAnchor.tsx
+var import_radix_ui6 = require("radix-ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui6.Popover.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
+Anchor.displayName = "Popover.Anchor";
+
+// src/popover/PopoverArrow.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Arrow = ({
+  asChild = false,
+  width = 16,
+  height = 8,
+  className,
+  ref,
+  ...rest
+}) => {
+  const { intent } = usePopover();
+  const styles2 = (0, import_class_variance_authority9.cva)("visible", {
+    variants: {
+      intent: {
+        surface: "fill-surface",
+        main: "fill-main-container",
+        support: "fill-support-container",
+        accent: "fill-accent-container",
+        basic: "fill-basic-container",
+        success: "fill-success-container",
+        alert: "fill-alert-container",
+        danger: "fill-error-container",
+        info: "fill-info-container",
+        neutral: "fill-neutral-container"
+      }
+    },
+    defaultVariants: {
+      intent: "surface"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui7.Popover.Arrow,
+    {
+      "data-spark-component": "popover-arrow",
+      ref,
+      className: styles2({ intent, className }),
+      asChild,
+      width,
+      height,
+      ...rest
+    }
+  );
+};
+Arrow.displayName = "Popover.Arrow";
+
+// src/popover/PopoverCloseButton.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CloseButton = ({
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_radix_ui8.Popover.Close,
+    {
+      "data-spark-component": "popover-close-button",
+      ref,
+      className: (0, import_class_variance_authority10.cx)("right-lg top-md absolute", className),
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Close.Close, {}) }) })
+    }
+  );
+};
+CloseButton.displayName = "Popover.CloseButton";
+
+// src/popover/PopoverContent.tsx
+var import_radix_ui9 = require("radix-ui");
+
+// src/popover/PopoverContent.styles.ts
+var import_class_variance_authority11 = require("class-variance-authority");
+var styles = (0, import_class_variance_authority11.cva)(
+  [
+    "rounded-md",
+    "shadow-sm",
+    "focus-visible:outline-hidden focus-visible:u-outline",
+    "max-h-(--radix-popper-available-height) overflow-y-auto"
+  ],
+  {
+    variants: {
+      intent: {
+        surface: "bg-surface text-on-surface",
+        main: "bg-main-container text-on-main-container",
+        support: "bg-support-container text-on-support-container",
+        accent: "bg-accent-container text-on-accent-container",
+        basic: "bg-basic-container text-on-basic-container",
+        success: "bg-success-container text-on-success-container",
+        alert: "bg-alert-container text-on-alert-container",
+        danger: "bg-error-container text-on-error-container",
+        info: "bg-info-container text-on-info-container",
+        neutral: "bg-neutral-container text-on-neutral-container"
+      },
+      matchTriggerWidth: {
+        true: "w-(--radix-popper-anchor-width)"
+      },
+      enforceBoundaries: {
+        true: ["max-w-(--radix-popper-available-width)"]
+      },
+      inset: {
+        true: "overflow-hidden",
+        false: "p-lg"
+      },
+      elevation: {
+        dropdown: "z-dropdown",
+        popover: "z-popover"
+      }
+    },
+    compoundVariants: [
+      {
+        inset: false,
+        /**
+         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.
+         */
+        class: "has-data-[spark-component=popover-close-button]:pr-3xl"
+      },
+      {
+        enforceBoundaries: false,
+        matchTriggerWidth: false,
+        class: "max-w-[min(var(--spacing-sz-384),100vw)]"
+      }
+    ],
+    defaultVariants: {
+      matchTriggerWidth: false,
+      enforceBoundaries: false,
+      inset: false,
+      intent: "surface",
+      elevation: "popover"
+    }
+  }
+);
+
+// src/popover/PopoverContent.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Content = ({
+  // Spark props
+  className,
+  children,
+  matchTriggerWidth = false,
+  // Radix props
+  align = "center",
+  arrowPadding = 16,
+  // In order not to overlap the arrow on the rounded corners of the popover.
+  asChild = false,
+  avoidCollisions = true,
+  "aria-labelledby": ariaLabelledBy,
+  collisionBoundary,
+  collisionPadding = 0,
+  hideWhenDetached = false,
+  side = "bottom",
+  sideOffset = 8,
+  sticky = "partial",
+  inset = false,
+  elevation = "popover",
+  ref,
+  ...rest
+}) => {
+  const { headerId, intent } = usePopover();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_radix_ui9.Popover.Content,
+    {
+      "aria-labelledby": headerId || ariaLabelledBy,
+      className: styles({
+        enforceBoundaries: !!collisionBoundary,
+        matchTriggerWidth,
+        inset,
+        elevation,
+        intent,
+        className
+      }),
+      "data-spark-component": "popover-content",
+      ref,
+      ...{
+        align,
+        arrowPadding,
+        asChild,
+        avoidCollisions,
+        collisionBoundary,
+        collisionPadding,
+        hideWhenDetached,
+        side,
+        sideOffset,
+        sticky
+      },
+      ...rest,
+      children
+    }
+  );
+};
+Content.displayName = "Popover.Content";
+
+// src/popover/PopoverHeader.tsx
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_react8 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Header = ({ children, className, ref, ...rest }) => {
+  const id = `${ID_PREFIX}-header-${(0, import_react8.useId)()}`;
+  const { setHeaderId } = usePopover();
+  (0, import_react8.useLayoutEffect)(() => {
+    setHeaderId(id);
+    return () => setHeaderId(null);
+  }, [id, setHeaderId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("header", { id, ref, className: (0, import_class_variance_authority12.cx)("mb-md text-headline-2", className), ...rest, children });
+};
+Header.displayName = "Popover.Header";
+
+// src/popover/PopoverPortal.tsx
+var import_radix_ui10 = require("radix-ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui10.Popover.Portal, { ...rest, children });
+Portal.displayName = "Popover.Portal";
+
+// src/popover/PopoverTrigger.tsx
+var import_radix_ui11 = require("radix-ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  import_radix_ui11.Popover.Trigger,
+  {
+    "data-spark-component": "popover-trigger",
+    ref,
+    asChild,
+    ...rest,
+    children
+  }
+);
+Trigger.displayName = "Popover.Trigger";
+
+// src/popover/index.ts
+var Popover2 = Object.assign(Popover, {
+  Anchor,
+  Arrow,
+  CloseButton,
+  Content,
+  Header,
+  Portal,
+  Trigger
+});
+Popover2.displayName = "Popover";
+Anchor.displayName = "Popover.Anchor";
+Arrow.displayName = "Popover.Arrow";
+CloseButton.displayName = "Popover.CloseButton";
+Content.displayName = "Popover.Content";
+Header.displayName = "Popover.Header";
+Portal.displayName = "Popover.Portal";
+Trigger.displayName = "Popover.Trigger";
+
+// src/tabs/TabsPopoverAbstraction.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var TabsPopoverContext = (0, import_react9.createContext)(void 0);
+var useTabsPopoverContext = () => {
+  const context = (0, import_react9.useContext)(TabsPopoverContext);
+  if (!context) {
+    throw new Error("TabsPopover components must be used within TabsPopover");
+  }
+  return context;
+};
+var TabsPopoverTrigger = (0, import_react9.forwardRef)(
+  ({ "aria-label": ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {
+    const { popoverTriggerRef } = useTabsPopoverContext();
+    const mergedRef = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, popoverTriggerRef);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover2.Trigger, { asChild: true, ...triggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      IconButton,
+      {
+        ref: mergedRef,
+        size: "sm",
+        intent: "surfaceInverse",
+        design: "ghost",
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { children: iconChildren || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_MoreMenuHorizontal.MoreMenuHorizontal, {}) })
+      }
+    ) });
+  }
+);
+TabsPopoverTrigger.displayName = "Popover.Trigger";
+var TabsPopoverContent = (0, import_react9.forwardRef)(
+  ({ side, align = "start", className, ...contentProps }, ref) => {
+    const { popoverSide } = useTabsPopoverContext();
+    const mergedClassName = (0, import_class_variance_authority13.cx)("gap-sm flex flex-col", className);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Popover2.Content,
+      {
+        ref,
+        ...contentProps,
+        side: side ?? popoverSide,
+        align,
+        className: mergedClassName
+      }
+    );
+  }
+);
+TabsPopoverContent.displayName = "Popover.Content";
+var Popover3 = ({ popoverSide, popoverTriggerRef, children }) => {
+  const contextValue = (0, import_react9.useMemo)(
+    () => ({ popoverSide, popoverTriggerRef }),
+    [popoverSide, popoverTriggerRef]
+  );
+  const PopoverWrapper = ((props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsPopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover2, { ...props, children: props.children }) }));
+  const PopoverComponent = Object.assign(PopoverWrapper, Popover2, {
+    Content: TabsPopoverContent,
+    Trigger: TabsPopoverTrigger
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsPopoverContext.Provider, { value: contextValue, children: children(PopoverComponent) });
+};
+Popover3.displayName = "Popover";
+
+// src/tabs/TabsTrigger.styles.ts
+var import_internal_utils10 = require("@spark-ui/internal-utils");
+var import_class_variance_authority14 = require("class-variance-authority");
+var triggerVariants = (0, import_class_variance_authority14.cva)(
   [
     "px-md",
     "relative flex flex-none items-center",
@@ -1299,7 +1709,7 @@ var triggerVariants = (0, import_class_variance_authority8.cva)(
        * Change the color scheme of the tabs
        * @default basic
        */
-      intent: (0, import_internal_utils9.makeVariants)({
+      intent: (0, import_internal_utils10.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"]
@@ -1312,17 +1722,33 @@ var triggerVariants = (0, import_class_variance_authority8.cva)(
         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"]
+      },
+      hasMenu: {
+        true: "pr-3xl"
+      },
+      orientation: {
+        horizontal: "",
+        vertical: ""
       }
     },
+    compoundVariants: [
+      {
+        hasMenu: true,
+        orientation: "vertical",
+        class: "w-full"
+      }
+    ],
     defaultVariants: {
       intent: "basic",
-      size: "md"
+      size: "md",
+      hasMenu: false,
+      orientation: "horizontal"
     }
   }
 );
 
 // src/tabs/TabsTrigger.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var TabsTrigger = ({
   /**
    * Default Radix Primitive values
@@ -1334,28 +1760,56 @@ var TabsTrigger = ({
   children,
   className,
   ref,
+  onKeyDown,
+  renderMenu,
   ...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,
+  const { intent, size, orientation } = useTabsContext();
+  const popoverTriggerRef = (0, import_react10.useRef)(null);
+  const tabsTriggerRef = (0, import_react10.useRef)(null);
+  const mergedRef = (0, import_use_merge_refs2.useMergeRefs)(ref, tabsTriggerRef);
+  const handleKeyDown = (e) => {
+    if (e.key === "F10" && e.shiftKey && renderMenu && popoverTriggerRef.current) {
+      e.preventDefault();
+      popoverTriggerRef.current.click();
+    }
+    onKeyDown?.(e);
+  };
+  const hasMenu = !!renderMenu;
+  const popoverSide = orientation === "vertical" ? "right" : "bottom";
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_radix_ui12.Tabs.Trigger,
     {
       "data-spark-component": "tabs-trigger",
-      ref,
-      className: triggerVariants({ intent, size, className }),
+      ref: mergedRef,
+      className: triggerVariants({
+        intent,
+        size,
+        hasMenu,
+        orientation: orientation ?? "horizontal",
+        className
+      }),
       asChild,
       disabled,
       value,
-      onFocus: scrollToFocusedElement,
+      onFocus: ({ target }) => target.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      }),
+      onKeyDown: handleKeyDown,
+      "aria-haspopup": hasMenu ? "true" : void 0,
       ...rest,
       children
     }
   );
+  if (!hasMenu) {
+    return trigger;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: orientation === "vertical" ? "relative w-full" : "relative", children: [
+    trigger,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Popover3, { popoverSide, popoverTriggerRef, children: (PopoverAbstraction) => renderMenu?.({ Popover: PopoverAbstraction }) }) })
+  ] });
 };
 TabsTrigger.displayName = "Tabs.Trigger";