@rebasepro/ui 0.17.3 → 0.18.1

package/src/components/FileUpload.tsx

@@ -1,103 +0,0 @@
-"use client";
-import React from "react";
-import { useDropzone } from "react-dropzone";
-import { fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles";
-import { cls } from "../util";
-import { Typography } from "./Typography";
-
-export interface FileUploadError {
-    message: string;
-    code: string;
-}
-
-export type OnFileUploadRejected = (fileRejections: {
-    file: File;
-    errors: readonly FileUploadError[];
-}[], event: object) => void;
-
-export type OnFilesUploadAdded = (files: File[]) => void;
-
-export type FileUploadProps = {
-    // e.g. accept={{ "*/image": [] }}
-    accept?: Record<string, string[]>,
-    onFilesAdded: OnFilesUploadAdded,
-    onFilesRejected?: OnFileUploadRejected,
-    maxSize?: number,
-    disabled?: boolean;
-    maxFiles?: number;
-    title?: React.ReactNode;
-    uploadDescription?: React.ReactNode;
-    preventDropOnDocument?: boolean;
-    size?: "small" | "medium" | "large";
-};
-
-export function FileUpload({
-    accept,
-    onFilesAdded,
-    onFilesRejected,
-    maxSize,
-    disabled,
-    maxFiles,
-    title,
-    uploadDescription,
-    children,
-    preventDropOnDocument = true,
-    size
-}: React.PropsWithChildren<FileUploadProps>) {
-
-    const {
-        getRootProps,
-        getInputProps,
-        isDragActive,
-        isDragAccept,
-        isDragReject
-    } = useDropzone({
-        accept,
-        noDragEventsBubbling: true,
-        maxSize,
-        onDrop: onFilesAdded,
-        onDropRejected: onFilesRejected,
-        disabled,
-        maxFiles,
-        preventDropOnDocument
-    }
-    );
-    return <div
-        {...getRootProps()}
-        role="button"
-        aria-label={typeof title === "string" ? title : (typeof uploadDescription === "string" ? uploadDescription : "Upload file")}
-        aria-disabled={disabled || undefined}
-        className={cls(
-            fieldBackgroundMixin,
-            "flex gap-2",
-            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
-            {
-                "h-44": size === "large",
-                "h-28": size === "medium",
-                "h-16": size === "small",
-                "cursor-pointer": !disabled,
-                [fieldBackgroundHoverMixin]: !isDragActive,
-                "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
-                "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept
-            })}>
-
-        <Typography variant={"caption"} color={"secondary"} className={"absolute top-2 left-3.5 cursor-inherit"}>
-            {title}
-        </Typography>
-
-        <input
-            {...getInputProps()}/>
-
-        {children}
-
-        <div
-            className="grow h-28 box-border flex flex-col items-center justify-center text-center">
-            <Typography align={"center"}
-                variant={"label"}
-                className={"flex flex-row gap-2 justify-center"}>
-                {uploadDescription}
-            </Typography>
-        </div>
-
-    </div>
-}

package/src/components/FilterChip.tsx

@@ -1,89 +0,0 @@
-import React from "react";
-import { cls } from "../util";
-
-export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    /**
-     * The text label displayed on the chip.
-     */
-    children: React.ReactNode;
-    /**
-     * Whether the chip is currently in an active/selected state.
-     */
-    active?: boolean;
-    /**
-     * Optional icon rendered before the label.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Size variant.
-     * @default "medium"
-     */
-    size?: "small" | "medium";
-    /**
-     * Whether the chip is disabled.
-     */
-    disabled?: boolean;
-}
-
-const sizeClasses = {
-    small: "px-2 py-0.5 text-xs",
-    medium: "px-2.5 py-1 text-xs"
-};
-
-/**
- * A toggle chip used for filter presets and similar multi-select controls.
- *
- * Uses an inset box-shadow for the active ring instead of `border` so the
- * chip size stays stable across states and the ring cannot be clipped by
- * parent `overflow-hidden` containers.
- *
- * @group Interactive components
- */
-export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip({
-    children,
-    active = false,
-    onClick,
-    icon,
-    size = "medium",
-    className,
-    disabled = false,
-    ...rest
-}: FilterChipProps, ref) {
-    return (
-        <button
-            ref={ref}
-            type="button"
-            onClick={onClick}
-            disabled={disabled}
-            className={cls(
-                "inline-flex items-center gap-1 rounded-full",
-                "font-medium whitespace-nowrap select-none shrink-0",
-                "transition-colors duration-150",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-                sizeClasses[size],
-                !disabled && "cursor-pointer",
-                // Hover is one step along the same ramp the chip already sits
-                // on, the way every other hoverable surface here moves. It used
-                // to be `hover:bg-primary/5` for the inactive chip, which
-                // *replaces* the resting fill with a tint fainter than it — so
-                // pointing at a chip made its background vanish. The active chip
-                // had no hover state at all.
-                active
-                    ? cls(
-                        "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]",
-                        !disabled && "hover:bg-primary/20 dark:hover:bg-primary/30"
-                    )
-                    : cls(
-                        "bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark",
-                        !disabled && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"
-                    ),
-                disabled && "opacity-50 cursor-not-allowed",
-                className
-            )}
-            {...rest}
-        >
-            {icon}
-            {children}
-        </button>
-    );
-});

