@hashicorp/mds-react 0.9.0

package/dist/components/table/table.module.scss

@@ -0,0 +1,192 @@
+@use 'styles/mixins/focus-ring' as *;
+
+$border-radius: 6px;
+$border-width: 1px;
+$inner-border-radius: $border-radius - $border-width;
+$border-color: var(--mds-color-border-primary);
+
+// TABLE
+
+.table {
+	width: 100%;
+	border: $border-width solid $border-color;
+	border-radius: $border-radius;
+	border-spacing: 0;
+
+	&.layout-fixed {
+		table-layout: fixed;
+	}
+
+	&.striped {
+		& .tbody {
+			& .tr:nth-child(even) {
+				background-color: var(--mds-color-surface-faint);
+			}
+		}
+	}
+}
+
+.density-short {
+	--mds-table-cell-padding: 6px 16px 5px 16px;
+}
+
+.density-medium {
+	--mds-table-cell-padding: 14px 16px 13px 16px;
+}
+
+.density-tall {
+	--mds-table-cell-padding: 22px 16px 21px 16px;
+}
+
+.valign-top {
+	--mds-table-valign: top;
+}
+
+.valign-middle {
+	--mds-table-valign: middle;
+}
+
+.valign-baseline {
+	--mds-table-valign: baseline;
+}
+
+.th,
+.td {
+	padding: var(--mds-table-cell-padding);
+
+	&.align-center {
+		text-align: center;
+
+		& .content {
+			justify-content: center;
+		}
+	}
+
+	&.align-right {
+		text-align: right;
+
+		.content {
+			justify-content: flex-end;
+		}
+	}
+}
+
+.thead {
+	& .tr {
+		color: var(--mds-color-foreground-strong);
+		background-color: var(--mds-color-surface-strong);
+
+		// border radius: target first and last th elements in the row
+
+		&:first-of-type {
+			& .th:first-child {
+				border-top-left-radius: $inner-border-radius;
+			}
+
+			& .th:last-child {
+				border-top-right-radius: $inner-border-radius;
+			}
+		}
+	}
+
+	& .th {
+		position: relative;
+		text-align: left;
+		border-top: none;
+		border-right: none;
+		border-bottom: $border-width solid $border-color;
+		border-left: none;
+
+		// border between two cells (we emulate a cell border slightly detached from the top/bottom borders)
+
+		& + .th::before {
+			position: absolute;
+			top: 6px;
+			bottom: 6px;
+			left: -1px; // we need to offset the border by 1px to render a right border of the previous cell
+			width: 1px;
+			background-color: $border-color;
+			content: '';
+			pointer-events: none;
+		}
+	}
+}
+
+.tbody {
+	& .tr {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-primary);
+
+		// border radius: target first th (scope of row) and td, and last td elements in the last row
+
+		&:last-of-type {
+			& .th,
+			& .td {
+				border-bottom: none;
+			}
+
+			& .th:first-child,
+			& .td:first-child {
+				border-bottom-left-radius: $inner-border-radius;
+			}
+
+			// a <th> will never be last child, only first child
+			& .td:last-child {
+				border-bottom-right-radius: $inner-border-radius;
+			}
+		}
+	}
+
+	& .th,
+	& .td {
+		vertical-align: var(--mds-table-valign);
+		text-align: left;
+		border-top: none;
+		border-right: none;
+		border-bottom: $border-width solid $border-color;
+		border-left: none;
+	}
+}
+
+.content {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.th-button {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	margin: -2px 0; // this is necessary to compensate for the height of the button being 24px while the line height of the text is 20px (the overall height of the cell shoud be 48px and we want to keep the cell's padding as is for consistency with Figma)
+	padding: 0;
+	color: var(--mds-color-foreground-faint);
+	background-color: transparent;
+	border: 1px solid transparent;
+	border-radius: 3px;
+
+	&:hover {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-interactive);
+		border-color: var(--mds-color-border-strong);
+		box-shadow: var(--mds-elevation-low-box-shadow);
+		cursor: pointer;
+	}
+
+	@include hds-focus-ring-with-pseudo-element($radius: inherit);
+
+	&:active {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-interactive-active);
+		border-color: var(--mds-color-border-strong);
+		box-shadow: none;
+	}
+
+	& .aria-label-hidden-segment {
+		display: none;
+	}
+}

package/dist/components/table/table.module.scss.js

