@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/TextareaAutosize.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaAutosize.es.js","names":[],"sources":["../../src/components/TextareaAutosize.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { useLayoutEffect } from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { cls, debounce } from \"../util\";\n\ntype State = {\n    outerHeightStyle: number;\n    overflow?: boolean | undefined;\n};\n\nfunction getStyleValue(value: string) {\n    return parseInt(value, 10) || 0;\n}\n\nconst styles: {\n    shadow: React.CSSProperties;\n} = {\n    shadow: {\n        // Visibility needed to hide the extra text area on iPads\n        visibility: \"hidden\",\n        // Remove from the content flow\n        position: \"absolute\",\n        // Ignore the scrollbar width\n        overflow: \"hidden\",\n        height: 0,\n        top: 0,\n        left: 0,\n        // Create a new layer, increase the isolation of the computed values\n        transform: \"translateZ(0)\"\n    }\n};\n\nfunction isEmpty(obj: State) {\n    return (\n        obj === undefined ||\n        obj === null ||\n        Object.keys(obj).length === 0 ||\n        (obj.outerHeightStyle === 0 && !obj.overflow)\n    );\n}\n\nexport const TextareaAutosize = React.forwardRef(function TextareaAutosize(\n    props: TextareaAutosizeProps,\n    ref: React.ForwardedRef<Element>\n) {\n    const {\n        onChange,\n        onScroll,\n        onResize,\n        maxRows,\n        minRows = 1,\n        style,\n        value,\n        onFocus,\n        onBlur,\n        sizeRef,\n        ignoreBoxSizing,\n        ...other\n    } = props;\n\n    const { current: isControlled } = React.useRef(value != null);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n    const shadowRef = React.useRef<HTMLTextAreaElement>(null);\n    const renders = React.useRef(0);\n    const [state, setState] = React.useState<State>({\n        outerHeightStyle: 0\n    });\n\n    const getUpdatedState = React.useCallback(() => {\n\n        const input = inputRef.current!;\n        if (typeof window === \"undefined\") {\n            return {\n                outerHeightStyle: 0\n            };\n        }\n\n        const containerWindow = window;\n        const computedStyle = containerWindow.getComputedStyle(input);\n\n        // If input's width is shrunk and it's not visible, don't sync height.\n        if (computedStyle.width === \"0px\") {\n            return {\n                outerHeightStyle: 0\n            };\n        }\n\n        const sizeReferenceElement = sizeRef?.current ?? shadowRef.current!;\n        const inputShallow = shadowRef.current!;\n\n        sizeReferenceElement.style.width = computedStyle.width;\n        inputShallow.value = input.value || props.placeholder || \"x\";\n        if (inputShallow.value.slice(-1) === \"\\n\") {\n            // Certain fonts which overflow the line height will cause the textarea\n            // to report a different scrollHeight depending on whether the last line\n            // is empty. Make it non-empty to avoid this issue.\n            inputShallow.value += \" \";\n        }\n\n        const boxSizing = computedStyle.boxSizing;\n        const padding =\n            getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);\n        const border =\n            getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);\n        const minHeight = getStyleValue(computedStyle.minHeight);\n\n        // The height of the inner content\n        const innerHeight = sizeReferenceElement.scrollHeight;\n\n        // Measure height of a textarea with a single row\n        inputShallow.value = \"x\";\n        const singleRowHeight = sizeReferenceElement.scrollHeight;\n\n        // The height of the outer content\n        let outerHeight = innerHeight;\n\n        if (minRows) {\n            outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);\n        }\n        if (maxRows) {\n            outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);\n        }\n        outerHeight = Math.max(outerHeight, singleRowHeight, minHeight);\n\n        // Take the box sizing into account for applying this value as a style.\n        const outerHeightStyle = outerHeight + (!ignoreBoxSizing && boxSizing === \"border-box\" ? padding + border : 0);\n\n        const overflow = Math.abs(outerHeight - innerHeight) <= 1;\n\n        return {\n            outerHeightStyle,\n            overflow\n        };\n    }, [maxRows, minRows, props.placeholder]);\n\n    const updateState = React.useCallback((prevState: State, newState: State) => {\n        const {\n            outerHeightStyle,\n            overflow\n        } = newState;\n        // Need a large enough difference to update the height.\n        // This prevents infinite rendering loop.\n        if (\n            renders.current < 20 &&\n            ((outerHeightStyle > 0 &&\n                    Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||\n                prevState.overflow !== overflow)\n        ) {\n            renders.current += 1;\n            return {\n                overflow,\n                outerHeightStyle\n            };\n        }\n        if (process.env.NODE_ENV !== \"production\") {\n            if (renders.current === 20) {\n                console.error(\n                    [\n                        \"MUI: Too many re-renders. The layout is unstable.\",\n                        \"TextareaAutosize limits the number of renders to prevent an infinite loop.\"\n                    ].join(\"\\n\")\n                );\n            }\n        }\n        return prevState;\n    }, []);\n\n    const syncHeight = React.useCallback(() => {\n        const newState = getUpdatedState();\n\n        if (isEmpty(newState)) {\n            return;\n        }\n        if (onResize) {\n            onResize(newState);\n        }\n\n        setState((prevState) => {\n            return updateState(prevState, newState);\n        });\n    }, [getUpdatedState, onResize, updateState]);\n\n    const syncHeightWithFlushSync = React.useCallback(() => {\n        const newState = getUpdatedState();\n\n        if (isEmpty(newState)) {\n            return;\n        }\n\n        // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering\n        // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen\n        // Related issue - https://github.com/facebook/react/issues/24331\n        ReactDOM.flushSync(() => {\n            setState((prevState) => {\n                return updateState(prevState, newState);\n            });\n        });\n    }, [getUpdatedState, updateState]);\n\n    React.useEffect(() => {\n        const handleResize = debounce(() => {\n            renders.current = 0;\n\n            // If the TextareaAutosize component is replaced by Suspense with a fallback, the last\n            // ResizeObserver's handler that runs because of the change in the layout is trying to\n            // access a dom node that is no longer there (as the fallback component is being shown instead).\n            if (inputRef.current) {\n                syncHeightWithFlushSync();\n            }\n        });\n        let resizeObserver: ResizeObserver;\n\n        const input = inputRef.current!;\n        const containerWindow = window;\n        if (typeof window === \"undefined\") {\n            return;\n        }\n\n        containerWindow.addEventListener(\"resize\", handleResize);\n\n        if (typeof ResizeObserver !== \"undefined\") {\n            resizeObserver = new ResizeObserver(handleResize);\n            resizeObserver.observe(input);\n        }\n\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener(\"resize\", handleResize);\n            if (resizeObserver) {\n                resizeObserver.disconnect();\n            }\n        };\n    }, [syncHeightWithFlushSync]);\n\n    // Measuring is a forced synchronous layout (write the shadow, read\n    // `getComputedStyle` and `scrollHeight`), so it runs when something that\n    // decides the height changes — not on every render, which made each\n    // multiline field pay one per re-render of the form around it. Width\n    // changes re-sync through the ResizeObserver above; an uncontrolled\n    // textarea re-syncs in `handleChange`. The style is compared by content:\n    // callers pass it inline.\n    const styleKey = style ? JSON.stringify(style) : \"\";\n    useLayoutEffect(() => {\n        syncHeight();\n    }, [syncHeight, value, props.className, props.shadowClassName, styleKey, sizeRef, ignoreBoxSizing]);\n\n    React.useEffect(() => {\n        renders.current = 0;\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        renders.current = 0;\n\n        if (!isControlled) {\n            syncHeight();\n        }\n\n        if (onChange) {\n            onChange(event);\n        }\n    };\n\n    return (\n        <React.Fragment>\n            <textarea\n                value={value}\n                onChange={handleChange}\n                className={props.className}\n                ref={handleRef as React.Ref<HTMLTextAreaElement>}\n                onFocus={onFocus}\n                onBlur={onBlur}\n                // Apply the rows prop to get a \"correct\" first SSR paint\n                rows={minRows as number}\n                style={{\n                    height: state.outerHeightStyle,\n                    // Need a large enough difference to allow scrolling.\n                    // This prevents infinite rendering loop.\n                    overflow: state.overflow ? \"hidden\" : undefined,\n                    ...style\n                }}\n                onScroll={onScroll}\n                {...other}\n            />\n            <textarea\n                aria-hidden\n                className={cls(props.className, props.shadowClassName)}\n                readOnly\n                ref={shadowRef}\n                tabIndex={-1}\n                style={{\n                    padding: 0,\n                    ...styles.shadow,\n                    ...style\n                }}\n            />\n        </React.Fragment>\n    );\n}) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;\n\nexport type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, \"onResize\"> & {\n\n    className?: string;\n\n    shadowClassName?: string;\n\n    /**\n     * Maximum number of rows to display.\n     */\n    maxRows?: number | string;\n    /**\n     * Minimum number of rows to display.\n     * @default 1\n     */\n    minRows?: number | string;\n    /**\n     * @ignore\n     */\n    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n    /**\n     * @ignore\n     */\n    placeholder?: string;\n    /**\n     * @ignore\n     */\n    style?: object;\n    /**\n     * @ignore\n     */\n    value?: string[] | number | string;\n\n    sizeRef?: React.RefObject<HTMLDivElement>;\n\n    onScroll?: (event: React.UIEvent<HTMLTextAreaElement>) => void;\n\n    onResize?: (state: State) => void;\n\n    autoFocus?: boolean;\n\n    ignoreBoxSizing?: boolean;\n}\n\nfunction useForkRef<Instance>(\n    ...refs: Array<React.Ref<Instance> | undefined>\n): React.RefCallback<Instance> | null {\n    /**\n     * This will create a new function if the refs passed to this hook change and are all defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refs.every((ref) => ref == null)) {\n            return null;\n        }\n\n        return (instance) => {\n            refs.forEach((ref) => {\n                setRef(ref, instance);\n            });\n        };\n\n    }, refs);\n}\n\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === \"function\") {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n"],"mappings":"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"}

