@rebasepro/ui 0.17.3 → 0.18.0

package/package.json

@@ -1,25 +1,7 @@
 {
   "name": "@rebasepro/ui",
-  "type": "module",
-  "version": "0.17.3",
+  "version": "0.18.0",
   "description": "Rebase design system — React components and design tokens built on Radix UI, Tailwind CSS and lucide-react",
-  "funding": {
-    "url": "https://github.com/sponsors/rebaseco"
-  },
-  "author": "Rebase",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rebasepro/rebase.git",
-    "directory": "packages/ui"
-  },
-  "main": "./dist/index.es.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "source": "src/index.ts",
-  "engines": {
-    "node": ">=20"
-  },
   "keywords": [
     "rebase",
     "cms",
@@ -31,11 +13,38 @@
     "content manager",
     "react"
   ],
+  "homepage": "https://rebase.pro",
+  "bugs": {
+    "url": "https://github.com/rebasepro/rebase/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rebasepro/rebase.git",
+    "directory": "packages/ui"
+  },
+  "funding": {
+    "url": "https://github.com/sponsors/rebasepro"
+  },
+  "license": "MIT",
+  "author": "Rebase",
+  "type": "module",
+  "main": "./dist/index.es.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "//sideEffects": "The stylesheet is the side effect. `index.css` and the CSS the build emits are imported for what they do, not for what they export, so a bundler told this package is side-effect-free would drop them and ship an unstyled admin panel.",
+  "sideEffects": [
+    "**/*.css",
+    "./index.css"
+  ],
+  "engines": {
+    "node": ">=22.22.0"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "development": "./dist/index.es.js",
-      "import": "./dist/index.es.js"
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.es.js"
     },
     "./package.json": "./package.json",
     "./index.css": "./dist/index.css",
@@ -74,8 +83,8 @@
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
@@ -104,7 +113,6 @@
   },
   "files": [
     "dist",
-    "src",
     "index.css"
   ],
   "gitHead": "d935eefa5aa8d1009a2398cfac2c1e4ee9aeb6b6",
@@ -116,6 +124,7 @@
     "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/src/theme.css dist/ && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../tooling/scripts/add-dts-extensions.mjs dist && node ../../tooling/scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch",
     "clean": "rm -rf dist && find ./src \\( -name '*.js' -o -name '*.d.ts' \\) -type f | xargs rm -f",
     "generateIcons": "bun --esm src/scripts/generateIcons.ts"
   }

package/src/components/Alert.tsx

