@refraktor/core 0.0.1

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@refraktor/core",
+    "version": "0.0.1",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./build/index.js",
+    "module": "./build/index.js",
+    "types": "./build/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./build/index.d.ts",
+            "import": "./build/index.js"
+        },
+        "./style.css": "./build/style.css"
+    },
+    "scripts": {
+        "build": "tsc && tailwindcss -i src/style.css -o build/style.css --minify",
+        "dev": "concurrently \"tsc --watch\" \"tailwindcss -i src/style.css -o build/style.css --watch\"",
+        "test": "vitest"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "@refraktor/utils": "0.0.1"
+    },
+    "devDependencies": {
+        "typescript": "^5.9.3"
+    },
+    "dependencies": {
+        "@floating-ui/react": "^0.27.6",
+        "clsx": "^2.1.1",
+        "react-remove-scroll": "^2.7.2",
+        "react-textarea-autosize": "^8.5.9",
+        "tailwind-merge": "^3.4.0"
+    }
+}

package/src/components/accordion/accordion-control/accordion-control.tsx

@@ -0,0 +1,156 @@
+import { ChevronIcon } from "../../../icons";
+import { useMergedRefs } from "@refraktor/utils";
+import { MutableRefObject, useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import {
+    getNavigableAccordionItems,
+    useAccordionContext,
+    useAccordionItemContext
+} from "../accordion.context";
+import { getSize, getVariant } from "../accordion.styles";
+import { AccordionControlFactoryPayload } from "../accordion.types";
+
+const AccordionControl = factory<AccordionControlFactoryPayload>(
+    ({ children, chevron, className, onClick, onKeyDown, ...props }, ref) => {
+        const { cx } = useTheme();
+        const {
+            size,
+            variant,
+            isItemOpen,
+            toggleItem,
+            registerItem,
+            getItems,
+            getControlId,
+            getPanelId,
+            getStyles
+        } = useAccordionContext();
+        const item = useAccordionItemContext();
+
+        const localRef = useRef<HTMLButtonElement>(null);
+        const mergedRef = useMergedRefs(ref, localRef);
+
+        useEffect(() => {
+            return registerItem({
+                value: item.value,
+                ref: localRef as MutableRefObject<HTMLElement | null>,
+                disabled: item.disabled
+            });
+        }, [item.value, item.disabled, registerItem]);
+
+        const isOpen = isItemOpen(item.value);
+        const sizeStyles = getSize(size);
+        const variantStyles = getVariant(variant);
+
+        const moveFocus = (direction: -1 | 1) => {
+            const items = getNavigableAccordionItems(getItems());
+
+            if (!items.length) {
+                return;
+            }
+
+            const currentIndex = items.findIndex((x) => x.value === item.value);
+
+            if (currentIndex === -1) {
+                return;
+            }
+
+            const nextIndex =
+                (currentIndex + direction + items.length) % items.length;
+
+            items[nextIndex].ref.current?.focus();
+        };
+
+        const focusBoundary = (type: "first" | "last") => {
+            const items = getNavigableAccordionItems(getItems());
+
+            if (!items.length) {
+                return;
+            }
+
+            const target = type === "first" ? items[0] : items[items.length - 1];
+
+            target.ref.current?.focus();
+        };
+
+        return (
+            <button
+                ref={mergedRef}
+                id={getControlId(item.value)}
+                type="button"
+                aria-expanded={isOpen}
+                aria-controls={getPanelId(item.value)}
+                disabled={item.disabled}
+                data-opened={isOpen}
+                data-disabled={item.disabled}
+                className={cx(
+                    "w-full inline-flex items-center justify-between gap-2 text-left 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",
+                    "text-[var(--refraktor-text)]",
+                    sizeStyles.control,
+                    variantStyles.control,
+                    getStyles("control"),
+                    className
+                )}
+                onClick={(event) => {
+                    onClick?.(event);
+
+                    if (event.defaultPrevented || item.disabled) {
+                        return;
+                    }
+
+                    toggleItem(item.value);
+                }}
+                onKeyDown={(event) => {
+                    onKeyDown?.(event);
+
+                    if (event.defaultPrevented || item.disabled) {
+                        return;
+                    }
+
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        moveFocus(1);
+                        return;
+                    }
+
+                    if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        moveFocus(-1);
+                        return;
+                    }
+
+                    if (event.key === "Home") {
+                        event.preventDefault();
+                        focusBoundary("first");
+                        return;
+                    }
+
+                    if (event.key === "End") {
+                        event.preventDefault();
+                        focusBoundary("last");
+                    }
+                }}
+                {...props}
+            >
+                <span>{children}</span>
+
+                <span
+                    className={cx(
+                        "shrink-0 transition-transform",
+                        sizeStyles.chevron,
+                        isOpen && "rotate-180",
+                        getStyles("chevron")
+                    )}
+                >
+                    {chevron ?? <ChevronIcon direction="down" size="100%" />}
+                </span>
+            </button>
+        );
+    }
+);
+
+AccordionControl.displayName = "@refraktor/core/Accordion.Control";
+
+export default AccordionControl;

