@refraktor/core 0.0.4 → 0.0.5

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];

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];