@360crewing/ui 0.1.3

package/dist/components/Tabs.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import "../styles/Tabs.css";
+const Tabs = ({ items, value, defaultValue, onChange, variant = "underline", size = "md", isFullWidth, className, style, "aria-label": ariaLabel, }) => {
+    const isControlled = value !== undefined;
+    const initial = defaultValue ?? items[0]?.id;
+    const [internal, setInternal] = useState(initial);
+    const active = isControlled ? value : internal;
+    const triggerRefs = useRef({});
+    const listRef = useRef(null);
+    // Sliding underline indicator (variant=underline): measured offsetLeft/Width
+    // of the active trigger on active-change / layout / resize.
+    const [slider, setSlider] = useState({ left: 0, width: 0, ready: false });
+    // Transitions off until first measurement paints, else underline animates from (0,0).
+    const [animate, setAnimate] = useState(false);
+    const measure = useCallback(() => {
+        const list = listRef.current;
+        if (!list || !active)
+            return;
+        const btn = triggerRefs.current[active];
+        if (!btn)
+            return;
+        // offsetLeft/Width: stable across scroll, no sub-pixel rounding (unlike getBoundingClientRect).
+        setSlider({ left: btn.offsetLeft, width: btn.offsetWidth, ready: true });
+    }, [active]);
+    useLayoutEffect(() => { measure(); }, [measure, items.length, variant, size]);
+    // Enable transitions one frame after first measured paint so later changes glide.
+    useEffect(() => {
+        if (!slider.ready || animate)
+            return;
+        const raf = requestAnimationFrame(() => setAnimate(true));
+        return () => cancelAnimationFrame(raf);
+    }, [slider.ready, animate]);
+    // Re-measure on window/container resize to keep the indicator glued on reflow.
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list || typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(() => measure());
+        ro.observe(list);
+        window.addEventListener("resize", measure);
+        return () => {
+            ro.disconnect();
+            window.removeEventListener("resize", measure);
+        };
+    }, [measure]);
+    const activate = useCallback((id) => {
+        if (!isControlled)
+            setInternal(id);
+        onChange?.(id);
+    }, [isControlled, onChange]);
+    const onTriggerKeyDown = useCallback((e) => {
+        const enabled = items.filter(i => !i.isDisabled);
+        if (enabled.length === 0)
+            return;
+        const currentIdx = Math.max(0, enabled.findIndex(i => i.id === active));
+        let nextIdx = null;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                nextIdx = (currentIdx + 1) % enabled.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                nextIdx = (currentIdx - 1 + enabled.length) % enabled.length;
+                break;
+            case "Home":
+                nextIdx = 0;
+                break;
+            case "End":
+                nextIdx = enabled.length - 1;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const next = enabled[nextIdx].id;
+        activate(next);
+        triggerRefs.current[next]?.focus();
+    }, [items, active, activate]);
+    const activePanel = useMemo(() => items.find(i => i.id === active)?.content, [items, active]);
+    return (_jsxs("div", { className: classNames("ds-tabs", `ds-tabs--${variant}`, `ds-tabs--${size}`, isFullWidth && "ds-tabs--full-width", className), style: style, children: [_jsxs("div", { ref: listRef, className: "ds-tabs__list", role: "tablist", "aria-label": ariaLabel, children: [items.map(it => {
+                        const isActive = it.id === active;
+                        return (_jsxs("button", { ref: el => { triggerRefs.current[it.id] = el; }, type: "button", role: "tab", id: `tab-${it.id}`, "aria-selected": isActive, "aria-controls": `tabpanel-${it.id}`, tabIndex: isActive ? 0 : -1, disabled: it.isDisabled, className: classNames("ds-tabs__trigger", isActive && "is-active", it.isDisabled && "is-disabled"), onClick: () => !it.isDisabled && activate(it.id), onKeyDown: onTriggerKeyDown, children: [it.icon && (_jsx("span", { className: "ds-tabs__icon", "aria-hidden": "true", children: it.icon })), _jsx("span", { className: "ds-tabs__label", children: it.label }), it.badge !== undefined && (_jsx("span", { className: "ds-tabs__badge", children: it.badge }))] }, it.id));
+                    }), variant === "underline" && (_jsx("span", { className: "ds-tabs__indicator", "aria-hidden": "true", style: {
+                            transform: `translateX(${slider.left}px)`,
+                            width: slider.width,
+                            // Hidden until first measurement (avoid a frame at left:0/width:0).
+                            opacity: slider.ready ? 1 : 0,
+                            // Snap on mount; transitions enable next frame so clicks glide.
+                            transition: animate ? undefined : "none",
+                        } }))] }), activePanel !== undefined && active && (_jsx("div", { className: "ds-tabs__panel", role: "tabpanel", id: `tabpanel-${active}`, "aria-labelledby": `tab-${active}`, children: activePanel }))] }));
+};
+export default Tabs;

