@rebasepro/ui 0.17.3 → 0.18.1

package/src/components/Sheet.tsx

@@ -1,135 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import { cls } from "../util";
-import { defaultBorderMixin } from "../styles";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { usePortalContainer, PortalContainerProvider } from "../hooks/PortalContainerContext";
-
-interface SheetProps {
-    children: React.ReactNode;
-    open: boolean;
-    title?: string;
-    modal?: boolean;
-    includeBackgroundOverlay?: boolean;
-    side?: "top" | "bottom" | "left" | "right";
-    darkBackground?: boolean;
-    transparent?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    onPointerDownOutside?: (e: Event) => void;
-    onInteractOutside?: (e: Event) => void;
-    className?: string;
-    style?: React.CSSProperties;
-    overlayClassName?: string;
-    overlayZIndex?: string;
-    overlayStyle?: React.CSSProperties;
-    portalContainer?: HTMLElement | null;
-}
-
-export const Sheet: React.FC<SheetProps> = ({
-    children,
-    side = "right",
-    title,
-    modal = true,
-    includeBackgroundOverlay = true,
-    open,
-    onOpenChange,
-    onPointerDownOutside,
-    onInteractOutside,
-    transparent,
-    className,
-    style,
-    overlayClassName,
-    overlayZIndex = "z-50",
-    overlayStyle,
-    portalContainer,
-    ...props
-}) => {
-    const [displayed, setDisplayed] = useState(false);
-    const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
-
-    // Get the portal container from context
-    const contextContainer = usePortalContainer();
-
-    // Prioritize manual prop, fallback to context container
-    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
-
-    useEffect(() => {
-        const raf = requestAnimationFrame(() => {
-            setDisplayed(open);
-        });
-        return () => cancelAnimationFrame(raf);
-    }, [open]);
-
-    const transformValue: Record<string, string> = {
-        top: "-translate-y-full",
-        bottom: "translate-y-full",
-        left: "-translate-x-full",
-        right: "translate-x-full"
-    };
-
-    const borderClass: Record<string, string> = {
-        top: "border-b",
-        bottom: "border-t",
-        left: "border-r",
-        right: "border-l"
-    };
-
-    return (
-        <DialogPrimitive.Root open={displayed || open}
-            modal={modal}
-            onOpenChange={onOpenChange}>
-            <DialogPrimitive.Portal container={finalContainer}>
-                {includeBackgroundOverlay && <DialogPrimitive.Overlay
-                    className={cls(
-                        "outline-none",
-                        "fixed inset-0 bg-white/80 dark:bg-surface-900/80",
-                        "backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-                        overlayZIndex,
-                        overlayClassName
-                    )}
-                    style={overlayStyle}
-                />}
-                <DialogPrimitive.Content
-                    {...props}
-                    ref={setContentEl}
-                    onOpenAutoFocus={(event) => event.preventDefault()}
-                    onPointerDownOutside={onPointerDownOutside}
-                    onInteractOutside={onInteractOutside}
-                    className={cls(
-                        "outline-none",
-                        borderClass[side],
-                        defaultBorderMixin,
-                        // No `will-change: transform` / `transform-gpu` here, however
-                        // tempting the layer hint is on a panel this size. Either one
-                        // makes this element a *containing block* for its
-                        // `position: fixed` descendants, and everything portaled into
-                        // the panel below — a Select dropdown, above all — is fixed and
-                        // positioned in viewport coordinates. Inside a containing block
-                        // those coordinates are resolved against the panel instead, so
-                        // every popup was displaced by the panel's own offset and a
-                        // right-hand Select opened its list off the edge of the screen:
-                        // the dropdown was open, just nowhere anyone could see it.
-                        "text-surface-accent-900 dark:text-white",
-                        "fixed transform z-50 transition-[transform,opacity] ease-in-out",
-                        !displayed ? "duration-150" : "duration-100",
-                        "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0",
-                        transparent ? "" : "shadow-md bg-white dark:bg-surface-900",
-                        side === "top" || side === "bottom" ? "w-full" : "h-full",
-                        side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
-                        displayed && open ? "opacity-100" : "opacity-50",
-                        !displayed || !open ? transformValue[side] : "",
-                        className
-                    )}
-                    style={style}
-                >
-                    <DialogPrimitive.Title className="sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0">
-                        {title ?? "Sheet"}
-                    </DialogPrimitive.Title>
-                    <PortalContainerProvider container={contentEl}>
-                        {children}
-                    </PortalContainerProvider>
-                </DialogPrimitive.Content>
-            </DialogPrimitive.Portal>
-        </DialogPrimitive.Root>
-    );
-};

