@trackunit/react-table-base-components 0.0.1-alpha-d7497395ac.0

package/README.md

@@ -0,0 +1,22 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit React Table Base Components
+The `@trackunit/react-table-base-components` package contains basic react components for Tables as part of Trackunits public UI library.
+
+This library is exposed publicly for use in the  the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).  
+
+To browse all available components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.cjs.js

@@ -0,0 +1,258 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/**
+ * Component for a resizable handle element.
+ *
+ * @param {object} props - Props for the resizable handle.
+ * @param {boolean} [props.isResizing=false] - Indicates whether the handle is in a resizing state.
+ * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props.className] - Additional CSS classes to apply to the handle.
+ * @returns {ReactElement} A React element representing the resizable handle.
+ */
+const ResizeHandel = (_a) => {
+    var { isResizing = false, dataTestId, className } = _a, rest = __rest(_a, ["isResizing", "dataTestId", "className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaResizeHandel({ isResizing, className }) }, rest)));
+};
+const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge([
+    "absolute",
+    "!cursor-col-resize",
+    "right-0",
+    "top-0",
+    "h-full",
+    "w-1",
+    "select-none",
+    "hover:bg-primary-400",
+    "cursor-pointer",
+], {
+    variants: {
+        isResizing: {
+            true: ["bg-blue-500", "opacity-1"],
+            false: [],
+        },
+    },
+});
+
+/**
+ * Component for a sorting indicator element.
+ *
+ * @param {object} props - Props for the sorting indicator.
+ * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
+ * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props.className] - Additional CSS classes to apply to the sorting indicator.
+ * @returns {ReactElement} A React element representing the sorting indicator.
+ */
+const SortIndicator = (_a) => {
+    var { sortingState = false, dataTestId, className } = _a, rest = __rest(_a, ["sortingState", "dataTestId", "className"]);
+    return (jsxRuntime.jsx("span", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaSortIndicator({ sortingState, className }) }, rest)));
+};
+const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
+    "relative",
+    "before:block",
+    "before:h-0",
+    "before:absolute",
+    "before:w-0",
+    "before:bottom-0.5",
+    "before:content-['_']",
+    "before:border-4",
+    "before:border-solid",
+    "before:border-transparent",
+    "after:block",
+    "after:h-0",
+    "after:absolute",
+    "after:w-0",
+    "after:-bottom-[9px]",
+    "after:content-['_']",
+    "after:border-4",
+    "after:border-solid",
+    "after:border-transparent",
+    "before:border-b-neutral-300",
+    "after:border-t-neutral-300",
+], {
+    variants: {
+        sortingState: {
+            asc: ["before:border-b-primary-600"],
+            desc: ["after:border-t-primary-600"],
+            false: "",
+        },
+    },
+});
+
+/**
+ * The TableRoot is a wrapper for the table html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TableRootProps} props - The props for the TableRoot component
+ * @returns {JSX.Element} TableRoot component
+ */
+const TableRoot = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsxRuntime.jsx("table", Object.assign({ "data-testid": dataTestId, className: cvaTableRoot({ className }) }, rest, { children: children })));
+};
+const cvaTableRoot = cssClassVarianceUtilities.cvaMerge(["border-spacing-0", "min-w-full"]);
+
+/**
+ * The Tbody is a wrapper for the tbody html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TbodyProps} props - The props for the Tbody component
+ * @returns {JSX.Element} Tbody component
+ */
+const Tbody = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsxRuntime.jsx("tbody", Object.assign({ "data-testid": dataTestId, className: className }, rest, { children: children })));
+};
+
+/**
+ * The Td is a wrapper for the td html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TdProps} props - The props for the Td component
+ * @returns {JSX.Element} Td component
+ */
+const Td = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsxRuntime.jsx("td", Object.assign({ "data-testid": dataTestId, className: cvaTd({ className }) }, rest, { children: children })));
+};
+const cvaTd = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
+
+/**
+ * The Tfoot is a wrapper for the tfoot html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TfootProps} props - The props for the Tfoot component
+ * @returns {JSX.Element} Tfoot component
+ */
+const Tfoot = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsxRuntime.jsx("tfoot", Object.assign({ "data-testid": dataTestId, className: className }, rest, { children: children })));
+};
+
+/**
+ * The Th is a wrapper for the th html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {ThProps} props - The props for the Th component
+ * @returns {JSX.Element} Th component
+ */
+const Th = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsxRuntime.jsx("th", Object.assign({ "data-testid": dataTestId, className: cvaTh({ className }) }, rest, { children: children })));
+};
+const cvaTh = cssClassVarianceUtilities.cvaMerge([
+    "hover:bg-neutral-200",
+    "text-sm",
+    "overflow-hidden",
+    "font-medium",
+    "whitespace-nowrap",
+    "px-3",
+    "py-table-spacing",
+]);
+
+/**
+ * The Thead is a wrapper for the thead html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TheadProps} props - The props for the Thead component
+ * @returns {JSX.Element} Thead component
+ */
+const Thead = (_a) => {
+    var { dataTestId, className, children, sticky = true } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "sticky"]);
+    return (jsxRuntime.jsx("thead", Object.assign({ "data-testid": dataTestId, className: cvaThead({ sticky, className }) }, rest, { children: children })));
+};
+const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-left"], {
+    variants: {
+        sticky: {
+            true: ["sticky", "top-0"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        sticky: true,
+    },
+});
+
+/**
+ * The Tr is a wrapper for the tr html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TrProps} props - The props for the Tr component
+ * @returns {JSX.Element} Tr component
+ */
+const Tr = (_a) => {
+    var { dataTestId, className, children, layout = "default" } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "layout"]);
+    return (jsxRuntime.jsx("tr", Object.assign({ role: "row", "data-testid": dataTestId, className: cvaTr({ layout, className }) }, rest, { children: children })));
+};
+const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
+    variants: {
+        layout: {
+            default: "",
+            flex: ["flex"],
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+
+exports.ResizeHandel = ResizeHandel;
+exports.SortIndicator = SortIndicator;
+exports.TableRoot = TableRoot;
+exports.Tbody = Tbody;
+exports.Td = Td;
+exports.Tfoot = Tfoot;
+exports.Th = Th;
+exports.Thead = Thead;
+exports.Tr = Tr;

package/index.esm.js

@@ -0,0 +1,246 @@
+import { jsx } from 'react/jsx-runtime';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/**
+ * Component for a resizable handle element.
+ *
+ * @param {object} props - Props for the resizable handle.
+ * @param {boolean} [props.isResizing=false] - Indicates whether the handle is in a resizing state.
+ * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props.className] - Additional CSS classes to apply to the handle.
+ * @returns {ReactElement} A React element representing the resizable handle.
+ */
+const ResizeHandel = (_a) => {
+    var { isResizing = false, dataTestId, className } = _a, rest = __rest(_a, ["isResizing", "dataTestId", "className"]);
+    return (jsx("div", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaResizeHandel({ isResizing, className }) }, rest)));
+};
+const cvaResizeHandel = cvaMerge([
+    "absolute",
+    "!cursor-col-resize",
+    "right-0",
+    "top-0",
+    "h-full",
+    "w-1",
+    "select-none",
+    "hover:bg-primary-400",
+    "cursor-pointer",
+], {
+    variants: {
+        isResizing: {
+            true: ["bg-blue-500", "opacity-1"],
+            false: [],
+        },
+    },
+});
+
+/**
+ * Component for a sorting indicator element.
+ *
+ * @param {object} props - Props for the sorting indicator.
+ * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
+ * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props.className] - Additional CSS classes to apply to the sorting indicator.
+ * @returns {ReactElement} A React element representing the sorting indicator.
+ */
+const SortIndicator = (_a) => {
+    var { sortingState = false, dataTestId, className } = _a, rest = __rest(_a, ["sortingState", "dataTestId", "className"]);
+    return (jsx("span", Object.assign({ role: "separator", "data-testid": dataTestId, className: cvaSortIndicator({ sortingState, className }) }, rest)));
+};
+const cvaSortIndicator = cvaMerge([
+    "relative",
+    "before:block",
+    "before:h-0",
+    "before:absolute",
+    "before:w-0",
+    "before:bottom-0.5",
+    "before:content-['_']",
+    "before:border-4",
+    "before:border-solid",
+    "before:border-transparent",
+    "after:block",
+    "after:h-0",
+    "after:absolute",
+    "after:w-0",
+    "after:-bottom-[9px]",
+    "after:content-['_']",
+    "after:border-4",
+    "after:border-solid",
+    "after:border-transparent",
+    "before:border-b-neutral-300",
+    "after:border-t-neutral-300",
+], {
+    variants: {
+        sortingState: {
+            asc: ["before:border-b-primary-600"],
+            desc: ["after:border-t-primary-600"],
+            false: "",
+        },
+    },
+});
+
+/**
+ * The TableRoot is a wrapper for the table html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TableRootProps} props - The props for the TableRoot component
+ * @returns {JSX.Element} TableRoot component
+ */
+const TableRoot = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsx("table", Object.assign({ "data-testid": dataTestId, className: cvaTableRoot({ className }) }, rest, { children: children })));
+};
+const cvaTableRoot = cvaMerge(["border-spacing-0", "min-w-full"]);
+
+/**
+ * The Tbody is a wrapper for the tbody html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TbodyProps} props - The props for the Tbody component
+ * @returns {JSX.Element} Tbody component
+ */
+const Tbody = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsx("tbody", Object.assign({ "data-testid": dataTestId, className: className }, rest, { children: children })));
+};
+
+/**
+ * The Td is a wrapper for the td html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TdProps} props - The props for the Td component
+ * @returns {JSX.Element} Td component
+ */
+const Td = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsx("td", Object.assign({ "data-testid": dataTestId, className: cvaTd({ className }) }, rest, { children: children })));
+};
+const cvaTd = cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
+
+/**
+ * The Tfoot is a wrapper for the tfoot html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TfootProps} props - The props for the Tfoot component
+ * @returns {JSX.Element} Tfoot component
+ */
+const Tfoot = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsx("tfoot", Object.assign({ "data-testid": dataTestId, className: className }, rest, { children: children })));
+};
+
+/**
+ * The Th is a wrapper for the th html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {ThProps} props - The props for the Th component
+ * @returns {JSX.Element} Th component
+ */
+const Th = (_a) => {
+    var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
+    return (jsx("th", Object.assign({ "data-testid": dataTestId, className: cvaTh({ className }) }, rest, { children: children })));
+};
+const cvaTh = cvaMerge([
+    "hover:bg-neutral-200",
+    "text-sm",
+    "overflow-hidden",
+    "font-medium",
+    "whitespace-nowrap",
+    "px-3",
+    "py-table-spacing",
+]);
+
+/**
+ * The Thead is a wrapper for the thead html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TheadProps} props - The props for the Thead component
+ * @returns {JSX.Element} Thead component
+ */
+const Thead = (_a) => {
+    var { dataTestId, className, children, sticky = true } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "sticky"]);
+    return (jsx("thead", Object.assign({ "data-testid": dataTestId, className: cvaThead({ sticky, className }) }, rest, { children: children })));
+};
+const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
+    variants: {
+        sticky: {
+            true: ["sticky", "top-0"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        sticky: true,
+    },
+});
+
+/**
+ * The Tr is a wrapper for the tr html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TrProps} props - The props for the Tr component
+ * @returns {JSX.Element} Tr component
+ */
+const Tr = (_a) => {
+    var { dataTestId, className, children, layout = "default" } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "layout"]);
+    return (jsx("tr", Object.assign({ role: "row", "data-testid": dataTestId, className: cvaTr({ layout, className }) }, rest, { children: children })));
+};
+const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
+    variants: {
+        layout: {
+            default: "",
+            flex: ["flex"],
+        },
+    },
+    defaultVariants: {
+        layout: "default",
+    },
+});
+
+export { ResizeHandel, SortIndicator, TableRoot, Tbody, Td, Tfoot, Th, Thead, Tr };

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@trackunit/react-table-base-components",
+  "version": "0.0.1-alpha-d7497395ac.0",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "engines": {
+    "node": ">=18.x"
+  },
+  "dependencies": {
+    "@trackunit/css-class-variance-utilities": "0.0.13-alpha-d7497395ac.0",
+    "@trackunit/react-components": "0.1.151-alpha-d7497395ac.0",
+    "react": "18.2.0"
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "peerDependencies": {}
+}