@@ -1,118 +0,0 @@
-import * as React from "react";
-import { cls } from "../util";
-import { AlertCircleIcon, AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "../icons";
-
-export interface AlertProps {
-    children: React.ReactNode;
-    onDismiss?: () => void;
-    color?: "error" | "warning" | "info" | "success" | "base";
-    size?: "small" | "medium" | "large";
-    action?: React.ReactNode;
-    className?: string;
-    outerClassName?: string;
-    style?: React.CSSProperties;
-}
-
-const getSizeClasses = (size: "small" | "medium" | "large") => {
-    switch (size) {
-        case "small":
-            return "px-3 py-1.5 text-xs gap-2 rounded-md";
-        case "large":
-            return "px-4 py-3.5 text-sm gap-3 rounded-lg";
-        case "medium":
-        default:
-            return "px-3.5 py-2.5 text-sm gap-2.5 rounded-lg";
-    }
-}
-
-const getIconSize = (size: "small" | "medium" | "large") => size === "small" ? 16 : 18;
-
-const getColorClasses = (severity: string) => {
-    switch (severity) {
-        case "error":
-            return "bg-red-500/8 dark:bg-red-500/12 text-red-800 dark:text-red-200 border border-red-500/20 dark:border-red-500/25";
-        case "warning":
-            return "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";
-        case "info":
-            return "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";
-        case "success":
-            return "bg-emerald-500/8 dark:bg-emerald-500/12 text-emerald-800 dark:text-emerald-200 border border-emerald-500/20 dark:border-emerald-500/25";
-        case "base":
-        default:
-            return "bg-surface-accent-500/8 dark:bg-surface-accent-400/10 text-surface-accent-800 dark:text-surface-accent-100 border border-surface-accent-500/15 dark:border-surface-accent-400/20";
-    }
-};
-
-const getIconColor = (severity: string) => {
-    switch (severity) {
-        case "error":
-            return "text-red-500 dark:text-red-400";
-        case "warning":
-            return "text-amber-500 dark:text-amber-400";
-        case "info":
-            return "text-blue-500 dark:text-blue-400";
-        case "success":
-            return "text-emerald-500 dark:text-emerald-400";
-        case "base":
-        default:
-            return "text-surface-accent-500 dark:text-surface-accent-400";
-    }
-};
-
-const getIcon = (severity: string, size: number, className: string) => {
-    switch (severity) {
-        case "error":
-            return <AlertCircleIcon size={size} className={className}/>;
-        case "warning":
-            return <AlertTriangleIcon size={size} className={className}/>;
-        case "success":
-            return <CheckCircleIcon size={size} className={className}/>;
-        case "info":
-        case "base":
-        default:
-            return <InfoIcon size={size} className={className}/>;
-    }
-};
-
-export const Alert: React.FC<AlertProps> = ({
-                                                children,
-                                                onDismiss,
-                                                color = "info",
-                                                size = "medium",
-                                                action,
-                                                outerClassName,
-                                                className,
-                                                style
-                                            }) => {
-    const classes = getColorClasses(color);
-    const iconSize = getIconSize(size);
-
-    return (
-        <div
-            style={style}
-            className={cls(
-                getSizeClasses(size),
-                "w-full",
-                "font-medium leading-snug",
-                "flex items-start",
-                classes,
-                outerClassName)}>
-            <span className={cls("shrink-0 mt-px", getIconColor(color))}>
-                {getIcon(color, iconSize, "")}
-            </span>
-            <div className={cls("grow min-w-0 self-center", className)}>{children}</div>
-            {action}
-            {onDismiss && (
-                <button
-                    type="button"
-                    aria-label="Dismiss"
-                    className={cls(
-                        "shrink-0 rounded p-0.5 opacity-60 transition-opacity hover:opacity-100",
-                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-current/40")}
-                    onClick={onDismiss}>
-                    <XIcon size={iconSize - 2}/>
-                </button>
-            )}
-        </div>
-    );
-};

package/src/components/Autocomplete.tsx

@@ -1,93 +0,0 @@
-"use client";
-import React from "react";
-
-import { paperMixin } from "../styles";
-import { Collapse } from "./Collapse";
-import { cls } from "../util";
-import { useOutsideAlerter } from "../hooks";
-
-export type AutocompleteProps = {
-    children: React.ReactNode;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    className?: string;
-}
-
-export const useAutoComplete = ({ ref }: {
-    ref: React.MutableRefObject<HTMLDivElement | null>;
-}) => {
-
-    const [autoCompleteOpen, setAutoCompleteOpen] = React.useState(false);
-    const [inputFocused, setInputFocused] = React.useState(false);
-
-    // if ref is not focused, close autocomplete
-    React.useEffect(() => {
-        if (ref.current) {
-            ref.current.onfocus = () => {
-                setAutoCompleteOpen(true);
-                setInputFocused(true);
-            }
-            ref.current.onblur = () => {
-                setInputFocused(false);
-            }
-        }
-    }, [ref]);
-
-    return {
-        inputFocused,
-        autoCompleteOpen,
-        setAutoCompleteOpen
-    };
-}
-
-export function Autocomplete({
-                                 children,
-                                 open,
-                                 setOpen,
-                                 className
-                             }: AutocompleteProps) {
-
-    const autocompleteRef = React.useRef<HTMLDivElement>(null);
-    useOutsideAlerter(autocompleteRef, () => setOpen(false));
-
-    return <Collapse
-        in={open}
-        duration={30}
-        className={cls(
-            "absolute top-full left-0 right-0 overflow-visible",
-            open ? "shadow-2xs" : "",
-            "my-2",
-            "z-20",
-            "w-full")}>
-        <div ref={autocompleteRef}
-             className={cls(
-                 open ? paperMixin : "",
-                 "bg-surface-50 dark:bg-surface-800",
-                 className
-             )}>
-            {children}
-        </div>
-    </Collapse>;
-
-}
-
-export type AutocompleteItemProps = {
-    children: React.ReactNode,
-    onClick?: () => void,
-    className?: string
-};
-
-export const AutocompleteItem = React.memo(function AutocompleteItem({
-                                     children,
-                                     onClick,
-                                     className
-                                 }: AutocompleteItemProps) {
-
-    return (
-        <div
-            className={cls("flex w-full items-center h-[48px] cursor-pointer transition-colors duration-150 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className)}
-            onClick={onClick}>
-            {children}
-        </div>
-    )
-});

package/src/components/Avatar.tsx

@@ -1,73 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { cls } from "../util";
-
-export interface AvatarProps {
-    src?: string;
-    alt?: string;
-    children?: React.ReactNode;
-    className?: string;
-    outerClassName?: string;
-    hover?: boolean;
-    style?: React.CSSProperties;
-}
-
-const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps> = (
-    {
-        src,
-        alt,
-        children,
-        className,
-        style,
-        outerClassName,
-        hover = true,
-        ...props
-    },
-    ref
-) => {
-    const [isImageError, setIsImageError] = useState(false);
-
-    const handleImageError = () => {
-        setIsImageError(true);
-    };
-
-    return (
-        <button
-            ref={ref}
-            style={style}
-            {...props}
-            className={cls(
-                "rounded-full flex items-center justify-center overflow-hidden",
-                "p-1 w-12 h-12 min-w-12 min-h-12",
-                hover && "transition-colors duration-150 hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-                outerClassName
-            )}
-        >
-            {src && !isImageError ? (
-                <img
-                    className={cls(
-                        "bg-surface-accent-100 dark:bg-surface-accent-800",
-                        "w-full h-full object-cover rounded-full",
-                        className
-                    )}
-                    src={src}
-                    alt={alt}
-                    onError={handleImageError}
-                />
-            ) : (
-                <span
-                    className={cls(
-                        "bg-surface-accent-100 dark:bg-surface-accent-800",
-                        "flex items-center justify-center",
-                        "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-text-primary-dark rounded-full",
-                        className
-                    )}
-                >
-          {children}
-        </span>
-            )}
-        </button>
-    );
-};
-
-export const Avatar = React.forwardRef(AvatarInner);

package/src/components/Badge.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-
-export type BadgeColor = "primary" | "secondary" | "warning" | "error";
-
-export interface BadgeProps {
-    color?: BadgeColor;
-    children: React.ReactNode;
-    invisible?: boolean;
-}
-
-const getColor = (color: BadgeColor) => {
-    switch (color) {
-        case "primary":
-            return "bg-primary";
-        case "secondary":
-            return "bg-secondary";
-        case "warning":
-            return "bg-orange-500";
-        case "error":
-            return "bg-red-500";
-        default:
-            return "bg-surface-accent-300 dark:bg-surface-accent-700";
-    }
-}
-
-export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({
-                                                                     color = "primary",
-                                                                     invisible = false,
-                                                                     children
-                                                                 }, ref) => {
-    return (
-        <div ref={ref} className="relative inline-block w-fit">
-            {children}
-            <span
-                className={`absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full
-        ${getColor(color)}
-        transition-all duration-200 ease-out
-        ${invisible ? "w-0 h-0" : "w-2 h-2"}`}
-            />
-        </div>
-    );
-});
-
-Badge.displayName = "Badge";

package/src/components/BooleanSwitch.tsx

@@ -1,116 +0,0 @@
-"use client";
-import React from "react";
-import { cls } from "../util";
-
-/**
- * Switch geometry, one row per size: track w x h, knob k, and the knob's
- * off/on x-offsets. `on` is always `w - k - inset` so the knob is inset by the
- * same amount at both ends and vertically centred.
- *
- * This is a table rather than inline `cls({...})` conditions on purpose. The
- * offsets used to be computed object keys — `[value ? "translate-x-[24px]" :
- * "translate-x-[3px]"]: size === "large"` — and `large` and `medium` both
- * produced the key `translate-x-[3px]` when off. The later literal overwrote
- * the earlier, so the off-state class was silently dropped for `large` and the
- * knob sat flush against the edge.
- */
-const SWITCH_GEOMETRY = {
-    smallest: {
-        track: "w-[34px] h-[18px] min-w-[34px] min-h-[18px]",
-        knob: "w-[16px] h-[16px]", off: "translate-x-[1px]", on: "translate-x-[17px]",
-        bar: "w-[16px] h-[6px]", barX: "translate-x-[9px]"
-    },
-    small: {
-        track: "w-[38px] h-[22px] min-w-[38px] min-h-[22px]",
-        knob: "w-[18px] h-[18px]", off: "translate-x-[2px]", on: "translate-x-[18px]",
-        bar: "w-[18px] h-[8px]", barX: "translate-x-[10px]"
-    },
-    medium: {
-        track: "w-[44px] h-[26px] min-w-[44px] min-h-[26px]",
-        knob: "w-[20px] h-[20px]", off: "translate-x-[3px]", on: "translate-x-[21px]",
-        bar: "w-[20px] h-[10px]", barX: "translate-x-[12px]"
-    },
-    large: {
-        track: "w-[48px] h-[28px] min-w-[48px] min-h-[28px]",
-        knob: "w-[22px] h-[22px]", off: "translate-x-[3px]", on: "translate-x-[23px]",
-        bar: "w-[22px] h-[11px]", barX: "translate-x-[13px]"
-    }
-} as const;
-
-export type BooleanSwitchProps = {
-    value: boolean | null;
-    className?: string;
-    disabled?: boolean;
-    size?: "smallest" | "small" | "medium" | "large";
-} & ({
-    allowIndeterminate: true;
-    onValueChange?: (newValue: boolean | null) => void;
-} | {
-    allowIndeterminate?: false;
-    onValueChange?: (newValue: boolean) => void;
-});
-
-export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
-                                                                         value,
-                                                                         allowIndeterminate,
-                                                                         className,
-                                                                         onValueChange,
-                                                                         disabled = false,
-                                                                         size = "medium",
-                                                                         ...props
-                                                                     }: BooleanSwitchProps, ref: React.Ref<HTMLButtonElement>) {
-        return <button
-            type="button"
-            role="switch"
-            aria-checked={allowIndeterminate && (value === null || value === undefined) ? "mixed" : !!value}
-            aria-disabled={disabled || undefined}
-            ref={ref}
-            tabIndex={disabled ? -1 : undefined}
-            onClick={disabled
-                ? (e) => e.preventDefault()
-                : (e) => {
-                    e.preventDefault();
-                    if (allowIndeterminate) {
-                        if (value === null || value === undefined) onValueChange?.(true)
-                        else if (value) onValueChange?.(false)
-                        else onValueChange?.(null);
-                    } else {
-                        onValueChange?.(!value);
-                    }
-                }}
-            className={cls(
-                // `large` used to share the `medium` branch, so the two sizes
-                // rendered identically and the prop looked inert. Geometry is
-                // now derived from one table (see SWITCH_GEOMETRY) so the knob
-                // inset is symmetric at every size.
-                SWITCH_GEOMETRY[size].track,
-                "outline-none outline-hidden rounded-full relative shadow-sm",
-                value ? (disabled
-                    ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700"
-                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
-                className
-            )}
-            {...props}
-        >
-            {allowIndeterminate && (value === null || value === undefined) && <div
-                key={"knob"}
-                className={cls(
-                    "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
-                    disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
-                    SWITCH_GEOMETRY[size].bar,
-                    SWITCH_GEOMETRY[size].barX
-                )}
-            />}
-
-            {!(allowIndeterminate && (value === null || value === undefined)) && <div
-                key={"knob"}
-                className={cls(
-                    "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
-                    disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
-                    SWITCH_GEOMETRY[size].knob,
-                    value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off
-                )}
-            />}
-        </button>;
-    }
-) as React.ForwardRefExoticComponent<BooleanSwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/src/components/BooleanSwitchWithLabel.tsx

@@ -1,120 +0,0 @@
-"use client";
-import React from "react";
-import {
-    controlHeightMixin,
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    focusedClasses
-} from "../styles";
-import { BooleanSwitch, BooleanSwitchProps } from "./BooleanSwitch";
-import { cls } from "../util";
-
-export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
-    position?: "start" | "end",
-    invisible?: boolean,
-    label?: React.ReactNode,
-    error?: boolean,
-    autoFocus?: boolean,
-    fullWidth?: boolean,
-    className?: string,
-    inputClassName?: string,
-};
-
-/**
- * Simple boolean switch.
- *
- */
-export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
-                                                                          value,
-                                                                          position = "end",
-                                                                          size = "medium",
-                                                                          invisible,
-                                                                          onValueChange,
-                                                                          error,
-                                                                          label,
-                                                                          autoFocus,
-                                                                          disabled,
-                                                                          className,
-                                                                          fullWidth = true,
-                                                                          inputClassName,
-                                                                          ...props
-                                                                      }: BooleanSwitchWithLabelProps) {
-
-    const ref = React.useRef<HTMLDivElement | null>(null);
-    const refInput = React.useRef<HTMLButtonElement | null>(null);
-    const switchLabelId = React.useId();
-    const [_, setFocused] = React.useState(autoFocus)
-    const onFocus = () => setFocused(true);
-    const onBlur = () => setFocused(false);
-
-    React.useEffect(() => {
-        if (autoFocus) {
-            // refInput.current?.focus();
-        }
-    }, []);
-
-    const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current
-
-    return (
-        <div
-            ref={ref}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            role="switch"
-            aria-checked={props.allowIndeterminate && (value === null || value === undefined) ? "mixed" : !!value}
-            aria-disabled={disabled || undefined}
-            aria-labelledby={label ? switchLabelId : undefined}
-            tabIndex={-1}
-            className={cls(
-                !invisible && fieldBackgroundMixin,
-                !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin),
-                disabled ? "cursor-default" : "cursor-pointer",
-                "rounded-lg max-w-full justify-between box-border relative inline-flex items-center",
-                !invisible && focus && !disabled ? focusedClasses : "",
-                error ? "text-red-500 dark:text-red-600" : (focus && !disabled ? "text-primary" : (!disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark")),
-                // The one control size scale — 28/32/40/48. This component still
-                // carried its own map (…/44/64), so a switch at `large` stood
-                // 16px taller than the text field beside it, which read as a
-                // giant empty box once the label moved out of the control.
-                controlHeightMixin[size],
-                size === "small" || size === "smallest" ? "pl-2" : "pl-4",
-                size === "small" || size === "smallest" ? "pr-4" : "pr-6",
-                position === "end" ? "flex-row-reverse" : "flex-row",
-                fullWidth ? "w-full" : "",
-                className
-            )}
-            onClick={disabled ? undefined : (e) => {
-                if (props.allowIndeterminate) {
-                    const onChange = onValueChange as ((newValue: boolean | null) => void) | undefined;
-                    if (value === null || value === undefined) onChange?.(true)
-                    else if (value) onChange?.(false)
-                    else onChange?.(null);
-                } else {
-                    onValueChange?.(!value);
-                }
-                // refInput.current?.focus();
-            }}
-        >
-
-            <BooleanSwitch
-                value={value}
-                ref={refInput}
-                size={size}
-                className={cls(invisible && focus ? focusedClasses : "", inputClassName)}
-                disabled={disabled}
-                {...props}
-            />
-
-            <div id={switchLabelId} className={cls(
-                "grow",
-                position === "end" ? "mr-4" : "ml-4",
-                size === "small" || size === "smallest" ? "text-sm" : "text-base"
-            )}>
-                {label}
-            </div>
-
-        </div>
-
-    );
-};