@refraktor/core 0.0.3 → 0.0.5

package/src/components/table/table-cell/table-cell.tsx

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

package/src/components/table/table-head/index.ts

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

package/src/components/table/table-head/table-head.tsx

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

package/src/components/table/table-header-cell/index.ts

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

package/src/components/table/table-header-cell/table-header-cell.tsx

@@ -1,33 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useTableContext } from "../table.context";
-import { getColumnBorder, getSize } from "../table.styles";
-import { TableHeaderCellFactoryPayload } from "../table.types";
-
-const TableHeaderCell = factory<TableHeaderCellFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { size, withColumnBorders, getStyles } = useTableContext();
-        const sizeStyles = getSize(size);
-
-        return (
-            <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}
-            </th>
-        );
-    }
-);
-
-TableHeaderCell.displayName = "@refraktor/core/Table.HeaderCell";
-
-export default TableHeaderCell;

package/src/components/table/table-row/index.ts

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

package/src/components/table/table-row/table-row.tsx

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

package/src/components/table/table.context.ts

@@ -1,18 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-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 const [TableProvider, useTableContext] =
-    createSafeContext<TableContextValue>(
-        "Table component was not found in tree. Make sure Table subcomponents are wrapped with Table."
-    );

package/src/components/table/table.styles.ts

@@ -1,62 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-type TableSizeStyles = {
-    headerCell: string;
-    cell: string;
-    caption: string;
-};
-
-type TableBodyStyleOptions = {
-    striped: boolean;
-    highlightOnHover: boolean;
-    withRowBorders: boolean;
-};
-
-const sizes: Record<RefraktorSize, TableSizeStyles> = {
-    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: RefraktorSize = "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
-}: TableBodyStyleOptions) =>
-    [
-        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/src/components/table/table.test.tsx

@@ -1,145 +0,0 @@
-import { createRef } from "react";
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../vitest";
-import Table from "./table";
-
-describe("@refraktor/core/Table", () => {
-    it("renders semantic table structure with subcomponents", async () => {
-        await render(
-            <Table>
-                <Table.Caption>Users</Table.Caption>
-                <Table.Head>
-                    <Table.Row>
-                        <Table.HeaderCell>Name</Table.HeaderCell>
-                        <Table.HeaderCell>Email</Table.HeaderCell>
-                    </Table.Row>
-                </Table.Head>
-
-                <Table.Body>
-                    <Table.Row>
-                        <Table.Cell>Ada</Table.Cell>
-                        <Table.Cell>ada@example.com</Table.Cell>
-                    </Table.Row>
-                </Table.Body>
-            </Table>
-        );
-
-        expect(screen.getByRole("table")).toBeInTheDocument();
-        expect(screen.getByText("Users")).toBeInTheDocument();
-        expect(
-            screen.getByRole("columnheader", { name: "Name" })
-        ).toBeInTheDocument();
-        expect(screen.getByRole("cell", { name: "Ada" })).toBeInTheDocument();
-    });
-
-    it("applies body behavior styles", async () => {
-        const { container } = await render(
-            <Table striped highlightOnHover withRowBorders>
-                <Table.Head>
-                    <Table.Row>
-                        <Table.HeaderCell>Name</Table.HeaderCell>
-                    </Table.Row>
-                </Table.Head>
-
-                <Table.Body>
-                    <Table.Row>
-                        <Table.Cell>Ada</Table.Cell>
-                    </Table.Row>
-                </Table.Body>
-            </Table>
-        );
-
-        const body = container.querySelector("tbody") as HTMLTableSectionElement;
-
-        expect(body.className).toContain("nth-child(odd)");
-        expect(body.className).toContain("[&_tr:hover]:bg-[var(--refraktor-bg-hover)]");
-        expect(body.className).toContain("[&_tr]:border-b");
-    });
-
-    it("applies column borders and size styles", async () => {
-        await render(
-            <Table withColumnBorders size="xl">
-                <Table.Head>
-                    <Table.Row>
-                        <Table.HeaderCell>Name</Table.HeaderCell>
-                    </Table.Row>
-                </Table.Head>
-
-                <Table.Body>
-                    <Table.Row>
-                        <Table.Cell>Ada</Table.Cell>
-                    </Table.Row>
-                </Table.Body>
-            </Table>
-        );
-
-        const headerCell = screen.getByRole("columnheader", { name: "Name" });
-        const cell = screen.getByRole("cell", { name: "Ada" });
-
-        expect(headerCell.className).toContain("border-r");
-        expect(cell.className).toContain("border-r");
-        expect(cell.className).toContain("px-4");
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <Table
-                className="custom-root"
-                classNames={{
-                    head: "custom-head",
-                    body: "custom-body",
-                    row: "custom-row",
-                    headerCell: "custom-header-cell",
-                    cell: "custom-cell",
-                    caption: "custom-caption"
-                }}
-            >
-                <Table.Caption>Users</Table.Caption>
-                <Table.Head>
-                    <Table.Row>
-                        <Table.HeaderCell>Name</Table.HeaderCell>
-                    </Table.Row>
-                </Table.Head>
-
-                <Table.Body>
-                    <Table.Row>
-                        <Table.Cell>Ada</Table.Cell>
-                    </Table.Row>
-                </Table.Body>
-            </Table>
-        );
-
-        const root = container.firstElementChild as HTMLTableElement;
-        const head = container.querySelector("thead") as HTMLTableSectionElement;
-        const body = container.querySelector("tbody") as HTMLTableSectionElement;
-        const row = screen.getAllByRole("row")[0];
-        const headerCell = screen.getByRole("columnheader", { name: "Name" });
-        const cell = screen.getByRole("cell", { name: "Ada" });
-        const caption = screen.getByText("Users");
-
-        expect(root).toHaveClass("custom-root");
-        expect(head).toHaveClass("custom-head");
-        expect(body).toHaveClass("custom-body");
-        expect(row).toHaveClass("custom-row");
-        expect(headerCell).toHaveClass("custom-header-cell");
-        expect(cell).toHaveClass("custom-cell");
-        expect(caption).toHaveClass("custom-caption");
-    });
-
-    it("forwards ref to table root", async () => {
-        const ref = createRef<HTMLTableElement>();
-
-        await render(
-            <Table ref={ref}>
-                <Table.Body>
-                    <Table.Row>
-                        <Table.Cell>Ada</Table.Cell>
-                    </Table.Row>
-                </Table.Body>
-            </Table>
-        );
-
-        expect(ref.current).toBeInstanceOf(HTMLTableElement);
-        expect(ref.current?.tagName).toBe("TABLE");
-    });
-});