package/dist/components/ToggleButtonGroup.d.ts

@@ -22,9 +22,14 @@ export type ToggleButtonGroupProps<T extends string = string> = {
      * Additional class names for the container
      */
     className?: string;
+    /** Names the group: what it chooses between, e.g. "View mode". */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Stretch the track to its container and split it evenly between the options. */
+    fullWidth?: boolean;
 };
 /**
  * A toggle button group component for selecting one option from a set.
  * Displays options as buttons in a horizontal row with active state styling.
  */
-export declare function ToggleButtonGroup<T extends string = string>({ value, onValueChange, options, className }: ToggleButtonGroupProps<T>): React.JSX.Element;
+export declare function ToggleButtonGroup<T extends string = string>({ value, onValueChange, options, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, fullWidth }: ToggleButtonGroupProps<T>): React.JSX.Element;

package/dist/components/ToggleButtonGroup.es.js

@@ -0,0 +1,35 @@
+import { cls } from "../util/cls.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ToggleButtonGroup.tsx
+/**
+* A toggle button group component for selecting one option from a set.
+* Displays options as buttons in a horizontal row with active state styling.
+*/
+function ToggleButtonGroup({ value, onValueChange, options, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, fullWidth }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className: cls(fullWidth ? "flex w-full" : "inline-flex", "flex-row bg-surface-field rounded-lg p-1 gap-1", className),
+		children: options.map((option) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation();
+				if (!option.disabled) onValueChange(option.value);
+			},
+			disabled: option.disabled,
+			"aria-pressed": value === option.value,
+			"aria-disabled": option.disabled || void 0,
+			className: cls(fullWidth && "flex-1", "flex flex-row items-center justify-center gap-2 h-6 px-3.5 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", value === option.value ? "bg-surface-lifted text-text-primary dark:text-text-primary-dark shadow-sm" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover", option.disabled && "opacity-50 cursor-not-allowed"),
+			children: [option.icon, /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium",
+				children: option.label
+			})]
+		}, option.value))
+	});
+}
+//#endregion
+export { ToggleButtonGroup };
+
+//# sourceMappingURL=ToggleButtonGroup.es.js.map