@@ -0,0 +1,33 @@
+const t = "table__tdU5g", e = "striped__MBMc-", n = "tbody__W5bOI", _ = "tr__xeZno", d = "th__GQbKk", i = "td__WktB5", a = "content__Js-E8", l = "thead__3-vDU", o = {
+  table: t,
+  "layout-fixed": "layout-fixed__9PpwJ",
+  striped: e,
+  tbody: n,
+  tr: _,
+  "density-short": "density-short__7tyZx",
+  "density-medium": "density-medium__nmuYV",
+  "density-tall": "density-tall__2N9i0",
+  "valign-top": "valign-top__SRqQY",
+  "valign-middle": "valign-middle__kSfMx",
+  "valign-baseline": "valign-baseline__UFJwd",
+  th: d,
+  td: i,
+  "align-center": "align-center__vOTTL",
+  content: a,
+  "align-right": "align-right__3vUHD",
+  thead: l,
+  "th-button": "th-button__drg-o",
+  "aria-label-hidden-segment": "aria-label-hidden-segment__oQhN8"
+};
+export {
+  a as content,
+  o as default,
+  e as striped,
+  t as table,
+  n as tbody,
+  i as td,
+  d as th,
+  l as thead,
+  _ as tr
+};
+//# sourceMappingURL=table.module.scss.js.map

package/dist/components/table/table.module.scss.js.map

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

package/dist/components/table/td.d.ts

@@ -0,0 +1,17 @@
+import { HorizontalAlignment } from './utils';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface TDProps extends HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Determines the horizontal content alignment (sometimes referred to as text alignment) for the cell (make sure it is also set for the column header).
+     */
+    align?: HorizontalAlignment;
+    /**
+     * Elements passed as children are yielded as inner content of a <td> HTML element.
+     */
+    children: ReactNode;
+}
+declare const TD: {
+    ({ align, children, className, ...rest }: TDProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TD };

package/dist/components/table/td.js

@@ -0,0 +1,28 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "classnames";
+import { DEFAULT_ALIGNMENT as p } from "./utils.js";
+import r from "./table.module.scss.js";
+const d = ({
+  align: t = p,
+  children: m,
+  className: a,
+  ...s
+}) => /* @__PURE__ */ o(
+  "td",
+  {
+    className: e(
+      r.td,
+      r[`align-${t}`],
+      "mds-typography-legacy-body-200",
+      "mds-typography-font-weight-regular",
+      a
+    ),
+    ...s,
+    children: /* @__PURE__ */ o("div", { className: r.content, children: m })
+  }
+);
+d.displayName = "B.Td";
+export {
+  d as TD
+};
+//# sourceMappingURL=td.js.map

package/dist/components/table/td.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"td.js","sources":["../../../src/components/table/td.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, type HorizontalAlignment } from './utils'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './table.module.scss'\n\nexport interface TDProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the cell (make sure it is also set for the column header).\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * Elements passed as children are yielded as inner content of a <td> HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TD = ({\n\talign = DEFAULT_ALIGNMENT,\n\tchildren,\n\tclassName,\n\t...rest\n}: TDProps) => {\n\treturn (\n\t\t<td\n\t\t\tclassName={classNames(\n\t\t\t\ts.td,\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-regular',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className={s.content}>{children}</div>\n\t\t</td>\n\t)\n}\n\nTD.displayName = 'B.Td'\n\nexport { TD }\n"],"names":["TD","align","DEFAULT_ALIGNMENT","children","className","rest","jsx","classNames","s"],"mappings":";;;;AAgBA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,SAASP,CAAK,EAAE;AAAA,MAClB;AAAA,MACA;AAAA,MACAG;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA;AAKxCH,EAAG,cAAc;"}

package/dist/components/table/th-button-tooltip.d.ts

@@ -0,0 +1,6 @@
+interface TooltipProps {
+    tooltip: string;
+    labelId: string;
+}
+export declare const ThButtonTooltip: ({ tooltip, labelId }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/th-button-tooltip.js

@@ -0,0 +1,24 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { useId as m } from "react";
+import { Tooltip as a } from "../hds/wrappers/tooltip.js";
+import { FlightIcon as l } from "../flight-icon/index.js";
+import r from "./table.module.scss.js";
+const b = ({ tooltip: e, labelId: i }) => {
+  const t = m();
+  return /* @__PURE__ */ o(a, { text: e, children: /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: r["th-button"],
+      "aria-labelledby": `${t} ${i}`,
+      children: [
+        /* @__PURE__ */ o("span", { id: t, className: r["aria-label-hidden-segment"], children: "More information for" }),
+        /* @__PURE__ */ o(l, { name: "info" })
+      ]
+    }
+  ) });
+};
+export {
+  b as ThButtonTooltip
+};
+//# sourceMappingURL=th-button-tooltip.js.map

