@hashicorp/mds-react 0.9.0

package/dist/components/modal/modal.module.css

@@ -0,0 +1,22 @@
+.modal {
+	position: fixed;
+	z-index: 50;
+	height: fit-content;
+	max-height: 95vh;
+	inset: 0;
+	margin: auto; /* needed to center the modal dialog on the viewport */
+	box-shadow: var(--mds-surface-overlay-box-shadow);
+
+	/* the `<dialog>` element uses a special "open" attribute to determine its visibility status */
+	&:not([open]) {
+		display: none;
+	}
+
+	/* 
+	* we hide the native `::backdrop` pseudo-element in favor of using
+	* a custom `overlay` element to detect click events with more ease
+	*/
+	&::backdrop {
+		display: none;
+	}
+}

package/dist/components/modal/modal.module.css.js

@@ -0,0 +1,8 @@
+const o = "modal__Mao59", a = {
+  modal: o
+};
+export {
+  a as default,
+  o as modal
+};
+//# sourceMappingURL=modal.module.css.js.map

package/dist/components/modal/modal.module.css.js.map

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

package/dist/components/modal/use-modal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface ModalContextState {
+    isOpen: boolean;
+    openModal: (content: ReactNode) => void;
+    closeModal: () => void;
+}
+export declare const ModalContext: import('react').Context<ModalContextState | undefined>;
+export declare function useModal(): ModalContextState;

package/dist/components/modal/use-modal.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext as e, useContext as n } from "react";
+const o = e(
+  void 0
+);
+o.displayName = "ModalContext";
+function d() {
+  const t = n(o);
+  if (t === void 0)
+    throw new Error("useModal must be used within a ModalContext.Provider");
+  return t;
+}
+export {
+  o as ModalContext,
+  d as useModal
+};
+//# sourceMappingURL=use-modal.js.map

