@refraktor/core 0.0.2 → 0.0.3

package/build/components/split-pane/split-pane.test.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, userEvent, waitFor } from "../../vitest";
+import SplitPane from "./split-pane";
+function setRootRect(element, width = 1000, height = 600) {
+    Object.defineProperty(element, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+            x: 0,
+            y: 0,
+            top: 0,
+            left: 0,
+            right: width,
+            bottom: height,
+            width,
+            height,
+            toJSON: () => ({})
+        })
+    });
+}
+describe("@refraktor/core/SplitPane", () => {
+    it("renders panes and separator with default layout", async () => {
+        await render(_jsxs(SplitPane, { "data-testid": "root", children: [_jsx("div", { children: "Left pane" }), _jsx("div", { children: "Right pane" })] }));
+        const root = screen.getByTestId("root");
+        const separator = screen.getByRole("separator", {
+            name: "Resize panels"
+        });
+        expect(screen.getByText("Left pane")).toBeInTheDocument();
+        expect(screen.getByText("Right pane")).toBeInTheDocument();
+        expect(separator).toHaveAttribute("aria-orientation", "horizontal");
+        expect(separator).toHaveAttribute("aria-valuenow", "50");
+        expect(root.style.gridTemplateColumns).toContain("50%");
+    });
+    it("supports dragging in uncontrolled mode", async () => {
+        const onChange = vi.fn();
+        const onChangeEnd = vi.fn();
+        await render(_jsxs(SplitPane, { defaultValue: 30, onChange: onChange, onChangeEnd: onChangeEnd, "data-testid": "root", children: [_jsx("div", { children: "Left" }), _jsx("div", { children: "Right" })] }));
+        const root = screen.getByTestId("root");
+        const separator = screen.getByRole("separator");
+        setRootRect(root, 1000, 600);
+        fireEvent.mouseDown(separator, { clientX: 300, clientY: 100 });
+        fireEvent.mouseMove(document, { clientX: 700, clientY: 100 });
+        fireEvent.mouseUp(document);
+        expect(onChange).toHaveBeenCalled();
+        expect(onChange).toHaveBeenLastCalledWith(70);
+        expect(onChangeEnd).toHaveBeenCalledWith(70);
+        await waitFor(() => {
+            expect(root.style.gridTemplateColumns).toContain("70%");
+        });
+    });
+    it("supports controlled mode with keyboard resizing", async () => {
+        const user = userEvent.setup();
+        function Demo() {
+            const [value, setValue] = useState(40);
+            return (_jsxs(SplitPane, { value: value, onChange: setValue, step: 10, "data-testid": "root", children: [_jsx("div", { children: "Left" }), _jsx("div", { children: "Right" })] }));
+        }
+        await render(_jsx(Demo, {}));
+        const root = screen.getByTestId("root");
+        const separator = screen.getByRole("separator");
+        separator.focus();
+        await user.keyboard("{ArrowRight}");
+        expect(separator).toHaveAttribute("aria-valuenow", "50");
+        expect(root.style.gridTemplateColumns).toContain("50%");
+    });
+    it("supports vertical orientation", async () => {
+        await render(_jsxs(SplitPane, { orientation: "vertical", defaultValue: 35, "data-testid": "root", children: [_jsx("div", { children: "Top" }), _jsx("div", { children: "Bottom" })] }));
+        const root = screen.getByTestId("root");
+        const separator = screen.getByRole("separator");
+        expect(separator).toHaveAttribute("aria-orientation", "vertical");
+        expect(root.style.gridTemplateRows).toContain("35%");
+    });
+    it("does not resize when disabled", async () => {
+        const onChange = vi.fn();
+        await render(_jsxs(SplitPane, { disabled: true, onChange: onChange, "data-testid": "root", children: [_jsx("div", { children: "Left" }), _jsx("div", { children: "Right" })] }));
+        const root = screen.getByTestId("root");
+        const separator = screen.getByRole("separator");
+        setRootRect(root, 1000, 600);
+        fireEvent.mouseDown(separator, { clientX: 800, clientY: 100 });
+        fireEvent.mouseMove(document, { clientX: 200, clientY: 100 });
+        fireEvent.mouseUp(document);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(separator).toHaveAttribute("tabindex", "-1");
+        expect(separator).toHaveAttribute("aria-disabled", "true");
+    });
+    it("supports root and slot class names and forwards ref", async () => {
+        const ref = createRef();
+        const { container } = await render(_jsxs(SplitPane, { ref: ref, className: "custom-root", classNames: {
+                pane: "custom-pane",
+                firstPane: "custom-first",
+                secondPane: "custom-second",
+                handle: "custom-handle",
+                handleBar: "custom-handle-bar"
+            }, children: [_jsx("div", { children: "First" }), _jsx("div", { children: "Second" })] }));
+        const root = container.firstElementChild;
+        const separator = screen.getByRole("separator");
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(root).toHaveClass("custom-root");
+        expect(root.querySelector(".custom-first")).toBeInTheDocument();
+        expect(root.querySelector(".custom-second")).toBeInTheDocument();
+        expect(root.querySelectorAll(".custom-pane")).toHaveLength(2);
+        expect(separator).toHaveClass("custom-handle");
+        expect(separator.querySelector(".custom-handle-bar")).toBeInTheDocument();
+    });
+});