package/src/components/Skeleton.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { cls } from "../util";
-import { useInjectStyles } from "../hooks";
-
-export type SkeletonProps = {
-    width?: number;
-    height?: number;
-    className?: string;
-}
-
-const styles = `
-@keyframes shimmer {
-  0% {
-    transform: translateX(-150%);
-  }
-  100% {
-    transform: translateX(150%);
-  }
-}
-`;
-
-export function Skeleton({
-                             width,
-                             height,
-                             className
-                         }: SkeletonProps) {
-
-    useInjectStyles("Skeleton", styles);
-
-    return <span
-        style={{
-            width: width === undefined ? undefined : `${width}px`,
-            height: height === undefined ? undefined : `${height}px`
-        }}
-        className={
-        cls(
-            "block relative overflow-hidden",
-            "bg-surface-accent-50 dark:bg-surface-accent-800 rounded-md",
-            "max-w-full max-h-full",
-            // The defaults are classes, not inline styles, so that a caller can
-            // override them: an inline style beats every utility, which is why
-            // `<Skeleton className="w-full h-full"/>` inside a 40px thumbnail
-            // box used to render a 12px bar. The `width`/`height` props still
-            // win over any class, since those do land inline.
-            width === undefined ? "w-full" : undefined,
-            height === undefined ? "h-3" : undefined,
-            className)
-    }>
-        <span
-            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent"
-            style={{ animation: "shimmer 1.8s ease-in-out infinite" }}
-        />
-    </span>;
-}

package/src/components/Slider.tsx