package/dist/components/ToggleButtonGroup.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.es.js","names":[],"sources":["../../src/components/ToggleButtonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { cls } from \"../util\";\n\nexport type ToggleButtonOption<T extends string = string> = {\n    value: T;\n    label: string;\n    icon?: React.ReactNode;\n    disabled?: boolean;\n}\n\nexport type ToggleButtonGroupProps<T extends string = string> = {\n    /**\n     * Currently selected value\n     */\n    value: T;\n    /**\n     * Callback when value changes\n     */\n    onValueChange: (value: T) => void;\n    /**\n     * Options to display\n     */\n    options: ToggleButtonOption<T>[];\n    /**\n     * Additional class names for the container\n     */\n    className?: string;\n    /** Names the group: what it chooses between, e.g. \"View mode\". */\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    /** Stretch the track to its container and split it evenly between the options. */\n    fullWidth?: boolean;\n}\n\n/**\n * A toggle button group component for selecting one option from a set.\n * Displays options as buttons in a horizontal row with active state styling.\n */\nexport function ToggleButtonGroup<T extends string = string>({\n    value,\n    onValueChange,\n    options,\n    className,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    fullWidth\n}: ToggleButtonGroupProps<T>) {\n    return (\n        // A 32px rounded track (`lg`) with `md` segments. It was 48px with a\n        // blue label on the active segment; the lifted fill already says which\n        // segment is on, so the label stays in the primary ink and the hue is\n        // not spent twice.\n        <div role=\"group\" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={cls(fullWidth ? \"flex w-full\" : \"inline-flex\", \"flex-row bg-surface-field rounded-lg p-1 gap-1\", className)}>\n            {options.map((option) => (\n                <button\n                    key={option.value}\n                    type=\"button\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        if (!option.disabled) {\n                            onValueChange(option.value);\n                        }\n                    }}\n                    disabled={option.disabled}\n                    aria-pressed={value === option.value}\n                    aria-disabled={option.disabled || undefined}\n                    className={cls(\n                        fullWidth && \"flex-1\",\n                        \"flex flex-row items-center justify-center gap-2 h-6 px-3.5 rounded-md transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50\",\n                        value === option.value\n                            ? \"bg-surface-lifted text-text-primary dark:text-text-primary-dark shadow-sm\"\n                            : \"text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover\",\n                        option.disabled && \"opacity-50 cursor-not-allowed\"\n                    )}\n                >\n                    {option.icon}\n                    <span className=\"text-xs font-medium\">{option.label}</span>\n                </button>\n            ))}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;AAsCA,SAAgB,kBAA6C,EACzD,OACA,eACA,SACA,WACA,cAAc,WACd,mBAAmB,gBACnB,aAC0B;CAC1B,OAKI,oBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAW,mBAAiB;EAAgB,WAAW,IAAI,YAAY,gBAAgB,eAAe,kDAAkD,SAAS;YAC1L,QAAQ,KAAK,WACV,qBAAC,UAAD;GAEI,MAAK;GACL,UAAU,MAAM;IACZ,EAAE,gBAAgB;IAClB,IAAI,CAAC,OAAO,UACR,cAAc,OAAO,KAAK;GAElC;GACA,UAAU,OAAO;GACjB,gBAAc,UAAU,OAAO;GAC/B,iBAAe,OAAO,YAAY,KAAA;GAClC,WAAW,IACP,aAAa,UACb,8KACA,UAAU,OAAO,QACX,8EACA,4EACN,OAAO,YAAY,+BACvB;aAnBJ,CAqBK,OAAO,MACR,oBAAC,QAAD;IAAM,WAAU;cAAuB,OAAO;GAAY,CAAA,CACtD;KAtBC,OAAO,KAsBR,CACX;CACA,CAAA;AAEb"}