package/src/components/table/table.tsx

@@ -1,91 +0,0 @@
-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";
-import { TableClassNames, TableFactoryPayload, TableProps } from "./table.types";
-
-const defaultProps = {
-    size: "md",
-    radius: "default",
-    striped: false,
-    highlightOnHover: false,
-    withRowBorders: true,
-    withColumnBorders: false
-} satisfies Partial<TableProps>;
-
-const Table = factory<TableFactoryPayload>((_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: keyof TableClassNames) => classes[part],
-        [classes]
-    );
-
-    return (
-        <TableProvider
-            value={{
-                size,
-                radius,
-                striped,
-                highlightOnHover,
-                withRowBorders,
-                withColumnBorders,
-                getStyles
-            }}
-        >
-            <table
-                ref={ref}
-                id={_id}
-                className={cx(
-                    "w-full border-collapse text-left text-[var(--refraktor-text)]",
-                    getRadius(radius),
-                    classes.root,
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </table>
-        </TableProvider>
-    );
-});
-
-Table.displayName = "@refraktor/core/Table";
-Table.configure = createComponentConfig<TableProps>();
-Table.classNames = createClassNamesConfig<TableClassNames>();
-Table.Head = TableHead;
-Table.Body = TableBody;
-Table.Row = TableRow;
-Table.HeaderCell = TableHeaderCell;
-Table.Cell = TableCell;
-Table.Caption = TableCaption;
-
-export default Table;

package/src/components/table/table.types.ts