@@ -1,110 +0,0 @@
-"use client";
-import * as React from "react";
-import { cls } from "../util";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-export interface SliderProps {
-    className?: string;
-    name?: string;
-    disabled?: boolean;
-    orientation?: React.AriaAttributes["aria-orientation"];
-    dir?: "ltr" | "rtl";
-    min?: number;
-    max?: number;
-    step?: number;
-    minStepsBetweenThumbs?: number;
-    value?: number[];
-    defaultValue?: number[];
-    onValueChange?: (value: number[]) => void;
-    onValueCommit?: (value: number[]) => void;
-    inverted?: boolean;
-    form?: string;
-    size?: "small" | "regular";
-}
-
-function SliderThumb(props: {
-    props: Omit<React.PropsWithoutRef<SliderProps>, "size" | "className">,
-    index: number,
-    hovered: boolean,
-    classes: string
-}) {
-    return <TooltipPrimitive.Root open={props.hovered}>
-        <TooltipPrimitive.Trigger asChild>
-            <SliderPrimitive.Thumb
-                className={cls({
-                        "border-primary bg-primary outline-none": !props.props.disabled,
-                        "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
-                    },
-                    props.classes,
-                    "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50 focus-visible:ring-primary/50",
-                    "hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:ring-primary/25",
-                    "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50")}
-
-            />
-        </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Content side="top"
-                                  sideOffset={5}
-                                  className={cls(
-                                      "TooltipContent",
-                                      "max-w-lg leading-relaxed",
-                                      "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"
-                                  )}>
-            {props.props.value?.[props.index]}
-        </TooltipPrimitive.Content>
-    </TooltipPrimitive.Root>;
-}
-
-const Slider = React.forwardRef<
-    React.ElementRef<typeof SliderPrimitive.Root>,
-    SliderProps
->(({
-       className,
-       size = "regular",
-       ...props
-   }, ref) => {
-    const [hovered, setHovered] = React.useState(false);
-
-    const thumbSizeClasses =
-        size === "small"
-            ? "h-4 w-4" // Smaller size for the thumb
-            : "h-6 w-6"; // Default size
-
-    return (
-        <TooltipPrimitive.Provider delayDuration={200}>
-            <SliderPrimitive.Root
-                ref={ref}
-                onMouseEnter={() => setHovered(true)}
-                onMouseLeave={() => setHovered(false)}
-                className={cls(
-                    "relative flex w-full touch-none select-none items-center",
-                    className
-                )}
-                {...props}
-            >
-                <SliderPrimitive.Track
-                    style={{ height: size === "small" ? 4 : 8 }}
-                    className={"relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 bg-surface-accent-300/40 dark:bg-surface-700 dark:bg-opacity-40 dark:bg-surface-700/40"}>
-
-                    <SliderPrimitive.Range
-                        className={cls("absolute h-full", {
-                            "bg-primary": !props.disabled,
-                            "bg-surface-accent-300 dark:bg-surface-700": props.disabled
-                        })}
-                    />
-                </SliderPrimitive.Track>
-
-                {(props.value ?? [0]).map((_, index) => <SliderThumb
-                    key={index}
-                    index={index}
-                    props={props}
-                    hovered={hovered}
-                    classes={thumbSizeClasses}/>)}
-            </SliderPrimitive.Root>
-        </TooltipPrimitive.Provider>
-    );
-});
-
-Slider.displayName = "Slider";
-
-export { Slider };

package/src/components/Table.tsx

