@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/SubdomainNavBar/useVisibilityObserver.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+export type VisibilityMap = {
+    [key: string]: boolean;
+};
+export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, children: any): VisibilityMap[];
+//# sourceMappingURL=useVisibilityObserver.d.ts.map

package/esm/SubdomainNavBar/useVisibilityObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibilityObserver.d.ts","sourceRoot":"","sources":["../../src/SubdomainNavBar/useVisibilityObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,MAAM,OAAO,CAAA;AAEpD,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,aAAa,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,QAAQ,KAAA,mBA0ChG"}

package/esm/SubdomainNavBar/useVisibilityObserver.js

@@ -0,0 +1,30 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/SubdomainNavBar/useVisibilityObserver.ts
+function n(n, r) {
+	let [i, a] = t({}), o = (e) => {
+		let t = {};
+		for (let n of e) {
+			let e = n.target.getAttribute("data-navitemid");
+			e && (n.isIntersecting ? t[e] = !0 : t[e] = !1);
+		}
+		a((e) => ({
+			...e,
+			...t
+		}));
+	};
+	return e(() => {
+		let e = new IntersectionObserver(o, {
+			root: n.current,
+			threshold: 1
+		});
+		if (n.current) {
+			let t = Array.from(n.current.children);
+			for (let n of t) n.getAttribute("data-navitemid") && e.observe(n);
+		}
+		return () => e.disconnect();
+	}, [n, r]), [i];
+}
+//#endregion
+export { n as useVisibilityObserver };
+
+//# sourceMappingURL=useVisibilityObserver.js.map

package/esm/SubdomainNavBar/useVisibilityObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibilityObserver.js","names":[],"sources":["../../src/SubdomainNavBar/useVisibilityObserver.ts"],"sourcesContent":["import {RefObject, useState, useEffect} from 'react'\n\nexport type VisibilityMap = {\n  [key: string]: boolean\n}\n\nexport function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, children) {\n  const [visibilityMap, setVisibilityMap] = useState<VisibilityMap>({})\n  const handleIntersection = (entries: IntersectionObserverEntry[]) => {\n    const updatedEntries = {}\n\n    for (const entry of entries) {\n      const navitemid = entry.target.getAttribute('data-navitemid')\n      if (navitemid) {\n        if (entry.isIntersecting) {\n          updatedEntries[navitemid] = true\n        } else {\n          updatedEntries[navitemid] = false\n        }\n      }\n    }\n\n    setVisibilityMap(prev => ({\n      ...prev,\n      ...updatedEntries,\n    }))\n  }\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(handleIntersection, {\n      root: navigationRef.current,\n      threshold: 1,\n    })\n\n    if (navigationRef.current) {\n      const navItems = Array.from(navigationRef.current.children)\n\n      for (const item of navItems) {\n        if (item.getAttribute('data-navitemid')) {\n          observer.observe(item)\n        }\n      }\n    }\n\n    return () => observer.disconnect()\n  }, [navigationRef, children])\n\n  return [visibilityMap]\n}\n"],"mappings":";;AAMA,SAAgB,EAAsB,GAAmD,GAAU;CACjG,IAAM,CAAC,GAAe,KAAoB,EAAwB,EAAE,CAAC,EAC/D,KAAsB,MAAyC;EACnE,IAAM,IAAiB,EAAE;AAEzB,OAAK,IAAM,KAAS,GAAS;GAC3B,IAAM,IAAY,EAAM,OAAO,aAAa,iBAAiB;AAC7D,GAAI,MACE,EAAM,iBACR,EAAe,KAAa,KAE5B,EAAe,KAAa;;AAKlC,KAAiB,OAAS;GACxB,GAAG;GACH,GAAG;GACJ,EAAE;;AAsBL,QAnBA,QAAgB;EACd,IAAM,IAAW,IAAI,qBAAqB,GAAoB;GAC5D,MAAM,EAAc;GACpB,WAAW;GACZ,CAAC;AAEF,MAAI,EAAc,SAAS;GACzB,IAAM,IAAW,MAAM,KAAK,EAAc,QAAQ,SAAS;AAE3D,QAAK,IAAM,KAAQ,EACjB,CAAI,EAAK,aAAa,iBAAiB,IACrC,EAAS,QAAQ,EAAK;;AAK5B,eAAa,EAAS,YAAY;IACjC,CAAC,GAAe,EAAS,CAAC,EAEtB,CAAC,EAAc"}

package/esm/Tabs/Tabs.d.ts

