@refraktor/core 0.0.3 → 0.0.5

package/src/components/avatar/avatar.tsx

@@ -1,142 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useState, useEffect } from "react";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    AvatarClassNames,
-    AvatarFactoryPayload,
-    AvatarProps
-} from "./avatar.types";
-import { getSize } from "./avatar.styles";
-import { AvatarGroup } from "./avatar-group";
-import { UserIcon } from "../../icons";
-
-const defaultProps = {
-    size: "md",
-    radius: "full"
-} satisfies Partial<AvatarProps>;
-
-function getInitials(name: string): string {
-    const parts = name.trim().split(/\s+/).filter(Boolean);
-
-    if (parts.length === 0) return "";
-    if (parts.length === 1) {
-        return parts[0].slice(0, 2).toUpperCase();
-    }
-
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-}
-
-const Avatar = factory<AvatarFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        src,
-        alt,
-        name,
-        initials,
-        fallback,
-        size,
-        radius,
-        className,
-        classNames,
-        ...props
-    } = useProps("Avatar", defaultProps, _props);
-    const classes = useClassNames("Avatar", classNames);
-
-    const _id = useId(id);
-
-    const [imageStatus, setImageStatus] = useState<
-        "loading" | "loaded" | "error"
-    >(src ? "loading" : "error");
-
-    useEffect(() => {
-        if (src) {
-            setImageStatus("loading");
-        } else {
-            setImageStatus("error");
-        }
-    }, [src]);
-
-    const handleImageLoad = () => {
-        setImageStatus("loaded");
-    };
-
-    const handleImageError = () => {
-        setImageStatus("error");
-    };
-
-    const displayInitials = initials || (name ? getInitials(name) : null);
-
-    const showImage = src && imageStatus !== "error";
-
-    const showInitials = !showImage && displayInitials;
-
-    const showFallback = !showImage && !showInitials;
-
-    return (
-        <div
-            ref={ref}
-            id={_id}
-            className={cx(
-                "relative inline-flex items-center justify-center overflow-hidden shrink-0",
-                "bg-[var(--refraktor-bg-hover)]",
-                getSize(size),
-                getRadius(radius),
-                classes.root,
-                className
-            )}
-            {...props}
-        >
-            {showImage && (
-                <img
-                    src={src}
-                    alt={alt || name || "Avatar"}
-                    onLoad={handleImageLoad}
-                    onError={handleImageError}
-                    className={cx(
-                        "w-full h-full object-cover",
-                        imageStatus === "loading" && "opacity-0",
-                        imageStatus === "loaded" &&
-                            "opacity-100 transition-opacity duration-200",
-                        classes.image
-                    )}
-                />
-            )}
-
-            {showInitials && (
-                <span
-                    className={cx("font-medium select-none", classes.initials)}
-                    aria-label={name || alt}
-                >
-                    {displayInitials}
-                </span>
-            )}
-
-            {showFallback && (
-                <span
-                    className={cx(
-                        "text-[var(--refraktor-text-muted)] flex items-center justify-center",
-                        classes.fallback
-                    )}
-                    aria-label="Avatar"
-                >
-                    {fallback || <UserIcon size={24} />}
-                </span>
-            )}
-        </div>
-    );
-});
-
-Avatar.displayName = "@refraktor/core/Avatar";
-Avatar.configure = createComponentConfig<AvatarProps>();
-Avatar.classNames = createClassNamesConfig<AvatarClassNames>();
-Avatar.Group = AvatarGroup;
-
-export default Avatar;

package/src/components/avatar/avatar.types.ts

@@ -1,86 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { AvatarGroup } from "./avatar-group";
-
-export type AvatarClassNames = {
-    root?: string;
-    image?: string;
-    initials?: string;
-    fallback?: string;
-};
-
-export interface AvatarProps extends ComponentPropsWithoutRef<"div"> {
-    /** Image source URL */
-    src?: string | null;
-
-    /** Alt text for the image */
-    alt?: string;
-
-    /** Name used to generate initials (e.g., "John Doe" -> "JD") */
-    name?: string;
-
-    /** Custom initials to display (overrides name-based initials) */
-    initials?: string;
-
-    /** Custom fallback element when no image or initials */
-    fallback?: ReactNode;
-
-    /** The size of the avatar @default `md` */
-    size?: RefraktorSize;
-
-    /** The radius of the avatar @default `full` */
-    radius?: RefraktorRadius;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: AvatarClassNames;
-}
-
-export interface AvatarFactoryPayload extends FactoryPayload {
-    props: AvatarProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<AvatarProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<AvatarClassNames>>;
-        Group: typeof AvatarGroup;
-    };
-}
-
-export type AvatarGroupClassNames = {
-    root?: string;
-};
-
-export interface AvatarGroupProps extends ComponentPropsWithoutRef<"div"> {
-    /** Avatar components to render */
-    children: ReactNode;
-
-    /** Spacing between avatars (negative value creates overlap) @default `-8` */
-    spacing?: number;
-
-    /** Maximum number of avatars to display @default `5` */
-    limit?: number;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: AvatarGroupClassNames;
-}
-
-export interface AvatarGroupFactoryPayload extends FactoryPayload {
-    props: AvatarGroupProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<AvatarGroupProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<AvatarGroupClassNames>
-        >;
-    };
-}