package/src/BaseTable.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TableRoot } from "./components/TableRoot";
+type Story = StoryObj<typeof TableRoot>;
+declare const meta: Meta<typeof TableRoot>;
+export default meta;
+export declare const Default: Story;

package/src/components/ResizeHandel.d.ts

@@ -0,0 +1,15 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
+export interface ResizeHandelProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
+    isResizing?: boolean;
+}
+/**
+ * Component for a resizable handle element.
+ *
+ * @param {object} props - Props for the resizable handle.
+ * @param {boolean} [props.isResizing=false] - Indicates whether the handle is in a resizing state.
+ * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props.className] - Additional CSS classes to apply to the handle.
+ * @returns {ReactElement} A React element representing the resizable handle.
+ */
+export declare const ResizeHandel: ({ isResizing, dataTestId, className, ...rest }: ResizeHandelProps) => ReactElement;

package/src/components/SortIndicator.d.ts

@@ -0,0 +1,26 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
+export interface SortIndicatorProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * The current state of the sorting.
+     */
+    sortingState?: false | "asc" | "desc";
+}
+/**
+ * Component for a sorting indicator element.
+ *
+ * @param {object} props - Props for the sorting indicator.
+ * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
+ * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props.className] - Additional CSS classes to apply to the sorting indicator.
+ * @returns {ReactElement} A React element representing the sorting indicator.
+ */
+export declare const SortIndicator: ({ sortingState, dataTestId, className, ...rest }: SortIndicatorProps) => ReactElement;