package/src/components/accordion/accordion-control/index.ts

@@ -0,0 +1 @@
+export { default as AccordionControl } from "./accordion-control";

package/src/components/accordion/accordion-item/accordion-item.tsx

@@ -0,0 +1,40 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import {
+    AccordionItemProvider,
+    useAccordionContext
+} from "../accordion.context";
+import { getVariant } from "../accordion.styles";
+import { AccordionItemFactoryPayload } from "../accordion.types";
+
+const AccordionItem = factory<AccordionItemFactoryPayload>(
+    ({ value, disabled, children, className, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const { variant, radius, isItemOpen, getStyles } = useAccordionContext();
+        const variantStyles = getVariant(variant);
+
+        return (
+            <AccordionItemProvider value={{ value, disabled: !!disabled }}>
+                <div
+                    ref={ref}
+                    data-opened={isItemOpen(value)}
+                    data-disabled={disabled}
+                    className={cx(
+                        "overflow-hidden",
+                        variantStyles.item,
+                        variant === "separated" && getRadius(radius),
+                        getStyles("item"),
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </AccordionItemProvider>
+        );
+    }
+);
+
+AccordionItem.displayName = "@refraktor/core/Accordion.Item";
+
+export default AccordionItem;

package/src/components/accordion/accordion-item/index.ts

@@ -0,0 +1 @@
+export { default as AccordionItem } from "./accordion-item";

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

@@ -0,0 +1,58 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import {
+    useAccordionContext,
+    useAccordionItemContext
+} from "../accordion.context";
+import { getSize, getVariant } from "../accordion.styles";
+import { AccordionPanelFactoryPayload } from "../accordion.types";
+
+const AccordionPanel = factory<AccordionPanelFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const {
+            keepMounted,
+            size,
+            variant,
+            isItemOpen,
+            getControlId,
+            getPanelId,
+            getStyles
+        } = useAccordionContext();
+        const item = useAccordionItemContext();
+
+        const isOpen = isItemOpen(item.value);
+
+        if (!keepMounted && !isOpen) {
+            return null;
+        }
+
+        const sizeStyles = getSize(size);
+        const variantStyles = getVariant(variant);
+
+        return (
+            <div
+                ref={ref}
+                id={getPanelId(item.value)}
+                role="region"
+                aria-labelledby={getControlId(item.value)}
+                data-opened={isOpen}
+                hidden={!isOpen}
+                className={cx(
+                    "outline-none",
+                    sizeStyles.panel,
+                    variantStyles.panel,
+                    getStyles("panel"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+AccordionPanel.displayName = "@refraktor/core/Accordion.Panel";
+
+export default AccordionPanel;

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

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

package/src/components/accordion/accordion.context.ts

@@ -0,0 +1,93 @@
+import { createSafeContext } from "@refraktor/utils";
+import { MutableRefObject, useCallback, useRef } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { AccordionClassNames, AccordionVariant } from "./accordion.types";
+
+export interface AccordionItemRegistration {
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+}
+
+export interface AccordionContextValue {
+    openValues: string[];
+    multiple: boolean;
+    collapsible: boolean;
+    keepMounted: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: AccordionVariant;
+    toggleItem: (value: string) => void;
+    isItemOpen: (value: string) => boolean;
+    registerItem: (item: AccordionItemRegistration) => () => void;
+    getItems: () => AccordionItemRegistration[];
+    getControlId: (value: string) => string;
+    getPanelId: (value: string) => string;
+    getStyles: (part: keyof AccordionClassNames) => string | undefined;
+}
+
+export interface AccordionItemContextValue {
+    value: string;
+    disabled: boolean;
+}
+
+export const [AccordionProvider, useAccordionContext] =
+    createSafeContext<AccordionContextValue>(
+        "Accordion component was not found in tree. Make sure Accordion.Item, Accordion.Control and Accordion.Panel are wrapped with Accordion."
+    );
+
+export const [AccordionItemProvider, useAccordionItemContext] =
+    createSafeContext<AccordionItemContextValue>(
+        "Accordion.Item component was not found in tree. Make sure Accordion.Control and Accordion.Panel are wrapped with Accordion.Item."
+    );
+
+export function useAccordionItemsRegistry() {
+    const itemsRef = useRef<AccordionItemRegistration[]>([]);
+
+    const registerItem = useCallback((item: AccordionItemRegistration) => {
+        itemsRef.current = [
+            ...itemsRef.current.filter((x) => x.value !== item.value),
+            item
+        ];
+
+        return () => {
+            itemsRef.current = itemsRef.current.filter(
+                (x) => x.value !== item.value
+            );
+        };
+    }, []);
+
+    const getItems = useCallback(() => sortAccordionItems(itemsRef.current), []);
+
+    return {
+        registerItem,
+        getItems
+    };
+}
+
+export function sortAccordionItems(items: AccordionItemRegistration[]) {
+    return [...items].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 getNavigableAccordionItems(items: AccordionItemRegistration[]) {
+    return items.filter((item) => !item.disabled);
+}

package/src/components/accordion/accordion.styles.ts

@@ -0,0 +1,60 @@
+import { RefraktorSize } from "../../theme";
+import { AccordionVariant } from "./accordion.types";
+
+type AccordionSizeStyles = {
+    control: string;
+    panel: string;
+    chevron: string;
+};
+
+type AccordionVariantStyles = {
+    item: string;
+    control: string;
+    panel: string;
+};
+
+const sizes: Record<RefraktorSize, AccordionSizeStyles> = {
+    xs: {
+        control: "min-h-7 px-2 py-1 text-xs",
+        panel: "px-2 pb-2 text-xs",
+        chevron: "size-3"
+    },
+    sm: {
+        control: "min-h-8 px-2.5 py-1.5 text-sm",
+        panel: "px-2.5 pb-2.5 text-sm",
+        chevron: "size-3.5"
+    },
+    md: {
+        control: "min-h-9 px-3 py-2 text-sm",
+        panel: "px-3 pb-3 text-sm",
+        chevron: "size-4"
+    },
+    lg: {
+        control: "min-h-10 px-3.5 py-2.5 text-base",
+        panel: "px-3.5 pb-3.5 text-base",
+        chevron: "size-4.5"
+    },
+    xl: {
+        control: "min-h-11 px-4 py-3 text-lg",
+        panel: "px-4 pb-4 text-lg",
+        chevron: "size-5"
+    }
+};
+
+const variants: Record<AccordionVariant, AccordionVariantStyles> = {
+    default: {
+        item: "border-b border-[var(--refraktor-border)] last:border-b-0",
+        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
+        panel: "text-[var(--refraktor-text-secondary)]"
+    },
+    separated: {
+        item: "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]",
+        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
+        panel: "border-t border-[var(--refraktor-border)] text-[var(--refraktor-text-secondary)]"
+    }
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];
+
+export const getVariant = (variant: AccordionVariant = "default") =>
+    variants[variant];

package/src/components/accordion/accordion.test.tsx

@@ -0,0 +1,174 @@
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import Accordion from "./accordion";
+
+describe("@refraktor/core/Accordion", () => {
+    it("renders default opened item", async () => {
+        await render(
+            <Accordion defaultValue="account">
+                <Accordion.Item value="account">
+                    <Accordion.Control>Account</Accordion.Control>
+                    <Accordion.Panel>Account panel</Accordion.Panel>
+                </Accordion.Item>
+
+                <Accordion.Item value="security">
+                    <Accordion.Control>Security</Accordion.Control>
+                    <Accordion.Panel>Security panel</Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
+        );
+
+        expect(
+            screen.getByRole("button", { name: "Account" })
+        ).toHaveAttribute("aria-expanded", "true");
+        expect(screen.getByText("Account panel")).toBeInTheDocument();
+        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
+    });
+
+    it("toggles items in single mode", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Accordion defaultValue="account">
+                <Accordion.Item value="account">
+                    <Accordion.Control>Account</Accordion.Control>
+                    <Accordion.Panel>Account panel</Accordion.Panel>
+                </Accordion.Item>
+
+                <Accordion.Item value="security">
+                    <Accordion.Control>Security</Accordion.Control>
+                    <Accordion.Panel>Security panel</Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
+        );
+
+        await user.click(screen.getByRole("button", { name: "Security" }));
+
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+        expect(screen.queryByText("Account panel")).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole("button", { name: "Security" }));
+
+        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
+    });
+
+    it("supports multiple mode", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Accordion multiple defaultValue={["account"]}>
+                <Accordion.Item value="account">
+                    <Accordion.Control>Account</Accordion.Control>
+                    <Accordion.Panel>Account panel</Accordion.Panel>
+                </Accordion.Item>
+
+                <Accordion.Item value="security">
+                    <Accordion.Control>Security</Accordion.Control>
+                    <Accordion.Panel>Security panel</Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
+        );
+
+        await user.click(screen.getByRole("button", { name: "Security" }));
+
+        expect(screen.getByText("Account panel")).toBeInTheDocument();
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+
+    it("supports controlled mode", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        function Demo() {
+            const [value, setValue] = useState<string | null>("account");
+
+            return (
+                <Accordion
+                    value={value}
+                    onChange={(nextValue) => {
+                        onChange(nextValue);
+
+                        if (typeof nextValue === "string" || nextValue === null) {
+                            setValue(nextValue);
+                        }
+                    }}
+                >
+                    <Accordion.Item value="account">
+                        <Accordion.Control>Account</Accordion.Control>
+                        <Accordion.Panel>Account panel</Accordion.Panel>
+                    </Accordion.Item>
+
+                    <Accordion.Item value="security">
+                        <Accordion.Control>Security</Accordion.Control>
+                        <Accordion.Panel>Security panel</Accordion.Panel>
+                    </Accordion.Item>
+                </Accordion>
+            );
+        }
+
+        await render(<Demo />);
+
+        await user.click(screen.getByRole("button", { name: "Security" }));
+
+        expect(onChange).toHaveBeenCalledWith("security");
+        expect(screen.getByText("Security panel")).toBeInTheDocument();
+    });
+
+    it("supports keyboard navigation and skips disabled items", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Accordion defaultValue="account">
+                <Accordion.Item value="account">
+                    <Accordion.Control>Account</Accordion.Control>
+                    <Accordion.Panel>Account panel</Accordion.Panel>
+                </Accordion.Item>
+
+                <Accordion.Item value="security" disabled>
+                    <Accordion.Control>Security</Accordion.Control>
+                    <Accordion.Panel>Security panel</Accordion.Panel>
+                </Accordion.Item>
+
+                <Accordion.Item value="billing">
+                    <Accordion.Control>Billing</Accordion.Control>
+                    <Accordion.Panel>Billing panel</Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
+        );
+
+        const account = screen.getByRole("button", { name: "Account" });
+
+        account.focus();
+        await user.keyboard("{ArrowDown}");
+
+        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
+
+        await user.keyboard("{Home}");
+        expect(account).toHaveFocus();
+
+        await user.keyboard("{End}");
+        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
+    });
+
+    it("keeps closed panels mounted when keepMounted is true", async () => {
+        await render(
+            <Accordion defaultValue="account" keepMounted>
+                <Accordion.Item value="account">
+                    <Accordion.Control>Account</Accordion.Control>
+                    <Accordion.Panel>Account panel</Accordion.Panel>
+                </Accordion.Item>
+
+                <Accordion.Item value="security">
+                    <Accordion.Control>Security</Accordion.Control>
+                    <Accordion.Panel>Security panel</Accordion.Panel>
+                </Accordion.Item>
+            </Accordion>
+        );
+
+        const hiddenPanel = screen.getByText("Security panel");
+
+        expect(hiddenPanel).toBeInTheDocument();
+        expect(hiddenPanel).toHaveAttribute("hidden");
+    });
+});