@refraktor/core 0.0.1

package/src/components/pagination/pagination.types.ts

@@ -0,0 +1,95 @@
+import { ComponentPropsWithoutRef } from "react";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+
+export type PaginationVariant = "default" | "filled" | "outline" | "ghost";
+
+export type PaginationAriaLabelType =
+    | "page"
+    | "first"
+    | "previous"
+    | "next"
+    | "last";
+
+export type PaginationClassNames = {
+    root?: string;
+    list?: string;
+    item?: string;
+    page?: string;
+    control?: string;
+    dots?: string;
+    first?: string;
+    previous?: string;
+    next?: string;
+    last?: string;
+};
+
+export interface PaginationProps
+    extends Omit<ComponentPropsWithoutRef<"nav">, "children" | "onChange"> {
+    /** Total amount of pages */
+    total: number;
+
+    /** Active page (controlled) */
+    value?: number;
+
+    /** Initial active page (uncontrolled) */
+    defaultValue?: number;
+
+    /** Callback called when page changes */
+    onChange?: (value: number) => void;
+
+    /** Number of sibling pages around active page @default `1` */
+    siblings?: number;
+
+    /** Number of always-visible pages at the edges @default `1` */
+    boundaries?: number;
+
+    /** Whether to show previous/next controls @default `true` */
+    withControls?: boolean;
+
+    /** Whether to show first/last controls @default `false` */
+    withEdges?: boolean;
+
+    /** Hide component when total is 1 @default `false` */
+    hideWithOnePage?: boolean;
+
+    /** Whether all controls are disabled @default `false` */
+    disabled?: boolean;
+
+    /** The size of the pagination @default `md` */
+    size?: RefraktorSize;
+
+    /** The radius of page buttons @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Visual style variant @default `default` */
+    variant?: PaginationVariant;
+
+    /** Used for custom aria labels */
+    getItemAriaLabel?: (
+        type: PaginationAriaLabelType,
+        page: number,
+        selected: boolean
+    ) => string;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: PaginationClassNames;
+}
+
+export interface PaginationFactoryPayload extends FactoryPayload {
+    props: PaginationProps;
+    ref: HTMLElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PaginationProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<PaginationClassNames>
+        >;
+    };
+}

package/src/components/pagination/pagination.utils.ts

@@ -0,0 +1,88 @@
+import { clamp } from "@refraktor/utils";
+
+export type PaginationRangeItem = number | "dots-left" | "dots-right";
+
+export type PaginationRangeOptions = {
+    total: number;
+    page: number;
+    siblings: number;
+    boundaries: number;
+};
+
+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 buildPaginationRange(
+    options: PaginationRangeOptions
+): PaginationRangeItem[] {
+    const total = toSafeInteger(options.total, 0, 0);
+
+    if (total <= 0) {
+        return [];
+    }
+
+    const page = clamp(toSafeInteger(options.page, 1, 1), 1, total);
+    const siblings = toSafeInteger(options.siblings, 1, 0);
+    const boundaries = Math.min(
+        toSafeInteger(options.boundaries, 1, 0),
+        Math.floor(total / 2)
+    );
+
+    const totalVisibleNumbers = boundaries * 2 + siblings * 2 + 3;
+
+    if (totalVisibleNumbers >= total) {
+        return range(1, total);
+    }
+
+    const leftSiblingIndex = Math.max(page - siblings, boundaries + 2);
+    const rightSiblingIndex = Math.min(page + siblings, total - boundaries - 1);
+
+    const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
+    const shouldShowRightDots = rightSiblingIndex < total - boundaries - 1;
+
+    const leftBoundary = range(1, boundaries);
+    const rightBoundary = range(total - boundaries + 1, total);
+
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemsCount = boundaries + siblings * 2 + 2;
+        const leftRange = range(1, leftItemsCount);
+
+        return [...leftRange, "dots-right", ...rightBoundary];
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemsCount = boundaries + siblings * 2 + 2;
+        const rightRange = range(total - rightItemsCount + 1, total);
+
+        return [...leftBoundary, "dots-left", ...rightRange];
+    }
+
+    if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+
+        return [
+            ...leftBoundary,
+            "dots-left",
+            ...middleRange,
+            "dots-right",
+            ...rightBoundary
+        ];
+    }
+
+    return range(1, total);
+}

package/src/components/popover/index.ts

@@ -0,0 +1,12 @@
+export { default as Popover } from "./popover";
+export { PopoverTrigger } from "./popover-trigger";
+export { PopoverDropdown } from "./popover-dropdown";
+export type {
+    PopoverProps,
+    PopoverTriggerProps,
+    PopoverDropdownProps,
+    PopoverClassNames,
+    PopoverPositioning,
+    PopoverMiddlewares,
+    PopoverTrigger as PopoverTriggerType
+} from "./popover.types";

package/src/components/popover/popover-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as PopoverDropdown } from "./popover-dropdown";

package/src/components/popover/popover-dropdown/popover-dropdown.tsx

