jvetrau-ds 0.2.33 → 0.2.35

package/components/index.cjs

@@ -31,6 +31,7 @@ var courseOutline = require('./course-outline/course-outline');
 var calendarMonth = require('./calendar-month');
 var flipList = require('./flip-list/flip-list');
 var avatarUpload = require('./avatar-upload/avatar-upload');
+var table = require('./table');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -64,6 +65,7 @@ var discussion__default = /*#__PURE__*/_interopDefault(discussion);
 var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
 var flipList__default = /*#__PURE__*/_interopDefault(flipList);
 var avatarUpload__default = /*#__PURE__*/_interopDefault(avatarUpload);
+var table__default = /*#__PURE__*/_interopDefault(table);
 
 
 
@@ -195,6 +197,10 @@ Object.defineProperty(exports, "AvatarUpload", {
   enumerable: true,
   get: function () { return avatarUpload__default.default; }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () { return table__default.default; }
+});
 Object.keys(calendarMonth).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/components/index.d.ts

@@ -60,3 +60,5 @@ export { default as FlipList } from './flip-list/flip-list';
 export type { FlipListItem, FlipListProps, } from './flip-list/flip-list';
 export { default as AvatarUpload } from './avatar-upload/avatar-upload';
 export type { AvatarUploadProps, } from './avatar-upload/avatar-upload';
+export { default as Table } from './table';
+export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './table';

package/components/index.js

@@ -29,5 +29,6 @@ export { default as CourseOutline } from './course-outline/course-outline';
 export * from './calendar-month';
 export { default as FlipList } from './flip-list/flip-list';
 export { default as AvatarUpload } from './avatar-upload/avatar-upload';
+export { default as Table } from './table';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/surface/surface.css

@@ -147,6 +147,24 @@
   /* motion */
 }
 
+.surface--secondary .progressbar {
+  /* color */
+  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
+  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
+  --progressbar-value-bg: var(--color-primary-1);
+  --progressbar-label-color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--tertiary {
   /* color */
   --surface-bg: var(--color-bg-container-tertiary);
@@ -181,12 +199,10 @@
   /* motion */
 }
 
-.surface--secondary .progressbar {
+.surface--tertiary .calendar-month {
   /* color */
-  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
-  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
-  --progressbar-value-bg: var(--color-primary-1);
-  --progressbar-label-color: var(--color-text-primary-1);
+  --calendar-month-marked-bg: var(--color-primary-1);
+  --calendar-month-marked-color: var(--color-text-primary-1);
 
   /* typography */
 

package/components/table/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var table = require('./table');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var table__default = /*#__PURE__*/_interopDefault(table);
+
+
+
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () { return table__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return table__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/table/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './table';
+export { default as Table } from './table';
+export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './table';

package/components/table/index.js

@@ -0,0 +1,3 @@
+export { default as Table, default } from './table';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/table/index.js.map

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

package/components/table/table.cjs

@@ -0,0 +1,139 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./table.css');
+var classnames = require('../helpers/classnames');
+
+const getFractionTotal = (columns) => columns.reduce((total, column) => {
+  if (column.width?.type !== "fraction" || column.width.value <= 0) {
+    return total;
+  }
+  return total + column.width.value;
+}, 0);
+const getFractionPercentage = (value, total) => Number(
+  (value / total * 100).toFixed(6)
+);
+const getColumnWidth = (width, fractionTotal) => {
+  if (!width || width.type === "auto") {
+    return void 0;
+  }
+  if (width.type === "min") {
+    return "1%";
+  }
+  if (width.type === "max") {
+    return "100%";
+  }
+  if (width.type === "fixed") {
+    return width.value;
+  }
+  if (width.value <= 0 || fractionTotal <= 0) {
+    return void 0;
+  }
+  return `${getFractionPercentage(
+    width.value,
+    fractionTotal
+  )}%`;
+};
+const TableBody = ({
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "table__body",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+const TableRow = ({
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "table__row",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+const TableCell = ({
+  className = "",
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "table__cell",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+const Table = ({
+  columns,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "table",
+    className,
+    {}
+  );
+  const fractionTotal = getFractionTotal(columns);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      className: classes,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          "col",
+          {
+            style: {
+              width: getColumnWidth(
+                column.width,
+                fractionTotal
+              )
+            }
+          },
+          column.id
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "table__head", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "table__row", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            className: "table__header",
+            scope: "col",
+            children: column.header
+          },
+          column.id
+        )) }) }),
+        children
+      ]
+    }
+  );
+};
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+var table_default = Table;
+
+module.exports = table_default;
+//# sourceMappingURL=table.cjs.map
+//# sourceMappingURL=table.cjs.map