package/build/components/split-pane/split-pane.types.d.ts

@@ -0,0 +1,51 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorSize } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+export type SplitPaneOrientation = "horizontal" | "vertical";
+export type SplitPaneClassNames = {
+    root?: string;
+    pane?: string;
+    firstPane?: string;
+    secondPane?: string;
+    handle?: string;
+    handleBar?: string;
+};
+export interface SplitPaneProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "value"> {
+    /** Panel content. The first two children are used as panes. */
+    children: ReactNode;
+    /** Split position in percent (controlled) */
+    value?: number;
+    /** Initial split position in percent (uncontrolled) */
+    defaultValue?: number;
+    /** Callback called when split position changes */
+    onChange?: (value: number) => void;
+    /** Callback called when interaction ends (drag end / key press) */
+    onChangeEnd?: (value: number) => void;
+    /** Minimum split position in percent @default `20` */
+    min?: number;
+    /** Maximum split position in percent @default `80` */
+    max?: number;
+    /** Step increment in percent @default `1` */
+    step?: number;
+    /** Split orientation @default `horizontal` */
+    orientation?: SplitPaneOrientation;
+    /** Resize handle thickness @default `md` */
+    handleSize?: RefraktorSize;
+    /** Resize handle accessible label @default `Resize panels` */
+    handleAriaLabel?: string;
+    /** Whether resizing is disabled @default `false` */
+    disabled?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: SplitPaneClassNames;
+}
+export interface SplitPaneFactoryPayload extends FactoryPayload {
+    props: SplitPaneProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<SplitPaneProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<SplitPaneClassNames>>;
+    };
+}
+//# sourceMappingURL=split-pane.types.d.ts.map

package/build/components/split-pane/split-pane.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.types.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/split-pane.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cACb,SAAQ,IAAI,CACR,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,cAAc,GAAG,OAAO,CACxC;IACD,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IAEpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,oBAAoB,CAAC;IAEnC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,aAAa,CAAC;IAE3B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,UAAU,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC3D,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC;QACpE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,mBAAmB,CAAC,CACrD,CAAC;KACL,CAAC;CACL"}

package/build/components/split-pane/split-pane.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export { default as Table } from "./table";
+export { TableHead } from "./table-head";
+export { TableBody } from "./table-body";
+export { TableRow } from "./table-row";
+export { TableHeaderCell } from "./table-header-cell";
+export { TableCell } from "./table-cell";
+export { TableCaption } from "./table-caption";
+export type { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableCaptionProps, TableClassNames, TableFactoryPayload, TableHeadFactoryPayload, TableBodyFactoryPayload, TableRowFactoryPayload, TableHeaderCellFactoryPayload, TableCellFactoryPayload, TableCaptionFactoryPayload } from "./table.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,6BAA6B,EAC7B,uBAAuB,EACvB,0BAA0B,EAC7B,MAAM,eAAe,CAAC"}

package/build/components/table/index.js

@@ -0,0 +1,7 @@
+export { default as Table } from "./table";
+export { TableHead } from "./table-head";
+export { TableBody } from "./table-body";
+export { TableRow } from "./table-row";
+export { TableHeaderCell } from "./table-header-cell";
+export { TableCell } from "./table-cell";
+export { TableCaption } from "./table-caption";