package/dist/components/Tag.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/Tag.css";
+export type TagColor = "brand" | "accent" | "success" | "warning" | "error" | "neutral";
+export type TagStyle = "filled" | "soft";
+export interface TagProps {
+    color?: TagColor;
+    tagStyle?: TagStyle;
+    children?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    onRemove?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    title?: string;
+}
+/**
+ * Tag — small pill for category / status / metadata labels.
+ * Mirrors Figma `Tag` set (6 colors × Filled / Soft).
+ */
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/dist/components/Tag.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/Tag.css";
+/**
+ * Tag — small pill for category / status / metadata labels.
+ * Mirrors Figma `Tag` set (6 colors × Filled / Soft).
+ */
+const Tag = ({ color = "neutral", tagStyle = "soft", children, leadingIcon, onRemove, className, style, title, }) => {
+    return (_jsxs("span", { className: classNames("ds-tag", `ds-tag--${color}`, `ds-tag--${tagStyle}`, className), style: style, title: title, children: [leadingIcon && (_jsx("span", { className: "ds-tag__icon", "aria-hidden": "true", children: leadingIcon })), _jsx("span", { className: "ds-tag__label", children: children }), onRemove && (_jsx("button", { type: "button", className: "ds-tag__remove", onClick: onRemove, "aria-label": "Remove", children: "\u00D7" }))] }));
+};
+export default Tag;