package/src/components/IconButton.tsx

@@ -1,101 +0,0 @@
-"use client";
-import React from "react";
-import { cls } from "../util";
-
-export type IconButtonProps<C extends React.ElementType> =
-    Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
-    & {
-    size?: "medium" | "small" | "smallest" | "large";
-    variant?: "ghost" | "filled",
-    shape?: "circular" | "square",
-    disabled?: boolean;
-    toggled?: boolean;
-    component?: C;
-    onClick?: React.MouseEventHandler<any>;
-    "aria-label"?: string;
-}
-
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
-// `[&>svg]:shrink-0` is load-bearing: without it flex compresses the icon to
-// whatever width is left after padding, so an 18px icon in a 28px button
-// rendered 12x18 — visibly squashed rather than merely small.
-const baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
-const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
-// Padding stays a flat p-2 (as it always was). Callers pass their own icon
-// sizes, so tightening it here shrinks the content box under an icon that was
-// sized for the old one and makes the icon overflow. `shrink-0` above is what
-// actually fixes the squashing — the icon keeps its own dimensions and simply
-// eats into the padding.
-const sizeClasses = {
-    medium: "w-10 !h-10 min-w-10 min-h-10 p-2",
-    small: "w-8 !h-8 min-w-8 min-h-8 p-2",
-    smallest: "w-7 !h-7 min-w-7 min-h-7 p-2",
-    large: "w-12 !h-12 min-w-12 min-h-12 p-2"
-}
-const shapeClasses = {
-    circular: "rounded-full",
-    square: "rounded-md"
-}
-
-/** Icon size used when the caller doesn't set one on the child. */
-const defaultIconSize = {
-    smallest: 16,
-    small: 18,
-    medium: 20,
-    large: 24
-} as const;
-
-const IconButtonInner = <C extends React.ElementType = "button">({
-                                                                     children,
-                                                                     className,
-                                                                     size = "medium",
-                                                                     variant = "ghost",
-                                                                     shape = "circular",
-                                                                     disabled,
-                                                                     toggled,
-                                                                     component,
-                                                                     ...props
-                                                                 }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
-
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-50 dark:bg-surface-900/50";
-    const Component: React.ElementType<any> = component || "button";
-    const isNativeButton = Component === "button";
-
-    // Give the icon a size that matches the button when the caller didn't pick
-    // one. Without this a bare <IconButton size="smallest"><PencilIcon/></…>
-    // renders lucide's 24px default inside a 28px button, so icon size ended up
-    // depending on whether each call site happened to pass one — which is what
-    // made a row of icon buttons look randomly sized. An explicit `size` on the
-    // child always wins.
-    const sizedChildren = React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return child;
-        if ((child.props as { size?: unknown }).size !== undefined) return child;
-        return React.cloneElement(child as React.ReactElement<{ size?: number }>,
-            { size: defaultIconSize[size] });
-    });
-    return (
-        <Component
-            type={isNativeButton ? "button" : undefined}
-            role={isNativeButton ? undefined : "button"}
-            ref={ref}
-            aria-disabled={disabled || undefined}
-            tabIndex={disabled ? -1 : undefined}
-            {...props}
-            className={cls(
-                disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
-                toggled ? "outline outline-2 outline-primary" : "",
-                "text-inherit dark:text-inherit",
-                colorClasses,
-                bgClasses,
-                baseClasses,
-                buttonClasses,
-                shapeClasses[shape],
-                sizeClasses[size],
-                className
-            )}>
-            {sizedChildren}
-        </Component>
-    );
-};
-
-export const IconButton = React.forwardRef(IconButtonInner as React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<any>>) as React.ComponentType<IconButtonProps<any>>;