package/src/components/SortIndicator.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SortIndicator } from "./SortIndicator";
+type Story = StoryObj<typeof SortIndicator>;
+declare const meta: Meta<typeof SortIndicator>;
+export default meta;
+export declare const Default: Story;

package/src/components/TableRoot.d.ts

@@ -0,0 +1,27 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface TableRootProps extends CommonProps, React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table root.
+     */
+    children?: ReactNode;
+}
+/**
+ * The TableRoot is a wrapper for the table html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TableRootProps} props - The props for the TableRoot component
+ * @returns {JSX.Element} TableRoot component
+ */
+export declare const TableRoot: ({ dataTestId, className, children, ...rest }: TableRootProps) => JSX.Element;

package/src/components/Tbody.d.ts

@@ -0,0 +1,27 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface TbodyProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table section.
+     */
+    children?: ReactNode;
+}
+/**
+ * The Tbody is a wrapper for the tbody html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TbodyProps} props - The props for the Tbody component
+ * @returns {JSX.Element} Tbody component
+ */
+export declare const Tbody: ({ dataTestId, className, children, ...rest }: TbodyProps) => JSX.Element;

package/src/components/Td.d.ts

@@ -0,0 +1,27 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface TdProps extends CommonProps, React.HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table cell.
+     */
+    children?: ReactNode;
+}
+/**
+ * The Td is a wrapper for the td html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TdProps} props - The props for the Td component
+ * @returns {JSX.Element} Td component
+ */
+export declare const Td: ({ dataTestId, className, children, ...rest }: TdProps) => JSX.Element;