package/src/components/avatar/index.ts

@@ -1,8 +0,0 @@
-export { default as Avatar } from "./avatar";
-export { AvatarGroup } from "./avatar-group";
-export type {
-    AvatarProps,
-    AvatarClassNames,
-    AvatarGroupProps,
-    AvatarGroupClassNames
-} from "./avatar.types";

package/src/components/badge/badge.styles.ts

@@ -1,21 +0,0 @@
-import { RefraktorSize } from "../../theme";
-import { BadgeVariant } from "./badge.types";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "text-xs px-1.5 py-0.5",
-    sm: "text-xs px-2 py-0.5",
-    md: "text-sm px-2.5 py-0.5",
-    lg: "text-base px-3 py-0.5",
-    xl: "text-lg px-3.5 py-0.5"
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-const variants: Record<BadgeVariant, string> = {
-    default: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)]",
-    outline:
-        "border border-[var(--refraktor-border)] text-[var(--refraktor-text)]"
-};
-
-export const getVariant = (variant: BadgeVariant = "default") =>
-    variants[variant];

package/src/components/badge/badge.tsx

@@ -1,62 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    BadgeClassNames,
-    BadgeFactoryPayload,
-    BadgeProps
-} from "./badge.types";
-import { getSize, getVariant } from "./badge.styles";
-
-const defaultProps = {
-    size: "xs",
-    radius: "default",
-    variant: "default"
-} satisfies Partial<BadgeProps>;
-
-const Badge = factory<BadgeFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        children,
-        id,
-        size,
-        radius,
-        variant,
-        className,
-        classNames,
-        ...props
-    } = useProps("Badge", defaultProps, _props);
-    const classes = useClassNames("Badge", classNames);
-
-    const _id = useId(id);
-
-    return (
-        <div
-            id={_id}
-            ref={ref}
-            className={cx(
-                "inline-flex items-center justify-center w-fit",
-                getSize(size),
-                getRadius(radius),
-                getVariant(variant),
-                classes.root,
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </div>
-    );
-});
-
-Badge.displayName = "@refraktor/core/Badge";
-Badge.configure = createComponentConfig<BadgeProps>();
-Badge.classNames = createClassNamesConfig<BadgeClassNames>();
-
-export default Badge;

package/src/components/badge/badge.types.ts

@@ -1,40 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import type {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-
-export type BadgeVariant = "default" | "outline";
-
-export type BadgeClassNames = {
-    root?: string;
-    content?: string;
-};
-
-export interface BadgeProps extends ComponentPropsWithoutRef<"div"> {
-    /** The variant of the badge @default `default` */
-    variant?: BadgeVariant;
-
-    /** The size of the badge @default `xs` */
-    size?: RefraktorSize;
-
-    /** The radius of the badge @default `md` */
-    radius?: RefraktorRadius;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: BadgeClassNames;
-}
-
-export interface BadgeFactoryPayload extends FactoryPayload {
-    props: BadgeProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<BadgeProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<BadgeClassNames>>;
-    };
-}

package/src/components/badge/index.ts

@@ -1,2 +0,0 @@
-export { default as Badge } from "./badge";
-export type { BadgeProps, BadgeClassNames } from "./badge.types";