@@ -0,0 +1,182 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { BaseProps } from '../component-helpers';
+import { AnimationVariants } from '../animation';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css';
+/**
+ * Accessible label for the entire tabs component, used by screen readers to describe the tab group.
+ * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.
+ */
+type LabelOrLabelledBy = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+};
+export type TabsProps = {
+    /**
+     * Visual style variant of the tabs. Affects the appearance and styling theme.
+     */
+    variant?: 'default' | 'accent' | 'underline';
+    /**
+     * Horizontal alignment of the tab navigation. Defaults to 'start'.
+     */
+    align?: 'start' | 'center';
+    /**
+     * Named children to be rendered as tab items and panels.
+     */
+    children: ReactNode;
+    /**
+     * Sets the default active tab. "0" (first tab) by default.
+     */
+    defaultActiveTab?: string;
+    /**
+     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
+     */
+    onChange?: (activeTab: string) => void;
+    /**
+     * Additional CSS class names to apply to the tabs container for custom styling.
+     */
+    className?: string;
+    /**
+     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
+     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
+     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
+     */
+    internalAccessibleLabels?: {
+        controlsNext: string;
+        controlsPrev: string;
+    };
+} & LabelOrLabelledBy & BaseProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'aria-label' | 'aria-labelledby'>;
+export type TabsItemProps = {
+    children: ReactNode;
+    className?: string;
+    isActive?: boolean;
+    variant?: 'default' | 'accent' | 'underline';
+    /**
+     * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
+     * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
+     * relationships between tabs and panels.
+     * @see https://primer.style/brand/components/Tabs/#custom-panels
+     */
+    id?: string;
+} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>;
+export type TabsPanelProps = {
+    children: ReactNode;
+    className?: string;
+    animation?: (typeof AnimationVariants)[number] | false;
+    hidden?: boolean;
+    /**
+     * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
+     * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
+     * relationships between tabs and panels.
+     * @see https://primer.style/brand/components/Tabs/#custom-panels
+     */
+    id?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>;
+/**
+ * Use Tabs to display a list of tabs with associated content panels.
+ * @see https://primer.style/brand/components/Tabs
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<(Omit<{
+    /**
+     * Visual style variant of the tabs. Affects the appearance and styling theme.
+     */
+    variant?: "default" | "accent" | "underline";
+    /**
+     * Horizontal alignment of the tab navigation. Defaults to 'start'.
+     */
+    align?: "start" | "center";
+    /**
+     * Named children to be rendered as tab items and panels.
+     */
+    children: ReactNode;
+    /**
+     * Sets the default active tab. "0" (first tab) by default.
+     */
+    defaultActiveTab?: string;
+    /**
+     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
+     */
+    onChange?: (activeTab: string) => void;
+    /**
+     * Additional CSS class names to apply to the tabs container for custom styling.
+     */
+    className?: string;
+    /**
+     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
+     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
+     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
+     */
+    internalAccessibleLabels?: {
+        controlsNext: string;
+        controlsPrev: string;
+    };
+} & {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} & BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby" | "onChange">, "ref"> | Omit<{
+    /**
+     * Visual style variant of the tabs. Affects the appearance and styling theme.
+     */
+    variant?: "default" | "accent" | "underline";
+    /**
+     * Horizontal alignment of the tab navigation. Defaults to 'start'.
+     */
+    align?: "start" | "center";
+    /**
+     * Named children to be rendered as tab items and panels.
+     */
+    children: ReactNode;
+    /**
+     * Sets the default active tab. "0" (first tab) by default.
+     */
+    defaultActiveTab?: string;
+    /**
+     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
+     */
+    onChange?: (activeTab: string) => void;
+    /**
+     * Additional CSS class names to apply to the tabs container for custom styling.
+     */
+    className?: string;
+    /**
+     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
+     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
+     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
+     */
+    internalAccessibleLabels?: {
+        controlsNext: string;
+        controlsPrev: string;
+    };
+} & {
+    'aria-labelledby': string;
+    'aria-label'?: never;
+} & BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby" | "onChange">, "ref">) & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<{
+        children: ReactNode;
+        className?: string;
+        isActive?: boolean;
+        variant?: "default" | "accent" | "underline";
+        /**
+         * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
+         * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
+         * relationships between tabs and panels.
+         * @see https://primer.style/brand/components/Tabs/#custom-panels
+         */
+        id?: string;
+    } & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "id"> & React.RefAttributes<HTMLButtonElement>>;
+    Panel: React.NamedExoticComponent<TabsPanelProps>;
+    testIds: {
+        root: string;
+        readonly tab: string;
+        readonly panel: string;
+        readonly indicators: string;
+    };
+};
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/esm/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAOT,cAAc,EAEf,MAAM,OAAO,CAAA;AAKd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAA6B,iBAAiB,EAAC,MAAM,cAAc,CAAA;AAI1E;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAClG,OAAO,wGAAwG,CAAA;AAkB/G;;;GAGG;AACH,KAAK,iBAAiB,GAClB;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAC,GACjD;IAAC,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAC,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAEtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,wBAAwB,CAAC,EAAE;QACzB,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF,GAAG,iBAAiB,GACnB,SAAS,CAAC,cAAc,CAAC,GACzB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAC,CAAA;AAyQrF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;IAC5C;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAA;AAwBxD,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,GAAG,KAAK,CAAA;IACtD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAA;AAyBpD;;;GAGG;AACH,eAAO,MAAM,IAAI;IA1Xf;;OAEG;cACO,SAAS,GAAG,QAAQ,GAAG,WAAW;IAC5C;;OAEG;YACK,OAAO,GAAG,QAAQ;IAC1B;;OAEG;cACO,SAAS;IACnB;;OAEG;uBACgB,MAAM;IACzB;;OAEG;eACQ,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;IAEtC;;OAEG;gBACS,MAAM;IAClB;;;;OAIG;+BACwB;QACzB,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,MAAM,CAAA;KACrB;;kBArCgB,MAAM;wBAAsB,KAAK;;IAIlD;;OAEG;cACO,SAAS,GAAG,QAAQ,GAAG,WAAW;IAC5C;;OAEG;YACK,OAAO,GAAG,QAAQ;IAC1B;;OAEG;cACO,SAAS;IACnB;;OAEG;uBACgB,MAAM;IACzB;;OAEG;eACQ,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;IAEtC;;OAEG;gBACS,MAAM;IAClB;;;;OAIG;+BACwB;QACzB,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,MAAM,CAAA;KACrB;;uBApCqB,MAAM;mBAAiB,KAAK;;;kBAiTxC,SAAS;oBACP,MAAM;mBACP,OAAO;kBACR,SAAS,GAAG,QAAQ,GAAG,WAAW;QAC5C;;;;;WAKG;aACE,MAAM;;;;;;;;;CAsEX,CAAA"}

package/esm/Tabs/Tabs.js