package/build/components/table/table-body/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableBody } from "./table-body";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/table-body/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/build/components/table/table-body/index.js

@@ -0,0 +1 @@
+export { default as TableBody } from "./table-body";

package/build/components/table/table-body/table-body.d.ts

@@ -0,0 +1,4 @@
+import { TableBodyFactoryPayload } from "../table.types";
+declare const TableBody: import("../../..").RefraktorComponent<TableBodyFactoryPayload>;
+export default TableBody;
+//# sourceMappingURL=table-body.d.ts.map

package/build/components/table/table-body/table-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body/table-body.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEA0Bd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/build/components/table/table-body/table-body.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getBodyStyles } from "../table.styles";
+const TableBody = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { striped, highlightOnHover, withRowBorders, getStyles } = useTableContext();
+    const bodyStyles = getBodyStyles({
+        striped,
+        highlightOnHover,
+        withRowBorders
+    });
+    return (_jsx("tbody", { ref: ref, className: cx("align-top", bodyStyles, getStyles("body"), className), ...props, children: children }));
+});
+TableBody.displayName = "@refraktor/core/Table.Body";
+export default TableBody;

package/build/components/table/table-caption/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableCaption } from "./table-caption";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/table-caption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-caption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/build/components/table/table-caption/index.js

@@ -0,0 +1 @@
+export { default as TableCaption } from "./table-caption";

package/build/components/table/table-caption/table-caption.d.ts

@@ -0,0 +1,4 @@
+import { TableCaptionFactoryPayload } from "../table.types";
+declare const TableCaption: import("../../..").RefraktorComponent<TableCaptionFactoryPayload>;
+export default TableCaption;
+//# sourceMappingURL=table-caption.d.ts.map

package/build/components/table/table-caption/table-caption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-caption.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-caption/table-caption.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEAqBjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/build/components/table/table-caption/table-caption.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getSize } from "../table.styles";
+const TableCaption = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { size, getStyles } = useTableContext();
+    const sizeStyles = getSize(size);
+    return (_jsx("caption", { ref: ref, className: cx("caption-bottom mt-2 text-[var(--refraktor-text-secondary)]", sizeStyles.caption, getStyles("caption"), className), ...props, children: children }));
+});
+TableCaption.displayName = "@refraktor/core/Table.Caption";
+export default TableCaption;

package/build/components/table/table-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableCell } from "./table-cell";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/table-cell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-cell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/build/components/table/table-cell/index.js

@@ -0,0 +1 @@
+export { default as TableCell } from "./table-cell";

package/build/components/table/table-cell/table-cell.d.ts

@@ -0,0 +1,4 @@
+import { TableCellFactoryPayload } from "../table.types";
+declare const TableCell: import("../../..").RefraktorComponent<TableCellFactoryPayload>;
+export default TableCell;
+//# sourceMappingURL=table-cell.d.ts.map

package/build/components/table/table-cell/table-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-cell/table-cell.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEAsBd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/build/components/table/table-cell/table-cell.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getColumnBorder, getSize } from "../table.styles";
+const TableCell = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { size, withColumnBorders, getStyles } = useTableContext();
+    const sizeStyles = getSize(size);
+    return (_jsx("td", { ref: ref, className: cx("align-middle text-[var(--refraktor-text)]", sizeStyles.cell, getColumnBorder(withColumnBorders), getStyles("cell"), className), ...props, children: children }));
+});
+TableCell.displayName = "@refraktor/core/Table.Cell";
+export default TableCell;

package/build/components/table/table-head/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableHead } from "./table-head";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/table-head/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-head/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/build/components/table/table-head/index.js

@@ -0,0 +1 @@
+export { default as TableHead } from "./table-head";

package/build/components/table/table-head/table-head.d.ts

@@ -0,0 +1,4 @@
+import { TableHeadFactoryPayload } from "../table.types";
+declare const TableHead: import("../../..").RefraktorComponent<TableHeadFactoryPayload>;
+export default TableHead;
+//# sourceMappingURL=table-head.d.ts.map

package/build/components/table/table-head/table-head.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-head/table-head.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEAmBd,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/build/components/table/table-head/table-head.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+const TableHead = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useTableContext();
+    return (_jsx("thead", { ref: ref, className: cx("border-b border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]", getStyles("head"), className), ...props, children: children }));
+});
+TableHead.displayName = "@refraktor/core/Table.Head";
+export default TableHead;