package/dist/components/table/th-button-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-button-tooltip.js","sources":["../../../src/components/table/th-button-tooltip.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { Tooltip } from '../hds/wrappers/tooltip'\nimport { FlightIcon } from '../flight-icon'\nimport s from './table.module.scss'\n\ninterface TooltipProps {\n\ttooltip: string\n\tlabelId: string\n}\n\nexport const ThButtonTooltip = ({ tooltip, labelId }: TooltipProps) => {\n\tconst prefixLabelId = useId()\n\n\treturn (\n\t\t<Tooltip text={tooltip}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={s['th-button']}\n\t\t\t\taria-labelledby={`${prefixLabelId} ${labelId}`}\n\t\t\t>\n\t\t\t\t<span id={prefixLabelId} className={s['aria-label-hidden-segment']}>\n\t\t\t\t\tMore information for\n\t\t\t\t</span>\n\t\t\t\t<FlightIcon name=\"info\" />\n\t\t\t</button>\n\t\t</Tooltip>\n\t)\n}\n"],"names":["ThButtonTooltip","tooltip","labelId","prefixLabelId","useId","jsx","Tooltip","jsxs","s","FlightIcon"],"mappings":";;;;;AAUO,MAAMA,IAAkB,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAA4B;AACtE,QAAMC,IAAgBC,EAAA;AAEtB,SACC,gBAAAC,EAACC,GAAA,EAAQ,MAAML,GACd,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAWC,EAAE,WAAW;AAAA,MACxB,mBAAiB,GAAGL,CAAa,IAAID,CAAO;AAAA,MAE5C,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAK,IAAIF,GAAe,WAAWK,EAAE,2BAA2B,GAAG,UAAA,wBAEpE;AAAA,QACA,gBAAAH,EAACI,GAAA,EAAW,MAAK,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE1B;AAEF;"}

package/dist/components/table/th.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { HorizontalAlignment, Scope } from './utils';
+export interface THProps extends HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Determines the horizontal content alignment (sometimes referred to as text alignment) for the column header.
+     */
+    align?: HorizontalAlignment;
+    /**
+     * If used as the first item in a table body’s row, scope should be set to row for accessibility purposes.
+     */
+    scope?: Scope;
+    /**
+     * Any valid CSS
+     * If set, determines the column’s width.
+     */
+    width?: string;
+    /**
+     * 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.
+     */
+    tooltip?: string;
+    /**
+     * If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).
+     */
+    isVisuallyHidden?: boolean;
+    /**
+     * Elements passed as children are yielded as inner content of a `<th>` HTML element.
+     */
+    children: ReactNode;
+}
+declare const TH: {
+    ({ align, width, scope, tooltip, isVisuallyHidden, children, className, ...rest }: THProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TH };

package/dist/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/dist/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/dist/components/table/tr.d.ts

@@ -0,0 +1,12 @@
+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.
+     */
+    children: ReactNode;
+}
+declare const TR: {
+    ({ children, className, ...rest }: TRProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { TR };

package/dist/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/dist/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/dist/components/table/utils.d.ts

@@ -0,0 +1,16 @@
+export declare const DEFAULT_DENSITY = "medium";
+export declare const DENSITIES: readonly ["default", "medium", "short", "tall"];
+export type Density = (typeof DENSITIES)[number];
+export declare const getDensity: (densityStr: string) => Density;
+export declare const DEFAULT_VERTICAL_ALIGNMENT = "top";
+export declare const VERTICAL_ALIGNMENTS: readonly ["baseline", "middle", "top"];
+export type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number];
+export declare const getVerticalAlignment: (valignStr: string) => VerticalAlignment;
+export declare const DEFAULT_ALIGNMENT = "left";
+export declare const ALIGNMENTS: readonly ["left", "center", "right"];
+export type HorizontalAlignment = (typeof ALIGNMENTS)[number];
+export declare const getHorizontalAlignment: (alignStr: string) => HorizontalAlignment;
+export declare const DEFAULT_SCOPE = "col";
+export declare const SCOPES: readonly ["col", "row"];
+export type Scope = (typeof SCOPES)[number];
+export declare const getScope: (scopeStr: string) => Scope;

package/dist/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/dist/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/dist/components/tabs/index.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, HTMLAttributes, MouseEvent } from 'react';
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    onClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void;
+    initialSelectedTabIndex?: number;
+    size?: 'medium' | 'large';
+}
+interface TabsListProps {
+    /**
+     * `<Tabs.Tab />` as children
+     */
+    children: ReactNode;
+    className?: string;
+}
+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;
+};
+export type { TabsListProps };
+export { Tabs };

package/dist/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/dist/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/dist/components/tabs/tab-panel.d.ts

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