package/dist/components/modal/use-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal.js","sources":["../../../src/components/modal/use-modal.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nexport interface ModalContextState {\n\tisOpen: boolean\n\topenModal: (content: ReactNode) => void\n\tcloseModal: () => void\n}\n\nexport const ModalContext = createContext<ModalContextState | undefined>(\n\tundefined\n)\nModalContext.displayName = 'ModalContext'\n\nexport function useModal(): ModalContextState {\n\tconst context = useContext(ModalContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useModal must be used within a ModalContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["ModalContext","createContext","useModal","context","useContext"],"mappings":";;AAW4B,MAC3BA,IAAAC;AAAA,EACD;AACA;AAEOD,gBAAuC;AAC7C,SAAME,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,sDAAA;AAED,SAAAA;;"}

package/dist/components/separator/index.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
+    spacing?: '0' | '24';
+}
+declare const Separator: {
+    ({ spacing, className, ...rest }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { SeparatorProps };
+export { Separator };

package/dist/components/separator/index.js

@@ -0,0 +1,15 @@
+import { jsx as m } from "react/jsx-runtime";
+import p from "classnames";
+import r from "./separator.module.css.js";
+const t = ({ spacing: a = "24", className: o, ...s }) => /* @__PURE__ */ m(
+  "hr",
+  {
+    className: p(r.separator, r[`spacing-${a}`], o),
+    ...s
+  }
+);
+t.displayName = "Separator";
+export {
+  t as Separator
+};
+//# sourceMappingURL=index.js.map

package/dist/components/separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './separator.module.css'\n\ninterface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n\tspacing?: '0' | '24'\n}\n\nconst Separator = ({ spacing = '24', className, ...rest }: SeparatorProps) => {\n\treturn (\n\t\t<hr\n\t\t\tclassName={classNames(s.separator, s[`spacing-${spacing}`], className)}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n\nSeparator.displayName = 'Separator'\n\nexport type { SeparatorProps }\nexport { Separator }\n"],"names":["Separator","spacing","className","rest","jsx","classNames","s"],"mappings":";;;AAQA,MAAMA,IAAY,CAAC,EAAE,SAAAC,IAAU,MAAM,WAAAC,GAAW,GAAGC,QAEjD,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,WAAWA,EAAE,WAAWL,CAAO,EAAE,GAAGC,CAAS;AAAA,IACpE,GAAGC;AAAA,EAAA;AAAA;AAKPH,EAAU,cAAc;"}

package/dist/components/separator/separator.module.css

@@ -0,0 +1,15 @@
+.separator {
+	height: unset;
+	color: unset;
+	background-color: unset;
+	border: none;
+	border-top: 1px solid var(--mds-color-border-primary);
+}
+
+.spacing-24 {
+	margin: 24px 0;
+}
+
+.spacing-0 {
+	margin: 0;
+}

package/dist/components/separator/separator.module.css.js

@@ -0,0 +1,10 @@
+const a = "separator__Qz7bd", s = {
+  separator: a,
+  "spacing-24": "spacing-24__5hcla",
+  "spacing-0": "spacing-0__W5NO0"
+};
+export {
+  s as default,
+  a as separator
+};
+//# sourceMappingURL=separator.module.css.js.map

package/dist/components/separator/separator.module.css.js.map

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

package/dist/components/standalone-link/index.d.ts

@@ -0,0 +1,23 @@
+import { InteractiveProps } from '../interactive';
+declare const STANDALONE_LINK_SIZES: readonly ["small", "medium", "large"];
+type StandaloneLinkSize = (typeof STANDALONE_LINK_SIZES)[number];
+declare const STANDALONE_LINK_COLORS: readonly ["primary", "secondary", "secondary-inverted"];
+type StandaloneLinkColor = (typeof STANDALONE_LINK_COLORS)[number];
+declare const STANDALONE_LINK_ICON_POSITIONS: readonly ["leading", "trailing"];
+type StandaloneLinkIconPosition = (typeof STANDALONE_LINK_ICON_POSITIONS)[number];
+interface StandaloneLinkProps extends Omit<InteractiveProps, 'color' | 'size'> {
+    text: string;
+    size?: StandaloneLinkSize;
+    color?: StandaloneLinkColor;
+    icon?: string;
+    iconPosition?: StandaloneLinkIconPosition;
+    href?: string;
+    locale?: string;
+    isHrefExternal?: boolean;
+    onClick?: () => void;
+    className?: string;
+    'data-testid'?: string;
+}
+declare const StandaloneLink: import('react').ForwardRefExoticComponent<StandaloneLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export type { StandaloneLinkSize, StandaloneLinkColor, StandaloneLinkIconPosition, StandaloneLinkProps, };
+export { STANDALONE_LINK_SIZES, STANDALONE_LINK_COLORS, STANDALONE_LINK_ICON_POSITIONS, StandaloneLink, };

package/dist/components/standalone-link/index.js

@@ -0,0 +1,54 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import I from "classnames";
+import { Interactive as L } from "../interactive/index.js";
+import { FlightIcon as f } from "../flight-icon/index.js";
+import a from "./styles.module.scss.js";
+const T = ["small", "medium", "large"], h = [
+  "primary",
+  "secondary",
+  "secondary-inverted"
+], k = ["leading", "trailing"], O = S(
+  ({
+    text: i,
+    size: m = "medium",
+    color: s = "primary",
+    icon: t,
+    iconPosition: r = "leading",
+    className: o,
+    "data-testid": l,
+    locale: d,
+    ...N
+  }, c) => {
+    const e = t && /* @__PURE__ */ n(f, { name: t, size: 16 });
+    return /* @__PURE__ */ p(
+      L,
+      {
+        ...N,
+        ref: c,
+        className: I(
+          a["standalone-link"],
+          a[`size-${m}`],
+          a[`color-${s}`],
+          a[`icon-position-${r}`],
+          o
+        ),
+        "data-testid": l,
+        locale: d,
+        children: [
+          e && r === "leading" && e,
+          /* @__PURE__ */ n("span", { className: a.text, children: i }),
+          e && r === "trailing" && e
+        ]
+      }
+    );
+  }
+);
+O.displayName = "StandaloneLink";
+export {
+  h as STANDALONE_LINK_COLORS,
+  k as STANDALONE_LINK_ICON_POSITIONS,
+  T as STANDALONE_LINK_SIZES,
+  O as StandaloneLink
+};
+//# sourceMappingURL=index.js.map

package/dist/components/standalone-link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/standalone-link/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport classNames from 'classnames'\nimport type { InteractiveProps } from '../interactive'\nimport { Interactive } from '../interactive'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.scss'\n\nconst STANDALONE_LINK_SIZES = ['small', 'medium', 'large'] as const\ntype StandaloneLinkSize = (typeof STANDALONE_LINK_SIZES)[number]\n\nconst STANDALONE_LINK_COLORS = [\n\t'primary',\n\t'secondary',\n\t'secondary-inverted',\n] as const\ntype StandaloneLinkColor = (typeof STANDALONE_LINK_COLORS)[number]\n\nconst STANDALONE_LINK_ICON_POSITIONS = ['leading', 'trailing'] as const\ntype StandaloneLinkIconPosition =\n\t(typeof STANDALONE_LINK_ICON_POSITIONS)[number]\n\ninterface StandaloneLinkProps extends Omit<InteractiveProps, 'color' | 'size'> {\n\ttext: string\n\tsize?: StandaloneLinkSize\n\tcolor?: StandaloneLinkColor\n\ticon?: string\n\ticonPosition?: StandaloneLinkIconPosition\n\thref?: string\n\tlocale?: string\n\tisHrefExternal?: boolean\n\tonClick?: () => void\n\tclassName?: string\n\t'data-testid'?: string\n}\n\nconst StandaloneLink = forwardRef<\n\tHTMLAnchorElement | HTMLButtonElement,\n\tStandaloneLinkProps\n>(\n\t(\n\t\t{\n\t\t\ttext,\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\tclassName,\n\t\t\t'data-testid': dataTestId,\n\t\t\tlocale,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst iconElement = icon && <FlightIcon name={icon} size={16} />\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['standalone-link'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\ts[`icon-position-${iconPosition}`],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tlocale={locale}\n\t\t\t>\n\t\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t\t<span className={s.text}>{text}</span>\n\t\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t\t</Interactive>\n\t\t)\n\t}\n)\n\nStandaloneLink.displayName = 'StandaloneLink'\n\nexport type {\n\tStandaloneLinkSize,\n\tStandaloneLinkColor,\n\tStandaloneLinkIconPosition,\n\tStandaloneLinkProps,\n}\nexport {\n\tSTANDALONE_LINK_SIZES,\n\tSTANDALONE_LINK_COLORS,\n\tSTANDALONE_LINK_ICON_POSITIONS,\n\tStandaloneLink,\n}\n"],"names":["STANDALONE_LINK_SIZES","STANDALONE_LINK_COLORS","STANDALONE_LINK_ICON_POSITIONS","StandaloneLink","forwardRef","text","size","color","icon","iconPosition","className","dataTestId","locale","props","ref","iconElement","jsx","FlightIcon","jsxs","Interactive","classNames","s"],"mappings":";;;;;;AAOA,MAAMA,IAAwB,CAAC,SAAS,UAAU,OAAO,GAGnDC,IAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAGMC,IAAiC,CAAC,WAAW,UAAU,GAkBvDC,IAAiBC;AAAA,EAItB,CACC;AAAA,IACC,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,eAAeC;AAAA,IACf,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAcP,KAAQ,gBAAAQ,EAACC,KAAW,MAAMT,GAAM,MAAM,IAAI;AAE9D,WACC,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,GAAGN;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWM;AAAA,UACVC,EAAE,iBAAiB;AAAA,UACnBA,EAAE,QAAQf,CAAI,EAAE;AAAA,UAChBe,EAAE,SAASd,CAAK,EAAE;AAAA,UAClBc,EAAE,iBAAiBZ,CAAY,EAAE;AAAA,UACjCC;AAAA,QAAA;AAAA,QAED,eAAaC;AAAA,QACb,QAAAC;AAAA,QAEC,UAAA;AAAA,UAAAG,KAAeN,MAAiB,aAAaM;AAAA,UAC9C,gBAAAC,EAAC,QAAA,EAAK,WAAWK,EAAE,MAAO,UAAAhB,GAAK;AAAA,UAC9BU,KAAeN,MAAiB,cAAcM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlD;AACD;AAEAZ,EAAe,cAAc;"}

package/dist/components/standalone-link/styles.module.scss

@@ -0,0 +1,166 @@
+@use 'styles/mixins/focus-ring' as *;
+
+$standalone-link-border-width: 1px;
+$standalone-link-focus-border-radius: 5px;
+
+// this is how much the focus is visually "shifted" from the bounding box of the
+// notice: you have to take in account also the inset shadow of the focus (see Figma file and also "focus-ring" mixin)
+$standalone-link-focus-shift: 4px;
+
+.standalone-link {
+	display: flex;
+	gap: 0.25rem;
+	align-items: center;
+	justify-content: center;
+	width: fit-content;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	font-weight: var(--mds-typography-font-weight-medium);
+	font-family: var(--mds-typography-font-stack-text);
+	background-color: transparent; // needs to exist for a11y
+	border: $standalone-link-border-width solid transparent; // needs to exist AND be transparent for a11y
+	// notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
+	text-decoration-color: transparent;
+	cursor: pointer;
+
+	// the position absolute of an element is computed from the inside of the border of the container
+	// so we have to take in account the border width of the pseudo-element container itself
+	$shift: $standalone-link-focus-shift + $standalone-link-border-width;
+	// for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
+	$shift-extra: $shift + 2px;
+
+	// notice: this is used not only for the focus, but also to increase the clickable area
+	@include hds-focus-ring-with-pseudo-element(
+		$right: -$shift,
+		$left: -$shift,
+		$radius: $standalone-link-focus-border-radius
+	);
+
+	// we need to override a couple of values for better visual alignment
+	&.icon-position-leading::before {
+		right: -$shift-extra;
+	}
+
+	&.icon-position-trailing::before {
+		left: -$shift-extra;
+	}
+
+	& svg {
+		transition: color 0.15s ease-in;
+	}
+}
+
+.text {
+	flex: 1 0 0;
+	text-decoration: underline;
+	text-decoration-color: transparent;
+	transition: text-decoration-color 0.15s ease-in, color 0.15s ease-in;
+}
+
+.size-small {
+	& .text {
+		font-size: var(--mds-typography-body-100-font-size);
+		line-height: var(--mds-typography-body-100-line-height);
+	}
+}
+
+.size-medium {
+	& .text {
+		font-size: var(--mds-typography-body-200-font-size);
+		line-height: var(--mds-typography-body-200-line-height);
+	}
+}
+
+.size-large {
+	& .text {
+		font-size: var(--mds-typography-body-300-font-size);
+		line-height: var(--mds-typography-body-300-line-height);
+	}
+}
+
+.color-primary {
+	color: var(--mds-color-foreground-action);
+
+	&:hover {
+		color: var(--mds-color-foreground-action-hover);
+
+		.text {
+			text-decoration-color: #4e81e8; // custom color by design
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-action-active);
+
+		.text {
+			text-decoration-color: #396ed6; // custom color by design
+		}
+
+		&::before {
+			background-color: var(--mds-color-surface-action);
+		}
+	}
+}
+
+.color-secondary {
+	color: var(--mds-color-foreground-strong);
+
+	&:hover {
+		.text {
+			text-decoration-color: #4d4d4f; // custom color by design
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-primary);
+
+		.text {
+			text-decoration-color: #6e7075; // custom color by design
+		}
+
+		&::before {
+			background-color: var(--mds-color-surface-interactive-active);
+		}
+	}
+}
+
+:global(.mds-dark-mode),
+:global([data-theme='dark']) {
+	& .color-secondary {
+		&:hover {
+			.text {
+				text-decoration-color: var(--mds-color-foreground-strong);
+			}
+		}
+
+		&:active {
+			.text {
+				text-decoration-color: var(--mds-color-foreground-strong);
+			}
+		}
+	}
+}
+
+.color-secondary-inverted {
+	color: var(--mds-color-palette-neutral-50);
+
+	&:hover {
+		color: var(--mds-color-palette-neutral-300);
+
+		.text {
+			text-decoration-color: var(--mds-color-palette-neutral-300);
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-palette-neutral-300);
+
+		.text {
+			text-decoration-color: var(--mds-color-palette-neutral-300);
+		}
+
+		&::before {
+			background-color: var(--mds-color-palette-neutral-600);
+		}
+	}
+}

package/dist/components/standalone-link/styles.module.scss.js

@@ -0,0 +1,17 @@
+const o = "text__2B7Ih", i = {
+  "standalone-link": "standalone-link__85Pyl",
+  "icon-position-leading": "icon-position-leading__KE5kn",
+  "icon-position-trailing": "icon-position-trailing__Mygyz",
+  text: o,
+  "size-small": "size-small__pf7gu",
+  "size-medium": "size-medium__r6Rbi",
+  "size-large": "size-large__aue6M",
+  "color-primary": "color-primary__7WaoM",
+  "color-secondary": "color-secondary__4qYkh",
+  "color-secondary-inverted": "color-secondary-inverted__ILbsj"
+};
+export {
+  i as default,
+  o as text
+};
+//# sourceMappingURL=styles.module.scss.js.map

package/dist/components/standalone-link/styles.module.scss.js.map

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

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

@@ -0,0 +1,58 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Density, VerticalAlignment } from './utils';
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /**
+     * Define on the table invocation. If set to `true`, even-numbered rows will have a different background color from odd-numbered rows.
+     */
+    isStriped?: boolean;
+    /**
+     * If set to `true`, the `table-display`(CSS) property will be set to fixed. See [MDN reference on table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) for more details.
+     */
+    isFixedLayout?: boolean;
+    /**
+     * If set, determines the density (height) of the table body’s rows.
+     */
+    density?: Density;
+    /**
+     * Determines the vertical alignment for content in a table. Does not apply to table headers (`th`). See [MDN reference on vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more details.
+     */
+    valign?: VerticalAlignment;
+    /**
+     * Adds a (non-visible) caption for users with assistive technology. If set on a sortable table, the provided table caption is paired with the automatically generated sorted message text.
+     */
+    caption?: string;
+}
+declare function Root({ caption, density, valign, isStriped, isFixedLayout, children, className, ...rest }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+declare function THead({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace THead {
+    var displayName: string;
+}
+declare function TBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace TBody {
+    var displayName: string;
+}
+declare const Table: {
+    Root: typeof Root;
+    TR: {
+        ({ children, className, ...rest }: import('./tr').TRProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    THead: typeof THead;
+    TH: {
+        ({ align, width, scope, tooltip, isVisuallyHidden, children, className, ...rest }: import('./th').THProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    TBody: typeof TBody;
+    TD: {
+        ({ align, children, className, ...rest }: import('./td').TDProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Table };

package/dist/components/table/index.js

@@ -0,0 +1,52 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import f from "classnames";
+import { TD as N } from "./td.js";
+import { TH as y } from "./th.js";
+import { TR as u } from "./tr.js";
+import { DEFAULT_DENSITY as b, DEFAULT_VERTICAL_ALIGNMENT as E } from "./utils.js";
+import o from "./table.module.scss.js";
+function r({
+  caption: a,
+  density: s = b,
+  valign: i = E,
+  isStriped: l,
+  isFixedLayout: d,
+  children: n,
+  className: T,
+  ...p
+}) {
+  return /* @__PURE__ */ c(
+    "table",
+    {
+      className: f(
+        o.table,
+        o[`density-${s}`],
+        o[`valign-${i}`],
+        {
+          [o.striped]: l,
+          [o["layout-fixed"]]: d
+        },
+        T
+      ),
+      ...p,
+      children: [
+        a && /* @__PURE__ */ e("caption", { className: "sr-only", children: a }),
+        n
+      ]
+    }
+  );
+}
+r.displayName = "Table";
+function t({ children: a }) {
+  return /* @__PURE__ */ e("thead", { className: o.thead, children: a });
+}
+t.displayName = "T.Head";
+function m({ children: a }) {
+  return /* @__PURE__ */ e("tbody", { className: o.tbody, children: a });
+}
+m.displayName = "T.Body";
+const R = { Root: r, TR: u, THead: t, TH: y, TBody: m, TD: N };
+export {
+  R as Table
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { TD } from './td'\nimport { TH } from './th'\nimport { TR } from './tr'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport {\n\tDEFAULT_DENSITY,\n\tDEFAULT_VERTICAL_ALIGNMENT,\n\ttype Density,\n\ttype VerticalAlignment,\n} from './utils'\nimport s from './table.module.scss'\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n\t/**\n\t * Define on the table invocation. If set to `true`, even-numbered rows will have a different background color from odd-numbered rows.\n\t */\n\tisStriped?: boolean\n\t/**\n\t * If set to `true`, the `table-display`(CSS) property will be set to fixed. See [MDN reference on table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) for more details.\n\t */\n\tisFixedLayout?: boolean\n\t/**\n\t * If set, determines the density (height) of the table body’s rows.\n\t */\n\tdensity?: Density\n\t/**\n\t * Determines the vertical alignment for content in a table. Does not apply to table headers (`th`). See [MDN reference on vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more details.\n\t */\n\tvalign?: VerticalAlignment\n\t/**\n\t * Adds a (non-visible) caption for users with assistive technology. If set on a sortable table, the provided table caption is paired with the automatically generated sorted message text.\n\t */\n\tcaption?: string\n}\n\nfunction Root({\n\tcaption,\n\tdensity = DEFAULT_DENSITY,\n\tvalign = DEFAULT_VERTICAL_ALIGNMENT,\n\tisStriped,\n\tisFixedLayout,\n\tchildren,\n\tclassName,\n\t...rest\n}: TableProps) {\n\treturn (\n\t\t<table\n\t\t\tclassName={classNames(\n\t\t\t\ts.table,\n\t\t\t\ts[`density-${density}`],\n\t\t\t\ts[`valign-${valign}`],\n\t\t\t\t{\n\t\t\t\t\t[s.striped]: isStriped,\n\t\t\t\t\t[s['layout-fixed']]: isFixedLayout,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{caption && <caption className=\"sr-only\">{caption}</caption>}\n\t\t\t{children}\n\t\t</table>\n\t)\n}\nRoot.displayName = 'Table'\n\nfunction THead({ children }: { children: ReactNode }) {\n\treturn <thead className={s.thead}>{children}</thead>\n}\nTHead.displayName = 'T.Head'\n\nfunction TBody({ children }: { children: ReactNode }) {\n\treturn <tbody className={s.tbody}>{children}</tbody>\n}\nTBody.displayName = 'T.Body'\n\nconst Table = { Root, TR, THead, TH, TBody, TD }\n\nexport { Table }\n"],"names":["Root","caption","density","DEFAULT_DENSITY","valign","DEFAULT_VERTICAL_ALIGNMENT","isStriped","isFixedLayout","children","className","rest","jsxs","classNames","s","jsx","THead","TBody","Table","TR","TH","TD"],"mappings":";;;;;;;AAoCA,SAASA,EAAK;AAAA,EACb,SAAAC;AAAA,EACA,SAAAC,IAAUC;AAAA,EACV,QAAAC,IAASC;AAAA,EACT,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAe;AACd,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACVC,EAAE;AAAA,QACFA,EAAE,WAAWX,CAAO,EAAE;AAAA,QACtBW,EAAE,UAAUT,CAAM,EAAE;AAAA,QACpB;AAAA,UACC,CAACS,EAAE,OAAO,GAAGP;AAAA,UACb,CAACO,EAAE,cAAc,CAAC,GAAGN;AAAA,QAAA;AAAA,QAEtBE;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAT,KAAW,gBAAAa,EAAC,WAAA,EAAQ,WAAU,WAAW,UAAAb,GAAQ;AAAA,QACjDO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AACAR,EAAK,cAAc;AAEnB,SAASe,EAAM,EAAE,UAAAP,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAO,EAAM,cAAc;AAEpB,SAASC,EAAM,EAAE,UAAAR,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAQ,EAAM,cAAc;AAEpB,MAAMC,IAAQ,EAAE,MAAAjB,GAAM,IAAAkB,GAAI,OAAAH,GAAO,IAAAI,GAAI,OAAAH,GAAO,IAAAI,EAAA;"}