@@ -0,0 +1,92 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { PopoverDropdownFactoryPayload } from "../popover.types";
+import { usePopoverContext } from "../popover.context";
+import { Transition } from "../../transition";
+import {
+    FloatingArrow,
+    FloatingFocusManager,
+    FloatingPortal
+} from "@floating-ui/react";
+
+const PopoverDropdown = factory<PopoverDropdownFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const {
+            popover,
+            showArrow,
+            radius,
+            withinPortal,
+            transitionProps,
+            getStyles
+        } = usePopoverContext();
+
+        const dropdownContent = (
+            <Transition
+                transition="fade"
+                duration={200}
+                mounted={popover.opened}
+                {...transitionProps}
+            >
+                <div
+                    ref={(node) => {
+                        popover.refs.setFloating(node);
+
+                        if (typeof ref === "function") {
+                            ref(node);
+                        } else if (ref) {
+                            ref.current = node;
+                        }
+                    }}
+                    role="dialog"
+                    aria-modal="true"
+                    style={{
+                        ...popover.floatingStyles,
+                        ...style
+                    }}
+                    className={cx(
+                        "z-50 p-2 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md text-sm border-0",
+                        getRadius(radius),
+                        getStyles("dropdown"),
+                        className
+                    )}
+                    {...popover.getFloatingProps()}
+                    {...props}
+                >
+                    {children}
+
+                    {showArrow && (
+                        <FloatingArrow
+                            ref={popover.arrowRef}
+                            context={popover.context}
+                            width={10}
+                            height={5}
+                            className={cx(
+                                "fill-[var(--refraktor-bg)]",
+                                getStyles("arrow")
+                            )}
+                        />
+                    )}
+                </div>
+            </Transition>
+        );
+
+        const wrappedContent = popover.opened ? (
+            <FloatingFocusManager context={popover.context} modal={false}>
+                {dropdownContent}
+            </FloatingFocusManager>
+        ) : (
+            dropdownContent
+        );
+
+        if (withinPortal) {
+            return <FloatingPortal>{wrappedContent}</FloatingPortal>;
+        }
+
+        return wrappedContent;
+    }
+);
+
+PopoverDropdown.displayName = "@refraktor/core/Popover.Dropdown";
+
+export default PopoverDropdown;

package/src/components/popover/popover-trigger/index.ts

@@ -0,0 +1 @@
+export { default as PopoverTrigger } from "./popover-trigger";

package/src/components/popover/popover-trigger/popover-trigger.tsx

@@ -0,0 +1,49 @@
+import { cloneElement, isValidElement, ComponentProps } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { PopoverTriggerFactoryPayload } from "../popover.types";
+import { usePopoverContext } from "../popover.context";
+
+const PopoverTrigger = factory<PopoverTriggerFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { popover, getStyles } = usePopoverContext();
+
+        const triggerElement = isValidElement(children)
+            ? cloneElement(children as any, {
+                  ref: (node: HTMLElement | null) => {
+                      popover.refs.setReference(node);
+
+                      const childRef = (children as any).ref;
+                      if (typeof childRef === "function") {
+                          childRef(node);
+                      } else if (childRef) {
+                          childRef.current = node;
+                      }
+
+                      if (typeof ref === "function") {
+                          ref(node as HTMLDivElement);
+                      } else if (ref) {
+                          ref.current = node as HTMLDivElement;
+                      }
+                  },
+                  ...popover.getReferenceProps({
+                      ...(children.props as ComponentProps<any>)
+                  })
+              })
+            : children;
+
+        return (
+            <div
+                className={cx("inline-block", getStyles("trigger"), className)}
+                {...props}
+            >
+                {triggerElement}
+            </div>
+        );
+    }
+);
+
+PopoverTrigger.displayName = "@refraktor/core/Popover.Trigger";
+
+export default PopoverTrigger;

package/src/components/popover/popover.context.ts

@@ -0,0 +1,20 @@
+import { createSafeContext } from "@refraktor/utils";
+import { UsePopoverReturn } from "./use-popover";
+import { PopoverClassNames } from "./popover.types";
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+
+export interface PopoverContextValue {
+    popover: UsePopoverReturn;
+    showArrow: boolean;
+    radius: RefraktorRadius;
+    withinPortal: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    classNames?: PopoverClassNames;
+    getStyles: (part: keyof PopoverClassNames) => string | undefined;
+}
+
+export const [PopoverProvider, usePopoverContext] =
+    createSafeContext<PopoverContextValue>(
+        "Popover component was not found in tree. Make sure you wrap Popover.Trigger and Popover.Dropdown with Popover component."
+    );

package/src/components/popover/popover.tsx

