@refraktor/core 0.0.4 → 0.0.5

package/src/components/chip/chip.tsx

@@ -1,208 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import { KeyboardEvent } from "react";
-import { XIcon } from "../../icons";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import { useChipGroupContext } from "./chip.context";
-import { ChipGroup } from "./chip-group";
-import { getSize, getVariant } from "./chip.styles";
-import { ChipClassNames, ChipFactoryPayload, ChipProps } from "./chip.types";
-
-const defaultProps = {
-    size: "sm",
-    radius: "full",
-    variant: "default",
-    selectable: false,
-    removable: false
-} satisfies Partial<ChipProps>;
-
-const Chip = factory<ChipFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        value,
-        children,
-        selected,
-        defaultSelected,
-        onSelectedChange,
-        selectable,
-        removable,
-        onRemove,
-        removeButtonLabel,
-        leftSection,
-        rightSection,
-        size,
-        radius,
-        variant,
-        disabled,
-        className,
-        classNames,
-        onClick,
-        onKeyDown,
-        ...props
-    } = useProps("Chip", defaultProps, _props);
-    const classes = useClassNames<ChipClassNames>("Chip", classNames);
-    const chipGroup = useChipGroupContext();
-
-    const _id = useId(id);
-
-    const [uncontrolledSelected, setUncontrolledSelected] =
-        useUncontrolled<boolean>({
-            value: selected,
-            defaultValue: defaultSelected,
-            finalValue: false,
-            onChange: onSelectedChange
-        });
-
-    const hasGroupValue = !!chipGroup && typeof value === "string";
-    const isSelectable = selectable || hasGroupValue;
-    const isRemovable = removable || typeof onRemove === "function";
-    const isDisabled = !!(disabled || chipGroup?.disabled);
-    const resolvedSize = size ?? chipGroup?.size ?? "sm";
-    const resolvedRadius = radius ?? chipGroup?.radius ?? "full";
-    const resolvedVariant = variant ?? chipGroup?.variant ?? "default";
-    const isSelected = hasGroupValue
-        ? chipGroup.value.includes(value)
-        : uncontrolledSelected;
-
-    const toggleChip = () => {
-        if (!isSelectable || isDisabled) {
-            return;
-        }
-
-        const nextSelected = !isSelected;
-
-        if (hasGroupValue) {
-            chipGroup.onValueChange(value, nextSelected);
-            return;
-        }
-
-        setUncontrolledSelected(nextSelected);
-    };
-
-    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-        onClick?.(event);
-
-        if (event.defaultPrevented) {
-            return;
-        }
-
-        toggleChip();
-    };
-
-    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-        onKeyDown?.(event);
-
-        if (event.defaultPrevented || isDisabled || !isSelectable) {
-            return;
-        }
-
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            toggleChip();
-        }
-    };
-
-    const handleRemove = (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.stopPropagation();
-
-        if (isDisabled) {
-            return;
-        }
-
-        if (hasGroupValue) {
-            chipGroup.onValueChange(value, false);
-        } else if (isSelectable && isSelected) {
-            setUncontrolledSelected(false);
-        }
-
-        onRemove?.(event);
-    };
-
-    return (
-        <div
-            ref={ref}
-            id={_id}
-            data-selected={isSelected}
-            data-disabled={isDisabled}
-            data-selectable={isSelectable}
-            data-removable={isRemovable}
-            role={isSelectable ? "button" : undefined}
-            tabIndex={isSelectable ? (isDisabled ? -1 : 0) : undefined}
-            aria-pressed={isSelectable ? isSelected : undefined}
-            aria-disabled={isDisabled || undefined}
-            className={cx(
-                "inline-flex w-fit max-w-full items-center justify-center border select-none transition-colors",
-                "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
-                "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none",
-                isSelectable ? "cursor-pointer" : "cursor-default",
-                getSize(resolvedSize),
-                getRadius(resolvedRadius),
-                getVariant(resolvedVariant, isSelected),
-                classes.root,
-                className
-            )}
-            onClick={handleClick}
-            onKeyDown={handleKeyDown}
-            {...props}
-        >
-            {leftSection && (
-                <span
-                    className={cx(
-                        "inline-flex shrink-0 items-center justify-center",
-                        classes.leftSection
-                    )}
-                    aria-hidden="true"
-                >
-                    {leftSection}
-                </span>
-            )}
-
-            <span className={cx("truncate", classes.label)}>{children}</span>
-
-            {rightSection && (
-                <span
-                    className={cx(
-                        "inline-flex shrink-0 items-center justify-center",
-                        classes.rightSection
-                    )}
-                    aria-hidden="true"
-                >
-                    {rightSection}
-                </span>
-            )}
-
-            {isRemovable && (
-                <button
-                    type="button"
-                    tabIndex={isDisabled ? -1 : 0}
-                    aria-label={removeButtonLabel ?? "Remove chip"}
-                    className={cx(
-                        "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 cursor-pointer",
-                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
-                        classes.removeButton
-                    )}
-                    onClick={handleRemove}
-                    disabled={isDisabled}
-                >
-                    <span className={cx("inline-flex", classes.removeIcon)}>
-                        <XIcon size={12} />
-                    </span>
-                </button>
-            )}
-        </div>
-    );
-});
-
-Chip.displayName = "@refraktor/core/Chip";
-Chip.configure = createComponentConfig<ChipProps>();
-Chip.classNames = createClassNamesConfig<ChipClassNames>();
-Chip.Group = ChipGroup;
-
-export default Chip;