@@ -1,145 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { TableBody } from "./table-body";
-import { TableCaption } from "./table-caption";
-import { TableCell } from "./table-cell";
-import { TableHead } from "./table-head";
-import { TableHeaderCell } from "./table-header-cell";
-import { TableRow } from "./table-row";
-
-export type TableClassNames = {
-    root?: string;
-    head?: string;
-    body?: string;
-    row?: string;
-    headerCell?: string;
-    cell?: string;
-    caption?: string;
-};
-
-export interface TableProps extends ComponentPropsWithoutRef<"table"> {
-    /** Children containing table subcomponents */
-    children: ReactNode;
-
-    /** Shared table size @default `md` */
-    size?: RefraktorSize;
-
-    /** Shared table radius @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Whether odd body rows are striped @default `false` */
-    striped?: boolean;
-
-    /** Whether body rows highlight on hover @default `false` */
-    highlightOnHover?: boolean;
-
-    /** Whether body rows have bottom border @default `true` */
-    withRowBorders?: boolean;
-
-    /** Whether cells have vertical separators @default `false` */
-    withColumnBorders?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: TableClassNames;
-}
-
-export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {
-    /** Header content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TableBodyProps extends ComponentPropsWithoutRef<"tbody"> {
-    /** Body content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
-    /** Row content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TableHeaderCellProps extends ComponentPropsWithoutRef<"th"> {
-    /** Header cell content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TableCellProps extends ComponentPropsWithoutRef<"td"> {
-    /** Cell content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TableCaptionProps extends ComponentPropsWithoutRef<"caption"> {
-    /** Caption content */
-    children?: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface TableFactoryPayload extends FactoryPayload {
-    props: TableProps;
-    ref: HTMLTableElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<TableProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<TableClassNames>>;
-        Head: typeof TableHead;
-        Body: typeof TableBody;
-        Row: typeof TableRow;
-        HeaderCell: typeof TableHeaderCell;
-        Cell: typeof TableCell;
-        Caption: typeof TableCaption;
-    };
-}
-
-export interface TableHeadFactoryPayload extends FactoryPayload {
-    props: TableHeadProps;
-    ref: HTMLTableSectionElement;
-}
-
-export interface TableBodyFactoryPayload extends FactoryPayload {
-    props: TableBodyProps;
-    ref: HTMLTableSectionElement;
-}
-
-export interface TableRowFactoryPayload extends FactoryPayload {
-    props: TableRowProps;
-    ref: HTMLTableRowElement;
-}
-
-export interface TableHeaderCellFactoryPayload extends FactoryPayload {
-    props: TableHeaderCellProps;
-    ref: HTMLTableCellElement;
-}
-
-export interface TableCellFactoryPayload extends FactoryPayload {
-    props: TableCellProps;
-    ref: HTMLTableCellElement;
-}
-
-export interface TableCaptionFactoryPayload extends FactoryPayload {
-    props: TableCaptionProps;
-    ref: HTMLTableCaptionElement;
-}

package/src/components/tabs/index.ts

@@ -1,18 +0,0 @@
-export { default as Tabs } from "./tabs";
-export { TabsList } from "./tabs-list";
-export { TabsTab } from "./tabs-tab";
-export { TabsPanel } from "./tabs-panel";
-export type {
-    TabsProps,
-    TabsListProps,
-    TabsTabProps,
-    TabsPanelProps,
-    TabsClassNames,
-    TabsOrientation,
-    TabsActivationMode,
-    TabsVariant,
-    TabsFactoryPayload,
-    TabsListFactoryPayload,
-    TabsTabFactoryPayload,
-    TabsPanelFactoryPayload
-} from "./tabs.types";

package/src/components/tabs/tabs-list/index.ts

@@ -1 +0,0 @@
-export { default as TabsList } from "./tabs-list";

package/src/components/tabs/tabs-list/tabs-list.tsx

@@ -1,42 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useTabsContext } from "../tabs.context";
-import { getSize, getVariant } from "../tabs.styles";
-import { TabsListFactoryPayload } from "../tabs.types";
-
-const TabsList = factory<TabsListFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const { orientation, size, radius, variant, getStyles } =
-            useTabsContext();
-
-        const sizeStyles = getSize(size);
-        const variantStyles = getVariant(variant, orientation);
-
-        return (
-            <div
-                ref={ref}
-                role="tablist"
-                aria-orientation={orientation}
-                className={cx(
-                    "inline-flex shrink-0",
-                    orientation === "horizontal"
-                        ? "w-full flex-row items-center"
-                        : "flex-col items-stretch",
-                    sizeStyles.list,
-                    variantStyles.list,
-                    variant !== "underline" && getRadius(radius),
-                    getStyles("list"),
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-TabsList.displayName = "@refraktor/core/Tabs.List";
-
-export default TabsList;

package/src/components/tabs/tabs-panel/index.ts

@@ -1 +0,0 @@
-export { default as TabsPanel } from "./tabs-panel";