@hashicorp/mds-react 0.9.2 → 0.9.4

package/components/table/th.js

@@ -0,0 +1,43 @@
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import f from "classnames";
+import { DEFAULT_SCOPE as y, DEFAULT_ALIGNMENT as N } from "./utils.js";
+import { useId as T } from "react";
+import { ThButtonTooltip as g } from "./th-button-tooltip.js";
+import t from "./table.module.scss.js";
+const h = ({
+  align: l = N,
+  width: e,
+  scope: n = y,
+  tooltip: a,
+  isVisuallyHidden: i,
+  children: m,
+  className: p,
+  ...c
+}) => {
+  const r = T();
+  let o;
+  return i ? o = /* @__PURE__ */ s("span", { className: "sr-only", children: m }) : a ? o = /* @__PURE__ */ d("div", { className: t.content, children: [
+    /* @__PURE__ */ s("span", { id: r, children: m }),
+    /* @__PURE__ */ s(g, { tooltip: a, labelId: r })
+  ] }) : o = /* @__PURE__ */ s("div", { className: t.content, children: m }), /* @__PURE__ */ s(
+    "th",
+    {
+      className: f(
+        t.th,
+        t[`align-${l}`],
+        "mds-typography-legacy-body-200",
+        "mds-typography-font-weight-semibold",
+        p
+      ),
+      style: e ? { width: e, minWidth: e } : {},
+      ...c,
+      scope: n,
+      children: o
+    }
+  );
+};
+h.displayName = "H.TH";
+export {
+  h as TH
+};
+//# sourceMappingURL=th.js.map

package/components/table/th.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"th.js","sources":["../../../src/components/table/th.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, DEFAULT_SCOPE } from './utils'\nimport { useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { ThButtonTooltip } from './th-button-tooltip'\nimport type { HorizontalAlignment, Scope } from './utils'\nimport s from './table.module.scss'\n\nexport interface THProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the column header.\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * If used as the first item in a table body’s row, scope should be set to row for accessibility purposes.\n\t */\n\tscope?: Scope\n\t/**\n\t * Any valid CSS\n\t * If set, determines the column’s width.\n\t */\n\twidth?: string\n\t/**\n\t * Text string which will appear in the tooltip. May contain basic HTML tags for formatting text such as strong and em tags. Not intended for multi-paragraph text or other more complex content. May not contain interactive content such as links or buttons. The placement and offset are automatically set and can’t be overwritten.\n\t */\n\ttooltip?: string\n\t/**\n\t * If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).\n\t */\n\tisVisuallyHidden?: boolean\n\t/**\n\t * Elements passed as children are yielded as inner content of a `<th>` HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TH = ({\n\talign = DEFAULT_ALIGNMENT,\n\twidth,\n\tscope = DEFAULT_SCOPE,\n\ttooltip,\n\tisVisuallyHidden,\n\tchildren,\n\tclassName,\n\t...rest\n}: THProps) => {\n\tconst labelId = useId()\n\tlet content: React.ReactNode\n\n\tif (isVisuallyHidden) {\n\t\tcontent = <span className=\"sr-only\">{children}</span>\n\t} else if (tooltip) {\n\t\tcontent = (\n\t\t\t<div className={s.content}>\n\t\t\t\t<span id={labelId}>{children}</span>\n\t\t\t\t<ThButtonTooltip tooltip={tooltip} labelId={labelId} />\n\t\t\t</div>\n\t\t)\n\t} else {\n\t\tcontent = <div className={s.content}>{children}</div>\n\t}\n\n\treturn (\n\t\t<th\n\t\t\tclassName={classNames(\n\t\t\t\ts.th,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-semibold',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={width ? { width, minWidth: width } : {}}\n\t\t\t{...rest}\n\t\t\tscope={scope}\n\t\t>\n\t\t\t{content}\n\t\t</th>\n\t)\n}\n\nTH.displayName = 'H.TH'\n\nexport { TH }\n"],"names":["TH","align","DEFAULT_ALIGNMENT","width","scope","DEFAULT_SCOPE","tooltip","isVisuallyHidden","children","className","rest","labelId","useId","content","jsx","jsxs","s","ThButtonTooltip","classNames"],"mappings":";;;;;;AAmCA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQC;AAAA,EACR,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAe;AACd,QAAMC,IAAUC,EAAA;AAChB,MAAIC;AAEJ,SAAIN,IACHM,IAAU,gBAAAC,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,GAAS,IACpCF,IACVO,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAE,SACjB,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAA,EAAK,IAAIH,GAAU,UAAAH,EAAA,CAAS;AAAA,IAC7B,gBAAAM,EAACG,GAAA,EAAgB,SAAAX,GAAkB,SAAAK,EAAA,CAAkB;AAAA,EAAA,GACtD,IAGDE,IAAU,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAR,GAAS,GAI/C,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVF,EAAE;AAAA,QACFA,EAAE,SAASf,CAAK,EAAE;AAAA,QAClB;AAAA,QACA;AAAA,QACAQ;AAAA,MAAA;AAAA,MAED,OAAON,IAAQ,EAAE,OAAAA,GAAO,UAAUA,EAAA,IAAU,CAAA;AAAA,MAC3C,GAAGO;AAAA,MACJ,OAAAN;AAAA,MAEC,UAAAS;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEAb,EAAG,cAAc;"}

