@refraktor/core 0.0.3 → 0.0.5

package/src/components/color-swatch/color-swatch.tsx

@@ -1,84 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useTheme } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    useClassNames,
-    useProps
-} from "../../utils";
-import {
-    ColorSwatchClassNames,
-    ColorSwatchFactoryPayload,
-    ColorSwatchProps
-} from "./color-swatch.types";
-import { getSize } from "./color-swatch.styles";
-
-const defaultProps = {
-    color: "transparent",
-    size: "md",
-    radius: "default"
-} satisfies Partial<ColorSwatchProps>;
-
-const ColorSwatch = factory<ColorSwatchFactoryPayload>((_props, ref) => {
-    const { cx, getRadius } = useTheme();
-    const {
-        id,
-        color,
-        size,
-        radius,
-        children,
-        className,
-        classNames,
-        ...props
-    } = useProps("ColorSwatch", defaultProps, _props);
-    const classes = useClassNames("ColorSwatch", classNames);
-
-    const _id = useId(id);
-
-    return (
-        <div
-            ref={ref}
-            id={_id}
-            className={cx(
-                "relative inline-flex items-center justify-center overflow-hidden shrink-0 border border-[var(--refraktor-border)]",
-                getSize(size),
-                getRadius(radius),
-                classes.root,
-                className
-            )}
-            {...props}
-        >
-            <span
-                aria-hidden
-                className={cx(
-                    "absolute inset-0 refraktor-transparency-grid pointer-events-none",
-                    classes.grid
-                )}
-            />
-
-            <span
-                aria-hidden
-                className={cx("absolute inset-0 pointer-events-none", classes.color)}
-                style={{ background: color }}
-            />
-
-            {children && (
-                <span
-                    className={cx(
-                        "relative z-[1] inline-flex items-center justify-center",
-                        classes.content
-                    )}
-                >
-                    {children}
-                </span>
-            )}
-        </div>
-    );
-});
-
-ColorSwatch.displayName = "@refraktor/core/ColorSwatch";
-ColorSwatch.configure = createComponentConfig<ColorSwatchProps>();
-ColorSwatch.classNames = createClassNamesConfig<ColorSwatchClassNames>();
-
-export default ColorSwatch;

package/src/components/color-swatch/color-swatch.types.ts

@@ -1,46 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-
-export type ColorSwatchClassNames = {
-    root?: string;
-    grid?: string;
-    color?: string;
-    content?: string;
-};
-
-export interface ColorSwatchProps
-    extends Omit<ComponentPropsWithoutRef<"div">, "color"> {
-    /** Swatch color value (hex, rgb, rgba, hsl, etc.) */
-    color?: string;
-
-    /** Swatch size @default `md` */
-    size?: RefraktorSize;
-
-    /** Swatch radius @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Optional centered content */
-    children?: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: ColorSwatchClassNames;
-}
-
-export interface ColorSwatchFactoryPayload extends FactoryPayload {
-    props: ColorSwatchProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<ColorSwatchProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<ColorSwatchClassNames>
-        >;
-    };
-}

package/src/components/color-swatch/index.ts

@@ -1,2 +0,0 @@
-export { default as ColorSwatch } from "./color-swatch";
-export type { ColorSwatchProps, ColorSwatchClassNames } from "./color-swatch.types";

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,94 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useRef } from "react";
-import { RemoveScroll } from "react-remove-scroll";
-import { useTheme } from "../../../theme";
-import { factory, useClassNames, useProps } from "../../../utils";
-import { DrawerProvider } from "../drawer.context";
-import {
-    DrawerClassNames,
-    DrawerRootFactoryPayload,
-    DrawerRootProps
-} from "../drawer.types";
-import { useDrawer } from "../use-drawer";
-
-const defaultProps = {
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-    lockScroll: true,
-    withinPortal: true,
-    radius: "none",
-    position: "right",
-    size: "md"
-} satisfies Partial<DrawerRootProps>;
-
-const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside,
-        closeOnEscape,
-        lockScroll,
-        withinPortal,
-        radius,
-        position,
-        size,
-        transitionProps,
-        className,
-        classNames,
-        ...props
-    } = useProps("Drawer", defaultProps, _props);
-    const classes = useClassNames("Drawer", classNames);
-
-    const _id = useId(id);
-    const headerId = `${_id}-header`;
-    const contentRef = useRef<HTMLDivElement | null>(null);
-
-    const drawer = useDrawer({
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside,
-        closeOnEscape,
-        contentRef
-    });
-
-    const getStyles = (part: keyof DrawerClassNames) => classes[part];
-
-    return (
-        <DrawerProvider
-            value={{
-                drawer,
-                closeOnClickOutside,
-                lockScroll,
-                withinPortal,
-                radius,
-                position,
-                size,
-                transitionProps,
-                headerId,
-                contentRef,
-                classNames,
-                getStyles
-            }}
-        >
-            <RemoveScroll enabled={drawer.opened && lockScroll}>
-                <div
-                    ref={ref}
-                    id={_id}
-                    className={cx(classes.root, className)}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </RemoveScroll>
-        </DrawerProvider>
-    );
-});
-
-DrawerRoot.displayName = "@refraktor/core/Drawer.Root";
-
-export default DrawerRoot;

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

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

package/src/components/drawer/drawer.context.ts

@@ -1,25 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import { TransitionProps } from "../transition";
-import { DrawerClassNames, DrawerPosition } from "./drawer.types";
-import { UseDrawerReturn } from "./use-drawer";
-
-export interface DrawerContextValue {
-    drawer: UseDrawerReturn;
-    closeOnClickOutside: boolean;
-    lockScroll: boolean;
-    withinPortal: boolean;
-    radius: RefraktorRadius;
-    position: DrawerPosition;
-    size: RefraktorSize;
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-    headerId: string;
-    contentRef: React.MutableRefObject<HTMLDivElement | null>;
-    classNames?: DrawerClassNames;
-    getStyles: (part: keyof DrawerClassNames) => string | undefined;
-}
-
-export const [DrawerProvider, useDrawerContext] =
-    createSafeContext<DrawerContextValue>(
-        "Drawer context was not found in tree. Make sure Drawer subcomponents are wrapped with Drawer or DrawerRoot."
-    );

package/src/components/drawer/drawer.styles.ts

@@ -1,32 +0,0 @@
-import { CSSProperties } from "react";
-import { RefraktorSize } from "../../theme";
-import { DrawerPosition } from "./drawer.types";
-
-const sizes: Record<RefraktorSize, string> = {
-    xs: "16rem",
-    sm: "20rem",
-    md: "24rem",
-    lg: "30rem",
-    xl: "36rem"
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-export function getSizeStyles(
-    position: DrawerPosition,
-    size: RefraktorSize = "md"
-): CSSProperties {
-    const resolvedSize = getSize(size);
-
-    if (position === "left" || position === "right") {
-        return {
-            width: resolvedSize,
-            maxWidth: "100vw"
-        };
-    }
-
-    return {
-        height: resolvedSize,
-        maxHeight: "100vh"
-    };
-}