@refraktor/core 0.0.3 → 0.0.5

package/src/components/accordion/accordion.styles.ts

@@ -1,60 +0,0 @@
-import { RefraktorSize } from "../../theme";
-import { AccordionVariant } from "./accordion.types";
-
-type AccordionSizeStyles = {
-    control: string;
-    panel: string;
-    chevron: string;
-};
-
-type AccordionVariantStyles = {
-    item: string;
-    control: string;
-    panel: string;
-};
-
-const sizes: Record<RefraktorSize, AccordionSizeStyles> = {
-    xs: {
-        control: "min-h-7 px-2 py-1 text-xs",
-        panel: "px-2 pb-2 text-xs",
-        chevron: "size-3"
-    },
-    sm: {
-        control: "min-h-8 px-2.5 py-1.5 text-sm",
-        panel: "px-2.5 pb-2.5 text-sm",
-        chevron: "size-3.5"
-    },
-    md: {
-        control: "min-h-9 px-3 py-2 text-sm",
-        panel: "px-3 pb-3 text-sm",
-        chevron: "size-4"
-    },
-    lg: {
-        control: "min-h-10 px-3.5 py-2.5 text-base",
-        panel: "px-3.5 pb-3.5 text-base",
-        chevron: "size-4.5"
-    },
-    xl: {
-        control: "min-h-11 px-4 py-3 text-lg",
-        panel: "px-4 pb-4 text-lg",
-        chevron: "size-5"
-    }
-};
-
-const variants: Record<AccordionVariant, AccordionVariantStyles> = {
-    default: {
-        item: "border-b border-[var(--refraktor-border)] last:border-b-0",
-        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
-        panel: "text-[var(--refraktor-text-secondary)]"
-    },
-    separated: {
-        item: "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]",
-        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
-        panel: "border-t border-[var(--refraktor-border)] text-[var(--refraktor-text-secondary)]"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-export const getVariant = (variant: AccordionVariant = "default") =>
-    variants[variant];

package/src/components/accordion/accordion.test.tsx

@@ -1,174 +0,0 @@
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent } from "../../vitest";
-import Accordion from "./accordion";
-
-describe("@refraktor/core/Accordion", () => {
-    it("renders default opened item", async () => {
-        await render(
-            <Accordion defaultValue="account">
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        expect(
-            screen.getByRole("button", { name: "Account" })
-        ).toHaveAttribute("aria-expanded", "true");
-        expect(screen.getByText("Account panel")).toBeInTheDocument();
-        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
-    });
-
-    it("toggles items in single mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Accordion defaultValue="account">
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-        expect(screen.queryByText("Account panel")).not.toBeInTheDocument();
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
-    });
-
-    it("supports multiple mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Accordion multiple defaultValue={["account"]}>
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(screen.getByText("Account panel")).toBeInTheDocument();
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("supports controlled mode", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        function Demo() {
-            const [value, setValue] = useState<string | null>("account");
-
-            return (
-                <Accordion
-                    value={value}
-                    onChange={(nextValue) => {
-                        onChange(nextValue);
-
-                        if (typeof nextValue === "string" || nextValue === null) {
-                            setValue(nextValue);
-                        }
-                    }}
-                >
-                    <Accordion.Item value="account">
-                        <Accordion.Control>Account</Accordion.Control>
-                        <Accordion.Panel>Account panel</Accordion.Panel>
-                    </Accordion.Item>
-
-                    <Accordion.Item value="security">
-                        <Accordion.Control>Security</Accordion.Control>
-                        <Accordion.Panel>Security panel</Accordion.Panel>
-                    </Accordion.Item>
-                </Accordion>
-            );
-        }
-
-        await render(<Demo />);
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(onChange).toHaveBeenCalledWith("security");
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("supports keyboard navigation and skips disabled items", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Accordion defaultValue="account">
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security" disabled>
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="billing">
-                    <Accordion.Control>Billing</Accordion.Control>
-                    <Accordion.Panel>Billing panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        const account = screen.getByRole("button", { name: "Account" });
-
-        account.focus();
-        await user.keyboard("{ArrowDown}");
-
-        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
-
-        await user.keyboard("{Home}");
-        expect(account).toHaveFocus();
-
-        await user.keyboard("{End}");
-        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
-    });
-
-    it("keeps closed panels mounted when keepMounted is true", async () => {
-        await render(
-            <Accordion defaultValue="account" keepMounted>
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        const hiddenPanel = screen.getByText("Security panel");
-
-        expect(hiddenPanel).toBeInTheDocument();
-        expect(hiddenPanel).toHaveAttribute("hidden");
-    });
-});

package/src/components/accordion/accordion.tsx

@@ -1,203 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect, useMemo } from "react";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    AccordionProvider,
-    getNavigableAccordionItems,
-    useAccordionItemsRegistry
-} from "./accordion.context";
-import { AccordionControl } from "./accordion-control";
-import { AccordionItem } from "./accordion-item";
-import { AccordionPanel } from "./accordion-panel";
-import {
-    AccordionClassNames,
-    AccordionFactoryPayload,
-    AccordionProps,
-    AccordionValue
-} from "./accordion.types";
-
-const defaultProps = {
-    multiple: false,
-    collapsible: true,
-    keepMounted: false,
-    size: "md",
-    radius: "default",
-    variant: "default"
-} satisfies Partial<AccordionProps>;
-
-const toDomSafeValue = (value: string) =>
-    encodeURIComponent(value).replace(/%/g, "-");
-
-const normalizeOpenValues = (
-    value: AccordionValue | undefined,
-    multiple: boolean
-) => {
-    if (Array.isArray(value)) {
-        const uniqueValues = Array.from(new Set(value.filter(Boolean)));
-
-        if (!multiple) {
-            return uniqueValues.slice(0, 1);
-        }
-
-        return uniqueValues;
-    }
-
-    if (typeof value === "string" && value.length > 0) {
-        return [value];
-    }
-
-    return [];
-};
-
-const Accordion = factory<AccordionFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        value,
-        defaultValue,
-        onChange,
-        multiple,
-        collapsible,
-        keepMounted,
-        size,
-        radius,
-        variant,
-        className,
-        classNames,
-        ...props
-    } = useProps("Accordion", defaultProps, _props);
-    const classes = useClassNames("Accordion", classNames);
-    const _id = useId(id);
-
-    const [activeValue, setActiveValue, isControlled] =
-        useUncontrolled<AccordionValue>({
-            value,
-            defaultValue,
-            finalValue: multiple ? [] : null,
-            onChange
-        });
-
-    const openValues = useMemo(
-        () => normalizeOpenValues(activeValue, multiple),
-        [activeValue, multiple]
-    );
-
-    const { registerItem, getItems } = useAccordionItemsRegistry();
-
-    useEffect(() => {
-        if (multiple || collapsible || openValues.length > 0 || isControlled) {
-            return;
-        }
-
-        const firstItem = getNavigableAccordionItems(getItems())[0];
-
-        if (firstItem) {
-            setActiveValue(firstItem.value);
-        }
-    }, [
-        multiple,
-        collapsible,
-        openValues.length,
-        isControlled,
-        getItems,
-        setActiveValue
-    ]);
-
-    const toggleItem = useCallback(
-        (itemValue: string) => {
-            const isOpen = openValues.includes(itemValue);
-
-            if (multiple) {
-                const nextValues = isOpen
-                    ? openValues.filter((value) => value !== itemValue)
-                    : [...openValues, itemValue];
-
-                setActiveValue(nextValues);
-                return;
-            }
-
-            if (isOpen) {
-                if (collapsible) {
-                    setActiveValue(null);
-                }
-
-                return;
-            }
-
-            setActiveValue(itemValue);
-        },
-        [multiple, collapsible, openValues, setActiveValue]
-    );
-
-    const isItemOpen = useCallback(
-        (itemValue: string) => openValues.includes(itemValue),
-        [openValues]
-    );
-
-    const getControlId = useCallback(
-        (itemValue: string) => `${_id}-control-${toDomSafeValue(itemValue)}`,
-        [_id]
-    );
-
-    const getPanelId = useCallback(
-        (itemValue: string) => `${_id}-panel-${toDomSafeValue(itemValue)}`,
-        [_id]
-    );
-
-    const getStyles = useCallback(
-        (part: keyof AccordionClassNames) => classes[part],
-        [classes]
-    );
-
-    return (
-        <AccordionProvider
-            value={{
-                openValues,
-                multiple,
-                collapsible,
-                keepMounted,
-                size,
-                radius,
-                variant,
-                toggleItem,
-                isItemOpen,
-                registerItem,
-                getItems,
-                getControlId,
-                getPanelId,
-                getStyles
-            }}
-        >
-            <div
-                ref={ref}
-                id={_id}
-                className={cx(
-                    "w-full flex flex-col",
-                    variant === "separated" ? "gap-2" : "gap-0",
-                    classes.root,
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        </AccordionProvider>
-    );
-});
-
-Accordion.displayName = "@refraktor/core/Accordion";
-Accordion.configure = createComponentConfig<AccordionProps>();
-Accordion.classNames = createClassNamesConfig<AccordionClassNames>();
-Accordion.Item = AccordionItem;
-Accordion.Control = AccordionControl;
-Accordion.Panel = AccordionPanel;
-
-export default Accordion;