package/components/table/tr.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface TRProps extends HTMLAttributes<HTMLTableRowElement> {
     /**
      * Elements passed as children are yielded as inner content of a `<tr>` HTML element.

package/components/table/tr.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "classnames";
+import a from "./table.module.scss.js";
+const e = ({ children: r, className: m, ...s }) => /* @__PURE__ */ o("tr", { className: t(a.tr, m), ...s, children: r });
+e.displayName = "T.TR";
+export {
+  e as TR
+};
+//# sourceMappingURL=tr.js.map

package/components/table/tr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tr.js","sources":["../../../src/components/table/tr.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './table.module.scss'\n\nexport interface TRProps extends HTMLAttributes<HTMLTableRowElement> {\n\t/**\n\t * Elements passed as children are yielded as inner content of a `<tr>` HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TR = ({ children, className, ...rest }: TRProps) => {\n\treturn (\n\t\t<tr className={classNames(s.tr, className)} {...rest}>\n\t\t\t{children}\n\t\t</tr>\n\t)\n}\n\nTR.displayName = 'T.TR'\n\nexport { TR }\n"],"names":["TR","children","className","rest","jsx","classNames","s"],"mappings":";;;AAWA,MAAMA,IAAK,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAEpC,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,IAAIJ,CAAS,GAAI,GAAGC,GAC9C,UAAAF,EAAA,CACF;AAIFD,EAAG,cAAc;"}

package/components/table/utils.js

@@ -0,0 +1,28 @@
+const e = "medium", o = ["default", "medium", "short", "tall"], A = (n) => {
+  const t = n;
+  return o.includes(t) ? t : e;
+}, c = "top", s = ["baseline", "middle", "top"], T = (n) => {
+  const t = n;
+  return s.includes(t) ? t : c;
+}, l = "left", i = ["left", "center", "right"], u = (n) => {
+  const t = n;
+  return i.includes(t) ? t : l;
+}, r = "col", E = ["col", "row"], d = (n) => {
+  const t = n;
+  return E.includes(t) ? t : r;
+};
+export {
+  i as ALIGNMENTS,
+  l as DEFAULT_ALIGNMENT,
+  e as DEFAULT_DENSITY,
+  r as DEFAULT_SCOPE,
+  c as DEFAULT_VERTICAL_ALIGNMENT,
+  o as DENSITIES,
+  E as SCOPES,
+  s as VERTICAL_ALIGNMENTS,
+  A as getDensity,
+  u as getHorizontalAlignment,
+  d as getScope,
+  T as getVerticalAlignment
+};
+//# sourceMappingURL=utils.js.map

package/components/table/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/table/utils.ts"],"sourcesContent":["export const DEFAULT_DENSITY = 'medium'\nexport const DENSITIES = ['default', 'medium', 'short', 'tall'] as const\nexport type Density = (typeof DENSITIES)[number]\nexport const getDensity = (densityStr: string): Density => {\n\tconst density = densityStr as Density\n\treturn DENSITIES.includes(density) ? density : DEFAULT_DENSITY\n}\n\nexport const DEFAULT_VERTICAL_ALIGNMENT = 'top'\nexport const VERTICAL_ALIGNMENTS = ['baseline', 'middle', 'top'] as const\nexport type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number]\nexport const getVerticalAlignment = (valignStr: string): VerticalAlignment => {\n\tconst valign = valignStr as VerticalAlignment\n\treturn VERTICAL_ALIGNMENTS.includes(valign)\n\t\t? valign\n\t\t: DEFAULT_VERTICAL_ALIGNMENT\n}\n\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const ALIGNMENTS = ['left', 'center', 'right'] as const\nexport type HorizontalAlignment = (typeof ALIGNMENTS)[number]\nexport const getHorizontalAlignment = (\n\talignStr: string\n): HorizontalAlignment => {\n\tconst align = alignStr as HorizontalAlignment\n\treturn ALIGNMENTS.includes(align) ? align : DEFAULT_ALIGNMENT\n}\n\nexport const DEFAULT_SCOPE = 'col'\nexport const SCOPES = ['col', 'row'] as const\nexport type Scope = (typeof SCOPES)[number]\nexport const getScope = (scopeStr: string): Scope => {\n\tconst scope = scopeStr as Scope\n\treturn SCOPES.includes(scope) ? scope : DEFAULT_SCOPE\n}\n"],"names":["DEFAULT_DENSITY","DENSITIES","getDensity","densityStr","density","DEFAULT_VERTICAL_ALIGNMENT","VERTICAL_ALIGNMENTS","getVerticalAlignment","valignStr","valign","DEFAULT_ALIGNMENT","ALIGNMENTS","getHorizontalAlignment","alignStr","align","DEFAULT_SCOPE","SCOPES","getScope","scopeStr","scope"],"mappings":"AAAO,MAAMA,IAAkB,UAClBC,IAAY,CAAC,WAAW,UAAU,SAAS,MAAM,GAEjDC,IAAa,CAACC,MAAgC;AAC1D,QAAMC,IAAUD;AAChB,SAAOF,EAAU,SAASG,CAAO,IAAIA,IAAUJ;AAChD,GAEaK,IAA6B,OAC7BC,IAAsB,CAAC,YAAY,UAAU,KAAK,GAElDC,IAAuB,CAACC,MAAyC;AAC7E,QAAMC,IAASD;AACf,SAAOF,EAAoB,SAASG,CAAM,IACvCA,IACAJ;AACJ,GAEaK,IAAoB,QACpBC,IAAa,CAAC,QAAQ,UAAU,OAAO,GAEvCC,IAAyB,CACrCC,MACyB;AACzB,QAAMC,IAAQD;AACd,SAAOF,EAAW,SAASG,CAAK,IAAIA,IAAQJ;AAC7C,GAEaK,IAAgB,OAChBC,IAAS,CAAC,OAAO,KAAK,GAEtBC,IAAW,CAACC,MAA4B;AACpD,QAAMC,IAAQD;AACd,SAAOF,EAAO,SAASG,CAAK,IAAIA,IAAQJ;AACzC;"}

package/components/tabs/index.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type HTMLAttributes, type MouseEvent } from 'react';
+import { ReactNode, HTMLAttributes, MouseEvent } from 'react';
 export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
     onClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void;
     initialSelectedTabIndex?: number;
@@ -14,8 +14,8 @@ interface TabsListProps {
 declare const Tabs: {
     Provider: ({ children, onClickTab, initialSelectedTabIndex, size, className, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
     TabList: ({ children, className }: TabsListProps) => import("react/jsx-runtime").JSX.Element;
-    Panel: ({ children, className, ...rest }: import("./tab-panel").TabPanelProps) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ count, icon, isSelected: isInitialTab, children, className, trackingKey, tabIndicatorTheme, ...rest }: import("./tab").TabProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...rest }: import('./tab-panel').TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ count, icon, isSelected: isInitialTab, children, className, trackingKey, tabIndicatorTheme, ...rest }: import('./tab').TabProps) => import("react/jsx-runtime").JSX.Element;
 };
 export type { TabsListProps };
 export { Tabs };

package/components/tabs/index.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as b, jsxs as M } from "react/jsx-runtime";
+import I from "classnames";
+import { useState as i, useRef as N, useCallback as m, useEffect as u, useMemo as O } from "react";
+import { TabPanel as S } from "./tab-panel.js";
+import { Tab as U } from "./tab.js";
+import { useTabsContext as q, TabsContext as B } from "./use-tabs-context.js";
+import p from "./tabs.module.scss.js";
+const F = ({
+  children: h,
+  onClickTab: n,
+  initialSelectedTabIndex: c = 0,
+  size: x = "medium",
+  className: E,
+  ...k
+}) => {
+  const [l, f] = i(
+    c
+  ), s = N([]), d = N([]), [r, A] = i([]), [L, R] = i([]), [W, C] = i(0), [K, V] = i(0), a = N(null), y = m((t) => {
+    const e = s.current[t]?.parentNode;
+    e && e.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, []);
+  u(() => {
+    f(c);
+  }, [c]), u(() => {
+    const t = s.current[l]?.parentElement;
+    if (t && a.current) {
+      const e = t.offsetLeft, o = t.offsetWidth;
+      V(e), C(o), a.current.scrollTo({
+        left: e,
+        behavior: "smooth"
+      });
+    }
+  }, [s, l, y, a]), u(() => {
+    A(s.current.map((o) => o.id));
+    let t = 0, e = 0;
+    if (s.current.forEach((o, T) => {
+      o.hasAttribute("data-is-selected") && (t = T, e++);
+    }), e > 1)
+      throw new Error("Only one tab may use isSelected argument");
+    f(t);
+  }, [s]), u(() => {
+    R(d.current.map((t) => t.id));
+  }, [d]);
+  const P = m(
+    (t, e) => {
+      f(t), y(t), typeof n == "function" && n(e, t);
+    },
+    [n, y]
+  ), w = m(
+    (t, e) => {
+      e.preventDefault(), s.current[t].focus();
+    },
+    []
+  ), g = m(
+    (t, e) => {
+      const o = "ArrowLeft", T = "ArrowRight", $ = "Enter", D = " ";
+      if (e.key === T) {
+        const v = (t + 1) % r.length;
+        w(v, e);
+      } else if (e.key === o) {
+        const v = (t + r.length - 1) % r.length;
+        w(v, e);
+      } else (e.key === $ || e.key === D) && f(t);
+    },
+    [w, r.length]
+  ), j = O(
+    () => ({
+      tabNodes: s,
+      tabIds: r,
+      panelNodes: d,
+      panelIds: L,
+      selectedTabIndex: l,
+      onClick: P,
+      onKeyUp: g,
+      size: x,
+      tabsListRef: a
+    }),
+    [
+      s,
+      r,
+      d,
+      L,
+      l,
+      P,
+      g,
+      x,
+      a
+    ]
+  );
+  return /* @__PURE__ */ b(B.Provider, { value: j, children: /* @__PURE__ */ b(
+    "div",
+    {
+      className: I(p.tabs, E),
+      ...k,
+      style: {
+        "--indicator-left-pos": `${K}px`,
+        "--indicator-width": `${W}px`
+      },
+      children: h
+    }
+  ) });
+}, G = ({ children: h, className: n }) => {
+  const { tabsListRef: c } = q();
+  return /* @__PURE__ */ b("div", { className: I(p["tablist-wrapper"], n), children: /* @__PURE__ */ M("ul", { className: p.tablist, role: "tablist", ref: c, children: [
+    h,
+    /* @__PURE__ */ b("li", { className: p.indicator, role: "presentation" })
+  ] }) });
+}, z = { Provider: F, TabList: G, Panel: S, Tab: U };
+export {
+  z as Tabs
+};
+//# sourceMappingURL=index.js.map

package/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\t\tlet initialTabIndex = 0\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement, index) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tinitialTabIndex = index\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tthrow new Error('Only one tab may use isSelected argument')\n\t\t}\n\n\t\tsetSelectedTabIndex(initialTabIndex)\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","initialTabIndex","selectedCount","index","tabElement","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}