package/dist/components/Tooltip.d.ts

@@ -1,4 +1,28 @@
 import React from "react";
+export type TooltipProviderProps = {
+    children: React.ReactNode;
+    /**
+     * How long, in ms, the pointer rests on a trigger before its tooltip opens.
+     * A `Tooltip`'s own `delayDuration` wins over it.
+     */
+    delayDuration?: number;
+    /**
+     * How long, in ms, after one tooltip closes the next one opens without the
+     * delay — so moving along a row of icons does not wait on each.
+     */
+    skipDelayDuration?: number;
+};
+/**
+ * One provider for every `Tooltip` below it. `<Rebase>` mounts one around the
+ * whole admin; mount one yourself around a screen that renders kit tooltips
+ * outside it. A `Tooltip` with no provider above still works: it brings its
+ * own, as before.
+ *
+ * Without one, every tooltip mounted a provider of its own — hundreds on a
+ * page of table rows — and the skip-delay between neighbouring tooltips never
+ * applied, since each provider timed only its own tooltip.
+ */
+export declare function TooltipProvider({ children, delayDuration, skipDelayDuration }: TooltipProviderProps): React.JSX.Element;
 export type TooltipProps = {
     open?: boolean;
     defaultOpen?: boolean;

package/dist/components/Tooltip.es.js

@@ -0,0 +1,165 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import { usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import { useInjectStyles } from "../hooks/useInjectStyles.es.js";
+import { IconButton } from "./IconButton.es.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/components/Tooltip.tsx
+/**
+* A Radix tooltip only describes its trigger (`aria-describedby`, and only
+* while open); it never names it. Wrapped around an icon-only button with no
+* name of its own, the title was the one word that said what the button does,
+* and a screen reader announced "button". So a string title names an
+* icon-only button (no text, no `aria-label`/`aria-labelledby`) it wraps.
+*/
+function nameFromTitle(children, title) {
+	if (typeof title !== "string" || !React.isValidElement(children)) return children;
+	const type = children.type;
+	if (type !== IconButton && type !== "button" && type !== "a") return children;
+	const props = children.props;
+	if (props["aria-label"] || props["aria-labelledby"]) return children;
+	if (React.Children.toArray(props.children).some((child) => typeof child === "string" || typeof child === "number")) return children;
+	return React.cloneElement(children, { "aria-label": title });
+}
+/** Whether a {@link TooltipProvider} is above: a tooltip under one does not mount its own. */
+var SharedTooltipProvider = React.createContext(false);
+/**
+* One provider for every `Tooltip` below it. `<Rebase>` mounts one around the
+* whole admin; mount one yourself around a screen that renders kit tooltips
+* outside it. A `Tooltip` with no provider above still works: it brings its
+* own, as before.
+*
+* Without one, every tooltip mounted a provider of its own — hundreds on a
+* page of table rows — and the skip-delay between neighbouring tooltips never
+* applied, since each provider timed only its own tooltip.
+*/
+function TooltipProvider({ children, delayDuration = 200, skipDelayDuration = 300 }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		delayDuration,
+		skipDelayDuration,
+		children: /* @__PURE__ */ jsx(SharedTooltipProvider.Provider, {
+			value: true,
+			children
+		})
+	});
+}
+var Tooltip = ({ open, defaultOpen, side = "bottom", delayDuration = 200, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild = false, container, className, style }) => {
+	useInjectStyles("Tooltip", styles);
+	const sharedProvider = React.useContext(SharedTooltipProvider);
+	const contextContainer = usePortalContainer();
+	const finalContainer = container ?? contextContainer ?? void 0;
+	if (!title) return /* @__PURE__ */ jsx(Fragment, { children });
+	children = nameFromTitle(children, title);
+	const trigger = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+		asChild: true,
+		children
+	}) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("div", {
+			style,
+			className,
+			children
+		})
+	});
+	const root = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, {
+		...open !== void 0 ? {
+			open,
+			onOpenChange
+		} : {},
+		defaultOpen,
+		delayDuration,
+		children: [trigger, /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+			container: finalContainer,
+			children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+				className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-800/95 dark:bg-surface-raised-hover font-medium text-white shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName),
+				style: tooltipStyle,
+				sideOffset: sideOffset === void 0 ? 4 : sideOffset,
+				align,
+				side,
+				children: title
+			})
+		})]
+	});
+	if (sharedProvider) return root;
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		delayDuration,
+		children: root
+	});
+};
+var styles = `
+
+.TooltipContent {
+  animation-duration: 220ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='top'] {
+  animation-name: tooltipSlideDownAndFade;
+}
+.TooltipContent[data-state='delayed-open'][data-side='right'] {
+  animation-name: tooltipSlideLeftAndFade;
+}
+.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
+  animation-name: tooltipSlideUpAndFade;
+}
+.TooltipContent[data-state='delayed-open'][data-side='left'] {
+  animation-name: tooltipSlideRightAndFade;
+}
+
+
+@keyframes tooltipSlideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltipSlideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltipSlideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltipSlideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .TooltipContent[data-state] {
+    animation: none;
+  }
+}`;
+//#endregion
+export { Tooltip, TooltipProvider };
+
+//# sourceMappingURL=Tooltip.es.js.map