package/dist/components/TextField.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import "../styles/TextField.css";
+import "../styles/Error.css";
+export type TextFieldSize = "sm" | "md" | "lg";
+export type TextFieldState = "default" | "error" | "success";
+export interface TextFieldProps {
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    value?: string | number | null;
+    maxLength?: number;
+    type?: "number" | "decimal" | "text" | "password" | "email" | "tel" | "url" | "search";
+    error?: string | {
+        message: string;
+    } | null;
+    onChange?: (value: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+    style?: React.CSSProperties;
+    inputMode?: "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
+    /** Legacy layout switch — only honored when `size` is NOT provided. */
+    labelType?: "column" | "row";
+    /** Legacy ::before pseudo-element content. */
+    beforeContent?: string;
+    /** Legacy ::after pseudo-element content. */
+    afterContent?: string;
+    required?: boolean;
+    optional?: boolean;
+    unit?: string;
+    className?: string;
+    autoFocus?: boolean;
+    showErrorText?: boolean;
+    size?: TextFieldSize;
+    state?: TextFieldState;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    /** Inline action button on the right (clear, show-password, …). */
+    trailingAction?: React.ReactNode;
+    helpText?: string;
+    id?: string;
+}
+declare const TextField: React.FC<TextFieldProps>;
+export default TextField;

package/dist/components/TextField.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useId, useRef } from "react";
+import "../styles/TextField.css";
+import "../styles/Error.css";
+const TextField = ({ label, placeholder = "", name, value, maxLength, type = "text", error = null, onChange, isDisabled = false, onKeyDown, onFocus, onBlur, style, inputMode, labelType = "row", beforeContent, afterContent, required = false, optional = false, unit, className, autoFocus, showErrorText = true, size, state, leadingIcon, trailingIcon, trailingAction, helpText, id, }) => {
+    const inputRef = useRef(null);
+    const reactId = useId();
+    const inputId = id ?? `ds-field-${reactId}`;
+    const useDs = !!size;
+    const errorMessage = error
+        ? (typeof error === "string" ? error : error.message)
+        : null;
+    const effectiveState = state ?? (errorMessage ? "error" : "default");
+    const actualInputType = (type === "number" || type === "decimal") ? "text" : type;
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        if (maxLength && newValue.length > maxLength) {
+            return;
+        }
+        if (type === "decimal" || type === "number") {
+            const normalized = newValue.replace(/,/g, ".");
+            if (!/^-?\d*\.?\d*$/.test(normalized)) {
+                return;
+            }
+            onChange?.(normalized);
+            return;
+        }
+        onChange?.(newValue);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            onChange?.(String(value));
+        }
+        onKeyDown?.(e);
+    };
+    /* ----- DS rendering ----- */
+    if (useDs) {
+        const describedById = errorMessage
+            ? `${inputId}-error`
+            : helpText
+                ? `${inputId}-hint`
+                : undefined;
+        return (_jsxs("div", { className: classNames("ds-field", className), style: style, children: [label && (_jsxs("label", { htmlFor: inputId, className: "ds-field__label", children: [label, required && _jsx("span", { className: "ds-field__required", "aria-hidden": "true", children: "*" }), optional && _jsx("span", { className: "ds-field__optional", children: "(optional)" })] })), _jsxs("div", { className: classNames("ds-input", `ds-input--${size}`, effectiveState === "error" && "is-error", effectiveState === "success" && "is-success", isDisabled && "is-disabled"), children: [leadingIcon && (_jsx("span", { className: "ds-input__addon ds-input__addon--leading", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { id: inputId, ref: inputRef, name: name, placeholder: placeholder, value: value !== null && value !== undefined ? String(value) : "", onChange: handleInputChange, className: "ds-input__control", disabled: isDisabled, type: actualInputType, inputMode: inputMode || (type === "decimal" ? "decimal" : (type === "number" ? "numeric" : undefined)), maxLength: maxLength, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, required: required, autoFocus: autoFocus, "aria-invalid": effectiveState === "error" || undefined, "aria-describedby": describedById }), unit && _jsx("span", { className: "ds-input__suffix", children: unit }), trailingIcon && (_jsx("span", { className: "ds-input__addon ds-input__addon--trailing", "aria-hidden": "true", children: trailingIcon })), trailingAction] }), errorMessage && showErrorText ? (_jsx("div", { id: `${inputId}-error`, className: "ds-field__error", role: "alert", children: errorMessage })) : helpText ? (_jsx("div", { id: `${inputId}-hint`, className: "ds-field__hint", children: helpText })) : null] }));
+    }
+    /* ----- Legacy rendering (unchanged behaviour) ----- */
+    return (_jsxs("div", { className: `text-field ${className || ""}${required ? " mandatory" : ""}`.trim(), style: style, "data-label-type": labelType, "data-before-content": beforeContent, "data-after-content": afterContent, "data-unit": unit, children: [label && (_jsx("div", { className: "label", children: label })), _jsxs("div", { className: "input-container", children: [_jsx("input", { ref: inputRef, name: name, placeholder: placeholder, value: value !== null && value !== undefined ? String(value) : "", onChange: handleInputChange, className: `form-control ${errorMessage ? "error-border" : ""}`.trim(), disabled: isDisabled, style: {
+                            backgroundColor: isDisabled
+                                ? "var(--disabled-background)"
+                                : undefined,
+                        }, type: actualInputType, inputMode: inputMode || (type === "decimal" ? "decimal" : (type === "number" ? "numeric" : undefined)), maxLength: maxLength, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, required: required, autoFocus: autoFocus }), showErrorText && errorMessage && (_jsx("div", { className: "error-text", children: errorMessage }))] })] }));
+};
+export default TextField;

package/dist/components/TextareaField.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "../styles/TextField.css";
+import "../styles/Error.css";
+export interface TextareaFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    value?: string;
+    maxLength?: number;
+    error?: string | null | {
+        message: string;
+    };
+    onChange?: (value: string) => void;
+    isDisabled?: boolean;
+    className?: string;
+}
+declare const TextareaField: React.FC<TextareaFieldProps>;
+export default TextareaField;