package/components/tabs/tab-panel.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 type TabPanelProps = HTMLAttributes<HTMLDivElement>;
 declare const TabPanel: ({ children, className, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
 export type { TabPanelProps };

package/components/tabs/tab-panel.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as b } from "react/jsx-runtime";
+import { useId as f, useMemo as o } from "react";
+import u from "classnames";
+import { useTabsContext as I } from "./use-tabs-context.js";
+import x from "./tabs.module.scss.js";
+const y = ({ children: r, className: d, ...l }) => {
+  const { panelIds: n, tabIds: t, selectedTabIndex: a, panelNodes: c } = I(), s = "panel-" + f(), e = o(
+    () => n.indexOf(s),
+    [n, s]
+  ), i = o(
+    () => e > -1 ? t[e] : void 0,
+    [t, e]
+  ), m = o(
+    () => e === a,
+    [e, a]
+  );
+  return /* @__PURE__ */ b(
+    "section",
+    {
+      className: u(x.panel, d),
+      ...l,
+      role: "tabpanel",
+      "aria-labelledby": i,
+      id: s,
+      hidden: !m,
+      ref: (p) => c.current.push(p),
+      children: r
+    }
+  );
+};
+export {
+  y as TabPanel
+};
+//# sourceMappingURL=tab-panel.js.map

package/components/tabs/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo, type HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\ntype TabPanelProps = HTMLAttributes<HTMLDivElement>\n\nconst TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n\tconst { panelIds, tabIds, selectedTabIndex, panelNodes } = useTabsContext()\n\tconst panelId = 'panel-' + useId()\n\n\tconst nodeIndex = useMemo(\n\t\t() => panelIds.indexOf(panelId),\n\t\t[panelIds, panelId]\n\t)\n\n\tconst tabId = useMemo(\n\t\t() => (nodeIndex > -1 ? tabIds[nodeIndex] : undefined),\n\t\t[tabIds, nodeIndex]\n\t)\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<section\n\t\t\tclassName={classNames(s.panel, className)}\n\t\t\t{...rest}\n\t\t\trole=\"tabpanel\"\n\t\t\taria-labelledby={tabId}\n\t\t\tid={panelId}\n\t\t\thidden={!isSelected}\n\t\t\tref={(el: HTMLDivElement) => panelNodes.current.push(el)}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n\nexport type { TabPanelProps }\nexport { TabPanel }\n"],"names":["TabPanel","children","className","rest","panelIds","tabIds","panelNodes","useTabsContext","panelId","useId","useMemo","tabId","nodeIndex","isSelected","selectedTabIndex","jsx","classNames","s","el"],"mappings":";;;;;;AAUC,MAAAA,IAAQ,CAAA,EAAU,UAAAC,GAAQ,WAAAC,GAAA,GAAAC,EAAkB,MAAA;AAC5C,QAAM,EAAA,UAAAC,GAAU,QAAAC,wBAAiB,YAAAC,EAAA,IAAAC,EAAA,GAE3BC,IAAA,WAAYC,EAAA,OACFC;AAAA,IACf,MAACN,EAAU,QAAOI,CAAA;AAAA,IACnB,CAAAJ,GAAAI,CAAA;AAAA,EAEA,GACCG,IAAOD;AAAA,IACP,MAACE,IAAiB,KAAAP,EAAAO,CAAA,IAAA;AAAA,IACnB,CAAAP,GAAAO,CAAA;AAAA,EAEA,GACCC,IAAMH;AAAA,IACN,MAACE,MAAWE;AAAA,IACb,CAAAF,GAAAE,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGC,EAAAC,EAAA,OAAAf,CAAA;AAAA,MACJ,GAAAC;AAAA,MACA,MAAA;AAAA,MACA,mBAAIQ;AAAA,MACJ,IAAAH;AAAA,MACA,QAAM,CAAAK;AAAA,MAEL,KAAA,CAAAK,MAAAZ,EAAA,QAAA,KAAAY,CAAA;AAAA,MAAA,UAAAjB;AAAA,IACF;AAAA,EAEF;;"}