@@ -0,0 +1,113 @@
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    PopoverClassNames,
+    PopoverFactoryPayload,
+    PopoverProps
+} from "./popover.types";
+import { usePopover } from "./use-popover";
+import { PopoverProvider } from "./popover.context";
+import { PopoverTrigger } from "./popover-trigger";
+import { PopoverDropdown } from "./popover-dropdown";
+
+const defaultProps = {
+    positioning: {
+        placement: "bottom",
+        offset: 8
+    },
+    middlewares: { flip: true, shift: true },
+    trigger: "click",
+    openDelay: 0,
+    closeDelay: 0,
+    showArrow: false,
+    radius: "default",
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    trapFocus: false
+} satisfies Partial<PopoverProps>;
+
+const Popover = factory<PopoverFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        openDelay,
+        closeDelay,
+        showArrow,
+        transitionProps,
+        radius,
+        withinPortal,
+        closeOnClickOutside,
+        closeOnEscape,
+        trapFocus,
+        className,
+        classNames,
+        ...props
+    } = useProps("Popover", defaultProps, _props);
+    const classes = useClassNames("Popover", classNames);
+
+    const _id = useId(id);
+
+    const popover = usePopover({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        showArrow,
+        closeOnClickOutside,
+        closeOnEscape,
+        openDelay,
+        closeDelay
+    });
+
+    const getStyles = (part: keyof PopoverClassNames) => classes[part];
+
+    return (
+        <PopoverProvider
+            value={{
+                popover,
+                showArrow: showArrow ?? false,
+                radius: radius ?? "default",
+                withinPortal: withinPortal ?? true,
+                transitionProps,
+                classNames,
+                getStyles
+            }}
+        >
+            <div
+                ref={ref}
+                id={_id}
+                className={cx("inline-block", classes.root, className)}
+                {...props}
+            >
+                {children}
+            </div>
+        </PopoverProvider>
+    );
+});
+
+Popover.displayName = "@refraktor/core/Popover";
+Popover.configure = createComponentConfig<PopoverProps>();
+Popover.classNames = createClassNamesConfig<PopoverClassNames>();
+Popover.Trigger = PopoverTrigger;
+Popover.Dropdown = PopoverDropdown;
+
+export default Popover;

package/src/components/popover/popover.types.ts

@@ -0,0 +1,137 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import type {
+    FlipOptions,
+    InlineOptions,
+    Placement,
+    ShiftOptions
+} from "@floating-ui/react";
+import { TransitionProps } from "../transition";
+import { RefraktorRadius } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { PopoverTrigger } from "./popover-trigger";
+import { PopoverDropdown } from "./popover-dropdown";
+
+export type PopoverClassNames = {
+    root?: string;
+    trigger?: string;
+    dropdown?: string;
+    arrow?: string;
+};
+
+export type PopoverPositioning = {
+    /** The placement of the popover relative to the trigger element @default `bottom` */
+    placement?: Placement;
+
+    /** Offset distance from the trigger element in pixels @default `8` */
+    offset?: number;
+};
+
+export type PopoverMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+
+export type PopoverTrigger = "click" | "hover" | "focus";
+
+export interface PopoverProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing subcomponents */
+    children: ReactNode;
+
+    /** State of the popover (controlled) */
+    opened?: boolean;
+
+    /** Initial state of the popover (uncontrolled) */
+    defaultOpened?: boolean;
+
+    /** Callback called when the popover state changes */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Positioning settings for the popover */
+    positioning?: PopoverPositioning;
+
+    /** Middlewares settings for the popover */
+    middlewares?: PopoverMiddlewares;
+
+    /** Whether the popover is disabled @default `false` */
+    disabled?: boolean;
+
+    /** Trigger type for the popover @default `click` */
+    trigger?: PopoverTrigger;
+
+    /** Delay in milliseconds before the popover opens @default `0` */
+    openDelay?: number;
+
+    /** Delay in milliseconds before the popover closes @default `0` */
+    closeDelay?: number;
+
+    /** Whether to show the arrow for the popover @default `false` */
+    showArrow?: boolean;
+
+    /** Transition props for the popover dropdown, uses Transition component internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+
+    /** Radius for the popover dropdown @default `default` */
+    radius?: RefraktorRadius;
+
+    /** Whether to render the popover within a portal @default `true` */
+    withinPortal?: boolean;
+
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close on escape key @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Whether to trap focus within the popover @default `false` */
+    trapFocus?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: PopoverClassNames;
+}
+
+export interface PopoverTriggerProps extends ComponentPropsWithoutRef<"div"> {
+    /** The trigger element */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface PopoverDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content to display inside the dropdown */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface PopoverFactoryPayload extends FactoryPayload {
+    props: PopoverProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PopoverProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<PopoverClassNames>
+        >;
+        Trigger: typeof PopoverTrigger;
+        Dropdown: typeof PopoverDropdown;
+    };
+}
+
+export interface PopoverTriggerFactoryPayload extends FactoryPayload {
+    props: PopoverTriggerProps;
+    ref: HTMLDivElement;
+}
+
+export interface PopoverDropdownFactoryPayload extends FactoryPayload {
+    props: PopoverDropdownProps;
+    ref: HTMLDivElement;
+}