package/components/table/table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"table.cjs","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n  | {\n      type: 'auto';\n    }\n  | {\n      type: 'max';\n    }\n  | {\n      type: 'fraction';\n      value: number;\n    }\n  | {\n      type: 'min';\n    }\n  | {\n      type: 'fixed';\n      value: string;\n    };\n\nexport interface TableColumn {\n  id: React.Key;\n  header: React.ReactNode;\n  width?: TableColumnWidth;\n}\n\nexport interface TableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n  extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {}\n\nconst getFractionTotal = (\n  columns: TableColumn[],\n) =>\n  columns.reduce((total, column) => {\n    if (\n      column.width?.type !== 'fraction' ||\n      column.width.value <= 0\n    ) {\n      return total;\n    }\n\n    return total + column.width.value;\n  }, 0);\n\nconst getFractionPercentage = (\n  value: number,\n  total: number,\n) =>\n  Number(\n    ((value / total) * 100).toFixed(6),\n  );\n\nconst getColumnWidth = (\n  width: TableColumnWidth | undefined,\n  fractionTotal: number,\n): React.CSSProperties['width'] => {\n  if (!width || width.type === 'auto') {\n    return undefined;\n  }\n\n  if (width.type === 'min') {\n    return '1%';\n  }\n\n  if (width.type === 'max') {\n    return '100%';\n  }\n\n  if (width.type === 'fixed') {\n    return width.value;\n  }\n\n  if (\n    width.value <= 0 ||\n    fractionTotal <= 0\n  ) {\n    return undefined;\n  }\n\n  return `${getFractionPercentage(\n    width.value,\n    fractionTotal,\n  )}%`;\n};\n\nconst TableBody: React.FC<\n  TableBodyProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__body',\n    className,\n    {},\n  );\n\n  return (\n    <tbody\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableRow: React.FC<\n  TableRowProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__row',\n    className,\n    {},\n  );\n\n  return (\n    <tr\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableCell: React.FC<\n  TableCellProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__cell',\n    className,\n    {},\n  );\n\n  return (\n    <td\n      className={classes}\n      {...props}\n    />\n  );\n};\n\ninterface TableComponent\n  extends React.FC<TableProps> {\n  Body: typeof TableBody;\n  Row: typeof TableRow;\n  Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'table',\n    className,\n    {},\n  );\n\n  const fractionTotal =\n    getFractionTotal(columns);\n\n  return (\n    <table\n      className={classes}\n      {...props}\n    >\n      <colgroup>\n        {columns.map((column) => (\n          <col\n            key={column.id}\n            style={{\n              width: getColumnWidth(\n                column.width,\n                fractionTotal,\n              ),\n            }}\n          />\n        ))}\n      </colgroup>\n\n      <thead className=\"table__head\">\n        <tr className=\"table__row\">\n          {columns.map((column) => (\n            <th\n              key={column.id}\n              className=\"table__header\"\n              scope=\"col\"\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {children}\n    </table>\n  );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}

package/components/table/table.css