package/src/components/chip/chip.types.ts

@@ -1,134 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { ChipGroup } from "./chip-group";
-
-export type ChipVariant = "default" | "outline";
-export type ChipGroupOrientation = "horizontal" | "vertical";
-
-export type ChipClassNames = {
-    root?: string;
-    leftSection?: string;
-    label?: string;
-    rightSection?: string;
-    removeButton?: string;
-    removeIcon?: string;
-};
-
-export type ChipGroupClassNames = {
-    root?: string;
-};
-
-export interface ChipProps extends ComponentPropsWithoutRef<"div"> {
-    /** The value used by Chip.Group */
-    value?: string;
-
-    /** The selected state of the chip (controlled) */
-    selected?: boolean;
-
-    /** The initial selected state of the chip (uncontrolled) */
-    defaultSelected?: boolean;
-
-    /** Callback called when selected state changes */
-    onSelectedChange?: (selected: boolean) => void;
-
-    /** Whether chip can be toggled @default `false` */
-    selectable?: boolean;
-
-    /** Whether to show remove button @default `false` */
-    removable?: boolean;
-
-    /** Callback called when remove button is clicked */
-    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-
-    /** Accessible label for remove button */
-    removeButtonLabel?: string;
-
-    /** Content rendered at the start of the chip */
-    leftSection?: ReactNode;
-
-    /** Content rendered before remove button at the end of the chip */
-    rightSection?: ReactNode;
-
-    /** The size of the chip @default `sm` */
-    size?: RefraktorSize;
-
-    /** The radius of the chip @default `full` */
-    radius?: RefraktorRadius;
-
-    /** The variant of the chip @default `default` */
-    variant?: ChipVariant;
-
-    /** Whether chip is disabled @default `false` */
-    disabled?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: ChipClassNames;
-}
-
-export interface ChipGroupProps
-    extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
-    /** Chip components to render */
-    children: ReactNode;
-
-    /** Selected values (controlled) */
-    value?: string[];
-
-    /** Initial selected values (uncontrolled) */
-    defaultValue?: string[];
-
-    /** Callback called when values change */
-    onChange?: (value: string[]) => void;
-
-    /** Hidden input name used for form submission */
-    name?: string;
-
-    /** Whether all chips in group are disabled */
-    disabled?: boolean;
-
-    /** Shared chip size */
-    size?: RefraktorSize;
-
-    /** Shared chip radius */
-    radius?: RefraktorRadius;
-
-    /** Shared chip variant */
-    variant?: ChipVariant;
-
-    /** Layout direction @default `horizontal` */
-    orientation?: ChipGroupOrientation;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: ChipGroupClassNames;
-}
-
-export interface ChipFactoryPayload extends FactoryPayload {
-    props: ChipProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ChipProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<ChipClassNames>>;
-        Group: typeof ChipGroup;
-    };
-}
-
-export interface ChipGroupFactoryPayload extends FactoryPayload {
-    props: ChipGroupProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ChipGroupProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<ChipGroupClassNames>
-        >;
-    };
-}

