@refraktor/core 0.0.3 → 0.0.5

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",
-    "icon-sm": "size-6",
-    "icon-md": "size-8",
-    "icon-lg": "size-10",
-    "icon-xl": "size-12"
-};
-
-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];

package/src/components/button/button.test.tsx

@@ -1,57 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "../../vitest";
-import Button from "./button";
-import { createRef } from "react";
-
-describe("@refraktor/core/Button", () => {
-    it("should render correctly", async () => {
-        await render(<Button>Click me</Button>);
-        expect(screen.getByText("Click me")).toBeInTheDocument();
-    });
-
-    it("forwards ref correctly", async () => {
-        const ref = createRef<HTMLButtonElement>();
-
-        await render(<Button ref={ref}>Click me</Button>);
-
-        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-        expect(ref.current?.tagName).toBe("BUTTON");
-        expect(ref.current?.textContent).toBe("Click me");
-    });
-
-    it("handles click event correctly", async () => {
-        const handleClick = vi.fn();
-
-        await render(<Button onClick={handleClick}>Click me</Button>);
-        screen.getByText("Click me").click();
-        expect(handleClick).toHaveBeenCalled();
-    });
-
-    it("disables button when disabled prop is true", async () => {
-        await render(<Button disabled>Click me</Button>);
-
-        const button = screen.getByRole("button", { name: "Click me" });
-
-        expect(button).toBeDisabled();
-        expect(button).toHaveAttribute("aria-disabled", "true");
-        expect(button).toHaveAttribute("data-disabled", "true");
-    });
-
-    it("renders left section correctly", async () => {
-        await render(
-            <Button leftSection={<span data-testid="left-section">🚀</span>}>
-                Click me
-            </Button>
-        );
-        expect(screen.getByTestId("left-section")).toBeInTheDocument();
-    });
-
-    it("renders right section correctly", async () => {
-        await render(
-            <Button rightSection={<span data-testid="right-section">🚀</span>}>
-                Click me
-            </Button>
-        );
-        expect(screen.getByTestId("right-section")).toBeInTheDocument();
-    });
-});

package/src/components/button/button.tsx

@@ -1,110 +0,0 @@
-import { useId } from "@refraktor/utils";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    polymorphicFactory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import { useTheme } from "../../theme";
-import { Loader } from "../loader";
-import {
-    ButtonClassNames,
-    ButtonFactoryPayload,
-    ButtonProps
-} from "./button.types";
-import { getSize, getVariant } from "./button.styles";
-
-const defaultProps = {
-    size: "md",
-    radius: "default",
-    variant: "default"
-} satisfies Partial<ButtonProps>;
-
-const Button = polymorphicFactory<ButtonFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        as,
-        children,
-        id,
-        size,
-        radius,
-        variant,
-        disabled,
-        loading,
-        loaderProps,
-        fullWidth,
-        leftSection,
-        rightSection,
-        classNames,
-        className,
-        ...props
-    } = useProps("Button", defaultProps, _props);
-    const classes = useClassNames("Button", classNames);
-
-    const Component = as ?? "button";
-    const _id = useId(id);
-
-    return (
-        <Component
-            id={_id}
-            ref={ref}
-            disabled={Component === "button" ? disabled || loading : undefined}
-            className={cx(
-                "inline-flex items-center justify-center cursor-pointer transition-all",
-                "[&_svg]:pointer-events-none [&_svg]:shrink-0 outline-none select-none active:scale-[0.98]",
-                "[&[data-disabled=true]]:opacity-50 [&[data-disabled=true]]:pointer-events-none [&[data-disabled=true]]:cursor-not-allowed",
-                fullWidth && "w-full",
-                getSize(size),
-                getRadius(radius),
-                getVariant(variant),
-                classes.root,
-                className
-            )}
-            {...props}
-            data-disabled={disabled || loading}
-            aria-disabled={disabled || loading}
-        >
-            <div
-                className={cx(
-                    "inline-flex items-center justify-center",
-                    classes.container
-                )}
-            >
-                {(loading || leftSection) && (
-                    <span
-                        className={cx(
-                            "shrink-0 mr-2 inline-flex",
-                            classes.leftSection
-                        )}
-                    >
-                        {loading ? (
-                            <Loader size={16} {...loaderProps} />
-                        ) : (
-                            leftSection
-                        )}
-                    </span>
-                )}
-
-                {children}
-
-                {rightSection && (
-                    <span
-                        className={cx(
-                            "shrink-0 ml-2 inline-flex",
-                            classes.rightSection
-                        )}
-                    >
-                        {rightSection}
-                    </span>
-                )}
-            </div>
-        </Component>
-    );
-});
-
-Button.displayName = "@refraktor/core/Button";
-Button.configure = createComponentConfig<ButtonProps>();
-Button.classNames = createClassNamesConfig<ButtonClassNames>();
-
-export default Button;

package/src/components/button/button.types.ts

@@ -1,69 +0,0 @@
-import { ButtonHTMLAttributes, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    PolymorphicFactoryPayload
-} from "../../utils";
-import { LoaderProps } from "../loader";
-
-export type ButtonSize =
-    | RefraktorSize
-    | "icon-xs"
-    | "icon-sm"
-    | "icon-md"
-    | "icon-lg"
-    | "icon-xl";
-export type ButtonVariant = "default" | "filled" | "outline" | "ghost";
-
-export type ButtonClassNames = {
-    root?: string;
-    container?: string;
-    leftSection?: string;
-    rightSection?: string;
-};
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** The size of the button @default `md` */
-    size?: ButtonSize;
-
-    /** The radius of the button @default `md` */
-    radius?: RefraktorRadius;
-
-    /** The variant of the button @default `default` */
-    variant?: ButtonVariant;
-
-    /** Whether the button is disabled @default `false` */
-    disabled?: boolean;
-
-    /** Whether the button is loading @default `false` */
-    loading?: boolean;
-
-    /** The props for the loader. Uses the Loader component */
-    loaderProps?: LoaderProps;
-
-    /** Whether the button should take the full width of its container @default `false` */
-    fullWidth?: boolean;
-
-    /** The left section of the button */
-    leftSection?: ReactNode;
-
-    /** The right section of the button */
-    rightSection?: ReactNode;
-
-    /** Used for styling different parts of the component */
-    classNames?: ButtonClassNames;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface ButtonFactoryPayload extends PolymorphicFactoryPayload {
-    props: ButtonProps;
-    defaultRef: HTMLButtonElement;
-    defaultComponent: "button";
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ButtonProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<ButtonClassNames>>;
-    };
-}

package/src/components/button/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from "./button";
-export type { ButtonProps, ButtonClassNames } from "./button.types";