package/build/components/table/table-header-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableHeaderCell } from "./table-header-cell";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/table-header-cell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/build/components/table/table-header-cell/index.js

@@ -0,0 +1 @@
+export { default as TableHeaderCell } from "./table-header-cell";

package/build/components/table/table-header-cell/table-header-cell.d.ts

@@ -0,0 +1,4 @@
+import { TableHeaderCellFactoryPayload } from "../table.types";
+declare const TableHeaderCell: import("../../..").RefraktorComponent<TableHeaderCellFactoryPayload>;
+export default TableHeaderCell;
+//# sourceMappingURL=table-header-cell.d.ts.map

package/build/components/table/table-header-cell/table-header-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell/table-header-cell.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAC;AAE/D,QAAA,MAAM,eAAe,sEAsBpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/build/components/table/table-header-cell/table-header-cell.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+import { getColumnBorder, getSize } from "../table.styles";
+const TableHeaderCell = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { size, withColumnBorders, getStyles } = useTableContext();
+    const sizeStyles = getSize(size);
+    return (_jsx("th", { ref: ref, className: cx("text-left font-medium align-middle text-[var(--refraktor-text-secondary)]", sizeStyles.headerCell, getColumnBorder(withColumnBorders), getStyles("headerCell"), className), ...props, children: children }));
+});
+TableHeaderCell.displayName = "@refraktor/core/Table.HeaderCell";
+export default TableHeaderCell;

package/build/components/table/table-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableRow } from "./table-row";
+//# sourceMappingURL=index.d.ts.map

package/build/components/table/table-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/build/components/table/table-row/index.js

@@ -0,0 +1 @@
+export { default as TableRow } from "./table-row";

package/build/components/table/table-row/table-row.d.ts

@@ -0,0 +1,4 @@
+import { TableRowFactoryPayload } from "../table.types";
+declare const TableRow: import("../../..").RefraktorComponent<TableRowFactoryPayload>;
+export default TableRow;
+//# sourceMappingURL=table-row.d.ts.map

package/build/components/table/table-row/table-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-row/table-row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAExD,QAAA,MAAM,QAAQ,+DAoBb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/build/components/table/table-row/table-row.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useTableContext } from "../table.context";
+const TableRow = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { highlightOnHover, getStyles } = useTableContext();
+    return (_jsx("tr", { ref: ref, className: cx("align-middle", highlightOnHover && "transition-colors", getStyles("row"), className), ...props, children: children }));
+});
+TableRow.displayName = "@refraktor/core/Table.Row";
+export default TableRow;

package/build/components/table/table.context.d.ts

@@ -0,0 +1,16 @@
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TableClassNames } from "./table.types";
+export interface TableContextValue {
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    striped: boolean;
+    highlightOnHover: boolean;
+    withRowBorders: boolean;
+    withColumnBorders: boolean;
+    getStyles: (part: keyof TableClassNames) => string | undefined;
+}
+export declare const TableProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: TableContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useTableContext: () => TableContextValue;
+//# sourceMappingURL=table.context.d.ts.map

package/build/components/table/table.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.context.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAClE;AAED,eAAO,MAAO,aAAa;;;+CAAE,eAAe,yBAGvC,CAAC"}

package/build/components/table/table.context.js

@@ -0,0 +1,2 @@
+import { createSafeContext } from "@refraktor/utils";
+export const [TableProvider, useTableContext] = createSafeContext("Table component was not found in tree. Make sure Table subcomponents are wrapped with Table.");

package/build/components/table/table.d.ts

@@ -0,0 +1,4 @@
+import { TableFactoryPayload } from "./table.types";
+declare const Table: import("../..").RefraktorComponent<TableFactoryPayload>;
+export default Table;
+//# sourceMappingURL=table.d.ts.map

package/build/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAmB,mBAAmB,EAAc,MAAM,eAAe,CAAC;AAWjF,QAAA,MAAM,KAAK,yDAkDT,CAAC;AAYH,eAAe,KAAK,CAAC"}