@@ -1,178 +0,0 @@
-
-"use client";
-
-import { TagIcon } from "lucide-react";
-import React, { useRef } from "react";
-import { defaultBorderMixin } from "../styles";
-import { cls } from "../util";
-
-export type TableProps = {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-} & React.TableHTMLAttributes<HTMLTableElement>;
-
-export const Table = React.memo(({
-                          children,
-                          className,
-                          style,
-                          ...rest
-                      }: TableProps) => (
-    <table
-        className={cls("text-left text-text-primary dark:text-text-primary-dark rounded-lg overflow-x-auto", className)}
-        style={style}
-        {...rest}
-    >
-        {children}
-    </table>
-));
-
-export type TableBodyProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & React.HTMLAttributes<HTMLTableSectionElement>;
-
-export const TableBody = React.memo(({
-                              children,
-                              className,
-                              ...rest
-                          }: TableBodyProps) => (
-    <tbody
-        className={cls("bg-white dark:bg-surface-900 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70 dark:divide-surface-700/70", className)}
-        {...rest}
-    >
-    {children}
-    </tbody>
-));
-
-export type TableHeaderProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & React.HTMLAttributes<HTMLTableSectionElement>;
-
-export const TableHeader = React.memo(({
-                                children,
-                                className,
-                                ...rest
-                            }: TableHeaderProps) => (
-    <thead {...rest}>
-    <tr
-        className={cls(
-            defaultBorderMixin,
-            "text-sm font-medium text-surface-700 dark:text-surface-accent-300",
-            "bg-surface-accent-50 border-b dark:bg-surface-800",
-            className
-        )}
-    >
-        {children}
-    </tr>
-    </thead>
-));
-
-export type TableRowProps = {
-    children?: React.ReactNode;
-    className?: string;
-    onClick?: React.MouseEventHandler<any>;
-    style?: React.CSSProperties;
-} & React.HTMLAttributes<HTMLTableRowElement>;
-
-export const TableRow = React.memo(({
-                             children,
-                             className,
-                             onClick,
-                             style,
-                             ...rest
-                         }: TableRowProps) => (
-    <tr
-        onClick={onClick}
-        style={style}
-        className={cls(
-            "bg-white dark:bg-surface-900",
-            onClick ? "transition-colors duration-150 hover:bg-primary/5 cursor-pointer" : "",
-            className
-        )}
-        {...rest}
-    >
-        {children}
-    </tr>
-));
-
-export type TableCellProps = {
-    children?: React.ReactNode;
-    header?: boolean;
-    scope?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    align?: "left" | "center" | "right";
-    colspan?: number;
-} & React.HTMLAttributes<HTMLTableCellElement>;
-
-export const TableCell = React.memo(({
-                              children,
-                              header = false,
-                              scope = "",
-                              align,
-                              className,
-                              style,
-                              colspan,
-                              ...rest
-                          }: TableCellProps) => {
-    const ref = useRef<HTMLTableCellElement>(null);
-    const TagIcon = header || getParentName(ref.current) === "TableHeader" ? "th" : "td";
-    return (
-        <TagIcon
-            scope={scope}
-            colSpan={colspan}
-            ref={ref}
-            style={style}
-            className={cls(
-                "px-4 py-3 text-clip ",
-                align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
-                className
-            )}
-            {...rest}
-        >
-            {children}
-        </TagIcon>
-    );
-});
-
-interface ReactFiber {
-    return: ReactFiber;
-    type: string | Function;
-    elementType?: {
-        name?: string;
-    };
-}
-
-// This is highly experimental and might break in the future
-function getParentName(element: HTMLElement | null): string | undefined {
-    if (element) {
-        const key = Object.keys(element).find((key) => {
-            return (
-                key.startsWith("__reactFiber$") ||
-                key.startsWith("__reactInternalInstance$")
-            );
-        });
-        if (key) {
-            const domFiber = (element as unknown as Record<string, ReactFiber>)[key];
-            const getComponentFiber = (fiber: ReactFiber): ReactFiber => {
-                let parentFiber = fiber.return;
-                while (parentFiber && typeof parentFiber.type === "string") {
-                    parentFiber = parentFiber.return;
-                }
-                return parentFiber;
-            };
-            let fiber = getComponentFiber(domFiber);
-            fiber = getComponentFiber(fiber);
-            return fiber?.elementType?.name;
-        }
-    }
-    return undefined;
-}
-
-Table.displayName = "Table";
-TableBody.displayName = "TableBody";
-TableHeader.displayName = "TableHeader";
-TableRow.displayName = "TableRow";
-TableCell.displayName = "TableCell";

package/src/components/Tabs.tsx

