@refraktor/core 0.0.3 → 0.0.5

package/src/components/drawer/drawer.test.tsx

@@ -1,166 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent, waitFor } from "../../vitest";
-import Drawer from "./drawer";
-import { DrawerContent } from "./drawer-content";
-import { DrawerOverlay } from "./drawer-overlay";
-import { DrawerRoot } from "./drawer-root";
-
-describe("@refraktor/core/Drawer", () => {
-    const transitionProps = {
-        duration: 0,
-        immediate: true
-    } as const;
-
-    it("renders with compound subcomponents and closes with header close button", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Drawer defaultOpened transitionProps={transitionProps}>
-                <Drawer.Overlay />
-
-                <Drawer.Content>
-                    <Drawer.Header text="Edit profile" />
-                    <p>Drawer body</p>
-                </Drawer.Content>
-            </Drawer>
-        );
-
-        expect(
-            await screen.findByRole("dialog", { name: "Edit profile" })
-        ).toBeInTheDocument();
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
-    });
-
-    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
-        const user = userEvent.setup();
-        const onOpenedChange = vi.fn();
-
-        await render(
-            <Drawer
-                opened
-                onOpenedChange={onOpenedChange}
-                transitionProps={transitionProps}
-            >
-                <Drawer.Overlay data-testid="overlay" />
-                <Drawer.Content>Controlled drawer</Drawer.Content>
-            </Drawer>
-        );
-
-        await user.click(await screen.findByTestId("overlay"));
-
-        expect(onOpenedChange).toHaveBeenCalledWith(false);
-    });
-
-    it("closes on Escape key", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Drawer defaultOpened transitionProps={transitionProps}>
-                <Drawer.Content>Keyboard close</Drawer.Content>
-            </Drawer>
-        );
-
-        await screen.findByRole("dialog");
-
-        await user.keyboard("{Escape}");
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
-    });
-
-    it("supports standalone subcomponents with DrawerRoot", async () => {
-        await render(
-            <DrawerRoot defaultOpened transitionProps={transitionProps}>
-                <DrawerOverlay />
-                <DrawerContent>Standalone composition</DrawerContent>
-            </DrawerRoot>
-        );
-
-        expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    });
-
-    it("applies custom overlay background opacity and blur", async () => {
-        await render(
-            <Drawer defaultOpened transitionProps={transitionProps}>
-                <Drawer.Overlay
-                    data-testid="overlay"
-                    backgroundOpacity={0.4}
-                    blur={6}
-                />
-                <Drawer.Content>Styled overlay</Drawer.Content>
-            </Drawer>
-        );
-
-        const overlay = await screen.findByTestId("overlay");
-
-        expect(overlay).toHaveStyle({
-            backgroundColor: "rgba(0, 0, 0, 0.4)",
-            backdropFilter: "blur(6px)"
-        });
-    });
-
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Drawer defaultOpened lockScroll transitionProps={transitionProps}>
-                <Drawer.Content>
-                    Scroll locked
-                    <Drawer.Close />
-                </Drawer.Content>
-            </Drawer>
-        );
-
-        await waitFor(() => {
-            expect(document.body).toHaveAttribute("data-scroll-locked");
-        });
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(document.body).not.toHaveAttribute("data-scroll-locked");
-        });
-    });
-
-    it("supports different positions and predefined sizes", async () => {
-        await render(
-            <>
-                <Drawer
-                    defaultOpened
-                    position="left"
-                    size="sm"
-                    transitionProps={transitionProps}
-                >
-                    <Drawer.Content data-testid="left-content">
-                        Left
-                    </Drawer.Content>
-                </Drawer>
-
-                <Drawer
-                    defaultOpened
-                    position="bottom"
-                    size="xl"
-                    transitionProps={transitionProps}
-                >
-                    <Drawer.Content data-testid="bottom-content">
-                        Bottom
-                    </Drawer.Content>
-                </Drawer>
-            </>
-        );
-
-        const leftContent = await screen.findByTestId("left-content");
-        const bottomContent = await screen.findByTestId("bottom-content");
-
-        expect(leftContent).toHaveAttribute("data-position", "left");
-        expect(leftContent).toHaveStyle({ width: "20rem" });
-        expect(bottomContent).toHaveAttribute("data-position", "bottom");
-        expect(bottomContent).toHaveStyle({ height: "36rem" });
-    });
-});