package/src/components/InfoLabel.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { cls } from "../util";
-
-const colorClasses = {
-    info: "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25",
-    warn: "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25"
-}
-
-export function InfoLabel({
-                              children,
-                              mode = "info"
-                          }: {
-    children: React.ReactNode,
-    mode?: "info" | "warn"
-}) {
-
-    return (
-        <div
-            className={cls("my-3 py-2 px-4 rounded-lg text-sm font-medium leading-snug", colorClasses[mode])}>
-            {children}
-        </div>
-    )
-}

package/src/components/InputLabel.tsx

@@ -1,40 +0,0 @@
-"use client";
-import * as React from "react";
-import { cls } from "../util";
-import { defaultBorderMixin } from "../styles";
-
-export type InputLabelProps = {
-    children?: React.ReactNode;
-    className?: string;
-    shrink?: boolean;
-} & React.LabelHTMLAttributes<HTMLLabelElement>;
-
-const defaultClasses = {
-    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-ellipsis max-w-full",
-    shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
-    expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
-};
-
-export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(function InputLabel(inProps, ref) {
-    const {
-        shrink,
-        className,
-        ...other
-    } = inProps;
-
-    const computedClassName = cls(defaultClasses.root,
-        {
-            [defaultClasses.shrink]: shrink,
-            [defaultClasses.expanded]: !shrink
-        }, className);
-
-    return (
-        <label
-            className={cls("text-sm font-medium peer-disabled:cursor-not-allowed",
-                defaultBorderMixin, computedClassName)}
-            data-shrink={shrink}
-            ref={ref}
-            {...other}
-        />
-    );
-});

package/src/components/Label.tsx