@@ -1,185 +0,0 @@
-
-import React, { createContext, useContext, useRef, useState, useEffect, useMemo } from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cls } from "../util";
-import { defaultBorderMixin } from "../styles";
-
-export type TabVariant = "standard" | "boxy" | "pill";
-
-const TabsContext = createContext<{ variant: TabVariant }>({ variant: "standard" });
-import { IconButton } from "./IconButton";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { iconSize } from "../icons/Icon";
-
-export type TabsProps = {
-    value: string,
-    children: React.ReactNode,
-    innerClassName?: string,
-    className?: string,
-    variant?: TabVariant,
-    onValueChange: (value: string) => void
-};
-
-export function Tabs({
-    value,
-    onValueChange,
-    className,
-    innerClassName,
-    variant = "standard",
-    children
-}: TabsProps) {
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const [showLeftScroll, setShowLeftScroll] = useState(false);
-    const [showRightScroll, setShowRightScroll] = useState(false);
-    const [isScrollable, setIsScrollable] = useState(false);
-
-    const checkScroll = () => {
-        if (scrollContainerRef.current) {
-            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
-            setShowLeftScroll(scrollLeft > 0);
-            setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
-            setIsScrollable(scrollWidth > clientWidth);
-        }
-    };
-
-    useEffect(() => {
-        checkScroll();
-        window.addEventListener("resize", checkScroll);
-
-        let observer: ResizeObserver;
-        if (scrollContainerRef.current) {
-            observer = new ResizeObserver(checkScroll);
-            observer.observe(scrollContainerRef.current);
-            if (scrollContainerRef.current.firstElementChild) {
-                observer.observe(scrollContainerRef.current.firstElementChild);
-            }
-        }
-
-        return () => {
-            window.removeEventListener("resize", checkScroll);
-            observer?.disconnect();
-        };
-    }, [children]);
-
-    const scroll = (direction: "left" | "right") => {
-        if (scrollContainerRef.current) {
-            const container = scrollContainerRef.current;
-            const scrollAmount = Math.max(container.clientWidth / 2, 200);
-            const targetScroll = container.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
-
-            container.scrollTo({
-                left: targetScroll,
-                behavior: "smooth"
-            });
-            // checkScroll will be called by onScroll event
-        }
-    };
-
-    const contextValue = useMemo(() => ({ variant }), [variant]);
-
-    return <TabsContext.Provider value={contextValue}>
-        <TabsPrimitive.Root
-            value={value}
-            onValueChange={onValueChange}
-            className={cls("relative flex flex-row items-center min-w-0 w-full", className)}
-        >
-            {isScrollable && (
-                <button
-                    type="button"
-                    disabled={!showLeftScroll}
-                    aria-label="Scroll tabs left"
-                    onClick={() => scroll("left")}
-                    className={cls(
-                        "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6",
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
-                        !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800",
-                        "bg-surface-50 dark:bg-surface-900 border shadow-sm", defaultBorderMixin
-                    )}
-                >
-                    <ChevronLeftIcon size={iconSize.smallest}/>
-                </button>
-            )}
-            <div
-                ref={scrollContainerRef}
-                className="flex-1 overflow-x-auto no-scrollbar min-w-0"
-                onScroll={checkScroll}
-                style={{ scrollbarWidth: "none",
-msOverflowStyle: "none" }}
-            >
-                <TabsPrimitive.List className={cls(
-                    variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border",
-                    variant === "standard" && defaultBorderMixin,
-                    variant === "boxy" && "flex items-center h-full",
-                    variant === "pill" && "flex items-center gap-0.5",
-                    innerClassName)
-                }>
-                    {children}
-                </TabsPrimitive.List>
-            </div>
-            {isScrollable && (
-                <button
-                    type="button"
-                    disabled={!showRightScroll}
-                    aria-label="Scroll tabs right"
-                    onClick={() => scroll("right")}
-                    className={cls(
-                        "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6",
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
-                        !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-800",
-                        "bg-surface-50 dark:bg-surface-900 border shadow-sm", defaultBorderMixin
-                    )}
-                >
-                    <ChevronRightIcon size={iconSize.smallest}/>
-                </button>
-            )}
-        </TabsPrimitive.Root>
-    </TabsContext.Provider>;
-}
-
-export type TabProps = {
-    value: string,
-    className?: string,
-    innerClassName?: string,
-    children: React.ReactNode,
-    disabled?: boolean
-};
-
-export function Tab({
-    value,
-    className,
-    innerClassName,
-    children,
-    disabled
-}: TabProps) {
-    const { variant } = useContext(TabsContext);
-
-    return (
-        <TabsPrimitive.Trigger
-            value={value}
-            disabled={disabled}
-            className={cls(
-                "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
-                "disabled:pointer-events-none disabled:opacity-50",
-                variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
-                variant === "boxy" && cls(
-                    "flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-xs font-medium transition-colors group relative box-border overflow-hidden",
-                    "border-b-2 border-b-transparent",
-                    "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900",
-                    "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark",
-                    "data-[state=active]:border-b-primary",
-                    "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"
-                ),
-                variant === "pill" && cls(
-                    "px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors",
-                    "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary",
-                    "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"
-                ),
-                className,
-                variant === "standard" && innerClassName
-            )}
-        >
-            {children}
-        </TabsPrimitive.Trigger>
-    );
-}