package/src/components/Tfoot.d.ts

@@ -0,0 +1,27 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface TfootProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table section.
+     */
+    children?: ReactNode;
+}
+/**
+ * The Tfoot is a wrapper for the tfoot html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TfootProps} props - The props for the Tfoot component
+ * @returns {JSX.Element} Tfoot component
+ */
+export declare const Tfoot: ({ dataTestId, className, children, ...rest }: TfootProps) => JSX.Element;

package/src/components/Th.d.ts

@@ -0,0 +1,27 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table cell.
+     */
+    children?: ReactNode;
+}
+/**
+ * The Th is a wrapper for the th html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {ThProps} props - The props for the Th component
+ * @returns {JSX.Element} Th component
+ */
+export declare const Th: ({ dataTestId, className, children, ...rest }: ThProps) => JSX.Element;

package/src/components/Thead.d.ts

@@ -0,0 +1,34 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface TheadProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table section.
+     */
+    children?: ReactNode;
+    /**
+     * Should thead be sticky
+     * This defaults to true, as it is helpful for cases where virtualization is used.
+     *
+     * @default true
+     */
+    sticky?: boolean;
+}
+/**
+ * The Thead is a wrapper for the thead html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TheadProps} props - The props for the Thead component
+ * @returns {JSX.Element} Thead component
+ */
+export declare const Thead: ({ dataTestId, className, children, sticky, ...rest }: TheadProps) => JSX.Element;

package/src/components/Tr.d.ts

@@ -0,0 +1,35 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+export interface TrProps extends CommonProps, React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Children to render in the table row.
+     */
+    children?: ReactNode;
+    /**
+     * Defines the layout of the table row.
+     * Flex layout is used for tables where the width is controlled.
+     * For tables with column resizing, the flex layout should be used.
+     *
+     * @default default
+     */
+    layout?: "default" | "flex";
+}
+/**
+ * The Tr is a wrapper for the tr html element.
+ * It is used to render a table, and adds some default styling.
+ *
+ * In most cases, we recommend using the Table Component over the Table Base Components.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {TrProps} props - The props for the Tr component
+ * @returns {JSX.Element} Tr component
+ */
+export declare const Tr: ({ dataTestId, className, children, layout, ...rest }: TrProps) => JSX.Element;

package/src/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./components/ResizeHandel";
+export * from "./components/SortIndicator";
+export * from "./components/TableRoot";
+export * from "./components/Tbody";
+export * from "./components/Td";
+export * from "./components/Tfoot";
+export * from "./components/Th";
+export * from "./components/Thead";
+export * from "./components/Tr";