@sps-woodland/matrix 8.18.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/matrix](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/matrix#readme)
+
+SPS Woodland Design System Matrix component

package/lib/Matrix.css.d.ts

@@ -0,0 +1,4 @@
+export declare const matrix: string;
+export declare const matrixHeader: string;
+export declare const matrixCell: string;
+export declare const matrixHeaderIcon: string;

package/lib/Matrix.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function Matrix({ title, children, "data-testid": testId, ...rest }: ComponentProps<{
+    title?: string;
+}, HTMLTableElement>): React.ReactElement;

package/lib/Matrix.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const MatrixExamples: ComponentManifestEntry;

package/lib/MatrixBody.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function MatrixBody({ children, "data-testid": testId, ...rest }: ComponentProps<React.HTMLAttributes<HTMLTableSectionElement>>): React.ReactElement;

package/lib/MatrixCell.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function MatrixCell({ className, children, "data-testid": testId, ...rest }: ComponentProps<React.HTMLAttributes<HTMLTableCellElement>>): React.ReactElement;

package/lib/MatrixHead.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function MatrixHead({ children, "data-testid": testId, ...rest }: ComponentProps<React.HTMLAttributes<HTMLTableSectionElement>>): React.ReactElement;

package/lib/MatrixHeader.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { SpsTooltip } from "@spscommerce/ds-react";
+import { ComponentProps, Icon } from "@sps-woodland/core";
+export declare function MatrixHeader({ icon, tooltip, width, className, children, "data-testid": testId, ...rest }: ComponentProps<{
+    width?: string;
+    icon?: typeof Icon;
+    tooltip?: typeof SpsTooltip;
+}, HTMLTableCellElement>): React.ReactElement;

package/lib/MatrixRow.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function MatrixRow({ children, "data-testid": testId, ...rest }: ComponentProps<React.HTMLAttributes<HTMLTableRowElement>>): React.ReactElement;

package/lib/index.cjs.js

@@ -0,0 +1,261 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),l=require("@sps-woodland/core"),o=require("@spscommerce/utils");function g(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(i,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return i.default=t,Object.freeze(i)}const e=g(a);var m="_67ajyb0",s="_67ajyb2",w="_67ajyb1",y="_67ajyb3";function d({title:t,children:i,"data-testid":r,...n}){return a.createElement("div",{className:l.cl(m),"data-testid":"matrix"},a.createElement(l.Title,{size:"lg"},t),a.createElement("table",{className:l.cl(m),"data-testid":`${r}`,...n},i))}l.Metadata.set(d,{name:"Matrix",props:{title:"string"}});function u({children:t,"data-testid":i,...r}){return a.createElement(a.Fragment,null,a.createElement("thead",{"data-testid":`${i}`,...r},t))}l.Metadata.set(u,{name:"Matrix Head"});function c({icon:t,tooltip:i,width:r,className:n,children:f,"data-testid":b,...p}){return a.createElement(a.Fragment,null,a.createElement("th",{className:l.cl(w),style:{width:`${r}`},"data-testid":`${b}`,...p},f,a.createElement("div",{className:l.cl(y)},t,i)))}l.Metadata.set(c,{name:"Matrix Header",props:{icon:"Icon",tooltip:"SpsTooltip",width:"string"}});function x({children:t,"data-testid":i,...r}){return a.createElement(a.Fragment,null,a.createElement("tbody",{"data-testid":`${i}`,...r},t))}l.Metadata.set(x,{name:"Matrix Body"});function h({children:t,"data-testid":i,...r}){return a.createElement(a.Fragment,null,a.createElement("tr",{"data-testid":`${i}`,...r},t))}l.Metadata.set(h,{name:"Matrix Row"});function M({className:t,children:i,"data-testid":r,...n}){return i!==void 0?i===null?a.createElement("td",{className:l.cl(s),"data-testid":`${r}`,...n},"null"):a.createElement("td",{className:l.cl(s),"data-testid":`${r}`,...n},i):a.createElement("td",{className:l.cl(s),"data-testid":`${r}`,...n},"—")}l.Metadata.set(M,{name:"Matrix Cell"});const H={components:[d,c],description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ",e.createElement(t,{to:"tables"},"Table")," or ",e.createElement(t,{to:"description-lists"},"Description List")," for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),examples:{general:{label:"General Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."),e.createElement("h5",null," When to Use "),e.createElement("ul",null,e.createElement("li",null," If the data set requires an identifier on both the X-axis and a Y-axis. "),e.createElement("li",null," If the data set requires six (6) or fewer columns (including the header column). "),e.createElement("li",null," If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")),e.createElement("h5",null," When Not to Use "),e.createElement("ul",null,e.createElement("li",null," If form elements are required, consider a ",e.createElement(t,{to:"tables"},"Table")," or ",e.createElement(t,{to:"description-lists"},"Description List"),". "),e.createElement("li",null," If the data set requires more than six (6) columns (including the header column), use a ",e.createElement(t,{to:"tables"},"Table")," instead. "),e.createElement("li",null," If the data needs to be searchable, filterable or sortable, use a ",e.createElement(t,{to:"tables"},"Table")," instead. ")),e.createElement("h5",null," Avoid Over-Crowding "),e.createElement("p",null," Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),examples:{general:{react:o.code`
+            import { 
+              Matrix,
+              MatrixHead,
+              MatrixHeader,
+              MatrixRow,
+              MatrixCell,
+            } from "@sps-woodland/matrix";
+
+            function Component() {
+              return(
+                <Matrix>
+                  <MatrixHead>
+                    <MatrixRow>
+                      <MatrixHeader></MatrixHeader>
+                      <MatrixHeader>1/3 Width or smaller</MatrixHeader>
+                      <MatrixHeader>1/2 Width</MatrixHeader>
+                      <MatrixHeader>2/3 Width</MatrixHeader>
+                      <MatrixHeader>3/4 Width</MatrixHeader>
+                      <MatrixHeader>Full Width</MatrixHeader>
+                    </MatrixRow>
+                  </MatrixHead>
+                  <MatrixBody>
+                    <MatrixRow>
+                      <MatrixHeader>Maximum Columns</MatrixHeader>
+                      <MatrixCell>2</MatrixCell>
+                      <MatrixCell>3</MatrixCell>
+                      <MatrixCell>4</MatrixCell>
+                      <MatrixCell>5</MatrixCell>
+                      <MatrixCell>6</MatrixCell>
+                    </MatrixRow>
+                  </MatrixBody>
+                </Matrix>
+              )
+            }
+          `}}},basic:{label:"Basic Matrix",description:e.createElement(e.Fragment,null,e.createElement("h5",null,"Matrix Characteristics"),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "),e.createElement("li",null," A header “column” along the left-most vertical axis (Y-axis). "),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "))),e.createElement("h5",null,"Matrix Rules"),e.createElement("ul",null,e.createElement("li",null," Non-header cells can contain any type of content. "),e.createElement("li",null," Text and content should remain left-aligned. "),e.createElement("li",null," Column widths are evenly divided amongst the horizontal space. "),e.createElement("li",null," A title describing the contents of the matrix is suggested but not required. "),e.createElement("ul",null,e.createElement("li",null,e.createElement("i",null,"Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),examples:{basic:{react:o.code`
+          import { 
+            Matrix,
+            MatrixHead,
+            MatrixHeader,
+            MatrixRow,
+            MatrixCell,
+          } from "@sps-woodland/matrix";
+          import { Tag } from "@sps-woodland/tags";
+          import { Icon } from "@sps-woodland/core";
+          import { SpsTooltip } from "@spscommerce/ds-react";
+
+          function Component() {
+            const columnHeaders = ["", "Affiliation", "Lightsaber Color"];
+            const lightsaberUsers = [
+              {
+                user: "Ahsoka Tano",
+                affiliation: "Unaffiliated",
+                lightsaberColor: "white",
+                numberOfLightsabers: 2,
+              },
+              {
+                user: "Anakin Skywalker",
+                affiliation: "Jedi",
+                lightsaberColor: "blue",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Darth Sidious",
+                affiliation: "Sith",
+                lightsaberColor: "red",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Darth Tyranus",
+                affiliation: "Sith",
+                lightsaberColor: "red",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Mace Windu",
+                affiliation: "Jedi",
+                lightsaberColor: "purple",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Maul",
+                affiliation: "Crimson Dawn",
+                lightsaberColor: "red",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Obi-Wan Kenobi",
+                affiliation: "Jedi",
+                lightsaberColor: "blue",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Yoda",
+                affiliation: "Jedi",
+                lightsaberColor: "green",
+                numberOfLightsabers: 1,
+              },
+            ];
+
+            function darkSideIcon(index) {
+              return <Icon id={\`darkSide\${index}\`} className="red200" size="sm" icon="status-error"/>;
+            }
+            
+            function darkSideTooltip(index) {
+              return <SpsTooltip for={\`darkSide\${index}\`}> The Dark Side </SpsTooltip>;
+            }
+            
+            function lightsaberFormatter(color, number) {
+              switch (color) {
+                case "white": return <Tag className="mr-1 mb-1">White</Tag>;
+                case "red": return <Tag className="mr-1 mb-1" kind="error">Red</Tag>;
+                case "purple": return <Tag className="mr-1 mb-1" kind="pending">Purple</Tag>;
+                case "green": return <Tag className="mr-1 mb-1" kind="success">Green</Tag>;
+                case "blue": return <Tag className="mr-1 mb-1" kind="info">Blue</Tag>;
+              }
+            }
+
+            return(
+              <Matrix
+                title="Lightsaber Users"
+              >
+                <MatrixHead>
+                  <MatrixRow>
+                    { columnHeaders.map((object, index) => <MatrixHeader key={index}>{object}</MatrixHeader>) }
+                  </MatrixRow>
+                </MatrixHead>
+                <MatrixBody>
+                    {
+                      lightsaberUsers.map((object, index) => {
+                        return (
+                          <MatrixRow key={index}>
+                            {(object.affiliation === "Sith" || object.affiliation === "Crimson Dawn" ? 
+                              <MatrixHeader icon={darkSideIcon(index)} tooltip={darkSideTooltip(index)}> {object.user} </MatrixHeader> :
+                            <MatrixHeader> {object.user} </MatrixHeader>)}
+                            <MatrixCell> {object.affiliation} </MatrixCell>
+                            <MatrixCell> 
+                              {lightsaberFormatter(object.lightsaberColor)}
+                              {(object.numberOfLightsabers > 1 ? \`x\${object.numberOfLightsabers}\` : "")}
+                            </MatrixCell>
+                          </MatrixRow>
+                        );
+                      })
+                    }
+                </MatrixBody>
+              </Matrix>
+            );
+          }
+        `}}},variations:{label:"Matrix Variations",examples:{customColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Customizable Column Widths "),e.createElement("p",null,"Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),react:o.code`
+            import { 
+              Matrix,
+              MatrixHead,
+              MatrixHeader,
+              MatrixRow,
+              MatrixCell,
+            } from "@sps-woodland/matrix";
+
+            function Component() {
+              const columnHeaders = ["", "Year", "Synopsis"];
+              const movies = [
+                {
+                  title: "A New Hope",
+                  year: 1977,
+                  synopsis: "Princess Leia is captured and held hostage by the evil Imperial forces in their effort to take over the galactic Empire. Venturesome Luke Skywalker and dashing captain Han Solo team together with the loveable robot duo R2-D2 and C-3PO to rescue the beautiful princess and restore peace and justice in the Empire."
+                },
+                {
+                  title: "The Empire Strikes Back",
+                  year: 1980,
+                  synopsis: "The epic saga continues as Luke Skywalker, in hopes of defeating the evil Galactic Empire, learns the ways of the Jedi from aging master Yoda. But Darth Vader is more determined than ever to capture Luke. Meanwhile, rebel leader Princess Leia, cocky Han Solo, Chewbacca, and droids C-3PO and R2-D2 are thrown into various stages of capture, betrayal and despair."
+                },
+                {
+                  title: "Return of the Jedi",
+                  year: 1983,
+                  synopsis: "Luke Skywalker leads a mission to rescue his friend Han Solo from the clutches of Jabba the Hutt, while the Emperor seeks to destroy the Rebellion once and for all with a second dreaded Death Star."
+                }
+              ];
+
+              return(
+                <Matrix
+                  title="Star Wars: Original Trilogy"
+                >
+                  <MatrixHead>
+                    <MatrixRow>
+                      <MatrixHeader> {columnHeaders[0]} </MatrixHeader>
+                      <MatrixHeader width={"6%"}> {columnHeaders[1]} </MatrixHeader>
+                      <MatrixHeader width={"70%"}> {columnHeaders[2]} </MatrixHeader>
+                    </MatrixRow>
+                  </MatrixHead>
+                  <MatrixBody>
+                      {
+                        movies.map((object, index) => {
+                          return (
+                            <MatrixRow>
+                              <MatrixHeader> {object.title} </MatrixHeader>
+                              <MatrixCell> {object.year} </MatrixCell>
+                              <MatrixCell> {object.synopsis} </MatrixCell>
+                            </MatrixRow>
+                          );
+                        })
+                      }
+                  </MatrixBody>
+                </Matrix>
+              );
+            }
+          `},omitHeaderColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Optional Left-hand Header Column "),e.createElement("p",null,"The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),react:o.code`
+            import { 
+              Matrix,
+              MatrixHead,
+              MatrixHeader,
+              MatrixRow,
+              MatrixCell,
+            } from "@sps-woodland/matrix";
+
+            function Component() {
+              const columnHeaders = ["Title", "Year", "Synopsis"];
+              const movies = [
+                {
+                  title: "The Force Awakens",
+                  year: 2015,
+                  synopsis: "Thirty years after defeating the Galactic Empire, Han Solo and his allies face a new threat from the evil Kylo Ren and his army of Stormtroopers."
+                },
+                {
+                  title: "The Last Jedi",
+                  year: 2017,
+                  synopsis: "Rey develops her newly discovered abilities with the guidance of Luke Skywalker, who is unsettled by the strength of her powers. Meanwhile, the Resistance prepares to do battle with the First Order."
+                },
+                {
+                  title: "The Rise of Skywalker",
+                  year: 2019,
+                  synopsis: "The surviving Resistance faces the First Order once again as the journey of Rey, Finn and Poe Dameron continues. With the power and knowledge of generations behind them, the final battle begins."
+                }
+              ];
+
+              return(
+                <Matrix
+                  title="Star Wars: Sequel Trilogy"
+                >
+                  <MatrixHead>
+                    <MatrixRow>
+                      <MatrixHeader> {columnHeaders[0]} </MatrixHeader>
+                      <MatrixHeader width={"6%"}> {columnHeaders[1]} </MatrixHeader>
+                      <MatrixHeader width={"70%"}> {columnHeaders[2]} </MatrixHeader>
+                    </MatrixRow>
+                  </MatrixHead>
+                  <MatrixBody>
+                      {
+                        movies.map((object, index) => {
+                          return (
+                            <MatrixRow>
+                              <MatrixCell> {object.title} </MatrixCell>
+                              <MatrixCell> {object.year} </MatrixCell>
+                              <MatrixCell> {object.synopsis} </MatrixCell>
+                            </MatrixRow>
+                          );
+                        })
+                      }
+                  </MatrixBody>
+                </Matrix>
+              );
+            }
+          `}}}}},E={Matrix:H};exports.MANIFEST=E;exports.Matrix=d;exports.MatrixBody=x;exports.MatrixCell=M;exports.MatrixHead=u;exports.MatrixHeader=c;exports.MatrixRow=h;

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./Matrix";
+export * from "./MatrixHead";
+export * from "./MatrixHeader";
+export * from "./MatrixBody";
+export * from "./MatrixRow";
+export * from "./MatrixCell";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,395 @@
+import * as e from "react";
+import t from "react";
+import { Metadata as o, cl as l, Title as f } from "@sps-woodland/core";
+import { code as s } from "@spscommerce/utils";
+var c = "_67ajyb0", d = "_67ajyb2", p = "_67ajyb1", b = "_67ajyb3";
+function m({
+  title: a,
+  children: r,
+  "data-testid": i,
+  ...n
+}) {
+  return /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: l(c),
+      "data-testid": "matrix"
+    },
+    /* @__PURE__ */ t.createElement(f, { size: "lg" }, a),
+    /* @__PURE__ */ t.createElement("table", { className: l(c), "data-testid": `${i}`, ...n }, r)
+  );
+}
+o.set(m, {
+  name: "Matrix",
+  props: {
+    title: "string"
+  }
+});
+function g({
+  children: a,
+  "data-testid": r,
+  ...i
+}) {
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("thead", { "data-testid": `${r}`, ...i }, a));
+}
+o.set(g, {
+  name: "Matrix Head"
+});
+function u({
+  icon: a,
+  tooltip: r,
+  width: i,
+  className: n,
+  children: x,
+  "data-testid": h,
+  ...M
+}) {
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("th", { className: l(p), style: { width: `${i}` }, "data-testid": `${h}`, ...M }, x, /* @__PURE__ */ t.createElement("div", { className: l(b) }, a, r)));
+}
+o.set(u, {
+  name: "Matrix Header",
+  props: {
+    icon: "Icon",
+    tooltip: "SpsTooltip",
+    width: "string"
+  }
+});
+function w({
+  children: a,
+  "data-testid": r,
+  ...i
+}) {
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("tbody", { "data-testid": `${r}`, ...i }, a));
+}
+o.set(w, {
+  name: "Matrix Body"
+});
+function H({
+  children: a,
+  "data-testid": r,
+  ...i
+}) {
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("tr", { "data-testid": `${r}`, ...i }, a));
+}
+o.set(H, {
+  name: "Matrix Row"
+});
+function y({
+  className: a,
+  children: r,
+  "data-testid": i,
+  ...n
+}) {
+  return r !== void 0 ? r === null ? /* @__PURE__ */ t.createElement("td", { className: l(d), "data-testid": `${i}`, ...n }, "null") : /* @__PURE__ */ t.createElement("td", { className: l(d), "data-testid": `${i}`, ...n }, r) : /* @__PURE__ */ t.createElement("td", { className: l(d), "data-testid": `${i}`, ...n }, "—");
+}
+o.set(y, {
+  name: "Matrix Cell"
+});
+const E = {
+  components: [m, u],
+  description: ({ NavigateTo: a }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ", /* @__PURE__ */ e.createElement(a, { to: "tables" }, "Table"), " or ", /* @__PURE__ */ e.createElement(a, { to: "description-lists" }, "Description List"), " for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),
+  examples: {
+    general: {
+      label: "General Usage",
+      description: ({ NavigateTo: a }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."), /* @__PURE__ */ e.createElement("h5", null, " When to Use "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " If the data set requires an identifier on both the X-axis and a Y-axis. "), /* @__PURE__ */ e.createElement("li", null, " If the data set requires six (6) or fewer columns (including the header column). "), /* @__PURE__ */ e.createElement("li", null, " If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")), /* @__PURE__ */ e.createElement("h5", null, " When Not to Use "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " If form elements are required, consider a ", /* @__PURE__ */ e.createElement(a, { to: "tables" }, "Table"), " or ", /* @__PURE__ */ e.createElement(a, { to: "description-lists" }, "Description List"), ". "), /* @__PURE__ */ e.createElement("li", null, " If the data set requires more than six (6) columns (including the header column), use a ", /* @__PURE__ */ e.createElement(a, { to: "tables" }, "Table"), " instead. "), /* @__PURE__ */ e.createElement("li", null, " If the data needs to be searchable, filterable or sortable, use a ", /* @__PURE__ */ e.createElement(a, { to: "tables" }, "Table"), " instead. ")), /* @__PURE__ */ e.createElement("h5", null, " Avoid Over-Crowding "), /* @__PURE__ */ e.createElement("p", null, " Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),
+      examples: {
+        general: {
+          react: s`
+            import { 
+              Matrix,
+              MatrixHead,
+              MatrixHeader,
+              MatrixRow,
+              MatrixCell,
+            } from "@sps-woodland/matrix";
+
+            function Component() {
+              return(
+                <Matrix>
+                  <MatrixHead>
+                    <MatrixRow>
+                      <MatrixHeader></MatrixHeader>
+                      <MatrixHeader>1/3 Width or smaller</MatrixHeader>
+                      <MatrixHeader>1/2 Width</MatrixHeader>
+                      <MatrixHeader>2/3 Width</MatrixHeader>
+                      <MatrixHeader>3/4 Width</MatrixHeader>
+                      <MatrixHeader>Full Width</MatrixHeader>
+                    </MatrixRow>
+                  </MatrixHead>
+                  <MatrixBody>
+                    <MatrixRow>
+                      <MatrixHeader>Maximum Columns</MatrixHeader>
+                      <MatrixCell>2</MatrixCell>
+                      <MatrixCell>3</MatrixCell>
+                      <MatrixCell>4</MatrixCell>
+                      <MatrixCell>5</MatrixCell>
+                      <MatrixCell>6</MatrixCell>
+                    </MatrixRow>
+                  </MatrixBody>
+                </Matrix>
+              )
+            }
+          `
+        }
+      }
+    },
+    basic: {
+      label: "Basic Matrix",
+      description: /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Matrix Characteristics"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " A header row across the top horizontal axis (X-axis). "), /* @__PURE__ */ e.createElement("li", null, " A header “column” along the left-most vertical axis (Y-axis). "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " A header row across the top horizontal axis (X-axis). "))), /* @__PURE__ */ e.createElement("h5", null, "Matrix Rules"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " Non-header cells can contain any type of content. "), /* @__PURE__ */ e.createElement("li", null, " Text and content should remain left-aligned. "), /* @__PURE__ */ e.createElement("li", null, " Column widths are evenly divided amongst the horizontal space. "), /* @__PURE__ */ e.createElement("li", null, " A title describing the contents of the matrix is suggested but not required. "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, /* @__PURE__ */ e.createElement("i", null, "Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),
+      examples: {
+        basic: {
+          react: s`
+          import { 
+            Matrix,
+            MatrixHead,
+            MatrixHeader,
+            MatrixRow,
+            MatrixCell,
+          } from "@sps-woodland/matrix";
+          import { Tag } from "@sps-woodland/tags";
+          import { Icon } from "@sps-woodland/core";
+          import { SpsTooltip } from "@spscommerce/ds-react";
+
+          function Component() {
+            const columnHeaders = ["", "Affiliation", "Lightsaber Color"];
+            const lightsaberUsers = [
+              {
+                user: "Ahsoka Tano",
+                affiliation: "Unaffiliated",
+                lightsaberColor: "white",
+                numberOfLightsabers: 2,
+              },
+              {
+                user: "Anakin Skywalker",
+                affiliation: "Jedi",
+                lightsaberColor: "blue",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Darth Sidious",
+                affiliation: "Sith",
+                lightsaberColor: "red",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Darth Tyranus",
+                affiliation: "Sith",
+                lightsaberColor: "red",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Mace Windu",
+                affiliation: "Jedi",
+                lightsaberColor: "purple",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Maul",
+                affiliation: "Crimson Dawn",
+                lightsaberColor: "red",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Obi-Wan Kenobi",
+                affiliation: "Jedi",
+                lightsaberColor: "blue",
+                numberOfLightsabers: 1,
+              },
+              {
+                user: "Yoda",
+                affiliation: "Jedi",
+                lightsaberColor: "green",
+                numberOfLightsabers: 1,
+              },
+            ];
+
+            function darkSideIcon(index) {
+              return <Icon id={\`darkSide\${index}\`} className="red200" size="sm" icon="status-error"/>;
+            }
+            
+            function darkSideTooltip(index) {
+              return <SpsTooltip for={\`darkSide\${index}\`}> The Dark Side </SpsTooltip>;
+            }
+            
+            function lightsaberFormatter(color, number) {
+              switch (color) {
+                case "white": return <Tag className="mr-1 mb-1">White</Tag>;
+                case "red": return <Tag className="mr-1 mb-1" kind="error">Red</Tag>;
+                case "purple": return <Tag className="mr-1 mb-1" kind="pending">Purple</Tag>;
+                case "green": return <Tag className="mr-1 mb-1" kind="success">Green</Tag>;
+                case "blue": return <Tag className="mr-1 mb-1" kind="info">Blue</Tag>;
+              }
+            }
+
+            return(
+              <Matrix
+                title="Lightsaber Users"
+              >
+                <MatrixHead>
+                  <MatrixRow>
+                    { columnHeaders.map((object, index) => <MatrixHeader key={index}>{object}</MatrixHeader>) }
+                  </MatrixRow>
+                </MatrixHead>
+                <MatrixBody>
+                    {
+                      lightsaberUsers.map((object, index) => {
+                        return (
+                          <MatrixRow key={index}>
+                            {(object.affiliation === "Sith" || object.affiliation === "Crimson Dawn" ? 
+                              <MatrixHeader icon={darkSideIcon(index)} tooltip={darkSideTooltip(index)}> {object.user} </MatrixHeader> :
+                            <MatrixHeader> {object.user} </MatrixHeader>)}
+                            <MatrixCell> {object.affiliation} </MatrixCell>
+                            <MatrixCell> 
+                              {lightsaberFormatter(object.lightsaberColor)}
+                              {(object.numberOfLightsabers > 1 ? \`x\${object.numberOfLightsabers}\` : "")}
+                            </MatrixCell>
+                          </MatrixRow>
+                        );
+                      })
+                    }
+                </MatrixBody>
+              </Matrix>
+            );
+          }
+        `
+        }
+      }
+    },
+    variations: {
+      label: "Matrix Variations",
+      examples: {
+        customColumn: {
+          description: /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, " Customizable Column Widths "), /* @__PURE__ */ e.createElement("p", null, "Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),
+          react: s`
+            import { 
+              Matrix,
+              MatrixHead,
+              MatrixHeader,
+              MatrixRow,
+              MatrixCell,
+            } from "@sps-woodland/matrix";
+
+            function Component() {
+              const columnHeaders = ["", "Year", "Synopsis"];
+              const movies = [
+                {
+                  title: "A New Hope",
+                  year: 1977,
+                  synopsis: "Princess Leia is captured and held hostage by the evil Imperial forces in their effort to take over the galactic Empire. Venturesome Luke Skywalker and dashing captain Han Solo team together with the loveable robot duo R2-D2 and C-3PO to rescue the beautiful princess and restore peace and justice in the Empire."
+                },
+                {
+                  title: "The Empire Strikes Back",
+                  year: 1980,
+                  synopsis: "The epic saga continues as Luke Skywalker, in hopes of defeating the evil Galactic Empire, learns the ways of the Jedi from aging master Yoda. But Darth Vader is more determined than ever to capture Luke. Meanwhile, rebel leader Princess Leia, cocky Han Solo, Chewbacca, and droids C-3PO and R2-D2 are thrown into various stages of capture, betrayal and despair."
+                },
+                {
+                  title: "Return of the Jedi",
+                  year: 1983,
+                  synopsis: "Luke Skywalker leads a mission to rescue his friend Han Solo from the clutches of Jabba the Hutt, while the Emperor seeks to destroy the Rebellion once and for all with a second dreaded Death Star."
+                }
+              ];
+
+              return(
+                <Matrix
+                  title="Star Wars: Original Trilogy"
+                >
+                  <MatrixHead>
+                    <MatrixRow>
+                      <MatrixHeader> {columnHeaders[0]} </MatrixHeader>
+                      <MatrixHeader width={"6%"}> {columnHeaders[1]} </MatrixHeader>
+                      <MatrixHeader width={"70%"}> {columnHeaders[2]} </MatrixHeader>
+                    </MatrixRow>
+                  </MatrixHead>
+                  <MatrixBody>
+                      {
+                        movies.map((object, index) => {
+                          return (
+                            <MatrixRow>
+                              <MatrixHeader> {object.title} </MatrixHeader>
+                              <MatrixCell> {object.year} </MatrixCell>
+                              <MatrixCell> {object.synopsis} </MatrixCell>
+                            </MatrixRow>
+                          );
+                        })
+                      }
+                  </MatrixBody>
+                </Matrix>
+              );
+            }
+          `
+        },
+        omitHeaderColumn: {
+          description: /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, " Optional Left-hand Header Column "), /* @__PURE__ */ e.createElement("p", null, "The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),
+          react: s`
+            import { 
+              Matrix,
+              MatrixHead,
+              MatrixHeader,
+              MatrixRow,
+              MatrixCell,
+            } from "@sps-woodland/matrix";
+
+            function Component() {
+              const columnHeaders = ["Title", "Year", "Synopsis"];
+              const movies = [
+                {
+                  title: "The Force Awakens",
+                  year: 2015,
+                  synopsis: "Thirty years after defeating the Galactic Empire, Han Solo and his allies face a new threat from the evil Kylo Ren and his army of Stormtroopers."
+                },
+                {
+                  title: "The Last Jedi",
+                  year: 2017,
+                  synopsis: "Rey develops her newly discovered abilities with the guidance of Luke Skywalker, who is unsettled by the strength of her powers. Meanwhile, the Resistance prepares to do battle with the First Order."
+                },
+                {
+                  title: "The Rise of Skywalker",
+                  year: 2019,
+                  synopsis: "The surviving Resistance faces the First Order once again as the journey of Rey, Finn and Poe Dameron continues. With the power and knowledge of generations behind them, the final battle begins."
+                }
+              ];
+
+              return(
+                <Matrix
+                  title="Star Wars: Sequel Trilogy"
+                >
+                  <MatrixHead>
+                    <MatrixRow>
+                      <MatrixHeader> {columnHeaders[0]} </MatrixHeader>
+                      <MatrixHeader width={"6%"}> {columnHeaders[1]} </MatrixHeader>
+                      <MatrixHeader width={"70%"}> {columnHeaders[2]} </MatrixHeader>
+                    </MatrixRow>
+                  </MatrixHead>
+                  <MatrixBody>
+                      {
+                        movies.map((object, index) => {
+                          return (
+                            <MatrixRow>
+                              <MatrixCell> {object.title} </MatrixCell>
+                              <MatrixCell> {object.year} </MatrixCell>
+                              <MatrixCell> {object.synopsis} </MatrixCell>
+                            </MatrixRow>
+                          );
+                        })
+                      }
+                  </MatrixBody>
+                </Matrix>
+              );
+            }
+          `
+        }
+      }
+    }
+  }
+}, R = {
+  Matrix: E
+};
+export {
+  R as MANIFEST,
+  m as Matrix,
+  w as MatrixBody,
+  y as MatrixCell,
+  g as MatrixHead,
+  u as MatrixHeader,
+  H as MatrixRow
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+._67ajyb0{width:100%;flex-direction:column;word-wrap:break-word;table-layout:fixed;overflow:hidden;border-radius:.125rem;font-size:.875rem}._67ajyb1{background-color:#f3f4f4;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;padding:.5rem;vertical-align:top;line-height:1.25rem}._67ajyb2{border-style:solid;border-color:#d2d4d4;border-width:.0625rem;padding:.5rem;vertical-align:top}._67ajyb3{float:right}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@sps-woodland/matrix",
+  "description": "SPS Woodland Design System Matrix component",
+  "version": "8.18.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/matrix",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/matrix#readme",
+  "type": "module",
+  "module": "./lib/index.es.js",
+  "main": "./lib/index.cjs.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js",
+      "default": "./lib/index.cjs.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./lib/style.css": {
+      "import": "./lib/style.css",
+      "require": "./lib/style.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^7.0.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "@sps-woodland/core": "8.18.0",
+    "@sps-woodland/tokens": "8.18.0"
+  },
+  "devDependencies": {
+    "@react-stately/collections": "^3.6.0",
+    "@spscommerce/utils": "^7.0.0",
+    "@vanilla-extract/css": "^1.9.3",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "@sps-woodland/core": "8.18.0",
+    "@sps-woodland/tabs": "8.18.0",
+    "@sps-woodland/tokens": "8.18.0"
+  },
+  "dependencies": {
+    "@spscommerce/ds-react": "^8.16.1",
+    "@spscommerce/ds-shared": "^8.16.1"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.mjs"
+  }
+}

package/vite.config.mjs

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});