package/components/tabs/tab.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from 'react';
-import type { FlightIconName } from '../flight-icon';
+import { HTMLAttributes } from 'react';
+import { FlightIconName } from '../flight-icon';
 interface TabProps extends HTMLAttributes<HTMLLIElement> {
     tabIndicatorTheme?: 'primary' | 'secondary';
     /**

package/components/tabs/tab.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import c from "classnames";
+import { BadgeCount as z } from "../badge-count/index.js";
+import { useId as T, useMemo as p } from "react";
+import { useTabsContext as j } from "./use-tabs-context.js";
+import { FlightIcon as k } from "../flight-icon/index.js";
+import o from "./tabs.module.scss.js";
+const M = ({
+  count: n,
+  icon: i,
+  isSelected: b,
+  children: y,
+  className: u,
+  trackingKey: f,
+  tabIndicatorTheme: g = "primary",
+  ...x
+}) => {
+  const { tabNodes: h, tabIds: d, selectedTabIndex: m, onClick: I, onKeyUp: C, size: l } = j(), s = "tab-" + T(), t = p(() => d.indexOf(s), [d, s]), a = p(
+    () => t === m,
+    [t, m]
+  );
+  return /* @__PURE__ */ r(
+    "li",
+    {
+      className: c(
+        o.tab,
+        o[g],
+        {
+          [o.selected]: a
+        },
+        u
+      ),
+      ...x,
+      role: "presentation",
+      children: /* @__PURE__ */ N(
+        "button",
+        {
+          className: c(
+            o["tab-button"],
+            "mds-typography-font-weight-medium",
+            {
+              "mds-typography-legacy-body-200": l === "medium",
+              "mds-typography-legacy-body-300": l === "large"
+            }
+          ),
+          role: "tab",
+          type: "button",
+          id: s,
+          "aria-selected": a,
+          tabIndex: a ? void 0 : -1,
+          onClick: (e) => I(t, e),
+          onKeyUp: (e) => C(t, e),
+          "data-is-selected": b,
+          "data-analytics": f,
+          ref: (e) => h.current.push(e),
+          children: [
+            i && /* @__PURE__ */ r(k, { name: i, size: 16, role: "presentation" }),
+            y,
+            n && /* @__PURE__ */ r(z, { text: n, size: "small", role: "presentation" })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  M as Tab
+};
+//# sourceMappingURL=tab.js.map

package/components/tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { BadgeCount } from '../badge-count'\nimport { useId, type HTMLAttributes, useMemo } from 'react'\nimport { useTabsContext } from './use-tabs-context'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './tabs.module.scss'\n\ninterface TabProps extends HTMLAttributes<HTMLLIElement> {\n\ttabIndicatorTheme?: 'primary' | 'secondary'\n\t/**\n\t * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)\n\t */\n\tcount?: string\n\t/**\n\t * Displays an icon in the tab. (optional)\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)\n\t */\n\tisSelected?: boolean\n\t/**\n\t * Used to append analytics and tracking related data attributes to any interactive element internal to this component.\n\t */\n\ttrackingKey?: string\n}\n\nconst Tab = ({\n\tcount,\n\ticon,\n\tisSelected: isInitialTab,\n\tchildren,\n\tclassName,\n\ttrackingKey,\n\ttabIndicatorTheme = 'primary',\n\t...rest\n}: TabProps) => {\n\tconst { tabNodes, tabIds, selectedTabIndex, onClick, onKeyUp, size } =\n\t\tuseTabsContext()\n\tconst tabId = 'tab-' + useId()\n\n\tconst nodeIndex = useMemo(() => tabIds.indexOf(tabId), [tabIds, tabId])\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(\n\t\t\t\ts.tab,\n\t\t\t\ts[tabIndicatorTheme],\n\t\t\t\t{\n\t\t\t\t\t[s.selected]: isSelected,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\trole=\"presentation\"\n\t\t>\n\t\t\t<button\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['tab-button'],\n\t\t\t\t\t'mds-typography-font-weight-medium',\n\t\t\t\t\t{\n\t\t\t\t\t\t['mds-typography-legacy-body-200']: size === 'medium',\n\t\t\t\t\t\t['mds-typography-legacy-body-300']: size === 'large',\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tid={tabId}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\ttabIndex={!isSelected ? -1 : undefined}\n\t\t\t\tonClick={(e) => onClick(nodeIndex, e)}\n\t\t\t\tonKeyUp={(e) => onKeyUp(nodeIndex, e)}\n\t\t\t\tdata-is-selected={isInitialTab}\n\t\t\t\tdata-analytics={trackingKey}\n\t\t\t\tref={(el: HTMLButtonElement) => tabNodes.current.push(el)}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={16} role=\"presentation\" />}\n\n\t\t\t\t{children}\n\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" role=\"presentation\" />}\n\t\t\t</button>\n\t\t</li>\n\t)\n}\n\nexport type { TabProps }\nexport { Tab }\n"],"names":["Tab","count","icon","isInitialTab","children","className","trackingKey","tabIndicatorTheme","rest","tabNodes","tabIds","onClick","onKeyUp","size","useTabsContext","tabId","nodeIndex","useMemo","isSelected","selectedTabIndex","jsx","classNames","s","jsxs","el","FlightIcon","BadgeCount"],"mappings":";;;;;;;;AA8Ba,MACZA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAG;AAAA,EACJ,GAAAC;AACC;AAEA,QAAM,EAAA,UAAAC,GAAQ,QAAAC,wBAAe,SAAAC,GAAA,SAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAA,GAEvBC,IAAA,WAAoB,GAEpBC,IAAAC,EAAa,MAAAP,EAAA,QAAAK,CAAA,GAAA,CAAAL,GAAAK,CAAA,CAAA,GAClBG,IAAMD;AAAA,IACN,MAACD,MAAWG;AAAA,IACb,CAAAH,GAAAG,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE;AAAA,QACFA,EAAAf,CAAA;AAAA,QAAA;AAAA,UAEA,CAAAe,EAAA,QAAA,GAAAJ;AAAA,QACA;AAAA,QACDb;AAAA,MACC;AAAA,MACD,GAAAG;AAAA,MAEA,MAAA;AAAA,MAAA,UAAC,gBAAAe;AAAA,QAAA;AAAA,QAAA;AAAA,UACW,WACRF;AAAA,YACFC,EAAA,YAAA;AAAA,YACA;AAAA,YAAA;AAAA,cAEE,kCAAmCT,MAAS;AAAA,cAAA,kCAAAA,MAAA;AAAA,YAE/C;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,MAAI;AAAA,UACJ,IAAAE;AAAA,UACA;UACA,UAAUG,IAAc,SAAA;AAAA,UACxB,SAAS,CAAC,MAAMP,EAAQK,GAAW,CAAC;AAAA,UACpC,SAAA,CAAA,MAAAJ,EAAkBI,GAAA,CAAA;AAAA,UAClB,oBAAgBb;AAAA,UAChB,kBAAgCG;AAAA,UAE/B,YAAAG,EAAA,QAAA,KAAAe,CAAA;AAAA,UAAA,UAAA;AAAA,YAEAtB,KAAA,gBAAAkB,EAAAK,GAAA,EAAA,MAAAvB,GAAA,MAAA,IAAA,MAAA,eAAA,CAAA;AAAA,YAEAE;AAAA,YAAmEH,KAAA,gBAAAmB,EAAAM,GAAA,EAAA,MAAAzB,GAAA,MAAA,SAAA,MAAA,eAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IACD;AAAA,EAEF;;"}

package/components/tabs/tabs.module.scss.js

@@ -0,0 +1,22 @@
+const t = "tablist__sKiEs", a = "tab__qi523", s = "primary__iGc9C", e = "selected__SVr0E", n = "indicator__OHxre", r = "secondary__qlHsL", c = "panel__G8tI0", _ = {
+  "tablist-wrapper": "tablist-wrapper__nF28e",
+  tablist: t,
+  tab: a,
+  primary: s,
+  selected: e,
+  indicator: n,
+  secondary: r,
+  "tab-button": "tab-button__qI9wt",
+  panel: c
+};
+export {
+  _ as default,
+  n as indicator,
+  c as panel,
+  s as primary,
+  r as secondary,
+  e as selected,
+  a as tab,
+  t as tablist
+};
+//# sourceMappingURL=tabs.module.scss.js.map

package/components/tabs/tabs.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/components/tabs/use-tabs-context.d.ts

@@ -1,4 +1,4 @@
-import { type MutableRefObject, type MouseEvent, type KeyboardEvent } from 'react';
+import { MutableRefObject, MouseEvent, KeyboardEvent } from 'react';
 interface TabsContextState {
     tabNodes: MutableRefObject<Array<HTMLButtonElement>>;
     panelNodes: MutableRefObject<Array<HTMLDivElement>>;
@@ -10,6 +10,6 @@ interface TabsContextState {
     size: 'medium' | 'large';
     tabsListRef: MutableRefObject<HTMLUListElement | null>;
 }
-export declare const TabsContext: import("react").Context<TabsContextState | undefined>;
+export declare const TabsContext: import('react').Context<TabsContextState | undefined>;
 export declare function useTabsContext(): TabsContextState;
 export {};

package/components/tabs/use-tabs-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext as e, useContext as o } from "react";
+const n = e(
+  void 0
+);
+function s() {
+  const t = o(n);
+  if (t === void 0)
+    throw new Error("useTabsContext must be used within a TabsContext.Provider");
+  return t;
+}
+export {
+  n as TabsContext,
+  s as useTabsContext
+};
+//# sourceMappingURL=use-tabs-context.js.map

package/components/tabs/use-tabs-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-context.js","sources":["../../../src/components/tabs/use-tabs-context.ts"],"sourcesContent":["'use client'\n\nimport {\n\ttype MutableRefObject,\n\ttype MouseEvent,\n\ttype KeyboardEvent,\n\tcreateContext,\n\tuseContext,\n} from 'react'\n\ninterface TabsContextState {\n\ttabNodes: MutableRefObject<Array<HTMLButtonElement>>\n\tpanelNodes: MutableRefObject<Array<HTMLDivElement>>\n\ttabIds: Array<string>\n\tpanelIds: Array<string>\n\tselectedTabIndex: number\n\tonClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void\n\tonKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void\n\tsize: 'medium' | 'large'\n\ttabsListRef: MutableRefObject<HTMLUListElement | null>\n}\n\nexport const TabsContext = createContext<TabsContextState | undefined>(\n\tundefined\n)\n\nexport function useTabsContext(): TabsContextState {\n\tconst context = useContext(TabsContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useTabsContext must be used within a TabsContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext"],"mappings":";;AAsB2B,MAC1BA,IAAAC;AAAA,EACD;AAEO;AACN,SAAMC,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,2DAAA;AAED,SAAAA;;"}

package/components/text/index.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type ElementType } from 'react';
+import { ComponentPropsWithRef, ElementType } from 'react';
 declare const TEXT_COLORS: readonly ["primary", "strong", "faint", "disabled", "high-contrast", "action", "action-hover", "action-active", "highlight", "highlight-on-surface", "highlight-high-contrast", "success", "success-on-surface", "success-high-contrast", "warning", "warning-on-surface", "warning-high-contrast", "critical", "critical-on-surface", "critical-high-contrast"];
 declare const TEXT_GROUPS: readonly ["hds-body", "code", "body", "display-expressive", "label"];
 declare const TEXT_SIZES: readonly ["100", "200", "300", "400", "500", "600", "700", "800"];
@@ -35,10 +35,10 @@ interface CodeProps<T extends ElementType> extends BaseTextProps<T> {
     size?: '100' | '200' | '300';
 }
 declare const Text: {
-    Body: <T extends ElementType>({ size, ...rest }: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => import("react").FunctionComponentElement<TextImplProps<ElementType> & Omit<any, keyof TextImplProps<T_1>>>;
-    DisplayExpressive: <T extends ElementType>({ size, ...rest }: DisplayExpressiveProps<T> & Omit<ComponentPropsWithRef<T>, keyof DisplayExpressiveProps<T>>) => import("react").FunctionComponentElement<TextImplProps<ElementType> & Omit<any, keyof TextImplProps<T_1>>>;
-    Label: <T extends ElementType>(props: LabelProps<T> & Omit<ComponentPropsWithRef<T>, keyof LabelProps<T>>) => import("react").FunctionComponentElement<TextImplProps<ElementType> & Omit<any, keyof TextImplProps<T_1>>>;
-    HDSBody: <T extends ElementType>({ size, weight, ...rest }: HDSBodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof HDSBodyProps<T>>) => import("react").FunctionComponentElement<TextImplProps<ElementType> & Omit<any, keyof TextImplProps<T_1>>>;
-    Code: <T extends ElementType>({ size, weight, ...rest }: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>) => import("react").FunctionComponentElement<TextImplProps<ElementType> & Omit<any, keyof TextImplProps<T_1>>>;
+    Body: <T extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, ...rest }: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
+    DisplayExpressive: <T_2 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, ...rest }: DisplayExpressiveProps<T_2> & Omit<ComponentPropsWithRef<T_2>, keyof DisplayExpressiveProps<T_2>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
+    Label: <T_3 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>(props: LabelProps<T_3> & Omit<ComponentPropsWithRef<T_3>, "className" | "color" | "tag" | "weight" | "align">) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
+    HDSBody: <T_4 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, weight, ...rest }: HDSBodyProps<T_4> & Omit<ComponentPropsWithRef<T_4>, keyof HDSBodyProps<T_4>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
+    Code: <T_5 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, weight, ...rest }: CodeProps<T_5> & Omit<ComponentPropsWithRef<T_5>, keyof CodeProps<T_5>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
 };
 export { Text, TEXT_COLORS, TEXT_WEIGHTS };

package/components/text/index.js

@@ -0,0 +1,112 @@
+import { jsx as y } from "react/jsx-runtime";
+import l from "classnames";
+import { createElement as e } from "react";
+import m from "./style.module.scss.js";
+const b = [
+  "primary",
+  "strong",
+  "faint",
+  "disabled",
+  "high-contrast",
+  "action",
+  "action-hover",
+  "action-active",
+  "highlight",
+  "highlight-on-surface",
+  "highlight-high-contrast",
+  "success",
+  "success-on-surface",
+  "success-high-contrast",
+  "warning",
+  "warning-on-surface",
+  "warning-high-contrast",
+  "critical",
+  "critical-on-surface",
+  "critical-high-contrast"
+], B = ["regular", "medium", "semibold", "bold"];
+function f(r, o) {
+  return {
+    "hds-body": `mds-typography-legacy-body-${o}`,
+    code: `mds-typography-code-${o}`,
+    "display-expressive": `mds-typography-display-expressive-${o}`,
+    label: "mds-typography-label",
+    body: `mds-typography-body-${o}`
+  }[r];
+}
+const n = ({
+  tag: r,
+  group: o,
+  size: s = "200",
+  weight: a,
+  align: c,
+  color: t,
+  children: p,
+  className: g,
+  ...d
+}) => {
+  const h = r ?? "span", u = f(o, s), i = b.includes(t);
+  return /* @__PURE__ */ y(
+    h,
+    {
+      className: l(
+        u,
+        {
+          [m[`align-${c}`]]: c,
+          [`mds-typography-font-weight-${a}`]: a,
+          [`mds-foreground-${t}`]: t && i
+        },
+        g
+      ),
+      style: t && !i ? { color: t } : {},
+      ...d,
+      children: p
+    }
+  );
+}, T = ({
+  size: r = "300",
+  ...o
+}) => e(n, {
+  ...o,
+  size: r,
+  group: "body"
+}), x = ({
+  size: r = "200",
+  ...o
+}) => e(n, {
+  ...o,
+  size: r,
+  group: "display-expressive"
+}), v = (r) => e(n, {
+  ...r,
+  group: "label"
+}), $ = ({
+  size: r = "200",
+  weight: o = "regular",
+  ...s
+}) => e(n, {
+  ...s,
+  size: r,
+  weight: o,
+  group: "hds-body"
+}), E = ({
+  size: r = "200",
+  weight: o = "regular",
+  ...s
+}) => e(n, {
+  ...s,
+  size: r,
+  weight: o,
+  group: "code"
+}), D = {
+  Body: T,
+  DisplayExpressive: x,
+  Label: v,
+  HDSBody: $,
+  Code: E
+};
+export {
+  b as TEXT_COLORS,
+  B as TEXT_WEIGHTS,
+  D as Text
+};
+//# sourceMappingURL=index.js.map

package/components/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps<T extends ElementType> {\n\ttag?: T\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' | 'center' | 'right'\n\tcolor?: TextColor | HexColor\n\tclassName?: string\n}\n\ninterface TextImplProps<T extends ElementType> extends BaseTextProps<T> {\n\tgroup: TextGroup\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = <T extends ElementType = 'span'>({\n\ttag,\n\tgroup,\n\tsize = '200',\n\tweight,\n\talign,\n\tcolor,\n\tchildren,\n\tclassName,\n\t...rest\n}: TextImplProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof TextImplProps<T>>) => {\n\tconst Component = tag ?? 'span'\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\ninterface BodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '200' | '300' | '400'\n}\n\nconst Body = <T extends ElementType>({\n\tsize = '300',\n\t...rest\n}: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'body',\n\t})\n}\n\ninterface DisplayExpressiveProps<T extends ElementType>\n\textends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800'\n}\n\nconst DisplayExpressive = <T extends ElementType>({\n\tsize = '200',\n\t...rest\n}: DisplayExpressiveProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof DisplayExpressiveProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'display-expressive',\n\t})\n}\n\ntype LabelProps<T extends ElementType> = Omit<BaseTextProps<T>, 'size'>\n\nconst Label = <T extends ElementType>(\n\tprops: LabelProps<T> & Omit<ComponentPropsWithRef<T>, keyof LabelProps<T>>\n) => {\n\treturn createElement(TextImpl, {\n\t\t...props,\n\t\tgroup: 'label',\n\t})\n}\n\ninterface HDSBodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst HDSBody = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: HDSBodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof HDSBodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body',\n\t})\n}\n\ninterface CodeProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst Code = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code',\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","props","HDSBody","Code","Text"],"mappings":";;;;AAQA,MAAMA,IAAc;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAqBMC,IAAe,CAAC,WAAW,UAAU,YAAY,MAAM;AAuB7D,SAASC,EAAmBC,GAAkBC,GAAwB;AASrE,SARmD;AAAA,IAClD,YAAY,8BAA8BA,CAAI;AAAA,IAC9C,MAAM,uBAAuBA,CAAI;AAAA,IACjC,sBAAsB,qCAAqCA,CAAI;AAAA,IAC/D,OAAO;AAAA,IACP,MAAM,uBAAuBA,CAAI;AAAA,EAAA,EAGXD,CAAK;AAC7B;AAEA,MAAME,IAAW,CAAiC;AAAA,EACjD,KAAAC;AAAA,EACA,OAAAH;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAG;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAC4D;AAC3D,QAAMC,IAAYP,KAAO,QACnBQ,IAAUZ,EAAmBC,GAAOC,CAAI,GAExCW,IAAsBf,EAAY,SAASS,CAAkB;AAEnE,SACC,gBAAAO;AAAA,IAACH;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVH;AAAA,QACA;AAAA,UACC,CAACI,EAAE,SAASV,CAAK,EAAE,CAAC,GAAGA;AAAA,UACvB,CAAC,8BAA8BD,CAAM,EAAE,GAAGA;AAAA,UAC1C,CAAC,kBAAkBE,CAAK,EAAE,GAAGA,KAASM;AAAA,QAAA;AAAA,QAEvCJ;AAAA,MAAA;AAAA,MAED,OAAOF,KAAS,CAACM,IAAsB,EAAE,OAAAN,EAAA,IAAU,CAAA;AAAA,MAClD,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGJ,GAMMS,IAAO,CAAwB;AAAA,EACpC,MAAAf,IAAO;AAAA,EACP,GAAGQ;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAQIiB,IAAoB,CAAwB;AAAA,EACjD,MAAAjB,IAAO;AAAA,EACP,GAAGQ;AACJ,MAEQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAKIkB,IAAQ,CACbC,MAEOH,EAAcf,GAAU;AAAA,EAC9B,GAAGkB;AAAA,EACH,OAAO;AAAA,CACP,GAOIC,IAAU,CAAwB;AAAA,EACvC,MAAApB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAOIkB,IAAO,CAAwB;AAAA,EACpC,MAAArB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAGImB,IAAO;AAAA,EACZ,MAAAP;AAAA,EACA,mBAAAE;AAAA,EACA,OAAAC;AAAA,EACA,SAAAE;AAAA,EACA,MAAAC;AACD;"}