@rebasepro/ui 0.17.3 → 0.18.0

package/src/components/Button.tsx

@@ -1,110 +0,0 @@
-"use client";
-import React from "react";
-import { cls } from "../util";
-import { type ButtonSize, controlHeightMixin, controlPaddingMixin } from "../styles";
-
-export type ButtonProps<C extends React.ElementType = "button"> = {
-    children?: React.ReactNode;
-    variant?: "filled" | "outlined" | "text";
-    disabled?: boolean;
-    color?: "primary" | "secondary" | "text" | "error" | "neutral";
-    size?: ButtonSize;
-    startIcon?: React.ReactNode;
-    fullWidth?: boolean;
-    className?: string;
-    component?: C;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-} & React.ComponentPropsWithoutRef<C>;
-
-const ButtonInner = React.memo(React.forwardRef<
-    HTMLButtonElement,
-    ButtonProps<React.ElementType>
->(({
-       children,
-       className,
-       variant = "filled",
-       disabled = false,
-       size = "medium",
-       startIcon = null,
-       fullWidth = false,
-       component: Component,
-       color = "neutral",
-       ...props
-   }: ButtonProps<React.ElementType>, ref) => {
-
-    const baseClasses =
-        "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
-
-    const buttonClasses = cls({
-        "w-full": fullWidth,
-        "w-fit": !fullWidth,
-
-        // Filled Variants
-        "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
-        "border border-red-600 bg-red-600 hover:bg-red-700 focus:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
-        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
-
-        // Text Variants
-        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
-        "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
-        "border border-transparent text-red-600 hover:text-red-600 hover:bg-red-600 hover:bg-opacity-10 hover:bg-red-600/10": variant === "text" && color === "error" && !disabled,
-        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "text" && !disabled,
-        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "text" && color === "neutral" && !disabled,
-
-        // Outlined Variants
-        "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
-        "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
-        "border border-red-500 text-red-600 hover:text-white hover:bg-red-600": variant === "outlined" && color === "error" && !disabled,
-        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "outlined" && color === "text" && !disabled,
-        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "outlined" && color === "neutral" && !disabled,
-
-        // Disabled states for all variants
-        "text-text-disabled dark:text-text-disabled-dark": disabled,
-        "border border-transparent opacity-50": variant === "text" && disabled,
-        "border border-surface-500 opacity-50": variant === "outlined" && disabled,
-        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled
-    });
-
-    // Height comes from the shared control scale (see styles.ts) so a Button
-    // and a TextField at the same `size` line up. Vertical padding is dropped:
-    // the button is an inline-flex box centring its content inside min-height.
-    const sizeClasses = cls("py-0", controlHeightMixin[size], controlPaddingMixin[size]);
-
-    const iconColorClass = (color === "neutral" || color === "text") && !disabled
-        ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300"
-        : "";
-
-    if (Component) {
-        return (
-            <Component
-                ref={ref}
-                onClick={props.onClick}
-                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
-                {...props}>
-                {startIcon}
-                {children}
-            </Component>
-        );
-    }
-
-    return (
-        <button ref={ref as React.Ref<HTMLButtonElement>}
-                type={props.type ?? "button"}
-                onClick={props.onClick}
-                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
-                disabled={disabled}
-                data-variant={variant}
-                data-size={size}
-                {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>
-            {startIcon}
-            {children}
-        </button>
-    );
-
-}));
-
-ButtonInner.displayName = "Button"
-
-export const Button = ButtonInner as React.FC<ButtonProps<React.ElementType>>;

package/src/components/Card.tsx

@@ -1,43 +0,0 @@
-"use client";
-import React, { useCallback } from "react";
-import { cardClickableMixin, cardMixin } from "../styles";
-import { cls } from "../util";
-
-type CardProps = {
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-    onClick?: (e?: React.MouseEvent) => void;
-    className?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(({
-    children,
-    className,
-    onClick,
-    style,
-    ...props
-}, ref) => {
-    const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (e.key === "Enter" || e.key === " ") {
-            onClick?.();
-        }
-    }, [onClick]);
-
-    return (
-        <div
-            ref={ref}
-            onKeyPress={onKeyPress}
-            role={onClick ? "button" : undefined}
-            tabIndex={onClick ? 0 : undefined}
-            onClick={onClick}
-            className={cls(cardMixin, onClick && cardClickableMixin, className)}
-            style={style}
-            {...props}>
-            {children}
-        </div>
-    );
-});
-
-Card.displayName = "Card";
-
-export { Card };