package/src/components/drawer/drawer.tsx

@@ -1,30 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory
-} from "../../utils";
-import { DrawerClose } from "./drawer-close";
-import { DrawerContent } from "./drawer-content";
-import { DrawerHeader } from "./drawer-header";
-import { DrawerOverlay } from "./drawer-overlay";
-import { DrawerRoot } from "./drawer-root";
-import {
-    DrawerClassNames,
-    DrawerFactoryPayload,
-    DrawerProps
-} from "./drawer.types";
-
-const Drawer = factory<DrawerFactoryPayload>((props, ref) => {
-    return <DrawerRoot {...props} ref={ref} />;
-});
-
-Drawer.displayName = "@refraktor/core/Drawer";
-Drawer.configure = createComponentConfig<DrawerProps>();
-Drawer.classNames = createClassNamesConfig<DrawerClassNames>();
-Drawer.Root = DrawerRoot;
-Drawer.Overlay = DrawerOverlay;
-Drawer.Content = DrawerContent;
-Drawer.Header = DrawerHeader;
-Drawer.Close = DrawerClose;
-
-export default Drawer;

package/src/components/drawer/drawer.types.ts

@@ -1,158 +0,0 @@
-import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import { TransitionProps } from "../transition";
-import { DrawerRoot } from "./drawer-root";
-import { DrawerOverlay } from "./drawer-overlay";
-import { DrawerContent } from "./drawer-content";
-import { DrawerHeader } from "./drawer-header";
-import { DrawerClose } from "./drawer-close";
-
-export type DrawerPosition = "left" | "right" | "top" | "bottom";
-
-export type DrawerClassNames = {
-    root?: string;
-    overlay?: string;
-    content?: string;
-    header?: string;
-    close?: string;
-};
-
-export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
-    /** Children containing drawer subcomponents */
-    children: ReactNode;
-
-    /** State of the drawer (controlled) */
-    opened?: boolean;
-
-    /** Initial state of the drawer (uncontrolled) */
-    defaultOpened?: boolean;
-
-    /** Callback called when drawer state changes */
-    onOpenedChange?: (opened: boolean) => void;
-
-    /** Whether to close drawer on overlay/outside click @default `true` */
-    closeOnClickOutside?: boolean;
-
-    /** Whether to close drawer on Escape key @default `true` */
-    closeOnEscape?: boolean;
-
-    /** Whether to lock body scroll while opened @default `true` */
-    lockScroll?: boolean;
-
-    /** Whether to render overlay/content inside portal @default `true` */
-    withinPortal?: boolean;
-
-    /** Radius for drawer content @default `none` */
-    radius?: RefraktorRadius;
-
-    /** Side where drawer appears @default `right` */
-    position?: DrawerPosition;
-
-    /** Drawer size scale (width for left/right, height for top/bottom) @default `md` */
-    size?: RefraktorSize;
-
-    /** Transition props for overlay/content, uses Transition internally */
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: DrawerClassNames;
-}
-
-export type DrawerRootProps = DrawerProps;
-
-export interface DrawerOverlayProps extends ComponentPropsWithoutRef<"div"> {
-    /** Whether clicking the overlay closes drawer @default `true` */
-    closeOnClick?: boolean;
-
-    /** Overlay background opacity @default `0.5` */
-    backgroundOpacity?: number;
-
-    /** Backdrop blur amount in px (or any CSS length) @default `0` */
-    blur?: number | string;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface DrawerContentProps extends ComponentPropsWithoutRef<"div"> {
-    /** Drawer body content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface DrawerHeaderProps extends ComponentPropsWithoutRef<"div"> {
-    /** Header content */
-    children?: ReactNode;
-
-    /** Shorthand header text */
-    text?: ReactNode;
-
-    /** Whether to show close button inside header @default `true` */
-    withClose?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface DrawerCloseProps extends Omit<
-    ComponentPropsWithoutRef<"button">,
-    "onClick"
-> {
-    /** Optional close content (defaults to `x`) */
-    children?: ReactNode;
-
-    /** Click callback fired before closing */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface DrawerFactoryPayload extends FactoryPayload {
-    props: DrawerProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<DrawerProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<DrawerClassNames>>;
-        Root: typeof DrawerRoot;
-        Overlay: typeof DrawerOverlay;
-        Content: typeof DrawerContent;
-        Header: typeof DrawerHeader;
-        Close: typeof DrawerClose;
-    };
-}
-
-export interface DrawerRootFactoryPayload extends FactoryPayload {
-    props: DrawerRootProps;
-    ref: HTMLDivElement;
-}
-
-export interface DrawerOverlayFactoryPayload extends FactoryPayload {
-    props: DrawerOverlayProps;
-    ref: HTMLDivElement;
-}
-
-export interface DrawerContentFactoryPayload extends FactoryPayload {
-    props: DrawerContentProps;
-    ref: HTMLDivElement;
-}
-
-export interface DrawerHeaderFactoryPayload extends FactoryPayload {
-    props: DrawerHeaderProps;
-    ref: HTMLDivElement;
-}
-
-export interface DrawerCloseFactoryPayload extends FactoryPayload {
-    props: DrawerCloseProps;
-    ref: HTMLButtonElement;
-}

package/src/components/drawer/index.ts

@@ -1,16 +0,0 @@
-export { default as Drawer } from "./drawer";
-export { DrawerRoot } from "./drawer-root";
-export { DrawerOverlay } from "./drawer-overlay";
-export { DrawerContent } from "./drawer-content";
-export { DrawerHeader } from "./drawer-header";
-export { DrawerClose } from "./drawer-close";
-export type {
-    DrawerProps,
-    DrawerRootProps,
-    DrawerOverlayProps,
-    DrawerContentProps,
-    DrawerHeaderProps,
-    DrawerCloseProps,
-    DrawerClassNames,
-    DrawerPosition
-} from "./drawer.types";

package/src/components/drawer/use-drawer.ts

@@ -1,101 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
-
-interface UseDrawerProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
-}
-
-export interface UseDrawerReturn {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-
-export function useDrawer(options: UseDrawerProps): UseDrawerReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside = true,
-        closeOnEscape = true,
-        contentRef
-    } = options;
-
-    const [isOpen, setIsOpen] = useUncontrolled({
-        value: opened,
-        defaultValue: defaultOpened,
-        finalValue: false,
-        onChange: onOpenedChange
-    });
-
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, [setIsOpen]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnEscape) {
-            return;
-        }
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener("keydown", handleKeyDown);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [closeOnEscape, isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnClickOutside) {
-            return;
-        }
-
-        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-            const target = event.target;
-
-            if (!(target instanceof Node)) {
-                return;
-            }
-
-            if (contentRef.current?.contains(target)) {
-                return;
-            }
-
-            setIsOpen(false);
-        };
-
-        document.addEventListener("mousedown", handlePointerDown);
-        document.addEventListener("touchstart", handlePointerDown);
-
-        return () => {
-            document.removeEventListener("mousedown", handlePointerDown);
-            document.removeEventListener("touchstart", handlePointerDown);
-        };
-    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
-
-    return {
-        opened: isOpen,
-        open,
-        close,
-        toggle
-    };
-}