package/src/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,55 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-type BreadcrumbsSizeStyles = {
-    list: string;
-    item: string;
-    label: string;
-    separator: string;
-    collapse: string;
-    iconSize: number;
-};
-
-const sizes: Record<RefraktorSize, BreadcrumbsSizeStyles> = {
-    xs: {
-        list: "gap-1",
-        item: "gap-1",
-        label: "text-xs",
-        separator: "mx-1",
-        collapse: "h-5 min-w-5 px-1 text-xs",
-        iconSize: 12
-    },
-    sm: {
-        list: "gap-1",
-        item: "gap-1",
-        label: "text-xs",
-        separator: "mx-1",
-        collapse: "h-6 min-w-6 px-1.5 text-xs",
-        iconSize: 14
-    },
-    md: {
-        list: "gap-1.5",
-        item: "gap-1.5",
-        label: "text-sm",
-        separator: "mx-1.5",
-        collapse: "h-7 min-w-7 px-2 text-sm",
-        iconSize: 16
-    },
-    lg: {
-        list: "gap-2",
-        item: "gap-2",
-        label: "text-base",
-        separator: "mx-2",
-        collapse: "h-8 min-w-8 px-2.5 text-base",
-        iconSize: 18
-    },
-    xl: {
-        list: "gap-2.5",
-        item: "gap-2.5",
-        label: "text-lg",
-        separator: "mx-2.5",
-        collapse: "h-9 min-w-9 px-3 text-lg",
-        iconSize: 20
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];

package/src/components/breadcrumbs/breadcrumbs.test.tsx

@@ -1,136 +0,0 @@
-import { render as rtlRender } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { ThemeProvider } from "../../theme";
-import { render, screen, userEvent } from "../../vitest";
-import Breadcrumbs from "./breadcrumbs";
-
-const items = [
-    { label: "Home", href: "/" },
-    { label: "Workspace", href: "/workspace" },
-    { label: "Projects", href: "/workspace/projects" },
-    { label: "Refraktor", href: "/workspace/projects/refraktor" },
-    { label: "Components", href: "/workspace/projects/refraktor/components" },
-    { label: "Breadcrumbs" }
-];
-
-describe("@refraktor/core/Breadcrumbs", () => {
-    it("renders navigation, links and current page", async () => {
-        await render(<Breadcrumbs items={items.slice(0, 3)} maxItems={0} />);
-
-        expect(
-            screen.getByRole("navigation", { name: "Breadcrumb" })
-        ).toBeInTheDocument();
-        expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute(
-            "href",
-            "/"
-        );
-        expect(screen.getByText("Projects")).toHaveAttribute(
-            "aria-current",
-            "page"
-        );
-    });
-
-    it("collapses and expands middle items", async () => {
-        const user = userEvent.setup();
-        const onExpandedChange = vi.fn();
-
-        await render(
-            <Breadcrumbs
-                items={items}
-                maxItems={4}
-                onExpandedChange={onExpandedChange}
-            />
-        );
-
-        expect(screen.getByRole("button", { name: /show full breadcrumb path/i })).toBeInTheDocument();
-        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
-
-        await user.click(
-            screen.getByRole("button", { name: /show full breadcrumb path/i })
-        );
-
-        expect(onExpandedChange).toHaveBeenCalledWith(true);
-        expect(screen.getByText("Projects")).toBeInTheDocument();
-        expect(
-            screen.queryByRole("button", { name: /show full breadcrumb path/i })
-        ).not.toBeInTheDocument();
-    });
-
-    it("supports itemsBeforeCollapse and itemsAfterCollapse", async () => {
-        await render(
-            <Breadcrumbs
-                items={items}
-                maxItems={4}
-                itemsBeforeCollapse={2}
-                itemsAfterCollapse={2}
-            />
-        );
-
-        expect(screen.getByText("Home")).toBeInTheDocument();
-        expect(screen.getByText("Workspace")).toBeInTheDocument();
-        expect(screen.getByText("Components")).toBeInTheDocument();
-        expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
-        expect(screen.queryByText("Projects")).not.toBeInTheDocument();
-    });
-
-    it("supports controlled expanded mode", async () => {
-        await render(<Breadcrumbs items={items} maxItems={3} expanded />);
-
-        expect(screen.getByText("Projects")).toBeInTheDocument();
-        expect(
-            screen.queryByRole("button", { name: /show full breadcrumb path/i })
-        ).not.toBeInTheDocument();
-    });
-
-    it("supports custom separator", async () => {
-        await render(<Breadcrumbs items={items.slice(0, 3)} separator="/" />);
-
-        expect(screen.getAllByText("/")).toHaveLength(2);
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <Breadcrumbs
-                items={items}
-                maxItems={4}
-                className="custom-root"
-                classNames={{
-                    list: "custom-list",
-                    item: "custom-item",
-                    link: "custom-link",
-                    current: "custom-current",
-                    separator: "custom-separator",
-                    collapse: "custom-collapse"
-                }}
-            />
-        );
-
-        const root = container.firstElementChild as HTMLElement;
-
-        expect(root).toHaveClass("custom-root");
-        expect(root.querySelector("ol")).toHaveClass("custom-list");
-        expect(root.querySelector("li")).toHaveClass("custom-item");
-        expect(screen.getByRole("link", { name: "Home" })).toHaveClass(
-            "custom-link"
-        );
-        expect(root.querySelector('[aria-current="page"]')).toHaveClass(
-            "custom-current"
-        );
-        expect(
-            screen.getByRole("button", { name: /show full breadcrumb path/i })
-        ).toHaveClass("custom-collapse");
-        expect(root.querySelector("span[aria-hidden='true']")).toHaveClass(
-            "custom-separator"
-        );
-    });
-
-    it("returns null when items array is empty", () => {
-        const { container } = rtlRender(
-            <ThemeProvider>
-                <Breadcrumbs items={[]} />
-            </ThemeProvider>
-        );
-
-        expect(container.firstChild).toBeNull();
-    });
-});