@refraktor/core 0.0.4 → 0.0.5

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();
-    });
-});

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,199 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import { ChevronIcon } from "../../icons";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import { getSize } from "./breadcrumbs.styles";
-import {
-    BreadcrumbsClassNames,
-    BreadcrumbsFactoryPayload,
-    BreadcrumbsProps
-} from "./breadcrumbs.types";
-import { buildBreadcrumbsRange } from "./breadcrumbs.utils";
-
-const defaultProps = {
-    maxItems: 4,
-    itemsBeforeCollapse: 1,
-    itemsAfterCollapse: 1,
-    defaultExpanded: false,
-    expandLabel: "Show full breadcrumb path",
-    size: "md",
-    radius: "default"
-} satisfies Partial<BreadcrumbsProps>;
-
-const Breadcrumbs = factory<BreadcrumbsFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        items,
-        maxItems,
-        itemsBeforeCollapse,
-        itemsAfterCollapse,
-        expanded,
-        defaultExpanded,
-        onExpandedChange,
-        expandLabel,
-        separator,
-        size,
-        radius,
-        className,
-        classNames,
-        ...props
-    } = useProps("Breadcrumbs", defaultProps, _props);
-    const classes = useClassNames("Breadcrumbs", classNames);
-    const _id = useId(id);
-
-    const [isExpanded, setIsExpanded] = useUncontrolled<boolean>({
-        value: expanded,
-        defaultValue: defaultExpanded,
-        finalValue: false,
-        onChange: onExpandedChange
-    });
-
-    const sizeStyles = getSize(size);
-    const visibleItems = buildBreadcrumbsRange({
-        total: items.length,
-        maxItems,
-        itemsBeforeCollapse,
-        itemsAfterCollapse,
-        expanded: isExpanded
-    });
-
-    if (items.length === 0) {
-        return null;
-    }
-
-    const resolvedSeparator =
-        separator !== undefined ? (
-            separator
-        ) : (
-            <ChevronIcon direction="right" size={sizeStyles.iconSize} />
-        );
-
-    return (
-        <nav
-            {...props}
-            ref={ref}
-            id={_id}
-            aria-label={props["aria-label"] ?? "Breadcrumb"}
-            className={cx("w-full", classes.root, className)}
-        >
-            <ol
-                className={cx(
-                    "flex flex-wrap items-center",
-                    sizeStyles.list,
-                    classes.list
-                )}
-            >
-                {visibleItems.map((rangeItem, index) => {
-                    const showSeparator = index < visibleItems.length - 1;
-                    const content = (() => {
-                        if (rangeItem === "collapse") {
-                            return (
-                                <button
-                                    type="button"
-                                    aria-label={expandLabel}
-                                    className={cx(
-                                        "inline-flex items-center justify-center select-none outline-none transition-colors",
-                                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
-                                        "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]",
-                                        sizeStyles.collapse,
-                                        getRadius(radius),
-                                        classes.collapse
-                                    )}
-                                    onClick={() => setIsExpanded(true)}
-                                >
-                                    ...
-                                </button>
-                            );
-                        }
-
-                        const item = items[rangeItem];
-                        const isCurrent = rangeItem === items.length - 1;
-                        const baseLabelClass = cx(
-                            "inline-flex min-w-0 items-center truncate",
-                            sizeStyles.label
-                        );
-
-                        if (!isCurrent && item.href) {
-                            return (
-                                <a
-                                    href={item.href}
-                                    target={item.target}
-                                    rel={item.rel}
-                                    aria-label={item.ariaLabel}
-                                    className={cx(
-                                        baseLabelClass,
-                                        "outline-none transition-colors",
-                                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
-                                        "text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)]",
-                                        classes.link
-                                    )}
-                                >
-                                    {item.label}
-                                </a>
-                            );
-                        }
-
-                        return (
-                            <span
-                                aria-label={item.ariaLabel}
-                                aria-current={isCurrent ? "page" : undefined}
-                                className={cx(
-                                    baseLabelClass,
-                                    isCurrent
-                                        ? "font-medium text-[var(--refraktor-text)]"
-                                        : "text-[var(--refraktor-text-secondary)]",
-                                    isCurrent ? classes.current : classes.link
-                                )}
-                            >
-                                {item.label}
-                            </span>
-                        );
-                    })();
-
-                    return (
-                        <li
-                            key={
-                                rangeItem === "collapse"
-                                    ? "collapse"
-                                    : `item-${rangeItem}`
-                            }
-                            className={cx(
-                                "inline-flex min-w-0 items-center",
-                                sizeStyles.item,
-                                classes.item
-                            )}
-                        >
-                            {content}
-
-                            {showSeparator && (
-                                <span
-                                    aria-hidden="true"
-                                    className={cx(
-                                        "inline-flex items-center text-[var(--refraktor-text-tertiary)]",
-                                        sizeStyles.separator,
-                                        classes.separator
-                                    )}
-                                >
-                                    {resolvedSeparator}
-                                </span>
-                            )}
-                        </li>
-                    );
-                })}
-            </ol>
-        </nav>
-    );
-});
-
-Breadcrumbs.displayName = "@refraktor/core/Breadcrumbs";
-Breadcrumbs.configure = createComponentConfig<BreadcrumbsProps>();
-Breadcrumbs.classNames = createClassNamesConfig<BreadcrumbsClassNames>();
-
-export default Breadcrumbs;

package/src/components/breadcrumbs/breadcrumbs.types.ts