@@ -0,0 +1,168 @@
+.table {
+  /* color */
+  --table-color: var(--color-text);
+  --table-border-color: var(--color-line-grid);
+
+  /* typography */
+  --table-font-family: var(--font-h4-family);
+  --table-font-size: var(--font-h4);
+  --table-line-height: var(--font-h4-line);
+  --table-letter-spacing: var(--font-h4-letter-spacing);
+  --table-font-weight: var(--font-body-weight);
+  --table-header-font-weight: var(--font-h4-weight);
+
+  /* size */
+  --table-column-gap: var(--margin-item);
+  --table-row-gap: var(--font-h4-margin);
+  width: 100%;
+  border-collapse: collapse;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__head {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__row {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header,
+.table__cell {
+  /* color */
+  color: var(--table-color);
+
+  /* typography */
+  font-family: var(--table-font-family);
+  font-size: var(--table-font-size);
+  font-weight: var(--table-font-weight);
+  line-height: var(--table-line-height);
+  letter-spacing: var(--table-letter-spacing);
+  text-align: left;
+  vertical-align: top;
+
+  /* size */
+  padding-block: var(--table-row-gap);
+  padding-inline: calc(
+    var(--table-column-gap) / 2
+  );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header:first-child,
+.table__cell:first-child {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-left: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header:last-child,
+.table__cell:last-child {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-right: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header {
+  /* color */
+
+  /* typography */
+  font-weight: var(--table-header-font-weight);
+
+  /* size */
+  padding-top: var(--padding-table-vert);
+
+  /* border */
+  border-bottom:
+    var(--size-border-width-icon)
+    solid
+    var(--table-border-color);
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  border-bottom:
+    var(--size-border-width-min)
+    solid
+    var(--table-border-color);
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__body
+  .table__row:last-child
+  .table__cell {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-bottom: var(--padding-table-vert);
+
+  /* border */
+  border-bottom: 0;
+
+  /* depth */
+
+  /* motion */
+}

package/components/table/table.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import './table.css';
+export type TableColumnWidth = {
+    type: 'auto';
+} | {
+    type: 'max';
+} | {
+    type: 'fraction';
+    value: number;
+} | {
+    type: 'min';
+} | {
+    type: 'fixed';
+    value: string;
+};
+export interface TableColumn {
+    id: React.Key;
+    header: React.ReactNode;
+    width?: TableColumnWidth;
+}
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    columns: TableColumn[];
+}
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+}
+declare const TableBody: React.FC<TableBodyProps>;
+declare const TableRow: React.FC<TableRowProps>;
+declare const TableCell: React.FC<TableCellProps>;
+interface TableComponent extends React.FC<TableProps> {
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Cell: typeof TableCell;
+}
+declare const Table: TableComponent;
+export default Table;

package/components/table/table.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import './table.css';
+import { classnames } from '../helpers/classnames';
+
+const getFractionTotal = (columns) => columns.reduce((total, column) => {
+  if (column.width?.type !== "fraction" || column.width.value <= 0) {
+    return total;
+  }
+  return total + column.width.value;
+}, 0);
+const getFractionPercentage = (value, total) => Number(
+  (value / total * 100).toFixed(6)
+);
+const getColumnWidth = (width, fractionTotal) => {
+  if (!width || width.type === "auto") {
+    return void 0;
+  }
+  if (width.type === "min") {
+    return "1%";
+  }
+  if (width.type === "max") {
+    return "100%";
+  }
+  if (width.type === "fixed") {
+    return width.value;
+  }
+  if (width.value <= 0 || fractionTotal <= 0) {
+    return void 0;
+  }
+  return `${getFractionPercentage(
+    width.value,
+    fractionTotal
+  )}%`;
+};
+const TableBody = ({
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "table__body",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+const TableRow = ({
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "table__row",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+const TableCell = ({
+  className = "",
+  ...props
+}) => {
+  const classes = classnames(
+    "table__cell",
+    className,
+    {}
+  );
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+const Table = ({
+  columns,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames(
+    "table",
+    className,
+    {}
+  );
+  const fractionTotal = getFractionTotal(columns);
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: classes,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx(
+          "col",
+          {
+            style: {
+              width: getColumnWidth(
+                column.width,
+                fractionTotal
+              )
+            }
+          },
+          column.id
+        )) }),
+        /* @__PURE__ */ jsx("thead", { className: "table__head", children: /* @__PURE__ */ jsx("tr", { className: "table__row", children: columns.map((column) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: "table__header",
+            scope: "col",
+            children: column.header
+          },
+          column.id
+        )) }) }),
+        children
+      ]
+    }
+  );
+};
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+var table_default = Table;
+
+export { table_default as default };
+//# sourceMappingURL=table.js.map
+//# sourceMappingURL=table.js.map

package/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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","file":"table.js","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n  | {\n      type: 'auto';\n    }\n  | {\n      type: 'max';\n    }\n  | {\n      type: 'fraction';\n      value: number;\n    }\n  | {\n      type: 'min';\n    }\n  | {\n      type: 'fixed';\n      value: string;\n    };\n\nexport interface TableColumn {\n  id: React.Key;\n  header: React.ReactNode;\n  width?: TableColumnWidth;\n}\n\nexport interface TableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n  extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {}\n\nconst getFractionTotal = (\n  columns: TableColumn[],\n) =>\n  columns.reduce((total, column) => {\n    if (\n      column.width?.type !== 'fraction' ||\n      column.width.value <= 0\n    ) {\n      return total;\n    }\n\n    return total + column.width.value;\n  }, 0);\n\nconst getFractionPercentage = (\n  value: number,\n  total: number,\n) =>\n  Number(\n    ((value / total) * 100).toFixed(6),\n  );\n\nconst getColumnWidth = (\n  width: TableColumnWidth | undefined,\n  fractionTotal: number,\n): React.CSSProperties['width'] => {\n  if (!width || width.type === 'auto') {\n    return undefined;\n  }\n\n  if (width.type === 'min') {\n    return '1%';\n  }\n\n  if (width.type === 'max') {\n    return '100%';\n  }\n\n  if (width.type === 'fixed') {\n    return width.value;\n  }\n\n  if (\n    width.value <= 0 ||\n    fractionTotal <= 0\n  ) {\n    return undefined;\n  }\n\n  return `${getFractionPercentage(\n    width.value,\n    fractionTotal,\n  )}%`;\n};\n\nconst TableBody: React.FC<\n  TableBodyProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__body',\n    className,\n    {},\n  );\n\n  return (\n    <tbody\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableRow: React.FC<\n  TableRowProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__row',\n    className,\n    {},\n  );\n\n  return (\n    <tr\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableCell: React.FC<\n  TableCellProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__cell',\n    className,\n    {},\n  );\n\n  return (\n    <td\n      className={classes}\n      {...props}\n    />\n  );\n};\n\ninterface TableComponent\n  extends React.FC<TableProps> {\n  Body: typeof TableBody;\n  Row: typeof TableRow;\n  Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'table',\n    className,\n    {},\n  );\n\n  const fractionTotal =\n    getFractionTotal(columns);\n\n  return (\n    <table\n      className={classes}\n      {...props}\n    >\n      <colgroup>\n        {columns.map((column) => (\n          <col\n            key={column.id}\n            style={{\n              width: getColumnWidth(\n                column.width,\n                fractionTotal,\n              ),\n            }}\n          />\n        ))}\n      </colgroup>\n\n      <thead className=\"table__head\">\n        <tr className=\"table__row\">\n          {columns.map((column) => (\n            <th\n              key={column.id}\n              className=\"table__header\"\n              scope=\"col\"\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {children}\n    </table>\n  );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}

package/components/table/table.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const tableMeta: ComponentMeta;

package/index.cjs

@@ -33,6 +33,7 @@ var courseOutline = require('./components/course-outline');
 var calendarMonth = require('./components/calendar-month');
 var flipList = require('./components/flip-list');
 var avatarUpload = require('./components/avatar-upload');
+var table = require('./components/table');
 var header = require('./patterns/header');
 var footer = require('./patterns/footer');
 var screenHeader = require('./patterns/screen-header');
@@ -79,6 +80,7 @@ var discussion__default = /*#__PURE__*/_interopDefault(discussion);
 var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
 var flipList__default = /*#__PURE__*/_interopDefault(flipList);
 var avatarUpload__default = /*#__PURE__*/_interopDefault(avatarUpload);
+var table__default = /*#__PURE__*/_interopDefault(table);
 var header__default = /*#__PURE__*/_interopDefault(header);
 var footer__default = /*#__PURE__*/_interopDefault(footer);
 var screenHeader__default = /*#__PURE__*/_interopDefault(screenHeader);
@@ -229,6 +231,10 @@ Object.defineProperty(exports, "AvatarUpload", {
   enumerable: true,
   get: function () { return avatarUpload__default.default; }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () { return table__default.default; }
+});
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function () { return header__default.default; }

package/index.d.ts

@@ -68,6 +68,8 @@ export { default as FlipList } from './components/flip-list';
 export type { FlipListItem, FlipListProps, } from './components/flip-list';
 export { default as AvatarUpload } from './components/avatar-upload';
 export type { AvatarUploadProps, } from './components/avatar-upload';
+export { default as Table } from './components/table';
+export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './components/table';
 export { default as Header } from './patterns/header';
 export type { HeaderProps } from './patterns/header';
 export { default as Footer } from './patterns/footer';

package/index.js

@@ -31,6 +31,7 @@ export { default as CourseOutline } from './components/course-outline';
 export * from './components/calendar-month';
 export { default as FlipList } from './components/flip-list';
 export { default as AvatarUpload } from './components/avatar-upload';
+export { default as Table } from './components/table';
 export { default as Header } from './patterns/header';
 export { default as Footer } from './patterns/footer';
 export { default as ScreenHeader } from './patterns/screen-header';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.33",
+  "version": "0.2.35",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -4893,6 +4893,24 @@
   /* motion */
 }
 
+.surface--secondary .progressbar {
+  /* color */
+  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
+  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
+  --progressbar-value-bg: var(--color-primary-1);
+  --progressbar-label-color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--tertiary {
   /* color */
   --surface-bg: var(--color-bg-container-tertiary);
@@ -4927,12 +4945,10 @@
   /* motion */
 }
 
-.surface--secondary .progressbar {
+.surface--tertiary .calendar-month {
   /* color */
-  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
-  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
-  --progressbar-value-bg: var(--color-primary-1);
-  --progressbar-label-color: var(--color-text-primary-1);
+  --calendar-month-marked-bg: var(--color-primary-1);
+  --calendar-month-marked-color: var(--color-text-primary-1);
 
   /* typography */
 
@@ -4964,6 +4980,176 @@
   /* motion */
 }
 
+/* src/components/table/table.css */
+.table {
+  /* color */
+  --table-color: var(--color-text);
+  --table-border-color: var(--color-line-grid);
+
+  /* typography */
+  --table-font-family: var(--font-h4-family);
+  --table-font-size: var(--font-h4);
+  --table-line-height: var(--font-h4-line);
+  --table-letter-spacing: var(--font-h4-letter-spacing);
+  --table-font-weight: var(--font-body-weight);
+  --table-header-font-weight: var(--font-h4-weight);
+
+  /* size */
+  --table-column-gap: var(--margin-item);
+  --table-row-gap: var(--font-h4-margin);
+  width: 100%;
+  border-collapse: collapse;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__head {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__row {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header,
+.table__cell {
+  /* color */
+  color: var(--table-color);
+
+  /* typography */
+  font-family: var(--table-font-family);
+  font-size: var(--table-font-size);
+  font-weight: var(--table-font-weight);
+  line-height: var(--table-line-height);
+  letter-spacing: var(--table-letter-spacing);
+  text-align: left;
+  vertical-align: top;
+
+  /* size */
+  padding-block: var(--table-row-gap);
+  padding-inline: calc(
+    var(--table-column-gap) / 2
+  );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header:first-child,
+.table__cell:first-child {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-left: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header:last-child,
+.table__cell:last-child {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-right: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__header {
+  /* color */
+
+  /* typography */
+  font-weight: var(--table-header-font-weight);
+
+  /* size */
+  padding-top: var(--padding-table-vert);
+
+  /* border */
+  border-bottom:
+    var(--size-border-width-icon)
+    solid
+    var(--table-border-color);
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  border-bottom:
+    var(--size-border-width-min)
+    solid
+    var(--table-border-color);
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__body
+  .table__row:last-child
+  .table__cell {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-bottom: var(--padding-table-vert);
+
+  /* border */
+  border-bottom: 0;
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/tabs/tabs.css */
 .tabs {
   /* color */