package/src/components/index.ts

@@ -1,29 +0,0 @@
-export * from "./accordion";
-export * from "./avatar";
-export * from "./badge";
-export * from "./breadcrumbs";
-export * from "./button";
-export * from "./checkbox";
-export * from "./color-swatch";
-export * from "./drawer";
-export * from "./input";
-export * from "./loader";
-export * from "./modal";
-export * from "./menu";
-export * from "./number-input";
-export * from "./pagination";
-export * from "./popover";
-export * from "./portal";
-export * from "./progress";
-export * from "./progress-circle";
-export * from "./radio";
-export * from "./select";
-export * from "./segmented-control";
-export * from "./slider";
-export * from "./switch";
-export * from "./table";
-export * from "./tabs";
-export * from "./timeline";
-export * from "./textarea";
-export * from "./tooltip";
-export * from "./transition";

package/src/components/input/index.ts

@@ -1,2 +0,0 @@
-export { default as Input } from "./input";
-export * from "./input.types";

package/src/components/input/input-description/index.ts

@@ -1,2 +0,0 @@
-export { default as InputDescription } from "./input-description";
-export type { InputDescriptionProps } from "./input-description";

package/src/components/input/input-description/input-description.tsx

@@ -1,36 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { factory, useProps, cx } from "../../../utils";
-
-export interface InputDescriptionProps extends ComponentPropsWithoutRef<"p"> {
-    /** Editing root class name */
-    className?: string;
-}
-
-const InputDescription = factory<{
-    props: InputDescriptionProps;
-    ref: HTMLParagraphElement;
-}>((_props, ref) => {
-    const { className, children, ...props } = useProps(
-        "InputDescription",
-        null,
-        _props
-    );
-
-    return (
-        <p
-            ref={ref}
-            className={cx(
-                "text-xs leading-relaxed",
-                "text-[var(--refraktor-text-tertiary)]",
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </p>
-    );
-});
-
-InputDescription.displayName = "@refraktor/core/InputDescription";
-
-export default InputDescription;

package/src/components/input/input-error/index.ts

@@ -1,2 +0,0 @@
-export { default as InputError } from "./input-error";
-export type { InputErrorProps } from "./input-error";

package/src/components/input/input-error/input-error.tsx

@@ -1,36 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { factory, useProps, cx } from "../../../utils";
-
-export interface InputErrorProps extends ComponentPropsWithoutRef<"p"> {
-    /** Editing root class name */
-    className?: string;
-}
-
-const InputError = factory<{
-    props: InputErrorProps;
-    ref: HTMLParagraphElement;
-}>((_props, ref) => {
-    const { className, children, ...props } = useProps(
-        "InputError",
-        null,
-        _props
-    );
-
-    return (
-        <p
-            ref={ref}
-            className={cx(
-                "text-xs mt-0.5",
-                "text-[var(--refraktor-colors-red-5)]",
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </p>
-    );
-});
-
-InputError.displayName = "@refraktor/core/InputError";
-
-export default InputError;

package/src/components/input/input-field/index.ts

@@ -1 +0,0 @@
-export { default as InputField } from "./input-field";

package/src/components/input/input-field/input-field.styles.ts

@@ -1,23 +0,0 @@
-import { RefraktorSize } from "../../../theme";
-import { InputVariant } from "../input.types";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "h-5 px-2 text-[8px]",
-    sm: "h-6 px-2.5 text-[10px]",
-    md: "h-8 px-3 text-xs",
-    lg: "h-10 px-3.5 text-sm",
-    xl: "h-12 px-4 text-base"
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-const variants: Record<InputVariant, string> = {
-    default:
-        "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] border border-[var(--refraktor-border)]",
-    filled: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)]",
-    outline:
-        "bg-transparent text-[var(--refraktor-text)] border border-[var(--refraktor-border)]"
-};
-
-export const getVariant = (variant: InputVariant = "default") =>
-    variants[variant];