@refraktor/core 0.0.2 → 0.0.3

package/src/components/breadcrumbs/breadcrumbs.tsx

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

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

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

@@ -0,0 +1,6 @@
+export { default as Breadcrumbs } from "./breadcrumbs";
+export type {
+    BreadcrumbsProps,
+    BreadcrumbsItem,
+    BreadcrumbsClassNames
+} from "./breadcrumbs.types";

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

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

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

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

@@ -0,0 +1,98 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Portal } from "../../portal";
+import { Transition, TransitionProps } from "../../transition";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerContentFactoryPayload, DrawerPosition } from "../drawer.types";
+import { getSizeStyles } from "../drawer.styles";
+
+const positionClasses: Record<DrawerPosition, string> = {
+    left: "left-0 top-0 h-full max-h-full",
+    right: "right-0 top-0 h-full max-h-full",
+    top: "left-0 top-0 w-full max-w-full",
+    bottom: "bottom-0 left-0 w-full max-w-full"
+};
+
+const transitionsByPosition: Record<
+    DrawerPosition,
+    TransitionProps["transition"]
+> = {
+    left: "slide-right",
+    right: "slide-left",
+    top: "slide-down",
+    bottom: "slide-up"
+};
+
+const DrawerContent = factory<DrawerContentFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const {
+            drawer,
+            withinPortal,
+            radius,
+            position,
+            size,
+            transitionProps,
+            headerId,
+            contentRef,
+            getStyles
+        } = useDrawerContext();
+
+        const setRefs = (node: HTMLDivElement | null) => {
+            contentRef.current = node;
+
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        };
+
+        const { className: transitionClassName, ...resolvedTransitionProps } =
+            transitionProps ?? {};
+
+        const sizeStyles = getSizeStyles(position, size);
+
+        const content = (
+            <Transition
+                transition={transitionsByPosition[position]}
+                duration={200}
+                mounted={drawer.opened}
+                {...resolvedTransitionProps}
+                className={cx(
+                    "fixed inset-0 z-50 pointer-events-none",
+                    transitionClassName
+                )}
+            >
+                <div
+                    ref={setRefs}
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby={headerId}
+                    data-opened={drawer.opened}
+                    data-position={position}
+                    style={{
+                        ...sizeStyles,
+                        ...style
+                    }}
+                    className={cx(
+                        "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                        positionClasses[position],
+                        getRadius(radius),
+                        getStyles("content"),
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </Transition>
+        );
+
+        return withinPortal ? <Portal>{content}</Portal> : content;
+    }
+);
+
+DrawerContent.displayName = "@refraktor/core/Drawer.Content";
+
+export default DrawerContent;

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

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

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

@@ -0,0 +1,40 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { DrawerClose } from "../drawer-close";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerHeaderFactoryPayload } from "../drawer.types";
+
+const DrawerHeader = factory<DrawerHeaderFactoryPayload>(
+    ({ children, className, id, text, withClose = true, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { headerId, getStyles } = useDrawerContext();
+        const resolvedId = id ?? headerId;
+
+        return (
+            <div
+                ref={ref}
+                className={cx(
+                    "mb-4 flex items-center justify-between",
+                    getStyles("header"),
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    id={resolvedId}
+                    className="min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]"
+                >
+                    {text ?? children}
+                </div>
+
+                {withClose && (
+                    <DrawerClose className="static shrink-0 self-center" />
+                )}
+            </div>
+        );
+    }
+);
+
+DrawerHeader.displayName = "@refraktor/core/Drawer.Header";
+
+export default DrawerHeader;

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

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

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

@@ -0,0 +1,86 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Portal } from "../../portal";
+import { Transition } from "../../transition";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerOverlayFactoryPayload } from "../drawer.types";
+
+const DrawerOverlay = factory<DrawerOverlayFactoryPayload>(
+    (
+        {
+            closeOnClick = true,
+            backgroundOpacity = 0.5,
+            blur = 0,
+            className,
+            onMouseDown,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const {
+            drawer,
+            closeOnClickOutside,
+            withinPortal,
+            transitionProps,
+            getStyles
+        } = useDrawerContext();
+
+        const blurValue = typeof blur === "number" ? `${blur}px` : blur;
+        const backdropFilterValue =
+            blurValue !== "0" && blurValue !== "0px"
+                ? `blur(${blurValue})`
+                : undefined;
+
+        const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+            onMouseDown?.(event);
+
+            if (
+                event.defaultPrevented ||
+                !closeOnClick ||
+                !closeOnClickOutside
+            ) {
+                return;
+            }
+
+            drawer.close();
+        };
+
+        const overlayContent = (
+            <Transition
+                transition="fade"
+                duration={150}
+                mounted={drawer.opened}
+                {...transitionProps}
+            >
+                <div
+                    ref={ref}
+                    aria-hidden="true"
+                    className={cx(
+                        "fixed inset-0 z-40",
+                        getStyles("overlay"),
+                        className
+                    )}
+                    style={{
+                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                        backdropFilter: backdropFilterValue,
+                        ...style
+                    }}
+                    onMouseDown={handleMouseDown}
+                    {...props}
+                />
+            </Transition>
+        );
+
+        return withinPortal ? (
+            <Portal>{overlayContent}</Portal>
+        ) : (
+            overlayContent
+        );
+    }
+);
+
+DrawerOverlay.displayName = "@refraktor/core/Drawer.Overlay";
+
+export default DrawerOverlay;

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

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