package/build/components/table/table.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useCallback } from "react";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { TableBody } from "./table-body";
+import { TableCaption } from "./table-caption";
+import { TableCell } from "./table-cell";
+import { TableProvider } from "./table.context";
+import { TableHead } from "./table-head";
+import { TableHeaderCell } from "./table-header-cell";
+import { TableRow } from "./table-row";
+const defaultProps = {
+    size: "md",
+    radius: "default",
+    striped: false,
+    highlightOnHover: false,
+    withRowBorders: true,
+    withColumnBorders: false
+};
+const Table = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, children, size, radius, striped, highlightOnHover, withRowBorders, withColumnBorders, className, classNames, ...props } = useProps("Table", defaultProps, _props);
+    const classes = useClassNames("Table", classNames);
+    const _id = useId(id);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    return (_jsx(TableProvider, { value: {
+            size,
+            radius,
+            striped,
+            highlightOnHover,
+            withRowBorders,
+            withColumnBorders,
+            getStyles
+        }, children: _jsx("table", { ref: ref, id: _id, className: cx("w-full border-collapse text-left text-[var(--refraktor-text)]", getRadius(radius), classes.root, className), ...props, children: children }) }));
+});
+Table.displayName = "@refraktor/core/Table";
+Table.configure = createComponentConfig();
+Table.classNames = createClassNamesConfig();
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.HeaderCell = TableHeaderCell;
+Table.Cell = TableCell;
+Table.Caption = TableCaption;
+export default Table;

package/build/components/table/table.styles.d.ts

@@ -0,0 +1,16 @@
+import { RefraktorSize } from "../../theme";
+type TableSizeStyles = {
+    headerCell: string;
+    cell: string;
+    caption: string;
+};
+type TableBodyStyleOptions = {
+    striped: boolean;
+    highlightOnHover: boolean;
+    withRowBorders: boolean;
+};
+export declare const getSize: (size?: RefraktorSize) => TableSizeStyles;
+export declare const getColumnBorder: (withColumnBorders?: boolean) => "" | "border-r border-[var(--refraktor-border)] last:border-r-0";
+export declare const getBodyStyles: ({ striped, highlightOnHover, withRowBorders }: TableBodyStyleOptions) => string;
+export {};
+//# sourceMappingURL=table.styles.d.ts.map

package/build/components/table/table.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,eAAe,GAAG;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;CAC3B,CAAC;AA8BF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,oBAAgB,CAAC;AAEnE,eAAO,MAAM,eAAe,GAAI,2BAAyB,qEAG7C,CAAC;AAEb,eAAO,MAAM,aAAa,GAAI,+CAI3B,qBAAqB,WAQN,CAAC"}

package/build/components/table/table.styles.js

@@ -0,0 +1,39 @@
+const sizes = {
+    xs: {
+        headerCell: "px-2 py-1.5 text-xs",
+        cell: "px-2 py-1.5 text-xs",
+        caption: "text-xs"
+    },
+    sm: {
+        headerCell: "px-2.5 py-2 text-xs",
+        cell: "px-2.5 py-2 text-sm",
+        caption: "text-xs"
+    },
+    md: {
+        headerCell: "px-3 py-2.5 text-sm",
+        cell: "px-3 py-2.5 text-sm",
+        caption: "text-sm"
+    },
+    lg: {
+        headerCell: "px-3.5 py-3 text-base",
+        cell: "px-3.5 py-3 text-base",
+        caption: "text-base"
+    },
+    xl: {
+        headerCell: "px-4 py-3.5 text-lg",
+        cell: "px-4 py-3.5 text-lg",
+        caption: "text-lg"
+    }
+};
+export const getSize = (size = "md") => sizes[size];
+export const getColumnBorder = (withColumnBorders = false) => withColumnBorders
+    ? "border-r border-[var(--refraktor-border)] last:border-r-0"
+    : "";
+export const getBodyStyles = ({ striped, highlightOnHover, withRowBorders }) => [
+    striped && "[&_tr:nth-child(odd)]:bg-[var(--refraktor-bg-subtle)]",
+    highlightOnHover && "[&_tr:hover]:bg-[var(--refraktor-bg-hover)]",
+    withRowBorders &&
+        "[&_tr]:border-b [&_tr]:border-[var(--refraktor-border)] [&_tr:last-child]:border-b-0"
+]
+    .filter(Boolean)
+    .join(" ");

package/build/components/table/table.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.test.d.ts.map

package/build/components/table/table.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.test.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.test.tsx"],"names":[],"mappings":""}