@@ -1,32 +0,0 @@
-"use client";
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cls } from "../util";
-import { defaultBorderMixin } from "../styles";
-
-type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-    border?: boolean,
-    onClick?: React.MouseEventHandler<HTMLLabelElement>
-};
-const Label = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    LabelProps
->(({
-       className,
-       border,
-       onClick,
-       ...props
-   }, ref) => (
-    <LabelPrimitive.Root
-        ref={ref}
-        onClick={onClick}
-        className={cls("text-sm font-medium peer-disabled:cursor-not-allowed",
-            border && "border border-surface-300 dark:border-surface-700 rounded-md px-3 py-1.5",
-            onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800",
-            defaultBorderMixin, className)}
-        {...props}
-    />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

package/src/components/LoadingButton.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Button, ButtonProps } from "./Button";
-import { CircularProgress } from "./CircularProgress";
-
-export type LoadingButtonProps<P extends React.ElementType> = ButtonProps<P> & {
-    startIcon?: React.ReactNode;
-    loading?: boolean;
-}
-
-export function LoadingButton<P extends React.ElementType = "button">({
-                                                                          children,
-                                                                          loading,
-                                                                          disabled,
-                                                                          onClick,
-                                                                          startIcon,
-                                                                          ...props
-                                                                      }: LoadingButtonProps<P>) {
-    return (
-        <Button
-            disabled={loading || disabled}
-            onClick={onClick}
-            component={props.component as React.ElementType}
-            {...props}
-        >
-            {loading && (
-                <CircularProgress size={"smallest"}/>
-            )}
-            {!loading && startIcon}
-            {children}
-        </Button>
-    );
-};

package/src/components/Markdown.tsx

@@ -1,55 +0,0 @@
-"use client";
-import React, { useMemo } from "react";
-import { deepEqual as equal } from "fast-equals"
-
-import MarkdownIt from "markdown-it";
-import { cls } from "../util";
-
-export interface MarkdownProps {
-    source: string,
-    size?: "small" | "medium" | "large" | "xl" | "2xl";
-    className?: string
-}
-
-const proseClasses = {
-    small: "prose prose-sm typography-body2",
-    medium: "prose typography-body1",
-    large: "prose prose-lg",
-    xl: "prose prose-xl",
-    "2xl": "prose prose-2xl"
-};
-
-/**
- * Tailwind typography-plugin weight overrides.
- * The plugin defaults to very heavy weights (h1: 800, h2: 700, h3/h4: 600,
- * strong: 600, code: 600) which clash with the Rebase design-system that uses
- * font-light (300) / font-normal (400) for headings.
- * We reset them here so rendered markdown matches the rest of the UI.
- */
-const proseWeightOverrides = [
-    "prose-headings:font-normal",
-    "prose-strong:font-semibold",
-    "prose-code:font-normal",
-    "prose-blockquote:font-normal",
-    "prose-a:font-normal"
-].join(" ");
-
-const md = new MarkdownIt({ html: false });
-/**
- * @group Preview components
- */
-export const Markdown = React.memo<MarkdownProps>(function Markdown({
-                                                                        source,
-                                                                        className,
-                                                                        size = "medium"
-                                                                    }: MarkdownProps) {
-        const html = useMemo(() => {
-            return md.render(typeof source === "string" ? source : "");
-        }, [source]);
-
-        return <div
-            className={cls(proseClasses[size], "dark:prose-invert prose-headings:font-title", proseWeightOverrides, className)}
-            dangerouslySetInnerHTML={{ __html: html }}
-        />;
-    }
-    , equal) as React.FunctionComponent<MarkdownProps>;

package/src/components/Menu.tsx

@@ -1,114 +0,0 @@
-"use client";
-import React from "react";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { focusedDisabled, paperMixin } from "../styles";
-import { cls } from "../util";
-import { usePortalContainer } from "../hooks/PortalContainerContext";
-
-export type MenuProps = {
-    children: React.ReactNode;
-    trigger: React.ReactNode;
-
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
-
-    portalContainer?: HTMLElement | null;
-    side?: "top" | "right" | "bottom" | "left";
-    align?: "start" | "center" | "end";
-
-    sideOffset?: number;
-    className?: string;
-}
-
-const Menu = React.forwardRef<
-    React.ElementRef<typeof DropdownMenu.Trigger>,
-    MenuProps
->(({
-       children,
-       trigger,
-       open,
-       defaultOpen,
-       side,
-       align,
-       onOpenChange,
-       portalContainer,
-       sideOffset = 4,
-       className
-   }, ref) => {
-    // Get the portal container from context
-    const contextContainer = usePortalContainer();
-
-    // Prioritize manual prop, fallback to context container
-    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
-
-    return (
-        <DropdownMenu.Root
-            open={open}
-            defaultOpen={defaultOpen}
-            onOpenChange={onOpenChange}>
-            <DropdownMenu.Trigger
-                ref={ref}
-                asChild>
-                {trigger}
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal container={finalContainer}>
-                <DropdownMenu.Content
-                    side={side}
-                    sideOffset={sideOffset}
-                    align={align}
-                    // `z-50` is the floating layer — the tier `Dialog`, `Sheet`,
-                    // `Select` and `Tooltip` all sit on. Radix copies this value
-                    // onto the popper wrapper it portals next to them, so at any
-                    // lower value the menu opens *behind* the dialog or sheet it
-                    // was opened from: visible in the DOM, painted under the
-                    // overlay, and unclickable. Peers on this tier stack by mount
-                    // order, which is what puts a menu above the dialog holding
-                    // its trigger, and a dialog that menu opens above them both.
-                    className={cls(paperMixin, focusedDisabled, "py-2 z-50", className)}>
-                    {children}
-                </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-    );
-})
-Menu.displayName = "Menu"
-
-export { Menu }
-
-export type MenuItemProps = {
-    children: React.ReactNode;
-    dense?: boolean;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent) => void;
-    className?: string;
-};
-
-export const MenuItem = React.memo(({
-                                        children,
-                                        dense = false, // Default value is false if not provided
-                                        disabled = false,
-                                        onClick,
-                                        className
-                                    }: MenuItemProps) => {
-    // Dynamically adjusting the class based on the "dense" prop
-    const classNames = cls(
-        onClick && !disabled && "cursor-pointer",
-        disabled && "opacity-50 cursor-not-allowed",
-        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150",
-        !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900",
-        dense ? "px-4 py-1.5" : "px-4 py-2",
-        className
-    );
-
-    return (
-        <DropdownMenu.Item
-            className={classNames}
-            disabled={disabled}
-            onClick={disabled ? undefined : onClick}>
-            {children}
-        </DropdownMenu.Item>
-    );
-});
-
-MenuItem.displayName = "MenuItem";