package/src/components/CenteredView.tsx

@@ -1,35 +0,0 @@
-"use client";
-import React from "react";
-import { Container } from "./Container";
-import { cls } from "../util";
-
-export type CenteredViewProps = {
-    children: React.ReactNode;
-    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
-    outerClassName?: string;
-    className?: string;
-    fullScreen?: boolean;
-};
-
-export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(({
-                                                                                     children,
-                                                                                     maxWidth,
-                                                                                     outerClassName,
-                                                                                     className,
-                                                                                     fullScreen,
-                                                                                     ...rest
-                                                                                 }, ref) => { // Notice how the ref is now received as the second argument
-
-    return (
-        <div ref={ref}
-             className={cls("flex flex-col grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
-             {...rest}>
-            <Container className={cls("m-auto", className)} maxWidth={maxWidth}>
-                {children}
-            </Container>
-        </div>
-    );
-
-});
-
-CenteredView.displayName = "CenteredView";

package/src/components/Checkbox.tsx

@@ -1,129 +0,0 @@
-
-import React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-
-import { CheckIcon, MinusIcon } from "lucide-react";
-import { cls } from "../util";
-
-export interface CheckboxProps {
-    checked: boolean;
-    id?: string;
-    disabled?: boolean;
-    indeterminate?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    padding?: boolean;
-    size?: "smallest" | "small" | "medium" | "large";
-    color?: "primary" | "secondary";
-    "aria-label"?: string;
-}
-
-// Radius steps down with the box. `rounded-md` is 6px — on a 16-20px box that
-// is most of the edge, so the control reads as a squircle rather than a
-// checkbox. Box sizes match the icon glyph scale (16/16/20/24) so a Checkbox
-// sitting beside IconButtons in a table row is the same visual size.
-const sizeClasses = {
-    large: "w-6 h-6 rounded flex items-center justify-center",
-    medium: "w-5 h-5 rounded flex items-center justify-center",
-    small: "w-4 h-4 rounded-sm flex items-center justify-center",
-    smallest: "w-4 h-4 rounded-sm flex items-center justify-center"
-};
-
-// Outer box is the hit area and sets the control's rendered height, so it
-// tracks the shared 28/32/40/48 scale. `smallest` used to reuse `small`'s
-// 32px box, which made the two sizes identical.
-//
-// A checkbox with no `onCheckedChange` is not a hit area — it is a tick mark
-// standing in for a value, as in `BooleanPreview`. There the box was 10px of
-// dead space on each side of a `medium` tick: on top of a read-only field's
-// own padding, it started the tick 10px further in than the text of the field
-// beside it. `padding={false}` reads as the request to drop it, and until now
-// did nothing at all, because it only removed `p-2` from a box whose size was
-// fixed regardless. Kept for anything clickable — the same box is the click
-// target for table row selection and for editor task items.
-const outerSizeClasses = {
-    medium: "w-10 h-10",
-    small: "w-8 h-8",
-    large: "w-12 h-12 ",
-    smallest: "w-7 h-7"
-}
-// Flat p-2, as it always was. `shrink-0` on the box below is what stops it
-// being squashed; changing the padding here only shifts the control's optical
-// weight relative to the icons beside it.
-const paddingClasses = {
-    medium: "p-2",
-    small: "p-2",
-    large: "p-2",
-    smallest: "p-2"
-}
-
-const colorClasses = {
-    primary: "bg-primary",
-    secondary: "bg-secondary"
-}
-
-export const Checkbox = React.memo(({
-                             id,
-                             checked,
-                             indeterminate = false,
-                             padding = true,
-                             disabled,
-                             size = "medium",
-                             onCheckedChange,
-                             color = "primary",
-                             "aria-label": ariaLabel
-                         }: CheckboxProps) => {
-
-    const isChecked = indeterminate ? false : checked;
-
-    const iconSize = size === "medium"
-        ? 20
-        : size === "small"
-            ? 16
-            : size === "smallest"
-                ? 14
-                : 24;
-    return (
-        <CheckboxPrimitive.Root
-            id={id}
-            checked={indeterminate || isChecked}
-            disabled={disabled}
-            aria-label={ariaLabel}
-            aria-checked={indeterminate ? "mixed" : isChecked}
-            className="rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-            onCheckedChange={disabled ? undefined : onCheckedChange}>
-
-            <div className={cls(
-                padding ? paddingClasses[size] : "",
-                padding || onCheckedChange ? outerSizeClasses[size] : "",
-                "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-                onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "",
-                onCheckedChange ? "cursor-pointer" : "cursor-default"
-            )}>
-                <div
-                    className={cls(
-                        "border-2 shrink-0 relative transition-colors ease-in-out duration-150",
-                        sizeClasses[size],
-                        disabled
-                            ? (indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600")
-                            : (indeterminate || isChecked ? colorClasses[color] : "bg-white dark:bg-surface-900"),
-                        (indeterminate || isChecked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
-                        disabled
-                            ? "border-transparent"
-                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500")
-                    )}>
-                    <CheckboxPrimitive.Indicator asChild>
-                        {indeterminate
-                            ? (
-                                <MinusIcon size={iconSize} className={"absolute"}/>
-                            )
-                            : (
-                                <CheckIcon size={iconSize} className={"absolute"}/>
-                            )}
-                    </CheckboxPrimitive.Indicator>
-                </div>
-            </div>
-        </CheckboxPrimitive.Root>
-    );
-});
-
-Checkbox.displayName = "Checkbox";

package/src/components/Chip.tsx

@@ -1,131 +0,0 @@
-import React from "react";
-import { CHIP_COLORS, cls, getColorSchemeForKey } from "../util";
-import type { ChipColorKey, ChipColorScheme } from "../util/chip_colors";
-
-export type { ChipColorKey, ChipColorScheme };
-
-export interface ChipProps {
-    className?: string;
-    children: React.ReactNode;
-    size?: "smallest" | "small" | "medium" | "large";
-    colorScheme?: ChipColorScheme | ChipColorKey;
-    error?: boolean;
-    outlined?: boolean;
-    onClick?: () => void;
-    icon?: React.ReactNode;
-    style?: React.CSSProperties;
-}
-
-// `small` and `medium` used to differ only in horizontal padding, so both
-// rendered at the same height and the step was invisible. Vertical rhythm now
-// increases across the whole scale.
-const sizeClassNames = {
-    smallest: "px-1.5 py-px text-[10px]",
-    small: "px-2 py-0.5 text-xs",
-    medium: "px-2.5 py-1 text-xs",
-    large: "px-3 py-1.5 text-sm"
-}
-
-/**
- * Detect if the app is currently in dark mode by checking the
- * Tailwind `dark` class on the document root.
- */
-function isDarkMode(): boolean {
-    return typeof document !== "undefined" &&
-        document.documentElement.classList.contains("dark");
-}
-
-/**
- * Helper to generate rgba from hex or standard colors.
- */
-function getRgba(hex: string, alpha: number): string {
-    if (!hex || !hex.startsWith("#")) return hex;
-    let color = hex.slice(1);
-    if (color.length === 3) {
-        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-    }
-    const r = parseInt(color.slice(0, 2), 16);
-    const g = parseInt(color.slice(2, 4), 16);
-    const b = parseInt(color.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-/**
- * @group Preview components
- */
-export function Chip({
-                         children,
-                         colorScheme,
-                         error,
-                         outlined,
-                         onClick,
-                         icon,
-                         size = "medium",
-                         className,
-                         style
-                     }: ChipProps) {
-
-    const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
-    const dark = isDarkMode();
-
-    const hasScheme = error || usedColorScheme;
-
-    let textColor = "";
-    let bgColor = "";
-    let border = "";
-
-    if (error) {
-        textColor = dark ? "#f87171" : "#dc2626";
-    } else if (usedColorScheme) {
-        textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
-    }
-
-    if (hasScheme) {
-        if (outlined) {
-            // An outlined chip has no fill, so it needs the ink meant for the
-            // PAGE, not the ink meant for the fill it just dropped. Those are
-            // different colours for most hues — a bright `solid` chip carries
-            // dark ink, which on a near-black page would be invisible.
-            if (!error && usedColorScheme) {
-                const outlineInk = dark
-                    ? usedColorScheme.darkOutlineText ?? usedColorScheme.darkText
-                    : usedColorScheme.outlineText;
-                if (outlineInk) textColor = outlineInk;
-            }
-            bgColor = getRgba(textColor, dark ? 0.1 : 0.06);
-            border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;
-        } else if (error) {
-            bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
-            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
-        } else if (usedColorScheme) {
-            bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
-        }
-    }
-
-    return (
-        <div
-            className={cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1",
-                "text-ellipsis",
-                "items-center",
-                "transition-colors duration-150",
-                !hasScheme && "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark border border-surface-200 dark:border-surface-700",
-                !hasScheme && outlined && "bg-transparent dark:bg-transparent",
-                onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "",
-                sizeClassNames[size],
-                className)}
-            onClick={onClick}
-            style={{
-                ...(hasScheme ? {
-                    backgroundColor: bgColor,
-                    color: textColor,
-                    border: border || undefined,
-                } : {}),
-                overflow: "hidden",
-                ...style
-            }}
-        >
-            {icon}
-            {children}
-        </div>
-    );
-}

package/src/components/CircularProgress.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { cls } from "../util";
-
-export type CircularProgressProps = {
-    size?: "smallest" | "small" | "medium" | "large",
-    className?: string
-}
-
-export function CircularProgress({
-                                     size = "medium",
-                                     className
-                                 }: CircularProgressProps) {
-
-    let sizeClasses = "";
-    if (size === "smallest") {
-        sizeClasses = "w-4 h-4";
-    } else if (size === "small") {
-        sizeClasses = "w-6 h-6";
-    } else if (size === "medium") {
-        sizeClasses = "w-8 h-8 m-1";
-    } else {
-        sizeClasses = "w-10 h-10 m-1";
-    }
-
-    let borderClasses = "";
-    if (size === "smallest") {
-        borderClasses = "border-2";
-    } else if (size === "small") {
-        borderClasses = "border-2";
-    } else if (size === "medium") {
-        borderClasses = "border-[3px]";
-    } else {
-        borderClasses = "border-4";
-    }
-
-    return (
-        <div
-            className={cls(
-                sizeClasses,
-                borderClasses,
-                "inline-block shrink-0 rounded-full border-solid align-[-0.125em]",
-                "animate-[spin_0.7s_linear_infinite] motion-reduce:animate-[spin_1.5s_linear_infinite]",
-                "border-surface-200 dark:border-surface-700 border-t-primary dark:border-t-primary",
-                className)}
-            role="status">
-              <span
-                  className="absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!"
-              >
-                  Loading...
-              </span>
-        </div>
-    );
-}

package/src/components/CircularProgressCenter.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { CircularProgress, CircularProgressProps } from "./CircularProgress";
-import { Typography } from "./Typography";
-
-/**
- *
- * @param text
- * @param props
-
- * @ignore
- */
-export function CircularProgressCenter({ text, ...props }: CircularProgressProps & {
-    text?: string
-}) {
-    return (
-        <div
-            className="flex w-full h-screen max-h-full max-w-full gap-4">
-            <div className="m-auto flex flex-col gap-2 items-center">
-                <CircularProgress {...props}/>
-                {text && <Typography
-                    color={"secondary"}
-                    variant={"caption"}
-                    className="text-center">{text}</Typography>}
-            </div>
-        </div>
-    );
-}

package/src/components/Collapse.tsx

@@ -1,66 +0,0 @@
-"use client";
-import React from "react";
-import * as Collapsible from "@radix-ui/react-collapsible";
-
-import { cls } from "../util";
-import { useInjectStyles } from "../hooks";
-
-interface CollapseProps {
-    children?: React.ReactNode;
-    className?: string;
-    in?: boolean;
-    duration?: number;
-}
-
-export const Collapse = React.memo(({
-                             children,
-                             className,
-                             in: isOpen = false,
-                             duration = 220
-                         }: CollapseProps) => {
-
-    useInjectStyles(`Collapse-${duration}`, `
-.CollapseContent-${duration} {
-  overflow: hidden;
-}
-.CollapseContent-${duration}[data-state='open'] {
-  animation: slideDown ${duration}ms ease-out;
-}
-.CollapseContent-${duration}[data-state='closed'] {
-  animation: slideUp ${duration}ms ease-in;
-}
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-collapsible-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--radix-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-`);
-
-    return (
-        <Collapsible.Root
-            open={isOpen}
-            className={className}>
-
-            <Collapsible.Content
-                className={cls(`CollapseContent-${duration}`)}
-            >
-                {children}
-            </Collapsible.Content>
-        </Collapsible.Root>
-    )
-});
-
-Collapse.displayName = "Collapse";