package/dist/components/Tooltip.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.es.js","names":[],"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cls } from \"../util\";\nimport { useInjectStyles } from \"../hooks\";\nimport { usePortalContainer } from \"../hooks/PortalContainerContext\";\nimport { IconButton } from \"./IconButton\";\n\n/**\n * A Radix tooltip only describes its trigger (`aria-describedby`, and only\n * while open); it never names it. Wrapped around an icon-only button with no\n * name of its own, the title was the one word that said what the button does,\n * and a screen reader announced \"button\". So a string title names an\n * icon-only button (no text, no `aria-label`/`aria-labelledby`) it wraps.\n */\nfunction nameFromTitle(children: React.ReactNode, title: React.ReactNode): React.ReactNode {\n    if (typeof title !== \"string\" || !React.isValidElement<Record<string, unknown>>(children)) return children;\n    const type = children.type;\n    if (type !== IconButton && type !== \"button\" && type !== \"a\") return children;\n    const props = children.props;\n    if (props[\"aria-label\"] || props[\"aria-labelledby\"]) return children;\n    const hasText = React.Children.toArray(props.children as React.ReactNode)\n        .some((child) => typeof child === \"string\" || typeof child === \"number\");\n    if (hasText) return children;\n    return React.cloneElement(children, { \"aria-label\": title });\n}\n\n/** Whether a {@link TooltipProvider} is above: a tooltip under one does not mount its own. */\nconst SharedTooltipProvider = React.createContext(false);\n\nexport type TooltipProviderProps = {\n    children: React.ReactNode,\n    /**\n     * How long, in ms, the pointer rests on a trigger before its tooltip opens.\n     * A `Tooltip`'s own `delayDuration` wins over it.\n     */\n    delayDuration?: number,\n    /**\n     * How long, in ms, after one tooltip closes the next one opens without the\n     * delay — so moving along a row of icons does not wait on each.\n     */\n    skipDelayDuration?: number\n};\n\n/**\n * One provider for every `Tooltip` below it. `<Rebase>` mounts one around the\n * whole admin; mount one yourself around a screen that renders kit tooltips\n * outside it. A `Tooltip` with no provider above still works: it brings its\n * own, as before.\n *\n * Without one, every tooltip mounted a provider of its own — hundreds on a\n * page of table rows — and the skip-delay between neighbouring tooltips never\n * applied, since each provider timed only its own tooltip.\n */\nexport function TooltipProvider({\n    children,\n    delayDuration = 200,\n    skipDelayDuration = 300\n}: TooltipProviderProps) {\n    return (\n        <TooltipPrimitive.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration}>\n            <SharedTooltipProvider.Provider value={true}>\n                {children}\n            </SharedTooltipProvider.Provider>\n        </TooltipPrimitive.Provider>\n    );\n}\n\nexport type TooltipProps = {\n    open?: boolean,\n    defaultOpen?: boolean,\n    onOpenChange?: (open: boolean) => void,\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\",\n    align?: \"start\" | \"center\" | \"end\",\n    sideOffset?: number,\n    title?: string | React.ReactNode,\n    delayDuration?: number;\n    asChild?: boolean;\n    tooltipClassName?: string,\n    tooltipStyle?: React.CSSProperties;\n    children: React.ReactNode,\n    className?: string,\n    container?: HTMLElement,\n    style?: React.CSSProperties;\n};\n\nexport const Tooltip = ({\n                            open,\n                            defaultOpen,\n                            side = \"bottom\",\n                            delayDuration = 200,\n                            sideOffset,\n                            align,\n                            onOpenChange,\n                            title,\n                            tooltipClassName,\n                            tooltipStyle,\n                            children,\n                            asChild = false,\n                            container,\n                            className,\n                            style\n                        }: TooltipProps) => {\n\n    useInjectStyles(\"Tooltip\", styles);\n\n    const sharedProvider = React.useContext(SharedTooltipProvider);\n\n    // Get the portal container from context\n    const contextContainer = usePortalContainer();\n\n    // Prioritize manual prop, fallback to context container\n    const finalContainer = (container ?? contextContainer ?? undefined) as HTMLElement | undefined;\n\n    if (!title)\n        return <>{children}</>;\n\n    children = nameFromTitle(children, title);\n\n    const trigger = asChild\n        ? <TooltipPrimitive.Trigger asChild={true}>\n            {children}\n        </TooltipPrimitive.Trigger>\n        : <TooltipPrimitive.Trigger asChild={true}>\n            <div style={style} className={className}>\n                {children}\n            </div>\n        </TooltipPrimitive.Trigger>;\n\n    const root = (\n        <TooltipPrimitive.Root {...(open !== undefined ? { open,\nonOpenChange } : {})} defaultOpen={defaultOpen} delayDuration={delayDuration}>\n            {trigger}\n            <TooltipPrimitive.Portal container={finalContainer}>\n                <TooltipPrimitive.Content\n                    className={cls(\"TooltipContent\",\n                        \"max-w-lg leading-relaxed\",\n                        \"z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-800/95 dark:bg-surface-raised-hover font-medium text-white shadow-2xl select-none duration-400 ease-in transform opacity-100\",\n                        tooltipClassName)}\n                    style={tooltipStyle}\n                    sideOffset={sideOffset === undefined ? 4 : sideOffset}\n                    align={align}\n                    side={side}>\n                    {title}\n                </TooltipPrimitive.Content>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n\n    // Under a TooltipProvider the shared one times this tooltip; alone, it\n    // brings its own, as every tooltip used to.\n    if (sharedProvider) return root;\n    return (\n        <TooltipPrimitive.Provider delayDuration={delayDuration}>\n            {root}\n        </TooltipPrimitive.Provider>\n    );\n};\n\nconst styles = `\n\n.TooltipContent {\n  animation-duration: 220ms;\n  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n}\n\n.TooltipContent[data-state='delayed-open'][data-side='top'] {\n  animation-name: tooltipSlideDownAndFade;\n}\n.TooltipContent[data-state='delayed-open'][data-side='right'] {\n  animation-name: tooltipSlideLeftAndFade;\n}\n.TooltipContent[data-state='delayed-open'][data-side='bottom'] {\n  animation-name: tooltipSlideUpAndFade;\n}\n.TooltipContent[data-state='delayed-open'][data-side='left'] {\n  animation-name: tooltipSlideRightAndFade;\n}\n\n\n@keyframes tooltipSlideUpAndFade {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltipSlideRightAndFade {\n  from {\n    opacity: 0;\n    transform: translateX(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes tooltipSlideDownAndFade {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes tooltipSlideLeftAndFade {\n  from {\n    opacity: 0;\n    transform: translateX(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TooltipContent[data-state] {\n    animation: none;\n  }\n}`;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAS,cAAc,UAA2B,OAAyC;CACvF,IAAI,OAAO,UAAU,YAAY,CAAC,MAAM,eAAwC,QAAQ,GAAG,OAAO;CAClG,MAAM,OAAO,SAAS;CACtB,IAAI,SAAS,cAAc,SAAS,YAAY,SAAS,KAAK,OAAO;CACrE,MAAM,QAAQ,SAAS;CACvB,IAAI,MAAM,iBAAiB,MAAM,oBAAoB,OAAO;CAG5D,IAFgB,MAAM,SAAS,QAAQ,MAAM,QAA2B,CAAC,CACpE,MAAM,UAAU,OAAO,UAAU,YAAY,OAAO,UAAU,QAC/D,GAAS,OAAO;CACpB,OAAO,MAAM,aAAa,UAAU,EAAE,cAAc,MAAM,CAAC;AAC/D;;AAGA,IAAM,wBAAwB,MAAM,cAAc,KAAK;;;;;;;;;;;AA0BvD,SAAgB,gBAAgB,EAC5B,UACA,gBAAgB,KAChB,oBAAoB,OACC;CACrB,OACI,oBAAC,iBAAiB,UAAlB;EAA0C;EAAkC;YACxE,oBAAC,sBAAsB,UAAvB;GAAgC,OAAO;GAClC;EAC2B,CAAA;CACT,CAAA;AAEnC;AAoBA,IAAa,WAAW,EACI,MACA,aACA,OAAO,UACP,gBAAgB,KAChB,YACA,OACA,cACA,OACA,kBACA,cACA,UACA,UAAU,OACV,WACA,WACA,YACgB;CAExC,gBAAgB,WAAW,MAAM;CAEjC,MAAM,iBAAiB,MAAM,WAAW,qBAAqB;CAG7D,MAAM,mBAAmB,mBAAmB;CAG5C,MAAM,iBAAkB,aAAa,oBAAoB,KAAA;CAEzD,IAAI,CAAC,OACD,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;CAEzB,WAAW,cAAc,UAAU,KAAK;CAExC,MAAM,UAAU,UACV,oBAAC,iBAAiB,SAAlB;EAA0B,SAAS;EAChC;CACqB,CAAA,IACxB,oBAAC,iBAAiB,SAAlB;EAA0B,SAAS;YACjC,oBAAC,OAAD;GAAY;GAAkB;GACzB;EACA,CAAA;CACiB,CAAA;CAE9B,MAAM,OACF,qBAAC,iBAAiB,MAAlB;EAAuB,GAAK,SAAS,KAAA,IAAY;GAAE;GAC3D;EAAa,IAAI,CAAC;EAAiB;EAA4B;YADvD,CAEK,SACD,oBAAC,iBAAiB,QAAlB;GAAyB,WAAW;aAChC,oBAAC,iBAAiB,SAAlB;IACI,WAAW,IAAI,kBACX,4BACA,0LACA,gBAAgB;IACpB,OAAO;IACP,YAAY,eAAe,KAAA,IAAY,IAAI;IACpC;IACD;cACL;GACqB,CAAA;EACL,CAAA,CACN;;CAK3B,IAAI,gBAAgB,OAAO;CAC3B,OACI,oBAAC,iBAAiB,UAAlB;EAA0C;YACrC;CACsB,CAAA;AAEnC;AAEA,IAAM,SAAS"}