@@ -1,78 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-
-export type BreadcrumbsItem = {
-    label: ReactNode;
-    href?: string;
-    target?: ComponentPropsWithoutRef<"a">["target"];
-    rel?: ComponentPropsWithoutRef<"a">["rel"];
-    ariaLabel?: string;
-};
-
-export type BreadcrumbsClassNames = {
-    root?: string;
-    list?: string;
-    item?: string;
-    link?: string;
-    current?: string;
-    separator?: string;
-    collapse?: string;
-};
-
-export interface BreadcrumbsProps
-    extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
-    /** Breadcrumb items in hierarchical order */
-    items: BreadcrumbsItem[];
-
-    /** Collapse items when amount exceeds this number. Use `0` to disable @default `4` */
-    maxItems?: number;
-
-    /** Amount of visible items before collapsed section @default `1` */
-    itemsBeforeCollapse?: number;
-
-    /** Amount of visible items after collapsed section @default `1` */
-    itemsAfterCollapse?: number;
-
-    /** Collapse state (controlled) */
-    expanded?: boolean;
-
-    /** Initial collapse state (uncontrolled) @default `false` */
-    defaultExpanded?: boolean;
-
-    /** Callback called when collapse state changes */
-    onExpandedChange?: (expanded: boolean) => void;
-
-    /** Accessible label for collapse control @default `Show full breadcrumb path` */
-    expandLabel?: string;
-
-    /** Separator between items */
-    separator?: ReactNode;
-
-    /** Size of breadcrumb text and controls @default `md` */
-    size?: RefraktorSize;
-
-    /** Radius of collapse control @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: BreadcrumbsClassNames;
-}
-
-export interface BreadcrumbsFactoryPayload extends FactoryPayload {
-    props: BreadcrumbsProps;
-    ref: HTMLElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<BreadcrumbsProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<BreadcrumbsClassNames>
-        >;
-    };
-}

package/src/components/breadcrumbs/breadcrumbs.utils.ts

@@ -1,70 +0,0 @@
-export type BreadcrumbsRangeItem = number | "collapse";
-
-export type BreadcrumbsRangeOptions = {
-    total: number;
-    maxItems: number;
-    itemsBeforeCollapse: number;
-    itemsAfterCollapse: number;
-    expanded: boolean;
-};
-
-function range(start: number, end: number) {
-    if (end < start) {
-        return [];
-    }
-
-    const length = end - start + 1;
-
-    return Array.from({ length }, (_, index) => start + index);
-}
-
-function toSafeInteger(value: number, fallback: number, minimum = 0) {
-    if (!Number.isFinite(value)) {
-        return fallback;
-    }
-
-    return Math.max(minimum, Math.trunc(value));
-}
-
-export function buildBreadcrumbsRange(
-    options: BreadcrumbsRangeOptions
-): BreadcrumbsRangeItem[] {
-    const total = toSafeInteger(options.total, 0, 0);
-
-    if (total <= 0) {
-        return [];
-    }
-
-    const all = range(0, total - 1);
-
-    if (options.expanded) {
-        return all;
-    }
-
-    const maxItems = toSafeInteger(options.maxItems, 0, 0);
-
-    if (maxItems === 0 || total <= maxItems) {
-        return all;
-    }
-
-    const itemsBeforeCollapse = Math.min(
-        toSafeInteger(options.itemsBeforeCollapse, 1, 1),
-        total - 1
-    );
-    const itemsAfterCollapse = Math.min(
-        toSafeInteger(options.itemsAfterCollapse, 1, 1),
-        total - itemsBeforeCollapse
-    );
-
-    const hiddenItems =
-        total - itemsBeforeCollapse - Math.max(itemsAfterCollapse, 1);
-
-    if (hiddenItems <= 1) {
-        return all;
-    }
-
-    const start = range(0, itemsBeforeCollapse - 1);
-    const end = range(total - itemsAfterCollapse, total - 1);
-
-    return [...start, "collapse", ...end];
-}

package/src/components/breadcrumbs/index.ts

@@ -1,6 +0,0 @@
-export { default as Breadcrumbs } from "./breadcrumbs";
-export type {
-    BreadcrumbsProps,
-    BreadcrumbsItem,
-    BreadcrumbsClassNames
-} from "./breadcrumbs.types";

package/src/components/button/button.styles.ts

@@ -1,28 +0,0 @@
-import { ButtonSize, ButtonVariant } from "./button.types";
-
-const sizes: Record<ButtonSize, string> = {
-    xs: "text-xs px-1.5 h-5 gap-1",
-    sm: "text-xs px-2 h-6 gap-1.5",
-    md: "text-sm px-2.5 h-8 gap-2",
-    lg: "text-base px-3 h-10 gap-2.5",
-    xl: "text-lg px-4 h-12 gap-3",
-    "icon-xs": "size-5 shrink-0",
-    "icon-sm": "size-6 shrink-0",
-    "icon-md": "size-8 shrink-0",
-    "icon-lg": "size-10 shrink-0",
-    "icon-xl": "size-12 shrink-0"
-};
-
-export const getSize = (size: ButtonSize = "md") => sizes[size];
-
-const variants: Record<ButtonVariant, string> = {
-    default:
-        "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]",
-    filled: "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] hover:bg-[var(--refraktor-primary-hover)]",
-    outline:
-        "text-[var(--refraktor-text)] border border-[var(--refraktor-border)] hover:border-[var(--refraktor-border-hover)]",
-    ghost: "bg-transparent text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]"
-};
-
-export const getVariant = (variant: ButtonVariant = "default") =>
-    variants[variant];