package/dist/components/TextareaField.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import "../styles/TextField.css";
+import "../styles/Error.css";
+const TextareaField = observer(({ label, placeholder = "", name, value, maxLength, error = null, onChange, isDisabled = false, className = "", }) => {
+    const handleInputChange = (e) => {
+        onChange?.(e.target.value);
+    };
+    return (_jsxs("div", { className: `textarea-field ${className}`.trim(), children: [label && _jsx("div", { className: "label", children: label }), _jsxs("div", { className: "input-container", children: [_jsx("textarea", { name: name, placeholder: placeholder, value: value ?? "", maxLength: maxLength, onChange: handleInputChange, disabled: isDisabled, className: `form-control ${error ? "error-border" : ""}`.trim() }), error && (_jsx("div", { className: "error-text", children: typeof error === "string" ? error : error.message }))] })] }));
+});
+export default TextareaField;

package/dist/components/Toggle.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "../styles/Toggle.css";
+export type ToggleSize = "sm" | "md";
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: ToggleSize;
+    label?: React.ReactNode;
+    wrapperClassName?: string;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/components/Toggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import "../styles/Toggle.css";
+const Toggle = forwardRef(({ size = "md", label, className, wrapperClassName, disabled, ...inputProps }, ref) => {
+    return (_jsxs("label", { className: classNames("ds-toggle", `ds-toggle--${size}`, disabled && "ds-toggle--disabled", wrapperClassName), children: [_jsx("input", { ...inputProps, ref: ref, type: "checkbox", role: "switch", disabled: disabled, className: classNames("ds-toggle__input", className) }), _jsx("span", { className: "ds-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "ds-toggle__thumb" }) }), label !== undefined && (_jsx("span", { className: "ds-toggle__label", children: label }))] }));
+});
+Toggle.displayName = "Toggle";
+export default Toggle;

package/dist/components/ToggleField.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "../styles/ToggleField.css";
+import "../styles/Error.css";
+export interface ToggleFieldProps {
+    label?: string | React.ReactNode;
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    isDisabled?: boolean;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    error?: string | {
+        message: string;
+    } | null;
+}
+declare const ToggleField: React.FC<ToggleFieldProps>;
+export default ToggleField;

package/dist/components/ToggleField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import "../styles/ToggleField.css";
+import "../styles/Error.css";
+const ToggleField = observer(({ label, value = false, onChange, className, isDisabled = false, inputProps, error = null, }) => {
+    const withStop = (handler) => (e) => {
+        e.stopPropagation();
+        if (handler)
+            handler(e);
+    };
+    const handleChange = (e) => {
+        e.stopPropagation();
+        onChange?.(e.target.checked);
+    };
+    return (_jsxs("div", { className: `toggle-field ${className || ""} ${error ? "error" : ""}`, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onDoubleClick: (e) => e.stopPropagation(), children: [label && _jsx("span", { className: "label", children: label }), _jsx("input", { type: "checkbox", checked: value, disabled: isDisabled, ...inputProps, onChange: handleChange, onClick: withStop(inputProps?.onClick), onMouseDown: withStop(inputProps?.onMouseDown), onMouseUp: withStop(inputProps?.onMouseUp), onDoubleClick: withStop(inputProps?.onDoubleClick), onKeyDown: withStop(inputProps?.onKeyDown) }), error && (_jsx("div", { className: "error-text", children: typeof error === "string" ? error : error.message }))] }));
+});
+export default ToggleField;

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import "../styles/Tooltip.css";
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+export type TooltipAlign = "start" | "center" | "end";
+export interface TooltipProps {
+    /** Tooltip content. If empty, the wrapper is rendered as-is. */
+    label: React.ReactNode;
+    /**
+     * The reference element. Must be a single element that forwards refs and accepts
+     * `onMouseEnter` / `onMouseLeave` / `onFocus` / `onBlur` event props.
+     */
+    children: React.ReactElement;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    /** Open/close delay in ms. Open default 120, close default 80. */
+    openDelay?: number;
+    closeDelay?: number;
+    /** Force-open for controlled cases (testing, etc.). */
+    isOpen?: boolean;
+    /** When true, hides the visible tooltip but keeps the underlying `aria-describedby`. */
+    isDisabled?: boolean;
+    className?: string;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/dist/components/Tooltip.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import "../styles/Tooltip.css";
+const computePosition = (anchor, tip, side, align, gap) => {
+    let top = 0;
+    let left = 0;
+    if (side === "top") {
+        top = anchor.top - tip.height - gap;
+    }
+    else if (side === "bottom") {
+        top = anchor.bottom + gap;
+    }
+    else if (side === "left") {
+        left = anchor.left - tip.width - gap;
+    }
+    else {
+        left = anchor.right + gap;
+    }
+    if (side === "top" || side === "bottom") {
+        if (align === "start")
+            left = anchor.left;
+        else if (align === "end")
+            left = anchor.right - tip.width;
+        else
+            left = anchor.left + (anchor.width - tip.width) / 2;
+    }
+    else {
+        if (align === "start")
+            top = anchor.top;
+        else if (align === "end")
+            top = anchor.bottom - tip.height;
+        else
+            top = anchor.top + (anchor.height - tip.height) / 2;
+    }
+    // Keep on-screen
+    const margin = 4;
+    left = Math.min(Math.max(margin, left), window.innerWidth - tip.width - margin);
+    top = Math.min(Math.max(margin, top), window.innerHeight - tip.height - margin);
+    return { top: top + window.scrollY, left: left + window.scrollX };
+};
+const Tooltip = ({ label, children, side = "top", align = "center", openDelay = 120, closeDelay = 80, isOpen, isDisabled, className, }) => {
+    const id = useId();
+    const anchorRef = useRef(null);
+    const tipRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [pos, setPos] = useState(null);
+    const openTimer = useRef(null);
+    const closeTimer = useRef(null);
+    const clearTimers = () => {
+        if (openTimer.current) {
+            window.clearTimeout(openTimer.current);
+            openTimer.current = null;
+        }
+        if (closeTimer.current) {
+            window.clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    useEffect(() => clearTimers, []);
+    const show = useCallback(() => {
+        if (isDisabled || !label)
+            return;
+        clearTimers();
+        openTimer.current = window.setTimeout(() => setOpen(true), openDelay);
+    }, [isDisabled, label, openDelay]);
+    const hide = useCallback(() => {
+        clearTimers();
+        closeTimer.current = window.setTimeout(() => setOpen(false), closeDelay);
+    }, [closeDelay]);
+    const actuallyOpen = isOpen ?? open;
+    useLayoutEffect(() => {
+        if (!actuallyOpen || !anchorRef.current || !tipRef.current)
+            return;
+        const a = anchorRef.current.getBoundingClientRect();
+        const t = tipRef.current.getBoundingClientRect();
+        setPos(computePosition(a, t, side, align, 8));
+    }, [actuallyOpen, side, align, label]);
+    useEffect(() => {
+        if (!actuallyOpen)
+            return;
+        const onScrollOrResize = () => {
+            if (!anchorRef.current || !tipRef.current)
+                return;
+            const a = anchorRef.current.getBoundingClientRect();
+            const t = tipRef.current.getBoundingClientRect();
+            setPos(computePosition(a, t, side, align, 8));
+        };
+        window.addEventListener("scroll", onScrollOrResize, true);
+        window.addEventListener("resize", onScrollOrResize);
+        return () => {
+            window.removeEventListener("scroll", onScrollOrResize, true);
+            window.removeEventListener("resize", onScrollOrResize);
+        };
+    }, [actuallyOpen, side, align]);
+    if (!isValidElement(children)) {
+        return children;
+    }
+    const triggerProps = {
+        ref: (el) => {
+            anchorRef.current = el;
+            const r = children.ref;
+            if (typeof r === "function")
+                r(el);
+            else if (r && typeof r === "object")
+                r.current = el;
+        },
+        onMouseEnter: (e) => {
+            children.props.onMouseEnter?.(e);
+            show();
+        },
+        onMouseLeave: (e) => {
+            children.props.onMouseLeave?.(e);
+            hide();
+        },
+        onFocus: (e) => {
+            children.props.onFocus?.(e);
+            show();
+        },
+        onBlur: (e) => {
+            children.props.onBlur?.(e);
+            hide();
+        },
+        "aria-describedby": label ? id : undefined,
+    };
+    return (_jsxs(_Fragment, { children: [cloneElement(children, triggerProps), actuallyOpen && label && (_jsx("div", { ref: tipRef, id: id, role: "tooltip", className: classNames("ds-tooltip", `ds-tooltip--${side}`, className), style: pos ? { top: pos.top, left: pos.left } : { visibility: "hidden" }, children: label }))] }));
+};
+export default Tooltip;

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+export { default as Button } from "./components/Button";
+export type { ButtonProps } from "./components/Button";
+export { default as ContentLoader } from "./components/ContentLoader";
+export type { ContentLoaderProps } from "./components/ContentLoader";
+export { default as SkeletonLoader } from "./components/SkeletonLoader";
+export { default as TextField } from "./components/TextField";
+export type { TextFieldProps } from "./components/TextField";
+export { default as TextareaField } from "./components/TextareaField";
+export type { TextareaFieldProps } from "./components/TextareaField";
+export { default as CheckboxField } from "./components/CheckboxField";
+export type { CheckboxFieldProps } from "./components/CheckboxField";
+export { default as ToggleField } from "./components/ToggleField";
+export type { ToggleFieldProps } from "./components/ToggleField";
+export { default as Icon } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { default as Card } from "./components/Card";
+export type { CardProps } from "./components/Card";
+export { default as Page } from "./components/Page";
+export type { PageProps } from "./components/Page";
+export { default as Badge, BadgeWithDot } from "./components/Badge";
+export type { BadgeProps, BadgeWithDotProps, BadgeColor, BadgeSize } from "./components/Badge";
+export { default as StatusBadge } from "./components/StatusBadge";
+export type { StatusBadgeProps, StatusBadgeStatus } from "./components/StatusBadge";
+export { default as Checkbox } from "./components/Checkbox";
+export type { CheckboxProps, CheckboxSize } from "./components/Checkbox";
+export { default as Toggle } from "./components/Toggle";
+export type { ToggleProps, ToggleSize } from "./components/Toggle";
+export { default as Tag } from "./components/Tag";
+export type { TagProps, TagColor, TagStyle } from "./components/Tag";
+export { default as Avatar } from "./components/Avatar";
+export type { AvatarProps, AvatarSize } from "./components/Avatar";
+export { default as IconButton } from "./components/IconButton";
+export type { IconButtonProps, IconButtonSize, IconButtonStyle } from "./components/IconButton";
+export { default as Breadcrumbs } from "./components/Breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbItem } from "./components/Breadcrumbs";
+export { default as SidebarMenu } from "./components/SidebarMenu";
+export type { SidebarMenuProps, SidebarMenuItem, SidebarMenuItemState } from "./components/SidebarMenu";
+export { default as Delimeter } from "./components/Delimeter";
+export { default as ShadowedBlock } from "./components/ShadowedBlock";
+export type { ShadowedBlockProps } from "./components/ShadowedBlock";
+export { default as LayoutBlock } from "./components/LayoutBlock";
+export type { LayoutBlockProps } from "./components/LayoutBlock";
+export { default as DetailItem } from "./components/DetailItem";
+export type { DetailItemProps } from "./components/DetailItem";
+export { default as InformationPanel } from "./components/InformationPanel";
+export type { InformationPanelProps, InformationItem } from "./components/InformationPanel";
+export { default as DropdownButton } from "./components/DropdownButton";
+export type { DropdownButtonProps, DropdownOption } from "./components/DropdownButton";
+export { default as CollapsibleFields } from "./components/CollapsibleFields";
+export type { CollapsibleFieldsProps } from "./components/CollapsibleFields";
+export { default as Pagination } from "./components/Pagination";
+export type { PaginationProps } from "./components/Pagination";
+export { default as FormActionButtons } from "./components/FormActionButtons";
+export type { FormActionButtonsProps } from "./components/FormActionButtons";
+export { default as Tabs } from "./components/Tabs";
+export type { TabsProps, TabItem, TabsVariant, TabsSize } from "./components/Tabs";
+export { default as Tooltip } from "./components/Tooltip";
+export type { TooltipProps, TooltipSide, TooltipAlign } from "./components/Tooltip";
+export { default as Popover } from "./components/Popover";
+export type { PopoverProps, PopoverSide, PopoverAlign } from "./components/Popover";
+export { default as SearchInput } from "./components/SearchInput";
+export type { SearchInputProps } from "./components/SearchInput";
+export { default as FileUpload } from "./components/FileUpload";
+export type { FileUploadProps, FileUploadSize, FileUploadState } from "./components/FileUpload";

package/dist/index.js

@@ -0,0 +1,35 @@
+export { default as Button } from "./components/Button";
+export { default as ContentLoader } from "./components/ContentLoader";
+export { default as SkeletonLoader } from "./components/SkeletonLoader";
+export { default as TextField } from "./components/TextField";
+export { default as TextareaField } from "./components/TextareaField";
+export { default as CheckboxField } from "./components/CheckboxField";
+export { default as ToggleField } from "./components/ToggleField";
+export { default as Icon } from "./components/Icon";
+export { default as Card } from "./components/Card";
+export { default as Page } from "./components/Page";
+export { default as Badge, BadgeWithDot } from "./components/Badge";
+export { default as StatusBadge } from "./components/StatusBadge";
+export { default as Checkbox } from "./components/Checkbox";
+export { default as Toggle } from "./components/Toggle";
+export { default as Tag } from "./components/Tag";
+export { default as Avatar } from "./components/Avatar";
+export { default as IconButton } from "./components/IconButton";
+export { default as Breadcrumbs } from "./components/Breadcrumbs";
+export { default as SidebarMenu } from "./components/SidebarMenu";
+export { default as Delimeter } from "./components/Delimeter";
+export { default as ShadowedBlock } from "./components/ShadowedBlock";
+export { default as LayoutBlock } from "./components/LayoutBlock";
+export { default as DetailItem } from "./components/DetailItem";
+export { default as InformationPanel } from "./components/InformationPanel";
+export { default as DropdownButton } from "./components/DropdownButton";
+export { default as CollapsibleFields } from "./components/CollapsibleFields";
+export { default as Pagination } from "./components/Pagination";
+export { default as FormActionButtons } from "./components/FormActionButtons";
+export { default as Tabs } from "./components/Tabs";
+// Tooltip / Popover — primitive shells exported but not yet adopted in host.
+// First real wiring should land on truncated table cells / kebab menus.
+export { default as Tooltip } from "./components/Tooltip";
+export { default as Popover } from "./components/Popover";
+export { default as SearchInput } from "./components/SearchInput";
+export { default as FileUpload } from "./components/FileUpload";

package/dist/styles/Avatar.css

@@ -0,0 +1,47 @@
+/* =====================================================================
+ * DS Avatar
+ * Mirrors Figma `Avatar` set (sm 32 / md 40 / lg 48).
+ * ===================================================================== */
+
+.ds-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-pill);
+    background-color: var(--surface-brand-minimal);
+    color: var(--text-brand);
+    font-family: var(--font-family-base);
+    font-weight: var(--font-weight-semibold);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.ds-avatar--sm {
+    width: 32px;
+    height: 32px;
+    font-size: var(--font-size-sm);
+}
+
+.ds-avatar--md {
+    width: 40px;
+    height: 40px;
+    font-size: var(--font-size-base);
+}
+
+.ds-avatar--lg {
+    width: 48px;
+    height: 48px;
+    font-size: var(--font-size-lg);
+}
+
+.ds-avatar__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.ds-avatar__initials {
+    line-height: 1;
+    letter-spacing: 0.02em;
+}