package/src/components/accordion/accordion.types.ts

@@ -1,126 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { AccordionControl } from "./accordion-control";
-import { AccordionItem } from "./accordion-item";
-import { AccordionPanel } from "./accordion-panel";
-
-export type AccordionValue = string | null | string[];
-export type AccordionVariant = "default" | "separated";
-
-export type AccordionClassNames = {
-    root?: string;
-    item?: string;
-    control?: string;
-    chevron?: string;
-    panel?: string;
-};
-
-export interface AccordionProps
-    extends Omit<
-        ComponentPropsWithoutRef<"div">,
-        "onChange" | "value" | "defaultValue"
-    > {
-    /** Children containing accordion subcomponents */
-    children: ReactNode;
-
-    /** Opened value(s) (controlled) */
-    value?: AccordionValue;
-
-    /** Initial opened value(s) (uncontrolled) */
-    defaultValue?: AccordionValue;
-
-    /** Callback called when opened value(s) change */
-    onChange?: (value: AccordionValue) => void;
-
-    /** Allow multiple opened items @default `false` */
-    multiple?: boolean;
-
-    /** Allow closing opened item in single mode @default `true` */
-    collapsible?: boolean;
-
-    /** Keep closed panels mounted @default `false` */
-    keepMounted?: boolean;
-
-    /** Size of control/panel spacing @default `md` */
-    size?: RefraktorSize;
-
-    /** Radius applied to separated items @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Visual variant @default `default` */
-    variant?: AccordionVariant;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: AccordionClassNames;
-}
-
-export interface AccordionItemProps extends ComponentPropsWithoutRef<"div"> {
-    /** Unique item value */
-    value: string;
-
-    /** Item content (Control + Panel) */
-    children: ReactNode;
-
-    /** Whether item is disabled @default `false` */
-    disabled?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface AccordionControlProps
-    extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
-    /** Trigger label/content */
-    children: ReactNode;
-
-    /** Optional chevron content */
-    chevron?: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface AccordionPanelProps extends ComponentPropsWithoutRef<"div"> {
-    /** Panel content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface AccordionFactoryPayload extends FactoryPayload {
-    props: AccordionProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<AccordionProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<AccordionClassNames>
-        >;
-        Item: typeof AccordionItem;
-        Control: typeof AccordionControl;
-        Panel: typeof AccordionPanel;
-    };
-}
-
-export interface AccordionItemFactoryPayload extends FactoryPayload {
-    props: AccordionItemProps;
-    ref: HTMLDivElement;
-}
-
-export interface AccordionControlFactoryPayload extends FactoryPayload {
-    props: AccordionControlProps;
-    ref: HTMLButtonElement;
-}
-
-export interface AccordionPanelFactoryPayload extends FactoryPayload {
-    props: AccordionPanelProps;
-    ref: HTMLDivElement;
-}

package/src/components/accordion/index.ts

@@ -1,17 +0,0 @@
-export { default as Accordion } from "./accordion";
-export { AccordionItem } from "./accordion-item";
-export { AccordionControl } from "./accordion-control";
-export { AccordionPanel } from "./accordion-panel";
-export type {
-    AccordionProps,
-    AccordionItemProps,
-    AccordionControlProps,
-    AccordionPanelProps,
-    AccordionClassNames,
-    AccordionVariant,
-    AccordionValue,
-    AccordionFactoryPayload,
-    AccordionItemFactoryPayload,
-    AccordionControlFactoryPayload,
-    AccordionPanelFactoryPayload
-} from "./accordion.types";

package/src/components/avatar/avatar-group/avatar-group.tsx

@@ -1,73 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { Children, cloneElement, isValidElement } from "react";
-import { useTheme } from "../../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../../utils";
-import {
-    AvatarGroupClassNames,
-    AvatarGroupFactoryPayload,
-    AvatarGroupProps
-} from "../avatar.types";
-import Avatar from "../avatar";
-
-const defaultProps = {
-    spacing: -8,
-    limit: 5
-} satisfies Partial<AvatarGroupProps>;
-
-const AvatarGroup = factory<AvatarGroupFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const { id, children, spacing, limit, className, classNames, ...props } =
-        useProps("AvatarGroup", defaultProps, _props);
-    const classes = useClassNames("AvatarGroup", classNames);
-
-    const _id = useId(id);
-
-    const childArray = Children.toArray(children);
-    const visibleChildren = limit ? childArray.slice(0, limit) : childArray;
-    const remainingCount = limit ? Math.max(0, childArray.length - limit) : 0;
-
-    return (
-        <div
-            ref={ref}
-            id={_id}
-            className={cx("inline-flex items-center", classes.root, className)}
-            {...props}
-        >
-            {visibleChildren.map((child, index) => {
-                if (!isValidElement(child)) return null;
-
-                return cloneElement(child as any, {
-                    key: index,
-                    style: {
-                        marginLeft: index === 0 ? 0 : spacing,
-                        zIndex: visibleChildren.length - index,
-                        ...((child.props as any).style || {})
-                    },
-                    className: (child.props as any).className
-                });
-            })}
-
-            {remainingCount > 0 && (
-                <Avatar
-                    initials={`+${remainingCount}`}
-                    style={{
-                        marginLeft: spacing,
-                        zIndex: 0
-                    }}
-                />
-            )}
-        </div>
-    );
-});
-
-AvatarGroup.displayName = "@refraktor/core/AvatarGroup";
-AvatarGroup.configure = createComponentConfig<AvatarGroupProps>();
-AvatarGroup.classNames = createClassNamesConfig<AvatarGroupClassNames>();
-
-export default AvatarGroup;

package/src/components/avatar/avatar-group/index.ts

@@ -1 +0,0 @@
-export { default as AvatarGroup } from "./avatar-group";

package/src/components/avatar/avatar.styles.ts

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