package/src/components/chip/index.ts

@@ -1,10 +0,0 @@
-export { default as Chip } from "./chip";
-export { ChipGroup } from "./chip-group";
-export type {
-    ChipProps,
-    ChipClassNames,
-    ChipVariant,
-    ChipGroupProps,
-    ChipGroupClassNames,
-    ChipGroupOrientation
-} from "./chip.types";

package/src/components/color-swatch/color-swatch.styles.ts

@@ -1,11 +0,0 @@
-import { RefraktorSize } from "../../theme";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "size-4",
-    sm: "size-5",
-    md: "size-6",
-    lg: "size-8",
-    xl: "size-10"
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];

package/src/components/color-swatch/color-swatch.test.tsx

@@ -1,80 +0,0 @@
-import { createRef } from "react";
-import { describe, expect, it } from "vitest";
-import { render, screen } from "../../vitest";
-import ColorSwatch from "./color-swatch";
-
-describe("@refraktor/core/ColorSwatch", () => {
-    it("renders with provided color", async () => {
-        await render(
-            <ColorSwatch
-                color="rgba(255, 0, 0, 0.5)"
-                data-testid="swatch"
-                classNames={{ color: "custom-color" }}
-            />
-        );
-
-        const swatch = screen.getByTestId("swatch");
-        const colorLayer = swatch.querySelector(".custom-color") as HTMLSpanElement;
-
-        expect(colorLayer).toBeInTheDocument();
-        expect(colorLayer).toHaveStyle({ background: "rgba(255, 0, 0, 0.5)" });
-    });
-
-    it("forwards ref correctly", async () => {
-        const ref = createRef<HTMLDivElement>();
-
-        await render(<ColorSwatch ref={ref} data-testid="swatch" />);
-
-        expect(ref.current).toBeInstanceOf(HTMLDivElement);
-        expect(ref.current?.tagName).toBe("DIV");
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <ColorSwatch
-                className="custom-root"
-                classNames={{
-                    grid: "custom-grid",
-                    color: "custom-color",
-                    content: "custom-content"
-                }}
-            >
-                A
-            </ColorSwatch>
-        );
-
-        const root = container.firstElementChild as HTMLDivElement;
-        const gridLayer = root.querySelector(".custom-grid") as HTMLSpanElement;
-        const colorLayer = root.querySelector(".custom-color") as HTMLSpanElement;
-        const contentLayer = root.querySelector(".custom-content") as HTMLSpanElement;
-
-        expect(root).toHaveClass("custom-root");
-        expect(gridLayer).toBeInTheDocument();
-        expect(colorLayer).toBeInTheDocument();
-        expect(contentLayer).toBeInTheDocument();
-    });
-
-    it("includes transparency grid class", async () => {
-        await render(
-            <ColorSwatch
-                data-testid="swatch"
-                classNames={{ grid: "custom-grid" }}
-                color="rgba(0, 128, 255, 0.4)"
-            />
-        );
-
-        const swatch = screen.getByTestId("swatch");
-        const gridLayer = swatch.querySelector(".custom-grid") as HTMLSpanElement;
-
-        expect(gridLayer).toHaveClass("refraktor-transparency-grid");
-    });
-
-    it("applies size and radius classes", async () => {
-        await render(<ColorSwatch size="xl" radius="full" data-testid="swatch" />);
-
-        const swatch = screen.getByTestId("swatch");
-
-        expect(swatch.className).toContain("size-10");
-        expect(swatch.className).toContain("rounded-[var(--refraktor-radius-full)]");
-    });
-});

package/src/components/color-swatch/color-swatch.tsx