@@ -0,0 +1,196 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { AnimationProvider as t } from "../animation/AnimationProvider/AnimationProvider.js";
+import { Animate as n } from "../animation/Animate/Animate.js";
+import { useProvidedRefOrCreate as r } from "../hooks/useRef.js";
+import { Stack as i } from "../Stack/Stack.js";
+import { Text as a } from "../Text/Text.js";
+import { ChevronLeftIcon as o, ChevronRightIcon as s } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useTabs as c } from "../hooks/useTabs.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes-DCEDN6wM.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tabs/base-T7ABwZVf.css';/* empty css                                                                                     */
+/* empty css                                                                                                  */
+import l from "./Tabs.module.js";
+import { Children as u, cloneElement as d, forwardRef as f, isValidElement as p, memo as m, useCallback as h, useEffect as g, useRef as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/Tabs/Tabs.tsx
+var b = {
+	root: "Tabs",
+	get tab() {
+		return `${this.root}-tab`;
+	},
+	get panel() {
+		return `${this.root}-panel`;
+	},
+	get indicators() {
+		return `${this.root}-indicators`;
+	}
+}, x = {
+	controlsNext: "Next tab",
+	controlsPrev: "Previous tab"
+}, S = f(({ align: t = "center", children: n, defaultActiveTab: r, onChange: f, variant: m = "default", className: S, "aria-label": T, "aria-labelledby": E, internalAccessibleLabels: D = x, ...O }, k) => {
+	let { activeTab: A, activateTab: j, getTabListProps: M, getTabProps: N, getTabPanelProps: P } = c({
+		defaultTab: r,
+		onTabActivate: f
+	}), F = _(null), I = _(null), L = _(null), R = u.toArray(n), z = R.filter((e) => p(e) && e.type === C).map((e, t) => {
+		let n = String(t), r = e.ref, i = N(n, r);
+		return d(e, {
+			...i,
+			id: e.props.id ?? i.id,
+			"aria-controls": e.props["aria-controls"] ?? i["aria-controls"],
+			value: n,
+			key: i.id,
+			isActive: A === n,
+			variant: m
+		});
+	}), B = R.filter((e) => p(e) && e.type === w).map((e, t) => {
+		let n = P(String(t));
+		return d(e, {
+			...n,
+			id: e.props.id ?? n.id,
+			key: String(t)
+		});
+	});
+	g(() => {
+		/* istanbul ignore next */
+		if (!F.current || !L.current) return;
+		let e = F.current.querySelector("[aria-selected=\"true\"]");
+		if (!A) return;
+		let t = () => {
+			let t = L.current, n = F.current;
+			/* istanbul ignore next */
+			if (!t || !n) return;
+			let r = window.getComputedStyle(n).getPropertyValue("--brand-Tabs-container-padding"), i = parseFloat(r) * 16, a = e.offsetLeft - i, o = e.offsetWidth;
+			t.style.setProperty("--brand-Tabs-slider-x", `${a}px`), t.style.setProperty("--brand-Tabs-slider-width", `${o}px`);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		n.observe(F.current);
+		let r = F.current, i = r.clientWidth, a = window.getComputedStyle(r).getPropertyValue("--brand-Tabs-container-padding"), o = parseFloat(a) * 16, s = e.offsetLeft - o + e.offsetWidth / 2 - i / 2, c = r.scrollWidth - i, l = Math.max(0, Math.min(s, c));
+		return r.scrollTo({
+			left: l,
+			behavior: "smooth"
+		}), () => {
+			n.disconnect();
+		};
+	}, [A]), g(() => {
+		let e = F.current, t = I.current;
+		/* istanbul ignore next */
+		if (!e || !t) return;
+		/* istanbul ignore next */
+		let n = () => {
+			let { scrollLeft: n, scrollWidth: r, clientWidth: i } = e, a = r > i, o = a && n < r - i - 1;
+			t.style.setProperty("--scroll-offset", `${n}px`), t.style.setProperty("--has-overflow", a ? "1" : "0"), t.style.setProperty("--can-scroll-right", o ? "1" : "0");
+		};
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(e), e.addEventListener("scroll", n), () => {
+			e.removeEventListener("scroll", n), r.disconnect();
+		};
+	}, [z]);
+	let V = M(typeof T == "string" ? { label: T } : { labelledBy: E }), H = h(() => {
+		A && A !== String(z.length - 1) && j(String(Number(A) + 1));
+	}, [
+		A,
+		j,
+		z
+	]), U = h(() => {
+		A && A !== "0" && j(String(Number(A) - 1));
+	}, [A, j]), W = z.length >= 3, G = String(z.length - 1) === A;
+	return /* @__PURE__ */ y("div", {
+		className: e(l["Tabs-container"], l[`Tabs-container--align-${t}`], G && l["Tabs-container--lastTabIsActive"], S),
+		ref: k,
+		"data-testid": b.root,
+		...O,
+		children: [
+			z.length >= 3 && /* @__PURE__ */ v("div", {
+				className: l.Tabs__controls,
+				"data-testid": b.indicators,
+				children: /* @__PURE__ */ y(i, {
+					direction: "horizontal",
+					padding: "none",
+					justifyContent: "space-between",
+					children: [
+						/* @__PURE__ */ v("button", {
+							onClick: U,
+							className: l.Tabs__control,
+							"aria-label": D.controlsPrev,
+							children: /* @__PURE__ */ v(a, {
+								size: "100",
+								children: /* @__PURE__ */ v(o, {
+									size: 16,
+									className: l["Tabs__control-icon"]
+								})
+							})
+						}),
+						/* @__PURE__ */ v(i, {
+							direction: "horizontal",
+							gap: 4,
+							padding: "none",
+							justifyContent: "space-between",
+							alignItems: "center",
+							children: z.map((t, n) => /* @__PURE__ */ v("div", { className: e(l.Tabs__indicator, A && Number(A) === n && l["Tabs__indicator--active"]) }, n))
+						}),
+						/* @__PURE__ */ v("button", {
+							onClick: H,
+							className: l.Tabs__control,
+							"aria-label": D.controlsNext,
+							children: /* @__PURE__ */ v(a, {
+								size: "100",
+								children: /* @__PURE__ */ v(s, {
+									size: 16,
+									className: l["Tabs__control-icon"]
+								})
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ v("div", {
+				ref: I,
+				className: e(l.Tablist__wrapper, l[`Tablist__wrapper--${m}`], G && l["Tablist__wrapper--lastTabIsActive"]),
+				children: /* @__PURE__ */ y("div", {
+					ref: F,
+					...V,
+					className: e(l.Tabs, l[`Tabs--${m}`], W && l["Tabs--hasMoreThanTwoTabs"]),
+					children: [/* @__PURE__ */ v("div", {
+						ref: L,
+						className: l.Tabs__slider,
+						"aria-hidden": !0
+					}), z]
+				})
+			}),
+			B.length > 0 && /* @__PURE__ */ v("div", {
+				className: l.Tabs__panelContainer,
+				children: B
+			})
+		]
+	});
+}), C = f(({ children: t, className: n, isActive: i, variant: a, ...o }, s) => /* @__PURE__ */ v("button", {
+	ref: r(s),
+	className: e(l.Tabs__item, i && l["Tabs__item--active"], a && l[`Tabs__item--${a}`], n),
+	"data-testid": b.tab,
+	...o,
+	children: t
+})), w = m(function({ children: r, animation: i = !1, className: a, hidden: o, ...s }) {
+	let c = i ? /* @__PURE__ */ v(t, {
+		autoStaggerChildren: !1,
+		children: /* @__PURE__ */ v(n, {
+			animate: i,
+			children: r
+		})
+	}) : r;
+	return /* @__PURE__ */ v("div", {
+		className: e(l.Tabs__panel, a),
+		"data-testid": b.panel,
+		hidden: o,
+		...s,
+		children: c
+	});
+}), T = Object.assign(S, {
+	Item: C,
+	Panel: w,
+	testIds: b
+});
+//#endregion
+export { T as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/esm/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, {\n  memo,\n  ReactNode,\n  forwardRef,\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useEffect,\n  HTMLAttributes,\n  useCallback,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'\nimport {useTabs} from '../hooks/useTabs'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {BaseProps} from '../component-helpers'\nimport {Animate, AnimationProvider, AnimationVariants} from '../animation'\nimport {Text} from '../Text'\nimport {Stack} from '../Stack'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Tabs.module.css'\n\nconst testIds = {\n  root: 'Tabs',\n  get tab() {\n    return `${this.root}-tab`\n  },\n  get panel() {\n    return `${this.root}-panel`\n  },\n  get indicators() {\n    return `${this.root}-indicators`\n  },\n}\n\n/**\n * Accessible label for the entire tabs component, used by screen readers to describe the tab group.\n * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.\n */\ntype LabelOrLabelledBy =\n  | {'aria-label': string; 'aria-labelledby'?: never}\n  | {'aria-labelledby': string; 'aria-label'?: never}\n\nexport type TabsProps = {\n  /**\n   * Visual style variant of the tabs. Affects the appearance and styling theme.\n   */\n  variant?: 'default' | 'accent' | 'underline'\n  /**\n   * Horizontal alignment of the tab navigation. Defaults to 'start'.\n   */\n  align?: 'start' | 'center'\n  /**\n   * Named children to be rendered as tab items and panels.\n   */\n  children: ReactNode\n  /**\n   * Sets the default active tab. \"0\" (first tab) by default.\n   */\n  defaultActiveTab?: string\n  /**\n   * Callback function triggered when the active tab changes. Receives the new active tab identifier.\n   */\n  onChange?: (activeTab: string) => void\n\n  /**\n   * Additional CSS class names to apply to the tabs container for custom styling.\n   */\n  className?: string\n  /**\n   * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.\n   * @param internalAccessibleLabels.controlsNext - Label for the \"next tab\" control button, used by screen readers. Default is \"Next tab\".\n   * @param internalAccessibleLabels.controlsPrev - Label for the \"previous tab\" control button, used by screen readers. Default is \"Previous tab\".\n   */\n  internalAccessibleLabels?: {\n    controlsNext: string\n    controlsPrev: string\n  }\n} & LabelOrLabelledBy &\n  BaseProps<HTMLDivElement> &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'aria-label' | 'aria-labelledby'>\n\nconst defaultInternalAccessibleLabels = {\n  controlsNext: 'Next tab',\n  controlsPrev: 'Previous tab',\n}\n\nconst _TabsRoot = forwardRef<HTMLDivElement, TabsProps>(\n  (\n    {\n      align = 'center',\n      children,\n      defaultActiveTab,\n      onChange,\n      variant = 'default',\n      className,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      internalAccessibleLabels = defaultInternalAccessibleLabels,\n      ...props\n    },\n    ref,\n  ) => {\n    const {activeTab, activateTab, getTabListProps, getTabProps, getTabPanelProps} = useTabs({\n      defaultTab: defaultActiveTab,\n      onTabActivate: onChange,\n    })\n    const tabsContainerRef = useRef<HTMLDivElement>(null)\n    const tabsWrapperRef = useRef<HTMLDivElement>(null)\n    const sliderRef = useRef<HTMLDivElement>(null)\n\n    const childrenArray = Children.toArray(children)\n\n    type TabsItemElement = React.ReactElement<TabsItemProps> & {ref?: React.Ref<HTMLButtonElement>}\n\n    const tabs = childrenArray\n      .filter((child): child is TabsItemElement => isValidElement<TabsItemProps>(child) && child.type === TabsItem)\n      .map((tab, index) => {\n        const tabId = String(index)\n        const originalRef = tab.ref\n        const tabProps = getTabProps<HTMLButtonElement>(tabId, originalRef)\n\n        return cloneElement(tab, {\n          ...tabProps,\n          id: tab.props.id ?? tabProps.id,\n          'aria-controls': tab.props['aria-controls'] ?? tabProps['aria-controls'],\n          value: tabId,\n          key: tabProps.id,\n          isActive: activeTab === tabId,\n          variant,\n        })\n      })\n\n    const panels = childrenArray\n      .filter(\n        (child): child is React.ReactElement<TabsPanelProps> =>\n          isValidElement<TabsPanelProps>(child) && child.type === TabsPanel,\n      )\n      .map((child, index) => {\n        const panelId = String(index)\n        const tabPanelProps = getTabPanelProps(panelId)\n\n        return cloneElement(child, {\n          ...tabPanelProps,\n          id: child.props.id ?? tabPanelProps.id,\n          key: String(index),\n        })\n      })\n\n    useEffect(() => {\n      /* istanbul ignore next */\n      if (!tabsContainerRef.current || !sliderRef.current) return\n\n      const activeTabButton = tabsContainerRef.current.querySelector(`[aria-selected=\"true\"]`) as HTMLButtonElement\n\n      if (!activeTab) return\n\n      const updateSliderPosition = () => {\n        const sliderElement = sliderRef.current\n        const tabsContainer = tabsContainerRef.current\n        /* istanbul ignore next */\n        if (!sliderElement || !tabsContainer) return\n\n        const containerPaddingRem = window\n          .getComputedStyle(tabsContainer)\n          .getPropertyValue('--brand-Tabs-container-padding')\n\n        const containerPadding = parseFloat(containerPaddingRem) * 16 // base size\n\n        const offsetX = activeTabButton.offsetLeft - containerPadding\n        const width = activeTabButton.offsetWidth\n\n        sliderElement.style.setProperty('--brand-Tabs-slider-x', `${offsetX}px`)\n        sliderElement.style.setProperty('--brand-Tabs-slider-width', `${width}px`)\n      }\n\n      updateSliderPosition()\n\n      const resizeObserver = new ResizeObserver(updateSliderPosition)\n      resizeObserver.observe(tabsContainerRef.current)\n\n      // On narrow viewports this will scroll the active tab into the center.\n      // Important because we show a gradient in dark mode.\n      const tabsContainer = tabsContainerRef.current\n      const containerWidth = tabsContainer.clientWidth\n      const containerPaddingRem = window\n        .getComputedStyle(tabsContainer)\n        .getPropertyValue('--brand-Tabs-container-padding')\n      const containerPadding = parseFloat(containerPaddingRem) * 16\n      const tabLeft = activeTabButton.offsetLeft - containerPadding\n      const tabWidth = activeTabButton.offsetWidth\n      const tabCenter = tabLeft + tabWidth / 2\n\n      const targetScrollLeft = tabCenter - containerWidth / 2\n\n      const maxScrollLeft = tabsContainer.scrollWidth - containerWidth // defines boudnary\n      const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))\n\n      tabsContainer.scrollTo({\n        left: finalScrollLeft,\n        behavior: 'smooth',\n      })\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }, [activeTab])\n\n    // Tracks the overflow state for mobile gradient visibility\n    // Should only appear when enough items trigger an overflow\n    // Related to gradient functionality\n    useEffect(() => {\n      const tabsContainer = tabsContainerRef.current\n      const wrapperElement = tabsWrapperRef.current\n      /* istanbul ignore next */\n      if (!tabsContainer || !wrapperElement) return\n\n      // This relies heavily on layout and measurement and, as such, isn't practical to test\n      /* istanbul ignore next */\n      const updateScrollState = () => {\n        const {scrollLeft, scrollWidth, clientWidth} = tabsContainer\n        const hasOverflow = scrollWidth > clientWidth\n\n        const canScrollRight = hasOverflow && scrollLeft < scrollWidth - clientWidth - 1\n\n        // Set CSS variables on the wrapper element for the gradient\n        wrapperElement.style.setProperty('--scroll-offset', `${scrollLeft}px`)\n        wrapperElement.style.setProperty('--has-overflow', hasOverflow ? '1' : '0')\n        wrapperElement.style.setProperty('--can-scroll-right', canScrollRight ? '1' : '0')\n      }\n\n      updateScrollState()\n      const resizeObserver = new ResizeObserver(updateScrollState)\n      resizeObserver.observe(tabsContainer)\n\n      // eslint-disable-next-line github/prefer-observers\n      tabsContainer.addEventListener('scroll', updateScrollState)\n\n      return () => {\n        tabsContainer.removeEventListener('scroll', updateScrollState)\n        resizeObserver.disconnect()\n      }\n    }, [tabs])\n\n    /**\n     * The LabelOrLabelledBy type guarantees that, if ariaLabel isn't a string,\n     * then ariaLabelledBy is guaranteed to be a string, and vice versa.\n     */\n    const accessibleLabel = typeof ariaLabel === 'string' ? {label: ariaLabel} : {labelledBy: ariaLabelledBy}\n    const tabListProps = getTabListProps(accessibleLabel)\n\n    const handleNextTabControl = useCallback(() => {\n      if (activeTab && activeTab !== String(tabs.length - 1)) {\n        activateTab(String(Number(activeTab) + 1))\n      }\n    }, [activeTab, activateTab, tabs])\n\n    const handlePrevTabControl = useCallback(() => {\n      if (activeTab && activeTab !== '0') {\n        activateTab(String(Number(activeTab) - 1))\n      }\n    }, [activeTab, activateTab])\n\n    const hasMoreThanTwoTabs = tabs.length >= 3\n    const isLastTabActive = String(tabs.length - 1) === activeTab\n\n    return (\n      <div\n        className={clsx(\n          styles['Tabs-container'],\n          styles[`Tabs-container--align-${align}`],\n          isLastTabActive && styles['Tabs-container--lastTabIsActive'],\n          className,\n        )}\n        ref={ref}\n        data-testid={testIds.root}\n        {...props}\n      >\n        {/* Narrow only indicators and controls */}\n        {tabs.length >= 3 && (\n          <div className={styles.Tabs__controls} data-testid={testIds.indicators}>\n            <Stack direction=\"horizontal\" padding=\"none\" justifyContent=\"space-between\">\n              <button\n                onClick={handlePrevTabControl}\n                className={styles.Tabs__control}\n                aria-label={internalAccessibleLabels.controlsPrev}\n              >\n                <Text size=\"100\">\n                  <ChevronLeftIcon size={16} className={styles['Tabs__control-icon']} />\n                </Text>\n              </button>\n              <Stack direction=\"horizontal\" gap={4} padding=\"none\" justifyContent=\"space-between\" alignItems=\"center\">\n                {tabs.map((_, index) => {\n                  return (\n                    <div\n                      key={index}\n                      className={clsx(\n                        styles.Tabs__indicator,\n                        activeTab && Number(activeTab) === index && styles['Tabs__indicator--active'],\n                      )}\n                    />\n                  )\n                })}\n              </Stack>\n              <button\n                onClick={handleNextTabControl}\n                className={styles.Tabs__control}\n                aria-label={internalAccessibleLabels.controlsNext}\n              >\n                <Text size=\"100\">\n                  <ChevronRightIcon size={16} className={styles['Tabs__control-icon']} />\n                </Text>\n              </button>\n            </Stack>\n          </div>\n        )}\n\n        <div\n          ref={tabsWrapperRef}\n          className={clsx(\n            styles['Tablist__wrapper'],\n            styles[`Tablist__wrapper--${variant}`],\n            isLastTabActive && styles['Tablist__wrapper--lastTabIsActive'],\n          )}\n        >\n          <div\n            ref={tabsContainerRef}\n            {...tabListProps}\n            className={clsx(\n              styles.Tabs,\n              styles[`Tabs--${variant}`],\n              hasMoreThanTwoTabs && styles['Tabs--hasMoreThanTwoTabs'],\n            )}\n          >\n            <div ref={sliderRef} className={styles.Tabs__slider} aria-hidden />\n            {tabs}\n          </div>\n        </div>\n\n        {panels.length > 0 && <div className={styles['Tabs__panelContainer']}>{panels}</div>}\n      </div>\n    )\n  },\n)\n\nexport type TabsItemProps = {\n  children: ReactNode\n  className?: string\n  isActive?: boolean\n  variant?: 'default' | 'accent' | 'underline'\n  /**\n   * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n   * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n   * relationships between tabs and panels.\n   * @see https://primer.style/brand/components/Tabs/#custom-panels\n   */\n  id?: string\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>\n\nconst TabsItem = forwardRef<HTMLButtonElement, TabsItemProps>(\n  ({children, className, isActive, variant, ...props}, ref) => {\n    const tabRef = useProvidedRefOrCreate(ref)\n\n    return (\n      <button\n        ref={tabRef}\n        className={clsx(\n          styles.Tabs__item,\n          isActive && styles['Tabs__item--active'],\n          variant && styles[`Tabs__item--${variant}`],\n          className,\n        )}\n        data-testid={testIds.tab}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\nexport type TabsPanelProps = {\n  children: ReactNode\n  className?: string\n  animation?: (typeof AnimationVariants)[number] | false\n  hidden?: boolean\n  /**\n   * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes\n   * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility\n   * relationships between tabs and panels.\n   * @see https://primer.style/brand/components/Tabs/#custom-panels\n   */\n  id?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>\n\nconst TabsPanel = memo(function TabsPanel({\n  children,\n  animation = false,\n  className,\n\n  hidden,\n  ...rest\n}: TabsPanelProps) {\n  const conditionalRender = animation ? (\n    <AnimationProvider autoStaggerChildren={false}>\n      <Animate animate={animation}>{children}</Animate>\n    </AnimationProvider>\n  ) : (\n    children\n  )\n\n  return (\n    <div className={clsx(styles['Tabs__panel'], className)} data-testid={testIds.panel} hidden={hidden} {...rest}>\n      {conditionalRender}\n    </div>\n  )\n})\n\n/**\n * Use Tabs to display a list of tabs with associated content panels.\n * @see https://primer.style/brand/components/Tabs\n */\nexport const Tabs = Object.assign(_TabsRoot, {\n  Item: TabsItem,\n  Panel: TabsPanel,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/Tabs/Tabs.module-D8VFUDRe.css

@@ -0,0 +1 @@
+.Primer_Brand__Tabs-module__Tabs___zia5x{gap:var(--base-size-4);background-color:var(--brand-color-canvas-backdrop);border-radius:var(--brand-borderRadius-large);padding:var(--brand-Tabs-container-padding);width:fit-content;min-height:var(--base-size-48);display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container___wuq7I{display:grid}@media screen and (width<=48rem){.Primer_Brand__Tabs-module__Tabs-container___wuq7I{flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{align-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{align-items:center}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8{width:fit-content;max-width:100%;position:relative;overflow:hidden}.Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8:after{content:"";right:var(--brand-Tabs-list-borderWidth-active);top:var(--base-size-2);bottom:var(--base-size-2);background:linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);width:var(--base-size-48);z-index:2;pointer-events:none;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);opacity:0;opacity:calc(var(--has-overflow,0) * var(--can-scroll-right,0));border-radius:inherit;position:absolute}.Primer_Brand__Tabs-module__Tablist__wrapper--default___Wdb55:after,.Primer_Brand__Tabs-module__Tablist__wrapper--accent___QV6Jx:after{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tablist__wrapper--underline___IZ_zV:after{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__Tabs-module__Tablist__wrapper--lastTabIsActive___jCePF:after{opacity:0;visibility:hidden}.Primer_Brand__Tabs-module__Tabs___zia5x{scrollbar-width:none;-ms-overflow-style:none;max-width:100%;overflow:auto hidden}.Primer_Brand__Tabs-module__Tabs___zia5x::-webkit-scrollbar{display:none}}.Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk{justify-items:flex-start}.Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd{justify-items:center}.Primer_Brand__Tabs-module__Tabs--default___MUcm6,.Primer_Brand__Tabs-module__Tabs--accent___p1SQc{border:var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd{gap:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__item___4V44f{z-index:1;cursor:pointer;padding:var(--base-size-8) var(--base-size-16);border-radius:var(--brand-borderRadius-full);transition:color var(--brand-animation-duration-fast) ease-in-out;white-space:nowrap;font-family:var(--brand-fontStack-sansSerif);font-weight:var(--brand-text-weight-600);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);color:var(--brand-color-text-default);background:0 0;border:0;position:relative}.Primer_Brand__Tabs-module__Tabs__slider___tkaHu{top:var(--base-size-4);bottom:var(--base-size-4);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);z-index:0;transform:translate(0);transform:translateX(var(--brand-Tabs-slider-x,0px));width:var(--brand-Tabs-slider-width);position:absolute}.Primer_Brand__Tabs-module__Tabs--default___MUcm6 .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);background:var(--brand-Tabs-item-default-bgColor-active)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-radius:var(--brand-borderRadius-full);border:var(--brand-borderWidth-thin) solid transparent;background:var(--brand-Tabs-item-accent-bgColor-rest)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__slider___tkaHu{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest)}.Primer_Brand__Tabs-module__Tabs__item___4V44f:focus-visible{outline:var(--base-size-2) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs--underline___CAXqd .Primer_Brand__Tabs-module__Tabs__item___4V44f{padding:var(--base-size-8);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item___4V44f{transition:color var(--brand-animation-duration-faster) ease}.Primer_Brand__Tabs-module__Tabs--accent___p1SQc .Primer_Brand__Tabs-module__Tabs__item--active___Guj0b{color:var(--brand-Tabs-item-accent-fgColor-rest)}.Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR{margin-top:var(--base-size-16)}.Primer_Brand__Tabs-module__Tabs__panel___UdoZQ{color:var(--brand-color-text-default)}.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{margin-block-end:var(--base-size-12)}.Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv{width:var(--base-size-6);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-text-muted);height:var(--base-size-6);transition:width var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Tabs-module__Tabs__indicator--active___h_TV1{background-color:var(--brand-color-text-default);width:var(--base-size-24)}.Primer_Brand__Tabs-module__Tabs__control___xG_4C{cursor:pointer;height:var(--base-size-24);width:var(--base-size-24);background-color:#0000;border:none;align-content:center;display:flex}.Primer_Brand__Tabs-module__Tabs__control-icon___V9mNe{top:calc(var(--base-size-2) / -2);position:relative;vertical-align:middle!important}@media screen and (width>=48rem){.Primer_Brand__Tabs-module__Tabs__controls___Cg7GX{display:none}.Primer_Brand__Tabs-module__Tabs__item___4V44f{padding-inline:var(--base-size-24)}}

package/esm/Tabs/Tabs.module.js

@@ -0,0 +1,28 @@
+import './Tabs.module-D8VFUDRe.css';var e = {
+	Tabs: "Primer_Brand__Tabs-module__Tabs___zia5x",
+	"Tabs-container": "Primer_Brand__Tabs-module__Tabs-container___wuq7I",
+	"Tabs-container--align-start": "Primer_Brand__Tabs-module__Tabs-container--align-start___n0cXk",
+	"Tabs-container--align-center": "Primer_Brand__Tabs-module__Tabs-container--align-center___LjUrd",
+	Tablist__wrapper: "Primer_Brand__Tabs-module__Tablist__wrapper___MDIB8",
+	"Tablist__wrapper--default": "Primer_Brand__Tabs-module__Tablist__wrapper--default___Wdb55",
+	"Tablist__wrapper--accent": "Primer_Brand__Tabs-module__Tablist__wrapper--accent___QV6Jx",
+	"Tablist__wrapper--underline": "Primer_Brand__Tabs-module__Tablist__wrapper--underline___IZ_zV",
+	"Tablist__wrapper--lastTabIsActive": "Primer_Brand__Tabs-module__Tablist__wrapper--lastTabIsActive___jCePF",
+	"Tabs--default": "Primer_Brand__Tabs-module__Tabs--default___MUcm6",
+	"Tabs--accent": "Primer_Brand__Tabs-module__Tabs--accent___p1SQc",
+	"Tabs--underline": "Primer_Brand__Tabs-module__Tabs--underline___CAXqd",
+	Tabs__item: "Primer_Brand__Tabs-module__Tabs__item___4V44f",
+	Tabs__slider: "Primer_Brand__Tabs-module__Tabs__slider___tkaHu",
+	"Tabs__item--active": "Primer_Brand__Tabs-module__Tabs__item--active___Guj0b",
+	Tabs__panelContainer: "Primer_Brand__Tabs-module__Tabs__panelContainer___WhkhR",
+	Tabs__panel: "Primer_Brand__Tabs-module__Tabs__panel___UdoZQ",
+	Tabs__controls: "Primer_Brand__Tabs-module__Tabs__controls___Cg7GX",
+	Tabs__indicator: "Primer_Brand__Tabs-module__Tabs__indicator___Tmwuv",
+	"Tabs__indicator--active": "Primer_Brand__Tabs-module__Tabs__indicator--active___h_TV1",
+	Tabs__control: "Primer_Brand__Tabs-module__Tabs__control___xG_4C",
+	"Tabs__control-icon": "Primer_Brand__Tabs-module__Tabs__control-icon___V9mNe"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Tabs.module.js.map

package/esm/Tabs/Tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.js","names":[],"sources":["../../src/Tabs/Tabs.module.css"],"sourcesContent":[".Tabs {\n  position: relative;\n  display: flex;\n  gap: var(--base-size-4);\n  background-color: var(--brand-color-canvas-backdrop);\n  border-radius: var(--brand-borderRadius-large);\n  padding: var(--brand-Tabs-container-padding);\n  width: fit-content;\n  min-height: var(--base-size-48);\n}\n\n.Tabs-container {\n  display: grid;\n}\n\n@media screen and (max-width: 48rem) {\n  .Tabs-container {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n  }\n\n  .Tabs-container--align-start {\n    align-items: flex-start;\n  }\n\n  .Tabs-container--align-center {\n    align-items: center;\n  }\n\n  .Tablist__wrapper {\n    position: relative;\n    width: fit-content;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  .Tablist__wrapper::after {\n    content: '';\n    position: absolute;\n    right: var(--brand-Tabs-list-borderWidth-active);\n    top: var(--base-size-2);\n    bottom: var(--base-size-2);\n    background: linear-gradient(to left, var(--brand-color-canvas-default) 30%, transparent);\n    width: var(--base-size-48);\n    z-index: 2;\n    pointer-events: none;\n    transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n      visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n    opacity: calc(var(--has-overflow, 0) * var(--can-scroll-right, 0));\n    border-radius: inherit;\n  }\n\n  .Tablist__wrapper--default::after,\n  .Tablist__wrapper--accent::after {\n    border-radius: var(--brand-borderRadius-full);\n  }\n\n  .Tablist__wrapper--underline::after {\n    border-radius: var(--brand-borderRadius-large);\n  }\n\n  .Tablist__wrapper--lastTabIsActive::after {\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  .Tabs {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .Tabs::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.Tabs-container--align-start {\n  justify-items: flex-start;\n}\n\n.Tabs-container--align-center {\n  justify-items: center;\n}\n\n.Tabs--default,\n.Tabs--accent {\n  border: var(--brand-Tabs-list-borderWidth-active) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.Tabs--underline {\n  gap: var(--base-size-24);\n}\n\n.Tabs__item {\n  position: relative;\n  z-index: 1;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  padding: var(--base-size-8) var(--base-size-16);\n  border-radius: var(--brand-borderRadius-full);\n  transition: color var(--brand-animation-duration-fast) ease-in-out;\n  white-space: nowrap;\n  font-family: var(--brand-fontStack-sansSerif);\n  font-weight: var(--brand-text-weight-600);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  color: var(--brand-color-text-default);\n}\n\n.Tabs__slider {\n  position: absolute;\n  top: var(--base-size-4);\n  bottom: var(--base-size-4);\n  transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n  z-index: 0;\n  transform: translateX(var(--brand-Tabs-slider-x, 0px));\n  width: var(--brand-Tabs-slider-width);\n}\n\n.Tabs--default .Tabs__slider {\n  border-radius: var(--brand-borderRadius-full);\n  border: var(--brand-borderWidth-thin) solid var(--brand-Tabs-item-default-borderColor-active);\n  background: var(--brand-Tabs-item-default-bgColor-active);\n}\n\n.Tabs--accent .Tabs__slider {\n  border-radius: var(--brand-borderRadius-full);\n  border: var(--brand-borderWidth-thin) solid transparent;\n  background: var(--brand-Tabs-item-accent-bgColor-rest);\n}\n\n.Tabs--underline .Tabs__slider {\n  border-bottom: var(--brand-borderWidth-thick) solid var(--brand-Tabs-item-underline-rest);\n}\n\n.Tabs__item:focus-visible {\n  outline: var(--base-size-2) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.Tabs__item--active {\n  color: var(--brand-color-text-default);\n}\n\n.Tabs--underline .Tabs__item {\n  padding: var(--base-size-8);\n\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Tabs--accent .Tabs__item {\n  transition: color var(--brand-animation-duration-faster) ease;\n}\n\n.Tabs--accent .Tabs__item--active {\n  color: var(--brand-Tabs-item-accent-fgColor-rest);\n}\n\n.Tabs__panelContainer {\n  margin-top: var(--base-size-16);\n}\n\n.Tabs__panel {\n  color: var(--brand-color-text-default);\n}\n\n.Tabs__controls {\n  margin-block-end: var(--base-size-12);\n}\n\n.Tabs__indicator {\n  width: var(--base-size-6);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-text-muted);\n  height: var(--base-size-6);\n  transition: width var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Tabs__indicator--active {\n  background-color: var(--brand-color-text-default);\n  width: var(--base-size-24);\n}\n\n.Tabs__control {\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  height: var(--base-size-24);\n  width: var(--base-size-24);\n  display: flex;\n  align-content: center;\n}\n\n.Tabs__control-icon {\n  vertical-align: middle !important; /* Required to override dotcom styles */\n  position: relative;\n  top: calc(var(--base-size-2) / -2);\n}\n\n@media screen and (min-width: 48rem) {\n  .Tabs__controls {\n    display: none;\n  }\n\n  .Tabs__item {\n    padding-inline: var(--base-size-24);\n  }\n}\n"],"mappings":""}

package/esm/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tabs';
+//# sourceMappingURL=index.d.ts.map

package/esm/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/esm/Testimonial/Testimonial.d.ts

@@ -0,0 +1,73 @@
+import React, { HTMLAttributes, SVGProps } from 'react';
+import { BaseProps } from '../component-helpers';
+import type { AvatarProps } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css';
+type TestimonialSize = 'small' | 'large';
+export declare const TestimonialQuoteMarkColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange"];
+export declare const defaultQuoteMarkColor: "default";
+export declare const TestimonialVariants: readonly ["subtle", "default", "minimal", "expressive"];
+type TestimonialVariant = (typeof TestimonialVariants)[number];
+export declare const defaultTestimonialVariant: TestimonialVariant;
+export type TestimonialProps = {
+    /**
+     * Sets alternative appearance for the testimonial
+     */
+    variant?: TestimonialVariant;
+    /**
+     * Applies an optional border where a variant supports it
+     */
+    hasBorder?: boolean;
+    /**
+     * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name
+     */
+    children: React.ReactNode | React.ReactElement<QuoteProps> | React.ReactElement<NameProps> | React.ReactElement<AvatarProps> | React.ReactElement<LogoProps>[];
+    /**
+     * Sets the testimonial text size
+     */
+    size?: TestimonialSize;
+    /** Sets the color of the quote mark */
+    quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number];
+} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
+/**
+ * Testimonial quote child element
+ * <Testimonial.Quote>
+ */
+type QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
+/**
+ * Testimonial name child element
+ * <Testimonial.Name>
+ */
+type NameProps = {
+    position?: string;
+} & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
+/**
+ * Testimonial logo child element
+ * <Testimonial.Logo>
+ */
+type LogoProps = {
+    children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>;
+} & React.HTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement>;
+/**
+ * Testimonial avatar child element
+ * <Testimonial.Avatar>
+ */
+declare function _Avatar({ size, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Use Testimonial to display a quote from a customer or user.
+ * @see https://primer.style/brand/components/Testimonial
+ */
+export declare const Testimonial: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TestimonialProps>, "ref"> & React.RefAttributes<unknown>> & {
+    Quote: React.ForwardRefExoticComponent<Omit<QuoteProps, "ref"> & React.RefAttributes<unknown>>;
+    Name: React.ForwardRefExoticComponent<Omit<NameProps, "ref"> & React.RefAttributes<unknown>>;
+    Avatar: typeof _Avatar;
+    Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<unknown>>;
+    Link: React.ForwardRefExoticComponent<{
+        size?: typeof import("../Link").LinkSizes[number];
+        arrowDirection?: typeof import("../Link").LinkArrowDirections[number];
+        isExternal?: boolean;
+        variant?: typeof import("../Link").LinkVariants[number];
+    } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<unknown>>;
+};
+export {};
+//# sourceMappingURL=Testimonial.d.ts.map

package/esm/Testimonial/Testimonial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAGd,QAAQ,EAGT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAGpC,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,8MAA4C,CAAA;AACnF,eAAO,MAAM,qBAAqB,WAAgC,CAAA;AAElE,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAC9B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAC7B,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;CAC7D,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiFnC;;;GAGG;AACH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAY5E;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAmBxB;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwB7B;;;GAGG;AAEH,iBAAS,OAAO,CAAC,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,WAAW,2CAE5C;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAMtB,CAAA"}