package/dist/components/Typography.es.js

@@ -0,0 +1,85 @@
+import { cls } from "../util/cls.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Typography.tsx
+var typographyVariants = {
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	h6: "h6",
+	subtitle1: "h6",
+	subtitle2: "h6",
+	label: "label",
+	body1: "p",
+	body2: "p",
+	inherit: "p",
+	caption: "p",
+	button: "span",
+	lead: "p",
+	micro: "span",
+	mono: "span",
+	stat: "span"
+};
+var colorToClasses = {
+	inherit: "text-inherit",
+	initial: "text-current",
+	primary: "text-text-primary dark:text-text-primary-dark",
+	secondary: "text-text-secondary dark:text-text-secondary-dark",
+	disabled: "text-text-disabled dark:text-text-disabled-dark",
+	error: "text-red-600 dark:text-red-500"
+};
+var gutterBottomClasses = {
+	h1: "mb-5",
+	h2: "mb-4",
+	h3: "mb-4",
+	h4: "mb-4",
+	h5: "mb-3",
+	h6: "mb-3",
+	subtitle1: "mb-3",
+	subtitle2: "mb-3",
+	body1: "mb-3",
+	body2: "mb-3",
+	inherit: "mb-3",
+	caption: "mb-2",
+	button: "mb-2",
+	label: "mb-2",
+	lead: "mb-4",
+	micro: "mb-1",
+	mono: "mb-2",
+	stat: "mb-1"
+};
+var variantToClasses = {
+	h1: "typography-h1",
+	h2: "typography-h2",
+	h3: "typography-h3",
+	h4: "typography-h4",
+	h5: "typography-h5",
+	h6: "typography-h6",
+	subtitle1: "typography-subtitle1",
+	subtitle2: "typography-subtitle2",
+	body1: "typography-body1",
+	body2: "typography-body2",
+	label: "typography-label",
+	inherit: "typography-inherit",
+	caption: "typography-caption",
+	button: "typography-button",
+	lead: "typography-lead",
+	micro: "typography-micro",
+	mono: "typography-mono",
+	stat: "typography-stat"
+};
+function Typography({ align = "inherit", color = "primary", children, className, component, gutterBottom = false, noWrap = false, paragraph = false, variant = "body1", variantMapping = typographyVariants, style, onClick, ...other }) {
+	return /* @__PURE__ */ jsx(component || (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) || "span", {
+		className: cls(variantToClasses[variant], color ? colorToClasses[color] : "", align !== "inherit" && `text-${align}`, gutterBottom && gutterBottomClasses[variant], noWrap && "truncate", paragraph && "mb-3", className),
+		onClick,
+		style,
+		...other,
+		children
+	});
+}
+//#endregion
+export { Typography };
+
+//# sourceMappingURL=Typography.es.js.map

