@refraktor/core 0.0.3 → 0.0.5

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

@@ -1,58 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useTabsContext } from "../tabs.context";
-import { getSize, getVariant } from "../tabs.styles";
-import { TabsPanelFactoryPayload } from "../tabs.types";
-
-const TabsPanel = factory<TabsPanelFactoryPayload>(
-    ({ value, children, className, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const {
-            value: activeValue,
-            keepMounted,
-            orientation,
-            size,
-            radius,
-            variant,
-            getTabId,
-            getPanelId,
-            getStyles
-        } = useTabsContext();
-
-        const isActive = activeValue === value;
-
-        if (!keepMounted && !isActive) {
-            return null;
-        }
-
-        const sizeStyles = getSize(size);
-        const variantStyles = getVariant(variant, orientation);
-
-        return (
-            <div
-                ref={ref}
-                id={getPanelId(value)}
-                role="tabpanel"
-                aria-labelledby={getTabId(value)}
-                data-active={isActive}
-                tabIndex={isActive ? 0 : -1}
-                hidden={!isActive}
-                className={cx(
-                    "outline-none",
-                    sizeStyles.panel,
-                    variantStyles.panel,
-                    variant !== "underline" && getRadius(radius),
-                    getStyles("panel"),
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-TabsPanel.displayName = "@refraktor/core/Tabs.Panel";
-
-export default TabsPanel;

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

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

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

@@ -1,210 +0,0 @@
-import { useMergedRefs } from "@refraktor/utils";
-import { MutableRefObject, useEffect, useMemo, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { getNavigableTabs, useTabsContext } from "../tabs.context";
-import { getSize, getVariant } from "../tabs.styles";
-import { TabsTabFactoryPayload } from "../tabs.types";
-
-const TabsTab = factory<TabsTabFactoryPayload>(
-    (
-        {
-            value,
-            disabled,
-            children,
-            className,
-            onClick,
-            onFocus,
-            onKeyDown,
-            ...props
-        },
-        ref
-    ) => {
-        const { cx, getRadius } = useTheme();
-        const {
-            value: activeValue,
-            onValueChange,
-            orientation,
-            activationMode,
-            loop,
-            size,
-            radius,
-            variant,
-            registerTab,
-            getTabs,
-            getTabId,
-            getPanelId,
-            getStyles
-        } = useTabsContext();
-
-        const localRef = useRef<HTMLButtonElement>(null);
-        const mergedRef = useMergedRefs(ref, localRef);
-
-        useEffect(() => {
-            return registerTab({
-                value,
-                ref: localRef as MutableRefObject<HTMLElement | null>,
-                disabled: !!disabled
-            });
-        }, [value, disabled, registerTab]);
-
-        const sizeStyles = getSize(size);
-        const variantStyles = getVariant(variant, orientation);
-        const isActive = activeValue === value;
-
-        const isTabStop = useMemo(() => {
-            const firstEnabledTab = getNavigableTabs(getTabs())[0];
-
-            if (disabled) {
-                return false;
-            }
-
-            return (
-                isActive || (!activeValue && firstEnabledTab?.value === value)
-            );
-        }, [activeValue, disabled, getTabs, isActive, value]);
-
-        const handleMove = (direction: -1 | 1) => {
-            const tabs = getNavigableTabs(getTabs());
-
-            if (!tabs.length) {
-                return;
-            }
-
-            const currentIndex = tabs.findIndex((tab) => tab.value === value);
-
-            if (currentIndex === -1) {
-                return;
-            }
-
-            let nextIndex = currentIndex + direction;
-
-            if (loop) {
-                nextIndex = (nextIndex + tabs.length) % tabs.length;
-            } else {
-                nextIndex = Math.min(Math.max(nextIndex, 0), tabs.length - 1);
-            }
-
-            if (nextIndex === currentIndex) {
-                return;
-            }
-
-            const nextTab = tabs[nextIndex];
-            nextTab.ref.current?.focus();
-        };
-
-        const handleBoundary = (type: "first" | "last") => {
-            const tabs = getNavigableTabs(getTabs());
-
-            if (!tabs.length) {
-                return;
-            }
-
-            const target = type === "first" ? tabs[0] : tabs[tabs.length - 1];
-
-            target.ref.current?.focus();
-        };
-
-        return (
-            <button
-                ref={mergedRef}
-                id={getTabId(value)}
-                type="button"
-                role="tab"
-                aria-selected={isActive}
-                aria-controls={getPanelId(value)}
-                aria-disabled={disabled}
-                disabled={disabled}
-                data-active={isActive}
-                data-disabled={disabled}
-                tabIndex={isTabStop ? 0 : -1}
-                className={cx(
-                    "inline-flex items-center justify-center select-none outline-none transition-colors cursor-pointer",
-                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
-                    "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
-                    sizeStyles.tab,
-                    variantStyles.tab,
-                    isActive
-                        ? variantStyles.tabActive
-                        : variantStyles.tabInactive,
-                    variant !== "underline" && getRadius(radius),
-                    getStyles("tab"),
-                    className
-                )}
-                onClick={(event) => {
-                    onClick?.(event);
-
-                    if (event.defaultPrevented || disabled) {
-                        return;
-                    }
-
-                    onValueChange(value);
-                }}
-                onFocus={(event) => {
-                    onFocus?.(event);
-
-                    if (event.defaultPrevented || disabled) {
-                        return;
-                    }
-
-                    if (activationMode === "automatic" && !isActive) {
-                        onValueChange(value);
-                    }
-                }}
-                onKeyDown={(event) => {
-                    onKeyDown?.(event);
-
-                    if (event.defaultPrevented || disabled) {
-                        return;
-                    }
-
-                    const previousKey =
-                        orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-                    const nextKey =
-                        orientation === "horizontal"
-                            ? "ArrowRight"
-                            : "ArrowDown";
-
-                    if (event.key === previousKey) {
-                        event.preventDefault();
-                        handleMove(-1);
-                        return;
-                    }
-
-                    if (event.key === nextKey) {
-                        event.preventDefault();
-                        handleMove(1);
-                        return;
-                    }
-
-                    if (event.key === "Home") {
-                        event.preventDefault();
-                        handleBoundary("first");
-                        return;
-                    }
-
-                    if (event.key === "End") {
-                        event.preventDefault();
-                        handleBoundary("last");
-                        return;
-                    }
-
-                    if (
-                        activationMode === "manual" &&
-                        (event.key === "Enter" || event.key === " ")
-                    ) {
-                        event.preventDefault();
-                        onValueChange(value);
-                    }
-                }}
-                {...props}
-            >
-                {children}
-            </button>
-        );
-    }
-);
-
-TabsTab.displayName = "@refraktor/core/Tabs.Tab";
-
-export default TabsTab;

package/src/components/tabs/tabs.context.ts

@@ -1,88 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { MutableRefObject, useCallback, useRef } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    TabsActivationMode,
-    TabsClassNames,
-    TabsOrientation,
-    TabsVariant
-} from "./tabs.types";
-
-export interface TabRegistration {
-    value: string;
-    ref: MutableRefObject<HTMLElement | null>;
-    disabled: boolean;
-}
-
-export interface TabsContextValue {
-    value: string;
-    onValueChange: (value: string) => void;
-    orientation: TabsOrientation;
-    activationMode: TabsActivationMode;
-    loop: boolean;
-    keepMounted: boolean;
-    size: RefraktorSize;
-    radius: RefraktorRadius;
-    variant: TabsVariant;
-    registerTab: (tab: TabRegistration) => () => void;
-    getTabs: () => TabRegistration[];
-    getTabId: (value: string) => string;
-    getPanelId: (value: string) => string;
-    getStyles: (part: keyof TabsClassNames) => string | undefined;
-}
-
-export const [TabsProvider, useTabsContext] =
-    createSafeContext<TabsContextValue>(
-        "Tabs component was not found in tree. Make sure Tabs.List, Tabs.Tab and Tabs.Panel are wrapped with Tabs."
-    );
-
-export function useTabsRegistry() {
-    const tabsRef = useRef<TabRegistration[]>([]);
-
-    const registerTab = useCallback((tab: TabRegistration) => {
-        tabsRef.current = [
-            ...tabsRef.current.filter((x) => x.value !== tab.value),
-            tab
-        ];
-
-        return () => {
-            tabsRef.current = tabsRef.current.filter(
-                (x) => x.value !== tab.value
-            );
-        };
-    }, []);
-
-    const getTabs = useCallback(() => sortTabs(tabsRef.current), []);
-
-    return {
-        registerTab,
-        getTabs
-    };
-}
-
-export function sortTabs(tabs: TabRegistration[]) {
-    return [...tabs].sort((a, b) => {
-        const aNode = a.ref.current;
-        const bNode = b.ref.current;
-
-        if (!aNode || !bNode || aNode === bNode) {
-            return 0;
-        }
-
-        const position = aNode.compareDocumentPosition(bNode);
-
-        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
-            return -1;
-        }
-
-        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-            return 1;
-        }
-
-        return 0;
-    });
-}
-
-export function getNavigableTabs(tabs: TabRegistration[]) {
-    return tabs.filter((tab) => !tab.disabled);
-}

package/src/components/tabs/tabs.styles.ts

@@ -1,92 +0,0 @@
-import { RefraktorSize } from "../../theme";
-import { TabsOrientation, TabsVariant } from "./tabs.types";
-
-type TabsSizeStyles = {
-    list: string;
-    tab: string;
-    panel: string;
-};
-
-type TabsVariantStyles = {
-    list: string;
-    tab: string;
-    tabActive: string;
-    tabInactive: string;
-    panel: string;
-};
-
-const sizes: Record<RefraktorSize, TabsSizeStyles> = {
-    xs: {
-        list: "p-0.5 gap-0.5",
-        tab: "h-6 px-2 text-xs",
-        panel: "pt-2 text-xs"
-    },
-    sm: {
-        list: "p-0.5 gap-0.5",
-        tab: "h-7 px-2.5 text-xs",
-        panel: "pt-2.5 text-sm"
-    },
-    md: {
-        list: "p-1 gap-1",
-        tab: "h-8 px-3 text-sm",
-        panel: "pt-3 text-sm"
-    },
-    lg: {
-        list: "p-1 gap-1",
-        tab: "h-9 px-3.5 text-base",
-        panel: "pt-3.5 text-base"
-    },
-    xl: {
-        list: "p-1.5 gap-1.5",
-        tab: "h-10 px-4 text-lg",
-        panel: "pt-4 text-lg"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-const variants: Record<TabsVariant, TabsVariantStyles> = {
-    pills: {
-        list: "bg-transparent",
-        tab: "border border-transparent",
-        tabActive:
-            "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]",
-        tabInactive:
-            "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]",
-        panel: "text-[var(--refraktor-text)]"
-    },
-    underline: {
-        list: "",
-        tab: "border-transparent",
-        tabActive: "text-[var(--refraktor-text)]",
-        tabInactive:
-            "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)]",
-        panel: "text-[var(--refraktor-text)]"
-    }
-};
-
-export function getVariant(
-    variant: TabsVariant = "underline",
-    orientation: TabsOrientation = "horizontal"
-): TabsVariantStyles {
-    const styles = variants[variant];
-
-    if (variant !== "underline") {
-        return styles;
-    }
-
-    return {
-        ...styles,
-        list: orientation === "horizontal" ? "gap-1" : "gap-1 pr-1",
-        tab:
-            orientation === "horizontal"
-                ? "rounded-t-[var(--refraktor-radius-sm)] border-b-2 border-transparent"
-                : "rounded-l-[var(--refraktor-radius-sm)] border-r-2 border-transparent justify-start",
-        tabActive:
-            orientation === "horizontal"
-                ? "text-[var(--refraktor-text)] border-[var(--refraktor-primary)]"
-                : "text-[var(--refraktor-text)] border-[var(--refraktor-primary)]",
-        tabInactive:
-            "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] hover:border-[var(--refraktor-primary)]"
-    };
-}

package/src/components/tabs/tabs.test.tsx

@@ -1,167 +0,0 @@
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent } from "../../vitest";
-import Tabs from "./tabs";
-
-describe("@refraktor/core/Tabs", () => {
-    it("renders default active tab and panel", async () => {
-        await render(
-            <Tabs defaultValue="account">
-                <Tabs.List>
-                    <Tabs.Tab value="account">Account</Tabs.Tab>
-                    <Tabs.Tab value="security">Security</Tabs.Tab>
-                </Tabs.List>
-
-                <Tabs.Panel value="account">Account panel</Tabs.Panel>
-                <Tabs.Panel value="security">Security panel</Tabs.Panel>
-            </Tabs>
-        );
-
-        expect(screen.getByRole("tab", { name: "Account" })).toHaveAttribute(
-            "aria-selected",
-            "true"
-        );
-        expect(screen.getByText("Account panel")).toBeInTheDocument();
-        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
-    });
-
-    it("supports controlled mode", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        function Demo() {
-            const [value, setValue] = useState("account");
-
-            return (
-                <Tabs
-                    value={value}
-                    onChange={(nextValue) => {
-                        onChange(nextValue);
-                        setValue(nextValue);
-                    }}
-                >
-                    <Tabs.List>
-                        <Tabs.Tab value="account">Account</Tabs.Tab>
-                        <Tabs.Tab value="security">Security</Tabs.Tab>
-                    </Tabs.List>
-
-                    <Tabs.Panel value="account">Account panel</Tabs.Panel>
-                    <Tabs.Panel value="security">Security panel</Tabs.Panel>
-                </Tabs>
-            );
-        }
-
-        await render(<Demo />);
-        await user.click(screen.getByRole("tab", { name: "Security" }));
-
-        expect(onChange).toHaveBeenCalledWith("security");
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("supports keyboard navigation with automatic activation", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Tabs defaultValue="account">
-                <Tabs.List>
-                    <Tabs.Tab value="account">Account</Tabs.Tab>
-                    <Tabs.Tab value="security">Security</Tabs.Tab>
-                    <Tabs.Tab value="billing">Billing</Tabs.Tab>
-                </Tabs.List>
-
-                <Tabs.Panel value="account">Account panel</Tabs.Panel>
-                <Tabs.Panel value="security">Security panel</Tabs.Panel>
-                <Tabs.Panel value="billing">Billing panel</Tabs.Panel>
-            </Tabs>
-        );
-
-        screen.getByRole("tab", { name: "Account" }).focus();
-        await user.keyboard("{ArrowRight}");
-
-        expect(screen.getByRole("tab", { name: "Security" })).toHaveAttribute(
-            "aria-selected",
-            "true"
-        );
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("supports manual activation mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Tabs defaultValue="account" activationMode="manual">
-                <Tabs.List>
-                    <Tabs.Tab value="account">Account</Tabs.Tab>
-                    <Tabs.Tab value="security">Security</Tabs.Tab>
-                </Tabs.List>
-
-                <Tabs.Panel value="account">Account panel</Tabs.Panel>
-                <Tabs.Panel value="security">Security panel</Tabs.Panel>
-            </Tabs>
-        );
-
-        screen.getByRole("tab", { name: "Account" }).focus();
-        await user.keyboard("{ArrowRight}");
-
-        expect(screen.getByRole("tab", { name: "Account" })).toHaveAttribute(
-            "aria-selected",
-            "true"
-        );
-        expect(screen.getByRole("tab", { name: "Security" })).toHaveFocus();
-
-        await user.keyboard("{Enter}");
-
-        expect(screen.getByRole("tab", { name: "Security" })).toHaveAttribute(
-            "aria-selected",
-            "true"
-        );
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("keeps inactive panels mounted when keepMounted is true", async () => {
-        await render(
-            <Tabs defaultValue="account" keepMounted>
-                <Tabs.List>
-                    <Tabs.Tab value="account">Account</Tabs.Tab>
-                    <Tabs.Tab value="security">Security</Tabs.Tab>
-                </Tabs.List>
-
-                <Tabs.Panel value="account">Account panel</Tabs.Panel>
-                <Tabs.Panel value="security">Security panel</Tabs.Panel>
-            </Tabs>
-        );
-
-        const hiddenPanel = screen.getByText("Security panel");
-
-        expect(hiddenPanel).toBeInTheDocument();
-        expect(hiddenPanel).toHaveAttribute("hidden");
-    });
-
-    it("skips disabled tabs during keyboard navigation", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Tabs defaultValue="account">
-                <Tabs.List>
-                    <Tabs.Tab value="account">Account</Tabs.Tab>
-                    <Tabs.Tab value="security" disabled>
-                        Security
-                    </Tabs.Tab>
-                    <Tabs.Tab value="billing">Billing</Tabs.Tab>
-                </Tabs.List>
-
-                <Tabs.Panel value="account">Account panel</Tabs.Panel>
-                <Tabs.Panel value="billing">Billing panel</Tabs.Panel>
-            </Tabs>
-        );
-
-        screen.getByRole("tab", { name: "Account" }).focus();
-        await user.keyboard("{ArrowRight}");
-
-        expect(screen.getByRole("tab", { name: "Billing" })).toHaveAttribute(
-            "aria-selected",
-            "true"
-        );
-        expect(screen.getByText("Billing panel")).toBeInTheDocument();
-    });
-});