@@ -1,84 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    ColorSwatchClassNames,
-    ColorSwatchFactoryPayload,
-    ColorSwatchProps
-} from "./color-swatch.types";
-import { getSize } from "./color-swatch.styles";
-
-const defaultProps = {
-    color: "transparent",
-    size: "md",
-    radius: "default"
-} satisfies Partial<ColorSwatchProps>;
-
-const ColorSwatch = factory<ColorSwatchFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        color,
-        size,
-        radius,
-        children,
-        className,
-        classNames,
-        ...props
-    } = useProps("ColorSwatch", defaultProps, _props);
-    const classes = useClassNames("ColorSwatch", classNames);
-
-    const _id = useId(id);
-
-    return (
-        <div
-            ref={ref}
-            id={_id}
-            className={cx(
-                "relative inline-flex items-center justify-center overflow-hidden shrink-0 border border-[var(--refraktor-border)]",
-                getSize(size),
-                getRadius(radius),
-                classes.root,
-                className
-            )}
-            {...props}
-        >
-            <span
-                aria-hidden
-                className={cx(
-                    "absolute inset-0 refraktor-transparency-grid pointer-events-none",
-                    classes.grid
-                )}
-            />
-
-            <span
-                aria-hidden
-                className={cx("absolute inset-0 pointer-events-none", classes.color)}
-                style={{ background: color }}
-            />
-
-            {children && (
-                <span
-                    className={cx(
-                        "relative z-[1] inline-flex items-center justify-center",
-                        classes.content
-                    )}
-                >
-                    {children}
-                </span>
-            )}
-        </div>
-    );
-});
-
-ColorSwatch.displayName = "@refraktor/core/ColorSwatch";
-ColorSwatch.configure = createComponentConfig<ColorSwatchProps>();
-ColorSwatch.classNames = createClassNamesConfig<ColorSwatchClassNames>();
-
-export default ColorSwatch;

package/src/components/color-swatch/color-swatch.types.ts

@@ -1,46 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-
-export type ColorSwatchClassNames = {
-    root?: string;
-    grid?: string;
-    color?: string;
-    content?: string;
-};
-
-export interface ColorSwatchProps
-    extends Omit<ComponentPropsWithoutRef<"div">, "color"> {
-    /** Swatch color value (hex, rgb, rgba, hsl, etc.) */
-    color?: string;
-
-    /** Swatch size @default `md` */
-    size?: RefraktorSize;
-
-    /** Swatch radius @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Optional centered content */
-    children?: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: ColorSwatchClassNames;
-}
-
-export interface ColorSwatchFactoryPayload extends FactoryPayload {
-    props: ColorSwatchProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ColorSwatchProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<ColorSwatchClassNames>
-        >;
-    };
-}

package/src/components/color-swatch/index.ts

@@ -1,2 +0,0 @@
-export { default as ColorSwatch } from "./color-swatch";
-export type { ColorSwatchProps, ColorSwatchClassNames } from "./color-swatch.types";

package/src/components/drawer/drawer-body/drawer-body.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useDrawerContext } from "../drawer.context";
-import { DrawerBodyFactoryPayload } from "../drawer.types";
-
-const DrawerBody = factory<DrawerBodyFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { getStyles } = useDrawerContext();
-
-        return (
-            <div
-                ref={ref}
-                className={cx(
-                    "overflow-y-auto",
-                    getStyles("body"),
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-DrawerBody.displayName = "@refraktor/core/Drawer.Body";
-
-export default DrawerBody;

package/src/components/drawer/drawer-body/index.ts

@@ -1 +0,0 @@
-export { default as DrawerBody } from "./drawer-body";

package/src/components/drawer/drawer-close/drawer-close.tsx

@@ -1,43 +0,0 @@
-import { XIcon } from "../../../icons";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { useDrawerContext } from "../drawer.context";
-import { DrawerCloseFactoryPayload } from "../drawer.types";
-
-const DrawerClose = factory<DrawerCloseFactoryPayload>(
-    ({ children, className, onClick, type = "button", ...props }, ref) => {
-        const { cx } = useTheme();
-        const { drawer, getStyles } = useDrawerContext();
-
-        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-            onClick?.(event);
-
-            if (event.defaultPrevented) {
-                return;
-            }
-
-            drawer.close();
-        };
-
-        return (
-            <button
-                ref={ref}
-                type={type}
-                aria-label="Close"
-                className={cx(
-                    "size-6 cursor-pointer text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]",
-                    getStyles("close"),
-                    className
-                )}
-                onClick={handleClick}
-                {...props}
-            >
-                {children ?? <XIcon />}
-            </button>
-        );
-    }
-);
-
-DrawerClose.displayName = "@refraktor/core/Drawer.Close";
-
-export default DrawerClose;

package/src/components/drawer/drawer-close/index.ts

@@ -1 +0,0 @@
-export { default as DrawerClose } from "./drawer-close";