package/dist/components/Typography.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.es.js","names":[],"sources":["../../src/components/Typography.tsx"],"sourcesContent":["import React, { ReactEventHandler } from \"react\";\nimport { cls } from \"../util\";\n\nexport type TypographyVariant = keyof typeof typographyVariants;\nexport type TypographyProps<C extends React.ElementType = \"span\"> = {\n    align?: \"center\" | \"inherit\" | \"justify\" | \"left\" | \"right\";\n    children?: React.ReactNode;\n    className?: string;\n    component?: C;\n    gutterBottom?: boolean;\n    noWrap?: boolean;\n    paragraph?: boolean;\n    variant?: TypographyVariant;\n    variantMapping?: { [key: string]: string };\n    color?: \"inherit\" | \"initial\" | \"primary\" | \"secondary\" | \"disabled\" | \"error\";\n    onClick?: ReactEventHandler<HTMLElement>;\n    style?: React.CSSProperties;\n} & React.ComponentPropsWithoutRef<C>;\n\nconst typographyVariants = {\n    h1: \"h1\",\n    h2: \"h2\",\n    h3: \"h3\",\n    h4: \"h4\",\n    h5: \"h5\",\n    h6: \"h6\",\n    subtitle1: \"h6\",\n    subtitle2: \"h6\",\n    label: \"label\",\n    body1: \"p\",\n    body2: \"p\",\n    inherit: \"p\",\n    caption: \"p\",\n    button: \"span\",\n    lead: \"p\",\n    micro: \"span\",\n    mono: \"span\",\n    stat: \"span\"\n};\n\nconst colorToClasses = {\n    inherit: \"text-inherit\",\n    initial: \"text-current\",\n    primary: \"text-text-primary dark:text-text-primary-dark\",\n    secondary: \"text-text-secondary dark:text-text-secondary-dark\",\n    disabled: \"text-text-disabled dark:text-text-disabled-dark\",\n    error: \"text-red-600 dark:text-red-500\"\n};\n\nconst gutterBottomClasses = {\n    h1: \"mb-5\",\n    h2: \"mb-4\",\n    h3: \"mb-4\",\n    h4: \"mb-4\",\n    h5: \"mb-3\",\n    h6: \"mb-3\",\n    subtitle1: \"mb-3\",\n    subtitle2: \"mb-3\",\n    body1: \"mb-3\",\n    body2: \"mb-3\",\n    inherit: \"mb-3\",\n    caption: \"mb-2\",\n    button: \"mb-2\",\n    label: \"mb-2\",\n    lead: \"mb-4\",\n    micro: \"mb-1\",\n    mono: \"mb-2\",\n    stat: \"mb-1\"\n};\n\nconst variantToClasses = {\n    h1: \"typography-h1\",\n    h2: \"typography-h2\",\n    h3: \"typography-h3\",\n    h4: \"typography-h4\",\n    h5: \"typography-h5\",\n    h6: \"typography-h6\",\n    subtitle1: \"typography-subtitle1\",\n    subtitle2: \"typography-subtitle2\",\n    body1: \"typography-body1\",\n    body2: \"typography-body2\",\n    label: \"typography-label\",\n    inherit: \"typography-inherit\",\n    caption: \"typography-caption\",\n    button: \"typography-button\",\n    lead: \"typography-lead\",\n    micro: \"typography-micro\",\n    mono: \"typography-mono\",\n    stat: \"typography-stat\"\n};\n\nexport function Typography<C extends React.ElementType = \"span\">(\n    {\n        align = \"inherit\",\n        color = \"primary\",\n        children,\n        className,\n        component,\n        gutterBottom = false,\n        noWrap = false,\n        paragraph = false,\n        variant = \"body1\",\n        variantMapping = typographyVariants,\n        style,\n        onClick,\n        ...other\n    }: TypographyProps<C>\n) {\n    const Component =\n        component ||\n        (paragraph ? \"p\" : variantMapping[variant] || typographyVariants[variant]) ||\n        \"span\";\n\n    const classes = cls(\n        variantToClasses[variant],\n        color ? colorToClasses[color] : \"\",\n        align !== \"inherit\" && `text-${align}`,\n        gutterBottom && gutterBottomClasses[variant],\n        noWrap && \"truncate\",\n        paragraph && \"mb-3\",\n        className\n    );\n\n    return (\n        <Component className={classes}\n                   onClick={onClick}\n                   style={style}\n                   {...other}>\n            {children}\n        </Component>\n    );\n}\n"],"mappings":";;;;AAmBA,IAAM,qBAAqB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,WAAW;CACX,WAAW;CACX,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;AACV;AAEA,IAAM,iBAAiB;CACnB,SAAS;CACT,SAAS;CACT,SAAS;CACT,WAAW;CACX,UAAU;CACV,OAAO;AACX;AAEA,IAAM,sBAAsB;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,WAAW;CACX,WAAW;CACX,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;AACV;AAEA,IAAM,mBAAmB;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,WAAW;CACX,WAAW;CACX,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;AACV;AAEA,SAAgB,WACZ,EACI,QAAQ,WACR,QAAQ,WACR,UACA,WACA,WACA,eAAe,OACf,SAAS,OACT,YAAY,OACZ,UAAU,SACV,iBAAiB,oBACjB,OACA,SACA,GAAG,SAET;CAgBE,OACI,oBAfA,cACC,YAAY,MAAM,eAAe,YAAY,mBAAmB,aACjE,QAaA;EAAW,WAXC,IACZ,iBAAiB,UACjB,QAAQ,eAAe,SAAS,IAChC,UAAU,aAAa,QAAQ,SAC/B,gBAAgB,oBAAoB,UACpC,UAAU,YACV,aAAa,QACb,SAIsB;EACF;EACF;EACP,GAAI;EACV;CACM,CAAA;AAEnB"}