@refraktor/core 0.0.1

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,203 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,73 @@
+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

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,21 @@
+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];